/* intranet.css · Version 253 · 28.10.2026 09:24 */ :root{ --canvas:#eef2f5; --ink:#2f3a45; --sub:var(--fi-content-muted-color,#7d8a96); --navy:#2f3a45; --navy-2:#4a5560; --accent:#1592e6; --teal:#1592e6; --fi-accent:var(--accent); --fi-accent-hover:#0b84d4; --fi-accent-soft:#e3f4fd; --fi-accent-text:#0b74bd; --fi-block:var(--canvas); --fi-block-strong:#dde4ea; --fi-row-selected-shadow:0 6px 18px rgba(47,58,69,.08); --line:#e1e7ec; --paper:#ffffff; --fi-font-base:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --fi-font-system:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fi-shadow-soft:0 1px 3px rgba(0,0,0,.06); --fi-shadow-float:0 8px 30px rgba(0,0,0,.12); --shadow:var(--fi-shadow-soft); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--canvas);color:var(--fi-text-p-color,var(--ink));font-family:var(--fi-text-p-font-family,system-ui),var(--fi-font-system),sans-serif;font-size:var(--fi-text-p-font-size,14px);line-height:var(--fi-text-p-line-height,1.5);-webkit-font-smoothing:antialiased} .ti{font-size:var(--fi-icon-size,18px);line-height:1;vertical-align:var(--fi-icon-inline-align,middle)} button,input,select,textarea{font:inherit} button{touch-action:manipulation} button:disabled{cursor:not-allowed;opacity:var(--fi-disabled-opacity,.55)} [hidden]{display:none!important} .page{max-width:none;margin:0;padding:var(--fi-page-padding-y,0px) var(--fi-page-padding-x,0px) var(--fi-page-padding-bottom,0px)} .hero{position:relative;isolation:isolate;min-height:0;padding:0 16px;background:var(--canvas);color:var(--ink);border:0;border-radius:0;box-shadow:none} .hero:before,.hero:after{content:none} .head,.head-actions{display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;gap:12px;letter-spacing:.19em;text-transform:uppercase;font:700 11px system-ui,sans-serif;color:var(--sub)} .brand-mark{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:var(--accent);color:#2f3a45;font-size:19px;box-shadow:var(--fi-shadow-float)} .head{align-items:flex-end} .eyebrow{margin:0 0 10px;color:var(--accent);font:var(--fi-text-small-font-weight,400) var(--fi-text-small-font-size,11px)/var(--fi-text-small-line-height,1.5) var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-small-letter-spacing,0px);text-transform:uppercase} h1,h2,h3,p{margin-top:0} h1{font:var(--fi-text-h1-font-weight,700) var(--fi-text-h1-font-size,28px)/var(--fi-text-h1-line-height,1.2) var(--fi-text-h1-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-h1-letter-spacing,0px);margin:0 0 var(--fi-text-h1-margin-bottom,8px)} .head-actions{justify-content:flex-end;flex-wrap:wrap;align-self:flex-end} .listener-warning{display:flex;align-items:center;gap:12px;margin:14px 3px 0;padding:13px 17px;border:1px solid #ff3b30;border-radius:13px;background:#fff1f0;color:var(--fi-status-error-color,#d70015);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);box-shadow:var(--fi-shadow-float)} .listener-warning .ti{flex:none;font-size:var(--fi-icon-size,18px)} @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(52,199,89,0)}} .btn,.tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--fi-button-gap,7px);border:var(--fi-button-border-width,1px) solid var(--line);border-radius:var(--fi-button-radius,999px);background:#fff;color:var(--ink);padding:var(--fi-button-padding-y,7px) var(--fi-button-padding-x,14px);text-decoration:none;cursor:pointer;font-size:var(--fi-button-font-size,12px);font-weight:var(--fi-button-font-weight,600);line-height:1.3;transition:background .15s,border-color .15s} .btn:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.tab:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled):not([aria-disabled="true"]){background:var(--fi-hover-background,#f3f6f8);border-color:var(--fi-hover-border-color,#d7dee4)} .btn-danger,.fi-btn--danger{background:#fff5e6;border-color:#ffe0b3;color:#d70015} .btn-danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#ffe0b3;border-color:#ffe0b3} .btn.done,.fi-btn--success{background:var(--fi-pair-gruen-surface);color:var(--fi-pair-gruen-text);border-color:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))} .ti-puzzle-filled:before{ content:""; display:inline-block; width:1em; height:1em; vertical-align:var(--fi-icon-inline-align,middle); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a3 3 0 0 1 2.995 2.824l.005 .176v1h3a2 2 0 0 1 1.995 1.85l.005 .15v3h1a3 3 0 0 1 .176 5.995l-.176 .005h-1v3a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-1a1 1 0 0 0 -1.993 -.117l-.007 .117v1a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h1a1 1 0 0 0 .117 -1.993l-.117 -.007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h3v-1a3 3 0 0 1 3 -3z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a3 3 0 0 1 2.995 2.824l.005 .176v1h3a2 2 0 0 1 1.995 1.85l.005 .15v3h1a3 3 0 0 1 .176 5.995l-.176 .005h-1v3a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-1a1 1 0 0 0 -1.993 -.117l-.007 .117v1a2 2 0 0 1 -1.85 1.995l-.15 .005h-3a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h1a1 1 0 0 0 .117 -1.993l-.117 -.007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-3a2 2 0 0 1 1.85 -1.995l.15 -.005h3v-1a3 3 0 0 1 3 -3z'/%3E%3C/svg%3E") center/contain no-repeat; } .btn.done:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--success:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))} .section{padding:var(--fi-block-gap,20px) 0 0} .fi-call-section{padding-top:0} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 12px} .section-head h2{font:var(--fi-text-h2-font-weight,700) var(--fi-text-h2-font-size,18px)/var(--fi-text-h2-line-height,1.2) var(--fi-text-h2-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-h2-letter-spacing,0px);margin:0 0 var(--fi-text-h2-margin-bottom,8px)} .section-head p{color:var(--sub);margin:0;font-size:var(--fi-text-p-font-size,14px)} .section-kicker{color:var(--fi-content-accent-color,#2f3a45);font:var(--fi-text-small-font-weight,400) var(--fi-text-small-font-size,11px)/var(--fi-text-small-line-height,1.5) var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-small-letter-spacing,0px);text-transform:uppercase;margin-bottom:7px} .workspace{min-width:0;background:var(--paper);border:0;border-radius:var(--fi-box-shell-radius,0px);box-shadow:none;overflow:hidden} .workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-toolbar-gap,10px);padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px);border-bottom:var(--fi-toolbar-border-width,1px) solid var(--line);flex-wrap:wrap} .employee-filters{display:flex;align-items:center;gap:10px;min-width:0;max-width:min(600px,45vw);padding:6px 7px;overflow-x:auto;scrollbar-color:#d7dee4 transparent} .employee-filter{position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:1px solid #e1e7ec;border-radius:50%;background:#f3f6f8;color:var(--sub);text-decoration:none;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,box-shadow .15s} .employee-filter:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){border-color:var(--fi-hover-border-color,#d7dee4);background:var(--fi-hover-background,#f3f6f8)} .employee-filter.has-calls{background:#d70015;border-color:#d70015;color:var(--fi-content-inverse-color,#ffffff);animation:employee-alert 1.6s ease-in-out infinite} .employee-filter.has-calls:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#d70015} .employee-filter.is-speaking,.employee-filter.has-calls.is-speaking,.employee-filter.is-speaking:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.employee-filter.has-calls.is-speaking:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#a05a00;border-color:#a05a00;color:var(--fi-status-warning-color,#a05a00);animation:none;box-shadow:0 0 0 3px rgba(255,204,0,.16)} .employee-filter.selected{outline:var(--fi-focus-width,3px) solid var(--fi-list-active-border-color,#2f3a45);outline-offset:var(--fi-focus-offset,3px)} @keyframes employee-alert{50%{box-shadow:0 0 0 5px rgba(255,59,48,.24)}} @media(prefers-reduced-motion:reduce){.employee-filter.has-calls{animation:none}} .tabs{display:flex;align-items:center;gap:var(--fi-tabs-gap,2px);padding:var(--fi-tabs-padding,3px);border:1px solid var(--line);border-radius:var(--fi-tabs-radius,999px);background:var(--fi-tab-background,#f3f6f8);max-width:100%;min-width:0;overflow-x:auto} .tab{border:1px solid transparent;background:transparent;color:var(--fi-tab-color,#7d8a96);padding:var(--fi-tab-padding-y,6px) var(--fi-tab-padding-x,16px);border-radius:var(--fi-tab-radius,999px);font-size:var(--fi-tab-font-size,12px);font-weight:var(--fi-tab-font-weight,600);white-space:nowrap} .tab.active{background:var(--fi-tab-active-background,#fff);border-color:var(--line);color:var(--fi-tab-active-color,#2f3a45);box-shadow:var(--fi-shadow-soft)} .tab.active:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-tab-active-background,#fff)} .tab i{font-size:var(--fi-button-icon-size,16px)} .search-wrap{position:relative;display:flex;align-items:center;min-width:260px;width:min(340px,100%);color:var(--sub)} .workspace-toolbar .search-wrap{flex:none} .search-wrap i{position:absolute;left:13px;pointer-events:none;font-size:var(--fi-search-icon-size,15px)} .search-wrap input{width:100%;height:var(--fi-control-height,43px);min-height:var(--fi-control-height,43px);padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px) var(--fi-control-padding-y,11px) calc(var(--fi-control-padding-x,13px) + 26px);border:var(--fi-control-border-width,1px) solid var(--line);border-radius:var(--fi-control-radius,10px);background:#fff;color:var(--ink);font-size:var(--fi-control-font-size,14px);outline:0} .search-wrap input::placeholder{color:#9aa7b3} .search-wrap input:focus{border-color:var(--fi-control-focus-border-color,#2f3a45);background:#fff} .list-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 18px;border-bottom:1px solid var(--line);background:#ffffff;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .list-meta strong{color:var(--sub)} .box{overflow:auto;max-height:min(82vh,1060px);scrollbar-color:#d7dee4 transparent} .fi-table th,.fi-table td{text-align:left;vertical-align:middle} .call-time{font-variant-numeric:tabular-nums;color:var(--sub);font-weight:var(--fi-text-strong-font-weight,700);white-space:nowrap} .direction-icons{display:inline-flex;align-items:center;gap:1px;flex:none;white-space:nowrap;vertical-align:middle} .direction-icons .ti{font-size:var(--fi-icon-size,18px);line-height:1} .direction-icons.status-missed{color:var(--fi-status-error-color,#d70015)}.direction-icons.status-answered{color:var(--fi-pair-gruen-text)}.direction-icons.status-active{color:var(--fi-status-warning-color,#a05a00)}.direction-icons.status-pending{color:var(--fi-status-warning-color,#a05a00)}.direction-icons.status-neutral{color:var(--sub)} @keyframes active-call-pulse{50%{box-shadow:0 0 0 5px rgba(255,204,0,.2)}} .fi-table tbody tr.missed .fi-table td:first-child{box-shadow:inset 3px 0 #ff3b30} .fi-table tbody tr.missed .fi-table td{background:#fff5e6} .link{border:0;background:none;color:var(--fi-content-link-color,#2f3a45);padding:0;cursor:pointer;text-align:left;font-weight:var(--fi-text-strong-font-weight,700)} .link:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){text-decoration:underline;color:var(--fi-content-accent-color,#4a5560)} .contact-open{font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5);display:inline-flex;align-items:center;gap:4px;min-width:0;overflow-wrap:anywhere} .contact-open:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){text-decoration:none} .contact-open:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)) b{text-decoration:underline} .contact-alarm[hidden]{display:none} .callback-history{min-width:0}.callback-history small{font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5);margin:0 0 2px} .contact-open b{font-weight:var(--fi-text-strong-font-weight,700)} .contact-company{font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--sub)} .actions .btn i{font-size:var(--fi-button-icon-size,16px);text-align:center;} .category-icon{width:25px;height:25px;flex:none;display:inline-grid;place-items:center;border-radius:7px;background:#e3e9ee;color:var(--fi-content-accent-color,#2f3a45);font-size:var(--fi-icon-size,18px)} small,.muted{display:block;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} .actions{white-space:normal;min-width:0} .actions .btn{margin:1px 3px 1px 0} .empty{text-align:center;padding:58px;color:var(--sub)} .search-empty{text-align:center;padding:38px 16px;color:var(--sub)} .search-empty i{display:block;margin-bottom:9px;font-size:var(--fi-icon-size,18px);color:var(--sub)} .workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-toolbar-gap,10px);flex-wrap:wrap;padding:12px 20px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);border-top:1px solid var(--line)} .call-context{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);overflow:hidden} .call-context:empty{display:none} .call-context-row{padding:11px 14px;border-bottom:1px solid var(--line)}.call-context-row:last-child{border-bottom:0} .call-context-main{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:start;gap:9px} .call-context-stamp{display:flex;flex-direction:column;gap:2px;padding-top:1px;white-space:nowrap;font-variant-numeric:tabular-nums} .call-context-date{color:var(--sub);}.call-context-person{min-width:0} .call-context-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}.call-context-name :is(b,strong){overflow-wrap:anywhere} .call-context-person small{margin-top:3px}.call-context-state{display:flex;align-items:center;flex-wrap:wrap;gap:7px;background:#f3f6f8} .call-context-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px} .call-context-fact{min-width:0}.call-context-label{display:block;color:var(--sub);margin-bottom:3px}.call-context-fact :is(b,strong){display:block;color:var(--sub);overflow-wrap:anywhere} .call-context-activity{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#ffffff} .call-context-comment{width:100%;padding:9px 10px;border:1px solid #e1e7ec;border-radius:8px;background:#f3f6f8;color:var(--sub);overflow-wrap:anywhere} .contact-alarm{display:flex;align-items:flex-start;gap:10px;margin:0 0 15px;padding:12px 14px;border:1px solid #ffd4d1;border-radius:11px;background:#fff1f0;color:var(--fi-status-error-color,#d70015);white-space:pre-wrap;overflow-wrap:anywhere} .contact-alarm .ti{flex:none;font-size:var(--fi-icon-size,18px);line-height:1}.contact-alarm strong{display:block;font-size:var(--fi-text-strong-font-size,14px);margin-bottom:4px}.contact-alarm span{display:block;font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} .field>label:not(.fi-check):not(.fi-switch), .field-label, .fi-field>label:not(.fi-check):not(.fi-switch), .fi-field:not(.fi-checkbox-field)>span:not(.fi-help):not(.fi-error){display:block;color:#7d8a96;font-size:var(--fi-control-label-font-size,12px);font-weight:var(--fi-control-label-font-weight,700);margin-bottom:var(--fi-control-label-gap,7px)} .contact-match-list{max-height:210px;overflow:auto;border:var(--fi-control-border-width,1px) solid #e1e7ec;border-radius:10px;background:#f3f6f8;padding:5px;min-height:48px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .contact-match span:last-child{min-width:0}.contact-match strong{display:block;font-size:var(--fi-button-font-size,12px)}.contact-match small{margin-top:2px} .comment{background:#f3f6f8;border:1px solid #e1e7ec;padding:12px;border-radius:10px;margin:8px 0} .dial-matches{margin-top:8px;max-height:220px;overflow:auto} .dial-match small{margin-top:3px} .dial-match-empty{display:flex;align-items:center;gap:8px} .dial-match-empty{padding:9px 10px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .dial-match .category-icon,.contact-match .category-icon{width:26px;height:26px} .dial-matches .muted{padding:7px 2px} .dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px auto;max-width:310px} .dialerror{color:var(--fi-status-error-color,#d70015);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .dialerror:empty,.manager-success:empty{display:none} #asave,#dsave,#wsave{background:#2f3a45;color:var(--fi-content-inverse-color,#ffffff);border-color:#2f3a45} #asave:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),#dsave:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),#wsave:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#4a5560} .manager-success{min-height:17px;color:var(--fi-pair-gruen-text);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)}.manager-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px;padding-top:18px;border-top:1px solid var(--line)} @media(max-width:1180px){.page{padding:var(--fi-page-padding-y,16px) var(--fi-page-padding-x,24px) var(--fi-page-padding-bottom,48px)}} @media(max-width:760px){ .page{padding:0 var(--fi-page-mobile-padding,12px) var(--fi-page-padding-bottom,48px)} .hero{border-radius:0 0 20px 20px;padding:20px;min-height:0} .head{display:block} h1{font-size:var(--fi-text-h1-font-size,28px)} .head-actions{justify-content:flex-start;margin-top:24px} .section{padding:var(--fi-block-gap,20px) 0 0} .section-head{padding:0 3px;align-items:start} .section-head h2{font-size:var(--fi-text-h2-font-size,18px)} .workspace{border-radius:var(--fi-box-shell-radius,16px)} .workspace-toolbar{padding:12px;display:block} .tabs{width:100%;overflow:auto;justify-content:space-between} .tab{flex:1} .employee-filters{max-width:100%;width:100%;margin-top:9px} .search-wrap{margin-top:12px;width:100%} .list-meta{padding:9px 14px} .box{max-height:none;overflow:visible} .call-context-row{padding:10px 12px}.call-context-facts{gap:9px} } @media(max-width:390px){.hero{padding-left:16px;padding-right:16px}.tab{font-size:var(--fi-tab-font-size,12px);padding:var(--fi-tab-padding-y,10px) var(--fi-tab-padding-x,15px)}.head-actions{gap:8px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Schwebender Hinweis für eingehende Anrufe */ .incoming-popup{position:fixed;top:18px;right:18px;z-index:1050;width:min(380px,calc(100vw - 24px));box-sizing:border-box;padding:20px;border:1px solid #e1e7ec;border-radius:20px;background:#fff;box-shadow:var(--fi-shadow-float);color:var(--fi-text-p-color,#2f3a45)} .incoming-popup[hidden]{display:none} /* Hinweis neue E-Mails: Rahmen wie eingehender Anruf, Einträge als Listenzeilen der Mailliste. */ .fi-mail-notify{z-index:1049;padding:16px} .fi-mail-notify .incoming-ring{animation:none} .fi-mail-notify-list{display:grid;gap:4px;margin:12px -6px 0} .fi-mail-notify-more{display:block;margin:8px 0 0;color:var(--fi-accent,#1592e6);font-size:var(--fi-text-small-font-size,12px);text-decoration:none} .fi-mail-notify-more:hover{text-decoration:underline} .incoming-top{display:flex;align-items:center;gap:12px}.incoming-top h2{margin:1px 0 0;}.incoming-eyebrow{;color:var(--fi-content-link-color,#2f3a45)}.incoming-ring{width:42px;height:42px;border-radius:13px;background:#eef2f5;color:var(--fi-content-link-color,#2f3a45);display:grid;place-items:center;font-size:var(--fi-text-p-font-size,14px);animation:incomingPulse 1.7s infinite}.incoming-dismiss{margin-left:auto;align-self:flex-start;cursor:pointer;}.incoming-person{display:flex;flex-direction:column;gap:2px;margin:18px 0 5px}.incoming-person span,.incoming-route{color:var(--sub)}.incoming-route{;margin-bottom:16px}.incoming-label{display:block;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);margin:0 0 6px}.incoming-popup select{width:100%}.incoming-message{min-height:20px;font-size:var(--fi-text-small-font-size,11px);margin:8px 0;color:var(--fi-status-error-color,#d70015)}.incoming-answer{width:100%;justify-content:center}.incoming-answer:disabled{opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed}@keyframes incomingPulse{50%{box-shadow:0 0 0 9px rgba(0,0,0,.13)}}@media(max-width:480px){.incoming-popup{top:8px;right:8px;width:calc(100vw - 16px)}}@media(prefers-reduced-motion:reduce){.incoming-ring{animation:none}} /* Gesprächsakte nach Annahme */ .fi-dialog.live-editor{display:flex;flex-direction:column;overflow:hidden} .live-editor>.fi-dialog-header{flex:none;align-items:flex-start} .live-editor>.fi-dialog-body{min-height:0;overflow:auto} .tapi-logout{margin:0;display:inline-flex} .tapi-logout .btn{white-space:nowrap} /* v10.62: Icons vor dem Anrufernamen in der Hauptliste. */ #rows .contact-open .ti{font-size:var(--fi-icon-size,18px)} /* v10.66: Farbe und Ausblenden bleiben bei Live-Aktualisierung synchron. */ /* v10.68: Rückruf-Erinnerungen. */ .reminder-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0} /* v10.69: Erinnerung neben Rückruf, Zeitpunkt im Zuweisungs-Badge. */ /* v10.70: Einheitliche Icon-Buttons und farbunabhängiger Hinweis. */ /* v10.71: Kompakter Hinweis für verpasste Anrufe. */ /* v10.72: Gebündelte Anrufversuche. */ /* v10.75: Fälligkeit unabhängig von Farben erkennbar. */ /* v10.80: Datumsfilter verwendet dieselbe Filterleiste wie die Ansichtsauswahl. */ .call-date-filter.tabs{align-items:center;flex-wrap:wrap;gap:var(--fi-tabs-gap,5px);width:max-content;max-width:calc(100% - 36px);margin:0 18px 12px;padding:var(--fi-tabs-padding,4px)} .call-date-filter label{display:flex;align-items:center;gap:7px;margin:0;padding:0 7px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);white-space:nowrap} .call-date-filter input[type="date"]{width:auto;min-width:0;outline:0;} @media(max-width:600px){.call-date-filter.tabs{width:auto;max-width:none;margin:0 12px 12px}.call-date-filter label{flex:1}.call-date-filter input[type="date"]{width:100%;}} /* v10.81: Datumsfilter in der Zeile mit der Anrufanzahl. */ .list-meta{flex-wrap:wrap;gap:10px} .list-meta .call-date-filter.tabs{margin:0 0 0 auto;max-width:100%;width:auto} @media(max-width:600px){.list-meta .call-date-filter.tabs{margin:0;flex-basis:100%}} /* v10.84: Benutzer oben rechts, Aktionen unten rechts. */ .hero{display:flex;flex-direction:row;align-items:center;gap:16px} .hero .head{justify-content:flex-end;margin-top:auto;width:100%} .hero .head-actions{justify-content:flex-end;width:100%} @media(max-width:600px){.hero .head-actions{gap:8px}} /* * FULLAND Intranet v0.1.1 – Ergänzungen zur Original-CSS der Anrufverwaltung. * Oberhalb steht die unveränderte anrufe-ui.css aus v10.84. * Die Vorschau nutzt deren Originalklassen für gemeinsame Komponenten. * fi- ergänzt nur Layout, neue Zustände und native SVG-/Dialog-Elemente. */ .fi-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .fi-skip-link{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:1000;background:var(--paper);padding:8px 16px;border-radius:10px} .fi-skip-link:focus{transform:translateY(0)} .fi-icon{width:18px;height:18px;display:inline-block;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .fi-app-header{ position:sticky;top:0;z-index:20;min-height:48px;padding-block:6px;margin-bottom:0;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap} .fi-app-header .fi-btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)} .fi-app-header .fi-btn--ghost:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .fi-shell{display:block} .fi-sidebar{ margin:0; padding:8px; border:0; border-right:1px solid var(--line); border-radius:0; background:var(--paper); box-shadow:none; } .fi-nav{ display:flex; align-items:center; gap:var(--fi-navigation-gap,5px); overflow-x:auto; scrollbar-width:thin; scrollbar-color:#d7dee4 transparent; } /* Shared navigation item; module classes only describe their grid/position. */ .fi-nav-item{display:inline-flex;align-items:center;gap:var(--fi-navigation-item-gap,8px);flex:none;min-width:0;min-height:var(--fi-navigation-min-height,40px);padding:var(--fi-navigation-padding-y,9px) var(--fi-navigation-padding-x,12px);border-radius:var(--fi-navigation-radius,10px);color:var(--sub);font-family:var(--fi-navigation-font-family,system-ui,sans-serif);font-size:var(--fi-navigation-font-size,12px);font-weight:var(--fi-navigation-font-weight,750);text-decoration:none;white-space:nowrap} .fi-nav-item .ti{font-size:var(--fi-navigation-icon-size,18px)} .fi-nav-item:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-navigation-hover-background,#f3f6f8);color:var(--fi-text-p-color,#2f3a45)} .fi-nav-item[aria-current="page"],.fi-nav-item.active{background:var(--fi-navigation-active-background,#e3e9ee);color:var(--fi-content-accent-color,#2f3a45)} .fi-main{min-width:0;width:100%;padding:0} .fi-shell--management{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:0;align-items:stretch} .fi-management-sidebar{position:sticky;top:48px;align-self:start;height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;min-width:0} .fi-management-sidebar nav,.fi-management-nav-group{display:grid;gap:var(--fi-navigation-gap,5px)} .fi-management-sidebar nav{gap:var(--fi-section-padding,12px)} .fi-management-nav-group>.fi-nav-item{white-space:normal} .fi-management-nav-group[aria-label="Designbereiche"]{padding-inline-start:var(--fi-navigation-padding-x,12px)} @media(max-width:800px){ .fi-shell--management{grid-template-columns:minmax(0,1fr)} .fi-management-sidebar{position:static;max-height:none} .fi-management-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:480px){.fi-management-sidebar nav{grid-template-columns:minmax(0,1fr)}} .fi-page-heading{ display:flex; align-items:center; justify-content:space-between; gap:var(--fi-block-gap,12px); min-height:48px; margin:0; padding:6px 16px; background:var(--canvas); } .fi-page-heading>div:first-child{min-width:0} .fi-page-heading h1{ display:flex; align-items:center; gap:var(--fi-inline-gap,8px); margin:0; color:var(--fi-text-h1-color,#2f3a45); font-size:var(--fi-text-h1-font-size,28px); line-height:var(--fi-text-h1-line-height,1.2); } .fi-page-heading h1>.ti{ flex:none; color:currentColor; font-size:var(--fi-icon-size,18px); font-weight:400; } .fi-page-heading>.fi-row, .fi-page-heading>.head-actions, .fi-page-heading>.manager-actions{ align-self:center; margin:0; padding:0; border:0; } .fi-page-heading p{margin:0} .fi-card{min-width:0;margin-bottom:0} .fi-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-block-gap,20px);padding:var(--fi-content-padding,20px);border-bottom:1px solid var(--line)} .fi-card-header h2{margin:0;font:var(--fi-text-h2-font-weight,700) var(--fi-text-h2-font-size,18px)/var(--fi-text-h2-line-height,1.2) var(--fi-text-h2-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-h2-letter-spacing,0px)} .fi-card-body{padding:var(--fi-content-padding,20px)} .fi-card-footer{padding:var(--fi-section-padding,12px) var(--fi-content-padding,20px);border-top:1px solid var(--line);background:var(--paper)} .fi-grid{display:grid;gap:var(--fi-block-gap,20px);grid-template-columns:repeat(2,minmax(0,1fr))} .fi-stack{display:grid;gap:var(--fi-block-gap,20px)} .fi-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-inline-gap,8px)} .fi-row>.fi-field-inline{flex:1;min-width:0;max-width:280px} .fi-muted{--fi-text-small-color:var(--sub);color:var(--sub)} .fi-btn--icon{display:inline-grid;place-items:center;flex:none;width:var(--fi-icon-button-size,36px);height:var(--fi-icon-button-size,36px);min-width:var(--fi-icon-button-size,36px);min-height:var(--fi-icon-button-size,36px);padding:0;border-radius:var(--fi-button-radius,10px)} /* Gleiche Farben und Größen wie Rückruf / Erinnerung in der Anrufliste. */ .fi-btn--soft{background:#eef2f5;border-color:#e1e7ec;color:#2f3a45} .fi-btn--soft:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#e1e7ec;border-color:#2f3a45} /* Zentrale Button-Farbtöne aus dem UI-System. */ .fi-btn--tone-neutral,.fi-choice{background:#fff!important;border-color:var(--line)!important;color:#4a5560!important} .fi-btn--tone-neutral:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-choice:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-choice.selected{background:var(--fi-hover-background,#f3f6f8)!important;border-color:var(--fi-hover-border-color,#d7dee4)!important} .fi-btn--tone-primary{background:#1592e6!important;border-color:#1592e6!important;color:#fff!important} .fi-btn--tone-primary:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#0b84d4!important;border-color:#0b84d4!important} .fi-btn--tone-success{background:var(--fi-pair-gruen-surface)!important;border-color:var(--fi-pair-gruen-surface)!important;color:var(--fi-pair-gruen-text)!important} .fi-btn--tone-success:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important;border-color:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important} .fi-btn--tone-warning{background:#fff9e0!important;border-color:#fff9e0!important;color:#a05a00!important} .fi-btn--tone-warning:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#ffeba3!important;border-color:#ffeba3!important} .fi-btn--tone-danger{background:var(--fi-pair-rot-surface)!important;border-color:var(--fi-pair-rot-surface)!important;color:var(--fi-pair-rot-text)!important} .fi-btn--tone-danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#ffd4d1!important;border-color:#ffd4d1!important} .fi-btn--tone-info{background:#eef2f5!important;border-color:#eef2f5!important;color:#2f3a45!important} .fi-btn--tone-info:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#e1e7ec!important;border-color:#e1e7ec!important} .fi-btn--tone-teal{background:#eef2f5!important;border-color:#eef2f5!important;color:#2f3a45!important} .fi-btn--tone-teal:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#e1e7ec!important;border-color:#e1e7ec!important} .fi-btn--tone-violet{background:#f7effc!important;border-color:#f7effc!important;color:#8944ab!important} .fi-btn--tone-violet:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#e6d0f5!important;border-color:#e6d0f5!important} .fi-btn--tone-dark{background:#2f3a45!important;border-color:#2f3a45!important;color:#fff!important} .fi-btn--tone-dark:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#4a5560!important;border-color:#4a5560!important} /* Zustandsfarben aus dem UI-System: Aktiv/Hover und Inaktiv. */ .fi-btn--active-tone-neutral:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-neutral.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-neutral[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)!important;border-color:var(--fi-hover-border-color,#d7dee4)!important;color:#4a5560!important} .fi-btn--active-tone-primary:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-primary.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-primary[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#0b84d4!important;border-color:#0b84d4!important;color:#fff!important} .fi-btn--active-tone-success:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-success.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-success[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important;border-color:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important;color:var(--fi-pair-gruen-text)!important} .fi-btn--active-tone-warning:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-warning.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-warning[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffeba3!important;border-color:#ffeba3!important;color:#a05a00!important} .fi-btn--active-tone-danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-danger.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-danger[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffd4d1!important;border-color:#ffd4d1!important;color:#d70015!important} .fi-btn--active-tone-info:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-info.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-info[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e1e7ec!important;border-color:#e1e7ec!important;color:#2f3a45!important} .fi-btn--active-tone-teal:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-teal.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-teal[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e1e7ec!important;border-color:#e1e7ec!important;color:#2f3a45!important} .fi-btn--active-tone-violet:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-violet.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-violet[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e6d0f5!important;border-color:#e6d0f5!important;color:#8944ab!important} .fi-btn--active-tone-dark:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled),.fi-btn--active-tone-dark.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-dark[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#4a5560!important;border-color:#4a5560!important;color:#fff!important} .fi-btn--inactive-tone-neutral:disabled,.fi-btn--inactive-tone-neutral.is-inactive,.fi-btn--inactive-tone-neutral[aria-disabled="true"]{background:#f3f6f8!important;border-color:#e1e7ec!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-primary:disabled,.fi-btn--inactive-tone-primary.is-inactive,.fi-btn--inactive-tone-primary[aria-disabled="true"]{background:#f3f6f8!important;border-color:#e1e7ec!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-success:disabled,.fi-btn--inactive-tone-success.is-inactive,.fi-btn--inactive-tone-success[aria-disabled="true"]{background:var(--fi-pair-gruen-surface)!important;border-color:var(--fi-pair-gruen-surface)!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-warning:disabled,.fi-btn--inactive-tone-warning.is-inactive,.fi-btn--inactive-tone-warning[aria-disabled="true"]{background:#fff9e0!important;border-color:#fff9e0!important;color:#a05a00!important;opacity:1} .fi-btn--inactive-tone-danger:disabled,.fi-btn--inactive-tone-danger.is-inactive,.fi-btn--inactive-tone-danger[aria-disabled="true"]{background:#fff1f0!important;border-color:#fff1f0!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-info:disabled,.fi-btn--inactive-tone-info.is-inactive,.fi-btn--inactive-tone-info[aria-disabled="true"]{background:#eef2f5!important;border-color:#eef2f5!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-teal:disabled,.fi-btn--inactive-tone-teal.is-inactive,.fi-btn--inactive-tone-teal[aria-disabled="true"]{background:#eef2f5!important;border-color:#eef2f5!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-violet:disabled,.fi-btn--inactive-tone-violet.is-inactive,.fi-btn--inactive-tone-violet[aria-disabled="true"]{background:#f7effc!important;border-color:#f7effc!important;color:#9aa7b3!important;opacity:1} .fi-btn--inactive-tone-dark:disabled,.fi-btn--inactive-tone-dark.is-inactive,.fi-btn--inactive-tone-dark[aria-disabled="true"]{background:#f3f6f8!important;border-color:#e1e7ec!important;color:#9aa7b3!important;opacity:1} .fi-badge--active-tone-neutral:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-neutral.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8);color:#4a5560} .fi-badge--active-tone-primary:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-primary.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e3f4fd;color:#0b74bd} .fi-badge--active-tone-success:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-success.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text));color:var(--fi-pair-gruen-text)} .fi-badge--active-tone-warning:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-warning.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffeba3;color:#a05a00} .fi-badge--active-tone-danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-danger.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffd4d1;color:#d70015} .fi-badge--active-tone-info:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-info.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e1e7ec;color:#2f3a45} .fi-badge--active-tone-teal:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-teal.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e1e7ec;color:#2f3a45} .fi-badge--active-tone-violet:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-violet.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#e6d0f5;color:#8944ab} .fi-badge--active-tone-dark:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-dark.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#4a5560;color:#fff} .fi-badge--inactive-tone-neutral.is-inactive,.fi-badge--inactive-tone-neutral[aria-disabled="true"]{background:#fff;color:#aeaeb2} .fi-badge--inactive-tone-primary.is-inactive,.fi-badge--inactive-tone-primary[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-success.is-inactive,.fi-badge--inactive-tone-success[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-warning.is-inactive,.fi-badge--inactive-tone-warning[aria-disabled="true"]{background:#fff;color:#a05a00} .fi-badge--inactive-tone-danger.is-inactive,.fi-badge--inactive-tone-danger[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-info.is-inactive,.fi-badge--inactive-tone-info[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-teal.is-inactive,.fi-badge--inactive-tone-teal[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-violet.is-inactive,.fi-badge--inactive-tone-violet[aria-disabled="true"]{background:#fff;color:#9aa7b3} .fi-badge--inactive-tone-dark.is-inactive,.fi-badge--inactive-tone-dark[aria-disabled="true"]{background:#f3f6f8;color:#9aa7b3} .fi-btn--wide{width:100%} .fi-contact-alarm{ display:inline-block; vertical-align:var(--fi-icon-inline-align,middle); margin-inline-end:var(--fi-contact-alarm-gap,5px); font-size:var(--fi-contact-alarm-icon-size,16px); color:var(--fi-contact-alarm-color,#d70015); line-height:1; background:transparent; border:0; padding:0; } .fi-badge{display:inline-flex;align-items:center;gap:var(--fi-badge-gap,5px);max-width:100%;min-height:var(--fi-badge-height,24px);padding:var(--fi-badge-padding-y,5px) var(--fi-badge-padding-x,9px);border:var(--fi-badge-border-width,1px) solid var(--line);border-radius:var(--fi-badge-radius,999px);background:#fff;color:var(--ink);font-size:var(--fi-badge-font-size,11px);font-weight:var(--fi-badge-font-weight,600);line-height:1.3;white-space:nowrap} .fi-badge>.ti{flex:none;font-size:var(--fi-badge-icon-size,14px);line-height:1;} .fi-badge>span{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2} .fi-badge--compact{ min-height:calc(var(--fi-badge-height,24px) * .8); padding:calc(var(--fi-badge-padding-y,5px) * .6) calc(var(--fi-badge-padding-x,9px) * .7); font-size:calc(var(--fi-badge-font-size,10px) * .9); } .fi-badge--compact>.ti{ font-size:calc(var(--fi-badge-icon-size,14px) * .8); } .fi-badge--count{justify-content:center;min-width:var(--fi-badge-height,24px);gap:0;font-variant-numeric:tabular-nums} .fi-badge>.fi-badge{ flex:none; overflow:visible; } .fi-badge--vorgang{width:max-content;min-width:max-content;flex-flow:row nowrap;white-space:nowrap;max-width:none;flex:none;gap:0;padding:0;overflow:hidden;border:0;align-items:stretch;font-variant-numeric:tabular-nums;vertical-align:middle} .fi-badge--vorgang>.fi-badge{flex-flow:row nowrap;white-space:nowrap;border:0;border-radius:0;max-width:none;overflow:visible;flex:none} /* In Listenzeilen und in der tabellarischen Aktenhistorie hat der Vorgangsbadge die Größe der kompakten Badges (Minibadge); Aufbau, Farben und Rahmen bleiben unverändert. */ :is(.fi-record-row,[data-history-flat]) .fi-badge--vorgang{min-height:calc(var(--fi-badge-height,24px) * .8)} :is(.fi-record-row,[data-history-flat]) .fi-badge--vorgang>.fi-badge{min-height:0;padding:calc(var(--fi-badge-padding-y,5px) * .6) calc(var(--fi-badge-padding-x,9px) * .7);font-size:calc(var(--fi-badge-font-size,10px) * .9)} :is(.fi-record-row,[data-history-flat]) .fi-badge--vorgang>.fi-badge>:is(.ti,svg.fi-icon){--fi-owned-icon-size:calc(var(--fi-badge-icon-size,14px) * .8);font-size:calc(var(--fi-badge-icon-size,14px) * .8)} .fi-badge--primary{background:#fff;color:#1592e6} .fi-badge--success{background:#fff;color:var(--fi-pair-gruen-text)} .fi-badge--warning{background:#fff;color:#a05a00} .fi-badge--danger{background:#fff;color:#d70015} .fi-badge--info{background:#fff;color:#2f3a45} .fi-badge--teal{background:#fff;color:#2f3a45} .fi-badge--violet{background:#fff;color:#8944ab} .fi-badge--dark,.fi-chat-message--user .fi-chat-message-content{background:#2f3a45;color:#fff} .fi-badge>.fi-icon{width:var(--fi-badge-icon-size,14px);height:var(--fi-badge-icon-size,14px)} .fi-badge--pulse{animation:active-call-pulse 1.5s ease-in-out infinite;} .fi-avatar{width:40px;height:40px;display:inline-grid;place-items:center;flex:none;border:1px solid #e1e7ec;border-radius:50%;background:#f3f6f8;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .fi-form-grid{display:grid;grid-template-columns:repeat(var(--fi-form-columns,2),minmax(0,1fr));gap:var(--fi-block-gap,20px)} .fi-form-grid--three{--fi-form-columns:3} .fi-form-grid>.field,.fi-form-grid>.fi-field{min-width:0;margin:0} .fi-form-grid>.full, .fi-form-grid>.fi-field--full{grid-column:1/-1} .fi-field{min-width:0} .fi-field--full{grid-column:1/-1} .fi-control::placeholder{color:#9aa7b3} .fi-control:disabled,.fi-control[readonly]{background:#f3f6f8} .fi-field .fi-control[aria-invalid="true"]{border-color:#d70015;background:#fff1f0} .fi-help{display:block;margin-top:6px;font-size:var(--fi-text-small-font-size,11px);color:var(--sub)} .fi-check{display:flex;align-items:center;min-height:var(--fi-control-height,43px);gap:var(--fi-checkbox-gap,8px);font-size:var(--fi-control-font-size,14px);cursor:pointer} .fi-check input{margin:0;flex:none} /* Die Vorschau hat sechs statt sieben Spalten; keine festen Anruf-Spaltenbreiten. */ .fi-table th:nth-child(n){width:auto} .fi-table caption{text-align:left;padding:12px 18px;font-weight:var(--fi-text-strong-font-weight,700)} .fi-table-actions{text-align:right;white-space:nowrap} .fi-table-actions .btn{margin:0} .fi-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid #e1e7ec;border-radius:11px;background:#eef2f5;color:var(--fi-content-link-color,#2f3a45);font-size:var(--fi-text-small-font-size,11px)} .fi-alert p{margin:0} .fi-alert--danger{border-color:#ffd4d1;background:#fff1f0;color:var(--fi-status-error-color,#d70015)} .fi-alert--warning{border-color:#ffcc00;background:#ffeba3;color:var(--fi-status-warning-color,#a05a00)} .fi-alert--success{border-color:var(--fi-pair-gruen-surface);background:var(--fi-pair-gruen-surface);color:var(--fi-pair-gruen-text)} .fi-dialog{width:min(var(--fi-dialog-width,560px),calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:var(--fi-dialog-radius,16px);background:#fff;color:var(--ink);box-shadow:var(--fi-shadow-float);overflow:auto} dialog.fi-dialog:not([open]){display:none!important} .fi-dialog.fi-dialog--scrollable{display:flex;flex-direction:column;overflow:hidden} .fi-dialog--scrollable>.fi-dialog-header,.fi-dialog--scrollable>.fi-dialog-footer{flex:none} .fi-dialog--scrollable>:where(.fi-dialog-body){flex:1;min-height:0;overflow:auto} .fi-dialog--scrollable>.fi-dialog-header>div{min-width:0;flex:1} .fi-dialog--scrollable>.fi-dialog-header>.fi-btn--icon{flex:none;align-self:center} .fi-dialog::backdrop{background:rgba(0,0,0,.18);backdrop-filter:blur(4px)} .fi-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-inline-gap,8px);padding:var(--fi-dialog-header-padding-y,20px) var(--fi-dialog-header-padding-x,27px);border-bottom:1px solid var(--line)} .fi-dialog-header h2{font:var(--fi-text-h2-font-weight,700) var(--fi-text-h2-font-size,18px)/var(--fi-text-h2-line-height,1.2) var(--fi-text-h2-font-family,system-ui,sans-serif),sans-serif;letter-spacing:var(--fi-text-h2-letter-spacing,0px);margin:0} .fi-dialog-body{padding:var(--fi-dialog-body-padding-y,20px) var(--fi-dialog-body-padding-x,27px)} .fi-dialog-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fi-inline-gap,8px);flex-wrap:wrap;padding:var(--fi-dialog-footer-padding-y,14px) var(--fi-dialog-footer-padding-x,27px);border-top:1px solid var(--line);background:var(--paper)} .fi-progress{height:var(--fi-progress-height,6px);border-radius:var(--fi-badge-radius,999px);background:var(--fi-progress-background,#f3f6f8);overflow:hidden} .fi-progress-bar{height:100%;width:var(--fi-progress-value,0%);background:var(--fi-progress-color,var(--teal));border-radius:inherit} @media(max-width:1100px){ .fi-grid{grid-template-columns:1fr} } @media(max-width:760px){ .fi-app-header{padding:8px 20px;gap:12px} .fi-page-heading{flex-direction:column;gap:var(--fi-inline-gap,8px)} .fi-card-header{padding:var(--fi-content-mobile-padding,16px);flex-wrap:wrap} .fi-card-body{padding:var(--fi-content-padding,20px)} .fi-form-grid{grid-template-columns:1fr} .fi-toolbar{padding:10px 12px;align-items:stretch} .fi-dialog-header{padding:var(--fi-dialog-header-padding-y,20px) var(--fi-dialog-header-padding-x,27px)} .fi-dialog-body{padding:var(--fi-dialog-body-padding-y,20px) var(--fi-dialog-body-padding-x,27px)} .fi-dialog-footer{padding:var(--fi-dialog-footer-padding-y,14px) var(--fi-dialog-footer-padding-x,27px)} } @media(prefers-reduced-motion:reduce){ .fi-badge--pulse{animation:none;} } @media print{ body{background:#fff} .fi-app-header,.fi-sidebar,.fi-toolbar{display:none!important} .fi-shell{display:block} .fi-card{box-shadow:none;break-inside:avoid} .fi-table-wrap{overflow:visible;max-height:none} .fi-table{min-width:0} } /* v0.2.0: Anmeldung und Zugangsverwaltung, gemeinsame Anruf-CSS bleibt Basis. */ .fi-login{max-width:460px;margin:8vh auto;padding:0 16px} .fi-login-brand{min-height:86px;padding:24px;margin-bottom:18px} .fi-login-card{padding:var(--fi-content-padding,20px);border-radius:12px} .fi-login-card h1{font-size:var(--fi-text-h1-font-size,28px)} .fi-login-card p{color:var(--sub);font-size:var(--fi-text-p-font-size,14px)} .fi-login-card .fi-check{margin:20px 0} .fi-branch-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .fi-branch-form select{max-width:160px;} @media(max-width:600px){ .fi-login{margin:24px auto} .fi-login-card{padding:var(--fi-content-padding,20px)} .fi-login-card .field select,.fi-login-card .field input{font-size:16px} } /* v0.3.0: Vollbreite für die übernommene kompakte Anrufliste. */ /* v0.4.0: Mitarbeiter-/Gruppenverwaltung mit zentralen Komponenten. */ .fi-staff-toolbar{align-items:center;gap:12px;flex-wrap:wrap} .fi-staff-search{align-items:center;gap:12px;flex-wrap:wrap} .fi-staff-search .search-wrap{flex:1;min-width:210px} .fi-member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;max-height:360px;overflow:auto;padding:2px} .fi-member-choice{border:1px solid var(--line);border-radius:10px;padding:12px;background:#f3f6f8} .fi-member-choice:has(input:checked){background:#eef2f5;border-color:#e1e7ec} .fi-member-choice small{display:block;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);margin-top:3px} .fi-member-choice:has(input:disabled){opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed} @media(max-width:760px){.fi-member-grid{grid-template-columns:1fr}.fi-staff-toolbar .tabs{flex-wrap:wrap}} /* Glocken-Workflow: Rückruf und persönliche Übergabe klar unterscheiden. */ .reminder-modal .field small{display:block;} .reminder-required{display:inline-block;margin-left:6px;padding:2px 5px;border-radius:5px;background:#fff1f0;color:var(--fi-status-error-color,#d70015);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);text-transform:uppercase;letter-spacing:var(--fi-text-small-letter-spacing,0px)} /* Kontaktakte: Stammdaten, Hinweise und Gesprächshistorie klar trennen. */ .contact-file-modal{display:flex;flex-direction:column;overflow:hidden} .contact-file-modal>.fi-dialog-header{flex:none;align-items:flex-start} .contact-file-modal>.fi-dialog-body{min-height:0;overflow:auto} .contact-file-fields:not(.fi-form-grid) .field{margin:8px 0} /* Gesprächsakte: Notiz, Zuweisung und Kontaktakte als ein Workflow. */ /* Eingehender Anruf: klare Identität, Routing und nahtloser Übergang zur Gesprächsakte. */ .incoming-popup{width:min(420px,calc(100vw - 24px))} .incoming-identity{margin:16px 0 14px;padding:14px;border:1px solid #e1e7ec;border-radius:14px;background:#f3f6f8} .incoming-person{margin:0;gap:3px} .incoming-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .incoming-person strong{;} .incoming-category{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#e3e9ee;color:var(--fi-content-accent-color,#2f3a45);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);letter-spacing:var(--fi-text-small-letter-spacing,0px);text-transform:uppercase} .incoming-company{color:var(--fi-text-p-color,#2f3a45)!important;} .incoming-route{margin:11px 0 0;padding-top:10px;border-top:1px solid #e1e7ec;color:var(--fi-content-link-color,#2f3a45)} .incoming-route:empty{display:none} .incoming-answer-box{padding-top:2px} .incoming-answer-box.is-finished .incoming-message{margin-top:0} .incoming-message:empty{min-height:8px} .incoming-answer{min-height:42px} @media(max-width:480px){.incoming-popup{width:calc(100vw - 16px)}.incoming-identity{padding:12px}} /* Dashboard: kompakte Übersicht nur für verpasste und zugewiesene Anrufe. */ .fi-dashboard-compact{overflow:hidden} .fi-dashboard-call-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line);background:#fff} .fi-dashboard-call-head h2{margin:var(--fi-text-h2-margin-top,0px) 0 var(--fi-text-h2-margin-bottom,8px);font-size:var(--fi-text-h2-font-size,18px)} .fi-dashboard-call-head p{margin:0} .fi-dashboard-call-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .fi-dashboard-stat{min-width:86px;padding:9px 11px;border:1px solid #e1e7ec;border-radius:11px;background:#f3f6f8;text-decoration:none;color:var(--ink);text-align:center} .fi-dashboard-stat:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){border-color:var(--fi-hover-border-color,#d7dee4);background:var(--fi-hover-background,#f3f6f8)} .fi-dashboard-stat strong{display:block;font-size:var(--fi-text-strong-font-size,14px);line-height:var(--fi-text-strong-line-height,1.5)} .fi-dashboard-stat span{display:block;margin-top:4px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);text-transform:uppercase;letter-spacing:var(--fi-text-small-letter-spacing,0px)} .fi-dashboard-stat.is-due{background:#fff9e0;border-color:#ffcc00} .fi-dashboard-call-list{display:grid;background:#fff} .fi-dashboard-call-item{display:grid;grid-template-columns:58px minmax(0,1fr) minmax(120px,190px) 18px;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none} .fi-dashboard-call-item:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .fi-dashboard-call-item.is-missed{box-shadow:inset 3px 0 #ff3b30} .fi-dashboard-call-item.is-due{background:#fff9e0} .fi-dashboard-call-time{font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--sub);font-variant-numeric:tabular-nums} .fi-dashboard-call-main{min-width:0} .fi-dashboard-call-name{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--fi-text-p-color,#2f3a45)} .fi-dashboard-call-name small{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .fi-dashboard-call-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px} .fi-dashboard-call-recipient{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .fi-dashboard-call-arrow{color:var(--sub);font-size:var(--fi-text-p-font-size,14px)} .fi-dashboard-compact .workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:12px} @media(max-width:760px){ .fi-dashboard-call-head{display:block} .fi-dashboard-call-stats{justify-content:flex-start;margin-top:12px} .fi-dashboard-call-item{grid-template-columns:48px minmax(0,1fr) 16px} .fi-dashboard-call-recipient{display:none} } /* Eigene Kontaktseite mit fester Liste und identischer Kontaktakte. */ .contacts-page{min-width:0} .contacts-record-panel{min-width:0;overflow:hidden} .contacts-record-panel .manager-actions{position:static;margin:0;padding:0;background:transparent;backdrop-filter:none;z-index:auto} @media(max-width:900px){ .contacts-record-panel{padding:0} .contacts-record-panel .manager-actions{margin:0;padding:0} } /* E-Mail-Arbeitsbereich */ .mail-page{min-width:0} .mail-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--fi-block-gap,20px);min-height:680px} .mail-sidebar{padding:10px;overflow:hidden} .mail-sidebar-title{display:flex;align-items:center;justify-content:space-between;padding:7px 8px 10px;color:var(--ink);font-size:var(--fi-text-small-font-size,11px)} .mail-sidebar-title span{color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-folder.fi-nav-item,.mail-account.fi-nav-item,.mail-subfolder.fi-nav-item{display:grid;white-space:normal} .mail-folder{grid-template-columns:var(--fi-navigation-icon-size,18px) minmax(0,1fr) auto} .mail-folder b,.mail-account>b{font-size:var(--fi-text-small-font-size,11px);color:var(--sub)} .mail-account-list{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .mail-account{grid-template-columns:31px minmax(0,1fr) auto} .mail-account-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#eef2f5;color:var(--fi-content-link-color,#2f3a45)} .mail-account strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;font-weight:inherit} .mail-account small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fi-text-small-font-size,11px)} .mail-thread-panel{overflow:hidden} .mail-thread-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)} .mail-thread-toolbar>form.fi-filter-bar{flex:1 1 100%;width:100%} .mail-thread-toolbar strong{display:block;font-size:var(--fi-text-strong-font-size,14px)} .mail-thread-toolbar span{display:block;margin-top:2px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-thread-list{display:grid} .mail-thread{position:relative;display:grid;grid-template-columns:max(var(--fi-mini-button-size,24px),calc(var(--fi-mini-button-icon-size,14px) + 2 * var(--fi-mini-button-padding,2px) + 2 * var(--fi-mini-button-border-width,0px))) minmax(0,1fr);align-items:center;gap:var(--fi-mini-button-column-gap,8px);padding:var(--fi-list-padding,14px);padding-left:min(4px,var(--fi-list-padding,14px));border-bottom:1px solid var(--line);color:var(--ink);background:#fff} .mail-thread:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .mail-thread.is-unread .mail-thread-subject,.mail-thread.is-unread .mail-thread-top strong{font-weight:var(--fi-list-unread-font-weight,700)} /* Ungelesene Betreffs bleiben fett, auch mit der zentralen Textvorgabe für kleinen Text. */ .mail-thread.is-unread .mail-thread-subject.fi-text-small{font-weight:var(--fi-list-unread-font-weight,700)!important} .mail-thread-main{border:0;background:transparent;text-align:left;font:inherit;width:100%;display:grid;grid-template-columns:var(--fi-list-leading-width,34px) minmax(0,1fr);align-items:start;gap:var(--fi-list-content-gap,10px);min-width:0;padding:11px 4px 11px 0;color:inherit;text-decoration:none} .mail-thread-state{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#eef2f5;color:var(--fi-text-p-color,#2f3a45);font-size:var(--fi-text-p-font-size,14px)} .mail-thread-list .mail-thread-main{padding:0} .mail-thread-list{--fi-list-padding:7px} .mail-thread-body{min-width:0} .mail-thread-quick-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fi-mini-button-gap,4px);align-self:stretch} .mail-thread-quick-actions.is-placeholder{min-width:0} .mail-thread-quick-actions>form,.mail-thread-quick-actions>[data-mail-read-toggle]{display:grid;place-items:center;margin:0;padding:0;gap:0;line-height:0} .mail-thread-quick-actions button{display:grid;place-items:center;cursor:pointer;} .mail-thread-quick-actions button .ti{line-height:1;} .mail-thread-top{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-list-content-gap,10px)} .fi-list-identity{display:flex;align-items:center;gap:var(--fi-list-content-gap,10px);min-width:0} .fi-list-identity>.fi-badge{flex:none} .mail-thread-top strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fi-text-strong-font-size,14px)} .mail-thread-top time{flex:none;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-thread-subject{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-thread-top>.mail-thread-subject{flex:1;min-width:0} .mail-thread-top>.mail-thread-paperclip{flex:none;color:var(--sub)} .mail-thread-preview{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-thread-meta{display:flex;gap:var(--fi-mini-button-gap,4px);flex-wrap:wrap;margin-top:var(--fi-mini-button-gap,4px)} .mail-setup-card{display:flex;align-items:flex-start;gap:var(--fi-block-gap,20px);padding:var(--fi-content-padding,20px)} .mail-setup-card h2{margin:0 0 var(--fi-text-h2-margin-bottom,8px);font-size:var(--fi-text-h2-font-size,18px)} .mail-setup-card p{margin:5px 0;color:var(--sub);font-size:var(--fi-text-p-font-size,14px);line-height:var(--fi-text-p-line-height,1.5)} .mail-setup-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:13px;background:#eef2f5;color:var(--fi-content-link-color,#2f3a45);font-size:var(--fi-icon-size,18px)} .mail-setup-card code{padding:2px 4px;border-radius:4px;background:#f3f6f8;font-size:var(--fi-text-code-font-size,12px)} @media(max-width:850px){ .mail-layout{grid-template-columns:1fr} .mail-sidebar{max-height:320px;overflow:auto} } /* E-Mail-Verwaltung */ .mail-admin-fields{--fi-form-columns:3} .mail-admin-fields .full{grid-column:1/-1} .mail-permission-list{padding:0 var(--fi-inline-gap,8px) var(--fi-inline-gap,8px)} .mail-permission-row{display:grid;grid-template-columns:var(--fi-checkbox-size,18px) minmax(0,1fr) 150px;align-items:center;gap:8px;padding:7px 6px;border-top:1px solid #e1e7ec} .mail-permission-row:first-child{border-top:0} .mail-permission-row strong{display:block;font-size:var(--fi-text-strong-font-size,14px)} .mail-permission-row small{font-size:var(--fi-text-small-font-size,11px)} .mail-permission-row select{width:100%} @media(max-width:720px){.mail-admin-fields{grid-template-columns:1fr}.mail-admin-fields .full{grid-column:auto}.mail-permission-row{grid-template-columns:var(--fi-checkbox-size,18px) minmax(0,1fr)}.mail-permission-row select{grid-column:2}} .mail-admin-fields input[type="color"]{width:100%;min-height:var(--fi-control-height,43px);padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px);border:var(--fi-control-border-width,1px) solid #e1e7ec;border-radius:var(--fi-control-radius,10px);background:#fff;cursor:pointer;} .mail-account-icon{border:1px solid currentColor} /* E-Mail Arbeitsbereich · Threadansicht */ .mail-workspace{display:grid;grid-template-columns:260px minmax(280px,360px) minmax(0,1fr);gap:var(--fi-block-gap,20px);min-height:700px} .mail-workspace .mail-sidebar,.mail-workspace .mail-thread-panel,.mail-workspace .mail-detail{min-width:0} .mail-thread.is-selected:not(.is-active):not(.is-live){background:#f3f6f8;box-shadow:none;} .mail-detail{display:flex;flex-direction:column;overflow:hidden} @media(max-width:1180px){ .mail-workspace{grid-template-columns:240px minmax(300px,1fr)} .mail-detail{grid-column:1/-1;min-height:420px} } @media(max-width:820px){ .mail-workspace{grid-template-columns:1fr} .mail-detail{grid-column:auto} .mail-thread-panel{max-height:520px} } /* E-Mail Arbeitsbereich · Versand, Suche und Anhänge */ .mail-compose{display:grid;gap:12px;padding:16px} .mail-compose label{display:grid;gap:6px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-compose input,.mail-compose select,.mail-compose textarea{width:100%;box-sizing:border-box;border:var(--fi-control-border-width,1px) solid #e1e7ec;} .mail-compose textarea{resize:vertical;line-height:1.45;} .mail-migration-note{margin-bottom:14px} .mail-thread-toolbar{gap:10px} @media(max-width:620px){ .mail-thread-toolbar{align-items:stretch;flex-direction:column} .mail-thread-toolbar .search-wrap{width:100%;min-width:0} .mail-compose{padding:13px} } .mail-auto-error .btn{margin-left:auto} /* E-Mail · sichere HTML-Darstellung mit Inline-Bildern */ .mail-thread-paperclip{font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} /* E-Mail · gruppierte, scrollbar begrenzte Liste wie Anrufe */ .mail-thread-panel{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 190px)} .mail-thread-list{display:block;min-height:0;overflow-y:auto;overscroll-behavior:contain} .mail-date-divider{padding:7px 14px;border-bottom:1px solid #e1e7ec;background:#e3e9ee;color:var(--fi-text-p-color,#2f3a45);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);letter-spacing:var(--fi-text-small-letter-spacing,0px);text-transform:uppercase} .mail-thread-meta{align-items:center} .mail-thread-meta>.mail-thread-paperclip{flex:none;padding:0;background:transparent;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} @media(max-width:1180px){ .mail-thread-panel{max-height:560px} } @media(max-width:820px){ .mail-thread-panel{max-height:520px} } /* Gemeinsamer Datumsgruppen-Standard für chronologische Listen */ .date-group-label{display:inline-flex;align-items:center;gap:7px} .date-group-label>.ti{flex:none;color:var(--sub);font-size:var(--fi-icon-size,18px);line-height:1} .mail-date-divider .date-group-label{font:inherit;color:inherit} /* E-Mail · Live-Abruf */ .mail-live-notice{position:fixed;right:20px;bottom:20px;z-index:1200;display:flex;align-items:center;gap:9px;max-width:min(430px,calc(100vw - 30px));padding:10px 12px;border:1px solid #d7dee4;border-radius:12px;background:#eef2f5;box-shadow:var(--fi-shadow-float);color:var(--fi-content-accent-color,#2f3a45);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-live-notice[hidden]{display:none} .mail-live-notice>.ti{font-size:var(--fi-icon-size,18px);color:var(--fi-content-accent-color,#2f3a45)} .mail-live-notice .btn{margin-left:auto;white-space:nowrap} /* E-Mail · angeheftete Vorgänge */ .mail-thread.is-pinned{ background:var(--fi-mail-list-pinned-background,#fff9e0); box-shadow:none; } .mail-thread.is-pinned:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-mail-list-pinned-hover-background,#fff9e0)} .mail-thread.is-pinned.is-selected{ background:var(--fi-mail-list-pinned-selected-background,#ffeba3); box-shadow:none; } .mail-thread.is-pinned .mail-thread-state{ background:#ffeba3; color:var(--fi-status-warning-color,#a05a00)!important; } .mail-pinned-divider{ background:#ffeba3; color:var(--fi-status-warning-color,#a05a00); } .mail-pinned-divider .date-group-label>.ti{color:var(--fi-status-warning-color,#a05a00)} .mail-pin-form{margin:0} /* E-Mail · Ordnernavigation */ .mail-folder-tree{display:grid;gap:2px;margin:2px 0 8px 44px;padding-left:9px;border-left:1px solid #e1e7ec} .mail-subfolder{grid-template-columns:var(--fi-navigation-icon-size,18px) minmax(0,1fr) auto} .mail-subfolder>.ti{font-size:var(--fi-icon-size,18px)} .mail-subfolder>b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#eef2f5;color:var(--fi-content-link-color,#2f3a45);font-size:var(--fi-text-small-font-size,11px)} .mail-subfolder>small{color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} /* E-Mail · Anhänge separat und sofort erreichbar; Höhen und Scrollen regelt „E-Mail · verbindliche Anzeigeregeln der Detailansicht“. */ .mail-message-attachment-row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-top:1px solid #e1e7ec;background:#ffffff} .mail-message-attachment-label{display:inline-flex;align-items:center;gap:5px;flex:none;padding-top:5px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);text-transform:uppercase;letter-spacing:var(--fi-text-small-letter-spacing,0px)} @media(max-width:620px){ .mail-folder-tree{margin-left:36px} .mail-message-attachment-row{flex-direction:column;gap:5px} } /* E-Mail · Spam-Aktionen */ .mail-message-actions{display:flex;justify-content:flex-end;gap:7px;padding:7px 10px;border-bottom:1px solid var(--line);background:#ffffff} /* E-Mail · Gespräch darf neben geöffnetem Antwortformular nicht zusammenschrumpfen */ .mail-conversation>.mail-message{ flex:0 0 auto; min-height:56px; } /* E-Mail · echte HTML-Mail isoliert darstellen */ /* E-Mail · Kopfaktionen statt Statistik-Badges */ /* E-Mail · linke Postfach-/Ordnerliste innerhalb der Box scrollen */ .mail-sidebar{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 190px);overflow:hidden} .mail-sidebar-title,.mail-sidebar>.mail-folder{flex:none} .mail-account-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#d7dee4 transparent;padding-right:2px} /* E-Mail · Antwort und Weiterleitung standardmäßig zugeklappt */ @media(max-width:820px){ .mail-sidebar{max-height:420px} } /* E-Mail · Spark-artiger Absenderfilter */ .mail-sender-rules{display:flex;align-items:center;gap:5px;flex:none;white-space:nowrap} .mail-sender-rules form{margin:0} /* E-Mail · Kontaktangebot nach Absenderfreigabe */ /* E-Mail · Empfänger-Autocomplete */ .mail-recipient-field{position:relative} .mail-recipient-suggestions{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:30;max-height:280px;overflow:auto;border:1px solid #d7dee4;border-radius:10px;background:#fff;box-shadow:var(--fi-shadow-float)} .mail-recipient-suggestion{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left} .mail-recipient-suggestion>span:first-child{display:grid;gap:2px;min-width:0} .mail-recipient-suggestion strong,.mail-recipient-suggestion small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-recipient-suggestion strong{font-size:var(--fi-text-strong-font-size,14px)} .mail-recipient-suggestion small{color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-recipient-meta{display:block;margin-top:2px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} /* E-Mail · große Modalfenster für Verfassen, Antworten, Weiterleiten und Detailansicht */ .mail-large-dialog{ overflow:hidden; padding:0; } .mail-large-dialog .fi-dialog-header{flex:none} .mail-large-dialog-body{ flex:1; min-height:0; overflow:auto; background:#fff; } .mail-large-dialog .mail-compose{ min-height:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:start; } .mail-large-dialog .mail-compose>label:first-of-type, .mail-large-dialog .mail-compose>label:nth-of-type(2){ grid-column:auto; } .mail-large-dialog .mail-compose-body-field textarea{ min-height:320px; resize:vertical; } .mail-window-dialog{ display:flex; flex-direction:column; overflow:hidden; } .mail-window-dialog>.fi-dialog-header{flex:none} .mail-window-dialog-body{ flex:1; min-height:0; padding:0; overflow:hidden; background:#fff; } .mail-window-dialog .mail-detail{ width:100%; height:100%; max-height:none; overflow:auto; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; } .mail-window-dialog .mail-open-window{display:none} .mail-detail.is-windowed{max-height:none} @media(max-width:760px){ .mail-large-dialog .mail-compose{grid-template-columns:1fr;} .mail-large-dialog .mail-compose>label:first-of-type, .mail-large-dialog .mail-compose>label:nth-of-type(2){grid-column:1/-1} .mail-large-dialog .mail-compose-body-field textarea{min-height:240px} } .mail-sender-email{display:inline-flex!important;align-items:center;gap:4px} .mail-sender-approved{color:var(--fi-pair-gruen-text);font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} .mail-window-dialog .mail-detail.is-windowed{ border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } .mail-delete-form{margin:0} /* E-Mail · Regel, Status-Badge und Icon-Aktionen */ .mail-status-form{margin:0} .mail-rule-dialog .mail-large-dialog-body{background:#fff} .mail-rule-form{padding:22px 26px} .mail-rule-source{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--fi-detail-section-gap,8px); margin-bottom:0; padding:var(--fi-section-padding,12px); border:1px solid #e1e7ec; border-radius:12px; background:#f3f6f8; } .mail-rule-source div{display:grid;gap:var(--fi-inline-gap,8px);min-width:0} .mail-rule-source span{font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);text-transform:uppercase;letter-spacing:var(--fi-text-small-letter-spacing,0px);color:var(--sub)} .mail-rule-source strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fi-text-p-color,#2f3a45);font-size:var(--fi-text-strong-font-size,14px)} .mail-rule-grid .field{display:grid;gap:var(--fi-control-label-gap,7px)} .mail-rule-form>.muted{margin-top:0} @media(max-width:760px){ .mail-rule-source{grid-template-columns:1fr} } .mail-rule-existing{margin-top:0;border-top:1px solid #e1e7ec;padding-top:var(--fi-detail-section-gap,8px)} .mail-rule-existing-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fi-inline-gap,8px);margin-bottom:0} .mail-rule-existing-head strong{display:block;font-size:var(--fi-text-strong-font-size,14px);color:var(--fi-text-p-color,#2f3a45)} .mail-rule-existing-head small{display:block;margin-top:var(--fi-control-label-gap,7px);color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-rule-existing-head>span{flex:none;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#f3f6f8;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-rule-existing-list{display:grid;gap:var(--fi-block-gap,20px)} .mail-rule-existing-item{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-inline-gap,8px);padding:var(--fi-section-padding,12px);border:1px solid #e1e7ec;border-radius:9px;background:#eef2f5} .mail-rule-existing-item>div{display:grid;gap:var(--fi-inline-gap,8px);min-width:0} .mail-rule-existing-item strong{font-size:var(--fi-text-strong-font-size,14px);color:var(--fi-text-p-color,#2f3a45)} .mail-rule-existing-item small{font-size:var(--fi-text-small-font-size,11px);color:var(--sub)} .mail-rule-existing-item>span{flex:none;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--sub)} .mail-rule-existing-actions{display:flex;align-items:center;gap:var(--fi-inline-gap,8px);flex:none} .mail-rule-existing-actions>span{font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--sub);white-space:nowrap} .mail-rule-existing-actions form{margin:0} /* E-Mail · ruhige Detailansicht mit einheitlicher Icon-Leiste */ .mail-detail-toolbar{ display:flex; align-items:center; justify-content:space-between; background:#f3f6f8; } .mail-detail-toolbar-group{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .mail-toolbar-form{margin:0} .mail-toolbar-separator{ display:block; width:1px; height:24px; margin:0 4px; background:#d7dee4; } .mail-detail-toolbar-group .mail-toolbar-separator{ flex:none; } .mail-detail-toolbar-group>.mail-toolbar-icon, .mail-detail-toolbar-group>.mail-toolbar-form{ flex:none; } .mail-assignment-control{display:flex;align-items:center;gap:7px;min-width:170px;max-width:250px;color:var(--sub)} .mail-assignment-control>.ti{flex:none;font-size:var(--fi-icon-size,18px)} .mail-assignment-control select{width:100%;min-width:0;cursor:pointer} .mail-detail-subject{ background:#fff; } .mail-detail-subject h2{ margin:var(--fi-text-h2-margin-top,0px) 0 var(--fi-text-h2-margin-bottom,8px); color:var(--fi-text-h2-color,#2f3a45); font-size:var(--fi-text-h2-font-size,18px); line-height:var(--fi-text-h2-line-height,1.2); } .mail-detail-subject small{ display:block; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .mail-message-attachment-row{ padding:10px 16px 14px; border-top:0; background:#fff; } .mail-window-dialog .mail-detail-toolbar{ position:sticky; top:0; z-index:8; background:#f3f6f8; } @media(max-width:760px){ .mail-detail-toolbar{ align-items:flex-start; flex-direction:column; } .mail-assignment-control{ width:100%; max-width:none; } } /* E-Mail-Verwaltung · Master/Detail */ .mail-admin-tabs{ margin-bottom:14px; } .mail-admin-shell{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:14px; align-items:start; } .mail-admin-master{ position:sticky; top:16px; overflow:hidden; } .mail-admin-master-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 13px; border-bottom:1px solid var(--line); } .mail-admin-master-head strong{font-size:var(--fi-text-strong-font-size,14px)} .mail-admin-master-list{display:grid;padding:5px} .mail-admin-master-item{ display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:9px; padding:9px; border-radius:10px; color:var(--ink); text-decoration:none; } .mail-admin-master-item:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .mail-admin-master-item.active{background:#eef2f5;box-shadow:inset 3px 0 0 #2f3a45} .mail-admin-master-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#f3f6f8; font-size:var(--fi-icon-size,18px); } .mail-admin-master-item strong, .mail-admin-master-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-admin-master-item strong{font-size:var(--fi-text-strong-font-size,14px)} .mail-admin-master-item small{margin-top:2px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-admin-master-item>.ti{font-size:var(--fi-icon-size,18px);color:var(--fi-content-accent-color,#2f3a45)} .mail-admin-master-item>.ti-alert-circle{color:var(--fi-status-warning-color,#a05a00)} .mail-admin-editor{overflow:hidden} .mail-admin-editor-form{display:block} .mail-admin-editor-head{ gap:18px; } .mail-admin-editor-head h2{margin:var(--fi-text-h2-margin-top,0px) 0 var(--fi-text-h2-margin-bottom,8px);font-size:var(--fi-text-h2-font-size,18px)} .mail-admin-editor-head small{color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-admin-health{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .mail-admin-health span, .mail-admin-readonly-state{ display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-badge-font-size,10px); font-weight:var(--fi-badge-font-weight,700); } .mail-admin-health .ok,.mail-admin-readonly-state.ok{background:var(--fi-pair-gruen-surface);color:#2f3a45} .mail-admin-health .bad,.mail-admin-readonly-state.bad{background:#fff1f0;color:#d70015} .mail-admin-health .muted{background:#f3f6f8;color:#9aa7b3} .mail-admin-section{margin:var(--fi-block-gap,20px) var(--fi-content-padding,20px)} .mail-admin-section+.mail-admin-section{margin-top:0} .mail-admin-section-head{ gap:var(--fi-block-gap,20px); } .mail-admin-section-head h3{margin:0;font-size:var(--fi-text-h3-font-size,16px)} .mail-admin-section-head p{margin:3px 0 0;color:var(--sub);font-size:var(--fi-text-p-font-size,14px);line-height:var(--fi-text-p-line-height,1.5)} .mail-admin-editor .mail-admin-fields{--fi-form-columns:3} .mail-admin-editor .mail-admin-fields .field{margin:0} .mail-admin-editor .mail-admin-fields .full{grid-column:1/-1} .mail-admin-permission-group{margin-top:12px} .mail-admin-permission-group:first-of-type{margin-top:0} .mail-admin-permission-group h4{ display:flex; align-items:center; gap:var(--fi-inline-gap,8px); margin:0 0 var(--fi-text-h4-margin-bottom,8px); color:var(--fi-text-h4-color,#2f3a45); font-size:var(--fi-text-h4-font-size,14px); text-transform:uppercase; letter-spacing:var(--fi-text-h4-letter-spacing,0px); } .mail-admin-permission-group .mail-permission-list{ border:1px solid #e1e7ec; border-radius:11px; overflow:hidden; padding:0; } .mail-admin-permission-group .mail-permission-row{ border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; } .mail-admin-permission-group .mail-permission-row:last-child{border-bottom:0} .mail-admin-advanced{ margin:0; border-bottom:1px solid var(--line); } .mail-admin-advanced>.mail-admin-fields{padding:0 var(--fi-disclosure-padding,12px) var(--fi-disclosure-padding,12px);background:#f3f6f8} .mail-admin-savebar{ position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:rgba(255,255,255,.96); border-top:1px solid #e1e7ec; backdrop-filter:blur(8px); } .mail-admin-savebar span{color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .mail-admin-diagnostics{ padding:18px 20px; border-top:8px solid #f3f6f8; } .mail-admin-diagnostic-actions{display:flex;gap:7px;flex-wrap:wrap} .mail-admin-diagnostic-actions form{margin:0} .mail-admin-sync-error{ display:flex; align-items:flex-start; gap:8px; margin-top:11px; padding:10px 12px; border-radius:9px; background:#fff1f0; color:var(--fi-status-error-color,#d70015); font-size:var(--fi-text-small-font-size,11px); line-height:var(--fi-text-small-line-height,1.5); } .mail-admin-danger{ margin:0 20px 20px; border:1px solid #ffd4d1; border-radius:10px; background:#fff1f0; } .mail-admin-danger>div{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 12px 12px; } .mail-admin-danger p{margin:0;color:var(--sub);font-size:var(--fi-text-p-font-size,14px)} .mail-admin-empty{ display:grid; place-items:center; gap:7px; min-height:var(--fi-empty-min-height,260px); color:var(--sub); text-align:center; } .mail-admin-empty>.ti{font-size:var(--fi-icon-size,18px)} .mail-admin-table-page{padding:0;overflow:hidden} .mail-admin-table-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px; border-bottom:1px solid var(--line); } .mail-admin-table-head h2{margin:var(--fi-text-h2-margin-top,0px) 0 var(--fi-text-h2-margin-bottom,8px);font-size:var(--fi-text-h2-font-size,18px)} .mail-admin-table-head p{margin:0;color:var(--sub);font-size:var(--fi-text-p-font-size,14px)} .mail-admin-data-list{display:grid} .mail-admin-data-row, .mail-admin-rule-row{ display:grid; grid-template-columns:34px minmax(0,1fr) auto 34px 34px; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid var(--line); } .mail-admin-rule-row.is-disabled{opacity:.55} .mail-admin-data-icon{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#f3f6f8; color:var(--sub); } .mail-admin-data-icon.approved{background:#eef2f5;color:var(--fi-pair-gruen-text)} .mail-admin-data-icon.blocked{background:#fff1f0;color:var(--fi-status-error-color,#d70015)} .mail-admin-data-main{min-width:0} .mail-admin-data-main strong, .mail-admin-data-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-admin-data-main strong{font-size:var(--fi-text-strong-font-size,14px)} .mail-admin-data-main small{margin-top:3px;color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} @media(max-width:980px){ .mail-admin-shell{grid-template-columns:1fr} .mail-admin-master{position:static} .mail-admin-master-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ .mail-admin-tabs{overflow:auto} .mail-admin-shell{display:block} .mail-admin-master{margin-bottom:12px} .mail-admin-master-list{grid-template-columns:1fr} .mail-admin-editor .mail-admin-fields{--fi-form-columns:3} .mail-admin-editor .mail-admin-fields .full{grid-column:auto} .mail-admin-editor-head{display:block} .mail-admin-health{justify-content:flex-start;margin-top:10px} .mail-admin-data-row,.mail-admin-rule-row{grid-template-columns:30px minmax(0,1fr) auto} .mail-admin-data-row form,.mail-admin-rule-row form{grid-column:auto} } /* E-Mail-Modals · einheitlicher Composer */ #mailComposerDialog, #mailRuleDialog{ width:min(820px,calc(100vw - 28px)); max-width:820px; height:min(88vh,840px); max-height:min(88vh,840px); } #mailComposerDialog .fi-dialog-header>.btn, #mailRuleDialog .fi-dialog-header>.btn{ display:grid; place-items:center; flex:none; } #mailComposerDialog .mail-large-dialog-body, #mailRuleDialog .mail-large-dialog-body{ height:auto; overflow:auto; overscroll-behavior:contain; } #mailComposerDialog .mail-compose, #mailRuleDialog .mail-rule-form{ min-height:100%; padding:0; background:#fff; } #mailComposerDialog .mail-compose{grid-template-columns:minmax(0,1fr)} #mailComposerDialog .mail-compose>*{grid-column:1/-1;min-width:0} #mailComposerDialog .mail-compose-recipient-line{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--fi-inline-gap,8px)} #mailComposerDialog .mail-compose-copy-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:var(--fi-inline-gap,8px)} #mailComposerDialog :is(.mail-compose-recipient-line,.mail-compose-copy-row)>label{min-width:0} @media(max-width:520px){#mailComposerDialog .mail-compose-recipient-line{grid-template-columns:minmax(0,1fr)}} #mailComposerDialog .mail-compose>label{ display:grid; gap:var(--fi-control-label-gap,7px); margin:0; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } #mailComposerDialog .mail-compose input:not([type="file"]), #mailComposerDialog .mail-compose select, #mailComposerDialog .mail-compose textarea{ width:100%; } #mailComposerDialog .mail-compose textarea{ min-height:420px; resize:vertical; line-height:1.55; } #mailComposerDialog form, #mailRuleDialog form{position:relative} .mail-large-dialog form.is-submitting .btn[type="submit"]{ opacity:.72; pointer-events:none; } .mail-large-dialog form.is-submitting .btn[type="submit"] .ti{ animation:mailModalSpin .8s linear infinite; } @keyframes mailModalSpin{to{transform:rotate(360deg)}} @media(max-width:620px){ #mailComposerDialog, #mailRuleDialog{ width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; } } /* E-Mail-Verwaltung · Regelbearbeitung */ .mail-admin-rule-row{ grid-template-columns:34px minmax(0,1fr) auto 34px 34px 34px; } .mail-admin-rule-editor{ padding:14px 20px 16px 64px; border-bottom:1px solid #e1e7ec; background:#eef2f5; } .mail-admin-rule-editor .field{margin:0} .mail-admin-rule-editor .fi-form-actions{justify-content:flex-end;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)} .mail-admin-rule-editor .fi-check{align-self:end;margin:0} @media(max-width:760px){ .mail-admin-rule-row{grid-template-columns:30px minmax(0,1fr) auto} .mail-admin-rule-row>a, .mail-admin-rule-row>form{justify-self:end} .mail-admin-rule-editor{padding:12px} } /* E-Mail-Verwaltung · Rechte, Filter und Diagnose */ .mail-permission-group-block + .mail-permission-group-block{ border-top:1px solid var(--line); } .mail-permission-group-block .mail-permission-row{ border-bottom:0; } .mail-group-member-preview{ display:flex; flex-wrap:wrap; gap:5px; padding:0 12px 10px 47px; background:#eef2f5; } .mail-group-member-preview.is-empty{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-style:italic; } .mail-permission-row small em{ color:var(--fi-content-link-color,#2f3a45); font-style:normal; font-weight:var(--fi-text-strong-font-weight,700); } .mail-admin-filterbar{ display:grid; gap:8px; width:min(520px,100%); } .mail-admin-rule-filters{ display:grid; grid-template-columns:minmax(220px,1fr) 180px; gap:8px; } .mail-admin-filter-chips{ flex-wrap:wrap; justify-content:flex-end; } .mail-admin-diagnostic-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .mail-admin-diagnostic-grid>div{ padding:10px 11px; border:1px solid #e1e7ec; border-radius:10px; background:#eef2f5; } .mail-admin-diagnostic-grid span, .mail-admin-diagnostic-grid strong{ display:block; } .mail-admin-diagnostic-grid span{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; letter-spacing:var(--fi-text-small-letter-spacing,0px); } .mail-admin-diagnostic-grid strong{ margin-top:4px; color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-strong-font-size,14px); } .mail-admin-sync-ok{ display:flex; align-items:center; gap:8px; margin-top:11px; padding:9px 11px; border-radius:9px; background:var(--fi-pair-gruen-surface); color:var(--fi-content-accent-color,#2f3a45); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } @media(max-width:760px){ .mail-admin-table-head{ display:block; } .mail-admin-filterbar{ margin-top:12px; } .mail-admin-filter-chips{ justify-content:flex-start; } .mail-admin-rule-filters{ grid-template-columns:1fr; } .mail-admin-diagnostic-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mail-group-member-preview{ padding-left:12px; } } /* E-Mail-Arbeitsoberfläche · Priorität, Zuweisung und ruhigere Detailansicht */ .mail-thread{ transition:background .12s ease,box-shadow .12s ease,border-color .12s ease; } .mail-thread.is-pinned{ background:var(--fi-mail-list-pinned-background,#fff9e0); box-shadow:none; } .mail-thread.is-pinned:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-mail-list-pinned-hover-background,#fff9e0); } .mail-thread.is-assigned-to-me:not(.is-pinned){ background:var(--fi-mail-list-assigned-background,#f7effc); box-shadow:none; } .mail-thread.is-assigned-to-me.is-selected{ background:var(--fi-mail-list-assigned-selected-background,#f7effc); } .mail-thread.is-assigned-group:not(.is-pinned){ box-shadow:none; } /* Preserve the action slots while revealing them per mail row. */ .mail-thread-quick-actions button{opacity:calc(var(--fi-mail-mini-actions-opacity,0) * var(--fi-mail-mini-actions-idle-opacity,.6));pointer-events:auto;transition:opacity .12s ease} .mail-thread:hover .mail-thread-quick-actions button, .mail-thread:focus-within .mail-thread-quick-actions button, .mail-thread.is-unread [data-mail-read-toggle] button{opacity:var(--fi-mail-mini-actions-idle-opacity,.6);pointer-events:auto} .mail-thread .mail-thread-quick-actions button:is(:hover,:focus-visible){opacity:1} @media(hover:none){.mail-thread-quick-actions button{opacity:var(--fi-mail-mini-actions-idle-opacity,.6);pointer-events:auto}.mail-thread .mail-thread-quick-actions button:focus-visible{opacity:1}} .mail-thread-state{ background:#f3f6f8; } .mail-thread.is-pinned .mail-thread-state{ background:#ffeba3; } .mail-thread-meta{ align-items:center; gap:6px; } .mail-pinned-divider{ background:#fff9e0; } .mail-pinned-divider .date-group-label{ color:var(--fi-status-warning-color,#a05a00); } .mail-pinned-divider .ti{ color:var(--fi-status-warning-color,#a05a00); } .mail-detail-toolbar{ background:#ffffff; } .mail-detail-toolbar-group{ gap:2px; } .mail-toolbar-separator{ height:20px; margin:0 3px; } .mail-detail-subject{ border-bottom:1px solid var(--line); } .mail-detail-context{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; } .mail-detail-context .section-kicker{ margin:0; } .fi-call-detail-identity-meta, .fi-record-main>.fi-call-detail-identity-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-call-detail-toolbar{ flex:none; } .mail-detail-subject h2{ margin:0 0 3px; font-size:var(--fi-text-h2-font-size,18px); line-height:var(--fi-text-h2-line-height,1.2); } .mail-detail-subject>small{ color:var(--sub); } .mail-sender-email{ margin-top:2px; font-size:var(--fi-text-small-font-size,11px); } @media(max-width:760px){ .mail-assignment-control{ width:100%; max-width:none; border-radius:9px; } .mail-assignment-control select{ flex:1; max-width:none; } .mail-detail-context{ align-items:flex-start; } } /* E-Mail · Zuweisungsworkflow und Arbeitspriorität */ .mail-priority-divider{ background:#f3f6f8; } .mail-priority-divider .date-group-label{ font-size:var(--fi-text-small-font-size,11px); letter-spacing:var(--fi-text-small-letter-spacing,0px); } .mail-priority-divider.is-direct{ background:#eef2f5; } .mail-priority-divider.is-direct .date-group-label, .mail-priority-divider.is-direct .ti{ color:var(--fi-text-p-color,#2f3a45); } .mail-priority-divider.is-group{ background:#eef2f5; } .mail-priority-divider.is-group .date-group-label, .mail-priority-divider.is-group .ti{ color:var(--sub); } .mail-priority-divider.is-unassigned{ background:#f3f6f8; } .mail-priority-divider.is-unassigned .date-group-label, .mail-priority-divider.is-unassigned .ti{ color:var(--sub); } .mail-priority-divider + .mail-date-divider:not(.mail-priority-divider){ border-top:0; } /* Globale Statusmeldungen · Toast unten rechts */ .fi-toast{ position:fixed; right:22px; bottom:22px; z-index:1400; display:grid; grid-template-columns:30px minmax(0,1fr) 26px; align-items:center; gap:9px; width:min(390px,calc(100vw - 28px)); padding:11px 11px 11px 12px; border:1px solid #d7dee4; border-radius:13px; background:#fff; box-shadow:var(--fi-shadow-float); color:var(--fi-text-p-color,#2f3a45); opacity:1; transform:translateY(0); transition:opacity .22s ease,transform .22s ease; } .fi-toast--success{ border-color:#d7dee4; background:var(--fi-pair-gruen-surface); } .fi-toast-icon{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--fi-pair-gruen-surface); color:var(--fi-content-accent-color,#2f3a45); font-size:var(--fi-icon-size,18px); } .fi-toast-message{ min-width:0; font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); line-height:var(--fi-text-small-line-height,1.5); overflow-wrap:anywhere; } .fi-toast-close{ display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:7px; background:transparent; color:var(--sub); cursor:pointer; } .fi-toast-close:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); color:var(--sub); } .fi-toast.is-hiding{ opacity:0; transform:translateY(10px); pointer-events:none; } @media(max-width:600px){ .fi-toast{ right:12px; bottom:12px; width:calc(100vw - 24px); } } @media(prefers-reduced-motion:reduce){ .fi-toast{ transition:none; } } /* Gemeinsame Runtime-Toasts */ .fi-toast.is-error{ border-color:#ffd4d1; background:#fff1f0; } .fi-toast.is-error .fi-toast-icon{ background:#fff1f0; color:var(--fi-status-error-color,#d70015); } /* E-Mail · schneller Workflow */ .mail-workspace.is-busy{ opacity:.72; pointer-events:none; } /* E-Mail · persönlich zugewiesene Vorgänge stärker hervorheben */ .mail-priority-divider.is-direct{ background:#f7effc; border-top:1px solid #d7dee4; border-bottom:1px solid #d7dee4; } .mail-priority-divider.is-direct .date-group-label{ font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } .mail-thread.is-assigned-to-me:not(.is-assigned-group):not(.is-pinned){ background:var(--fi-mail-list-assigned-background,#f7effc); box-shadow:none; } .mail-thread.is-assigned-to-me:not(.is-assigned-group):not(.is-pinned):hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-mail-list-assigned-hover-background,#f7effc); } .mail-thread.is-assigned-to-me:not(.is-assigned-group).is-selected{ background:var(--fi-mail-list-assigned-selected-background,#f7effc); box-shadow:none; } /* E-Mail · Mir zugewiesen (direkt + Gruppen) · helles Magenta */ .mail-priority-divider.is-assigned{ background:#f7effc; border-top:1px solid #e6d0f5; border-bottom:1px solid #e6d0f5; } .mail-priority-divider.is-assigned .date-group-label{ font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; color:var(--sub); } .mail-priority-divider.is-assigned .ti{ color:var(--sub); } .mail-thread.is-assigned-to-me:not(.is-pinned){ background:var(--fi-mail-list-assigned-background,#f7effc); box-shadow:none; } .mail-thread.is-assigned-to-me:not(.is-pinned):hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-mail-list-assigned-hover-background,#f7effc); } .mail-thread.is-assigned-to-me.is-selected{ background:var(--fi-mail-list-assigned-selected-background,#f7effc); box-shadow:none; } /* E-Mail · Detailkopf kompakter und kontobezogen */ .mail-detail-account-line{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; } .mail-detail-subject h2{ font-size:var(--fi-text-h2-font-size,18px); line-height:var(--fi-text-h2-line-height,1.2); letter-spacing:var(--fi-text-h2-letter-spacing,0px); margin-top:var(--fi-text-h2-margin-top,0px); margin-bottom:0; overflow-wrap:anywhere; } .mail-detail-subject>small{ display:none; } @media(max-width:760px){ .mail-detail-subject h2{ font-size:var(--fi-text-h2-font-size,18px); } } /* E-Mail · Datum/Uhrzeit besser lesbar */ .mail-thread-top time, .mail-message header time, .mail-message-head-actions time{ font-weight:var(--fi-text-strong-font-weight,700); } .mail-date-divider .date-group-label{ font-weight:var(--fi-text-strong-font-weight,700); } /* DocuHub */ .dms-page{ display:grid; gap:0; } .dms-workspace{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--fi-block-gap,20px); min-height:640px; } .dms-list-panel{ overflow:hidden; } .dms-current-folder{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#eef2f5; } .dms-current-folder div{ display:flex; align-items:baseline; gap:8px; } .dms-current-folder span, .dms-current-folder small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .dms-current-folder strong{ color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-strong-font-size,14px); } .dms-document-list{ display:grid; } .dms-document-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-icon-size,18px); } .dms-document-main{ display:grid; min-width:0; gap:2px; } .dms-document-main strong{ overflow:hidden; color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-strong-font-size,14px); text-overflow:ellipsis; white-space:nowrap; } .dms-document-main>span{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); text-overflow:ellipsis; white-space:nowrap; } .dms-document-main small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .dms-document-main small b{ color:var(--sub); font-weight:var(--fi-text-strong-font-weight,700); } .mail-attachment-docuhub{ display:inline-flex; align-items:center; gap:4px; padding:0 8px; border:1px solid #d7dee4; border-radius:8px; background:#f7effc; color:var(--sub); font:inherit; font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); cursor:pointer; } [data-mail-hub-results] label,[data-mail-hub-attachments] span{min-width:0;overflow-wrap:anywhere} .mail-dms-import-file{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:9px; background:#f3f6f8; color:var(--sub); } @media(max-width:900px){ .dms-workspace{ grid-template-columns:1fr; } } /* Einheitliche obere Hauptnavigation */ @media(max-width:760px){ .fi-sidebar{padding:6px} .fi-nav-link .ti{font-size:var(--fi-navigation-icon-size,18px)} } /* E-Mail · Sammelaktionen für Anhänge */ /* DocuHub · Detailansicht, Filter und Papierkorb */ .dms-workspace--detail{ grid-template-columns:minmax(180px,18%) minmax(0,1fr) minmax(300px,34%); align-items:stretch; min-height:0; height:max(480px,calc(100dvh - 220px)); } .dms-workspace--detail>.mail-sidebar{overflow:auto;min-height:0} .dms-list-panel{display:flex;flex-direction:column;min-width:0;min-height:0} .dms-list-panel>form:not(.dms-filterbar){display:flex;flex-direction:column;flex:1;min-height:0} .dms-list-panel .dms-document-list{overflow:auto;min-height:0;flex:1} .dms-document-list>.fi-table-wrap{max-height:100%;overflow:auto} .dms-list-panel>.dms-filterbar,.dms-list-panel>[data-dms-current-context],.dms-list-panel>.dms-dropzone{flex-shrink:0} .dms-filterbar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--fi-toolbar-gap,10px); padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); border-bottom:1px solid var(--line); background:var(--paper); } .dms-filterbar select, .dms-filterbar input:not([type="search"]){ min-width:0; } .dms-filterbar>.search-wrap{ grid-column:1/-1; width:100%; min-width:0; } .dms-detail-panel{ overflow:auto; min-height:0; min-width:0; } .dms-detail-head{ align-items:flex-start; } .dms-document-icon--large{ width:46px; height:46px; font-size:var(--fi-icon-size,18px); } .dms-detail-head h2{ margin:var(--fi-text-h2-margin-top,0px) 0 var(--fi-text-h2-margin-bottom,8px); color:var(--fi-text-h2-color,#2f3a45); font:var(--fi-text-h2-font-weight,700) var(--fi-text-h2-font-size,18px)/var(--fi-text-h2-line-height,1.2) var(--fi-text-h2-font-family,system-ui,sans-serif),sans-serif; letter-spacing:var(--fi-text-h2-letter-spacing,0px); overflow-wrap:anywhere; } .dms-detail-head small{ overflow-wrap:anywhere; } .dms-detail-form{ display:grid; gap:10px; margin:var(--fi-block-gap,20px) var(--fi-content-padding,20px); } .dms-detail-form select[multiple]{ min-height:132px; } .dms-detail-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); margin:var(--fi-block-gap,20px) var(--fi-content-padding,20px); } .dms-detail-facts>div{ display:grid; gap:2px; } .dms-detail-facts span{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; letter-spacing:var(--fi-text-small-letter-spacing,0px); } .dms-detail-facts strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); overflow-wrap:anywhere; } .dms-version-list{ margin:var(--fi-block-gap,20px) var(--fi-content-padding,20px); } .dms-version-list>strong{ display:block; margin-bottom:6px; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .dms-version-list>div{ display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-top:1px solid var(--line); color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .dms-version-list time{ font-weight:var(--fi-text-strong-font-weight,700); white-space:nowrap; } .dms-detail-empty{ display:grid; place-items:center; min-height:var(--fi-empty-min-height,260px); padding:28px; text-align:center; color:var(--sub); } .dms-detail-empty .ti{ margin-bottom:8px; font-size:var(--fi-icon-size,18px); } .dms-detail-empty strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .dms-detail-empty span{ margin-top:3px; font-size:var(--fi-text-small-font-size,11px); line-height:var(--fi-text-small-line-height,1.5); } @media(max-width:1180px){ .dms-workspace--detail{ grid-template-columns:240px minmax(0,1fr); height:auto; } .dms-list-panel{max-height:max(480px,calc(100dvh - 220px))} .dms-detail-panel{ position:static; grid-column:1/-1; max-height:none; } } @media(max-width:820px){ .dms-workspace--detail{ grid-template-columns:1fr; } .dms-filterbar{ grid-template-columns:1fr 1fr; } .dms-filterbar>.search-wrap{ grid-column:1/-1; } .dms-detail-panel{ grid-column:auto; } } /* DocuHub · Vorschau, Mehrfachauswahl und Picker */ .dms-bulk-toolbar{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid #e1e7ec; background:#eef2f5; } .dms-bulk-toolbar>strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); white-space:nowrap; } .dms-select-all{ display:inline-flex; align-items:center; gap:5px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); white-space:nowrap; } .dms-select-all input{ accent-color:#2f3a45; } .dms-document-select-row{ display:grid; grid-template-columns:32px minmax(0,1fr); align-items:stretch; border-bottom:1px solid var(--line); } .dms-document-select-row.is-selected{ background:var(--fi-list-active-background,#eef2f5); box-shadow:inset 3px 0 0 var(--fi-list-active-border-color,#2f3a45); } .dms-document-select-row:has(.dms-document-check input:checked){ background:#eef2f5; box-shadow:inset 3px 0 0 #2f3a45; } .dms-tag-editor{ display:grid; gap:6px; } .dms-chip-row{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .dms-current-folder-actions{ display:flex; align-items:center; gap:8px; } @media(max-width:820px){ .dms-bulk-toolbar{ align-items:flex-start; flex-wrap:wrap; } } /* DocuHub · Sichtbarkeit */ .dms-current-folder>div:first-child{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--fi-toolbar-gap,10px); } .dms-scope-badge{ font-style:normal; white-space:nowrap; } .dms-scope-readonly{ display:flex; align-items:center; min-height:40px; padding:9px 11px; border:1px solid #e1e7ec; border-radius:9px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } /* DocuHub · Listen-Vorschau */ .dms-document-select-row{ grid-template-columns:32px minmax(0,1fr) 38px; } /* Seitenkopf-Geometrie wird ausschließlich über .fi-page-heading definiert. */ /* Regel-/DMS-Editoren verwenden die zentralen fi-tag-Komponenten. */ .fi-tag-list, .mail-admin-rule-tags, .mail-rule-tag-badges, .mail-admin-rule-tag-vars{ display:flex; flex-wrap:wrap; gap:6px; } .mail-admin-rule-tags{margin-top:5px} .mail-rule-tag-editor{ display:grid; gap:7px; padding:8px; border:var(--fi-control-border-width,1px) solid #e1e7ec; border-radius:9px; background:#fff; } .mail-rule-tag-editor>input[type="text"]{ border:0!important; outline:0; box-shadow:none!important; } .mail-admin-rule-tag-vars{margin-top:7px} /* Legacy-Telefonverwaltung · optisch an die gemeinsame Verwaltung angeglichen. */ .fi-call-tools{ display:grid; gap:16px; } .fi-call-tools>h1{ margin:0; font-size:var(--fi-text-h1-font-size,28px); } .fi-call-tools>p{ margin:-8px 0 0; color:var(--sub); max-width:760px; } .fi-call-tools .card, .fi-call-tools .panel{ margin:0; padding:var(--fi-content-padding,20px); border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:var(--shadow); } .fi-call-tools .card h2, .fi-call-tools .panel h2{ margin:0 0 9px; font-size:var(--fi-text-h2-font-size,18px); } .fi-call-tools .card h3, .fi-call-tools .panel h3{ margin:var(--fi-text-h3-margin-top,0px) 0 var(--fi-text-h3-margin-bottom,8px); font-size:var(--fi-text-h3-font-size,16px); } .fi-call-tools .error, .fi-call-tools .success{ margin:0; padding:10px 12px; border-radius:9px; font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-call-tools .error{ background:#fff5e6; color:var(--fi-status-error-color,#d70015); } .fi-call-tools .success{ background:var(--fi-pair-gruen-surface); color:var(--fi-pair-gruen-text); } .fi-call-tools form:not(.inline){ display:grid; gap:12px; } .fi-call-tools label{ display:grid; gap:5px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-call-tools .inline{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:8px 0; } /* Gemeinsamer Responsive-Feinschliff */ @media(max-width:900px){ .fi-page-heading{ align-items:stretch; flex-direction:column; gap:var(--fi-inline-gap,8px); min-height:0; } .fi-page-heading>.fi-row, .fi-page-heading>.manager-actions{ justify-content:flex-start; width:100%; } .fi-grid{ grid-template-columns:1fr; gap:var(--fi-block-gap,20px); } .mail-admin-table-head{ align-items:stretch; flex-direction:column; } .mail-admin-filterbar{ width:100%; } .mail-admin-filterbar .search-wrap{ width:100%; min-width:0; } .mail-admin-rule-editor .full{ grid-column:auto; } } @media(max-width:700px){ .fi-form-grid{ grid-template-columns:1fr; } .fi-field--full{ grid-column:auto; } .fi-card-header{ align-items:flex-start; flex-wrap:wrap; } .fi-card-body{ padding:var(--fi-content-padding,20px); } .fi-card-footer{ padding:var(--fi-inline-gap,8px) var(--fi-content-mobile-padding,16px); } .manager-actions{ flex-wrap:wrap; } .mail-admin-rule-row, .mail-admin-data-row{ grid-template-columns:30px minmax(0,1fr) auto; gap:8px; padding:10px 14px; } .mail-admin-rule-row>.fi-badge, .mail-admin-data-row>.fi-badge{ justify-self:end; } .mail-admin-rule-row>a, .mail-admin-rule-row>form, .mail-admin-data-row>form{ } .mail-admin-rule-row>a{ grid-column:2; justify-self:end; } .mail-admin-rule-row>form, .mail-admin-data-row>form{ justify-self:end; } } @media(max-width:620px){ .fi-page-heading{ margin-bottom:var(--fi-block-gap,20px); padding-top:var(--fi-inline-gap,8px); } .fi-page-heading h1{ font-size:var(--fi-text-h1-font-size,28px); } .fi-page-heading>.fi-row, .fi-page-heading>.manager-actions{ gap:6px; } .dms-filterbar{ grid-template-columns:1fr; } .dms-filterbar>.search-wrap{ grid-column:auto; } .dms-current-folder{ align-items:flex-start; flex-direction:column; } .dms-current-folder>div{ flex-wrap:wrap; } #mailComposerDialog, #mailRuleDialog{ width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:14px; } #mailComposerDialog .mail-compose, #mailRuleDialog .mail-rule-form{ padding:13px; } } .mail-rule-condition-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px; } .mail-rule-condition-tools .muted{ margin:0; } .mail-admin-rule-row .mail-admin-data-main strong{ overflow:visible; text-overflow:clip; white-space:normal; line-height:var(--fi-text-strong-line-height,1.5); } /* Kontakte · Alerts und mobile Akte */ .contacts-page #recordError, .contacts-page #recordSuccess{ display:none; margin:12px 0 0; padding:10px 12px; border:1px solid transparent; border-radius:10px; font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); line-height:var(--fi-text-small-line-height,1.5); } .contacts-page #recordError:not(:empty){ display:block; border-color:#ffd4d1; background:#fff1f0; color:var(--fi-status-error-color,#d70015); } .contacts-page #recordSuccess:not(:empty){ display:block; border-color:var(--fi-pair-gruen-surface); background:var(--fi-pair-gruen-surface); color:var(--fi-content-accent-color,#2f3a45); } @media(max-width:620px){ .contacts-record-panel{ padding:var(--fi-content-padding,20px); } .contacts-record-panel .manager-actions{ bottom:calc(-1 * var(--fi-content-padding,20px)); margin:var(--fi-block-gap,20px) calc(-1 * var(--fi-content-padding,20px)) calc(-1 * var(--fi-content-padding,20px)); padding:var(--fi-inline-gap,8px) var(--fi-content-padding,20px); } .contacts-record-panel .manager-actions .btn{ flex:1; } } .fi-admin-overview-card{ display:flex; flex-direction:column; height:100%; margin-bottom:0; } .fi-admin-overview-card .fi-card-header h2{ display:flex; align-items:center; gap:var(--fi-inline-gap,8px); } .fi-admin-overview-card .fi-card-body{ flex:1; } .fi-admin-overview-card .fi-card-body p{ margin:0; color:var(--sub); line-height:var(--fi-text-p-line-height,1.5); } .fi-admin-overview-card .fi-card-footer{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } @media(max-width:620px){ .fi-admin-overview{ gap:12px; } .fi-admin-overview-card .fi-card-footer .btn{ flex:1 1 auto; } } /* Mitarbeiter und Benutzer · mobile Kartenlisten */ /* Gemeinsame Leerzustände */ .fi-empty-state{ overflow-wrap:anywhere; min-width:0; font-family:var(--fi-text-p-font-family,system-ui,sans-serif),sans-serif; font-size:var(--fi-text-p-font-size,14px); line-height:var(--fi-text-p-line-height,1.5); display:grid; place-items:center; align-content:center; gap:var(--fi-inline-gap,8px); min-height:var(--fi-empty-min-height,260px); padding:var(--fi-content-padding,20px); color:var(--sub); text-align:center; } .fi-empty-state>.ti{ margin:0; color:var(--sub); font-size:var(--fi-empty-icon-font-size,18px); line-height:1; } .fi-empty-state>strong{ display:block; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-empty-state>span, .fi-empty-state>p{ max-width:360px; margin:0; color:var(--sub); font-size:var(--fi-text-p-font-size,14px); line-height:var(--fi-text-p-line-height,1.5); } .fi-empty-state.fi-empty-state--inline{ display:flex; align-items:center; justify-content:center; gap:var(--fi-inline-gap,8px); min-height:var(--fi-empty-compact-min-height,110px); padding:var(--fi-section-padding,12px); text-align:center; --fi-text-small-font-size:var(--fi-badge-font-size,10px); font-size:var(--fi-text-small-font-size,11px); } .fi-empty-state--inline>.ti{flex:none;font-size:var(--fi-empty-icon-font-size,18px)} .fi-empty-state--inline>span{max-width:none;white-space:normal} .fi-empty-state.fi-empty-state--centered{justify-content:center;text-align:center;--fi-text-small-text-align:center} .fi-empty-state.fi-empty-state--stacked{flex-direction:column;--fi-text-small-font-weight:600} .comment.fi-empty-state{background:#fff;border-style:dashed} .fi-empty-state--compact{ min-height:var(--fi-empty-compact-min-height,110px); padding:var(--fi-section-padding,12px); } .fi-empty-state--compact>.ti{ font-size:var(--fi-empty-icon-font-size,18px); } .search-empty.fi-empty-state{ margin:0; border-top:1px solid var(--line); } .mail-admin-empty.fi-empty-state{ min-height:var(--fi-empty-min-height,260px); } .dms-detail-empty.fi-empty-state{ min-height:var(--fi-empty-min-height,260px); } @media(max-width:620px){ .fi-empty-state{ min-height:var(--fi-empty-mobile-min-height,180px); padding:var(--fi-content-mobile-padding,16px); } .fi-empty-state--compact{ min-height:var(--fi-empty-mobile-compact-min-height,90px); } } /* Gemeinsamer Toolbar- und Filterrhythmus */ .workspace-toolbar,.mail-thread-toolbar,.dms-filterbar,.mail-admin-table-head,.mail-admin-filterbar{ gap:var(--fi-toolbar-gap,10px); } .workspace-toolbar, .mail-thread-toolbar{ padding:11px 14px; background:#fff; } .dms-filterbar{ padding:10px 12px; } .mail-admin-table-head{ padding:16px 18px; } .manager-actions,.fi-card-footer.fi-row{ gap:8px; } @media(max-width:700px){ .workspace-toolbar, .mail-thread-toolbar{ padding:10px 12px; } .dms-filterbar{ padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); } .mail-admin-table-head{ padding:14px; } } /* Dashboard · zentrale Aktionszentrale */ .fi-action-center{ margin-bottom:18px; border-color:#e1e7ec; } .fi-action-center-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px 17px; border-bottom:1px solid var(--line); background:var(--paper); } .fi-action-center-head h1{ margin:var(--fi-text-h1-margin-top,0px) 0 var(--fi-text-h1-margin-bottom,8px); font:var(--fi-text-h1-font-weight,700) var(--fi-text-h1-font-size,28px)/var(--fi-text-h1-line-height,1.2) var(--fi-text-h1-font-family,system-ui,sans-serif),sans-serif; letter-spacing:var(--fi-text-h1-letter-spacing,0px); } .fi-action-center-head p{ margin:0; } .fi-action-center-list{ display:grid; background:#fff; } .fi-action-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; min-height:66px; padding:0 10px 0 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background .15s,box-shadow .15s; } .fi-action-item:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); } .fi-action-item.is-due{ background:#fff5e6; box-shadow:inset 3px 0 0 #d70015; } .fi-action-item.is-due:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:#fff5e6; } .fi-action-source{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; font-size:var(--fi-text-p-font-size,14px); } .fi-action-main{ display:grid; min-width:0; gap:2px; } .fi-action-title{ overflow:hidden; color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-overflow:ellipsis; white-space:nowrap; } .fi-action-subtitle{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); text-overflow:ellipsis; white-space:nowrap; } .fi-action-chips{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:3px; } .fi-action-owner{ display:flex; align-items:center; gap:5px; overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-overflow:ellipsis; white-space:nowrap; } .fi-action-time{ display:grid; justify-items:end; font-variant-numeric:tabular-nums; } .fi-action-time strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-action-time small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-action-arrow{color:var(--sub);font-size:var(--fi-text-p-font-size,14px);} .fi-action-center .workspace-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; } @media(max-width:900px){ .fi-action-center-head{ flex-direction:column; padding:18px; } } @media(max-width:620px){ .fi-action-center-head{ padding:15px; } .fi-action-center-head h1{ font-size:var(--fi-text-h1-font-size,28px); } .fi-action-source{ width:32px; height:32px; } .fi-action-owner, .fi-action-arrow{ display:none; } .fi-action-title{ white-space:normal; } .fi-action-subtitle{ white-space:normal; } .fi-action-time{ align-self:start; } .fi-action-center .workspace-footer{ align-items:flex-start; flex-direction:column; } } .fi-action-scope{ margin-top:12px; width:max-content; max-width:100%; overflow:auto; } @media(max-width:480px){ .fi-action-scope{width:100%} .fi-action-scope .tab{flex:1 1 0} } .fi-action-item.is-stale:not(.is-due){ box-shadow:inset 3px 0 0 #a05a00; } .fi-action-item.is-stale:not(.is-due):hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:#fff9e0; } /* Aktionszentrale · Schnellaktionen */ .fi-action-link{ display:grid; grid-template-columns:38px minmax(0,1fr) minmax(150px,220px) 54px 16px; align-items:center; gap:11px; min-width:0; min-height:66px; padding:10px 6px 10px 16px; color:inherit; text-decoration:none; } .fi-action-quick{ display:flex; align-items:center; justify-content:flex-end; gap:5px; } .fi-action-quick .btn.is-busy{ opacity:.55; pointer-events:none; } .fi-action-quick .btn.is-busy i{ animation:fi-action-spin .8s linear infinite; } @keyframes fi-action-spin{ to{transform:rotate(360deg)} } @media(max-width:900px){ .fi-action-link{ grid-template-columns:38px minmax(0,1fr) 54px 16px; } .fi-action-link .fi-action-owner{ grid-column:2; grid-row:2; margin-top:-6px; } } @media(max-width:700px){ .fi-action-item{ grid-template-columns:1fr; padding:0; } .fi-action-link{ grid-template-columns:34px minmax(0,1fr) 48px; padding:10px 12px 7px; } .fi-action-link .fi-action-owner, .fi-action-link .fi-action-arrow{ display:none; } .fi-action-quick{ justify-content:flex-end; padding:0 12px 10px 54px; } } /* Globale Benachrichtigungen */ .fi-notification-root{ position:relative; z-index:40; } .fi-notification-panel{ position:absolute; top:calc(100% + 9px); right:0; width:min(390px,calc(100vw - 24px)); max-height:min(560px,calc(100vh - 110px)); overflow:auto; border:1px solid #e1e7ec; border-radius:15px; background:#fff; box-shadow:var(--fi-shadow-float); } .fi-notification-panel-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); } .fi-notification-panel-head>div{ display:grid; gap:2px; } .fi-notification-panel-head strong{ color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-strong-font-size,14px); } .fi-notification-panel-head small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-notification-list{ display:grid; } .fi-notification-item{ display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:center; gap:10px; padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px); border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background .15s; } .fi-notification-item:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); } .fi-notification-item.is-high{ box-shadow:inset 3px 0 0 #a05a00; background:#fff9e0; } .fi-notification-item.is-critical{ box-shadow:inset 3px 0 0 #d70015; background:#fff1f0; } .fi-notification-icon{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-icon-size,18px); } .fi-notification-main{ display:grid; min-width:0; gap:2px; } .fi-notification-title{ overflow:hidden; color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-overflow:ellipsis; white-space:nowrap; } .fi-notification-text{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); line-height:var(--fi-text-small-line-height,1.5); text-overflow:ellipsis; white-space:nowrap; } .fi-notification-meta{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-notification-item>.ti{ color:var(--sub); font-size:var(--fi-icon-size,18px); } @media(max-width:700px){ .fi-notification-panel{ position:fixed; top:68px; right:10px; left:10px; width:auto; max-height:calc(100dvh - 80px); } .fi-notification-title, .fi-notification-text{ white-space:normal; } } /* Benachrichtigungs-Historie */ .fi-notification-panel-footer{ position:sticky; bottom:0; padding:10px 13px; border-top:1px solid var(--line); background:#fff; } .fi-notification-panel-footer a{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:34px; border-radius:9px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-decoration:none; } .fi-notification-panel-footer a:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); color:var(--fi-text-p-color,#2f3a45); } .fi-notification-page{ overflow:visible; } .fi-notification-filters{ align-items:center; } .fi-notification-filter-controls{ flex:1; justify-content:flex-end; min-width:0; } .fi-notification-filter-controls select{ min-width:150px; } .fi-notification-history{ display:grid; } .fi-notification-history-row{ border-bottom:1px solid var(--line); background:#fff; } .fi-notification-history-row.is-unread{ background:#eef2f5; } .fi-notification-history-row.is-read{ opacity:.84; } .fi-notification-history-row.is-resolved{ background:#f3f6f8; opacity:.72; } .fi-notification-history-row.is-high{ box-shadow:inset 3px 0 0 #a05a00; } .fi-notification-history-row.is-critical{ box-shadow:inset 3px 0 0 #d70015; } .fi-notification-history-link{ display:grid; grid-template-columns:38px minmax(0,1fr) minmax(150px,auto) 16px; align-items:center; gap:12px; min-height:70px; padding:11px 16px; color:inherit; text-decoration:none; } .fi-notification-history-link:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); } .fi-notification-history-state{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; } .fi-notification-history-row .fi-notification-text{ white-space:normal; } .fi-notification-history-row .fi-notification-meta{ margin-top:2px; } @media(max-width:900px){ .fi-notification-filters{ align-items:stretch; flex-direction:column; } .fi-notification-filter-controls{ justify-content:flex-start; width:100%; } .fi-notification-filter-controls .search-wrap{ flex:1; min-width:220px; } } @media(max-width:620px){ .fi-notification-filter-controls{ display:grid; grid-template-columns:1fr 1fr; width:100%; } .fi-notification-filter-controls select, .fi-notification-filter-controls .search-wrap, .fi-notification-filter-controls .btn{ width:100%; min-width:0; } .fi-notification-filter-controls .search-wrap{ grid-column:1/-1; } .fi-notification-history-link{ grid-template-columns:34px minmax(0,1fr) 14px; gap:9px; padding:10px 12px; } .fi-notification-history-state{ grid-column:2; justify-content:flex-start; } } .fi-action-source.is-generic{ background:#f3f6f8; color:var(--sub); } .fi-diagnostic-grid{ display:grid; gap:8px; } .fi-diagnostic-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid #e1e7ec; border-radius:10px; background:#ffffff; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } /* Vorgänge · Bestellungen, Reklamationen, Reservierungen */ .fi-service-layout{ display:grid; grid-template-columns:minmax(300px,38%) minmax(0,1fr); gap:var(--fi-block-gap,20px); align-items:start; } .fi-service-list-panel, .fi-service-detail{ margin:0; overflow:hidden; } .fi-service-toolbar{ display:grid; gap:10px; } .fi-service-toolbar .tabs{ overflow:auto; } .fi-service-toolbar>.fi-row{ width:100%; flex-wrap:nowrap; } .fi-service-toolbar>.fi-row .search-wrap{ flex:1 1 auto; width:auto; min-width:0; } .fi-service-toolbar>.fi-row .btn{ flex:none; margin-left:auto; } .fi-service-list{ display:grid; max-height:calc(100vh - 300px); overflow:auto; } .fi-service-list-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:66px; padding:10px 13px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; color:inherit; font:inherit; text-align:left; text-decoration:none; appearance:none; cursor:pointer; transition:background .15s,box-shadow .15s; } .fi-service-list-row:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); } .fi-service-list-row.is-active{ background:#f3f6f8; box-shadow:inset 3px 0 0 #2f3a45; } .fi-service-list-row.is-overdue{ box-shadow:inset 3px 0 0 #d70015; } .fi-service-list-row.is-active.is-overdue{ box-shadow:inset 3px 0 0 #d70015; background:#fff5e6; } .fi-service-list-main{ display:grid; min-width:0; gap:3px; } .fi-service-list-main strong{ overflow:hidden; color:var(--fi-text-p-color,#2f3a45); font-size:var(--fi-text-strong-font-size,14px); text-overflow:ellipsis; white-space:nowrap; } .fi-service-list-main span{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); text-overflow:ellipsis; white-space:nowrap; } /* Anrufe · Master/Detail-Arbeitsbereich */ .fi-call-master-layout, .fi-master-record-layout{ grid-template-columns:minmax(300px,34%) minmax(0,1fr); align-items:stretch; } .fi-call-master-toolbar{ align-content:start; } .fi-call-master-toolbar .tabs{ width:100%; } .fi-call-master-toolbar .search-wrap{ width:100%; min-width:0; } .fi-call-master-employees{ width:100%; max-width:none; gap:7px; } .fi-call-master-employees .employee-filter{ width:34px; height:34px; font-size:var(--fi-text-small-font-size,11px); } .fi-call-master-dates{ display:flex; align-items:center; gap:6px; } .fi-call-master-dates input{ min-width:0; width:100%; } .fi-call-master-list{ max-height:none; min-height:0; height:100%; align-content:start; } .call-master-day{ position:sticky; top:0; z-index:2; padding:6px 13px; border-bottom:1px solid #e1e7ec; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } .call-master-row .direction-icons .ti{ font-size:var(--fi-icon-size,18px); } .mail-thread.is-missed{ border-left-color:var(--fi-list-missed-border-color,#d70015); } .call-master-row.is-reminder-due:not(.is-overdue):not(.is-active):not(.is-live){ border-left-color:var(--fi-list-reminder-border-color,#a05a00); box-shadow:none; } .fi-call-detail{ display:flex; min-width:0; flex-direction:column; } .fi-call-detail-empty{ display:none; } .fi-call-detail.is-empty>.fi-call-detail-empty{ display:grid; align-content:start; } .fi-call-detail.is-empty>.fi-call-detail-toolbar, .fi-call-detail.is-empty>.fi-call-detail-head, .fi-call-detail.is-empty>.fi-call-detail-body{ display:none; } .fi-call-detail>.fi-card-body{ min-height:0; flex:1; overflow:auto; } .fi-service-list-meta{ display:grid; justify-items:end; gap:4px; } .fi-service-list-meta small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-service-form .fi-card-header{ border-bottom:1px solid var(--line); } .fi-service-customer-fields[hidden]{ display:none; } .fi-checkbox-field{ display:flex; align-items:center; flex-direction:row; gap:var(--fi-checkbox-gap,8px); align-self:end; min-height:var(--fi-control-height,43px); } .fi-service-history{ border-top:1px solid var(--line); } .fi-service-history-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 8px; } .fi-service-history-head h3{ margin:0; font-size:var(--fi-text-h3-font-size,16px); } .fi-service-history-row{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; padding:9px 18px; border-top:1px solid var(--line); } .fi-service-history-icon{ display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#f3f6f8; color:var(--sub); } .fi-service-history-row>span:last-child{ display:grid; gap:2px; } .fi-service-history-row strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-service-history-row small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } @media(max-width:960px){ .fi-service-layout{ grid-template-columns:1fr; } .fi-service-list{ max-height:360px; } } @media(max-width:620px){ .fi-service-list-row{ padding:9px 11px; } .fi-service-detail .fi-card-body{ padding:14px; } } /* Bestellungen · Positionen und Lieferfortschritt */ .fi-order-summary{ display:grid; gap:7px; padding:10px 0 2px; border-top:1px solid var(--line); } .fi-order-summary-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .fi-order-progress-bar{ height:5px; overflow:hidden; border-radius:999px; background:#e3e9ee; } .fi-order-progress-bar span{ display:block; height:100%; border-radius:inherit; background:#2f3a45; transition:width .2s ease; } .fi-order-items{ display:grid; gap:8px; } .fi-order-items-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; } .fi-order-items-head h3{ margin:0; color:var(--fi-text-h3-color,#2f3a45); font-size:var(--fi-text-h3-font-size,16px); } .fi-order-table{ overflow:hidden; border:1px solid #e1e7ec; border-radius:10px; background:#fff; } .fi-order-table-head, .fi-order-table-row{ display:grid; grid-template-columns:minmax(85px,.8fr) minmax(95px,.9fr) minmax(180px,2fr) 75px 75px 90px 120px 90px 76px; align-items:center; column-gap:8px; } .fi-order-table-head{ min-height:34px; padding:0 10px; border-bottom:1px solid #e1e7ec; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; letter-spacing:var(--fi-text-small-letter-spacing,0px); } .fi-order-table-row{ padding:8px 10px; border-bottom:1px solid var(--line); } .fi-order-table-row:last-child{ border-bottom:0; } .fi-order-table-row label{ display:block; min-width:0; margin:0; } .fi-order-table-row label>span{ display:none; } .fi-order-table-row input{ width:100%; min-width:0; } .fi-order-table-state{ display:flex; align-items:center; } .fi-order-table-actions{ display:flex; align-items:center; justify-content:flex-end; gap:4px; } .fi-order-table-note{ grid-column:1/-1; margin-top:7px!important; } .fi-order-table-note>span{ display:block!important; margin:0 0 4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-static-field{ display:flex; align-items:center; min-height:38px; padding:7px 9px; border:1px solid #e1e7ec; border-radius:9px; background:#f3f6f8; } .fi-order-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--line); background:#f3f6f8; } .fi-order-actions>div:first-child{ display:grid; gap:2px; } .fi-order-actions>div:first-child strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } @media(max-width:1180px){ .fi-order-table-head{ display:none; } .fi-order-table-row{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:8px; } .fi-order-table-row label>span{ display:block; margin-bottom:4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-order-table-name{ grid-column:span 2; } .fi-order-table-note{ grid-column:1/-1; } } @media(max-width:700px){ .fi-order-table-row{ grid-template-columns:1fr 1fr; } .fi-order-table-name, .fi-order-table-note{ grid-column:1/-1; } .fi-order-table-actions{ justify-content:flex-start; } .fi-order-actions{ align-items:flex-start; flex-direction:column; } } /* Vorgangsverknuepfungen */ .fi-service-links-list{ display:grid; } .fi-service-link-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--line); } .fi-service-link-row>a{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:9px; color:inherit; text-decoration:none; } .fi-service-link-row>a>span:last-child{ display:grid; gap:2px; min-width:0; } .fi-service-link-row strong{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); text-overflow:ellipsis; white-space:nowrap; } .fi-service-link-row small{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); text-overflow:ellipsis; white-space:nowrap; } .fi-service-picker{ overflow:hidden; } .fi-service-picker-source{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:#f3f6f8; } .fi-service-picker-source>.ti{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#e3e9ee; color:var(--fi-content-accent-color,#2f3a45); font-size:var(--fi-icon-size,18px); } .fi-service-picker-source>span{ display:grid; gap:2px; } .fi-service-picker-source strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-service-picker-source small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-service-picker-group{ border-top:1px solid var(--line); } .fi-service-picker-list{ display:grid; } .fi-service-picker-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--line); } .fi-service-picker-row>a{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:9px; min-width:0; color:inherit; text-decoration:none; } .fi-service-picker-row>a>span:last-child{ display:grid; gap:2px; min-width:0; } .fi-service-picker-row strong{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); text-overflow:ellipsis; white-space:nowrap; } .fi-service-picker-row small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } @media(max-width:620px){ .fi-service-picker-row{ grid-template-columns:1fr; } .fi-service-picker-row>form{ display:flex; justify-content:flex-end; } } .fi-order-customer-totals{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:14px 0; } .fi-order-customer-totals>span{ display:grid; gap:3px; padding:9px 10px; border:1px solid #e1e7ec; border-radius:9px; background:#f3f6f8; } .fi-order-customer-totals small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; } .fi-order-customer-totals strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-order-customer-head, .fi-order-customer-row{ display:grid; grid-template-columns:minmax(80px,.8fr) minmax(95px,.9fr) minmax(160px,1.5fr) minmax(140px,1.2fr) 70px 90px 80px 120px 76px; align-items:center; column-gap:8px; } .fi-order-customer-head{ min-height:34px; padding:0 10px; border-bottom:1px solid #e1e7ec; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; } .fi-order-customer-row{ padding:8px 10px; border-bottom:1px solid var(--line); } .fi-order-customer-row label{ display:block; min-width:0; } .fi-order-customer-row label>span{ display:none; } .fi-order-customer-row input{ width:100%; min-width:0; } .customer-order-new-items{ display:grid; gap:var(--fi-inline-gap,8px); margin-top:var(--fi-inline-gap,8px); } .customer-order-new-position{ padding:12px; border:1px solid var(--line); border-radius:12px; background:#ffffff; } .customer-order-new-position-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--fi-inline-gap,8px); margin-bottom:10px; } .customer-order-new-position-head strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } /* Kundenbestellung · Neuanlage-Modal */ .customer-order-new-dialog{ overflow:hidden; } .customer-order-dialog-body{ overflow:auto; } .customer-order-dialog-body .field{ margin:0; } .customer-order-dialog-section-head>div{ display:grid; gap:var(--fi-inline-gap,8px); min-width:0; } .customer-order-dialog-section-head small{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .customer-order-dialog-section-head>.btn{ margin-left:auto; } .customer-order-new-items{ display:grid; gap:var(--fi-inline-gap,8px); } .customer-order-new-position{ padding:0; border:0; border-radius:0; background:transparent; } .customer-order-new-position+.customer-order-new-position{ padding-top:var(--fi-inline-gap,8px); border-top:1px solid var(--line); } .customer-order-new-position-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--fi-inline-gap,8px); margin:0 0 var(--fi-inline-gap,8px); } .customer-order-new-position-head strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } /* Globale Regel: Dropdowns und Live-Suchergebnisse überlagern den Inhalt und verschieben nichts darunter. */ .customer-order-contact-search, .customer-order-supplier-search, :is(.field,.fi-field):has(>.customer-order-contact-results){ position:relative; } /* Kontaktalarm nach Kundenauswahl: zentrale Warnmeldung mit Abstand unter dem Suchfeld, so breit wie ihr Inhalt. */ [data-customer-selected-alarm]{margin-top:var(--fi-inline-gap,8px);width:fit-content;max-width:100%} .customer-order-contact-results{ position:absolute; top:calc(100% + var(--fi-suggestion-popup-offset,8px)); left:0; right:0; z-index:60; box-sizing:border-box; width:auto; max-height:min(260px,35dvh); margin:0; overflow:auto; box-shadow:var(--fi-shadow-float); } .customer-order-contact-results .customer-order-contact-results .contact-match strong, .customer-order-contact-results .contact-match small{ display:block; } .customer-order-contact-results .contact-match small{ margin-top:2px; color:var(--sub); font-size:var(--fi-text-small-font-size,10px); } .customer-order-article-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--fi-inline-gap,8px) var(--fi-block-gap,20px); align-items:end; width:100%; min-width:0; } .customer-order-article-grid>*{ min-width:0; } .customer-order-article-grid .field{ margin:0; min-width:0; } .customer-order-article-grid .fi-control{ width:100%; max-width:100%; min-width:0; } .customer-order-field-workshop, .customer-order-field-supplier, .customer-order-article-qty, .customer-order-article-price, .customer-order-article-total{ grid-column:span 2; } .customer-order-field-type, .customer-order-article-name{ grid-column:span 4; } /* Summen-Zelle wie die Nachbarfelder (zentrales Label-Raster), damit die Beschriftungen einer Reihe bündig stehen. */ .customer-order-article-total{display:grid;gap:var(--fi-control-label-gap,7px);align-content:start} .customer-order-article-total>output{ display:flex; align-items:center; min-height:var(--fi-control-height,43px); } .customer-order-field-number, .customer-order-field-ean, .customer-order-field-date, .customer-order-field-deposit{ grid-column:span 3; } .customer-order-bike-grid, .customer-order-article-note{ grid-column:1 / -1; } .customer-order-bike-grid{ display:grid; grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr); gap:var(--fi-inline-gap,8px) var(--fi-block-gap,20px); align-items:end; } .customer-order-bike-grid>*{ min-width:0; } .customer-order-bike-grid--text{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* Kundenbestellung · Artikelerfassung nutzt die verfügbare Modalbreite. */ @media(max-width:620px){ .customer-order-article-grid{ grid-template-columns:minmax(0,1fr); } .customer-order-article-grid>.field{ grid-column:1 / -1; } .customer-order-bike-grid{ grid-template-columns:minmax(0,1fr); } } /* Kundenbestellung · Read-only Detailansicht */ .customer-order-detail-head{ align-items:center; } .customer-order-detail-body{ display:grid; gap:18px; } .customer-order-detail-section{ padding:0; } .customer-order-detail-section+.customer-order-detail-section{ padding-top:18px; border-top:1px solid var(--line); } .customer-order-detail-section-head{ display:flex; align-items:center; gap:var(--fi-inline-gap,8px); margin-bottom:12px; } .customer-order-detail-section-head>.ti{ display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:#eef2f5; color:var(--fi-content-accent-color,#2f3a45); font-size:var(--fi-icon-size,18px); } .customer-order-detail-section-head h3{ margin:0; font:var(--fi-text-h3-font-weight,700) var(--fi-text-h3-font-size,16px)/var(--fi-text-h3-line-height,1.2) var(--fi-text-h3-font-family,system-ui,sans-serif),sans-serif; color:var(--fi-text-h3-color,#2f3a45); } .customer-order-detail-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; } .customer-order-detail-value{ min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#ffffff; } .customer-order-detail-value small{ display:block; margin-bottom:4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; letter-spacing:var(--fi-text-small-letter-spacing,0px); } .customer-order-detail-value strong{ display:block; color:var(--ink); font-size:var(--fi-text-strong-font-size,14px); line-height:var(--fi-text-strong-line-height,1.5); overflow-wrap:anywhere; } @media(max-width:980px){ .customer-order-detail-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:620px){ .customer-order-detail-grid{ grid-template-columns:1fr; } } /* Zentrale Aktenhistorie */ .puzzle-timeline{ margin-top:18px; } /* Aktenhistorie · Filter und Tagesgruppen */ .puzzle-timeline-filters{ flex-wrap:wrap; width:max-content; max-width:100%; margin:12px 0 8px; } /* Kontakte · gleiche Aktenstruktur wie Lieferanten */ .contacts-page.fi-service-layout{ align-items:stretch; } .contacts-page .contacts-record-panel{ overflow:hidden; } .contacts-page .contacts-record-panel form{ min-height:100%; } .contacts-page .contacts-record-actions{ justify-content:flex-end; } .contacts-page #recordCategoryBadge{ align-self:flex-start; } /* Kontakte · Box-Modell exakt wie Lieferantenakte */ .contacts-page .contacts-record-panel{ padding:0; } .contacts-page .contacts-record-panel>form{ margin:0; padding:0; } .contacts-page .customer-order-detail-body{ padding:20px; } .contacts-page .customer-order-detail-section{ margin:0; padding:0; } .contacts-page .customer-order-detail-section+.customer-order-detail-section{ margin-top:0; padding-top:18px; } .contacts-page .fi-card-footer{ margin:0; padding:var(--fi-section-padding,12px) var(--fi-content-padding,20px); } /* Stammdaten-Akten: Kontakte und Lieferanten identisches Viewport-Layout */ .fi-master-record-layout{ height:max(480px,calc(100dvh - 300px)); align-items:stretch; } .fi-master-record-layout>.fi-service-list-panel, .fi-master-record-layout>.fi-service-detail{ height:100%; min-height:0; } .fi-master-record-layout>.fi-service-list-panel{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; } .fi-master-record-layout>.fi-service-list-panel .fi-service-list{ min-height:0; max-height:none; overflow:auto; } .fi-master-record-layout>.fi-service-detail{ display:grid; grid-template-rows:auto minmax(0,1fr); } .fi-master-record-layout>.fi-service-detail>.fi-card-body{ min-height:0; overflow:auto; } .fi-master-record-layout.contacts-page>.fi-service-detail>form{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; min-height:0; } .fi-master-record-layout.contacts-page>.fi-service-detail>form>.fi-card-body{ min-height:0; overflow:auto; } .fi-master-record-layout.contacts-page>.fi-service-detail>form>.fi-card-footer{ flex:0 0 auto; } .fi-master-record-layout .workspace-footer, .fi-master-record-layout .workspace-toolbar, .fi-master-record-layout .fi-card-header, .fi-master-record-layout .fi-card-footer{ flex:0 0 auto; } @media(max-width:900px){ .fi-master-record-layout{ height:auto; } .fi-master-record-layout>.fi-service-list-panel, .fi-master-record-layout>.fi-service-detail{ height:min(72dvh,680px); min-height:460px; } } /* Kontakte/Lieferanten: linke Masterliste exakt gleich */ .fi-master-record-layout>.fi-service-list-panel>.workspace-toolbar{ min-height:64px; padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); box-sizing:border-box; } .fi-master-record-layout>.fi-service-list-panel>.fi-service-list{ min-height:0; } .fi-master-record-layout>.fi-service-list-panel>.workspace-footer{ min-height:43px; padding:var(--fi-section-padding,12px) var(--fi-content-padding,20px); box-sizing:border-box; display:flex; align-items:center; } .fi-master-record-layout>.fi-service-list-panel>.fi-service-list{ height:100%; max-height:none; padding:0; align-content:start; grid-auto-rows:66px; } .contacts-page .fi-service-list-row, .fi-master-record-layout>.fi-service-list-panel .fi-service-list-row{ height:66px; min-height:66px; max-height:66px; padding:10px 13px; box-sizing:border-box; } .fi-call-detail-body .callback-history small{ display:inline-flex; align-items:center; gap:5px; color:var(--sub); } .fi-call-detail-body .callback-history .ti{ flex:none; font-size:var(--fi-icon-size,18px); } /* ================================================== FULLAND UI SYSTEM · verbindliche globale Komponenten Keine seitenbezogenen Varianten für identische Semantik. ========================================================= */ /* Aktionen / Buttons */ .btn, .tab{ font-family:inherit; } .btn>.ti, .tab>.ti{ flex:none; font-size:var(--fi-button-icon-size,16px); line-height:1; } .btn-primary>.ti, .fi-btn--primary>.ti{ font-size:var(--fi-button-icon-size,16px); } .fi-btn--icon, .mail-toolbar-icon{ display:inline-grid; place-items:center; flex:none; width:var(--fi-icon-button-size,36px); height:var(--fi-icon-button-size,36px); min-width:var(--fi-icon-button-size,36px); min-height:var(--fi-icon-button-size,36px); padding:0; border:var(--fi-button-border-width,1px) solid var(--line); border-radius:999px; background:#fff; color:#4a5560; text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s,color .15s; } .fi-btn--icon:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled), .mail-toolbar-icon:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){ background:var(--fi-hover-background,#f3f6f8); border-color:var(--fi-hover-border-color,#d7dee4); } .fi-btn--icon>.ti, .mail-toolbar-icon>.ti{ font-size:var(--fi-button-icon-size,16px); line-height:1; } /* Buttons */ .btn{ gap:var(--fi-button-gap,7px); padding:var(--fi-button-padding-y,9px) var(--fi-button-padding-x,12px); border-width:var(--fi-button-border-width,1px); border-radius:var(--fi-button-radius,10px); font-size:var(--fi-button-font-size,12px); font-weight:var(--fi-button-font-weight,700); } /* Toolbars */ .fi-toolbar{ justify-content:space-between; padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); border-bottom:var(--fi-toolbar-border-width,1px) solid var(--line); background:#ffffff; } .fi-toolbar-group, .mail-detail-toolbar-group{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; } .mail-toolbar-separator{ display:block; flex:none; width:1px; height:20px; margin:0 3px; background:#d7dee4; } /* Tags / Chips */ .fi-tag{ display:inline-flex; align-items:center; gap:var(--fi-tag-gap,5px); min-height:var(--fi-tag-height,24px); padding:var(--fi-tag-padding-y,4px) var(--fi-tag-padding-x,8px); border:var(--fi-tag-border-width,1px) solid #e1e7ec; border-radius:var(--fi-tag-radius,999px); background:#f3f6f8; color:#7d8a96; font-size:var(--fi-tag-font-size,9px); font-weight:var(--fi-tag-font-weight,700); line-height:1.2; } .fi-tag>.ti{flex:none;font-size:var(--fi-tag-icon-size,12px);line-height:1;} /* Dialoge */ .fi-dialog-header>.fi-btn--icon{ margin-left:auto; } .fi-dialog-footer, .manager-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); background:var(--paper); } /* Tabs */ .tab>.ti{ font-size:var(--fi-button-icon-size,16px); } /* UI-System · lebender Komponenten-Katalog */ .fi-ui-system-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .fi-ui-system-grid>.fi-card{ min-width:0; } .fi-ui-demo-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .fi-ui-demo-tabs{ width:max-content; max-width:100%; } .fi-ui-dialog-demo{ grid-column:1/-1; } @media(max-width:900px){ .fi-ui-system-grid{grid-template-columns:1fr} .fi-ui-dialog-demo{grid-column:auto} } /* UI-System · Editor */ .fi-ui-overview{ display:grid; padding:0; } .fi-ui-overview-row{ display:grid; grid-template-columns:minmax(150px,.75fr) minmax(170px,.9fr) minmax(540px,3fr) 42px; align-items:center; gap:12px; min-height:88px; padding:10px 16px; border-bottom:1px solid var(--line); } .fi-ui-overview-row:last-child{border-bottom:0} .fi-ui-overview-key, .fi-ui-overview-main, .fi-ui-overview-state-previews{ min-width:0; } .fi-ui-overview-key{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } .fi-ui-overview-key code{ padding:3px 6px; border-radius:6px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-code-font-size,12px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-ui-overview-main{ display:grid; gap:3px; } .fi-ui-overview-main strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-ui-overview-main small{ display:flex; align-items:center; gap:5px; margin:0; } .fi-ui-overview-state-previews{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .fi-ui-state-preview{ display:grid; align-content:center; gap:5px; min-width:0; min-height:78px; padding:10px; border:1px solid #e1e7ec; border-radius:10px; background:#ffffff; } .fi-ui-state-preview-label{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } .fi-ui-state-preview-control{ display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:5px; min-width:0; } .fi-ui-state-preview-control .btn{ pointer-events:none; } .fi-ui-state-preview-control .mail-toolbar-icon{ pointer-events:none; } .fi-ui-state-preview>small{ margin:0; overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-overflow:ellipsis; white-space:nowrap; } .fi-ui-button-palette-card{ margin-top:16px; } .fi-ui-button-palette{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; } .fi-ui-button-tone{ display:grid; gap:8px; padding:12px; border:1px solid #e1e7ec; border-radius:12px; background:#ffffff; } .fi-ui-button-tone>strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-ui-button-tone-preview{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .fi-ui-style-groups{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .fi-ui-style-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 14px; } .fi-ui-style-summary>div{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #f3f6f8; border-radius:9px; background:#ffffff; } .fi-ui-style-summary span{ min-width:0; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-ui-style-summary strong{ flex:none; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); } .fi-ui-editor-actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; } .fi-ui-editor-actions .btn{ white-space:nowrap; } .fi-ui-source-hint{ display:inline-flex; align-items:center; min-height:20px; padding:2px 6px; border-radius:999px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } .fi-ui-source-hint.is-custom{ background:#eef2f5; color:var(--sub); } @media(max-width:1200px){ .fi-ui-overview-row{ grid-template-columns:minmax(130px,.65fr) minmax(0,3fr) 42px; } .fi-ui-overview-main{display:none} .fi-ui-style-groups{grid-template-columns:1fr} } @media(max-width:820px){ .fi-ui-overview-row{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } .fi-ui-overview-key, .fi-ui-overview-state-previews{ grid-column:1; } .fi-ui-overview-state-previews{ grid-template-columns:1fr; } .fi-ui-overview-row>.fi-btn--icon{ grid-column:2; grid-row:1; } .fi-ui-style-summary{grid-template-columns:1fr} .fi-ui-style-dialog [data-ui-style-section-fields]{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--fi-section-padding,12px); align-items:start; min-width:0; } @media(max-width:700px){ .fi-ui-style-dialog [data-ui-style-section-fields]{grid-template-columns:minmax(0,1fr)} } .fi-ui-style-field-row{grid-template-columns:1fr} .fi-ui-style-field-row>.fi-ui-editor-actions{grid-column:1;grid-row:auto;justify-content:flex-start} } /* ================================================== VISUELLER KONSISTENZ-LAYER Verbindliche Geometrie für Master/Detail und Legacy-Dialoge. ========================================================= */ /* Master/Detail: Anrufe, Kontakte und Lieferanten folgen derselben Viewport-Logik. */ .fi-call-master-layout, .fi-master-record-layout{ height:max(480px,calc(100dvh - 300px)); align-items:stretch; } .fi-call-master-layout>.workspace{ height:100%; min-height:0; } .fi-call-master-layout>.fi-service-list-panel{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; } .fi-call-master-layout>.fi-service-list-panel>.workspace-toolbar{ grid-area:1 / 1; } .fi-call-master-layout>.fi-service-list-panel>.workspace-footer{ grid-area:3 / 1; } .fi-call-master-layout>.fi-service-list-panel>.fi-empty-state{ grid-area:2 / 1; min-height:0; align-self:stretch; align-content:center; } .fi-call-master-layout>.fi-service-list-panel>.fi-service-list{ grid-area:2 / 1; height:100%; min-height:0; max-height:none; overflow:auto; align-content:start; } .fi-call-master-layout>.fi-service-detail{ display:flex; min-height:0; flex-direction:column; } .fi-call-master-layout>.fi-service-detail>.fi-card-body{ min-height:0; flex:1; overflow:auto; } @media(max-width:960px){ .fi-call-master-layout, .fi-master-record-layout{ height:auto; } .fi-call-master-layout>.workspace, .fi-master-record-layout>.fi-service-list-panel, .fi-master-record-layout>.fi-service-detail{ height:min(72dvh,680px); min-height:460px; } .fi-call-master-layout>.fi-service-list-panel>.fi-service-list{ max-height:none; } } /* Formfelder und Service-Toolbars: verbindliche Endregeln */ .workspace-toolbar.fi-service-toolbar{ display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:var(--fi-toolbar-gap,10px); } .workspace-toolbar.fi-service-toolbar>.tabs{ width:100%; } .workspace-toolbar.fi-service-toolbar>.fi-row{ display:flex; align-items:center; width:100%; min-width:0; flex-wrap:nowrap; gap:8px; } .workspace-toolbar.fi-service-toolbar>.fi-row .search-wrap{ flex:1 1 auto; width:auto; min-width:0; } .workspace-toolbar.fi-service-toolbar>.fi-row>.btn{ flex:none; margin-left:auto; } /* Verbindliche Formularbasis: Geometrie wie in der Anrufverwaltung. */ .fi-control,.field>input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),.field>select,.fi-field>input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),.fi-field>select,.mail-compose input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),.mail-compose select,.mail-admin-fields input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),.mail-admin-fields select,.workspace-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="search"]),.workspace-toolbar select,.mail-thread-toolbar input:not([type="checkbox"]):not([type="radio"]):not([type="search"]),.mail-thread-toolbar select,.dms-filterbar input:not([type="checkbox"]):not([type="radio"]):not([type="search"]),.dms-filterbar select,.mail-admin-filterbar input:not([type="checkbox"]):not([type="radio"]):not([type="search"]),.mail-admin-filterbar select,.mail-permission-row select,.mail-rule-grid input:not([type="checkbox"]):not([type="radio"]),.mail-rule-grid select,.incoming-popup select,.fi-call-tools input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),.fi-call-tools select{ box-sizing:border-box; min-height:var(--fi-control-height,43px); height:var(--fi-control-height,43px); padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px); border:var(--fi-control-border-width,1px) solid #e1e7ec; border-radius:var(--fi-control-radius,10px); background:#fff; color:var(--ink); font:inherit; font-size:var(--fi-control-font-size,14px); outline:0; } .fi-control:focus,.field>input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,.field>select:focus,.fi-field>input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,.fi-field>select:focus,.mail-compose input:focus,.mail-compose select:focus,.mail-admin-fields input:focus,.mail-admin-fields select:focus,.workspace-toolbar input:focus,.workspace-toolbar select:focus,.mail-thread-toolbar input:focus,.mail-thread-toolbar select:focus,.dms-filterbar input:focus,.dms-filterbar select:focus,.mail-admin-filterbar input:focus,.mail-admin-filterbar select:focus,.mail-permission-row select:focus,.mail-rule-grid input:focus,.mail-rule-grid select:focus,.incoming-popup select:focus,.fi-call-tools input:focus,.fi-call-tools select:focus{ border-color:var(--fi-control-focus-border-color,#2f3a45); background:#fff; } .fi-control[type="file"],.field>input[type="file"],.fi-field>input[type="file"],.mail-compose input[type="file"],.mail-admin-fields input[type="file"]{ min-height:var(--fi-control-height,43px); } .fi-control:is(textarea),.field>textarea,.fi-field>textarea,.mail-compose textarea,.mail-admin-fields textarea,.mail-comment-form textarea{ box-sizing:border-box; width:100%; min-height:105px; padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px); border:var(--fi-control-border-width,1px) solid #e1e7ec; border-radius:var(--fi-control-radius,10px); background:#fff; color:var(--ink); font:inherit; line-height:1.45; outline:0; resize:vertical; } .fi-control:is(textarea):focus,.field>textarea:focus,.fi-field>textarea:focus,.mail-compose textarea:focus,.mail-admin-fields textarea:focus,.mail-comment-form textarea:focus{ border-color:var(--fi-control-focus-border-color,#2f3a45); background:#fff; } @media(max-width:760px){ .workspace-toolbar{ flex-wrap:wrap; } .workspace-toolbar.fi-service-toolbar{ display:grid; } .workspace-toolbar.fi-service-toolbar>.fi-row{ flex-wrap:wrap; } .workspace-toolbar.fi-service-toolbar>.fi-row>.btn{ margin-left:0; } .workspace-toolbar.fi-service-toolbar>.fi-row .search-wrap{ flex-basis:100%; width:100%; } } .fi-service-record-layout>.fi-service-detail{ display:block; overflow:auto; } .fi-service-record-layout>.fi-service-detail>.fi-service-form{ margin:0; } .puzzle-modal-search{width:100%;max-width:none;} .puzzle-modal-results{display:grid;max-height:min(52dvh,560px);overflow:auto;} /* ================================================== Viewport-Arbeitsbereiche Mail, Kontakte und DocuHub enden im sichtbaren Bereich; lange Inhalte scrollen innerhalb ihrer jeweiligen Box. ========================================================= */ @media(min-width:961px){ /* E-Mail: drei Spalten mit identischer sichtbarer Höhe */ .mail-workspace{ height:calc(100dvh - 300px); min-height:0; align-items:stretch; } .mail-workspace>.mail-sidebar, .mail-workspace>.mail-thread-panel, .mail-workspace>.mail-detail{ height:100%; min-height:0; } .mail-workspace>.mail-sidebar{ overflow:auto; overscroll-behavior:contain; } .mail-workspace>.mail-thread-panel{ display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; } .mail-workspace>.mail-thread-panel>.mail-thread-list{ min-height:0; overflow:auto; overscroll-behavior:contain; } .mail-workspace>.mail-detail{ overflow:auto; overscroll-behavior:contain; } .mail-workspace>.mail-detail .mail-conversation{ max-height:none; overflow:visible; } /* Kontakte / Lieferanten / Dienstleister */ .fi-master-record-layout{ height:calc(100dvh - 300px); min-height:0; } .fi-master-record-layout>.fi-service-list-panel, .fi-master-record-layout>.fi-service-detail{ min-height:0; } /* DocuHub: Ordner, Dokumente und Detailakte gleich hoch */ .dms-workspace--detail{ height:calc(100dvh - 300px); min-height:0; align-items:stretch; } .dms-workspace--detail>.mail-sidebar, .dms-workspace--detail>.dms-list-panel, .dms-workspace--detail>.dms-detail-panel{ height:100%; min-height:0; } .dms-workspace--detail>.mail-sidebar{ overflow:hidden; } .dms-workspace--detail>.dms-list-panel{ overflow:auto; overscroll-behavior:contain; } .dms-workspace--detail>.dms-detail-panel{ position:static; max-height:none; overflow:auto; overscroll-behavior:contain; } } /* E-Mail · kompakte Thread-Konversation */ @media(max-width:760px){ .mail-message-thread-head{ gap:8px; } .mail-message-thread-main{ grid-template-columns:26px minmax(0,1fr); gap:7px; } .mail-message-head-actions time{ font-size:var(--fi-text-small-font-size,11px); } } /* E-Mail · verbindliche Anzeigeregeln der Detailansicht: Die Detailspalte ist der einzige Scrollbereich. Thread, Nachrichten, Nachrichtentext und HTML-Rahmen haben keine eigene Höhenbegrenzung und kein eigenes Scrollen; die Höhe der HTML-Rahmen setzt mail-content.js nach dem Inhalt (neueste Nachricht mindestens bis zum unteren Rand). */ @media(min-width:961px){ .mail-workspace>.mail-detail{ display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; } } /* E-Mail · sticky Detailkopf 2026-10-07 */ .mail-detail-toolbar{ position:sticky; top:0; z-index:20; background:#f3f6f8; box-shadow:var(--fi-shadow-soft); } .mail-window-dialog .mail-detail-toolbar{ top:0; z-index:30; } /* E-Mail · dargestellte Zitatebene im Thread */ /* Zitate in Antworten eingeklappt auf fünf Zeilen; Schalter darunter als reines Icon. */ .mail-quote-toggle-row{display:flex;margin:-6px 0 6px} /* E-Mail · strukturierte Anhangskarten 2026-10-07 */ @media(max-width:760px){ .mail-message-attachment-heading{ align-items:flex-start; flex-direction:column; } .mail-message-attachment-title{ flex-wrap:wrap; } .mail-message-attachment-row .mail-attachments{ grid-template-columns:1fr; } .mail-attachment-main{ grid-template-columns:var(--fi-attachment-icon-box-size,32px) minmax(0,1fr); } .mail-attachment-open-hint{ display:none; } } /* UI-System · Editor und Live-Vorschau */ .fi-ui-editor-dialog>form{ min-height:0; } .fi-ui-editor-dialog .fi-dialog-body{ min-height:0; overflow:auto; } .fi-ui-editor-dialog .fi-dialog-body.fi-form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fi-ui-editor-dialog .fi-dialog-footer{ position:static; z-index:auto; flex:none; background:#fff; } .fi-ui-editor-dialog .fi-field>span{ font-size:var(--fi-text-small-font-size,11px); } .fi-ui-live-preview{ grid-column:1/-1; display:grid; gap:10px; margin:0; padding:12px; border:1px solid var(--line); border-radius:var(--fi-box-radius,12px); background:#fff; } .fi-ui-live-preview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } .fi-ui-live-preview-head .section-kicker{margin:0} .fi-ui-live-preview-head strong{color:var(--ink);font-size:var(--fi-text-strong-font-size,14px)} .fi-ui-live-preview-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .fi-ui-live-preview .fi-ui-state-preview{background:#fff} .fi-dialog-preview-dock{ flex:none; padding:var(--fi-dialog-footer-padding-y,16px) var(--fi-dialog-body-padding-x,24px); border-top:1px solid var(--line); background:#fff; box-shadow:var(--fi-shadow-soft); } .fi-dialog-preview-dock .fi-ui-live-preview{ position:static; margin:0; box-shadow:none; } .fi-ui-style-dialog-body{ display:block; } .fi-ui-style-dialog [data-ui-style-fields]{ display:grid; } .fi-ui-style-field-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2px var(--fi-inline-gap,8px); padding:calc(var(--fi-inline-gap,8px) / 2) 0; border-bottom:1px solid var(--line); } .fi-ui-style-field-row>.fi-field{ grid-column:1; min-width:0; margin:0; } .fi-ui-style-field-row>.fi-field>span{font-size:var(--fi-text-small-font-size,11px)} .fi-ui-style-field-row>small{ grid-column:1; margin:0; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); } .fi-ui-style-field-row>.fi-ui-editor-actions{ grid-column:2; grid-row:1; align-self:center; } .fi-ui-number-control{ display:flex; align-items:stretch; max-width:180px; } .fi-ui-number-control>.fi-control{ min-width:0; width:100%; border-radius:var(--fi-control-radius,10px) 0 0 var(--fi-control-radius,10px); } .fi-ui-number-control>em{ display:flex; align-items:center; padding:0 8px; border:var(--fi-control-border-width,1px) solid #e1e7ec; border-left:0; border-radius:0 var(--fi-control-radius,10px) var(--fi-control-radius,10px) 0; background:#fff; color:var(--sub); font-size:var(--fi-text-em-font-size,14px); font-style:normal; font-weight:var(--fi-text-strong-font-weight,700); } .fi-ui-number-control>em[hidden], .fi-ui-number-control>em[hidden]+*{display:none} .fi-ui-style-preview-stage{ display:flex; align-items:center; justify-content:center; min-height:120px; padding:14px; border:1px dashed #d7dee4; border-radius:var(--fi-box-radius,12px); background:#fff; } .fi-ui-style-preview-stage>.fi-ui-style-toolbar-sample{width:100%} .fi-ui-style-preview-stage>.fi-control{width:min(220px,100%)} .fi-ui-style-summary>.fi-ui-text-sample{ grid-column:1 / -1; display:block; } .fi-ui-text-sample>code{display:block;margin-bottom:8px} .fi-ui-text-sample>div{overflow-wrap:anywhere} .fi-ui-text-preview{width:100%;overflow-wrap:anywhere} .fi-ui-number-control>input[type="color"]{min-width:64px} .fi-ui-style-toolbar-sample{ display:flex; align-items:center; gap:var(--fi-toolbar-gap,10px); padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); border:var(--fi-toolbar-border-width,1px) solid var(--line); border-radius:var(--fi-box-radius,12px); background:#fff; } .fi-ui-style-toolbar-sample>span{ margin-right:auto; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); } @media(max-width:700px){ .fi-ui-editor-dialog .fi-dialog-body.fi-form-grid, .fi-ui-live-preview-grid{ grid-template-columns:1fr; } .fi-dialog-preview-dock{ padding:var(--fi-dialog-footer-padding-y,16px) var(--fi-dialog-body-padding-x,24px); } } /* UI-System · echte Ghost-Icons */ .fi-action-icon--ghost:where(:not(.fi-btn--icon)){ border-color:transparent!important; background:transparent!important; box-shadow:none!important; } :where(.fi-action-icon--ghost).fi-btn--tone-primary:where(:not(.fi-btn--icon)){color:#1592e6!important} :where(.fi-action-icon--ghost).fi-btn--tone-success:where(:not(.fi-btn--icon)){color:var(--fi-pair-gruen-text)!important} :where(.fi-action-icon--ghost).fi-btn--tone-warning:where(:not(.fi-btn--icon)){color:#a05a00!important} :where(.fi-action-icon--ghost).fi-btn--tone-danger:where(:not(.fi-btn--icon)){color:var(--fi-pair-rot-text)!important} :where(.fi-action-icon--ghost).fi-btn--tone-info:where(:not(.fi-btn--icon)){color:#2f3a45!important} :where(.fi-action-icon--ghost).fi-btn--tone-teal:where(:not(.fi-btn--icon)){color:#2f3a45!important} :where(.fi-action-icon--ghost).fi-btn--tone-violet:where(:not(.fi-btn--icon)){color:#7d8a96!important} :where(.fi-action-icon--ghost).fi-btn--tone-dark:where(:not(.fi-btn--icon)){color:#4a5560!important} .fi-action-icon--ghost.fi-btn--active-tone-neutral.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-neutral[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-primary.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-primary[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-success.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-success[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-warning.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-warning[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-danger.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-danger[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-info.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-info[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-teal.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-teal[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-violet.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-violet[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-dark.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon), .fi-action-icon--ghost.fi-btn--active-tone-dark[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(.fi-btn--icon){ border-color:transparent!important; } /* UI-System · Toolbars vollständig tokenisieren */ .fi-toolbar, .mail-detail-toolbar, .workspace-toolbar{ display:flex; align-items:center; gap:var(--fi-toolbar-gap,10px)!important; padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px)!important; border-bottom-width:var(--fi-toolbar-border-width,1px)!important; } /* ================================================== FULLAND RECORD UI · verbindliche Listen-/Detailstruktur Übersicht links, Detail rechts; dieselben Bausteine auch in Modalen. ========================================================= */ .fi-record-list{ display:grid; min-height:0; overflow:auto; } .fi-master-record-layout>.fi-service-list-panel>.fi-record-list{grid-auto-rows:minmax(66px,auto)} /* Vorgangszeilen im Aufbau der Anrufliste: Statusicon, Name mit Zusatz und Zeit, darunter kompakte Badges; Gruppenüberschriften behalten ihre eigene Höhe. max-content: Zeilen wachsen mit ihrem Inhalt und werden in der festen Listenhöhe nicht zusammengedrückt. */ .fi-service-list.fi-record-list:has(>.fi-record-row.fi-record-row--thread){grid-auto-rows:max-content} .fi-record-row.fi-record-row--thread{grid-template-columns:var(--fi-mail-sender-size,32px) minmax(0,1fr);align-items:start;gap:var(--fi-list-content-gap,10px);height:auto;min-height:0;max-height:none;padding:var(--fi-list-padding,12px) 16px} /* Der Zusatz (z. B. Artikel · Lieferant) bricht vollständig um, statt abgeschnitten zu werden. */ /* Zusatz (z. B. Artikelbezeichnung) steht in einer eigenen Zeile unter dem Kundennamen. */ .fi-record-row--thread .fi-list-identity{flex-direction:column;align-items:stretch;gap:2px} .fi-record-row--thread .fi-list-identity>strong{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-record-row--thread .fi-list-identity>.mail-thread-subject{min-width:0;white-space:normal;overflow-wrap:anywhere} /* Ein Badge in der Namenszeile (z. B. Vorgangsbadge) steht oben rechtsbündig neben dem Namen. */ .fi-record-row--thread .mail-thread-top{align-items:flex-start} .fi-record-row--thread .mail-thread-top>.fi-list-identity{flex:1} .fi-record-row--thread .mail-thread-top>.fi-badge{flex:none} .fi-record-row--thread .mail-thread-subject>strong{font-size:inherit;font-weight:var(--fi-text-strong-font-weight,700);white-space:normal;overflow:visible} .fi-record-row--thread .mail-thread-meta{margin-top:var(--fi-mini-button-gap,4px)} button.fi-record-row--thread{width:100%;font:inherit;text-align:left;cursor:pointer} .fi-record-row--thread.is-overdue,.fi-record-row--thread.is-active.is-overdue{box-shadow:inset 3px 0 0 #d70015} .fi-master-record-layout>.fi-service-list-panel .fi-record-row{height:auto;max-height:none} .fi-service-toolbar>.search-wrap{width:100%;min-width:0} .fi-record-row{ height:max-content; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:center; gap:10px; min-height:56px; padding:12px 16px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; color:inherit; text-decoration:none; transition:background .15s,box-shadow .15s; } .fi-record-row:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .fi-record-row.is-active{ background:var(--fi-list-active-background,#eef2f5); box-shadow:none; } /* A newly created record's row is briefly highlighted after saving. */ .fi-record-row.is-highlighted{animation:fi-record-highlight 1.6s ease-out} @keyframes fi-record-highlight{from{background:var(--fi-pair-gruen-surface)}} .mail-thread.is-active, .mail-thread.is-active:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)), .mail-thread.is-live, .mail-thread.is-live:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ border-left-color:var(--fi-list-active-border-color,#2f3a45); background:var(--fi-list-active-background,#eef2f5); box-shadow:none; } .fi-record-main{min-width:0} /* Optional leading group icon has its own stable column beside both text lines. */ .fi-record-main:has(>.ti){display:grid;grid-template-columns:var(--fi-icon-size,18px) minmax(0,1fr);column-gap:var(--fi-inline-gap,8px);row-gap:3px;align-content:center} .fi-record-main>.ti{grid-column:1;grid-row:1/3;align-self:start;justify-self:center;width:var(--fi-icon-size,18px);font-size:var(--fi-icon-size,18px);line-height:var(--fi-text-p-line-height,1.5);color:var(--sub);text-align:center} .fi-record-main:has(>.ti)>:is(strong,span){grid-column:2;min-width:0;margin:0} /* Reserve alarm space on every row so the name and its metadata share one edge. */ .fi-record-main:has(>.ti)>:is(strong,span){position:relative;padding-inline-start:calc(var(--fi-contact-alarm-icon-size,16px) + var(--fi-contact-alarm-gap,5px))} .fi-record-main:has(>.ti)>strong>.fi-contact-alarm{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:var(--fi-contact-alarm-icon-size,16px);margin-inline-end:0;text-align:center;line-height:1} .fi-record-main>strong, .fi-record-main>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-record-main>strong{color:var(--fi-text-p-color,#2f3a45);font-size:13px;font-weight:600} .fi-record-main>span{margin-top:3px;color:var(--sub);font-size:12px} .fi-record-meta{ display:grid; justify-items:end; gap:4px; min-width:0; } .fi-record-meta small{ display:flex; align-items:center; gap:4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); white-space:normal; overflow-wrap:anywhere; } .fi-detail-shell{ display:flex; flex-direction:column; min-height:0; overflow:hidden; background:#fff; } .fi-detail-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--fi-block-gap,20px); flex:none; padding:var(--fi-content-padding,20px); border-bottom:1px solid var(--line); background:#fff; } .fi-detail-header>div:first-child{min-width:0} .fi-detail-header h2{ margin:0; color:var(--fi-text-h2-color,#2f3a45); font:var(--fi-text-h2-font-weight,700) var(--fi-text-h2-font-size,18px)/var(--fi-text-h2-line-height,1.2) var(--fi-text-h2-font-family,system-ui,sans-serif),sans-serif; letter-spacing:var(--fi-text-h2-letter-spacing,0px); overflow-wrap:anywhere; } .fi-detail-header .muted{margin:5px 0 0} .fi-detail-header-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; flex:none; } .fi-detail-body{ display:grid; gap:var(--fi-block-gap,20px); min-height:0; padding:var(--fi-content-padding,20px); overflow:auto; } .fi-box,.fi-detail-section{ display:grid; gap:var(--fi-detail-section-gap,var(--fi-section-gap,8px)); padding:var(--fi-detail-section-padding,var(--fi-section-padding,12px)); border:0; border-radius:0; background:transparent; } .fi-box+.fi-box{border-top:var(--fi-box-border-width,1px) solid var(--line)} /* Grey info box on a white workspace, e.g. setup instructions. */ .fi-box.fi-box--muted{background:var(--fi-hover-background,#f3f6f8);border-radius:var(--fi-box-radius,12px)} .fi-detail-section+.fi-detail-section{border-top:var(--fi-detail-divider-width,1px) solid var(--line)} .fi-detail-section-head{ display:flex; align-items:center; gap:var(--fi-inline-gap,8px); } .fi-detail-section-head>.ti{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:9px; background:#f3f6f8; color:var(--sub); font-size:var(--fi-detail-heading-icon-size,18px); } .fi-detail-section-head h3{ display:inline-flex; align-items:center; gap:var(--fi-mini-button-column-gap,8px); margin:1px 0 0; color:var(--fi-text-h3-color,#2f3a45); font-size:var(--fi-text-h3-font-size,16px); font-weight:var(--fi-text-h3-font-weight,700); } .fi-detail-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px; } .fi-detail-value{ min-width:0; padding:9px 10px; border:1px solid #f3f6f8; border-radius:9px; background:#fff; } .fi-detail-value>small{ display:block; margin:0 0 3px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); text-transform:uppercase; letter-spacing:var(--fi-text-small-letter-spacing,0px); } .fi-detail-value>strong{ display:block; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); line-height:var(--fi-text-strong-line-height,1.5); overflow-wrap:anywhere; } .fi-detail-value--wide{grid-column:1/-1} .fi-detail-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; flex:none; padding:var(--fi-section-padding,12px) var(--fi-content-padding,20px); border-top:1px solid var(--line); background:#f3f6f8; } .fi-detail-footer-actions{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-left:auto; } .fi-detail-shell .puzzle-timeline,.fi-detail-shell .dms-version-list{ margin:0; } @media(max-width:760px){ .fi-record-row{grid-template-columns:minmax(0,1fr)} .fi-record-meta{justify-items:start} .fi-detail-grid{grid-template-columns:1fr} .fi-detail-header{align-items:flex-start;flex-direction:column} .fi-detail-header-actions{width:100%;justify-content:flex-start} } /* FULLAND DETAIL DIALOG · verbindlicher Editor-/Detailmodal-Aufbau */ .fi-detail-dialog{ overflow:hidden; } .fi-detail-dialog[open]{ display:flex; flex-direction:column; } .fi-detail-dialog>.fi-detail-route{ flex:none; } .fi-detail-dialog>form{ flex:1; min-height:0; overflow:hidden; } .fi-detail-dialog>.fi-dialog-header, .fi-detail-dialog>form>.fi-dialog-header{ flex:none; } .fi-detail-dialog .fi-dialog-body{ min-height:0; overflow:auto; } .fi-detail-dialog .fi-dialog-footer{ flex:none; } /* UI-System · Hauptnavigation verwalten */ .fi-ui-navigation-list{ display:grid; gap:8px; } .fi-ui-navigation-row{ display:grid; grid-template-columns:36px 40px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:62px; padding:9px 11px; border:1px solid #e1e7ec; border-radius:11px; background:#fff; transition:opacity .15s,background .15s,border-color .15s,box-shadow .15s; } .fi-ui-navigation-row.is-dragging{ opacity:.55; border-color:#aeaeb2; box-shadow:var(--fi-shadow-float); } .fi-ui-navigation-row.is-disabled{ background:#f3f6f8; opacity:.62; } .fi-ui-navigation-drag{ display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--sub); cursor:grab; } .fi-ui-navigation-drag:active{cursor:grabbing} .fi-ui-navigation-drag:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8);color:var(--sub)} .fi-ui-navigation-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:#f3f6f8; color:var(--fi-content-accent-color,#2f3a45); font-size:var(--fi-icon-size,18px); } .fi-ui-navigation-main{ display:grid; gap:3px; min-width:0; } .fi-ui-navigation-main strong{ color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); font-weight:var(--fi-text-strong-font-weight,700); } .fi-ui-navigation-main small{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); text-overflow:ellipsis; white-space:nowrap; } .fi-ui-navigation-toggle{ display:flex; align-items:center; gap:7px; min-width:92px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); cursor:pointer; } .fi-ui-navigation-toggle input{margin:0} .fi-ui-navigation-row.is-disabled .fi-ui-navigation-toggle span{color:var(--sub)} @media(max-width:620px){ .fi-ui-navigation-row{ grid-template-columns:32px 36px minmax(0,1fr); } .fi-ui-navigation-toggle{ grid-column:2/4; } } /* Aktionszentrale · zentrale Tabs / Record-UI */ .fi-action-center-list.fi-record-list{ overflow:visible; } .fi-action-item.fi-record-row{ grid-template-columns:minmax(0,1fr) auto; gap:8px; min-height:66px; padding:0 10px 0 0; } .fi-action-item.fi-record-row:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){ background:var(--fi-hover-background,#f3f6f8); } .fi-action-owner>.ti{ flex:none; color:var(--sub); } /* Mail + DocuHub · gemeinsame Detaildarstellung */ .mail-delegated-tabs{ flex:none; max-width:100%; overflow:auto; } .mail-delegated-tabs .tab{ flex:none; } .dms-detail-head-main{ display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; gap:11px; min-width:0; } .dms-detail-head-main>div{ min-width:0; } .dms-detail-head-main small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dms-version-list.fi-detail-section{ padding:var(--fi-section-padding,12px); } @media(max-width:760px){ .dms-detail-head-main{ grid-template-columns:40px minmax(0,1fr); } } /* Mail-Verwaltung · zentrale Detailgeometrie */ .mail-admin-editor.fi-detail-shell{ overflow:hidden; } .mail-admin-editor.fi-detail-shell .mail-admin-editor-form{ display:flex; flex-direction:column; min-height:0; } .mail-admin-editor .mail-admin-section.fi-detail-section{ padding:var(--fi-section-padding,12px); } .mail-admin-editor .mail-admin-savebar.fi-detail-footer{ flex:none; } .mail-admin-diagnostics.fi-detail-section{ margin:var(--fi-block-gap,20px) var(--fi-content-padding,20px); padding:var(--fi-section-padding,12px); } .mail-admin-diagnostic-grid.fi-detail-grid{ margin-bottom:12px; } @media(max-width:760px){ .mail-admin-editor .mail-admin-fields{--fi-form-columns:3} .mail-admin-editor .mail-admin-fields .full{ grid-column:auto; } } /* Finale Konsistenz · dynamische Komponentenwerte */ .fi-fatal-page{ display:grid; place-items:start center; min-height:100dvh; margin:0; padding:30px; background:#f3f6f8; font-family:inherit; } .fi-fatal-card{ width:min(720px,100%); padding:var(--fi-content-padding,20px); border:1px solid var(--line); border-radius:var(--fi-dialog-radius,20px); background:#fff; box-shadow:var(--fi-shadow-soft); } .mail-sidebar .mail-account .mail-account-icon{color:var(--fi-content-inverse-color,#ffffff);border-color:var(--mail-accent,#2f3a45);background:var(--mail-accent,#2f3a45)} .mail-account-icon{ color:var(--mail-accent,#2f3a45); border-color:var(--mail-accent,#2f3a45); } .mail-admin-master-icon{ color:var(--mail-accent,#2f3a45); } .mail-thread-state{ color:var(--mail-thread-accent,#7d8a96); } .mail-rule-warning-text{ color:var(--fi-status-warning-color,#a05a00); } .mail-rule-tag-vars{ justify-content:flex-start; margin-top:8px; gap:6px; flex-wrap:wrap; } .mail-rule-folder-actions{ justify-content:flex-start; } .supplier-doc-actions{ margin-bottom:12px; } .fi-order-progress-bar>span{ width:var(--fi-order-progress,0%); } .mail-rule-folder-create{ padding:14px; border:1px solid var(--border-color,#d7dee4); border-radius:12px; } /* E-Mail · Thread als zusammenhängender Gesprächsverlauf */ @media(max-width:760px){ .mail-message-sequence{ width:100%; } .mail-message-sender-name{ align-items:flex-start; } .mail-message-thread-main{ grid-template-columns:28px minmax(0,1fr); } } /* E-Mail · Bearbeitung als zusammenhängende Arbeitsakte */ /* E-Mail · gruppierte Detail-Toolbar */ /* E-Mail · Threadliste und Detailkopf visuell verzahnen */ .mail-thread{ border-left:0; } .mail-thread.is-selected:not(.is-active):not(.is-live){ border-left-color:#aeaeb2; background:#eef2f5; } .mail-thread.is-selected .mail-thread-top strong, .mail-thread.is-selected .mail-thread-subject{ color:var(--fi-text-p-color,#2f3a45); } .mail-thread-top strong{ font-weight:var(--fi-text-strong-font-weight,700); } .mail-thread-subject{ color:var(--sub); font-weight:var(--fi-text-strong-font-weight,700); } .mail-thread-preview{ color:var(--sub); } .mail-thread-meta{ margin-top:2px; } .mail-detail-subject{ padding:var(--fi-dialog-header-padding-y,20px) var(--fi-dialog-header-padding-x,27px); } @media(max-width:760px){ .mail-thread:not(.call-master-row) .mail-thread-meta .fi-badge{ display:none; } } .fi-service-detail .fi-detail-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--fi-block-gap,20px); } .fi-service-detail .fi-detail-header>div:first-child{min-width:0} .fi-service-detail .fi-detail-header h2{margin:3px 0 0;overflow-wrap:anywhere} .fi-service-detail .fi-detail-header-actions{flex:none;align-items:center} .fi-service-workflow{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .fi-service-workflow>div:first-child{display:grid;gap:2px;min-width:0} .fi-service-workflow>div:first-child strong{color:var(--sub);font-size:var(--fi-text-strong-font-size,14px)} .fi-service-workflow>.fi-row{justify-content:flex-end} .fi-service-workflow form{margin:0} @media(max-width:760px){ .fi-service-detail .fi-detail-header{align-items:flex-start;flex-direction:column} .fi-service-detail .fi-detail-header-actions, .fi-service-workflow>.fi-row{width:100%;justify-content:flex-start} } /* Service · Aktenbereiche konsistent staffeln */ .fi-service-detail>.puzzle-timeline,.fi-service-detail>.fi-service-history{ margin:0; border-top:1px solid var(--line); } .fi-service-detail>.puzzle-timeline .fi-service-history-head,.fi-service-detail>.fi-service-history .fi-service-history-head{ padding:12px 16px 8px; } .fi-service-detail>.fi-service-history .fi-service-history-head>div{ display:grid; gap:2px; min-width:0; } .fi-service-detail>.fi-service-history .fi-service-history-head .muted{ font-size:var(--fi-text-small-font-size,11px); } .fi-service-detail>.puzzle-timeline .puzzle-timeline-filters{ margin:0 16px 8px; } /* Service · kompakter Arbeitsakten-Kontext */ .fi-service-context-strip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px 16px; border-bottom:1px solid #e1e7ec; background:#f3f6f8; } .fi-service-context-item{ display:grid; gap:3px; min-width:0; padding:9px 10px; border:1px solid #e1e7ec; border-radius:10px; background:#fff; } .fi-service-context-item span{ color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } .fi-service-context-item strong{ overflow:hidden; color:var(--sub); font-size:var(--fi-text-strong-font-size,14px); text-overflow:ellipsis; white-space:nowrap; } .fi-service-context-item.is-overdue{ border-color:#ffd4d1; background:#fff1f0; } .fi-service-context-item.is-overdue span, .fi-service-context-item.is-overdue strong{ color:var(--fi-status-error-color,#d70015); } @media(max-width:980px){ .fi-service-context-strip{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:620px){ .fi-service-context-strip{ grid-template-columns:1fr; padding:10px 12px; } } /* Gemeinsame Tabellengeometrie: ausschließlich über das UI-System. */ .fi-table-wrap{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain} .fi-table{width:100%;min-width:1000px;border-collapse:separate;border-spacing:0;table-layout:auto;font-family:var(--fi-text-p-font-family,system-ui,sans-serif)} .fi-table thead th{position:sticky;top:0;z-index:3;padding:var(--fi-table-header-padding-y,11px) var(--fi-table-header-padding-x,12px);background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--fi-text-h4-font-family,system-ui,sans-serif);font-size:var(--fi-table-header-font-size,12px);font-weight:var(--fi-table-header-font-weight,600);text-transform:none;letter-spacing:0;text-align:left;vertical-align:middle} .fi-table td,.fi-table tbody th[scope="row"]{padding:var(--fi-table-padding-y,11px) var(--fi-table-padding-x,12px);border-bottom:1px solid var(--line);background:#fff;color:var(--ink);font-size:var(--fi-table-font-size,12px);font-weight:500;line-height:1.3;overflow-wrap:anywhere;text-align:left;vertical-align:middle} .fi-table tbody th[scope="row"]{position:static;font-weight:var(--fi-table-header-font-weight,700);text-transform:none;letter-spacing:normal} .fi-table tbody tr:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive))>td,.fi-table tbody tr:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive))>th[scope="row"]{background:var(--fi-hover-background,#f3f6f8)} .fi-table th:first-child,.fi-table th:last-child{padding-inline:var(--fi-table-header-padding-x,12px)} .fi-table td:first-child,.fi-table td:last-child,.fi-table tbody th[scope="row"]{padding-inline:var(--fi-table-padding-x,12px)} .fi-ui-table-sample{min-width:0} /* Textareas and multi-selects must retain their content-dependent height. */ textarea.fi-control,select.fi-control[multiple]{height:auto;min-height:var(--fi-control-height,43px)} .fi-control{display:block;width:100%;min-width:0; font-size:var(--fi-control-font-size,14px)} input.fi-control,select.fi-control:not([multiple]){height:var(--fi-control-height,43px);min-height:var(--fi-control-height,43px)} .fi-btn--icon,.mail-toolbar-icon{padding:0} /* Entfernen innerhalb eines Tags ist ein gemeinsamer kompakter Unterbaustein. */ .btn>.ti,.mail-toolbar-icon>.ti{font-size:var(--fi-button-icon-size,16px)} .fi-call-detail-body{ gap:var(--fi-block-gap,20px); padding:var(--fi-content-padding,20px); } .fi-call-detail-body>.fi-detail-section{ min-width:0; gap:var(--fi-detail-section-gap,var(--fi-section-gap,8px)); padding:var(--fi-detail-section-padding,var(--fi-section-padding,12px)); } .fi-call-detail-body .comment{ margin:4px 0; padding:8px 10px; } .fi-comment-thread{display:grid;gap:var(--fi-list-content-gap,10px);min-width:0} .fi-comment-message{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,25%);gap:var(--fi-list-content-gap,10px);width:100%;min-width:0;align-items:center;--fi-text-small-text-align:left} .fi-comment-message--right{grid-template-columns:minmax(100px,25%) minmax(0,1fr);--fi-text-small-text-align:right} .fi-comment-message-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-start;grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere} .fi-comment-message-meta>strong{--fi-text-small-font-weight:600} .fi-comment-message--right .fi-comment-message-meta{grid-column:1;align-items:flex-end} .fi-comment-message .comment{grid-column:1;grid-row:1;min-width:0;margin:0;border-radius:4px 12px 12px 12px} .fi-comment-message--right .comment{grid-column:2;border-radius:12px 4px 12px 12px} .fi-comment-message .comment p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere} .fi-call-detail-body .field{ margin-bottom:0; } .fi-call-detail-body>.fi-detail-section>*{ min-width:0; } .fi-call-detail-body .dialerror:empty{ display:none; } .fi-detail-section--compact{--fi-detail-section-gap:var(--fi-mini-button-gap,4px)} .fi-detail-stack{display:grid;gap:var(--fi-detail-group-gap,20px);min-width:0} .fi-detail-stack:empty{display:none} .fi-detail-group{display:grid;gap:var(--fi-detail-group-content-gap,8px);min-width:0} /* Reusable detail route: the shared list geometry and colors also drive its preview. */ .fi-detail-route{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--fi-list-content-gap,10px)} .fi-detail-route-step[hidden]{display:none} .fi-detail-route-step{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); align-content:start; justify-items:center; text-align:center; gap:var(--fi-list-content-gap,10px); padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); border-top:var(--fi-list-accent-width,3px) solid transparent; border-radius:var(--fi-button-radius,10px); } .fi-detail-route-step.has-next::after{ content:""; position:absolute; left:calc(50% + var(--fi-list-leading-width,34px) / 2); right:calc(-50% - var(--fi-list-content-gap,10px) + var(--fi-list-leading-width,34px) / 2); top:calc(var(--fi-toolbar-padding-y,8px) + var(--fi-list-leading-width,34px) / 2); border-top:var(--fi-list-route-line-width,2px) var(--fi-route-line-style,solid) var(--fi-route-line-color,var(--fi-list-active-border-color,#2f3a45)); } .fi-detail-route-icon{ position:relative; z-index:1; justify-content:center; width:var(--fi-list-leading-width,34px); min-height:var(--fi-list-leading-width,34px); padding:0; border-radius:var(--fi-button-radius,10px); } .fi-detail-route-icon>span{display:none} .fi-detail-route-content{display:grid;justify-items:center;width:100%;gap:var(--fi-mini-button-gap,4px);min-width:0;align-self:center;--fi-text-small-text-align:center;--fi-text-strong-text-align:center} .fi-detail-route-content>.fi-text-small{display:block;margin:0} .fi-detail-route-content>.fi-text-strong{display:block;max-width:100%;min-width:0;overflow-wrap:anywhere} .fi-step-route{ --fi-list-leading-width:max(var(--fi-step-number-size,20px),var(--fi-step-number-active-size,20px)); margin:0; padding:var(--fi-form-steps-padding,6px) var(--fi-detail-section-padding,14px); border-bottom:1px solid var(--line,#d7dee4); } .fi-step-route .fi-detail-route-step{ grid-template-rows:var(--fi-list-leading-width) auto; border-top:0; gap:var(--fi-mini-button-gap,4px); padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px); } .fi-step-route .fi-step-number{align-self:center} @media(max-width:760px){ .fi-detail-route{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr} .fi-detail-route-step{grid-template-columns:minmax(0,1fr);justify-items:center} .fi-detail-route-step.has-next::after{left:50%;right:auto;top:100%;bottom:calc(-1 * (var(--fi-list-content-gap,10px) + var(--fi-toolbar-padding-y,8px)));border-top:0;border-left:var(--fi-list-route-line-width,2px) var(--fi-route-line-style,solid) var(--fi-route-line-color,var(--fi-list-active-border-color,#2f3a45))} } /* Numbered routes with many steps wrap to the available container width. */ .fi-detail-route.fi-detail-route--wrap{ --fi-route-connection-width:max(1px,calc(var(--fi-list-route-line-width,2px) - 1px)); grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); } .fi-detail-route--wrap .fi-detail-route-step.has-next::after{content:none} .fi-detail-route--wrap .fi-detail-route-step[data-route-connection="horizontal"]::after{ content:"";left:var(--fi-route-connection-left);right:auto;top:var(--fi-route-connection-top);bottom:auto; width:var(--fi-route-connection-length);border-left:0; border-top:var(--fi-route-connection-width,1px) var(--fi-route-line-style,solid) var(--fi-route-line-color,var(--line,#d7dee4)); } .fi-detail-route--wrap .fi-detail-route-step[data-route-connection="vertical"]::after{ content:"";left:var(--fi-route-connection-left,50%);right:auto;top:var(--fi-route-connection-top,100%);bottom:auto;height:var(--fi-route-connection-length,var(--fi-list-content-gap,10px));width:0;border-top:0; border-left:var(--fi-route-connection-width,1px) var(--fi-route-line-style,solid) var(--fi-route-line-color,var(--line,#d7dee4)); } .fi-detail-route--wrap .fi-step-number{position:relative;z-index:1} .fi-detail-route--wrap .fi-detail-route-content>.fi-badge{white-space:normal} .fi-detail-route--wrap .fi-detail-route-content>.fi-badge>i{flex-shrink:0} .fi-detail-route--wrap .fi-detail-route-content>.fi-badge>span, .fi-detail-route--wrap .fi-detail-route-content>.fi-text-small{ overflow-wrap:normal; word-break:normal; hyphens:none; } /* Dropdowns share the button geometry; list selects retain form sizing. */ select.fi-control:not([multiple]):not([size]), select.fi-control:not([multiple])[size="1"], select:not([multiple]):not([size]):not(.fi-control), select:not([multiple])[size="1"]:not(.fi-control){ box-sizing:border-box; height:calc(max(var(--fi-button-font-size,12px) * 1.3,var(--fi-button-icon-size,16px)) + var(--fi-button-padding-y,9px) * 2 + var(--fi-button-border-width,1px) * 2); min-height:calc(max(var(--fi-button-font-size,12px) * 1.3,var(--fi-button-icon-size,16px)) + var(--fi-button-padding-y,9px) * 2 + var(--fi-button-border-width,1px) * 2); padding:var(--fi-button-padding-y,9px) calc(var(--fi-button-padding-x,12px) + 20px) var(--fi-button-padding-y,9px) var(--fi-button-padding-x,12px); border:var(--fi-button-border-width,1px) solid var(--line); border-radius:var(--fi-button-radius,10px); font-family:inherit; font-size:var(--fi-button-font-size,12px); font-weight:var(--fi-button-font-weight,700); line-height:1.3; background-color:#fff; color:#4a5560; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%2362738a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right var(--fi-button-padding-x,12px) center; background-size:12px 8px; cursor:pointer; transition:background-color .15s,border-color .15s,box-shadow .15s; } select:not([multiple]):not([size]):hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled), select:not([multiple])[size="1"]:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){ background-color:var(--fi-hover-background,#f3f6f8); border-color:var(--fi-hover-border-color,#d7dee4); } select:disabled{ cursor:not-allowed; opacity:var(--fi-disabled-opacity,.55); } select:not([multiple]):not([size]):focus, select:not([multiple])[size="1"]:focus{ border-color:var(--fi-control-focus-border-color,#2f3a45); } /* Comment content keeps deliberate line breaks; typography uses fi-text-p. */ .comment>.fi-text-p{white-space:pre-wrap;overflow-wrap:anywhere} /* Linked record headings share the main navigation's typography and icons. */ .fi-detail-section-head h4{ --fi-text-h4-font-family:var(--fi-navigation-font-family,system-ui,sans-serif); --fi-text-h4-font-size:var(--fi-navigation-font-size,12px); --fi-text-h4-font-weight:var(--fi-navigation-font-weight,750); --fi-text-h4-margin-top:0px; --fi-text-h4-margin-bottom:0px; display:inline-flex; align-items:center; gap:var(--fi-inline-gap,8px); min-width:0; } .fi-detail-section-head h4>.ti{font-size:var(--fi-detail-heading-icon-size,18px);flex:none} .fi-detail-section-head h5{ --fi-text-h5-font-family:var(--fi-navigation-font-family,system-ui,sans-serif); --fi-text-h5-font-size:var(--fi-navigation-font-size,12px); --fi-text-h5-font-weight:var(--fi-navigation-font-weight,750); --fi-text-h5-margin-top:0px; --fi-text-h5-margin-bottom:0px; display:inline-flex; align-items:center; gap:var(--fi-inline-gap,8px); min-width:0; } .fi-detail-section-head h5>.ti{font-size:var(--fi-detail-heading-icon-size,18px);flex:none} .fi-detail-section-head>.fi-badge{margin-left:auto;flex:none} .fi-detail-section-head>.fi-badge~.fi-detail-footer-actions{margin-left:0} /* The pinned call date has its own space outside the scrolling rows. */ .fi-call-master-layout>.fi-service-list-panel>.fi-call-list-viewport{display:flex;flex-direction:column;overflow:hidden} .fi-call-list-viewport>.call-master-day{position:static;flex:none} .fi-call-list-viewport>.fi-call-master-list{display:block;flex:1 1 0%;height:auto;max-height:none;min-height:0;overflow:auto} .fi-call-list-viewport .fi-call-master-list>.call-master-day{position:static} .fi-call-list-viewport[data-day-pinned] .call-master-day[data-first-visible-day]{display:none} .fi-call-master-layout>.fi-service-list-panel .call-master-row{min-height:66px;height:auto;max-height:none} @media(max-width:760px){.fi-detail-section-head h3>.ti,.fi-detail-section-head h4>.ti{font-size:var(--fi-detail-heading-icon-size,18px)}} /* Mini actions use the normal action registry and independent geometry. */ .fi-btn--mini{ --fi-icon-button-size:var(--fi-mini-button-size,24px); --fi-button-icon-size:var(--fi-mini-button-icon-size,14px); --fi-button-radius:var(--fi-mini-button-radius,6px); --fi-button-border-width:var(--fi-mini-button-border-width,0px); padding:var(--fi-mini-button-padding,2px); border-color:var(--line)!important; } .fi-btn--mini>.ti{font-size:var(--fi-mini-button-icon-size,14px)} /* Gemeinsamer Speicherstatus im festen Dialogfooter. */ .fi-dialog-footer-status{flex:1;min-width:min(100%,220px);margin-right:auto;overflow-wrap:anywhere} .fi-dialog-footer>.fi-row{flex-wrap:wrap;justify-content:flex-end} .live-editor #liveIdentity:empty{display:none} /* Shared step numbers and content-sized tab groups. */ .tabs.fi-tabs--fit{width:fit-content;max-width:100%;justify-content:flex-start;flex-wrap:wrap} .fi-step-number{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:var(--fi-step-number-size,20px);height:var(--fi-step-number-size,20px);min-width:var(--fi-step-number-size,20px);min-height:var(--fi-step-number-size,20px); padding:0;gap:0;border:var(--fi-step-number-border-width,0px) solid var(--fi-step-number-border-color,#4a5560);border-radius:var(--fi-step-number-radius,999px); background:var(--fi-step-number-background,#4a5560);color:var(--fi-step-number-color,#fff); font-size:var(--fi-step-number-font-size,10px);font-weight:var(--fi-step-number-font-weight,700);line-height:1;text-align:center;white-space:nowrap; } .fi-step-number>span{line-height:1;text-align:center} [data-step-state="complete"]>.fi-step-number{ background:var(--fi-step-number-background,#4a5560); color:var(--fi-step-number-color,#fff); } [data-step-state="active"]>.fi-step-number{ width:var(--fi-step-number-active-size,var(--fi-step-number-size,20px)); height:var(--fi-step-number-active-size,var(--fi-step-number-size,20px)); min-width:var(--fi-step-number-active-size,var(--fi-step-number-size,20px)); min-height:var(--fi-step-number-active-size,var(--fi-step-number-size,20px)); background:var(--fi-step-number-active-background,var(--fi-step-number-background,#4a5560)); color:var(--fi-step-number-active-color,var(--fi-step-number-color,#fff)); box-shadow:0 0 0 var(--fi-step-number-active-ring-width,0px) var(--fi-step-number-active-ring-color,var(--fi-step-number-border-color,#4a5560)); } [data-step-state="pending"]>.fi-step-number{ background:var(--fi-step-number-pending-background,#9aa7b3); color:var(--fi-step-number-pending-color,#fff); } .fi-detail-route-step[data-route-line-state="complete"]{ --fi-route-line-color:var(--fi-step-line-complete-color,var(--fi-list-active-border-color,#2f3a45)); --fi-route-line-style:solid; } .fi-detail-route-step[data-route-line-state="pending"]{ --fi-route-line-color:var(--fi-step-line-pending-color,var(--line,#d7dee4)); --fi-route-line-style:dashed; } /* Bestellkopf: Zweck und Zuständigkeit verwenden nur gemeinsame Layout-Tokens. */ .fi-order-purpose-row{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:var(--fi-list-content-gap,10px)} .fi-order-purpose-row>.field{min-width:min(100%,240px)} /* Free-standing login steps with progressive vertical connections. */ .fi-login-form{display:grid;gap:24px;margin-top:24px} .fi-login-step{position:relative;display:grid;grid-template-columns:var(--fi-step-number-size,20px) minmax(0,1fr);column-gap:16px;align-items:start} .fi-login-step:not(:last-of-type)::before{content:"";position:absolute;left:calc(var(--fi-step-number-size,20px) / 2 - 1px);top:calc(var(--fi-step-number-size,20px) / 2);height:calc(100% + 24px);border-left:var(--fi-list-route-line-width,2px) dashed var(--fi-step-line-pending-color,var(--line,#d7dee4));pointer-events:none} .fi-login-step.is-connected::before{border-left-style:solid;border-left-color:var(--fi-step-line-complete-color,var(--fi-list-active-border-color,#2f3a45))} .fi-login-step>.fi-step-number{position:relative;z-index:1} .fi-login-step-content{display:grid;gap:10px;min-width:0} .fi-login-step-content>h3{margin:0;min-height:var(--fi-step-number-size,20px);display:flex;align-items:center} .fi-login-step-content>.field{margin:0} .fi-login-form>.fi-check{margin:0} /* Every inline message receives its status icon, including dynamic messages. */ .fi-alert::before{content:"\eac5";font-family:"tabler-icons";font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:var(--fi-status-icon-size,16px);line-height:1.2;flex:0 0 20px;text-align:center;color:var(--fi-alert-color);speak:none;-webkit-font-smoothing:antialiased} .fi-alert--danger::before{content:"\ea06"} .fi-alert--success::before{content:"\ea67"} .fi-alert--warning::before{content:"\ea05"} .fi-alert>.ti{display:none} /* Kompakte zentrale Warnmeldung: Inhalt bestimmt Breite und Höhe. */ .fi-alert.fi-alert--fit{ width:fit-content; max-width:100%; align-items:center; justify-self:start; margin-top:var(--fi-status-gap,9px); margin-bottom:0; } .fi-alert--fit>span{ min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; } /* Quiet supplementary hints without a message box. */ .fi-hint{--fi-text-small-color:var(--sub,#9aa7b3);--fi-text-small-font-style:italic;display:block;position:relative;padding-inline-start:calc(var(--fi-icon-size,18px) + var(--fi-inline-gap,8px));color:var(--sub,#9aa7b3);font-size:var(--fi-text-small-font-size,11px);font-style:italic;font-weight:var(--fi-text-small-font-weight,400);line-height:var(--fi-text-small-line-height,1.5)} .fi-hint::before{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);content:"\eac5";font-family:"tabler-icons";font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:var(--fi-icon-size,18px);line-height:1.2;flex:none;speak:none;-webkit-font-smoothing:antialiased} .fi-hint>.ti{display:none} /* Status copy and icons follow the dark coloured button tones. */ .fi-alert{--fi-alert-color:#2f3a45;color:var(--fi-alert-color)!important} .fi-alert--success{--fi-alert-color:var(--fi-pair-gruen-text)} .fi-alert--warning{--fi-alert-color:#a05a00} .fi-alert--danger{--fi-alert-color:#d70015} .fi-alert :is(p,span,strong,small,i):not(:is(button,a.btn,.btn,.fi-badge) *){color:var(--fi-alert-color)!important} .fi-hint:empty{display:none} /* Statushinweise · gemeinsamer Baustein für PHP-Flash und Live-Aktionen. */ .fi-toast{width:min(var(--fi-status-width,390px),calc(100vw - 28px));gap:var(--fi-status-gap,9px);padding:var(--fi-status-padding-y,11px) var(--fi-status-padding-x,12px);border-width:var(--fi-status-border-width,1px);border-radius:var(--fi-status-radius,13px);--fi-status-bg:var(--fi-pair-gruen-surface);--fi-status-border:var(--fi-pair-gruen-surface);--fi-status-fg:var(--fi-pair-gruen-text);--fi-status-icon-bg:var(--fi-pair-gruen-surface);background:var(--fi-status-bg);border-color:var(--fi-status-border);color:var(--fi-status-fg)} .fi-toast.is-error{--fi-status-bg:var(--fi-status-error-background,#fff1f0);--fi-status-border:var(--fi-status-error-border-color,#ffd4d1);--fi-status-fg:var(--fi-status-error-color,#d70015);--fi-status-icon-bg:var(--fi-status-error-icon-background,#fff1f0)} .fi-toast.is-error,.fi-toast.is-warning,.fi-toast.is-info{background:var(--fi-status-bg);border-color:var(--fi-status-border)} .fi-toast.is-warning{--fi-status-bg:var(--fi-status-warning-background,#fff9e0);--fi-status-border:var(--fi-status-warning-border-color,#ffcc00);--fi-status-fg:var(--fi-status-warning-color,#a05a00);--fi-status-icon-bg:var(--fi-status-warning-icon-background,#ffeba3)} /* Blaue Infomeldung (z. B. Sendeverzögerung) mit optionalen Aktionen in eigener Zeile unter dem Text. */ .fi-toast.is-info{--fi-status-bg:var(--fi-status-info-background,#eaf3ff);--fi-status-border:var(--fi-status-info-border-color,#b3d4ff);--fi-status-fg:var(--fi-status-info-color,#0058b0);--fi-status-icon-bg:var(--fi-status-info-icon-background,#d6e8ff);background:var(--fi-status-bg);border-color:var(--fi-status-border)} .fi-toast-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fi-inline-gap,8px)} .fi-toast .fi-toast-message{font-size:var(--fi-status-font-size,10px);font-weight:var(--fi-status-font-weight,750);color:var(--fi-status-fg)!important} .fi-toast .fi-toast-icon,.fi-toast.is-error .fi-toast-icon{font-size:var(--fi-status-icon-size,16px);color:var(--fi-status-fg);background:var(--fi-status-icon-bg)} .fi-toast[popover]{margin:0;left:auto;top:auto} .fi-toast[popover]::backdrop{background:transparent;pointer-events:none} .fi-ui-status-samples{display:grid;gap:18px;width:100%} .fi-ui-status-samples>div{display:grid;gap:8px;justify-items:start} .fi-ui-status-samples .fi-toast{position:static;width:100%;max-width:var(--fi-status-width,390px);box-shadow:none} .fi-alert{font-size:var(--fi-status-font-size,10px);font-weight:var(--fi-status-font-weight,750);border-radius:var(--fi-status-radius,13px);border-width:var(--fi-status-border-width,1px);gap:var(--fi-status-gap,9px);padding:var(--fi-status-padding-y,11px) var(--fi-status-padding-x,12px)} .fi-alert--success{--fi-alert-color:var(--fi-pair-gruen-text);background:var(--fi-pair-gruen-surface);border-color:var(--fi-pair-gruen-surface)} .fi-alert--danger{--fi-alert-color:var(--fi-status-error-color,#d70015);background:var(--fi-status-error-background,#fff1f0);border-color:var(--fi-status-error-border-color,#ffd4d1)} .fi-alert--warning{--fi-alert-color:var(--fi-status-warning-color,#a05a00);background:var(--fi-status-warning-background,#fff9e0);border-color:var(--fi-status-warning-border-color,#ffcc00)} /* Shared touch surface: central design values with minimum finger-sized targets. */ .fi-touch-ui .btn,.fi-touch-ui .fi-control{min-height:44px} .fi-touch-ui .fi-control{font-size:max(16px,var(--fi-control-font-size,13px))} .fi-touch-ui .fi-btn--icon{min-width:44px} /* Wiederverwendbare Aktenbausteine: dieselben Abschnitte, Routen und Chats wie bei Anrufen. */ .fi-history-entry{border:1px solid var(--line);border-radius:var(--fi-box-radius,12px);padding:var(--fi-detail-section-padding,var(--fi-section-padding,12px));background:#fff} .fi-history-entry>summary>time{margin-left:auto;flex:none;text-align:right} .fi-history-entry-label{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-badge-gap,5px);min-width:0} .fi-history-entry-body{margin-top:0} .fi-master-record-layout>.fi-service-detail:has(>.fi-record-view){grid-template-rows:minmax(0,1fr)} .fi-detail-shell>.fi-record-view>:is(.fi-toolbar,.fi-detail-header){flex:none} .fi-detail-shell>.fi-record-view{display:flex;flex-direction:column;height:100%;min-height:0!important} .fi-detail-shell>.fi-record-view>.fi-detail-body{flex:1} /* Shared record identity header follows the content padding and text tokens. */ .fi-record-view>.fi-detail-header>.fi-detail-group{flex:1;gap:var(--fi-detail-group-content-gap,8px)} .fi-record-view>.fi-detail-header :is(h2,p){margin:0} .fi-record-view>.fi-detail-header p{overflow-wrap:anywhere} .fi-record-view>.fi-toolbar .fi-toolbar-group{gap:var(--fi-mini-button-gap,4px)} /* Record sections share one rhythm; nested communication groups use the same tokens. */ .fi-record-view>.fi-detail-body{gap:var(--fi-detail-group-gap,20px);align-content:start} .fi-record-view .fi-detail-section{margin:0;gap:var(--fi-detail-group-content-gap,8px);align-content:start} .fi-record-view .fi-detail-section-head{min-height:var(--fi-mini-button-size,28px)} .fi-record-view .fi-detail-section-head :is(h3,h4,h5){margin:0;font-family:var(--fi-navigation-font-family,system-ui,sans-serif)!important;font-size:var(--fi-navigation-font-size,12px)!important;font-weight:var(--fi-navigation-font-weight,750)!important;line-height:var(--fi-text-p-line-height,1.5)!important;letter-spacing:normal;text-transform:none} .fi-record-view .fi-detail-section-head :is(h3,h4,h5)>.ti{font-size:var(--fi-detail-heading-icon-size,18px)} @media(max-width:600px){.fi-history-entry>summary{align-items:flex-start;flex-wrap:wrap}.fi-history-entry>summary>time{width:100%}} .fi-business-card{display:grid;gap:var(--fi-detail-group-content-gap,8px);overflow-wrap:anywhere} .fi-business-card .customer-order-detail-value{min-width:0;overflow-wrap:anywhere} /* Plain record fields use compact shared detail typography and aligned labels. */ .fi-business-card .fi-detail-grid>.fi-detail-stack{gap:var(--fi-mini-button-gap,4px);align-content:start} .fi-business-card .fi-detail-grid>.fi-detail-stack>.fi-text-small{display:flex;align-items:center;gap:var(--fi-inline-gap,8px);margin:0} .fi-business-card .fi-detail-grid>.fi-detail-stack>.fi-text-p{font-size:var(--fi-table-font-size,12px)!important;line-height:1.3!important;color:var(--sub)!important} .fi-business-card a:not(.btn):not([data-ui-action]){color:inherit;text-decoration:none} .fi-business-card a:not(.btn):not([data-ui-action]):hover{text-decoration:underline} .fi-business-card-note{white-space:pre-wrap;overflow-wrap:anywhere} /* Wiederverwendbarer breiter Dialog mit fixem Eingabebereich und scrollbarem Verlauf. */ .fi-chat-dialog>.fi-dialog-body{flex:1;min-height:0;overflow:auto} .fi-chat-dialog-body{display:flex;flex-direction:column} .fi-chat-messages{display:flex;flex-direction:column;gap:var(--fi-detail-section-gap,12px);min-height:100%;box-sizing:border-box;font-size:var(--fi-text-p-font-size,14px);line-height:var(--fi-text-p-line-height,1.5);white-space:pre-wrap} .fi-chat-processing{display:flex;align-self:flex-start;flex:none;padding-block:var(--fi-badge-gap,5px)} .fi-chat-message{min-width:0} .fi-chat-message-meta{display:flex;align-items:center;gap:var(--fi-badge-gap,5px);margin-bottom:var(--fi-badge-gap,5px)} .fi-chat-message-meta time{color:var(--muted,#9aa7b3)} .fi-chat-message-content{overflow-wrap:anywhere} .fi-chat-compose{display:flex;flex-direction:column;align-items:stretch;gap:var(--fi-button-gap,7px)} .fi-chat-compose-main,.fi-chat-compose-meta{display:flex;align-items:center;gap:var(--fi-button-gap,7px);min-width:0} .fi-chat-compose-main>.fi-control{flex:1;min-width:0} .fi-chat-compose-main>.tabs{flex:none} .fi-chat-compose-meta{justify-content:space-between;flex-wrap:wrap} @media(max-width:640px){.fi-chat-compose-main{flex-wrap:wrap}.fi-chat-compose-main>.fi-control{flex-basis:100%}} /* Globale Scrollsperre bei geöffneten modalen Dialogen. */ html.fi-modal-open,body.fi-modal-open{overflow:hidden!important;overscroll-behavior:none} .fi-chat-message--user{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:var(--fi-badge-gap,5px);max-width:min(80%,680px)} .fi-chat-message--user .fi-chat-message-meta{order:0;justify-content:flex-end;flex-wrap:wrap;margin-bottom:0} .fi-chat-message--user .fi-chat-message-meta>strong{font:inherit;font-weight:var(--fi-text-strong-font-weight,700)} .fi-chat-message--user .fi-chat-message-content{order:1;max-width:100%;padding:var(--fi-detail-section-padding,14px);border-radius:var(--fi-dialog-radius,12px)} @media(max-width:520px){.fi-chat-message--user{max-width:95%}} /* Zentrale Badge-Aktivitätsanzeige: nur vorwärts, dann Neustart links. */ .fi-badge--progress{position:relative;overflow:hidden;isolation:isolate} .fi-badge--progress::before{content:'';position:absolute;z-index:0;top:0;bottom:0;left:-35%;width:35%;background:rgba(255,255,255,.18);animation:fi-badge-progress-forward 1.8s linear infinite;pointer-events:none} .fi-badge--progress>*{position:relative;z-index:1} @keyframes fi-badge-progress-forward{from{left:-35%}to{left:100%}} @media(prefers-reduced-motion:reduce){.fi-badge--progress::before{animation:none;left:0;width:100%;opacity:.18}} /* Extra Luft zwischen letzter Chat-Antwort und der unteren Dialogkante. */ .fi-chat-messages--filled::after{content:'';display:block;flex:none;min-height:var(--fi-dialog-body-padding-y,20px)} .fi-chat-message-usage{display:inline-flex;align-self:flex-start;margin-top:var(--fi-detail-group-content-gap,8px)} /* Zentrale Datumsfelder: native Datumsmaske in Großbuchstaben. */ .fi-control[type="date"], .fi-control[type="date"]::-webkit-datetime-edit{ text-transform:uppercase; } /* Zentrale eingebettete Tabelle für Modals und Detailblöcke. */ .fi-table.fi-table--embedded{min-width:var(--fi-table-embedded-min-width,640px)} .fi-text-multiline{white-space:pre-wrap;overflow-wrap:anywhere} /* Shared company logo geometry; configured in UI-System > Logos. */ .fi-company-logo{width:var(--fi-company-logo-size,96px);height:var(--fi-company-logo-size,96px);max-width:100%;object-fit:contain} /* Shared compact company identity: existing icon-button frame and UI tokens. */ .fi-company-logo--icon{width:var(--fi-button-icon-size,16px);height:var(--fi-button-icon-size,16px)} .fi-company-logo-list-main{display:flex;align-items:center;gap:8px;min-width:0} .fi-company-logo-list-main>[data-ui-logo-frame]{flex-shrink:0;pointer-events:none} .fi-company-logo-list-main>.fi-record-main{flex:1} /* Gemeinsame Funktionsdialoge: Geometrie aus dem zentralen UI-System. */ .fi-dialog--shared .fi-dialog-header>div{flex:1;min-width:0} .fi-dialog-symbol{display:grid;place-items:center;flex:none;width:var(--fi-icon-button-size,40px);height:var(--fi-icon-button-size,40px);border-radius:var(--fi-button-radius,10px);background:var(--canvas);color:var(--fi-content-accent-color,#2f3a45)} .fi-dialog-symbol .ti{font-size:var(--fi-button-icon-size,18px)} .fi-dialog--shared .fi-dialog-body{min-height:0} .fi-dialog--shared [role="alert"]:empty,.fi-dialog--shared .dial-matches:empty{display:none} .fi-dialog--shared .fi-detail-section{margin:0;border:0;border-radius:0;padding:0;background:transparent} .fi-dialog--shared .fi-detail-section+.fi-detail-section{padding-top:var(--fi-detail-section-gap,8px);border-top:1px solid var(--line)} .fi-dialog--shared .fi-dialog-header h2{overflow-wrap:anywhere} .fi-dialog--shared .fi-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fi-dialog--shared .fi-dialog-footer-status{min-width:0;flex:1 1 140px} .fi-file-preview{min-height:180px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--fi-box-radius,12px);overflow:auto} .fi-file-preview iframe{display:block;width:100%;height:min(52dvh,560px);border:0} .fi-file-preview img,.fi-file-preview video{display:block;max-width:100%;max-height:52dvh;margin:auto;object-fit:contain} .fi-file-preview audio{display:block;width:100%} .fi-file-preview pre{margin:0;padding:var(--fi-dialog-body-padding-y,20px);white-space:pre-wrap;overflow-wrap:anywhere} .fi-file-preview .fi-empty-state{padding:var(--fi-dialog-body-padding-y,24px)} @media(max-width:600px){.fi-dialog--shared .fi-detail-grid{grid-template-columns:1fr}.fi-dialog--shared .fi-dialog-header,.fi-dialog--shared .fi-dialog-body,.fi-dialog--shared .fi-dialog-footer{padding-left:min(var(--fi-dialog-body-padding-x,24px),16px);padding-right:min(var(--fi-dialog-body-padding-x,24px),16px)}} /* Shared two-endpoint time route, using the central progress and badge components. */ .fi-detail-route.fi-detail-route--time{grid-auto-flow:unset;grid-template-columns:auto minmax(24px,1fr) auto;align-items:center} .fi-detail-route--time>.fi-detail-route-content{width:auto} .fi-detail-route--time .fi-progress-bar{background:var(--fi-step-time-active-color,#2f3a45)} .fi-detail-route--time[data-overdue="true"] .fi-progress-bar{background:var(--fi-step-time-overdue-color,#d70015)} /* Equal calendar-day segments for the central progress component. */ .fi-progress--days{position:relative} .fi-progress--days::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,transparent calc(100% - var(--fi-list-route-line-width,2px)),var(--fi-step-line-pending-color,#d7dee4) 0);background-size:calc(100% / var(--fi-progress-days,1)) 100%} /* Shared dated progress scale. */ .fi-progress-calendar{min-width:0;max-width:100%;overflow-x:auto;padding-top:calc((var(--fi-badge-height,24px) - var(--fi-progress-height,6px)) / 2)} .fi-progress-calendar-track{min-width:calc(var(--fi-progress-days,1) * var(--fi-progress-day-width,44px))} .fi-progress-dates{display:grid;grid-template-columns:repeat(var(--fi-progress-days,1),minmax(0,1fr));margin-top:var(--fi-mini-button-gap,4px)} .fi-progress-date{--fi-text-small-text-align:center;display:block;text-align:center;white-space:nowrap;padding:var(--fi-mini-button-gap,4px) 0;border-radius:var(--fi-badge-radius,8px)} .fi-progress-date[aria-current="date"],.fi-progress-remaining,.fi-progress-date-value{--fi-text-small-text-align:center;--fi-text-small-font-weight:var(--fi-text-strong-font-weight,700)} .fi-detail-route--time:has(.fi-progress-calendar){align-items:start} /* Shared clock/weather header. Forecast is portalled outside the decorative hero. */ .fi-header-context{padding-top:0;--fi-text-small-color:var(--sub);display:flex;align-items:center;gap:8px;flex:none} .fi-header-clock{text-align:left;width:auto;flex:none;display:flex;flex-direction:row;align-items:baseline;gap:6px;color:var(--ink);text-decoration:none;white-space:nowrap} .fi-header-clock time{font-family:var(--fi-text-strong-font-family,system-ui,sans-serif),system-ui,sans-serif;font-size:var(--fi-header-clock-font-size,15px);font-weight:var(--fi-text-strong-font-weight,700);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1.15} .fi-header-clock>span{text-align:left!important;width:auto;color:var(--sub);font-variant-numeric:tabular-nums} .fi-header-weather{display:flex;flex-direction:row;align-items:center;gap:2px;white-space:nowrap} .fi-header-weather-toggle .fi-weather-symbol,.fi-weather-hour>.fi-weather-symbol{width:var(--fi-header-weather-symbol-size,26px);height:var(--fi-header-weather-symbol-size,26px);font-size:var(--fi-header-weather-symbol-size,26px);line-height:1} .fi-header-weather-toggle .fi-weather-symbol>.ti,.fi-weather-hour>.fi-weather-symbol>.ti{font-size:var(--fi-header-weather-symbol-size,26px);line-height:1} .fi-header-weather-toggle .fi-weather-symbol>.ti+ .ti,.fi-weather-hour>.fi-weather-symbol>.ti+ .ti{font-size:var(--fi-header-weather-overlay-size,15px)} .fi-header-weather-values{--fi-text-small-color:var(--ink);color:var(--ink);font-variant-numeric:tabular-nums} .fi-weather-preview{position:fixed;z-index:900;box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:var(--fi-dialog-radius,16px);background:#fff;color:var(--ink);box-shadow:var(--fi-shadow-float)} .fi-weather-hours{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:6px} .fi-weather-hour{display:flex;flex:0 0 72px;flex-direction:column;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .fi-weather-hour time{font-size:var(--fi-text-small-font-size,11px);white-space:nowrap} .fi-weather-hour>.fi-weather-symbol{font-size:var(--fi-header-weather-symbol-size,26px);color:var(--ink)} .fi-weather-hour small{font-size:var(--fi-text-small-font-size,11px);white-space:nowrap;color:var(--sub)} .fi-weather-preview p{margin:8px 0 6px} .fi-weather-preview>a{color:var(--sub)} @media(max-width:600px){.fi-header-context{gap:16px}.fi-header-clock time{font-size:var(--fi-header-clock-mobile-font-size,15px)}.fi-app-header{gap:16px}} @media print{.fi-weather-preview{display:none!important}} .fi-weather-symbol{position:relative;display:inline-flex;font-size:var(--fi-header-weather-symbol-size,26px);line-height:1} .fi-weather-symbol>.ti+ .ti{position:absolute;right:-5px;top:-5px;font-size:var(--fi-header-weather-overlay-size,15px);background:inherit} /* Global user functions; shared notifications remain in the same menu. */ .fi-user-menu-toggle{position:relative} .fi-user-menu-toggle .ti{font-size:var(--fi-icon-size,18px)} .fi-user-menu-badge{position:absolute;top:-5px;right:-5px} .fi-user-menu-panel{position:fixed;z-index:910;width:min(330px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:12px;border:1px solid var(--line);border-radius:var(--fi-dialog-radius,16px);background:#fff;color:var(--ink);box-shadow:var(--fi-shadow-float)} .fi-user-menu-identity{display:flex;align-items:center;gap:10px;padding:8px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:8px;color:inherit;text-decoration:none} .fi-user-menu-identity-text{display:flex;flex-direction:column;gap:4px;min-width:0} .fi-user-menu-identity:hover .fi-text-strong{color:var(--fi-accent)} .fi-user-menu-identity-text>span{--fi-text-small-color:var(--sub);color:var(--sub)} .fi-user-menu-panel .fi-user-menu-item{width:100%;justify-content:flex-start;margin:3px 0} .fi-user-menu-panel form{margin:0} .fi-user-menu-panel [data-notification-badge]{margin-left:auto} .fi-user-menu-panel .fi-notification-panel{position:static;width:auto;max-height:none;box-shadow:none;margin:6px 0} @media print{.fi-user-menu-panel{display:none!important}} @media(max-width:600px){.fi-app-header{flex-wrap:wrap}} /* Shared detail tables fill desktop panels; narrow screens scroll only the wrapper. */ .fi-table[data-detail-table]{table-layout:fixed} .fi-table[data-detail-table="services"]{min-width:860px;table-layout:auto} .fi-table.fi-table--embedded:is([data-detail-table="metadata"],[data-detail-table="notes"]){min-width:0} .fi-table[data-detail-table="records"]{min-width:600px} .fi-table[data-detail-table="persons"]{min-width:720px} .fi-table[data-detail-table="history"]{min-width:700px;table-layout:auto} .fi-table[data-detail-table="history"] th:last-child, .fi-table[data-detail-table="history-communication"] th:last-child, .fi-table[data-detail-table="communication"] th:last-child{white-space:nowrap;overflow-wrap:normal} .fi-table[data-detail-table="communication"],.fi-table[data-detail-table="history-communication"]{min-width:540px;table-layout:auto} @media(min-width:768px){ .fi-table[data-detail-table]{min-width:0} .fi-table[data-detail-table] th{overflow-wrap:anywhere;padding-inline:min(var(--fi-table-header-padding-x,12px),1%)} .fi-table[data-detail-table] td{padding-inline:min(var(--fi-table-padding-x,12px),1%)} .fi-table[data-detail-table] .fi-badge{max-width:100%;min-width:0;white-space:normal;flex-wrap:wrap} .fi-table[data-detail-table] .fi-badge>.fi-badge{flex:1 1 auto} .fi-table[data-detail-table] .fi-badge>span{min-width:0;overflow-wrap:anywhere} .fi-table[data-detail-table] .fi-badge>i{flex-shrink:0} } /* Record number and global reference always form one horizontal badge. */ .fi-table[data-detail-table] .fi-badge--vorgang{width:max-content;min-width:max-content;max-width:none;flex-flow:row nowrap;white-space:nowrap} .fi-table[data-detail-table] .fi-badge--vorgang>.fi-badge{max-width:none;flex:none;flex-flow:row nowrap;white-space:nowrap} .fi-table[data-detail-table] .fi-badge--vorgang>.fi-badge>span{overflow-wrap:normal} .fi-header-weather-toggle{position:relative;z-index:901} .fi-header-weather-toggle[aria-expanded="true"]>.fi-weather-symbol{opacity:0} .fi-app-header{isolation:auto} /* Intrinsic badge width includes a stable gutter to the following content. */ .fi-table[data-detail-table="services"] td:first-child, .fi-table[data-detail-table="history"] td:first-child{padding-left:var(--fi-table-padding-x,12px);padding-right:calc(var(--fi-table-padding-x,12px) + 8px)} .fi-table[data-detail-table="services"] th:first-child, .fi-table[data-detail-table="history"] th:first-child{padding-left:var(--fi-table-header-padding-x,12px);padding-right:calc(var(--fi-table-header-padding-x,12px) + 8px)} /* One modal shell for all modules; only content scrolls, including forms wrapping the shell. */ dialog.fi-dialog[data-fi-dialog]{border:1px solid var(--line);border-radius:var(--fi-dialog-radius,16px);background:#fff;color:var(--ink);box-shadow:var(--fi-shadow-float)} dialog.fi-dialog[data-fi-dialog]::backdrop{background:rgba(0,0,0,.18);backdrop-filter:blur(4px)} dialog.fi-dialog[data-fi-dialog]>.fi-dialog-header, dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-header{flex:none;padding:var(--fi-dialog-header-padding-y,20px) var(--fi-dialog-header-padding-x,27px)} dialog.fi-dialog[data-fi-dialog] .fi-dialog-header h2{margin:0;font-family:var(--fi-text-h2-font-family,system-ui,sans-serif);font-size:var(--fi-text-h2-font-size,22px);font-weight:var(--fi-text-h2-font-weight,700);line-height:var(--fi-text-h2-line-height,1.2);overflow-wrap:anywhere} dialog.fi-dialog[data-fi-dialog]>.fi-dialog-body, dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-body{flex:1;min-height:0;min-width:0;overflow:auto;padding:var(--fi-dialog-body-padding-y,20px) var(--fi-dialog-body-padding-x,27px);overscroll-behavior:contain} dialog.fi-dialog[data-fi-dialog]>.fi-dialog-footer, dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-footer{flex:none;padding:var(--fi-dialog-footer-padding-y,12px) var(--fi-dialog-footer-padding-x,20px);background:var(--paper)} dialog.fi-dialog[data-fi-dialog]>form:not(.fi-dialog-body):not(.fi-chat-compose){display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:hidden;max-height:none} @media(max-width:600px){ dialog.fi-dialog[data-fi-dialog]>.fi-dialog-header,dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-header{padding-left:min(var(--fi-dialog-header-padding-x,27px),16px);padding-right:min(var(--fi-dialog-header-padding-x,27px),16px)} dialog.fi-dialog[data-fi-dialog]>.fi-dialog-body,dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-body{padding-left:min(var(--fi-dialog-body-padding-x,27px),16px);padding-right:min(var(--fi-dialog-body-padding-x,27px),16px)} dialog.fi-dialog[data-fi-dialog]>.fi-dialog-footer,dialog.fi-dialog[data-fi-dialog]>form>.fi-dialog-footer{padding-left:min(var(--fi-dialog-footer-padding-x,27px),16px);padding-right:min(var(--fi-dialog-footer-padding-x,27px),16px)} } /* Embedded record content shares the linked-record table typography, including semantic text elements. */ .fi-table[data-detail-table] td{font-weight:var(--fi-text-p-font-weight,400)} /* Linked records and history use the same content rhythm as record fields. */ .fi-table[data-detail-table] :is(td,th[scope="row"])>p{margin:0} .fi-table[data-detail-table] :is(td,th[scope="row"])>:is(p,small)+:is(p,small), .fi-table[data-detail-table] :is(td,th[scope="row"])>a+:is(p,small), .fi-table[data-detail-table] :is(td,th[scope="row"])>small{display:block;margin-top:var(--fi-mini-button-gap,4px)} .fi-detail-group{align-content:start} .fi-table[data-detail-table] tbody th[scope="row"]{font-weight:var(--fi-text-strong-font-weight,700)} .fi-table[data-detail-table] :is(td,th[scope="row"]) .fi-row{gap:var(--fi-inline-gap,8px);margin:0} .fi-table[data-detail-table] :is(td,th[scope="row"])>.fi-row+.fi-row{margin-top:var(--fi-mini-button-gap,4px)} .fi-table[data-detail-table] :is(td,th[scope="row"]) .fi-disclosure{margin-top:var(--fi-detail-group-content-gap,8px)} .fi-table[data-detail-table] :is(td,th[scope="row"]) .fi-disclosure>summary{font-family:inherit;font-size:inherit;line-height:inherit} .fi-table[data-detail-table] :is(td,th[scope="row"]) :is(.fi-text-p,.fi-text-small,.fi-text-strong){font-family:var(--fi-text-p-font-family,system-ui,sans-serif)!important;font-size:var(--fi-table-font-size,12px)!important;font-weight:var(--fi-text-p-font-weight,400)!important;line-height:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important} /* Texte in Datenzellen nutzen dasselbe Zellgewicht wie freier Zellentext. */ .fi-table[data-detail-table] td:not([scope]) :is(.fi-text-p,.fi-text-small,.fi-text-strong){font-weight:var(--fi-detail-cell-font-weight,var(--fi-text-p-font-weight,400))!important} .fi-table[data-detail-table] :is(td,th[scope="row"]) a:not(.btn):not([data-ui-action]){color:inherit;text-decoration:none} .fi-table[data-detail-table] :is(td,th[scope="row"]) a:not(.btn):not([data-ui-action]):hover{text-decoration:underline} /* Shared content blocks remain independent of the mail thread flex layout. */ .mail-detail>.fi-detail-section{flex:none} .fi-header-clock>[data-header-weekday]{--fi-text-small-color:var(--sub);color:var(--sub)!important;font-size:var(--fi-text-small-font-size,11px)!important;font-weight:var(--fi-text-strong-font-weight,700)!important} .fi-history-direction{display:inline-flex;background:none;align-items:center;font-size:var(--fi-history-icon-size,18px)} .fi-table[data-history-kind="anruf"] .fi-history-direction{font-size:var(--fi-history-call-icon-size,14px)} /* Central boolean switch: focus, touch target and reduced-motion behavior. */ .fi-switch{position:relative;display:inline-flex;align-items:center;gap:var(--fi-switch-gap,12px);min-height:var(--fi-control-height,43px);cursor:pointer;color:var(--ink);font-size:var(--fi-control-font-size,14px)} .fi-switch>input{position:absolute;width:1px;height:1px;opacity:0} .fi-switch-track{display:block;width:var(--fi-switch-width,44px);height:var(--fi-switch-height,26px);flex:0 0 var(--fi-switch-width,44px);border:var(--fi-control-border-width,1px) solid var(--line);border-radius:var(--fi-badge-radius,999px);background:var(--sub);transition:background .2s} .fi-switch-track::before{content:"";display:block;width:var(--fi-switch-knob-size,20px);height:var(--fi-switch-knob-size,20px);margin:var(--fi-switch-inset,2px);border-radius:50%;background:var(--paper);transition:transform .2s} .fi-switch>input:checked+.fi-switch-track{background:var(--teal)} .fi-switch>input:checked+.fi-switch-track::before{transform:translateX(calc(var(--fi-switch-width,44px) - var(--fi-switch-knob-size,20px) - var(--fi-switch-inset,2px) * 2 - var(--fi-control-border-width,1px) * 2))} .fi-switch>input:disabled~span{opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed} @media(prefers-reduced-motion:reduce){.fi-switch-track,.fi-switch-track::before{transition:none}} .fi-header-clock>[data-header-date]{--fi-text-small-color:var(--ink);color:var(--sub)!important;background:var(--paper);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:1px 6px;width:auto;align-self:center;line-height:1.4;font-weight:600!important} /* Content selection: rich rows use the same button geometry and neutral palette. */ .fi-choice{ display:flex;align-items:center;gap:var(--fi-button-gap,7px);width:100%;min-width:0; padding:var(--fi-button-padding-y,9px) var(--fi-button-padding-x,12px); border:var(--fi-button-border-width,1px) solid var(--line); border-radius:var(--fi-box-radius,12px);background:#fff; color:var(--fi-text-p-color,#2f3a45);text-align:left;cursor:pointer; font-size:var(--fi-button-font-size,12px);font-weight:var(--fi-button-font-weight,700); } .dial-match{display:block} .dial-match+.dial-match{margin-top:var(--fi-inline-gap,8px)} .fi-choice>span{min-width:0;overflow-wrap:anywhere} /* A stack/grid supplies its own separation; cards must not add a second gap. */ .fi-stack>.fi-card,.fi-grid>.fi-card{margin-bottom:0} @media(max-width:900px){.fi-card-body,.fi-detail-body,.fi-detail-header,.fi-call-detail-body{padding:var(--fi-content-mobile-padding,16px)}} /* Native selection controls: one geometry, keyboard behavior and accent everywhere. */ input.fi-checkbox{appearance:auto;display:inline-block;box-sizing:border-box;width:var(--fi-checkbox-size,18px);height:var(--fi-checkbox-size,18px);min-width:var(--fi-checkbox-size,18px);min-height:var(--fi-checkbox-size,18px);padding:0;margin:0;flex:none;accent-color:var(--fi-checkbox-accent,#2f3a45);vertical-align:middle;cursor:pointer} input.fi-checkbox:disabled{cursor:not-allowed;opacity:var(--fi-disabled-opacity,.55)} .fi-box,.fi-detail-section,.fi-form-grid>*{min-width:0} .fi-box>:first-child,.fi-detail-section>:first-child{margin-top:0} .fi-box>:last-child,.fi-detail-section>:last-child{margin-bottom:0} .fi-box>.fi-box{background:var(--paper)} .fi-control[type="file"],.fi-control[type="color"]{height:auto;min-height:var(--fi-control-height,43px);padding:var(--fi-control-padding-y,11px) var(--fi-control-padding-x,13px)} .fi-control[type="file"]{padding:var(--fi-mini-button-padding,2px)} .fi-control[type="color"]{width:100%;height:var(--fi-control-height,43px);padding:var(--fi-mini-button-padding,2px)} .fi-control[type="file"]::file-selector-button{font-family:inherit;font-size:var(--fi-button-font-size,12px);font-weight:var(--fi-button-font-weight,700);line-height:1.3;padding:var(--fi-button-padding-y,9px) var(--fi-button-padding-x,12px);border:var(--fi-button-border-width,1px) solid var(--line);border-radius:var(--fi-button-radius,10px);background:var(--paper);color:var(--ink);cursor:pointer;margin-right:var(--fi-inline-gap,8px)} /* Shared states must win over the legacy context selectors for ordinary fields. */ .fi-control[aria-invalid="true"]{--fi-focus-color:var(--fi-status-error-color,#d70015);border-color:var(--fi-status-error-color,#d70015)!important;background:var(--fi-status-error-background,#fff1f0)!important} .fi-control:disabled{opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed} .fi-control:disabled::file-selector-button{cursor:not-allowed} /* Der Auswahl-Button füllt genau die Feldhöhe, damit Datei-Felder so hoch sind wie alle übrigen Felder. */ .fi-control[type="file"]::file-selector-button{box-sizing:border-box;height:calc(var(--fi-control-height,43px) - 2 * var(--fi-mini-button-padding,2px) - 2 * var(--fi-control-border-width,1px));padding-block:0} .fi-control[readonly]{cursor:default} /* Shared text and icon roles. Component sizes remain owned by their component. */ .fi-text-inverse-sample{background:var(--navy);color:var(--fi-content-inverse-color,#ffffff);padding:var(--fi-section-padding,12px)} :where(h1,h2,h3,h4,h5,h6):has(>.ti){display:flex;align-items:center;gap:var(--fi-inline-gap,8px)} /* Shared persistent feedback. Errors remain visible alongside their form or retry action. */ .fi-feedback,.fi-error{--fi-feedback-color:var(--sub);--fi-text-small-color:var(--fi-feedback-color);display:flex;align-items:flex-start;gap:var(--fi-inline-gap,8px);color:var(--fi-feedback-color)!important;font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0} .fi-feedback::before,.fi-error::before{content:"\eac5";font-family:"tabler-icons";font-style:normal;font-weight:400;font-size:var(--fi-status-icon-size,16px);line-height:1.2;flex:none;speak:none} .fi-feedback>:is(span,p){min-width:0;margin:0;color:inherit!important} .fi-feedback[data-feedback-type="error"],.fi-error{--fi-feedback-color:var(--fi-status-error-color,#d70015)} .fi-feedback[data-feedback-type="error"]::before,.fi-error::before{content:"\ea06"} .fi-feedback[data-feedback-type="warning"]{--fi-feedback-color:var(--fi-status-warning-color,#a05a00)} .fi-feedback[data-feedback-type="warning"]::before{content:"\ea05"} .fi-feedback[data-feedback-type="success"]{--fi-feedback-color:var(--fi-pair-gruen-text)} .fi-feedback[data-feedback-type="success"]::before{content:"\ea67"} .fi-feedback[data-feedback-type="loading"]::before{content:none} .fi-feedback[data-feedback-type="info"]{--fi-feedback-color:var(--fi-content-link-color,#2f3a45)} .fi-feedback:empty,.fi-error:empty{display:none} .fi-feedback>.ti{display:none} .fi-empty-state[hidden],.fi-feedback[hidden],.fi-error[hidden]{display:none!important} .fi-tooltip{position:fixed;inset:auto;margin:0;z-index:2000;max-width:min(var(--fi-tooltip-width,320px),calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;padding:var(--fi-inline-gap,8px) var(--fi-section-padding,12px);border:var(--fi-box-border-width,1px) solid var(--line);border-radius:var(--fi-box-radius,12px);background:var(--navy);color:var(--fi-content-inverse-color,#ffffff);font-family:var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5);text-align:start;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow)} .fi-tooltip--sample{position:static} .fi-contact-alarm-icon{color:var(--danger,#d70015)} [data-contact-ways-editor]{display:grid;gap:var(--fi-detail-group-gap,20px)} /* Tabs and native disclosures share focus, disabled states and configurable geometry. */ .tab:disabled,.tab[aria-disabled="true"]{opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed;transform:none} .tabs.fi-tabs--fit>.tab{flex:0 1 auto;white-space:normal} .fi-disclosure{min-width:0} .fi-disclosure:not(.fi-disclosure--row)>summary{display:flex;align-items:center;gap:var(--fi-inline-gap,8px);list-style:none;cursor:pointer;padding:var(--fi-disclosure-padding,12px);color:var(--fi-text-p-color,#2f3a45);font-family:var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);line-height:var(--fi-text-small-line-height,1.5);overflow-wrap:anywhere} .fi-disclosure>summary::-webkit-details-marker{display:none} .fi-disclosure:not(.fi-disclosure--row)>summary::before{content:"\ea61";font-family:"tabler-icons";font-size:var(--fi-disclosure-icon-font-size,18px);font-weight:400;line-height:1;align-self:center;flex:none;color:var(--sub);transition:transform .15s} .fi-disclosure[open]:not(.fi-disclosure--row)>summary::before{transform:rotate(90deg)} .fi-disclosure[open]:not(.fi-disclosure--row)>summary{margin-bottom:var(--fi-disclosure-gap,12px)} .fi-disclosure>summary>.ti{flex:none;font-size:var(--fi-disclosure-icon-font-size,18px)} .fi-disclosure>summary>small{margin-left:auto;font:inherit;color:var(--sub)} .fi-disclosure>summary>span{min-width:0} .fi-disclosure.mail-admin-danger>summary{color:var(--fi-status-error-color,#d70015)} .mail-account-row{display:flex;align-items:center;min-width:0;gap:var(--fi-inline-gap,8px)} .mail-account-row>.mail-account{flex:1} [data-ui-disclosure-panel][hidden]{display:none!important} @media(prefers-reduced-motion:reduce){.fi-disclosure>summary::before{transition:none}} .fi-disclosure.fi-disclosure--embedded>summary{padding:0} /* Shared interaction states. Semantic component tones remain owned by their registry. */ :focus-visible{outline:var(--fi-focus-width,3px) solid var(--fi-focus-color,#2f3a45)!important;outline-offset:var(--fi-focus-offset,3px)!important} /* Selected contact-person rows use the shared list selection colors and a vertical inset marker. Keep the standard focus outline on links, disclosures and actions inside the row. */ .fi-table[data-detail-table="persons"] tbody tr:focus-visible{outline:none!important} .fi-table[data-detail-table="persons"] tbody tr:is([aria-current="true"],:focus-visible)>:is(td,th[scope="row"]){background:var(--fi-list-active-background,#eef2f5)!important} .fi-table[data-detail-table="persons"] tbody tr:is([aria-current="true"],:focus-visible)>:first-child{box-shadow:inset var(--fi-focus-width,3px) 0 0 var(--fi-list-active-border-color,#2f3a45)} .fi-switch>input:focus-visible+.fi-switch-track{outline:var(--fi-focus-width,3px) solid var(--fi-focus-color,#2f3a45)!important;outline-offset:var(--fi-focus-offset,3px)!important} :where(button,a,input,select,textarea,summary,[role="button"],[role="tab"]):is(:disabled,[disabled],[aria-disabled="true"],.is-inactive){cursor:not-allowed!important;transform:none!important;animation:none!important;transition:none!important} :where(button,a,input,select,textarea,summary,[role="button"],[role="tab"]):is(:disabled,[disabled],[aria-disabled="true"],.is-inactive):not([class*="fi-btn--inactive-tone-"]):not(.fi-switch>input){opacity:var(--fi-disabled-opacity,.55)!important} .fi-check:has(input:disabled)>span{opacity:var(--fi-disabled-opacity,.55)} .fi-choice.selected{background:var(--fi-list-active-background,#eef2f5)!important;border-color:var(--fi-list-active-border-color,#2f3a45)!important} .fi-record-row.is-active:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-list-active-background,#eef2f5)} [role="group"][aria-disabled="true"]{opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed} .mail-recipient-suggestion.active{background:var(--fi-list-active-background,#eef2f5);border-color:var(--fi-list-active-border-color,#2f3a45)} /* Shared asynchronous feedback and measured/indeterminate progress. */ .fi-loading{display:inline-flex;align-items:center;gap:var(--fi-inline-gap,8px);max-width:100%;vertical-align:middle} .fi-spinner{display:inline-block;box-sizing:border-box;flex:none;width:var(--fi-loading-size,16px);height:var(--fi-loading-size,16px);border:var(--fi-loading-stroke,2px) solid currentColor;border-right-color:transparent;border-radius:50%;color:var(--fi-loading-color,#2f3a45);animation:fi-loading-spin var(--fi-loading-duration,900ms) linear infinite} @keyframes fi-loading-spin{to{transform:rotate(360deg)}} :is(button,a)[aria-busy="true"]::after{content:"";display:inline-block;width:var(--fi-loading-size,16px);height:var(--fi-loading-size,16px);box-sizing:border-box;border:var(--fi-loading-stroke,2px) solid currentColor;border-right-color:transparent;border-radius:50%;flex:none;animation:fi-loading-spin var(--fi-loading-duration,900ms) linear infinite} .fi-progress[data-indeterminate="true"] .fi-progress-bar{width:35%;animation:fi-loading-progress 1.4s ease-in-out infinite alternate} @keyframes fi-loading-progress{from{transform:translateX(0)}to{transform:translateX(185%)}} progress.fi-progress{display:block;width:100%;appearance:none;border:0;color:var(--fi-progress-color,#2f3a45)} progress.fi-progress::-webkit-progress-bar{background:var(--fi-progress-background,#f3f6f8);border-radius:inherit} progress.fi-progress::-webkit-progress-value{background:var(--fi-progress-color,#2f3a45);border-radius:inherit} progress.fi-progress::-moz-progress-bar{background:var(--fi-progress-color,#2f3a45);border-radius:inherit} @media(prefers-reduced-motion:reduce){.fi-spinner,:is(button,a)[aria-busy="true"]::after,.fi-progress[data-indeterminate="true"] .fi-progress-bar{animation:none}} .fi-app-header .fi-loading{--fi-loading-color:var(--accent)} :is(.fi-btn--icon,.mail-toolbar-icon)[aria-busy="true"]{position:relative} :is(.fi-btn--icon,.mail-toolbar-icon)[aria-busy="true"]>.ti{visibility:hidden} :is(.fi-btn--icon,.mail-toolbar-icon)[aria-busy="true"]::after{position:absolute;left:calc(50% - var(--fi-loading-size,16px)/2);top:calc(50% - var(--fi-loading-size,16px)/2)} .fi-spinner.ti::before{content:none} .fi-badge .fi-spinner{color:inherit} .mail-load-images{margin-bottom:var(--fi-inline-gap,8px)} /* Shared solid-red palette; workshop identity uses the same catalog tone. */ .fi-badge--red{background:#d70015;color:#fff} .fi-btn--tone-red{background:#d70015!important;border-color:#d70015!important;color:#fff!important} .fi-btn--tone-red:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#d70015!important;border-color:#d70015!important} .fi-badge--active-tone-red:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-red.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#d70015;color:#fff} .fi-btn--active-tone-red:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-red.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-red[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#d70015!important;border-color:#d70015!important;color:#fff!important} .fi-badge--inactive-tone-red.is-inactive,.fi-badge--inactive-tone-red[aria-disabled="true"]{background:#d70015;color:#fff;opacity:1} .fi-btn--inactive-tone-red:disabled,.fi-btn--inactive-tone-red.is-inactive,.fi-btn--inactive-tone-red[aria-disabled="true"]{background:#d70015!important;border-color:#d70015!important;color:#fff!important;opacity:1} /* Central orange palette for complaint identities. */ .fi-badge--orange{background:#fff;color:#c93400} .fi-btn--tone-orange{background:#fff5e6!important;border-color:#fff5e6!important;color:#c93400!important} .fi-btn--tone-orange:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffe0b3!important;border-color:#ffe0b3!important} .fi-badge--active-tone-orange:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-badge--active-tone-orange.is-active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffe0b3;color:#c93400} .fi-btn--active-tone-orange:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-orange.active:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-btn--active-tone-orange[aria-pressed="true"]:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#ffe0b3!important;border-color:#ffe0b3!important;color:#c93400!important} .fi-badge--inactive-tone-orange.is-inactive,.fi-badge--inactive-tone-orange[aria-disabled="true"]{background:#fff5e6;color:#c93400;opacity:1} .fi-btn--inactive-tone-orange:disabled,.fi-btn--inactive-tone-orange.is-inactive,.fi-btn--inactive-tone-orange[aria-disabled="true"]{background:#fff5e6!important;border-color:#fff5e6!important;color:#c93400!important;opacity:1} /* Modal size contract: all outer widths belong to these four central classes. */ .fi-dialog.fi-dialog--size-compact{width:min(var(--fi-dialog-compact-width,440px),calc(100vw - 32px))} .fi-dialog.fi-dialog--size-standard{width:min(var(--fi-dialog-width,560px),calc(100vw - 32px))} .fi-dialog.fi-dialog--size-wide{width:min(var(--fi-dialog-wide-width,980px),calc(100vw - 32px))} .fi-dialog.fi-dialog--size-work{height:min(900px,calc(100dvh - 32px));width:min(var(--fi-dialog-work-width,1280px),calc(100vw - 32px))} dialog.fi-dialog[data-fi-dialog]{max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px)} dialog.fi-dialog[data-fi-dialog]>.mail-detail-toolbar,dialog.fi-dialog[data-fi-dialog]>.fi-detail-route{flex:none} .fi-dialog-preview-dock{min-height:0;max-height:30dvh;overflow:auto} @media(max-width:600px){ dialog.fi-dialog[data-fi-dialog]{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)} .fi-dialog.fi-dialog--size-work{height:calc(100dvh - 16px)} } /* One content hierarchy inside every modal: shell padding, block gap, field gap. */ :where(.fi-modal-content){display:grid;align-content:start;gap:var(--fi-block-gap,20px);min-width:0} .fi-dialog--shared .fi-modal-content{row-gap:var(--fi-block-gap,20px)} .fi-dialog--shared .fi-modal-content>:where(p,h1,h2,h3,h4,h5,h6,.field,.fi-field,.fi-card,.workspace,.fi-alert,.fi-hint,.fi-help){margin:0;min-width:0} .fi-modal-content :where(.fi-stack,.fi-grid,.fi-form-grid,.fi-detail-grid){gap:var(--fi-block-gap,20px);align-content:start;min-width:0} .fi-modal-content :where(.fi-detail-section,.fi-box){gap:var(--fi-detail-section-gap,8px);align-content:start;min-width:0} .fi-modal-content :where(.fi-detail-section,.fi-box)>:where(p,h1,h2,h3,h4,h5,h6,.field,.fi-field,.fi-alert,.fi-hint,.fi-help){margin:0} .fi-modal-content :where(.field,.fi-field){min-width:0} .fi-modal-content :where(.field,.fi-field)>:where(small,.fi-hint,.fi-help,.fi-error){margin-top:var(--fi-control-label-gap,7px)} .fi-modal-content>form:where(:not(.fi-dialog-body)){display:grid;align-content:start;gap:var(--fi-block-gap,20px);margin:0;padding:0;min-width:0} .fi-dialog--shared .fi-modal-content>.mail-compose{padding:0;gap:var(--fi-block-gap,20px)} .fi-modal-content .mail-compose label{gap:var(--fi-control-label-gap,7px);margin:0} .fi-modal-content :where(.puzzle-modal-categories,.puzzle-modal-results){gap:var(--fi-inline-gap,8px)} .fi-modal-content>:where(.puzzle-modal-categories,.puzzle-modal-search){margin-bottom:0} .fi-dialog--shared .fi-modal-content.fi-chat-dialog-body{display:flex;flex-direction:column} .fi-ui-style-dialog [data-ui-style-fields]{gap:var(--fi-block-gap,20px)} .fi-dialog--shared .fi-modal-content :is(.field,.fi-field){margin:0} .fi-modal-content :where(label:has(>.fi-control)){display:grid;gap:var(--fi-control-label-gap,7px);margin:0;min-width:0} .fi-modal-content :where([data-service-supplier-picker],[data-service-contact-picker]){display:grid;gap:var(--fi-inline-gap,8px);min-width:0} .fi-modal-content .fi-box{padding:var(--fi-section-padding,12px);border-width:var(--fi-box-border-width,1px);border-radius:var(--fi-box-radius,12px)} .fi-modal-content .mail-rule-existing-item{display:flex;flex-wrap:wrap;align-items:center} /* Modal action order follows the DOM; no visual-only CSS order or row reversal. */ .fi-dialog--shared .fi-dialog-footer{justify-content:flex-end;align-items:center;gap:var(--fi-inline-gap,8px)} .fi-dialog--shared .fi-dialog-footer .fi-modal-actions{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:var(--fi-inline-gap,8px);min-width:0} .fi-dialog--shared .fi-dialog-footer [data-ui-footer-unit="destructive"]{margin-inline-end:auto} .fi-dialog--shared .fi-dialog-footer [data-ui-footer-unit]{flex-shrink:0} .fi-dialog--shared .fi-dialog-footer-status{margin:0;flex:1 1 180px;min-width:0} @media(max-width:600px){ .fi-dialog--shared .fi-dialog-footer-status{flex-basis:100%} .fi-dialog--shared .fi-dialog-footer .fi-modal-actions{flex-basis:100%} } /* Shared modal form states; required markers follow the actual control contract. */ .fi-required-mark,[data-ui-required],.reminder-required{display:none!important} .fi-dialog--shared .fi-required-mark[hidden], .fi-dialog--shared .fi-ui-style-field-row .fi-required-mark{display:none!important} .fi-dialog--shared .fi-modal-content .fi-control{max-width:100%;min-width:0} .fi-dialog--shared .fi-error{font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} .fi-dialog--shared .fi-feedback[data-feedback-type="error"]{margin:0;padding:0;border:0;border-radius:0;background:transparent;white-space:pre-wrap;overflow-wrap:anywhere} .fi-dialog--shared .fi-feedback[data-feedback-type="error"]:empty{display:none} /* Modal titles/content use the central text registry; spacing remains structural. */ .fi-dialog--shared .fi-dialog-header :is(h1,h2,h3,h4,h5,h6){margin:0;min-width:0;overflow-wrap:anywhere} .fi-dialog--shared :is(.fi-dialog-header,.fi-detail-section-head) :is(h1,h2,h3,h4,h5,h6):has(>.ti,>.fi-icon){display:flex;align-items:center;gap:var(--fi-inline-gap,8px)} .fi-dialog--shared .fi-dialog-footer-status{font-family:var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-text-small-font-size,11px);line-height:var(--fi-text-small-line-height,1.5)} /* Modal help/empty content shares the central hint and empty-state components. */ .fi-dialog--shared :is(.fi-hint,.fi-help){margin-block:0;min-width:0;overflow-wrap:anywhere} .fi-dialog--shared :is(.fi-hint,.fi-help)[hidden]{display:none!important} .fi-dialog--shared :is(.fi-hint,.fi-help):empty{display:none} .fi-dialog--shared .fi-modal-content .fi-empty-state{min-height:var(--fi-empty-compact-min-height,110px);padding:var(--fi-section-padding,12px);gap:var(--fi-inline-gap,8px)} .fi-dialog--shared .fi-modal-content .fi-empty-state--inline{padding:var(--fi-section-padding,12px)} .fi-chat-messages>.fi-empty-state{flex:1} .fi-dialog--shared .dial-match-empty{gap:var(--fi-inline-gap,8px);padding:var(--fi-inline-gap,8px) var(--fi-section-padding,12px);flex-wrap:wrap} /* Modal navigation uses the same tab/disclosure geometry as the central components. */ .fi-dialog--shared .tabs{max-width:100%;min-width:0;gap:var(--fi-tabs-gap,4px);flex-wrap:wrap} .fi-dialog--shared .tabs>.tab{min-width:0;overflow-wrap:anywhere} .fi-dialog--shared .fi-disclosure{min-width:0;margin:0} .fi-dialog--shared .fi-disclosure>summary{min-width:0;white-space:normal} .fi-dialog--shared .fi-disclosure>:is(.fi-stack,.fi-detail-stack){gap:var(--fi-detail-section-gap,8px)} /* Modal interaction states inherit the central palettes, never local colours. */ .fi-dialog--shared :is(.fi-choice,.fi-disclosure>summary):is(:hover,:active):not(:where(:disabled,[disabled],[aria-disabled="true"],.is-inactive,[aria-disabled="true"] *,[inert] *,.is-inactive *)){background:var(--fi-hover-background,#f3f6f8)!important;border-color:var(--fi-hover-border-color,#d7dee4)!important} .fi-dialog--shared .fi-choice:is(.selected,.active,[aria-selected="true"],[aria-pressed="true"]):not(:where(:disabled,[aria-disabled="true"],.is-inactive,[aria-disabled="true"] *,[inert] *)){background:var(--fi-list-active-background,#eef2f5)!important;border-color:var(--fi-list-active-border-color,#2f3a45)!important} .fi-dialog--shared .fi-control:is(:disabled,[aria-disabled="true"]){background-color:var(--fi-control-disabled-background,#f3f6f8)!important;cursor:not-allowed} .fi-dialog--shared .fi-control:not(:where(:disabled,[readonly],[aria-disabled="true"],[aria-disabled="true"] *,[inert] *)):hover{border-color:var(--fi-hover-border-color,#d7dee4)} .fi-dialog--shared .fi-control:not(:where(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,[inert] *)):focus{border-color:var(--fi-control-focus-border-color,#2f3a45)} .fi-dialog--shared .fi-control[aria-invalid="true"]{border-color:var(--fi-status-error-color,#d70015)!important} .fi-dialog--shared :is(button,a,input,select,textarea,summary,[role="button"],[role="tab"]):is(:disabled,[disabled],[aria-disabled="true"],.is-inactive){transform:none!important;animation:none!important;transition:none!important} .fi-dialog--shared :is([aria-disabled="true"],[inert],.is-inactive) :is(button,a,input,select,textarea,summary,[role="button"],[role="tab"]){cursor:not-allowed!important;transform:none!important;animation:none!important;transition:none!important} .fi-dialog--shared .tab:is(.active,[aria-selected="true"],[aria-pressed="true"]):not(:where(:disabled,[aria-disabled="true"],.is-inactive,[aria-disabled="true"] *,[inert] *)){background:var(--fi-tab-active-background,#fff);color:var(--fi-tab-active-color,#2f3a45)} /* Loading/progress geometry in modal content comes from the shared components. */ .fi-dialog--shared .fi-loading{min-width:0;white-space:normal;overflow-wrap:anywhere} .fi-dialog--shared .fi-loading>span:last-child{min-width:0} .fi-dialog--shared .fi-modal-content .fi-progress:not(.fi-progress--days){max-width:100%;min-width:0} /* Modal collections reuse the table scroll frame and central list spacing. */ .fi-dialog--shared .fi-table-wrap{min-width:0;max-width:100%;overscroll-behavior-x:contain} .fi-dialog--shared .fi-record-list{gap:var(--fi-list-content-gap,10px);align-content:start;min-width:0} .fi-dialog--shared .fi-record-list>.dial-match{margin:0} .fi-dialog--shared .fi-modal-content :is(ul,ol)[data-ui-modal-list]{gap:var(--fi-list-content-gap,10px);margin:0;padding-inline-start:var(--fi-content-padding,20px);min-width:0} .fi-dialog--shared [data-ui-modal-list]>li{margin:0;min-width:0;overflow-wrap:anywhere} /* Central native date/time controls. Keep ISO values and native calendar behaviour. */ input.fi-control:is([type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]){box-sizing:border-box;min-width:0;max-width:100%;padding-block:var(--fi-datepicker-padding-y,0px);line-height:normal;vertical-align:middle;font-variant-numeric:tabular-nums} .fi-datepicker::-webkit-datetime-edit{display:inline-flex;align-items:center;padding:0;min-height:1.5em;vertical-align:middle} .fi-datepicker::-webkit-datetime-edit-fields-wrapper{padding:0} .fi-datepicker::-webkit-date-and-time-value{margin:0;text-align:start;min-height:1.5em;line-height:1.5} .fi-datepicker::-webkit-calendar-picker-indicator{flex:none;align-self:center;width:var(--fi-datepicker-icon-size,18px);height:var(--fi-datepicker-icon-size,18px);margin:0;margin-inline-start:var(--fi-datepicker-icon-gap,8px);padding:0;cursor:pointer} .fi-datepicker:disabled::-webkit-calendar-picker-indicator{cursor:not-allowed} .call-date-filter input.fi-datepicker[type="date"]{width:var(--fi-datepicker-filter-width,160px);flex:0 1 var(--fi-datepicker-filter-width,160px)} .fi-call-master-dates{gap:var(--fi-inline-gap,8px);flex-wrap:wrap} /* Shared calendar surface: native inputs retain values and validation, popup uses UI tokens. */ .fi-date-field{position:relative;display:inline-flex;align-items:center;width:100%;min-width:0;max-width:100%} .fi-date-field>input.fi-datepicker{width:100%;padding-inline-end:calc(var(--fi-icon-button-size,40px) + var(--fi-inline-gap,8px))} .fi-date-field>input::-webkit-calendar-picker-indicator{display:none} .fi-date-field>.fi-calendar-trigger{position:absolute;inset-inline-end:var(--fi-calendar-trigger-inset,4px);top:0;bottom:0;margin-block:auto;transform:none;min-height:0;width:var(--fi-icon-button-size,36px);height:calc(var(--fi-control-height,43px) - var(--fi-calendar-trigger-height-offset,8px));padding:0} .fi-date-field>.fi-calendar-trigger:hover{transform:none} .call-date-filter .fi-date-field{width:var(--fi-datepicker-filter-width,160px);flex:0 1 var(--fi-datepicker-filter-width,160px)} .call-date-filter .fi-date-field>input.fi-datepicker{width:100%} .fi-calendar{position:fixed;inset:auto;margin:0;z-index:2000;box-sizing:border-box;width:min(var(--fi-calendar-width,352px),calc(100vw - 2 * var(--fi-calendar-viewport-margin,8px)));max-height:calc(100dvh - 2 * var(--fi-calendar-viewport-margin,8px));overflow:auto;border:var(--fi-calendar-border-width,1px) solid var(--fi-calendar-border-color,#d7dee4);border-radius:var(--fi-calendar-radius,12px);padding:var(--fi-calendar-padding,12px);background:var(--fi-calendar-background,#fff);color:var(--fi-calendar-color,#2f3a45);box-shadow:var(--fi-calendar-shadow,0 8px 30px rgba(0,0,0,.12));font-family:var(--fi-calendar-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-calendar-font-size,14px);font-weight:var(--fi-calendar-font-weight,400);line-height:var(--fi-calendar-line-height,1.4)} .fi-calendar-header{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-calendar-header-gap,8px)} .fi-calendar-header>strong{font-size:var(--fi-calendar-title-size,14px);font-weight:var(--fi-calendar-title-weight,700);color:var(--fi-calendar-title-color,#2f3a45)} .fi-calendar-period{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:var(--fi-calendar-period-gap,8px);margin-block:var(--fi-calendar-period-margin,8px)} .fi-calendar-grid{display:grid;gap:var(--fi-calendar-gap,4px)} .fi-calendar-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--fi-calendar-gap,4px)} .fi-calendar-row>[role="columnheader"]{text-align:center;color:var(--fi-calendar-weekday-color,#7d8a96);font-size:var(--fi-calendar-weekday-size,11px)} .fi-calendar-day{display:block;width:100%;min-width:0;min-height:var(--fi-calendar-day-size,36px);padding:0;border:var(--fi-calendar-day-border-width,1px) solid transparent;border-radius:var(--fi-calendar-day-radius,10px);background:var(--fi-calendar-day-background,transparent);color:var(--fi-calendar-day-color,#2f3a45);font:inherit;font-size:var(--fi-calendar-day-font-size,14px);font-variant-numeric:tabular-nums;cursor:pointer} .fi-calendar-day:hover:not(:disabled){background:var(--fi-calendar-hover-background,#f3f6f8);border-color:var(--fi-calendar-hover-border-color,#d7dee4);color:var(--fi-calendar-hover-color,#2f3a45)} .fi-calendar-day.is-selected{background:var(--fi-calendar-selected-background,#eef2f5);border-color:var(--fi-calendar-selected-border-color,#2f3a45);color:var(--fi-calendar-selected-color,#2f3a45);font-weight:var(--fi-calendar-selected-weight,700)} .fi-calendar-day[aria-current="date"]{text-decoration:underline;text-underline-offset:var(--fi-calendar-today-offset,3px);text-decoration-thickness:var(--fi-calendar-today-thickness,1px)} .fi-calendar-day.is-outside{color:var(--fi-calendar-outside-color,#7d8a96)} .fi-calendar-day:disabled{opacity:var(--fi-calendar-disabled-opacity,.55);cursor:not-allowed} .fi-calendar-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fi-calendar-footer-gap,8px);margin-top:var(--fi-calendar-footer-margin,12px)} .fi-calendar .fi-error{margin-top:var(--fi-calendar-error-margin,8px)} :is(.field,.fi-field)>.fi-date-field{display:inline-flex;margin:0;min-width:0} /* Chronological day headings stay at the scroll edge until the next day replaces them. */ :is([data-chronological-day],[data-puzzle-day])>.fi-detail-section-head,[data-chronological-header],.mail-date-divider{ position:sticky; top:var(--fi-chronological-sticky-top,0px); z-index:4; align-self:start; /* Keep the background full width in block, grid and column-flex lists. */ inline-size:100%; max-inline-size:100%; justify-self:stretch; } /* Table day dividers remain below their sticky column header. */ :is([data-chronological-day],[data-puzzle-day])>.fi-detail-section-head{ position:sticky; top:var(--fi-chronological-sticky-top,0px); z-index:4; align-self:start; padding-block:var(--fi-detail-group-content-gap,8px); background:var(--fi-box-background,#ffffff); border-bottom:1px solid var(--line); } /* Shared action panels also adapt to their column width in the dashboard. */ .fi-action-center{container-type:inline-size} @container (max-width:900px){ .fi-action-link{grid-template-columns:38px minmax(0,1fr) 54px 16px} .fi-action-link .fi-action-owner{grid-column:2;grid-row:2} } @container (max-width:700px){ .fi-action-item.fi-record-row{grid-template-columns:minmax(0,1fr);padding:0} .fi-action-link{grid-template-columns:34px minmax(0,1fr) 48px;padding:var(--fi-toolbar-padding-y,8px) var(--fi-content-padding,20px)} .fi-action-link .fi-action-owner,.fi-action-link .fi-action-arrow{display:none} .fi-action-title,.fi-action-subtitle{white-space:normal;overflow-wrap:anywhere} .fi-action-quick{justify-content:flex-end;padding:0 var(--fi-content-padding,20px) var(--fi-toolbar-padding-y,8px)} } /* One time editor shared by standalone fields and date/time calendars. */ .fi-timepicker{width:min(var(--fi-timepicker-width,352px),calc(100vw - 16px))} .fi-time-editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fi-timepicker-gap,8px);margin-top:var(--fi-inline-gap,8px)} .fi-time-editor>.fi-field{min-width:0;margin:0} .fi-time-editor input{width:100%;min-width:0;font-variant-numeric:tabular-nums;text-align:center;line-height:calc(var(--fi-control-height,43px) - 2 * var(--fi-control-border-width,1px));padding-block:0} .fi-date-field>input.fi-time-field{width:100%;padding-inline:calc(var(--fi-icon-button-size,40px) + var(--fi-inline-gap,8px));text-align:center} /* One visual day-header standard: the call/mail list is the reference. */ :is([data-chronological-day],[data-puzzle-day])>.fi-detail-section-head,[data-chronological-header],.mail-date-divider{ box-sizing:border-box; min-height:0; margin:0; padding:7px 14px; border-bottom:1px solid #e1e7ec; background:#e3e9ee!important; color:var(--fi-text-p-color,#2f3a45); font-family:var(--fi-text-p-font-family,system-ui,sans-serif); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); line-height:var(--fi-text-small-line-height,1.5); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase; } :is([data-chronological-day],[data-puzzle-day])>.fi-detail-section-head :is(h3,h4,h5),[data-chronological-header] .date-group-label,.mail-date-divider .date-group-label{ margin:0; font-family:inherit!important; font-size:inherit!important; font-weight:inherit!important; line-height:inherit!important; letter-spacing:inherit!important; text-transform:inherit!important; color:inherit!important; display:inline-flex; align-items:center; gap:7px; } :is([data-chronological-day],[data-puzzle-day])>.fi-detail-section-head :is(h3,h4,h5)>.ti{flex:none;color:var(--sub);font-size:var(--fi-detail-heading-icon-size,18px);line-height:1} /* Central select surfaces preserve native form controls and render all options consistently. */ .fi-select-field{position:relative;display:inline-flex;width:100%;min-width:0;max-width:100%;vertical-align:middle} :is(.field,.fi-field)>.fi-select-field{display:inline-flex;margin:0;min-width:0} .fi-select-field>select.fi-select-native{position:absolute!important;inset:0!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0!important;clip-path:inset(50%);pointer-events:none} .fi-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-inline-gap,8px);text-align:start;cursor:pointer;height:var(--fi-control-height,43px);min-width:0;background:var(--fi-button-background,#fff);color:var(--fi-text-p-color,#2f3a45)} .fi-select-trigger>.fi-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-select-trigger>.ti{flex:none;font-size:var(--fi-button-icon-size,16px)} .fi-select-trigger:hover:not(:disabled){border-color:var(--fi-hover-border-color,#d7dee4);background:var(--fi-hover-background,#f3f6f8)} .fi-select-trigger[aria-invalid="true"]{border-color:var(--fi-status-error-color,#d70015)} .fi-select-trigger:disabled{background:var(--fi-control-disabled-background,#f3f6f8);cursor:not-allowed} /* Global compact dropdown for icon toolbars, using the shared select picker. */ [data-detail-actions] :is(.fi-select-field,select:not(.fi-select-native)){ --fi-toolbar-select-height:max(var(--fi-mini-button-size,24px),calc(var(--fi-mini-button-icon-size,14px) + 2 * var(--fi-mini-button-padding,2px) + 2 * var(--fi-mini-button-border-width,0px))); --fi-select-input-height:var(--fi-toolbar-select-height); --fi-select-input-font-size:var(--fi-toolbar-select-font-size,14px); --fi-select-input-color:var(--fi-toolbar-select-color,#2f3a45); --fi-select-input-border-width:0px; --fi-select-input-radius:var(--fi-mini-button-radius,6px); --fi-select-input-padding-y:0px; --fi-select-input-padding-x:var(--fi-mini-button-gap,4px); --fi-select-input-background:transparent; --fi-select-input-hover-background:transparent; --fi-select-input-focus-background:transparent; --fi-select-input-open-background:transparent; --fi-select-input-disabled-background:transparent; --fi-select-input-icon-size:var(--fi-mini-button-icon-size,14px); } [data-detail-actions] .fi-select-field>.fi-select-trigger{box-shadow:none} [data-detail-actions] select:not(.fi-select-native){ box-sizing:border-box;height:var(--fi-toolbar-select-height);min-height:var(--fi-toolbar-select-height); font-size:var(--fi-toolbar-select-font-size,14px);color:var(--fi-toolbar-select-color,#2f3a45); padding-block:0;border:0;background-color:transparent;box-shadow:none; } [data-detail-actions] :is(.fi-select-trigger,select:not(.fi-select-native)):focus-visible{ outline:var(--fi-focus-width,3px) var(--fi-focus-style,solid) var(--fi-focus-color,#2f3a45); outline-offset:var(--fi-focus-offset,2px); } .fi-select-popup{position:fixed;inset:auto;margin:0;z-index:2100;box-sizing:border-box;width:max-content;min-width:min(var(--fi-select-popup-width,280px),calc(100vw - 16px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--fi-section-padding,12px);border:var(--fi-box-border-width,1px) solid var(--line);border-radius:var(--fi-box-radius,12px);background:#fff;color:var(--fi-text-p-color,#2f3a45);box-shadow:var(--shadow);font-family:var(--fi-text-p-font-family,system-ui,sans-serif),sans-serif} .fi-select-popup>[data-select-options]{max-height:var(--fi-select-popup-height,320px);overflow:auto;display:grid;align-content:start;gap:var(--fi-select-popup-gap,4px);margin-top:var(--fi-inline-gap,8px)} .fi-select-option{white-space:normal;overflow-wrap:anywhere;max-width:min(560px,calc(100vw - 42px));font-size:var(--fi-control-font-size,14px);font-weight:var(--fi-text-p-font-weight,400)} .fi-select-option[aria-selected="true"]{background:var(--fi-list-active-background,#eef2f5)!important;border-color:var(--fi-list-active-border-color,#2f3a45)!important} .fi-select-group{padding:var(--fi-inline-gap,8px);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700);color:var(--sub)} .fi-select-popup .fi-error{margin-top:var(--fi-inline-gap,8px)} .fi-select-option>.ti{margin-inline-start:auto;flex:none;font-size:var(--fi-button-icon-size,16px)} .fi-select-option>.ti[hidden]{display:none} /* Shared suggestion lists: source-specific positioning and business handlers stay intact. */ .fi-suggestions{display:grid;align-content:start;min-width:0;max-height:var(--fi-suggestion-height,280px)!important;overflow:auto;gap:var(--fi-suggestion-gap,4px)!important;padding:var(--fi-suggestion-padding,8px)!important;border:var(--fi-box-border-width,1px) solid var(--line)!important;border-radius:var(--fi-box-radius,12px)!important;background:#fff!important;color:var(--fi-text-p-color,#2f3a45)} .fi-suggestions[hidden],.fi-suggestions:empty{display:none!important} .fi-suggestions>.fi-choice{margin:0!important;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere} .fi-suggestions .fi-choice:focus-visible{background:var(--fi-list-active-background,#eef2f5)!important;border-color:var(--fi-list-active-border-color,#2f3a45)!important;outline-offset:calc(-1 * var(--fi-focus-width,3px))!important} .fi-suggestions-popup{position:fixed;inset:auto;margin:0;z-index:2150;box-sizing:border-box;max-width:calc(100vw - 16px);max-height:min(var(--fi-suggestion-height,280px),calc(100dvh - 16px))!important;box-shadow:var(--shadow)} /* One surface for action and context menus; mixed forms keep dialog semantics. */ .fi-action-menu{position:fixed!important;inset:auto;right:auto!important;bottom:auto!important;transform:none!important;box-sizing:border-box;width:min(var(--fi-action-menu-width,320px),calc(100vw - 16px))!important;max-height:calc(100dvh - 16px);overflow:auto;margin:0;padding:var(--fi-action-menu-padding,12px)!important;border:var(--fi-box-border-width,1px) solid var(--line)!important;border-radius:var(--fi-box-radius,12px)!important;background:#fff!important;color:var(--fi-text-p-color,#2f3a45);box-shadow:var(--shadow)!important;z-index:2050} .fi-action-menu[hidden]{display:none!important} .fi-action-menu>.btn,.fi-action-menu>form>.btn,.fi-action-menu .fi-user-menu-item{width:100%;justify-content:flex-start;margin:var(--fi-action-menu-gap,4px) 0} .fi-action-menu form{margin:0} .fi-action-menu>:is(.field,.fi-field){margin-block:var(--fi-inline-gap,8px)} .fi-action-menu--sample{position:static!important;max-width:100%} /* Central file input and drop surface; upload transport stays with the business controller. */ .fi-upload-input{max-width:100%;min-width:0;box-sizing:border-box} .fi-upload-input:not([hidden]){border-style:dashed} .fi-upload-input::file-selector-button{font-family:inherit;font-size:var(--fi-button-font-size,12px);font-weight:var(--fi-button-font-weight,700);padding:var(--fi-button-padding-y,9px) var(--fi-button-padding-x,12px);border:var(--fi-button-border-width,1px) solid var(--line);border-radius:var(--fi-button-radius,10px);background:var(--paper);color:var(--fi-text-p-color,#2f3a45);cursor:pointer;margin-inline-end:var(--fi-inline-gap,8px)} .fi-upload-input:hover:not(:disabled)::file-selector-button{background:var(--fi-hover-background,#f3f6f8);border-color:var(--fi-hover-border-color,#d7dee4)} .fi-upload-zone{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-upload-gap,12px);padding:var(--fi-upload-padding,16px);border:var(--fi-upload-border-width,2px) dashed var(--line);border-radius:var(--fi-box-radius,12px);background:var(--canvas);color:var(--fi-text-p-color,#2f3a45);cursor:pointer;min-width:0} .fi-upload-zone:hover:not([aria-busy="true"]),.fi-upload-zone.is-dragover,.fi-upload-input.is-dragover{border-color:var(--fi-hover-border-color,#d7dee4);background:var(--fi-hover-background,#f3f6f8)} .fi-upload-zone.is-uploading{cursor:progress;opacity:var(--fi-disabled-opacity,.55)} .fi-upload-icon{display:grid;place-items:center;flex:none;width:var(--fi-icon-button-size,40px);height:var(--fi-icon-button-size,40px);font-size:var(--fi-icon-size,18px);color:var(--fi-content-accent-color,#2f3a45)} .fi-upload-copy{display:flex;flex-direction:column;gap:var(--fi-inline-gap,8px);min-width:0;overflow-wrap:anywhere} .fi-upload-copy strong{font-size:var(--fi-text-strong-font-size,14px)} .fi-upload-copy span,.fi-upload-status{font-size:var(--fi-text-small-font-size,11px);color:var(--sub)} .fi-upload-status{margin-inline-start:auto;overflow-wrap:anywhere;white-space:normal} .fi-upload-status.is-error{color:var(--fi-status-error-color,#d70015)} /* Mail group headings reserve space above the scrolling messages, like calls. */ .mail-workspace>.mail-thread-panel[data-mail-day-pinned]{display:flex;flex-direction:column} .mail-thread-panel>#mailListDay{position:static;flex:none} /* Shared UI-system design for mail headings in the list and reserved header. */ .mail-date-divider.fi-mail-group-heading{ border-top:0; box-shadow:var(--fi-mail-group-shadow,none); border-radius:var(--fi-mail-group-radius,0px); background:var(--fi-mail-group-background,#e3e9ee)!important; color:var(--fi-mail-group-color,#2f3a45); font-family:var(--fi-mail-group-font-family,system-ui,sans-serif),sans-serif; font-size:var(--fi-mail-group-font-size,11px); font-weight:var(--fi-mail-group-font-weight,700); line-height:var(--fi-mail-group-line-height,1.5); letter-spacing:var(--fi-mail-group-letter-spacing,0px); text-align:var(--fi-mail-group-text-align,start); text-transform:var(--fi-mail-group-text-transform,uppercase); padding:var(--fi-mail-group-padding-y,7px) var(--fi-mail-group-padding-x,14px); border-bottom:var(--fi-mail-group-border-width,0px) solid var(--fi-mail-group-border-color,#e1e7ec); } .mail-date-divider.fi-mail-group-heading .date-group-label{gap:var(--fi-mail-group-icon-gap,7px)} .mail-date-divider.fi-mail-group-heading .ti{font-size:var(--fi-mail-group-icon-size,18px);color:var(--fi-mail-group-icon-color,#7d8a96);line-height:1;flex:none} .mail-thread-panel>.mail-thread-list{flex:1 1 auto} .mail-thread-panel[data-mail-day-pinned]>.mail-thread-list>.mail-date-divider{position:static} .mail-thread-panel[data-mail-day-pinned]>.mail-thread-list>[data-first-visible-day]{display:none} /* Standard contact channels: filled blue Tabler rosette, no badge surface. */ .fi-contact-way-standard{display:inline-block;flex:none;width:var(--fi-icon-size,18px);height:var(--fi-icon-size,18px);vertical-align:middle;background:var(--fi-list-active-border-color,#2f3a45);mask:url("/asset.php?f=svg-rosette") center/contain no-repeat;-webkit-mask:url("/asset.php?f=svg-rosette") center/contain no-repeat} /* Shared filtered result-page navigation. Buttons use the central action registry. */ .fi-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--fi-pagination-gap,8px);min-width:0;max-width:100%} .fi-pagination-status{white-space:nowrap;text-align:center} .fi-pagination .btn{max-width:100%;white-space:normal} /* Central breadcrumb and return navigation. Interaction colors and focus remain shared. */ .fi-breadcrumbs{min-width:0;max-width:100%;font-size:var(--fi-text-p-font-size,14px);color:var(--sub)} .fi-breadcrumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-breadcrumb-gap,8px);list-style:none;margin:0;padding:0} .fi-breadcrumbs li{display:flex;align-items:baseline;gap:var(--fi-breadcrumb-gap,8px);min-width:0;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere} .fi-breadcrumbs a{color:inherit;font-weight:var(--fi-text-strong-font-weight,700);text-decoration:none;overflow-wrap:anywhere} .fi-breadcrumbs a:hover{text-decoration:underline;color:var(--fi-text-p-color,#2f3a45)} .fi-breadcrumbs [aria-current="page"]{font-weight:var(--fi-text-strong-font-weight,700);color:var(--fi-text-p-color,#2f3a45)} .fi-breadcrumb-separator{color:var(--sub);flex:none} .fi-back-link{max-width:100%;white-space:normal} /* Confirmation bodies share the compact modal shell and central typography/actions. */ .fi-confirmation .fi-dialog-body{display:flex;flex-direction:column;gap:var(--fi-confirmation-message-gap,12px)} .fi-confirmation .fi-dialog-body p{margin:0;overflow-wrap:anywhere} /* Shared filter bars; field/search/tab presentation stays in the central components. */ form.fi-filter-bar{display:flex;align-items:end;flex-wrap:wrap;gap:var(--fi-filter-bar-gap,10px);padding:var(--fi-filter-bar-padding,12px);min-width:0;max-width:100%;box-sizing:border-box} .fi-filter-bar>.search-wrap,.fi-filter-bar>.field,.fi-filter-bar>.fi-field{flex:1 1 180px;min-width:0} .fi-filter-bar>.tabs,.fi-filter-bar>.fi-row,.fi-filter-bar>.fi-filter-chips{flex-basis:100%;min-width:0} .fi-filter-chips{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-inline-gap,8px)} .fi-filter-chip{max-width:100%;height:auto;min-height:var(--fi-tag-height,24px);white-space:normal;overflow-wrap:anywhere;text-decoration:none} .fi-filter-chip:hover{background:var(--fi-hover-background,#f3f6f8)} .fi-filter-bar .mail-admin-rule-filters{display:flex;flex-wrap:wrap;gap:var(--fi-filter-bar-gap,10px);min-width:0;flex:1 1 100%} /* Central table sort controls inherit header typography and shared focus rules. */ .fi-table-sort{display:inline-flex;align-items:center;gap:var(--fi-table-sort-gap,8px);max-width:100%;padding:0;border:0;border-radius:var(--fi-button-radius,10px);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer} .fi-table-sort-icon{flex:none;font-size:var(--fi-table-sort-icon-size,10px);line-height:1;color:var(--fi-table-sort-icon-color,#7d8a96)} th[aria-sort="ascending"] .fi-table-sort-icon,th[aria-sort="descending"] .fi-table-sort-icon{color:var(--fi-table-sort-active-icon-color,#2f3a45)} .fi-table-sort:hover{color:var(--fi-content-accent-color,#4a5560)} /* Shared selection highlight and bulk-action layout. */ .fi-bulk-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-bulk-action-gap,8px);padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px);background:var(--canvas);border-bottom:var(--fi-toolbar-border-width,1px) solid var(--line)} .fi-bulk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fi-bulk-action-gap,8px);margin-inline-start:auto} .fi-table tbody tr.fi-row-selected>td,.fi-row-selected[data-dms-document-drag]{background:var(--fi-hover-background,#f3f6f8)} /* Date ranges share the existing central calendar surface. */ .fi-calendar-day.is-in-range{background:var(--fi-calendar-range-background,#f3f6f8);color:var(--fi-calendar-range-color,#2f3a45)} .fi-calendar-quick{display:flex;flex-wrap:wrap;gap:var(--fi-calendar-quick-gap,8px)} .fi-calendar-quick .btn{flex:1 1 auto;min-width:var(--fi-calendar-quick-min-width,0px)} /* Shared alignment for date and time values, including Safari's native renderer. */ .fi-date-field>input.fi-datepicker{padding-inline:calc(var(--fi-icon-button-size,40px) + var(--fi-datepicker-icon-gap,8px));text-align:center} :is(.fi-datepicker,.fi-time-field)::-webkit-datetime-edit{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:calc(var(--fi-control-height,43px) - 2 * var(--fi-control-border-width,1px));text-align:center} :is(.fi-datepicker,.fi-time-field)::-webkit-datetime-edit-fields-wrapper{display:inline-flex;align-items:center;justify-content:center} :is(.fi-datepicker,.fi-time-field)::-webkit-date-and-time-value{text-align:center;line-height:calc(var(--fi-control-height,43px) - 2 * var(--fi-control-border-width,1px))} /* Shared task-based action groups in detail headers; no separators for empty/hidden groups. */ [data-detail-actions]{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--fi-toolbar-gap,10px)} [data-detail-action-group]{gap:var(--fi-mini-button-gap,4px)} [data-detail-action-group]:not(:has(:is(a,button,select):not([hidden]))){display:none} [data-detail-actions]>[data-detail-action-group]:not([hidden]):has(:is(a,button,select):not([hidden]))~[data-detail-action-group]:not([hidden]):has(:is(a,button,select):not([hidden])){border-inline-start:var(--fi-icon-bar-separator-width,1px) solid var(--fi-icon-bar-separator-color,#d7dee4);padding-inline-start:var(--fi-icon-bar-group-gap,10px)} /* Tabellenaktionen aller Detailansichten: gemeinsame Aktionsgeometrie, rahmenlos. */ :is(.fi-detail-shell,.fi-record-view,.fi-detail-section) table :is(.mail-toolbar-icon,.fi-btn--icon), .fi-order-table :is(.mail-toolbar-icon,.fi-btn--icon){ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--fi-icon-button-size,36px); min-width:var(--fi-icon-button-size,36px); height:var(--fi-icon-button-size,36px); min-height:var(--fi-icon-button-size,36px); padding:0; border:0!important; box-shadow:none; background:transparent; text-decoration:none; vertical-align:middle; } :is(.fi-detail-shell,.fi-record-view,.fi-detail-section) table :is(.fi-row,.fi-detail-footer-actions), .fi-order-table-actions{gap:var(--fi-mini-button-gap,4px)} :is(.fi-detail-shell,.fi-record-view,.fi-detail-section) table td>form{display:inline-flex;margin:0} /* Modal-Iconaktionen teilen dieselbe Geometrie wie Detailtabellen. */ dialog.fi-dialog :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost){ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--fi-icon-button-size,36px); min-width:var(--fi-icon-button-size,36px); height:var(--fi-icon-button-size,36px); min-height:var(--fi-icon-button-size,36px); padding:0; border:0!important; box-shadow:none; background:transparent; text-decoration:none; vertical-align:middle; } dialog.fi-dialog :is(.fi-row,.fi-toolbar-group,.fi-detail-footer-actions,.fi-order-table-actions):has(>:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost)){gap:var(--fi-mini-button-gap,4px)} /* Shared compact upload presentation and explorer table states. */ .fi-upload-zone--compact{padding:var(--fi-toolbar-padding-y,8px) var(--fi-toolbar-padding-x,10px);gap:var(--fi-toolbar-gap,10px)} .fi-upload-zone--compact .fi-upload-icon{display:none} .fi-table tbody tr.is-selected>td{background:var(--fi-list-active-background,#eef2f5)} .fi-table tbody tr.is-dragging>td{opacity:var(--fi-disabled-opacity,.55)} .fi-table tbody tr.is-drop-target>td{background:var(--fi-hover-background,#f3f6f8);border-block-color:var(--fi-list-active-border-color,#2f3a45)} /* Listenaktionen: dieselbe rahmenlose Aktionsgeometrie wie Detail und Modal. */ :is(.fi-record-list,.fi-service-list,.mail-thread-list,.mail-account-list,.dms-document-list,.contact-match-list,.fi-table,[role="list"],ul,ol) :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost):not([data-ui-logo-frame]):not(.fi-btn--mini){ display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--fi-icon-button-size,36px); min-width:var(--fi-icon-button-size,36px); height:var(--fi-icon-button-size,36px); min-height:var(--fi-icon-button-size,36px); padding:0; border:0!important; box-shadow:none; background:transparent; text-decoration:none; vertical-align:middle; } :is(.fi-record-list,.fi-service-list,.mail-thread-list,.mail-account-list,.dms-document-list,.contact-match-list,.fi-table,[role="list"],ul,ol) :is(.fi-row,.fi-toolbar-group,.fi-detail-footer-actions,.mail-thread-quick-actions):has(:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini)){gap:var(--fi-mini-button-gap,4px)} /* Ein gemeinsamer Interaktionsvertrag für Aktionsicons in allen Kontexten. */ :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini):not(:where([data-ui-logo-frame],.fi-table-sort,.fi-table-sort-icon)){ border-radius:var(--fi-mini-button-radius,6px); transform:none!important; } :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini):is(:hover,:focus-visible):not(:where(:disabled,[disabled],[aria-disabled="true"],.is-inactive,[aria-disabled="true"] *,[inert] *,.is-inactive *,[data-ui-logo-frame],.fi-table-sort,.fi-table-sort-icon)){ background:var(--fi-hover-background,#f3f6f8)!important; border-color:transparent!important; box-shadow:none!important; transform:none!important; } :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini):focus-visible:not(:where(:disabled,[disabled],[aria-disabled="true"],.is-inactive,[aria-disabled="true"] *,[inert] *,.is-inactive *,[data-ui-logo-frame],.fi-table-sort,.fi-table-sort-icon)){ outline-width:var(--fi-focus-width,3px)!important; outline-color:var(--fi-focus-color,#2f3a45)!important; outline-offset:var(--fi-focus-offset,3px)!important; } /* Deaktivierte Iconaktionen sind kontextübergreifend neutral und rahmenlos. */ :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini):is(:disabled,[disabled],[aria-disabled="true"],.is-inactive), :is([aria-disabled="true"],[inert],.is-inactive) :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini){ color:var(--sub,#9aa7b3)!important; opacity:var(--fi-disabled-opacity,.55)!important; background:transparent!important; border-color:transparent!important; box-shadow:none!important; outline:none!important; cursor:not-allowed!important; transform:none!important; animation:none!important; transition:none!important; } /* Deaktivierte Gruppen tragen ihre Deckkraft bereits am gemeinsamen Container. */ [role="group"][aria-disabled="true"] :is(button,a)[data-ui-action]:is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini){opacity:1!important} /* Actual available viewport replaces fixed 300px offsets for workspaces. */ @media(min-width:961px){ :is(.fi-call-master-layout,.fi-master-record-layout,.mail-workspace,.dms-workspace--detail)[data-fi-viewport-fit]{height:var(--fi-workspace-height);min-height:0;max-height:none;overflow:hidden;align-items:stretch} :is(.fi-call-master-layout,.fi-master-record-layout,.mail-workspace,.dms-workspace--detail)[data-fi-viewport-fit]>:is(.workspace,.fi-service-list-panel,.fi-service-detail,.mail-sidebar,.mail-thread-panel,.mail-detail,.dms-list-panel,.dms-detail-panel){height:100%;min-height:0;max-height:none} } /* Icon roles own their sizes; compact sort indicators never size other icons. */ .fi-table-sort>.fi-table-sort-icon{font-size:var(--fi-table-sort-icon-size,10px);line-height:1} .fi-page-heading h1>.ti{font-size:var(--fi-page-heading-icon-size,18px)} /* Preview and real actions share a box that includes the configured icon and padding. */ .fi-btn--mini{--fi-mini-action-extent:max(var(--fi-mini-button-size,24px),calc(var(--fi-mini-button-icon-size,14px) + 2 * var(--fi-mini-button-padding,2px) + 2 * var(--fi-mini-button-border-width,0px)));display:inline-grid;place-items:center;flex:none;width:var(--fi-mini-action-extent);min-width:var(--fi-mini-action-extent);height:var(--fi-mini-action-extent);min-height:var(--fi-mini-action-extent);padding:var(--fi-mini-button-padding,2px);border-width:var(--fi-mini-button-border-width,0px);line-height:1} .fi-btn--mini>.ti{font-size:var(--fi-mini-button-icon-size,14px)} /* Component icon ownership: identical dimensions for font icons and SVG icons. */ :is(.btn,.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.tab,.fi-toast-close)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-button-icon-size,16px)} .fi-btn--mini>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-mini-button-icon-size,14px)} .fi-badge>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-badge-icon-size,14px)} .fi-badge--compact>:is(.ti,svg.fi-icon){--fi-owned-icon-size:calc(var(--fi-badge-icon-size,14px) * .8)} .fi-tag>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-tag-icon-size,12px)} .fi-nav-item>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-navigation-icon-size,18px)} .fi-page-heading h1>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-page-heading-icon-size,18px)} .fi-detail-section-head :is(h2,h3,h4,h5,h6)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-detail-heading-icon-size,18px)} .fi-empty-state>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-empty-icon-font-size,18px)} .fi-disclosure>summary>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-disclosure-icon-font-size,18px)} .fi-history-direction>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-history-icon-size,18px)} .fi-table[data-history-kind="anruf"] .fi-history-direction>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-history-call-icon-size,14px)} .fi-toast-icon>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-status-icon-size,16px)} :is(.search-wrap,.fi-search)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-search-icon-size,18px)} .fi-calendar-trigger>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-datepicker-icon-size,18px)} .fi-calendar-trigger[data-ui-action="time_open"]>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-timepicker-icon-size,18px)} :is(.fi-select-trigger,.fi-select-option)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-select-icon-size,16px)} .fi-upload-icon>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-upload-icon-size,18px)} .fi-dialog-symbol>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-dialog-symbol-icon-size,18px)} .fi-table-sort>.fi-table-sort-icon{--fi-owned-icon-size:var(--fi-table-sort-icon-size,10px)} /* The role is local to the icon; nested badges/actions do not inherit its size. */ :is(.btn,.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.tab,.fi-toast-close,.fi-btn--mini,.fi-badge,.fi-tag,.fi-nav-item,.fi-empty-state,.fi-history-direction,.fi-toast-icon,.search-wrap,.fi-search,.fi-calendar-trigger,.fi-select-trigger,.fi-select-option,.fi-upload-icon,.fi-dialog-symbol,.mail-attachment-type-icon,.fi-table-sort)>:is(.ti,svg.fi-icon), .fi-page-heading h1>:is(.ti,svg.fi-icon),.fi-detail-section-head :is(h2,h3,h4,h5,h6)>:is(.ti,svg.fi-icon),.fi-disclosure>summary>:is(.ti,svg.fi-icon){font-size:var(--fi-owned-icon-size,var(--fi-icon-size,18px));line-height:1;flex:none} svg.fi-icon{width:var(--fi-owned-icon-size,var(--fi-icon-size,18px));height:var(--fi-owned-icon-size,var(--fi-icon-size,18px))} .fi-loading>.fi-spinner{--fi-owned-icon-size:var(--fi-loading-size,16px);font-size:var(--fi-owned-icon-size)} i.fi-contact-alarm{--fi-owned-icon-size:var(--fi-contact-alarm-icon-size,16px);font-size:var(--fi-owned-icon-size)} /* Icon colours belong to the component, including its active/disabled tone. */ .fi-page-heading h1>:is(.ti,svg.fi-icon){color:var(--fi-page-heading-icon-color,#2f3a45)} .fi-detail-section-head :is(h2,h3,h4,h5,h6)>:is(.ti,svg.fi-icon){color:var(--fi-detail-heading-icon-color,#2f3a45)} .fi-empty-state>:is(.ti,svg.fi-icon){color:var(--fi-empty-icon-color,#7d8a96)} :is(.search-wrap,.fi-search)>:is(.ti,svg.fi-icon){color:var(--fi-search-icon-color,#7d8a96)} .fi-disclosure>summary::before,.fi-disclosure>summary>:is(.ti,svg.fi-icon){color:var(--fi-disclosure-icon-color,#7d8a96)} .fi-upload-icon>:is(.ti,svg.fi-icon){color:var(--fi-upload-icon-color,#2f3a45)} .fi-dialog-symbol>:is(.ti,svg.fi-icon){color:var(--fi-dialog-symbol-icon-color,#2f3a45)} /* Contact alarms always retain their semantic warning colour, even inside headings/actions. */ i.fi-contact-alarm{color:var(--fi-contact-alarm-color,#d70015)} /* Component-owned icon alignment and text spacing. */ .fi-page-heading h1{align-items:center;gap:var(--fi-page-heading-icon-gap,8px)} .fi-page-heading h1>:is(.ti,svg.fi-icon){align-self:center;margin:0;flex-shrink:0} .fi-detail-section-head :is(h2,h3,h4,h5,h6):has(>.ti,>svg.fi-icon){display:flex;align-items:center;gap:var(--fi-detail-heading-icon-gap,8px)} .fi-detail-section-head :is(h2,h3,h4,h5,h6)>:is(.ti,svg.fi-icon){align-self:center;margin:0;flex-shrink:0} .fi-dialog--shared .fi-detail-section-head :is(h2,h3,h4,h5,h6):has(>.ti,>svg.fi-icon){gap:var(--fi-detail-heading-icon-gap,8px)} .search-wrap>:is(.ti,svg.fi-icon){position:absolute;top:50%;transform:translateY(-50%);margin:0;line-height:1;pointer-events:none} /* Preserve trailing selection indicators rather than pulling them next to the label. */ .fi-select-option>:is(.ti,svg.fi-icon){align-self:center;margin-block:0;margin-inline-start:auto;flex-shrink:0} .fi-hint::before{top:calc((var(--fi-text-small-font-size,11px) * var(--fi-text-small-line-height,1.5) - var(--fi-icon-size,18px)) / 2);transform:none;line-height:1} /* Plain navigation icons use the shared navigation size and color. */ .mail-account.fi-nav-item.fi-nav-item--plain-icon{grid-template-columns:var(--fi-navigation-icon-size,18px) minmax(0,1fr) auto} /* Record names in lists share one color, including visited destinations. */ .fi-list-name-link:any-link{color:var(--fi-text-p-color,var(--ink,#2f3a45));text-decoration:none;font-weight:var(--fi-text-strong-font-weight,700)} .fi-list-name-link:hover{text-decoration:underline} .fi-list-name-link:focus-visible{text-decoration:underline} /* Shared compact variant for inline record previews. */ .fi-file-preview.fi-file-preview--compact{min-height:0;max-height:var(--fi-file-preview-compact-height,200px)} .fi-file-preview--compact iframe{height:var(--fi-file-preview-compact-height,200px)} .fi-file-preview--compact img{max-height:var(--fi-file-preview-compact-height,200px)} /* Empty-state notices always occupy the centre of their own block. */ .fi-empty-state{justify-content:center;align-content:center;align-items:center;text-align:center;--fi-text-small-text-align:center;--fi-text-p-text-align:center;--fi-text-strong-text-align:center} .fi-empty-state>:is(span,p,strong){text-align:center;margin-block:0} :is(.fi-service-list,.fi-record-list,.mail-thread-list):has(>.fi-empty-state:only-child){display:flex;flex-direction:column} :is(.fi-service-list,.fi-record-list,.mail-thread-list)>.fi-empty-state:only-child{flex:1;align-self:stretch} :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-empty-state:only-child{height:100%;min-height:0} :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-detail-body:not([hidden]):has(>.fi-detail-section:only-child>.fi-empty-state:only-child){height:100%;display:flex;flex-direction:column;min-height:0} :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-detail-body>.fi-detail-section:only-child:has(>.fi-empty-state:only-child){display:flex;flex-direction:column;flex:1;min-height:0} :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-detail-body>.fi-detail-section:only-child>.fi-empty-state:only-child{flex:1;min-height:0} @media(max-width:620px){.fi-empty-state.fi-empty-state--inline,.fi-dialog--shared .fi-modal-content .fi-empty-state{min-height:var(--fi-empty-mobile-compact-min-height,90px)}} .fi-table[data-detail-table="records-compact"]{min-width:0} /* Two empty-state roles: compact detail block and full workspace placeholder. */ .fi-empty-state.fi-empty-state--small,.fi-dialog--shared .fi-modal-content .fi-empty-state--small{display:flex;flex-direction:row;justify-content:center;align-items:center;min-height:var(--fi-empty-small-min-height,56px);padding:var(--fi-section-padding,12px);gap:var(--fi-inline-gap,8px);font-size:var(--fi-text-small-font-size,11px)} .fi-empty-state--small>span{max-width:none;font-size:var(--fi-text-small-font-size,11px)} .fi-empty-state.fi-empty-state--page{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--fi-empty-min-height,260px);gap:var(--fi-inline-gap,8px)} /* Spinner and label are centred as a unit inside their own loading block. */ .fi-loading{justify-content:center;text-align:center} :is(.fi-service-list,.fi-record-list,.mail-thread-list,.dms-detail-panel,.mail-detail):has(>.fi-loading:only-child){height:100%} :is(.fi-card-body,.fi-detail-section,.fi-detail-body):has(>.fi-spinner:only-child){display:grid;place-items:center;min-height:var(--fi-loading-block-min-height,110px)} .fi-dialog-footer-status:has(>.fi-loading:only-child){display:flex;align-items:center;justify-content:center} @media(max-width:620px){.fi-empty-state.fi-empty-state--page{min-height:var(--fi-empty-mobile-min-height,180px)}} /* Single-line record information keeps its action reachable beside clipped text. */ .fi-text-ellipsis{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-detail-record-information{display:flex;align-items:center;min-width:0;gap:var(--fi-inline-gap,8px)} .fi-detail-record-information>.fi-text-ellipsis{flex:1;min-width:0} .fi-detail-record-information>form{flex:none;margin:0} /* Legacy detail-block emptiness uses the small role unless explicitly a page placeholder. */ .fi-detail-section .fi-empty-state:not(.fi-empty-state--page),.fi-dialog--shared .fi-detail-section .fi-empty-state:not(.fi-empty-state--page){display:flex;flex-direction:row;align-items:center;justify-content:center;min-height:var(--fi-empty-small-min-height,56px);height:auto;gap:var(--fi-inline-gap,8px);padding:var(--fi-section-padding,12px)} .fi-detail-section .fi-empty-state:not(.fi-empty-state--page)>:is(span,p,strong){font-size:var(--fi-text-small-font-size,11px);max-width:none} /* Only the page role may stretch through an otherwise empty detail workspace. */ :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-detail-body:not([hidden]):has(>.fi-detail-section:only-child>.fi-empty-state:not(.fi-empty-state--page):only-child){height:auto;display:block} :is(.fi-service-detail:not(.fi-call-detail),.fi-call-detail.is-empty,.mail-detail,.dms-detail-panel)>.fi-detail-body>.fi-detail-section:only-child>.fi-empty-state:not(.fi-empty-state--page):only-child{flex:0 0 auto;min-height:var(--fi-empty-small-min-height,56px)} /* Independent small empty-state design settings. */ .fi-detail-section .fi-empty-state:not(.fi-empty-state--page),.fi-empty-state.fi-empty-state--small,.fi-dialog--shared .fi-modal-content .fi-empty-state--small{min-height:var(--fi-empty-small-min-height);gap:var(--fi-empty-small-gap);padding:var(--fi-empty-small-padding);background:var(--fi-empty-small-background);border-radius:var(--fi-empty-small-radius);color:var(--fi-empty-small-text-color);font-size:var(--fi-empty-small-font-size);--fi-text-small-font-size:var(--fi-empty-small-font-size);--fi-text-small-color:var(--fi-empty-small-text-color);text-align:center} :is(.fi-detail-section .fi-empty-state:not(.fi-empty-state--page),.fi-empty-state.fi-empty-state--small,.fi-dialog--shared .fi-modal-content .fi-empty-state--small)>:is(span,p,strong){font-size:var(--fi-empty-small-font-size);color:var(--fi-empty-small-text-color)} :is(.fi-detail-section .fi-empty-state:not(.fi-empty-state--page),.fi-empty-state.fi-empty-state--small,.fi-dialog--shared .fi-modal-content .fi-empty-state--small)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-empty-small-icon-size);font-size:var(--fi-owned-icon-size);color:var(--fi-empty-small-icon-color)} /* Independent page empty-state design settings. */ .fi-empty-state.fi-empty-state--page,.fi-dialog--shared .fi-modal-content .fi-empty-state--page{min-height:var(--fi-empty-page-min-height);gap:var(--fi-empty-page-gap);padding:var(--fi-empty-page-padding);background:var(--fi-empty-page-background);border-radius:var(--fi-empty-page-radius);color:var(--fi-empty-page-text-color);font-size:var(--fi-empty-page-font-size);--fi-text-small-font-size:var(--fi-empty-page-font-size);--fi-text-small-color:var(--fi-empty-page-text-color);text-align:center} :is(.fi-empty-state.fi-empty-state--page,.fi-dialog--shared .fi-modal-content .fi-empty-state--page)>:is(span,p,strong){font-size:var(--fi-empty-page-font-size);color:var(--fi-empty-page-text-color)} :is(.fi-empty-state.fi-empty-state--page,.fi-dialog--shared .fi-modal-content .fi-empty-state--page)>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-empty-page-icon-size);font-size:var(--fi-owned-icon-size);color:var(--fi-empty-page-icon-color)} /* Selected call details must not retain a competing empty-state scroll area. */ .fi-call-detail:not(.is-empty)>.fi-call-detail-empty{display:none} .fi-call-detail>.fi-call-detail-toolbar,.fi-call-detail>.fi-call-detail-head{flex:none} .fi-call-master-layout>.fi-call-detail>.fi-call-detail-body{flex:1 1 0%;min-height:0;overflow:auto;align-content:start;overscroll-behavior:contain} /* Selection visibility wins over workspace geometry; section emptiness is unaffected. */ [data-ui-selection-empty][hidden],.fi-empty-state--page[hidden]{display:none!important} .fi-ui-search-result{white-space:normal;flex-wrap:wrap} .fi-ui-search-preview{display:inline-flex;align-items:center;max-width:220px;overflow:hidden;pointer-events:none;flex:none} .fi-ui-search-preview>.btn,.fi-ui-search-preview>.fi-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Shared folder picker: native disclosures, navigation selection, one modal scroll area. */ .fi-folder-picker{min-width:0} .fi-folder-picker-children{margin-inline-start:var(--fi-list-leading-width,34px)} .fi-folder-picker .fi-nav-item{width:100%;min-width:0;text-align:left;white-space:normal} .fi-folder-picker .fi-nav-item>span{overflow-wrap:anywhere} /* Kontaktpersonen: E-Mail-Adressen einzeilig, Aktionen und Standardmarkierung sichtbar. */ .fi-table[data-detail-table="persons"] tbody td:is(:nth-child(3),:nth-child(4))>.fi-row{flex-wrap:nowrap;min-width:0} .fi-table[data-detail-table="persons"] :is(.fi-person-email-address,.fi-person-phone-number){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-table[data-detail-table="persons"] tbody td:is(:nth-child(3),:nth-child(4))>.fi-row>.fi-text-small{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-table[data-detail-table="persons"] tbody td:is(:nth-child(3),:nth-child(4))>.fi-row>:is(.ti,.fi-icon,.fi-badge){flex:none} /* Kontaktpersonen: Namen und Positionen bleiben innerhalb ihrer Tabellenspalte. */ .fi-table[data-detail-table="persons"] .fi-person-name{display:flex;align-items:center;gap:var(--fi-mini-button-gap,4px);min-width:0;max-width:100%} .fi-table[data-detail-table="persons"] .fi-person-name>.ti{flex:none} .fi-table[data-detail-table="persons"] .fi-person-name>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-table[data-detail-table="persons"] .fi-person-position{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Mail context blocks share the record body's spacing; the workspace owns scrolling. */ /* Der Nachrichtenbereich füllt die Detailansicht bis zum unteren Rand; weitere Blöcke folgen darunter. */ .mail-detail[data-mail-thread]>.fi-detail-body{flex:1 0 auto;overflow:visible;grid-template-rows:minmax(max-content,1fr);grid-auto-rows:max-content} /* Shared collapsible detail blocks keep central headings and native disclosure behavior. */ .fi-disclosure.fi-disclosure--detail{display:block} .fi-disclosure.fi-disclosure--detail>summary{padding:0} .fi-disclosure.fi-disclosure--detail>summary::before{content:none} .fi-disclosure--detail>summary [data-disclosure-toggle]{flex:none;align-self:center;line-height:1;font-size:var(--fi-disclosure-icon-font-size,18px);color:var(--fi-disclosure-icon-color,#7d8a96);transition:transform .15s} .fi-disclosure--detail[open]>summary [data-disclosure-toggle]{transform:rotate(90deg)} @media(prefers-reduced-motion:reduce){.fi-disclosure--detail>summary [data-disclosure-toggle]{transition:none}} .fi-disclosure--detail>summary>[data-detail-block-header]{flex:1;min-width:0} /* Sender identity uses the shared logo appearance inside the existing list leading slot. */ .fi-mail-sender-avatar{position:relative;overflow:hidden} .fi-mail-sender-avatar>.fi-company-logo{opacity:0;position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box} .fi-mail-sender-avatar>[hidden]{display:none!important} .fi-mail-sender-avatar>.fi-company-logo.is-loaded{opacity:1} /* Filled unread envelope uses the same central icon renderer as other mail icons. */ .ti-mail-filled:before{content:"";display:inline-block;width:1em;height:1em;background:currentColor;mask:url('/asset.php?f=svg-mail') center/contain no-repeat;-webkit-mask:url('/asset.php?f=svg-mail') center/contain no-repeat;vertical-align:middle} .mail-thread-identity{align-self:center;display:flex;flex-direction:column;align-items:center;gap:var(--fi-mini-button-gap,4px);width:var(--fi-mail-sender-size,32px)} [data-mail-read-toggle] .ti{color:var(--fi-mail-read-icon-color,#9aa7b3)} .mail-thread.is-unread [data-mail-read-toggle] .ti,[data-mail-read-toggle][data-mail-read-state="unread"] .ti{color:var(--fi-mail-unread-icon-color,#1592e6)} @layer fi-component-overrides{ .mail-thread .mail-thread-quick-actions button[data-ui-action]{background:transparent!important;border-color:transparent!important;box-shadow:none!important} } /* Mail identity size and initials are configured independently in the UI system. */ .mail-thread-main:has(>.mail-thread-identity){grid-template-columns:var(--fi-mail-sender-size,32px) minmax(0,1fr)} .mail-thread-state.fi-mail-sender-avatar{width:var(--fi-mail-sender-size,32px);height:var(--fi-mail-sender-size,32px);border-radius:var(--fi-mail-sender-radius,9px);background:var(--fi-mail-sender-background,#eef2f5)!important;color:var(--fi-mail-sender-color,#7d8a96)!important;flex:none} .fi-mail-sender-avatar>[data-mail-sender-initials]{font-family:var(--fi-mail-sender-font-family,inherit);font-size:var(--fi-mail-sender-font-size,14px);font-weight:var(--fi-mail-sender-font-weight,700);line-height:var(--fi-mail-sender-line-height,1.2);letter-spacing:var(--fi-mail-sender-letter-spacing,0px)} /* List sender frame follows its mailbox color; header avatars share the same size and initials. */ .fi-mail-sender-avatar[data-mail-sender-account-border]{box-sizing:border-box;border:var(--fi-mail-sender-border-width,2px) var(--fi-mail-sender-border-style,solid) var(--mail-sender-account-color,#7d8a96)} /* Shared mailbox counters, including the UI-System preview. */ .fi-badge[data-ui-badge="mail_sidebar_count"]{background:var(--fi-mail-sidebar-count-background,#f3f6f8)!important;color:var(--fi-mail-sidebar-count-color,#7d8a96)!important} /* Modeless composer: existing dialog tokens, independently scrollable window. */ dialog#mailComposerDialog[data-mail-floating-composer]{position:fixed;inset: auto;left:24px;top:80px;margin:0;transform:none;z-index:1100;width:min(860px,calc(100vw - 32px));height:min(760px,calc(100dvh - 96px));max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);min-width:min(420px,calc(100vw - 16px));min-height:min(320px,calc(100dvh - 16px));resize:both;overflow:hidden} dialog#mailComposerDialog[data-mail-floating-composer][open]{display:flex;flex-direction:column;align-items:stretch} #mailComposerDialog[data-mail-floating-composer]>:is(.fi-dialog-header,.fi-dialog-body,.fi-dialog-footer){width:100%;box-sizing:border-box;grid-column:1/-1} #mailComposerDialog [data-mail-composer-drag]>div:first-child{flex:1 1 auto;min-width:0} #mailComposerDialog [data-mail-composer-drag]>.fi-row{flex:0 0 auto;margin-left:auto;flex-wrap:nowrap} #mailComposerDialog [data-mail-compose-title]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #mailComposerDialog [data-mail-composer-drag]{cursor:move;touch-action:none;user-select:none} dialog#mailComposerDialog.is-minimized{left:auto!important;top:auto!important;right:8px!important;bottom:8px!important;width:320px!important;height:auto!important;min-width:0;min-height:0;resize:none} #mailComposerDialog.is-minimized>.fi-dialog-header{padding:var(--fi-inline-gap,8px);cursor:default;touch-action:auto} #mailComposerDialog.is-minimized>.fi-dialog-header>div:first-child{min-width:0;flex:1} #mailComposerDialog.is-minimized .fi-dialog-header h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Minimized window typography takes precedence over important dialog title overrides. */ @layer fi-component-overrides{ #mailComposerDialog.is-minimized .fi-dialog-header h2{font-size:var(--fi-text-p-font-size,14px)!important;line-height:var(--fi-text-p-line-height,1.4)!important} } #mailComposerDialog.is-minimized .section-kicker{font-size:var(--fi-text-small-font-size,11px)} #mailComposerDialog.is-minimized>.fi-dialog-body,#mailComposerDialog.is-minimized>.fi-dialog-footer{display:none!important} @media(max-width:640px){ dialog#mailComposerDialog[data-mail-floating-composer]:not(.is-minimized){left:8px!important;top:8px!important;width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;resize:none} #mailComposerDialog [data-mail-composer-drag]{cursor:default;touch-action:auto} } /* UI-System displays the actual calendar styles inside its existing component preview. */ .fi-calendar--sample{position:static;max-width:100%;max-height:none;margin-inline:auto} /* Date values have their own input settings; time-only fields retain their component. */ input.fi-control.fi-datepicker:not(.fi-time-field){ --fi-control-height:var(--fi-datepicker-input-height,43px); --fi-control-border-width:var(--fi-datepicker-input-border-width,1px); box-sizing:border-box;width:var(--fi-datepicker-input-width,100%);max-width:100%; height:var(--fi-datepicker-input-height,43px);min-height:var(--fi-datepicker-input-height,43px); font-family:var(--fi-datepicker-input-font-family,system-ui,sans-serif),sans-serif; font-size:var(--fi-datepicker-input-font-size,14px);font-weight:var(--fi-datepicker-input-font-weight,400); color:var(--fi-datepicker-input-color,#2f3a45);background:var(--fi-datepicker-input-background,#f3f6f8); border:var(--fi-datepicker-input-border-width,1px) solid var(--fi-datepicker-input-border-color,#d7dee4); border-radius:var(--fi-datepicker-input-radius,10px); padding-block:var(--fi-datepicker-input-padding-y,0px);padding-inline:var(--fi-datepicker-input-padding-x,12px); text-align:var(--fi-datepicker-input-align,start); } /* Links nur der normale Innenabstand, rechts Platz für das Kalender-Icon. */ .fi-date-field>input.fi-control.fi-datepicker:not(.fi-time-field){padding-inline-start:var(--fi-datepicker-input-padding-x,12px);padding-inline-end:calc(var(--fi-icon-button-size,36px) + var(--fi-datepicker-icon-gap,8px))} input.fi-control.fi-datepicker:not(.fi-time-field):hover:not(:disabled){background:var(--fi-datepicker-input-hover-background,#f3f6f8);border-color:var(--fi-datepicker-input-hover-border-color,#d7dee4)} input.fi-control.fi-datepicker:not(.fi-time-field):focus:not(:disabled){background:var(--fi-datepicker-input-focus-background,#fff);border-color:var(--fi-datepicker-input-focus-border-color,#2f3a45)} input.fi-control.fi-datepicker:not(.fi-time-field):disabled{background:var(--fi-datepicker-input-disabled-background,#f3f6f8);color:var(--fi-datepicker-input-disabled-color,#7d8a96);opacity:var(--fi-datepicker-input-disabled-opacity,.55)} input.fi-control.fi-datepicker:not(.fi-time-field)::-webkit-datetime-edit{justify-content:var(--fi-datepicker-input-align,start);text-align:var(--fi-datepicker-input-align,start);min-height:0;height:100%} input.fi-control.fi-datepicker:not(.fi-time-field)::-webkit-datetime-edit-fields-wrapper{justify-content:var(--fi-datepicker-input-align,start)} input.fi-control.fi-datepicker:not(.fi-time-field)::-webkit-date-and-time-value{text-align:var(--fi-datepicker-input-align,start);line-height:calc(var(--fi-datepicker-input-height,43px) - 2 * var(--fi-datepicker-input-border-width,1px) - 2 * var(--fi-datepicker-input-padding-y,0px))} .fi-date-field:has(>input.fi-control.fi-datepicker:not(.fi-time-field)){--fi-control-height:var(--fi-datepicker-input-height,43px)} /* Time inputs and the central hour/minute/second editor own their settings. */ :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"]){ --fi-control-height:var(--fi-timepicker-input-height,43px); --fi-control-border-width:var(--fi-timepicker-input-border-width,1px); box-sizing:border-box;width:var(--fi-timepicker-input-width,100%);max-width:100%; height:var(--fi-timepicker-input-height,43px);min-height:var(--fi-timepicker-input-height,43px); font-family:var(--fi-timepicker-input-font-family,system-ui,sans-serif),sans-serif; font-size:var(--fi-timepicker-input-font-size,14px);font-weight:var(--fi-timepicker-input-font-weight,400); color:var(--fi-timepicker-input-color,#2f3a45);background:var(--fi-timepicker-input-background,#f3f6f8); border:var(--fi-timepicker-input-border-width,1px) solid var(--fi-timepicker-input-border-color,#d7dee4); border-radius:var(--fi-timepicker-input-radius,10px); padding-block:var(--fi-timepicker-input-padding-y,0px);padding-inline:var(--fi-timepicker-input-padding-x,12px); text-align:var(--fi-timepicker-input-align,center); } .fi-date-field>:is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"]){padding-inline:max(var(--fi-timepicker-input-padding-x,12px),calc(var(--fi-icon-button-size,36px) + var(--fi-timepicker-gap,8px)))} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"]):hover:not(:disabled){background:var(--fi-timepicker-input-hover-background,#f3f6f8);border-color:var(--fi-timepicker-input-hover-border-color,#d7dee4)} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"]):focus:not(:disabled){background:var(--fi-timepicker-input-focus-background,#fff);border-color:var(--fi-timepicker-input-focus-border-color,#2f3a45)} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"]):disabled{background:var(--fi-timepicker-input-disabled-background,#f3f6f8);color:var(--fi-timepicker-input-disabled-color,#7d8a96);opacity:var(--fi-timepicker-input-disabled-opacity,.55)} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"])::-webkit-datetime-edit{justify-content:var(--fi-timepicker-input-align,center);text-align:var(--fi-timepicker-input-align,center);min-height:0;height:100%} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"])::-webkit-datetime-edit-fields-wrapper{justify-content:var(--fi-timepicker-input-align,center)} :is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"])::-webkit-date-and-time-value{text-align:var(--fi-timepicker-input-align,center);line-height:calc(var(--fi-timepicker-input-height,43px) - 2 * var(--fi-timepicker-input-border-width,1px) - 2 * var(--fi-timepicker-input-padding-y,0px))} .fi-date-field:has(>:is(input.fi-control.fi-time-field[type="time"],.fi-time-editor input.fi-control[type="number"])){--fi-control-height:var(--fi-timepicker-input-height,43px)} /* The time popup owns its surface rather than inheriting calendar appearance. */ .fi-calendar.fi-timepicker{ width:min(var(--fi-timepicker-width,352px),calc(100vw - 2 * var(--fi-timepicker-viewport-margin,8px))); max-height:calc(100dvh - 2 * var(--fi-timepicker-viewport-margin,8px)); border:var(--fi-timepicker-border-width,1px) solid var(--fi-timepicker-border-color,#d7dee4); border-radius:var(--fi-timepicker-radius,12px);padding:var(--fi-timepicker-padding,12px); background:var(--fi-timepicker-background,#fff);color:var(--fi-timepicker-color,#2f3a45); box-shadow:var(--fi-timepicker-shadow,0 8px 30px rgba(0,0,0,.12)); font-family:var(--fi-timepicker-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-timepicker-font-size,14px); font-weight:var(--fi-timepicker-font-weight,400);line-height:var(--fi-timepicker-line-height,1.4); } .fi-timepicker>strong{font-size:var(--fi-timepicker-title-size,14px);font-weight:var(--fi-timepicker-title-weight,700);color:var(--fi-timepicker-title-color,#2f3a45)} .fi-time-editor{margin-top:var(--fi-timepicker-editor-margin,8px)} .fi-time-editor>.fi-field{gap:var(--fi-timepicker-label-gap,8px)} .fi-time-editor>.fi-field>span{font-size:var(--fi-timepicker-label-size,11px);font-weight:var(--fi-timepicker-label-weight,700);color:var(--fi-timepicker-label-color,#7d8a96)} .fi-timepicker>.fi-calendar-footer{gap:var(--fi-timepicker-footer-gap,8px);margin-top:var(--fi-timepicker-footer-margin,12px);justify-content:var(--fi-timepicker-footer-align,flex-end)} .fi-timepicker>.fi-error{margin-top:var(--fi-timepicker-error-margin,8px)} .fi-calendar.fi-timepicker--sample{position:static;max-width:100%;max-height:none;margin-inline:auto} /* Dropdown popup and options own their design values. */ .fi-select-popup{min-width:min(var(--fi-select-popup-width,280px),calc(100vw - 2 * var(--fi-select-popup-viewport-margin,8px)));max-width:calc(100vw - 2 * var(--fi-select-popup-viewport-margin,8px));max-height:calc(100dvh - 2 * var(--fi-select-popup-viewport-margin,8px));padding:var(--fi-select-popup-padding,12px);border:var(--fi-select-popup-border-width,1px) solid var(--fi-select-popup-border-color,#d7dee4);border-radius:var(--fi-select-popup-radius,12px);background:var(--fi-select-popup-background,#fff);color:var(--fi-select-popup-color,#2f3a45);box-shadow:var(--fi-select-popup-shadow,0 8px 30px rgba(0,0,0,.12));font-family:var(--fi-select-popup-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-select-popup-font-size,14px);font-weight:var(--fi-select-popup-font-weight,400);line-height:var(--fi-select-popup-line-height,1.4)} .fi-select-popup>[data-select-options]{margin-top:var(--fi-select-options-margin,8px)} .fi-select-popup button.fi-choice.fi-select-option{width:100%;max-width:min(var(--fi-select-option-max-width,560px),100%);min-height:var(--fi-select-option-height,40px);padding:var(--fi-select-option-padding-y,8px) var(--fi-select-option-padding-x,12px);gap:var(--fi-select-option-gap,8px);border:var(--fi-select-option-border-width,1px) solid var(--fi-select-option-border-color,#d7dee4);border-radius:var(--fi-select-option-radius,10px);background:var(--fi-select-option-background,#fff);color:var(--fi-select-option-color,#2f3a45);font-size:var(--fi-select-option-font-size,14px);font-weight:var(--fi-select-option-font-weight,400)} .fi-select-popup button.fi-choice.fi-select-option:is(:hover,:focus-visible):not(:disabled){background:var(--fi-select-option-hover-background,#f3f6f8)!important;border-color:var(--fi-select-option-hover-border-color,#d7dee4)!important;color:var(--fi-select-option-hover-color,#2f3a45)} .fi-select-popup button.fi-choice.fi-select-option[aria-selected="true"]:not(:disabled){background:var(--fi-select-option-selected-background,#eef2f5)!important;border-color:var(--fi-select-option-selected-border-color,#2f3a45)!important;color:var(--fi-select-option-selected-color,#2f3a45);font-weight:var(--fi-select-option-selected-weight,400)} .fi-select-popup button.fi-choice.fi-select-option:disabled{background:var(--fi-select-option-disabled-background,#f3f6f8)!important;border-color:var(--fi-select-option-disabled-border-color,#d7dee4)!important;color:var(--fi-select-option-disabled-color,#7d8a96);opacity:var(--fi-select-option-disabled-opacity,.55)} .fi-select-popup .fi-select-option>.ti{--fi-owned-icon-size:var(--fi-select-option-icon-size,16px);font-size:var(--fi-owned-icon-size)} .fi-select-popup .fi-select-group{padding:var(--fi-select-group-padding,8px);font-size:var(--fi-select-group-size,11px);font-weight:var(--fi-select-group-weight,700);color:var(--fi-select-group-color,#7d8a96)} .fi-select-popup .fi-error{margin-top:var(--fi-select-error-margin,8px)} .fi-select-popup--sample{position:static;min-width:0;max-width:100%;max-height:none;width:100%} .fi-select-popup button.fi-choice.fi-select-option:focus-visible:not(:disabled){background:var(--fi-select-option-focus-background,#f3f6f8)!important;border-color:var(--fi-select-option-focus-border-color,#d7dee4)!important;color:var(--fi-select-option-focus-color,#2f3a45)} /* Closed dropdown fields own their settings independently from popup options. */ .fi-select-field>button.fi-control.fi-select-trigger{box-sizing:border-box;max-width:100%;width:var(--fi-select-input-width,100%);height:var(--fi-select-input-height,43px);min-height:var(--fi-select-input-height,43px);font-family:var(--fi-select-input-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-select-input-font-size,14px);font-weight:var(--fi-select-input-font-weight,400);color:var(--fi-select-input-color,#2f3a45);background:var(--fi-select-input-background,#f3f6f8);border:var(--fi-select-input-border-width,1px) solid var(--fi-select-input-border-color,#d7dee4);border-radius:var(--fi-select-input-radius,10px);padding:var(--fi-select-input-padding-y,0px) var(--fi-select-input-padding-x,12px);gap:var(--fi-select-input-icon-gap,8px);text-align:var(--fi-select-input-align,start)} .fi-select-field>.fi-select-trigger>.fi-select-value{flex:1;text-align:var(--fi-select-input-align,start)} .fi-select-field>.fi-select-trigger>.ti{--fi-owned-icon-size:var(--fi-select-input-icon-size,16px);font-size:var(--fi-owned-icon-size);color:var(--fi-select-input-icon-color,#7d8a96)} .fi-select-field>.fi-control.fi-select-trigger:hover:not(:disabled){background:var(--fi-select-input-hover-background,#f3f6f8);border-color:var(--fi-select-input-hover-border-color,#d7dee4)} .fi-select-field>.fi-control.fi-select-trigger:focus:not(:disabled){background:var(--fi-select-input-focus-background,#fff);border-color:var(--fi-select-input-focus-border-color,#2f3a45)} .fi-select-field>.fi-control.fi-select-trigger[aria-expanded="true"]:not(:disabled){background:var(--fi-select-input-open-background,#f3f6f8);border-color:var(--fi-select-input-open-border-color,#2f3a45)} .fi-select-field>.fi-control.fi-select-trigger:disabled{background:var(--fi-select-input-disabled-background,#f3f6f8);color:var(--fi-select-input-disabled-color,#7d8a96);opacity:var(--fi-select-input-disabled-opacity,.55)} .fi-select-field>.fi-control.fi-select-trigger:disabled>.ti{color:inherit} .fi-select-field>.fi-control.fi-select-trigger[aria-invalid="true"]{border-color:var(--fi-status-error-color,#d70015)!important} /* Shared autocomplete/suggestion surfaces and rows own their appearance. */ .fi-suggestions{border:var(--fi-suggestion-popup-border-width,1px) solid var(--fi-suggestion-popup-border-color,#d7dee4)!important;border-radius:var(--fi-suggestion-popup-radius,12px)!important;background:var(--fi-suggestion-popup-background,#fff)!important;color:var(--fi-suggestion-popup-color,#2f3a45);font-family:var(--fi-suggestion-popup-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-suggestion-popup-font-size,14px);font-weight:var(--fi-suggestion-popup-font-weight,400);line-height:var(--fi-suggestion-popup-line-height,1.4)} .fi-suggestions-popup{max-width:calc(100vw - 2 * var(--fi-suggestion-popup-viewport-margin,8px));max-height:min(var(--fi-suggestion-height,280px),calc(100dvh - 2 * var(--fi-suggestion-popup-viewport-margin,8px)))!important;box-shadow:var(--fi-suggestion-popup-shadow,0 8px 30px rgba(0,0,0,.12))} .fi-suggestions button.fi-choice.fi-suggestion{width:100%;max-width:min(var(--fi-suggestion-option-max-width,560px),100%);min-height:var(--fi-suggestion-option-height,40px);padding:var(--fi-suggestion-option-padding-y,8px) var(--fi-suggestion-option-padding-x,12px);gap:var(--fi-suggestion-option-gap,8px);border:var(--fi-suggestion-option-border-width,1px) solid var(--fi-suggestion-option-border-color,#d7dee4);border-radius:var(--fi-suggestion-option-radius,10px);background:var(--fi-suggestion-option-background,#fff);color:var(--fi-suggestion-option-color,#2f3a45);font-size:var(--fi-suggestion-option-font-size,14px);font-weight:var(--fi-suggestion-option-font-weight,400)} .fi-suggestions button.fi-choice.fi-suggestion:hover:not(:disabled){background:var(--fi-suggestion-option-hover-background,#f3f6f8)!important;border-color:var(--fi-suggestion-option-hover-border-color,#d7dee4)!important;color:var(--fi-suggestion-option-hover-color,#2f3a45)} .fi-suggestions button.fi-choice.fi-suggestion:is([aria-selected="true"],.selected,.active):not(:disabled){background:var(--fi-suggestion-option-selected-background,#eef2f5)!important;border-color:var(--fi-suggestion-option-selected-border-color,#2f3a45)!important;color:var(--fi-suggestion-option-selected-color,#2f3a45);font-weight:var(--fi-suggestion-option-selected-weight,400)} .fi-suggestions button.fi-choice.fi-suggestion:focus-visible:not(:disabled){background:var(--fi-suggestion-option-focus-background,#f3f6f8)!important;border-color:var(--fi-suggestion-option-focus-border-color,#d7dee4)!important;color:var(--fi-suggestion-option-focus-color,#2f3a45)} .fi-suggestions button.fi-choice.fi-suggestion:disabled{background:var(--fi-suggestion-option-disabled-background,#f3f6f8)!important;border-color:var(--fi-suggestion-option-disabled-border-color,#d7dee4)!important;color:var(--fi-suggestion-option-disabled-color,#7d8a96);opacity:var(--fi-suggestion-option-disabled-opacity,.55)} .fi-suggestions .fi-suggestion>.ti:not(.fi-contact-alarm){--fi-owned-icon-size:var(--fi-suggestion-option-icon-size,16px);font-size:var(--fi-owned-icon-size)} .fi-suggestions .fi-suggestion :is(small,.muted,.fi-text-small){font-size:var(--fi-suggestion-meta-size,11px);color:var(--fi-suggestion-meta-color,#7d8a96)} .fi-suggestions .fi-error{margin-top:var(--fi-suggestion-error-margin,8px)} .fi-suggestions .fi-suggestion :is(strong,.contact-match-name){color:inherit;font-size:inherit} .fi-ui-icon-picker{grid-column:1 / -1} .fi-ui-icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--fi-inline-gap,8px);max-height:280px;overflow-y:auto} .fi-ui-icon-picker-grid>.btn{justify-content:flex-start;min-width:0;white-space:normal;text-align:left} .fi-ui-icon-picker-grid>.btn>.ti{flex:none;font-size:var(--fi-navigation-icon-size,18px)} .fi-ui-icon-picker-grid>.btn>span{overflow-wrap:anywhere} /* State selection must not be overridden by the generic mail selection color. */ .mail-thread-list .mail-thread.is-assigned-to-me:not(.is-pinned).is-selected{background:var(--fi-mail-list-assigned-selected-background,#f7effc)} .mail-thread-list .mail-thread.is-pinned.is-selected{background:var(--fi-mail-list-pinned-selected-background,#ffeba3)} /* Mail reading layout: compact subject, message cards, then contextual work blocks. */ .mail-detail[data-mail-thread]>.mail-detail-subject{ padding:var(--fi-section-padding,12px); background:var(--fi-box-background,#ffffff); border-bottom:0; } .mail-detail[data-mail-thread] .mail-detail-context{margin:0;min-width:0} .mail-detail[data-mail-thread]>.mail-detail-toolbar{ flex-direction:row;flex-wrap:wrap;align-items:center; } @media(max-width:760px){ .mail-detail[data-mail-thread] .mail-message-thread-head{flex-wrap:wrap} .mail-detail[data-mail-thread] .mail-message-head-actions{width:100%} .mail-detail[data-mail-thread] .mail-assignment-control{width:auto;max-width:100%} } /* Latest message heading and 1px card frame share one central color. */ .mail-detail[data-mail-thread] [data-mail-latest-divider]{border:0;padding-top:var(--fi-detail-group-content-gap,8px);margin-top:var(--fi-section-gap,8px)} .mail-detail[data-mail-thread] [data-mail-latest-divider] h3{ width:100%;margin:0;color:var(--fi-mail-latest-line-color,#2f3a45); font-family:var(--fi-mail-latest-font-family,system-ui),sans-serif; font-size:var(--fi-mail-latest-font-size,16px);font-weight:var(--fi-mail-latest-font-weight,700); line-height:var(--fi-mail-latest-line-height,1.2);letter-spacing:var(--fi-mail-latest-letter-spacing,0px); text-align:var(--fi-mail-latest-text-align,start);text-transform:var(--fi-mail-latest-text-transform,none); } /* Shared month tiles and weekly time columns; colours and dimensions use UI tokens. */ .fi-schedule-scroll{overflow-x:auto;max-width:100%;border:var(--fi-box-border-width,1px) solid var(--line);border-radius:var(--fi-box-radius,12px);background:var(--paper);color:var(--fi-text-p-color,var(--ink));font-family:var(--fi-text-p-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-text-p-font-size,14px);line-height:var(--fi-text-p-line-height,1.5)} .fi-schedule-month{display:grid;grid-template-columns:repeat(7,minmax(var(--fi-schedule-day-min-width,150px),1fr))} .fi-schedule-day,.fi-schedule-heading,.fi-schedule-column{box-sizing:border-box;background:var(--paper);border:0;border-inline-end:var(--fi-box-border-width,1px) solid var(--line);border-block-end:var(--fi-box-border-width,1px) solid var(--line)} .fi-schedule-day{padding:var(--fi-inline-gap,8px);min-width:0} .fi-schedule-month>.fi-schedule-day{min-height:var(--fi-schedule-month-day-height,150px)} .fi-schedule-heading{display:flex;flex-direction:column;gap:var(--fi-mini-button-gap,4px);padding:var(--fi-inline-gap,8px);font-weight:var(--fi-text-strong-font-weight,700);overflow-wrap:anywhere} .fi-schedule-day>.fi-schedule-heading{border:0;background:transparent;padding:0;margin-bottom:var(--fi-inline-gap,8px)} /* Sonn- und Feiertage in hellem Grau aus dem Farbpaar „Grau“. */ .fi-schedule-scroll .is-sunday{background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-schedule-scroll .is-holiday{background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-schedule-scroll .is-outside{color:var(--sub)} .fi-schedule-event{display:flex;flex-direction:column;gap:var(--fi-mini-button-gap,4px);padding:var(--fi-inline-gap,8px);margin-block:var(--fi-schedule-event-spacing,4px);border:var(--fi-box-border-width,1px) solid var(--fi-content-accent-color,#2f3a45);border-radius:var(--fi-box-radius,12px);background:var(--fi-hover-background,#f3f6f8);color:var(--fi-text-p-color,var(--ink));text-decoration:none;overflow-wrap:anywhere;box-sizing:border-box;min-width:0} .fi-schedule-event .fi-badge{align-self:flex-start;max-width:100%} .fi-schedule-week{min-width:calc(7 * var(--fi-schedule-day-min-width,150px) + var(--fi-schedule-axis-width,64px))} .fi-schedule-week-head,.fi-schedule-all-day,.fi-schedule-hours{display:grid;grid-template-columns:var(--fi-schedule-axis-width,64px) repeat(7,minmax(0,1fr))} .fi-schedule-week-head>span,.fi-schedule-all-day>span{padding:var(--fi-inline-gap,8px)} .fi-schedule-axis{display:grid;grid-template-rows:repeat(24,var(--fi-schedule-hour-height,64px));font-size:var(--fi-text-small-font-size,11px);color:var(--sub)} /* Uhrzeiten mittig auf der Stundenlinie; die Linie wird hinter der Beschriftung unterbrochen, 00:00 entfällt. */ .fi-schedule-axis>span{align-self:start;justify-self:center;padding-inline:4px;background:var(--paper);line-height:1.2;text-align:center;transform:translateY(-50%)} .fi-schedule-axis>span:first-child{visibility:hidden} /* Zeitspalte durchgehend mit senkrechter Linie rechts (Kopf, Ganztägig, Stunden). */ :is(.fi-schedule-week-head,.fi-schedule-all-day)>span:first-child,.fi-schedule-axis{border-right:var(--fi-box-border-width,1px) solid var(--line)} /* Ganztägige Termine etwas dunkler von den Uhrzeiten abgegrenzt. */ .fi-schedule-all-day{border-bottom:var(--fi-box-border-width,1px) solid color-mix(in srgb,var(--line) 60%,var(--sub))} .fi-schedule-column{position:relative;height:calc(24 * var(--fi-schedule-hour-height,64px));background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) var(--fi-schedule-hour-height,64px))} .fi-schedule-event--timed{position:absolute;top:calc(var(--schedule-start) / 60 * var(--fi-schedule-hour-height,64px));height:calc(var(--schedule-duration) / 60 * var(--fi-schedule-hour-height,64px));left:calc(100% * var(--schedule-lane) / var(--schedule-lanes));width:calc(100% / var(--schedule-lanes));margin:0;overflow:auto;padding:var(--fi-mini-button-gap,4px);font-size:var(--fi-text-small-font-size,11px)} /* Latest-message symbol, text and frame use the same semantic color. */ .mail-detail[data-mail-thread] [data-mail-latest-divider]{ --fi-text-h3-color:var(--fi-mail-latest-line-color,#2f3a45); --fi-detail-heading-icon-color:var(--fi-mail-latest-line-color,#2f3a45); color:var(--fi-mail-latest-line-color,#2f3a45); } .mail-detail[data-mail-thread] [data-mail-latest-divider] h3, .mail-detail[data-mail-thread] [data-mail-latest-divider] h3>.ti{color:var(--fi-mail-latest-line-color,#2f3a45)} /* Empty calendar space opens the shared create dialog; event links remain above it. */ .fi-schedule-day,.fi-schedule-week-head>.fi-schedule-heading{position:relative} .fi-schedule-create{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer} .fi-schedule-create:focus-visible{outline:var(--fi-box-border-width,1px) solid var(--fi-content-accent-color,#2f3a45);outline-offset:-2px;background:var(--fi-hover-background,#f3f6f8)} .fi-schedule-day>.fi-schedule-heading,.fi-schedule-week-head>.fi-schedule-heading>time{pointer-events:none} /* Feiertage sind reine Anzeige: kein Hovereffekt und kein durchgereichter Anlegen-Hover der Fläche darunter. */ .fi-schedule-holiday.fi-badge{pointer-events:auto;cursor:default} .fi-schedule-day>.fi-schedule-event{position:relative} .fi-schedule-slots{position:absolute;inset:0;display:grid;grid-template-rows:repeat(48,minmax(0,1fr))} .fi-schedule-create--slot{position:relative;inset:auto;min-width:0;min-height:0} .fi-schedule-create--slot:hover{background:var(--fi-hover-background,#f3f6f8)} .fi-schedule-event[draggable="true"]{cursor:grab} .fi-schedule-create.fi-schedule-drop-target{background:var(--fi-hover-background,#f3f6f8);outline:var(--fi-box-border-width,1px) solid var(--fi-content-accent-color,#2f3a45);outline-offset:-2px} .fi-schedule-event-link{display:flex;flex-direction:column;gap:var(--fi-mini-button-gap,4px);color:inherit;text-decoration:none;min-height:0} .fi-schedule-event--timed{overflow:visible} /* Zeittermine mit 1px Abstand zur Trennlinie links und rechts. */ .fi-schedule-event--timed{left:calc(100% * var(--schedule-lane) / var(--schedule-lanes) + 1px);width:calc(100% / var(--schedule-lanes) - 2px);box-sizing:border-box} .fi-schedule-event--timed>.fi-schedule-event-link{height:100%;overflow:hidden;padding-bottom:var(--fi-schedule-resize-height,10px);box-sizing:border-box} /* Ort und Teilnehmer je Zeile unter dem Titel; was nicht in die Kachel passt, wird abgeschnitten. */ .fi-schedule-event--timed .fi-schedule-location{min-width:0;overflow:hidden;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:400;line-height:1.3;white-space:nowrap;text-overflow:ellipsis} .fi-schedule-event--timed .fi-schedule-participants{display:flex;flex-direction:column;min-width:0;color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:400;line-height:1.3} .fi-schedule-event--timed .fi-schedule-participants>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .fi-schedule-resize{position:absolute;bottom:0;left:0;width:100%;height:var(--fi-schedule-resize-height,10px);min-height:0;padding:0;border:0;border-radius:var(--fi-box-radius,12px);background:var(--fi-content-accent-color,#2f3a45);cursor:ns-resize;touch-action:none} /* Calendar controls follow the shared UI controls and tabs in one compact row. */ .fi-schedule-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-block-gap,20px);overflow-x:auto;padding-bottom:var(--fi-section-padding,12px);border-bottom:var(--fi-box-border-width,1px) solid var(--line);margin-bottom:var(--fi-inline-gap,8px)} .fi-schedule-filters{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--fi-inline-gap,8px);margin:0;flex:none} .fi-schedule-filters>label{display:flex;align-items:center;gap:var(--fi-inline-gap,8px);margin:0;white-space:nowrap} .fi-schedule-filters .fi-control{width:auto} .fi-schedule-toolbar>.tabs{flex:none;margin:0} .fi-schedule-period{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-inline-gap,8px);margin-block:var(--fi-block-gap,20px)} .fi-schedule-period>h2{margin:0} .fi-schedule-period>.fi-row{flex-wrap:nowrap;flex:none;margin-left:auto} .fi-schedule-month--weekdays>span{text-align:center;padding:var(--fi-inline-gap,8px);color:var(--sub);font-size:var(--fi-text-small-font-size,11px)} .fi-schedule-month>.fi-schedule-day>.fi-schedule-heading{align-items:flex-end} .fi-schedule-month .fi-schedule-holiday{align-self:stretch} .fi-schedule-month .fi-schedule-event:not(.fi-schedule-event--all-day){border-radius:var(--fi-box-radius,12px);margin-block:var(--fi-schedule-event-spacing,4px)} .fi-schedule-month .fi-schedule-event-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--fi-mini-button-gap,4px);align-items:center} .fi-schedule-month .fi-schedule-event-link>.fi-schedule-title{grid-column:1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fi-schedule-month .fi-schedule-event-link>.fi-schedule-start{grid-column:2;grid-row:1} .fi-schedule-month .fi-schedule-event-link>.fi-badge{grid-column:1 / -1} /* The subject stays below the existing sticky toolbar inside the mail detail pane. */ .mail-detail[data-mail-thread]>.mail-detail-subject{ position:sticky;top:var(--mail-detail-toolbar-height,0px);z-index:19;flex:none; background:var(--fi-box-background,#ffffff); } .mail-detail[data-mail-thread]{scroll-behavior:auto} /* Compact sender identity alongside the sticky subject, with central mini action. */ /* Internal comments are cards in the existing message flow. */ /* Compact semantic response markers precede the list subject. */ .mail-thread-response-icons{display:inline-flex;align-items:center;gap:var(--fi-mini-button-gap,4px);flex:none;color:var(--sub)} .mail-thread-response-icons>.ti{font-size:var(--fi-text-small-font-size,11px);line-height:1} /* Apple-style event roles: filled all-day pills and a leading bar for timed events. */ .fi-schedule-event{--schedule-event-accent:var(--fi-schedule-verl-accent,#2f3a45);--schedule-event-fill:var(--fi-schedule-verl-fill,#eef2f5)} .fi-schedule-event[data-calendar-branch="2"]{--schedule-event-accent:var(--fi-schedule-guetersloh-accent,#2f3a45);--schedule-event-fill:var(--fi-schedule-guetersloh-fill,#c6efd0)} .fi-schedule-event.fi-schedule-event--all-day{display:block;border:0;border-radius:var(--fi-schedule-allday-radius,999px);background:transparent;color:var(--schedule-event-accent);padding:0} .fi-schedule-event.fi-schedule-event--clock{border:0;border-radius:0;background:var(--schedule-event-fill);color:var(--fi-text-p-color,var(--ink))} .fi-schedule-event-link>.fi-badge{display:none} .fi-schedule-event--all-day>.fi-schedule-event-link.fi-badge{display:flex;flex-direction:row;width:100%;background:var(--schedule-event-accent);color:var(--fi-content-inverse-color,#ffffff);gap:var(--fi-schedule-allday-gap,5px)} /* Badge „Ganztägiger Termin“: eigene Werte aus UI-System → Designwerte → Ganztägige Termine. */ .fi-schedule-holiday.fi-badge,.fi-schedule-event-link.fi-badge[data-ui-badge="calendar_all_day"]{min-height:var(--fi-schedule-allday-height,22px);border-radius:var(--fi-schedule-allday-radius,999px);padding:var(--fi-schedule-allday-padding-y,3px) var(--fi-schedule-allday-padding-x,10px);font-size:var(--fi-schedule-allday-font-size,11px);font-weight:var(--fi-schedule-allday-font-weight,600);box-sizing:border-box} .fi-schedule-event-link.fi-badge[data-ui-badge="calendar_all_day"]>.fi-schedule-title{gap:var(--fi-schedule-allday-gap,5px)} /* Feiertage verwenden dieselben Werte wie ganztägige Termine (Farbe und Icon bleiben beim Badge „Feiertag“). */ .fi-schedule-holiday.fi-badge{gap:var(--fi-schedule-allday-gap,5px);line-height:var(--fi-schedule-event-line-height,1.3)} .fi-schedule-holiday.fi-badge>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-schedule-allday-icon-size,14px);font-size:var(--fi-schedule-allday-icon-size,14px)} .fi-schedule-event-link.fi-badge[data-ui-badge="calendar_all_day"] .fi-schedule-type-icon{margin-inline-end:0} /* Dauer-Ziehgriff: volle Greiffläche, sichtbar nur als dünne Linie am unteren Rand. */ .fi-schedule-event--clock>.fi-schedule-resize{border-radius:0;background:linear-gradient(to top,var(--schedule-event-accent) 0,var(--schedule-event-accent) var(--fi-schedule-resize-line-width,2px),transparent var(--fi-schedule-resize-line-width,2px))} .fi-schedule-event--clock>.fi-schedule-event-link{background:transparent;gap:var(--fi-badge-gap,5px);font-size:inherit;font-weight:var(--fi-badge-font-weight,700);line-height:1.3} .fi-schedule-type-icon{display:inline-flex;--fi-icon-size:var(--fi-schedule-type-icon-size,14px);align-items:center;margin-inline-end:var(--fi-mini-button-gap,4px);font-size:var(--fi-schedule-type-icon-size,14px);vertical-align:middle} .fi-schedule-list-event{border-left:var(--fi-schedule-event-bar-width,4px) solid var(--schedule-event-accent);padding-inline-start:var(--fi-inline-gap,8px)} /* Planning uses the shared surface, text and interaction tokens; calendar colors remain semantic. */ .fi-schedule-month--weekdays,.fi-schedule-week-head{background:var(--fi-box-background,#ffffff)} .fi-schedule-month--weekdays>span,.fi-schedule-week-head>span,.fi-schedule-axis>span{color:var(--sub);font-family:var(--fi-text-small-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-text-small-font-size,11px)} .fi-schedule-month--weekdays>span{border-bottom:var(--fi-box-border-width,1px) solid var(--line)} .fi-schedule-week-head>.fi-schedule-heading{align-items:center;justify-content:center;text-align:center;background-color:transparent} .fi-schedule-week-head>.fi-schedule-heading.is-sunday{background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-schedule-week-head>.fi-schedule-heading.is-holiday{background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-schedule-event-link:focus-visible,.fi-schedule-resize:focus-visible{outline:var(--fi-focus-width,3px) solid var(--fi-focus-color,#2f3a45);outline-offset:var(--fi-focus-offset,3px)} /* Heutiger Tag: Tageszahl als runde Fläche im Akzentblau (wie die Icons der Überschriften). */ .fi-schedule-scroll [aria-current="date"]{text-decoration:none} /* Heutiger Tag zusätzlich mit 1px blauem Rahmen; in der Woche durchgehend über Kopf, Ganztägig und Stunden. */ .fi-schedule-month .fi-schedule-day.is-today{box-shadow:inset 0 0 0 1px var(--fi-accent)} .fi-schedule-week-head>.fi-schedule-heading.is-today{box-shadow:inset 1px 0 0 var(--fi-accent),inset -1px 0 0 var(--fi-accent),inset 0 1px 0 var(--fi-accent)} .fi-schedule-all-day>.fi-schedule-day.is-today{box-shadow:inset 1px 0 0 var(--fi-accent),inset -1px 0 0 var(--fi-accent)} /* Wochenansicht: Zeiten außerhalb der Öffnungszeiten in einem helleren Grau als Sonn- und Feiertage. */ .fi-schedule-hours>.fi-schedule-column.is-closed:not(.is-sunday,.is-holiday){background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 30%,#ffffff)} .fi-schedule-hours>.fi-schedule-column.has-opening-hours{--fi-schedule-closed:color-mix(in srgb,var(--fi-pair-grau-surface) 30%,#ffffff);--fi-schedule-open-top:calc(var(--fi-schedule-open-start) / 60 * var(--fi-schedule-hour-height,64px));--fi-schedule-open-bottom:calc(var(--fi-schedule-open-end) / 60 * var(--fi-schedule-hour-height,64px));background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) var(--fi-schedule-hour-height,64px)),linear-gradient(to bottom,var(--fi-schedule-closed) 0,var(--fi-schedule-closed) var(--fi-schedule-open-top),transparent var(--fi-schedule-open-top),transparent var(--fi-schedule-open-bottom),var(--fi-schedule-closed) var(--fi-schedule-open-bottom))} /* Aktuelle Uhrzeit am heutigen Tag: dünne Linie mit Punkt, Uhrzeit in der Zeitspalte (wie Apple Kalender); Farbe über die Tonklasse des Badges „Feiertag“. */ .fi-schedule-column>.fi-schedule-now{position:absolute;inset-inline:0;top:calc(var(--fi-schedule-now-minute,0) / 60 * var(--fi-schedule-hour-height,64px));z-index:1;height:1px;border:0;padding:0;pointer-events:none} .fi-schedule-column>.fi-schedule-now::before{content:"";position:absolute;left:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:inherit} .fi-schedule-axis{position:relative;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) calc(var(--fi-schedule-hour-height,64px) - 1px),var(--line) var(--fi-schedule-hour-height,64px))} .fi-schedule-axis>.fi-schedule-now-label{position:absolute;inset-inline:4px;top:calc(var(--fi-schedule-now-minute,0) / 60 * var(--fi-schedule-hour-height,64px) - .75em);z-index:1;border-radius:999px;font-weight:700;line-height:1.5;text-align:center;pointer-events:none} .fi-schedule-axis>.fi-schedule-now-label[hidden],.fi-schedule-column>.fi-schedule-now[hidden]{display:none} .fi-schedule-hours>.fi-schedule-column.is-today{box-shadow:inset 1px 0 0 var(--fi-accent),inset -1px 0 0 var(--fi-accent),inset 0 -1px 0 var(--fi-accent)} .fi-schedule-scroll [aria-current="date"]>.fi-schedule-day-number{display:inline-grid;place-items:center;min-width:26px;height:26px;padding-inline:4px;border-radius:999px;background:var(--fi-accent);color:#fff} .fi-schedule-period>h2{min-width:0;overflow-wrap:anywhere} /* Calendar legend shares the mailbox navigation, colors and selection geometry. */ .fi-schedule-layout{min-height:0} .fi-schedule-calendar-choice{cursor:pointer} .fi-schedule-calendar-choice>span{min-width:0} .fi-schedule-calendar-choice .fi-checkbox{accent-color:var(--mail-accent)} .fi-schedule-calendar-choice .mail-account-icon{--fi-icon-size:var(--fi-navigation-icon-size,18px)} .fi-schedule-layout .mail-account-list{margin-top:0;padding-top:0;border-top:0} /* Ganztägige Termine, Geburtstage und Feiertage folgen den zentralen Badge-Werten (Größe, Abstände, Icon). */ .fi-schedule-event--all-day .fi-schedule-type-icon{--fi-schedule-type-icon-size:var(--fi-schedule-allday-icon-size,14px);--fi-icon-size:var(--fi-schedule-allday-icon-size,14px);font-size:var(--fi-schedule-allday-icon-size,14px)} .fi-schedule-event--all-day .fi-schedule-type-icon>.ti{font-size:var(--fi-schedule-allday-icon-size,14px)} /* Shared spanning rows preserve one badge across adjacent day columns. */ .fi-schedule-month-week{grid-template-rows:auto repeat(var(--schedule-bar-rows),auto) minmax(var(--fi-section-padding,12px),1fr) auto;min-height:var(--fi-schedule-month-day-height,150px)} .fi-schedule-month-week>.fi-schedule-day{display:grid;grid-template-rows:subgrid;padding:0;min-height:0} .fi-schedule-month-week>.fi-schedule-day>.fi-schedule-heading{grid-row:1;align-items:flex-end;padding:var(--fi-inline-gap,8px);margin:0;position:relative} .fi-schedule-day-events{position:relative;min-width:0;padding:var(--fi-mini-button-gap,4px) var(--fi-inline-gap,8px);pointer-events:none} .fi-schedule-day-events>.fi-schedule-event{pointer-events:auto} .fi-schedule-bar{position:relative;z-index:1;min-width:0;padding-inline:var(--fi-mini-button-gap,4px);align-self:start} /* Ganztägige Termine und Feiertage immer über die volle Spaltenbreite. */ .fi-schedule-bar{justify-self:stretch} /* Fortgesetzte ganztägige Termine: an der Zeilen-/Zeitraumgrenze ohne Rundung und bis an den Rand. */ .fi-schedule-bar--continues-before{padding-inline-start:0} .fi-schedule-bar--continues-after{padding-inline-end:0} .fi-schedule-bar--continues-before>.fi-schedule-event.fi-schedule-event--all-day,.fi-schedule-bar--continues-before>.fi-schedule-event>.fi-schedule-event-link.fi-badge{border-start-start-radius:0;border-end-start-radius:0} .fi-schedule-bar--continues-after>.fi-schedule-event.fi-schedule-event--all-day,.fi-schedule-bar--continues-after>.fi-schedule-event>.fi-schedule-event-link.fi-badge{border-start-end-radius:0;border-end-end-radius:0} .fi-schedule-bar>:is(.fi-schedule-event,.fi-schedule-holiday){display:flex;width:100%;box-sizing:border-box} .fi-schedule-bar>.fi-schedule-event>.fi-schedule-event-link{flex:1 1 auto;min-width:0} .fi-schedule-bar>.fi-schedule-event{margin-block:var(--fi-mini-button-gap,4px)} .fi-schedule-all-day--spanning{grid-auto-rows:auto} .fi-schedule-all-day--spanning>.fi-schedule-day{min-height:var(--fi-navigation-min-height,40px)} .fi-schedule-event--timed-span>.fi-schedule-event-link.fi-badge{background:var(--schedule-event-fill);color:var(--fi-text-p-color,var(--ink))} .fi-schedule-event--clock .fi-schedule-type-icon{--fi-schedule-type-icon-size:calc(var(--fi-badge-icon-size,14px) * .8);margin-inline-end:var(--fi-badge-gap,5px)} .fi-schedule-event--clock .fi-schedule-title{min-width:0;font-size:inherit;font-weight:inherit} /* Calendar badge captions align the symbol and text as separate centered flex items. */ .fi-schedule-event-link>.fi-schedule-title{display:flex;align-items:center;gap:var(--fi-badge-gap,5px);min-width:0;line-height:1.3} .fi-schedule-title>.fi-schedule-type-icon{display:flex;align-items:center;justify-content:center;flex:none;margin:0;line-height:1} .fi-schedule-title>.fi-schedule-type-icon>.ti{display:block;line-height:1} .fi-schedule-caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Zeittermine haben eigene Kalenderwerte; ganztägige Termine nutzen die zentralen Badge-Werte. */ .fi-schedule-event.fi-schedule-event--clock{ min-height:var(--fi-schedule-event-min-height,19.2px); padding:var(--fi-schedule-event-padding-y,3px) var(--fi-schedule-event-padding-x,6.3px); font-weight:var(--fi-schedule-event-font-weight,700); line-height:var(--fi-schedule-event-line-height,1.3); } .fi-schedule-event.fi-schedule-event--clock{font-size:var(--fi-schedule-timed-font-size,9px)} .fi-schedule-event--clock>.fi-schedule-event-link,.fi-schedule-event--clock .fi-schedule-event-link>.fi-schedule-title{gap:var(--fi-schedule-event-gap,5px);font-weight:var(--fi-schedule-event-font-weight,700);line-height:var(--fi-schedule-event-line-height,1.3)} .fi-schedule-event--clock .fi-schedule-type-icon{--fi-icon-size:var(--fi-schedule-event-icon-size,11.2px);font-size:var(--fi-schedule-event-icon-size,11.2px)} .fi-schedule-event--clock .fi-schedule-type-icon>.ti{font-size:var(--fi-schedule-event-icon-size,11.2px)} .fi-schedule-month .fi-schedule-event,.fi-schedule-bar>:is(.fi-schedule-event,.fi-schedule-holiday){margin-block:var(--fi-schedule-event-spacing,4px)} /* Delay only the feedback, never the underlying request or rendered content. */ html[data-ui-loading-delay] .fi-loading[data-ui-loading-pending]{visibility:hidden} .fi-loading-host{position:relative} .fi-block-loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;background:var(--fi-box-background,#fff)} /* Navigation and block loading feedback share their own configurable appearance. */ :is(.fi-loading-overlay,.fi-block-loading)>.fi-loading,.fi-loading[data-ui-delayed-loading]{--fi-loading-size:var(--fi-loading-indicator-icon-size,16px);--fi-loading-color:var(--fi-loading-indicator-icon-color,#2f3a45);--fi-loading-stroke:var(--fi-loading-indicator-icon-stroke,2px);--fi-loading-duration:var(--fi-loading-indicator-icon-duration,900ms);font-family:var(--fi-loading-indicator-font-family,system-ui,sans-serif),sans-serif;font-size:var(--fi-loading-indicator-font-size,14px);font-weight:var(--fi-loading-indicator-font-weight,400);color:var(--fi-loading-indicator-color,#2f3a45);gap:var(--fi-loading-indicator-gap,8px);flex-direction:var(--fi-loading-indicator-direction,row)} .fi-block-loading{background:var(--fi-loading-indicator-block-background,#fff)} .fi-loading-indicator-sample{display:grid;gap:var(--fi-section-gap,12px)} .fi-loading-indicator-sample>:is(.fi-loading-overlay,.fi-block-loading){position:static;min-height:110px} .fi-loading-indicator-sample .fi-loading[data-ui-loading-pending]{visibility:visible} .fi-ui-live-preview .fi-loading[data-ui-loading-pending]{visibility:visible} /* Legacy standalone spinner roles share the same delay and spinner settings. */ html[data-ui-loading-delay] .fi-spinner[data-ui-loading-pending]{visibility:hidden} .fi-spinner[data-ui-delayed-loading]{width:var(--fi-loading-indicator-icon-size,16px);height:var(--fi-loading-indicator-icon-size,16px);border-width:var(--fi-loading-indicator-icon-stroke,2px);color:var(--fi-loading-indicator-icon-color,#2f3a45);animation-duration:var(--fi-loading-indicator-icon-duration,900ms)} /* Prepare navigation feedback synchronously; the browser owns the visual delay. */ @keyframes fi-loading-reveal{to{visibility:visible}} :is(.fi-loading-overlay,.fi-block-loading)[data-ui-loading-wait]{visibility:hidden;animation:fi-loading-reveal 0s linear var(--fi-loading-wait,400ms) forwards} @media print{.fi-loading-overlay{display:none!important}} /* Full-screen loading presentation, independently configurable from inline loaders. */ .fi-loading-overlay{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:var(--fi-loading-overlay-padding,32px);box-sizing:border-box;border:0;overflow:hidden;isolation:isolate;background:transparent;pointer-events:none;color:var(--fi-loading-overlay-color,#fff)} .fi-loading-overlay::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fi-loading-overlay-background,#2f3a45);opacity:calc(1 - var(--fi-loading-overlay-transparency,.7))} .fi-loading-overlay::backdrop{background:transparent;pointer-events:none} .fi-loading-overlay>.fi-loading{--fi-loading-size:var(--fi-loading-overlay-icon-size,64px);--fi-loading-color:var(--fi-loading-overlay-icon-color,#fff);--fi-loading-stroke:var(--fi-loading-overlay-icon-stroke,5px);background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;max-width:100%;white-space:normal;text-align:center;justify-content:center;flex-direction:column;gap:var(--fi-loading-overlay-gap,24px);font-size:var(--fi-loading-overlay-font-size,36px);font-weight:var(--fi-loading-overlay-font-weight,600);color:var(--fi-loading-overlay-color,#fff);text-shadow:0 0 var(--fi-loading-overlay-glow-blur,60px) var(--fi-loading-overlay-glow-color,#fff)} .fi-loading-overlay>.fi-loading>.fi-spinner{filter:drop-shadow(0 0 var(--fi-loading-overlay-glow-blur,60px) var(--fi-loading-overlay-glow-color,#fff));flex-shrink:0} .fi-loading-indicator-sample>.fi-loading-overlay{position:relative;width:auto;height:auto;min-height:280px} /* Search activity stays inside the owning field, above modal top layers. */ .fi-search-loading{position:fixed;z-index:2300;display:grid;place-items:center;width:var(--fi-search-loading-size,16px);height:var(--fi-search-loading-size,16px);transform:translate(calc(-100% - var(--fi-search-loading-inset,12px)),-50%);inset:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;--fi-loading-size:var(--fi-search-loading-size,16px);--fi-loading-color:var(--fi-search-loading-color,#2f3a45);--fi-loading-duration:var(--fi-loading-indicator-icon-duration,900ms);--fi-loading-stroke:2px} .fi-search-loading[hidden]{display:none!important} input[data-ui-search-loading]{padding-inline-end:calc(var(--fi-search-loading-size,16px) + 2 * var(--fi-search-loading-inset,12px))!important} [data-ui-search-results] .fi-loading{display:none} @media print{.fi-search-loading{display:none!important}} .fi-search-loading-sample{position:relative;display:block} .fi-search-loading-sample>.fi-search-loading{position:absolute;left:100%;top:50%} /* Vollflächiges, kompaktes Layout: Bereiche grenzen direkt aneinander, getrennt durch 1px-Linien. */ .fi-main :has(>.workspace){gap:var(--fi-workspace-gap,8px);row-gap:var(--fi-workspace-gap,8px);column-gap:var(--fi-workspace-gap,8px)} .fi-main :has(>.workspace)>.workspace{margin:0} .fi-shell--management>.fi-main{min-height:calc(100dvh - 48px)} /* Zusätzliche Trennlinien: Toolbars/Filterleisten, Bereichsüberschriften und Dialoge. */ :is(.fi-toolbar,.mail-detail-toolbar,.workspace-toolbar,.mail-thread-toolbar,.contacts-list-tools,.dms-filterbar,.mail-admin-filterbar,.mail-admin-table-head,.list-meta,.workspace>form.fi-filter-bar){border-bottom:var(--fi-toolbar-border-width,1px) solid var(--line)} :is(.workspace-toolbar,.mail-thread-toolbar)+:is(.list-meta,form.fi-filter-bar,.fi-toolbar){border-top:0} /* Detailblöcke: über jedem Blocktitel sitzt eine Trennlinie (Blockanfang), nicht darunter; eigene Stärke unabhängig vom Boxrahmen. */ .fi-detail-section:has(>.fi-detail-section-head,>summary){border-top:var(--fi-detail-divider-width,1px) solid var(--line)} .fi-card-header{border-bottom:1px solid var(--line)} .fi-disclosure:not(.fi-disclosure--row)[open]>summary{border-bottom:1px solid var(--line)} .fi-disclosure.fi-disclosure--detail[open]>summary{border-bottom:0} :is(.fi-dialog,dialog.fi-dialog[data-fi-dialog]) .fi-dialog-header{border-bottom:1px solid var(--line)} :is(.fi-dialog,dialog.fi-dialog[data-fi-dialog]) .fi-dialog-footer{border-top:1px solid var(--line)} /* App-Rahmen: Hauptnavigation als Seitenleiste links, Kopfzeile und Inhalt rechts. */ .fi-app{display:grid;grid-template-columns:var(--fi-app-sidebar-width,232px) minmax(0,1fr);min-height:100dvh} .fi-app-sidebar{position:sticky;top:0;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;border-right:0;background:var(--canvas);scrollbar-width:thin} .fi-app-brand{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 6px;color:var(--ink);text-decoration:none;font-size:var(--fi-text-small-font-size,11px);font-weight:700;letter-spacing:.12em} .fi-app-brand-mark{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;letter-spacing:0} .fi-app-nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;overflow:visible} .fi-app-nav .fi-nav-item{width:100%;justify-content:flex-start} .fi-app-nav .fi-nav-item[aria-current="page"],.fi-app-nav .fi-nav-item.active{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)} .fi-app-content{display:flex;flex-direction:column;min-width:0} .fi-app-content>.fi-shell{flex:1 1 auto} @media(max-width:1280px){ .fi-app{--fi-app-sidebar-width:64px} .fi-app-brand{justify-content:center;padding:0} .fi-app-brand-name{display:none} .fi-app-nav .fi-nav-item{justify-content:center;padding-inline:0} .fi-app-nav .fi-nav-item>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} } @media(max-width:760px){ .fi-app{display:block} .fi-app-sidebar{position:static;height:auto;flex-direction:row;align-items:center;padding:6px 8px;border-right:0;border-bottom:1px solid var(--line)} .fi-app-nav{flex-direction:row;overflow-x:auto} .fi-app-nav .fi-nav-item{width:auto;flex:none} .fi-app-header{position:static} .fi-management-sidebar{top:0} } /* Pillenformen: mehrzeilige Eingaben behalten eine moderate Rundung. */ textarea,textarea.fi-control,.fi-control:is(textarea,[contenteditable]){border-radius:var(--fi-box-radius,12px)!important} .fi-btn--icon{border-radius:999px} /* Tabellen wie Vorlage: gerahmter Tabellenblock, dunkle Kopfzeile ohne Großbuchstaben, ruhige Zeilen mit Trennlinie. */ .fi-table-wrap{border:1px solid var(--line);border-radius:var(--fi-box-radius,12px);background:var(--paper)} .workspace>.fi-table-wrap,.workspace>form>.fi-table-wrap{margin:12px} .fi-table-wrap>.fi-table tbody tr:last-child>:is(td,th){border-bottom:0} .fi-table[data-detail-table]{--fi-detail-cell-font-weight:500} .fi-table[data-detail-table] td{font-weight:var(--fi-detail-cell-font-weight)} /* Buttons wie Vorlage: Pille, weiß mit feiner Kontur bzw. schwarz für Primäraktionen, ohne Bewegung; Kopfzeilen-Icons ohne Rahmen. */ .btn:where(:not(.fi-btn--mini,.fi-step-number)){min-height:var(--fi-button-min-height,32px);box-shadow:none} /* Felder wie Vorlage: weiße Pillen mit feiner Kontur, kompakte Höhe, dezenter Fokusring; Suchfelder mit führender Lupe. */ .fi-control:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):focus,.search-wrap input:focus{box-shadow:0 0 0 3px rgba(0,0,0,.06)} .fi-control::placeholder{color:#9aa7b3} /* Seiten bis zum unteren Fensterrand: Hauptbereich füllt die Höhe, der letzte Inhaltsblock wächst mit. */ .fi-app-content>.fi-shell:not(.fi-shell--management){display:flex;flex-direction:column} .fi-main{display:flex;flex-direction:column;flex:1 1 auto} .fi-main>:nth-last-child(1 of :not(script,style,template,dialog,link)){flex:1 0 auto} /* Badges wie Vorlage: weiße Pille mit feiner Kontur; Status nur über Text-/Iconfarbe, feste Identitätsfarben bleiben vollflächig. */ .fi-badge--dark,.fi-badge--red{border-color:transparent} /* Tabs wie Vorlage: Segmentleiste mit feiner Kontur, aktiver Eintrag als weiße Pille; inaktive Einträge ohne Rahmen. */ .tabs>.tab:not(.active):hover:where(:not(:disabled,[aria-disabled="true"],.is-inactive)){background:transparent;border-color:transparent;color:var(--ink)} /* Seitennavigation wie Vorlage: runde Pfeil- und Seitenzahl-Buttons mit feiner Kontur, aktuelle Seite schwarz. */ .fi-pagination-pages{display:inline-flex;align-items:center;gap:var(--fi-pagination-gap,8px);flex-wrap:wrap} .fi-pagination .fi-pagination-step,.fi-pagination .fi-pagination-page{width:var(--fi-icon-button-size,32px);height:var(--fi-icon-button-size,32px);min-width:var(--fi-icon-button-size,32px);min-height:var(--fi-icon-button-size,32px);padding:0;border:1px solid var(--line)!important;border-radius:999px;background:var(--paper)!important;color:var(--ink)!important;font-size:var(--fi-text-small-font-size,11px);font-weight:600;font-variant-numeric:tabular-nums;text-decoration:none} .fi-pagination .fi-pagination-page.is-current{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;cursor:default} .fi-pagination-gap{min-width:16px;color:var(--sub);text-align:center} .fi-pagination .fi-pagination-step:is(:disabled,[aria-disabled="true"]){color:var(--sub)!important;opacity:var(--fi-disabled-opacity,.55);cursor:not-allowed} /* Kontrollfelder wie Vorlage: weißes, leicht gerundetes Quadrat mit feiner Kontur; ausgewählt schwarz mit weißem Haken. */ :is(input.fi-checkbox,input[type="checkbox"]):not(.fi-switch>input){appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;box-sizing:border-box;width:var(--fi-checkbox-size,16px);height:var(--fi-checkbox-size,16px);min-width:var(--fi-checkbox-size,16px);min-height:var(--fi-checkbox-size,16px);margin:0;padding:0;flex:none;border:1px solid #d7dee4;border-radius:5px;background:var(--paper) center/12px 12px no-repeat;vertical-align:middle;cursor:pointer;transition:background-color .12s,border-color .12s} :is(input.fi-radio,input[type="radio"]):not(.fi-switch>input){appearance:none;-webkit-appearance:none;box-sizing:border-box;width:var(--fi-checkbox-size,16px);height:var(--fi-checkbox-size,16px);min-width:var(--fi-checkbox-size,16px);min-height:var(--fi-checkbox-size,16px);margin:0;padding:0;flex:none;border:1px solid #d7dee4;border-radius:999px;background:var(--paper);vertical-align:middle;cursor:pointer;transition:background-color .12s,border-color .12s,box-shadow .12s} :is(input.fi-checkbox,input[type="checkbox"]):not(.fi-switch>input):hover:not(:disabled){border-color:#aeaeb2} :is(input.fi-checkbox,input[type="checkbox"]):not(.fi-switch>input):checked{border-color:var(--fi-checkbox-accent,#2f3a45);background-color:var(--fi-checkbox-accent,#2f3a45);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")} :is(input.fi-checkbox,input[type="checkbox"]):not(.fi-switch>input):indeterminate{border-color:var(--fi-checkbox-accent,#2f3a45);background-color:var(--fi-checkbox-accent,#2f3a45);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")} :is(input.fi-radio,input[type="radio"]):not(.fi-switch>input):checked{border-color:var(--fi-checkbox-accent,#2f3a45);background:var(--fi-checkbox-accent,#2f3a45);box-shadow:inset 0 0 0 4px var(--paper)} :is(input.fi-checkbox,input[type="checkbox"],input.fi-radio,input[type="radio"]):not(.fi-switch>input):focus-visible{outline:var(--fi-focus-width,2px) solid var(--fi-focus-color,#2f3a45);outline-offset:2px} :is(input.fi-checkbox,input[type="checkbox"],input.fi-radio,input[type="radio"]):not(.fi-switch>input):disabled{cursor:not-allowed;opacity:var(--fi-disabled-opacity,.55)} /* Dialoge wie Vorlage: weiße Fläche mit feiner Kontur, kompakter Kopf mit runder Schließen-Aktion, weißer Fußbereich mit Trennlinie. */ :is(.fi-dialog,dialog.fi-dialog[data-fi-dialog]) .fi-dialog-header [data-ui-action="close"],:is(.fi-dialog,dialog.fi-dialog[data-fi-dialog]) .fi-dialog-header .fi-btn--icon{border-radius:999px} /* Live-Suche (Kontakte/Lieferanten): Treffer schweben als Liste unter dem Suchfeld und verschieben keinen Inhalt. */ [data-ui-master-picker]{position:relative} [data-ui-master-picker]>[data-master-results]{position:absolute;z-index:40;top:100%;left:0;right:0;display:grid;align-content:start;gap:2px;max-height:min(320px,60vh);overflow:auto;margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:var(--fi-suggestion-popup-radius,12px);background:var(--paper);box-shadow:var(--fi-shadow-float)} [data-ui-master-picker]>[data-master-results][hidden]{display:none} [data-ui-master-picker]>[data-master-results]>.fi-choice{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:36px;margin:0;padding:8px 12px;border:0!important;border-radius:8px;background:transparent!important;text-align:left;font-weight:500} [data-ui-master-picker]>[data-master-results]>.fi-choice:is(:hover,:focus-visible){background:var(--fi-hover-background,#f3f6f8)!important} /* Listen wie Vorlage: ruhige Zeilen mit Trennlinie, Titel 13px/600, Zusatzinfos 12px grau; Auswahl nur als graue Fläche ohne Markierungsbalken. */ .mail-thread.is-active,.mail-thread.is-live,.mail-thread.is-selected{border-left-color:transparent!important;box-shadow:none!important} .fi-record-row:hover:where(:not(.is-active,:disabled,[aria-disabled="true"],.is-inactive)),.mail-thread:hover:where(:not(.is-active,.is-live,.is-selected,.is-pinned,.is-assigned-to-me)){background:var(--fi-list-hover-background,#fafafa)} /* Kalender wie Vorlage: Datepicker mit runden Tagen, ausgewählter Tag schwarz; Terminplanung mit lesbaren, ruhigen Terminpillen. */ .fi-calendar-day[aria-current="date"]:not(.is-selected){box-shadow:inset 0 0 0 1px var(--line)} /* UI-System wie Vorlage: Abschnittskopf mit Titel, zentrierten Bereichs-Tabs und Primäraktion; Bausteingruppen als gerahmtes Kartenraster. */ .fi-page-heading.fi-ui-section-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--fi-inline-gap,8px) var(--fi-block-gap,20px)} .fi-ui-section-head>.tabs{justify-self:center} .fi-ui-section-head>.tabs>.tab{display:inline-flex;align-items:center;gap:6px;text-decoration:none} .fi-ui-section-head>.fi-row{justify-self:end;margin:0} .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fi-section-gap,16px);padding:var(--fi-content-padding,20px);align-items:start} .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid)>.workspace{border-radius:var(--fi-box-radius,12px)} .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid)>.workspace>.fi-card-header{padding:14px 16px;border-bottom:0} .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid)>.workspace>.fi-card-header h2{font-size:13px;font-weight:600} .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid)>.workspace>.fi-card-body{padding:0 16px 16px} @media(max-width:1279px){ .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid){grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:1100px){ .fi-page-heading.fi-ui-section-head{grid-template-columns:minmax(0,1fr) auto} .fi-ui-section-head>.tabs{grid-column:1/-1;grid-row:2;justify-self:start} .fi-ui-section-head>.fi-row{grid-row:1;grid-column:2} } @media(max-width:820px){ .fi-main :is(.fi-ui-style-groups,.fi-ui-system-grid){grid-template-columns:1fr;padding:var(--fi-section-padding,12px)} } /* Icon-Buttons global einheitlich: runder Kreis mit feiner Kontur – in Kopfzeile, Toolbars, Listen, Tabellen und Dialogen. Deaktivierte Aktionen bleiben ohne Kontur. */ :is(.fi-btn--icon,.mail-toolbar-icon,.fi-action-icon--ghost,.fi-btn--mini):not(.fi-tag-remove,.fi-table-sort,[data-ui-logo-frame],.fi-step-number,.fi-header-weather-toggle):not(:has(>span:not(.fi-sr-only,.fi-badge))){border-radius:999px!important} :is(.fi-action-icon--ghost,.fi-btn--mini,.fi-btn--icon.fi-btn--tone-neutral):not(.fi-tag-remove,.fi-table-sort,[data-ui-logo-frame],.fi-step-number,.fi-header-weather-toggle,.fi-pagination-page,[data-detail-actions] *,.fi-icon-plain):not(:has(>span:not(.fi-sr-only,.fi-badge))):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *,[aria-disabled="true"] *){border:1px solid var(--line)!important;box-shadow:none!important;transform:none!important} :is(.fi-action-icon--ghost,.fi-btn--mini,.fi-btn--icon.fi-btn--tone-neutral):not(.fi-tag-remove,.fi-table-sort,[data-ui-logo-frame],.fi-step-number,.fi-header-weather-toggle,.fi-pagination-page,[data-detail-actions] *,.fi-icon-plain):not(:has(>span:not(.fi-sr-only,.fi-badge))):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *,[aria-disabled="true"] *):not(.active,.is-active,[aria-pressed="true"]){background:var(--paper)!important} :is(.fi-action-icon--ghost,.fi-btn--mini,.fi-btn--icon.fi-btn--tone-neutral):not(.fi-tag-remove,.fi-table-sort,[data-ui-logo-frame],.fi-step-number,.fi-header-weather-toggle,.fi-pagination-page,[data-detail-actions] *,.fi-icon-plain):not(:has(>span:not(.fi-sr-only,.fi-badge))):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *,[aria-disabled="true"] *):not(.active,.is-active,[aria-pressed="true"]):is(:hover,:focus-visible){background:var(--fi-hover-background,#f3f6f8)!important;border-color:#d7dee4!important} /* Iconleiste in Detailansichten: ein globaler Baustein nach Vorgabe der E-Mail-Detailansicht; Werte aus dem UI-System-Bereich „Iconleiste“. Icons ohne Button-Hintergrund und -Rahmen; zentraler Hover, Fokus, aktive und deaktivierte Zustände bleiben erhalten. */ [data-detail-actions]{position:sticky;top:0;z-index:20;gap:var(--fi-icon-bar-group-gap,10px)!important;padding:var(--fi-icon-bar-padding-y,8px) var(--fi-icon-bar-padding-x,10px)!important;border:0!important;border-bottom:var(--fi-icon-bar-border-width,1px) solid var(--fi-icon-bar-border-color,#d7dee4)!important;border-radius:0!important;background:var(--fi-icon-bar-background,#f3f6f8)!important;box-shadow:var(--fi-shadow-soft)} [data-detail-actions] [data-detail-action-group]{gap:var(--fi-icon-bar-gap,4px)!important} [data-detail-actions] :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost):not([data-ui-logo-frame]){width:var(--fi-icon-bar-button-size,32px);min-width:var(--fi-icon-bar-button-size,32px);height:var(--fi-icon-bar-button-size,32px);min-height:var(--fi-icon-bar-button-size,32px);padding:0} [data-detail-actions] :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost):not([data-ui-logo-frame],.active,.is-active,[aria-pressed="true"]){border-color:transparent!important;background:transparent!important;box-shadow:none!important} :where([data-detail-actions]) :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost){color:var(--fi-icon-bar-icon-color,#4a5560)} [data-detail-actions] :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost)>:is(.ti,svg.fi-icon){font-size:var(--fi-icon-bar-icon-size,16px)} .fi-record-row.fi-record-row--thread>.mail-thread-state{align-self:center;display:grid;place-items:center;box-sizing:border-box;width:var(--fi-mail-sender-size,32px);height:var(--fi-mail-sender-size,32px);border:1px solid var(--line)!important;border-radius:var(--fi-mini-button-radius,999px)!important;background:var(--surface,#fff)!important;font-size:var(--fi-text-p-font-size,14px)} /* ===== Bestellungen, Statusanzeige und Aktenhistorie (zusammengefasst) ===== */ /* Iconleiste: Gruppen mit data-detail-action-align="end" stehen rechtsbündig; die erste ist durch den Abstand abgesetzt und hat keine Trennlinie. */ [data-detail-actions]>[data-detail-action-group][data-detail-action-align="end"]{margin-inline-start:auto} [data-detail-actions]>[data-detail-action-group][data-detail-action-align="end"]~[data-detail-action-group][data-detail-action-align="end"]{margin-inline-start:0} [data-detail-actions]>[data-detail-action-group][data-detail-action-align="end"]:not([data-detail-action-align="end"]~[data-detail-action-group]){border-inline-start:0!important;padding-inline-start:0!important} /* Reine Icon-Aktion ohne Kreis und Rahmen (z. B. Vorgangs-ID kopieren, Aktenhistorie); Hover und Fokus bleiben zentral. */ .fi-icon-plain:not(:hover,:focus-visible){border-color:transparent!important;background:transparent!important;box-shadow:none!important} .fi-icon-plain{border-color:transparent!important;box-shadow:none!important} /* Kontaktalarm-Badge: der Alarmtext bricht vollständig um, statt abgeschnitten zu werden. */ .fi-badge[data-ui-badge="kontaktalarm"]{max-width:100%;white-space:normal;text-align:left;align-items:flex-start} .fi-badge[data-ui-badge="kontaktalarm"]>span{overflow:visible;white-space:normal;overflow-wrap:anywhere} .fi-badge[data-ui-badge="kontaktalarm"][hidden]{display:none} /* Aktueller Status (fiStatusBadge, aktueller Verlaufsschritt): Farbschema der Bestätigen-Buttons im Hover, Storniert rot gefüllt. */ .fi-badge.fi-badge--current.fi-badge--success{background:var(--fi-pair-gruen-surface)!important;border-color:var(--fi-pair-gruen-text)!important;color:var(--fi-pair-gruen-text)!important} .fi-badge.fi-badge--current.fi-badge--danger{background:var(--fi-status-error-color,#d70015)!important;border-color:var(--fi-status-error-color,#d70015)!important;color:#fff!important} /* Verlaufsanzeige (fi-detail-route): ausstehende Schritt-Badges in der Nebenfarbe, Verbindungslinien hinter den Badges. */ .fi-detail-route-step[data-step-state="pending"]>.fi-detail-route-content>.fi-badge{border-color:var(--line);background:var(--fi-box-background,#ffffff);color:var(--sub)} .fi-detail-route--wrap .fi-detail-route-content{position:relative;z-index:1} /* Bestellablauf: nächster Schritt grün beim Hover; Gruppenkonten wählen den Mitarbeiter in derselben Pille. */ [data-detail-actions] .fi-order-next-step:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)),.fi-order-next-step:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important;border-color:color-mix(in srgb,var(--fi-pair-gruen-surface) 85%,var(--fi-pair-gruen-text))!important;color:var(--fi-pair-gruen-text)!important} .fi-order-step-pill{display:inline-flex;align-items:center;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:var(--fi-mini-button-radius,999px);background:var(--surface,#fff);overflow:hidden} .fi-order-step-pill>:is(.fi-select-field,select:not(.fi-select-native)){ --fi-select-input-height:var(--fi-icon-bar-button-size,32px); --fi-select-input-font-size:var(--fi-text-small-font-size,13px); --fi-select-input-border-width:0px; --fi-select-input-padding-y:0px; --fi-select-input-padding-x:var(--fi-inline-gap,8px); --fi-select-input-background:transparent; --fi-select-input-hover-background:var(--fi-hover-background,#f3f6f8); --fi-select-input-focus-background:transparent; --fi-select-input-open-background:var(--fi-hover-background,#f3f6f8); --fi-select-input-icon-size:var(--fi-mini-button-icon-size,14px); width:auto;min-width:0;max-width:190px;flex:0 1 auto; } .fi-order-step-pill>.fi-select-field>.fi-select-trigger{border:0!important;border-radius:0;box-shadow:none} .fi-order-step-pill>select:not(.fi-select-native){height:var(--fi-icon-bar-button-size,32px);border:0;border-radius:0;background-color:transparent;box-shadow:none;font-size:var(--fi-text-small-font-size,13px)} .fi-order-step-pill>.fi-order-next-step{flex:none;margin:0;border:0!important;border-radius:0!important;box-shadow:none!important} /* Bestelldetails, klassische Ansicht: Kopf mit Kunde und Artikel, Artikeltabelle mit Bild und Beträgen in kleiner Schrift. */ .fi-order-head-note{display:block;margin:2px 0 0;padding:0;font-size:var(--fi-text-small-font-size,13px);line-height:var(--fi-text-small-line-height,1.35);font-weight:var(--fi-text-strong-font-weight,700);white-space:pre-line;overflow-wrap:anywhere} .fi-order-confirmation-number{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .fi-order-confirmation tfoot th{text-align:right;font-weight:var(--fi-text-p-font-weight,400)} .fi-order-confirmation :is(tbody td.fi-order-confirmation-number,tfoot th,tfoot td),.fi-order-confirmation :is(tbody td.fi-order-confirmation-number,tfoot th,tfoot td) .fi-text-strong{font-size:var(--fi-text-small-font-size,13px);line-height:var(--fi-text-small-line-height,1.4)} .fi-order-confirmation-article{display:flex;align-items:flex-start;gap:var(--fi-list-content-gap,10px);min-width:0} .fi-order-confirmation-article>.fi-detail-group{gap:2px;min-width:0} .fi-order-confirmation-image{position:relative;display:grid;place-items:center;flex:none;width:72px;height:72px;overflow:hidden;border:1px solid var(--line);border-radius:var(--fi-box-radius,12px);background:#fff;color:var(--sub)} .fi-order-confirmation-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff} .fi-order-detail-head>.fi-detail-group{flex:1 1 auto;min-width:0} .fi-order-head-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--fi-inline-gap,8px);margin-inline-start:auto} .fi-order-head-name{align-items:center} .fi-order-head-company{margin-top:-4px} .fi-badge>.fi-contact-way-standard{width:1em;height:1em} .fi-order-detail-head-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fi-block-gap,20px);align-items:start} .fi-order-detail-head-grid>.fi-detail-group{min-width:0} @media(max-width:1180px){.fi-order-detail-head-grid{grid-template-columns:minmax(0,1fr)}} /* Bestelldetails, Kartenansicht (customer_order_detail_cards.php): graue Kacheln, Statusreihe, waagerechter Verlauf, Artikelkarten. Linien aus UI-System „Fortschrittslinien“. */ .fi-order-cards{display:grid;gap:var(--fi-detail-section-gap,8px);min-width:0} .fi-order-card{display:flex;flex-direction:column;gap:var(--fi-detail-group-content-gap,8px);min-width:0;padding:var(--fi-section-padding,12px) calc(var(--fi-section-padding,12px) * 1.3);border-radius:var(--fi-box-radius,12px);background:var(--fi-hover-background,#f3f6f8)} .fi-order-card--plain{border:1px solid var(--line);background:var(--surface,#fff)} .fi-order-card-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--surface,#fff);font-size:16px} .fi-order-card-value{margin-top:auto;font-size:var(--fi-text-h2-font-size,18px);font-weight:var(--fi-text-strong-font-weight,700)} .fi-order-item-card .fi-detail-route{margin-top:var(--fi-detail-group-content-gap,8px)} .fi-order-totals{text-align:right} .fi-order-card:not(.fi-order-card--plain,.fi-order-card--wide){gap:0} .fi-order-card:not(.fi-order-card--plain,.fi-order-card--wide)>.fi-order-card-icon{margin-bottom:var(--fi-detail-group-content-gap,8px)} .fi-order-card:not(.fi-order-card--plain,.fi-order-card--wide)>.fi-text-small{line-height:1.3} /* Aktenhistorie: Kommentare in der Details-Spalte (Mitarbeiter und Zeitpunkt kursiv), Aktionsicons nebeneinander. */ .fi-history-comment{display:flex;align-items:flex-start;gap:var(--fi-mini-button-gap,4px);margin-top:4px;color:var(--fi-text-p-color,#2f3a45)} .fi-history-comment>.ti{flex:none;margin-top:2px;color:var(--sub)} .fi-history-comment>div{display:grid;gap:1px;min-width:0} .fi-history-comment-meta{font-size:inherit;line-height:inherit;font-style:italic;color:var(--sub)} .fi-history-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--fi-mini-button-gap,4px)} /* Zentraler Bildfokus-Baustein für redaktionelle Bildausschnitte. */ .fi-image-focus{display:block;max-width:100%;height:auto;touch-action:none;cursor:grab;background:var(--bg,#f3f6f8);border-radius:0} .fi-image-focus:active{cursor:grabbing} .fi-image-focus:focus-visible{outline:2px solid var(--ink,#2f3a45);outline-offset:3px} .fi-image-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fi-detail-gap,20px);align-items:start} .fi-image-focus-grid>section{min-width:0} @media(max-width:700px){.fi-image-focus-grid{grid-template-columns:1fr}} /* Zentraler kompakter Hierarchiebaum: Aufklappen, Name, Anzahl, Aktion. */ .fi-tree-row{display:flex;align-items:center;gap:var(--fi-inline-gap,8px);min-height:var(--fi-navigation-min-height,40px);padding:2px 0} .fi-tree-row:hover{background:var(--fi-navigation-hover-background,#f3f6f8)} .fi-tree-spacer{width:var(--fi-action-icon-size,28px);flex:none} /* Baum-Chevron: reines Icon ohne Kreis, Fläche und Schatten; Richtung folgt dem Aufklappzustand (FullandUI.setExpanded). */ body .fi-tree-row>button[type="button"][data-ui-disclosure-icon="tree"][data-ui-disclosure-target]:is(*,:hover,:focus-visible,:active){border:0!important;background:transparent!important;box-shadow:none!important;color:var(--sub)!important;transform:none!important} body .fi-tree-row>button[type="button"][data-ui-disclosure-icon="tree"][data-ui-disclosure-target]:is(:hover,:focus-visible){color:var(--ink)!important} .fi-tree-label{flex:1;min-width:0;overflow-wrap:anywhere;text-decoration:none;color:var(--fi-text-p-color,#2f3a45);font:inherit} .fi-tree-label[aria-current="page"]{font-weight:700} .fi-tree-children{margin-left:var(--fi-tree-indent,20px)} .fi-tree-row>form{margin:0;flex:none} .fi-tree-row .fi-check{min-height:0} .fi-tree-row[data-inactive="true"]>.fi-tree-label,.fi-tree-row[data-inactive="true"]>small,.fi-tree-node>.fi-nav-item[aria-disabled="true"]{color:var(--sub,#7d8a96);opacity:var(--fi-disabled-opacity,.55)} .fi-tree-label[aria-disabled="true"],.fi-tree-node>.fi-nav-item[aria-disabled="true"]{cursor:not-allowed} .fi-tree-row[data-inactive="true"]:hover{background:transparent} .fi-table[data-field-selection] thead th:first-child{width:72px} .fi-table[data-field-selection] thead th:last-child{width:80px} .fi-table[data-field-selection] th[scope="row"]{width:auto} .fi-table[data-field-selection] th[scope="row"]>label{cursor:pointer} .fi-table[data-field-selection] td{white-space:nowrap} .fi-table[data-field-selection] tr[data-inactive="true"]>th{color:var(--sub,#7d8a96);opacity:var(--fi-disabled-opacity,.55)} .fi-table[data-field-selection] tr[data-inactive="true"] .fi-check>span:not(.fi-sr-only){color:var(--sub,#7d8a96)} /* Gemeinsame kompakte Verwaltungslisten und gestufte Hierarchien. */ .fi-table[data-management-table]{min-width:0} .fi-table[data-management-table] td:last-child{width:var(--fi-mini-button-size,24px);white-space:nowrap} .fi-table[data-management-table] th[scope="row"]>.fi-text-small{margin-top:var(--fi-mini-button-gap,4px);font-weight:var(--fi-text-p-font-weight,400)} .fi-tree-row[data-tree-level="1"]{background:var(--fi-list-active-background,#eef2f5);padding:var(--fi-inline-gap,8px);border-radius:var(--fi-box-radius,8px)} .fi-tree-row[data-tree-level="1"]>.fi-tree-label{font-weight:var(--fi-text-h4-font-weight,600)} .fi-tree-row[data-tree-level="2"]>.fi-tree-label{font-weight:var(--fi-text-h4-font-weight,600)} .fi-tree-children{border-inline-start:1px solid var(--line);padding-inline-start:var(--fi-inline-gap,8px)} .fi-tree-node[hidden]{display:none!important} /* Listenaktionen: reine Icons ohne Rahmen oder Hintergrund, auch bei Hover. */ body :is(.fi-table,.fi-tree-row,.fi-record-list,.fi-service-list,.mail-thread-list,.mail-account-list,.dms-document-list,.contact-match-list) :is(.mail-toolbar-icon,.fi-action-icon--ghost,.fi-btn--icon,.fi-btn--mini)[data-ui-action]:not([data-ui-logo-frame]), body :is(.fi-table,.fi-tree-row,.fi-record-list,.fi-service-list,.mail-thread-list,.mail-account-list,.dms-document-list,.contact-match-list) :is(.mail-toolbar-icon,.fi-action-icon--ghost,.fi-btn--icon,.fi-btn--mini)[data-ui-action]:not([data-ui-logo-frame]):is(:hover,:focus-visible,:active){ border:0!important; background:transparent!important; box-shadow:none!important; } /* Offscreen reference viewports keep the crop tool tied to the public page layout. */ .fi-image-focus-layout{position:absolute;left:-100000px;top:0;max-width:none;max-height:none;border:0;border-radius:0;pointer-events:none} /* Testsiegel in der Modellverwaltung: Vorschau passt in die Symbolfläche der sortierbaren Zeile. */ .fi-ui-navigation-icon .fi-company-logo{--fi-company-logo-size:36px} /* ================================================== GRUNDSTIL 2026 · verbindlich (AGENTS.md → Grundstil 2026) Navigation und Listen liegen auf der graublauen Blockfläche, der gewählte Eintrag als weiße Karte; Details, Formulare und Übersichten sind weiße Flächen. Akzent ausschließlich Blau (--fi-accent). ========================================================= */ body{background:var(--fi-block)} /* Seitenleiste: Marke, feste Gruppen mit kleiner Überschrift, ruhige Einträge; aktiv = helle Fläche, fett, Icon blau. */ .fi-app-sidebar{gap:4px;padding:14px 10px 14px 14px;background:var(--fi-block)} .fi-app-brand{margin-bottom:12px} .fi-app-brand-mark{background:var(--fi-accent)} .fi-app-nav{gap:0} .fi-app-nav-group{display:flex;flex-direction:column;gap:1px} .fi-app-nav-group+.fi-app-nav-group{margin-top:14px} .fi-app-nav-group-label{padding:0 10px 4px;color:#9aa7b3;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .fi-app-nav .fi-nav-item{min-height:34px;padding:6px 10px;border-radius:8px;color:var(--sub);font-size:14px;font-weight:500;box-shadow:none} .fi-app-nav .fi-nav-item>.ti{color:#9aa7b3;font-size:17px} .fi-app-nav .fi-nav-item:hover:where(:not(:disabled,[aria-disabled="true"],.is-inactive)){background:rgba(255,255,255,.55);color:var(--ink)} .fi-app-nav .fi-nav-item[aria-current="page"],.fi-app-nav .fi-nav-item.active{background:rgba(255,255,255,.85);color:var(--ink);font-weight:700;box-shadow:none} .fi-app-nav .fi-nav-item[aria-current="page"]>.ti,.fi-app-nav .fi-nav-item.active>.ti{color:var(--fi-accent)} @media(max-width:1280px){ .fi-app-sidebar{padding:12px 8px} .fi-app-nav-group-label{display:none} .fi-app-nav-group+.fi-app-nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--fi-block-strong)} } @media(max-width:760px){ .fi-app-nav-group{flex-direction:row} .fi-app-nav-group+.fi-app-nav-group{margin:0 0 0 8px;padding:0 0 0 8px;border-top:0;border-left:1px solid var(--fi-block-strong)} } /* Kopfzeile auf der Blockfläche, ohne eigene Fläche. */ .fi-app-header,.hero{background:transparent} /* Listenbereiche: liegen direkt auf der Blockfläche; Werkzeugleisten ohne Fläche und Trennlinie. */ :is(.fi-service-list-panel,.mail-thread-panel,.mail-sidebar,.dms-list-panel){background:transparent;border:0;box-shadow:none} :is(.fi-service-list-panel,.mail-thread-panel,.mail-sidebar,.dms-list-panel) :is(.workspace-toolbar,.mail-thread-toolbar,.list-meta,.workspace-footer,.fi-toolbar,.fi-filter-bar,.contacts-list-tools,.dms-filterbar){background:transparent;border-color:transparent} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-service-list,.fi-record-list,.mail-thread-list){background:transparent;padding:0 6px 6px;gap:2px} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-record-row,.mail-thread){margin:0 0 var(--fi-list-row-gap,2px);border:0!important;border-radius:var(--fi-list-row-radius,6px)} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-record-row,.mail-thread):not(.is-pinned,.is-assigned-to-me){background:transparent} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-record-row,.mail-thread):not(.is-pinned,.is-assigned-to-me):hover:where(:not(.is-active,.is-live,.is-selected,:disabled,[aria-disabled="true"],.is-inactive)){background:rgba(255,255,255,.6)} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-record-row.is-active,.mail-thread.is-active,.mail-thread.is-live,.mail-thread.is-selected,[aria-current="true"].fi-record-row){background:var(--paper)!important;box-shadow:var(--fi-row-selected-shadow)!important} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) :is(.fi-record-row,.mail-thread).is-overdue{box-shadow:inset 3px 0 0 #d70015!important} :is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) [data-chronological-day]>.fi-detail-section-head,:is(.fi-service-list-panel,.mail-thread-panel,.dms-list-panel) [data-puzzle-day]>.fi-detail-section-head{background:var(--fi-block);border:0} :is(.fi-service-list-panel,.mail-thread-panel,.mail-sidebar,.dms-list-panel,.fi-schedule-head) :is(input[type="search"],.search-wrap input,.fi-control){background:var(--paper)} /* Detail- und Inhaltsflächen: weiß, ruhig gerundet, ohne Rahmen und Schatten. */ :is(.fi-service-detail,.mail-detail,.dms-detail-panel,.fi-detail-shell,.workspace.fi-card,.workspace:not(.fi-service-list-panel,.mail-thread-panel,.mail-sidebar,.dms-list-panel)){border-radius:12px;background:var(--paper);box-shadow:none} /* Primäraktionen und Auswahl: Blau. */ .btn-primary{background:var(--fi-accent);border-color:var(--fi-accent);color:#fff} .btn-primary:hover:where(:not(:disabled,[aria-disabled="true"],.is-inactive)){background:var(--fi-accent-hover);border-color:var(--fi-accent-hover)} input[type="checkbox"],input[type="radio"]{accent-color:var(--fi-checkbox-accent,var(--fi-accent))} /* Tabs: Segmentleiste ohne Kontur (Werte aus dem UI-System), auf der Blockfläche etwas dunkler; aktiver Eintrag als weiße Pille. */ .tabs{border-color:transparent} :is(.fi-service-list-panel,.mail-thread-panel,.mail-sidebar,.dms-list-panel,.fi-schedule-head) .tabs{background:var(--fi-block-strong)} .tabs>.tab.active,.tabs>.tab[aria-selected="true"],.tabs>.tab[aria-pressed="true"]{box-shadow:0 1px 3px rgba(47,58,69,.15)} /* Ablaufstränge: erreichte Schritte grün, aktueller Schritt hervorgehoben, ausstehende grau. */ .fi-detail-route-step[data-route-line-state="complete"]{--fi-route-line-color:var(--fi-step-line-complete-color,var(--fi-pair-gruen-text))} /* Kundenakte: rechte Spalte im Detail (ab 1400px, E-Mail ab 1600px); darunter genügt der Aktenlink im Detail. */ .fi-kundenakte{display:none} .fi-kundenakte-panel{display:flex;flex-direction:column;gap:12px} .fi-kundenakte-kicker{margin:0;color:var(--fi-section-label-color);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .fi-kundenakte-head{display:flex;align-items:center;gap:10px;min-width:0} .fi-kundenakte-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:999px;background:var(--fi-block);color:var(--ink);font-size:14px;font-weight:600} .fi-kundenakte-identity{display:flex;flex-direction:column;gap:1px;min-width:0} .fi-kundenakte-identity>.fi-text-strong{font-size:15px;overflow-wrap:anywhere} .fi-kundenakte-identity>.fi-text-small{color:var(--sub)} .fi-kundenakte-alarm>.fi-badge{white-space:normal;height:auto;text-align:left} .fi-kundenakte-actions{display:flex;gap:6px} .fi-kundenakte-actions>.btn{flex:1 1 0;min-width:0} .fi-kundenakte-ways{display:grid;gap:3px;margin:0;padding:0;list-style:none;color:var(--sub);font-size:12px} .fi-kundenakte-ways>li{display:flex;align-items:center;gap:6px;min-width:0} .fi-kundenakte-ways>li>.ti{font-size:14px} .fi-kundenakte-ways>li>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-kundenakte-section{display:flex;flex-direction:column;gap:4px;margin-top:6px} .fi-kundenakte-title{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;font-weight:700} .fi-kundenakte-count{padding:0 7px;border-radius:999px;background:var(--fi-block);font-size:11px;font-weight:600;color:var(--navy-2)} .fi-kundenakte-record{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:var(--fi-block);color:var(--ink);text-decoration:none} .fi-kundenakte-record:hover{background:#e3e9ee} .fi-kundenakte-contact{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:12px;text-decoration:none} .fi-kundenakte-contact:hover>.fi-kundenakte-contact-title{color:var(--fi-accent)} .fi-kundenakte-contact>.ti{font-size:14px;color:var(--sub)} .fi-kundenakte-contact-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-kundenakte-contact>time{color:var(--sub);white-space:nowrap} .fi-kundenakte-empty{margin:0;color:var(--sub)} @media(min-width:1400px){ .fi-detail-shell:not(.mail-detail):has(>.fi-kundenakte:not([hidden])){position:relative;padding-right:var(--fi-kundenakte-width,300px)} .fi-detail-shell:not(.mail-detail)>.fi-kundenakte:not([hidden]){display:block;position:absolute;top:0;right:0;bottom:0;width:var(--fi-kundenakte-width,300px);padding:18px 20px;border-left:1px solid var(--line);border-radius:0;background:transparent;overflow-y:auto} } @media(min-width:1400px){ .mail-detail.fi-detail-shell:has(>.fi-kundenakte:not([hidden])){position:relative;padding-right:var(--fi-kundenakte-width,300px)} /* Die E-Mail-Detailspalte scrollt selbst: Akte bleibt als mitlaufende Spalte in voller Arbeitsbereichshöhe stehen. */ .mail-detail.fi-detail-shell>.fi-kundenakte:not([hidden]){display:block;position:sticky;top:0;flex:none;align-self:flex-end;width:var(--fi-kundenakte-width,300px);height:var(--fi-workspace-height,calc(100dvh - 120px));margin:0 calc(-1 * var(--fi-kundenakte-width,300px)) calc(-1 * var(--fi-workspace-height,calc(100dvh - 120px))) 0;padding:18px 20px;border-left:1px solid var(--line);background:var(--paper);overflow-y:auto;z-index:2} } /* Heute: Gruß und Zusammenfassung, Spuren nach Handlung mit weißen Aufgabenkarten, rechts Termine und Montage. */ .fi-today-head{padding:8px 8px 4px} .fi-today-head h1{margin:0;font-size:26px;font-weight:700} .fi-today-summary{margin:4px 0 12px;color:var(--navy-2);font-size:14px} .fi-today{display:grid;grid-template-columns:minmax(0,1fr) var(--fi-today-side-width,300px);gap:24px;align-items:start;padding:8px 16px 24px 8px} .fi-today-main{display:flex;flex-direction:column;gap:20px;min-width:0} .fi-today-lane{padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none} .fi-today-lane-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;font-weight:700} .fi-today-lane-title>.ti{font-size:17px;color:var(--fi-accent)} .fi-today-lane>.fi-record-list{display:flex;flex-direction:column;gap:4px;padding:0;background:transparent} .fi-today-lane .fi-action-item.fi-record-row{border:0;border-radius:10px;background:var(--paper);box-shadow:var(--fi-shadow-soft)} .fi-today-lane .fi-action-item.fi-record-row:hover:where(:not(:disabled,[aria-disabled="true"],.is-inactive)){background:var(--paper);box-shadow:var(--fi-row-selected-shadow)} .fi-today-lane .fi-action-item.is-due{box-shadow:inset 3px 0 0 var(--fi-accent),var(--fi-shadow-soft)} .fi-today-lane-more{margin-top:6px} .fi-today-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;min-width:0} .fi-today-side-block{padding:16px 18px;border-radius:12px;background:var(--paper)} .fi-today-agenda{margin:0;padding:0;list-style:none} .fi-today-agenda a{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none} .fi-today-agenda li:last-child a{border-bottom:0} .fi-today-agenda-time{flex:none;width:64px;color:var(--fi-accent);font-size:13px;font-weight:600} .fi-today-agenda-main{display:flex;flex-direction:column;min-width:0;font-size:13px} .fi-today-agenda-main>small,.fi-today-place small{color:var(--sub);font-size:12px} .fi-today-place{display:flex;align-items:center;gap:10px;margin-bottom:6px;padding:10px 12px;border-radius:8px;background:var(--fi-block);color:var(--ink);text-decoration:none} .fi-today-place>span:last-child{display:flex;flex-direction:column;min-width:0;font-size:13px} .fi-today-place-dot{flex:none;width:8px;height:8px;border-radius:999px;background:#c9d4dc} .fi-today-place-dot.is-busy{background:var(--fi-pair-gruen-text)} @media(max-width:1100px){.fi-today{grid-template-columns:minmax(0,1fr)}.fi-today-side{position:static}} /* Listen (Grundstil 2026): Suchfeld oben, darunter Filter als Tabs über die volle Breite, Zähler im Tab; zweite Tab-Reihe kleiner. */ .workspace-toolbar.fi-service-toolbar>.tabs>.tab{flex:1 1 auto;justify-content:center;white-space:nowrap} .fi-tab-count{margin-left:4px;font-size:11px;font-weight:600;opacity:.7} .workspace-toolbar.fi-service-toolbar>.tabs.fi-tabs--secondary{--fi-tab-font-size:11px;padding:2px} .workspace-toolbar.fi-service-toolbar>.tabs.fi-tabs--secondary>.tab{min-height:26px;padding-block:3px} /* Bestelldetail: Ablaufstrang zuerst, darunter der nächste Schritt als blauer Hinweis; Fakten in einer Reihe. */ .fi-order-next-hint{margin:10px 0 0;padding:10px 14px;border-radius:10px;background:var(--fi-accent-soft);color:var(--fi-accent-text);font-weight:600} .fi-order-cards--facts{grid-template-columns:repeat(3,minmax(0,1fr))} .fi-order-cards--facts>.fi-order-card>a.fi-order-card-value{color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere} .fi-order-cards--facts>.fi-order-card>a.fi-order-card-value:hover{color:var(--fi-accent)} @media(max-width:1180px){.fi-order-cards--facts{grid-template-columns:minmax(0,1fr)}} /* Anrufe: Ist die Kundenakte sichtbar, entfallen die doppelten Verknüpfungen im Detail. */ @media(min-width:1400px){.fi-call-detail:has(>.fi-kundenakte:not([hidden])) #callDetailLinks{display:none}} /* E-Mail: schmalere Ordnerspalte und begrenzte Threadliste, damit Detail und Kundenakte Platz haben. */ @media(min-width:1181px){.mail-workspace{grid-template-columns:220px minmax(280px,340px) minmax(0,1fr)}} /* Kompakte Tabs (viele Bereiche in schmalen Listen): inaktive nur als Icon mit Tooltip, der aktive mit Icon und Text. */ .tabs.fi-tabs--compact>.tab{gap:6px} .tabs.fi-tabs--compact>.tab:not(.active,[aria-current="page"])>.fi-tab-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .tabs.fi-tabs--compact>.tab:is(.active,[aria-current="page"]){flex:2 1 auto} /* Kalender: Zeitraum mit Vor/Heute/Zurück zuerst, darunter Ansicht- und Filial-Tabs sowie „Zu Datum springen“. */ .fi-schedule-period{margin-block:0 var(--fi-section-padding,12px)} .fi-schedule-toolbar{justify-content:flex-start;flex-wrap:wrap;gap:var(--fi-inline-gap,8px) var(--fi-block-gap,20px)} .fi-schedule-toolbar>.fi-schedule-filters{margin-left:auto} /* Kalender: eine Fläche über die volle Breite; oben Kopf mit Titel und Aktionen, darunter Kalender-Umschalter, Zeitraum, Ansichten; Kalenderauswahl als Schublade. */ @media(min-width:961px){.fi-main .mail-workspace.fi-schedule-layout{grid-template-columns:minmax(0,1fr)!important}} /* Termindetails als Schublade von rechts über dem Kalender; der Kalender bleibt unverändert (Breite: UI-System → Terminplanung). */ .fi-main .mail-workspace.fi-schedule-layout{position:relative} .fi-schedule-layout>.fi-schedule-detail-host{position:absolute;top:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;width:min(var(--fi-schedule-detail-width,440px),100%);min-height:0;overflow:hidden;background:var(--paper);box-shadow:-12px 0 40px rgba(47,58,69,.16);transform:translateX(calc(100% + 60px));visibility:hidden;transition:transform .24s ease,visibility .24s} .fi-schedule-layout>.fi-schedule-detail-host.is-open{transform:none;visibility:visible} @media(prefers-reduced-motion:reduce){.fi-schedule-layout>.fi-schedule-detail-host{transition:none}} @media(max-width:960px){.fi-main .fi-schedule-layout>.fi-schedule-detail-host{position:fixed;inset:0;width:auto;z-index:1100}} .fi-schedule-detail-host>.fi-schedule-detail{flex:1 1 auto;min-height:0;overflow:auto;border-radius:0} .fi-schedule-detail-host>.fi-schedule-detail-loading{margin:auto} .fi-schedule-detail [data-detail-action-group]>form{display:contents} .fi-schedule-detail .fi-order-cards--facts{grid-template-columns:repeat(2,minmax(0,1fr))} .fi-schedule-detail-title{display:flex;align-items:center;gap:var(--fi-inline-gap,8px)} .fi-schedule-event.is-selected{outline:var(--fi-box-border-width,1px) solid var(--fi-accent);outline-offset:1px} .fi-main .fi-schedule-layout>.fi-schedule-main{display:flex;flex-direction:column;border-radius:0;overflow:auto} /* Das Raster füllt die restliche Höhe; Monatswochen teilen sich die Fläche, die Woche behält ihre Stundenhöhe. */ .fi-schedule-main>.fi-schedule-scroll{display:flex;flex:1 0 auto;flex-direction:column} .fi-schedule-main>.fi-schedule-scroll>.fi-schedule-month-week{flex:1 0 auto} .fi-schedule-main>.fi-schedule-scroll>.fi-schedule-week{flex:1 0 auto} /* Wochenansicht: nur die Stunden scrollen; Tageskopf und Ganztagszeile bleiben oben stehen. */ .fi-main .fi-schedule-layout>.fi-schedule-main:has(.fi-schedule-week){overflow:hidden} .fi-schedule-main>.fi-schedule-scroll:has(>.fi-schedule-week){flex:1 1 0;min-height:0;overflow:auto} .fi-schedule-week>.fi-schedule-week-head{position:sticky;top:0;z-index:2} .fi-schedule-week>.fi-schedule-all-day{position:sticky;top:var(--fi-schedule-week-head-height,0px);z-index:2;background:var(--paper)} /* Ganztagszeile höchstens drei Termine hoch; weitere Termine scrollen innerhalb der Zeile. */ .fi-schedule-week>.fi-schedule-all-day{--fi-schedule-all-day-row-height:calc(var(--fi-schedule-allday-height,22px) + 2 * var(--fi-schedule-event-spacing,4px));grid-auto-rows:var(--fi-schedule-all-day-row-height);max-height:calc(3.5 * var(--fi-schedule-all-day-row-height));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} .fi-schedule-week>.fi-schedule-all-day::-webkit-scrollbar{display:none} /* Beschriftung „Ganztägig“ bleibt beim Scrollen der Zeile stehen und steht vertikal mittig im sichtbaren Bereich. */ .fi-schedule-week>.fi-schedule-all-day>span:first-child{position:sticky;top:0;z-index:1;align-self:start;display:flex;align-items:center;box-sizing:border-box;height:calc(min(var(--fi-schedule-all-day-rows,1),3.5) * var(--fi-schedule-all-day-row-height));background:var(--paper)} .fi-schedule-head{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;gap:var(--fi-inline-gap,8px);padding:14px 28px 12px;background:var(--fi-block)} .fi-schedule-head>.fi-list-head{padding:0} .fi-schedule-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fi-inline-gap,8px) var(--fi-block-gap,20px)} .fi-schedule-controls>.fi-schedule-period{flex:1 1 auto;flex-wrap:nowrap;gap:var(--fi-inline-gap,8px);margin:0} .fi-schedule-controls>.fi-schedule-period>.fi-row{gap:var(--fi-mini-button-gap,4px);margin-left:auto} .fi-schedule-controls>.fi-schedule-period>h2{font-size:16px;white-space:nowrap} .fi-schedule-controls>.fi-schedule-toolbar{flex:1 1 auto;margin:0;padding:0;border:0;overflow:visible} .fi-schedule-main>:not(.fi-schedule-head){margin-inline:28px} .fi-schedule-main>.fi-schedule-head+*{margin-top:18px} .fi-schedule-main>:last-child{margin-bottom:24px} @media(max-width:900px){.fi-schedule-head{padding:12px 16px}.fi-schedule-main>:not(.fi-schedule-head){margin-inline:16px}} /* DocuHub und Aufgaben: selten genutzte Filter eingeklappt unter „Weitere Filter“; aktive Filter bleiben als Chips sichtbar. */ .dms-filterbar>.dms-more-filters{grid-column:1/-1} :is(.dms-more-filters,.fi-task-more-filters)>summary{font-size:12px;font-weight:600;color:var(--sub)} :is(.dms-more-filters,.fi-task-more-filters)>.fi-detail-stack{padding-top:8px} /* Listenkopf (Grundstil 2026): Titel mit Anzahl und die eine Primäraktion der Liste; ersetzt den Seitenkopf über Master-/Detail-Seiten. */ /* Zentraler Listenvertrag (UI-System → Listen): Listenkopf, Listentitel, Gruppenüberschrift und Listeneintrag für alle Listen gleich. */ .fi-list-head{display:flex;align-items:center;gap:var(--fi-list-head-gap,8px);min-width:0;padding:var(--fi-list-head-padding-top,16px) 0 var(--fi-list-head-padding-bottom,10px) var(--fi-list-head-padding-left,6px)} .fi-list-title{flex:1 1 auto;min-width:0;margin:0;color:var(--ink);font-size:var(--fi-list-title-size,18px);font-weight:700;line-height:1.25} .fi-list-title>:is(.ti,svg.fi-icon){margin-right:var(--fi-list-title-icon-gap,4px);color:var(--fi-accent);font-size:var(--fi-list-title-icon-size,20px);--fi-owned-icon-size:var(--fi-list-title-icon-size,20px);vertical-align:-3px} .fi-list-count{flex:none;color:var(--sub);font-size:12px;font-variant-numeric:tabular-nums} .fi-list-head>.btn{flex:none} /* Dreizeilige Listeneinträge: Name und Zeit, Inhalt mit genau einer Kennzeichnung, Nebenangaben. */ .fi-list-line{display:flex;align-items:center;gap:6px;min-width:0;margin-top:2px;color:var(--ink);font-size:13px;line-height:1.35} .fi-list-line-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-list-line>.fi-badge{flex:none} .fi-list-line--muted{color:var(--sub);font-size:12px} .fi-list-line--muted:empty{display:none} /* Detailkopf (Grundstil 2026): Art als Kennzeile, großer Titel mit Zeitpunkt, darunter die Status-Badges. */ .fi-detail-head{display:flex;flex-direction:column;gap:2px;min-width:0} .fi-detail-kicker{display:flex;align-items:center;gap:6px;margin:0;color:var(--sub);font-size:12px} .fi-detail-kicker>.fi-badge{height:auto;min-height:0;padding:0;border:0;background:transparent;color:inherit;font-size:12px;font-weight:500} .fi-detail-title-row{display:flex;align-items:baseline;gap:16px;min-width:0} .fi-detail-title{flex:1 1 auto;min-width:0;margin:0;color:var(--ink);font-size:24px;font-weight:700;line-height:1.25;overflow-wrap:anywhere} .fi-detail-title-row>time{flex:none;color:var(--sub);font-size:12px;white-space:nowrap} .fi-detail-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .fi-detail-chips:not(:has(>:not([hidden]))){display:none} /* Fakten: graue Kachelzeile mit Begriff und Wert. */ .fi-detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0;padding:14px 16px;border-radius:10px;background:var(--fi-block)} .fi-detail-facts>div{min-width:0} .fi-detail-facts>[hidden]{display:none} .fi-detail-facts dt{color:var(--sub);font-size:11px} .fi-detail-facts dd{margin:2px 0 0;color:var(--ink);font-size:14px;font-weight:600;overflow-wrap:anywhere} /* Anrufe (Grundstil 2026, Referenz für Master-/Detail-Seiten). */ .fi-call-master-layout>.fi-service-list-panel .call-master-row{grid-template-columns:minmax(0,1fr);min-height:0;padding:0} .fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main{grid-template-columns:16px minmax(0,1fr);gap:8px;padding:10px 12px 10px 14px} .fi-call-master-layout>.fi-service-list-panel .call-master-row .mail-thread-state{width:16px;height:20px;border-radius:0;background:transparent} .fi-call-master-layout>.fi-service-list-panel .call-master-row{--fi-call-row-icon-size:15px;--fi-contact-alarm-icon-size:var(--fi-call-row-icon-size)} .fi-call-master-layout>.fi-service-list-panel .call-master-row .direction-icons .ti{font-size:var(--fi-call-row-icon-size)} .fi-call-master-layout>.fi-service-list-panel .call-master-row .direction-icons.status-answered{color:var(--fi-pair-gruen-text)} .fi-call-master-layout>.fi-service-list-panel .call-master-row .direction-icons:not(.status-missed,.status-active,.status-pending):has(.ti-phone-outgoing){color:var(--fi-accent-text)} .fi-call-master-layout>.fi-service-list-panel .call-master-row .mail-thread-top strong{font-size:14px} .fi-call-master-layout>.fi-service-list-panel .call-master-row.is-overdue .mail-thread-top strong{font-weight:700} /* Schnellaktionen erscheinen beim Überfahren bzw. Fokus als schwebende Leiste; auf Touch-Geräten unter dem Eintrag. */ .fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-quick-actions{position:absolute;top:6px;right:8px;z-index:1;flex-direction:row;padding:2px;border-radius:999px;background:var(--paper);box-shadow:var(--fi-shadow-soft);opacity:0;pointer-events:none;transition:opacity .12s} .fi-call-master-layout>.fi-service-list-panel .call-master-row:is(:hover,:focus-within)>.mail-thread-quick-actions{opacity:1;pointer-events:auto} @media(hover:none){ .fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-quick-actions{position:static;grid-row:2;justify-content:flex-end;padding:0 12px 8px;background:transparent;box-shadow:none;opacity:1;pointer-events:auto} } .fi-call-master-layout>.fi-service-list-panel .fi-call-master-employees{gap:6px;padding:2px 0} .fi-call-master-layout>.fi-service-list-panel .fi-call-master-employees .employee-filter{width:28px;height:28px;border-color:transparent;background:var(--paper)} .fi-call-master-layout>.fi-service-list-panel .fi-call-master-employees .employee-filter.has-calls{border-color:#d70015;background:#d70015} .fi-call-master-layout>.fi-service-list-panel .fi-call-master-employees .employee-filter.selected{outline:2px solid var(--fi-accent);outline-offset:2px} .fi-call-detail.fi-detail-shell>.fi-call-detail-toolbar{padding:14px 28px 0;border:0;background:transparent} .fi-call-detail.fi-detail-shell>.fi-call-detail-head{padding:14px 28px 0;border:0;background:transparent} .fi-call-detail.fi-detail-shell>.fi-call-detail-body{gap:22px;padding:18px 28px 24px} .fi-call-detail.fi-detail-shell>.fi-call-detail-body>.fi-detail-section{padding:0;border-top:0} @media(max-width:900px){ .fi-call-detail.fi-detail-shell>:is(.fi-call-detail-toolbar,.fi-call-detail-head){padding-inline:16px} .fi-call-detail.fi-detail-shell>.fi-call-detail-body{padding:16px} } /* Grundschrift (Grundstil 2026): Source Sans 3, selbst gehostet (SIL Open Font License, assets/fonts/source-sans-3/OFL.txt). */ @font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:200 900;src:url(/asset.php?f=font-sans) format("woff2-variations"),url(/asset.php?f=font-sans) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:200 900;src:url(/asset.php?f=font-sans-ext) format("woff2-variations"),url(/asset.php?f=font-sans-ext) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Source Sans 3";font-style:italic;font-display:swap;font-weight:200 900;src:url(/asset.php?f=font-sans-italic) format("woff2-variations"),url(/asset.php?f=font-sans-italic) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Sans 3";font-style:italic;font-display:swap;font-weight:200 900;src:url(/asset.php?f=font-sans-ext-italic) format("woff2-variations"),url(/asset.php?f=font-sans-ext-italic) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} :is(button,input,select,textarea){font-family:inherit} /* Seitenleiste (Grundstil 2026): Marke mit Filialwahl, „Neu“ und Suche, feste Gruppen, unten Verwaltung und Benutzer. */ .fi-app{--fi-app-sidebar-width:212px} .fi-app-sidebar{gap:0;padding:16px 14px 14px} .fi-app-brand{display:flex;align-items:center;gap:10px;min-height:0;margin:0 4px 16px;padding:0;letter-spacing:0} .fi-app-brand-mark{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:999px;background:var(--fi-accent);color:#fff;font-size:14px;font-weight:700;text-decoration:none} .fi-app-brand-text{display:flex;flex-direction:column;min-width:0} .fi-app-brand-name{color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.14em} .fi-app-branch{display:inline-flex;align-items:center;gap:3px;min-width:0;padding:0;border:0;background:none;color:var(--sub);font:inherit;font-size:11px;text-align:left;cursor:pointer} .fi-app-branch>.ti{font-size:12px} span.fi-app-branch{cursor:default} .fi-app-branch:hover{color:var(--ink)} .fi-app-quick{display:flex;gap:6px;margin:0 0 4px} .fi-app-quick>.fi-app-new{flex:1 1 auto;justify-content:center;min-height:34px;box-shadow:0 4px 12px rgba(21,146,230,.28)} .fi-app-quick>.fi-app-search{flex:none;width:34px;height:34px;border:1px solid var(--fi-control-border-color,#d7dee4);background:var(--paper)} .fi-app-menu{--fi-action-menu-width:230px;padding:6px!important;border:0!important;box-shadow:0 16px 40px rgba(47,58,69,.18)!important} .fi-app-menu .fi-user-menu-item{width:100%;justify-content:flex-start;margin:0;border:0;background:transparent;font-size:13px} .fi-app-menu .fi-user-menu-item>.ti{color:var(--fi-accent)} .fi-app-menu .fi-user-menu-item[aria-current="true"]{font-weight:700} .fi-app-menu form,.fi-app-menu{margin:0} .fi-app-nav-group+.fi-app-nav-group{margin-top:0} .fi-app-nav-group-label{margin:16px 0 4px;padding:0 10px} .fi-app-nav .fi-nav-item{gap:11px;min-height:0;padding:6px 10px;border-radius:6px;font-size:14px} .fi-app-nav .fi-nav-item>.ti{font-size:16px} .fi-app-sidebar-foot{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px} .fi-app-sidebar-foot>.fi-app-nav .fi-nav-item{color:var(--sub)} .fi-app-user{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 0 0 8px} .fi-app-user-link{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none;border-radius:var(--fi-radius,8px)} .fi-app-user-link:hover .fi-app-user-name,.fi-app-user-link[aria-current="page"] .fi-app-user-name{color:var(--fi-accent)} .fi-avatar{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:30px;height:30px;overflow:hidden;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:600;line-height:1} .fi-avatar img{display:block;width:100%;height:100%;object-fit:cover} .fi-avatar--small{width:24px;height:24px;font-size:10px} .fi-avatar--large{width:40px;height:40px;font-size:14px} .fi-avatar--profile{width:96px;height:96px;font-size:28px} .fi-staff-person{display:flex;align-items:center;gap:10px;min-width:0} .fi-staff-person small{display:block} .customer-order-stock-hint{grid-column:1/-1;align-items:center} .customer-order-stock-hint-body{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-width:0} .customer-order-stock-hint-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px} .fi-account-photo-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .fi-account-photo-row{padding-top:0;padding-bottom:0} .fi-account-photo-stage{display:grid;place-items:center;padding:8px 0} .fi-account-photo-stage canvas{width:280px;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--fi-block);box-shadow:0 0 0 1px var(--line);cursor:grab;touch-action:none} .fi-account-photo-stage canvas.is-dragging{cursor:grabbing} .fi-app-user-name{flex:1 1 auto;min-width:0;overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap} .fi-app-user .fi-user-menu-toggle{flex:none;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;aspect-ratio:1;border:1px solid var(--fi-control-border-color,#d7dee4);border-radius:999px!important;background:var(--paper)} @media(max-width:1280px){ .fi-app{--fi-app-sidebar-width:64px} .fi-app-sidebar{padding:12px 8px} .fi-app-brand{justify-content:center;margin:0 0 12px} .fi-app-brand-text,.fi-app-user-name,.fi-app-user-avatar{display:none} .fi-app-quick{flex-direction:column;align-items:center} .fi-app-quick>.fi-app-new{width:34px;padding:0} .fi-app-quick>.fi-app-new>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .fi-app-user{justify-content:center;padding:6px 0 0} } @media(max-width:760px){ .fi-app-brand{margin:0} .fi-app-quick{flex-direction:row;margin:0} .fi-app-sidebar-foot{flex-direction:row;align-items:center;margin:0 0 0 auto;padding:0} .fi-app-sidebar-foot>.fi-app-nav{display:none} } /* Anrufdetails (Grundstil 2026): Aktionsgruppen links, Zuständig als Pille rechts; Status als schlanke Chips; ruhige Abschnittsköpfe. */ .fi-call-detail.fi-detail-shell>.fi-call-detail-toolbar{flex-wrap:wrap;justify-content:flex-start;gap:14px} .fi-call-detail .mail-assignment-control{gap:6px;min-width:0;height:28px;padding:0 4px 0 10px;border:1px solid var(--fi-control-border-color,#d7dee4);border-radius:999px;background:var(--paper)} .fi-call-detail .mail-assignment-control>.ti{font-size:14px} .fi-call-detail .mail-assignment-control select{height:26px;min-height:0;padding:0 24px 0 0;border:0;background-color:transparent;box-shadow:none;font-size:12px} .fi-call-detail .mail-assignment-control.is-assigned{border-color:var(--fi-accent);color:var(--fi-accent-text)} .fi-detail-chips>.fi-badge{height:auto;min-height:0;padding:1px 8px;border:0;border-radius:999px;background:var(--fi-pair-grau-surface);color:var(--fi-pair-grau-text);font-size:11px;font-weight:700} .fi-call-detail-body>.fi-detail-section>.fi-detail-section-head :is(h3,h4){font-size:14px;font-weight:700} .fi-call-detail-body>.fi-detail-section>.fi-detail-section-head :is(h3,h4)>.ti{display:none} .fi-call-detail-body #callDetailCommentsSection .fi-row{justify-content:flex-end} /* Tagesüberschriften in Listen (Grundstil 2026): ruhige graue Kennzeile auf der Blockfläche, ohne Icon und Linie; Werte unter UI-System → E-Mail-Gruppenüberschrift. */ .mail-date-divider.fi-mail-group-heading .ti{display:none} .mail-date-divider.fi-mail-group-heading{padding-top:calc(var(--fi-mail-group-padding-y,6px) + 4px)} /* Zähler in der Seitenleiste: E-Mail blau, verpasste Anrufe rot; schmale Leiste als Punkt am Icon. */ .fi-app-nav .fi-nav-item{position:relative} .fi-app-nav .fi-nav-item>span:not(.fi-app-nav-count){flex:1 1 auto;min-width:0} .fi-app-nav-count{flex:none;min-width:18px;padding:0 5px;border-radius:999px;background:var(--fi-accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center} .fi-app-nav-count[hidden]{display:none} [data-nav-key="anrufe"]>.fi-app-nav-count{background:#d70015} @media(max-width:1280px){ .fi-app-nav .fi-nav-item>.fi-app-nav-count{position:absolute!important;top:2px;right:6px;width:auto!important;height:auto!important;min-width:16px;margin:0!important;padding:0 4px;overflow:visible!important;clip-path:none!important;font-size:10px;line-height:16px} } /* Iconleiste in Detailansichten (Nutzerauftrag 25.10.2026): reine Icons ohne Rahmen und Fläche; Hover/Fokus zeigt eine dezente runde Fläche. Gruppen nur durch Abstand getrennt, Zuständigkeit rechts. */ [data-detail-actions] :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost):not([data-ui-logo-frame],.active,.is-active,[aria-pressed="true"],:disabled,[aria-disabled="true"],.is-inactive,[inert] *){border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important} [data-detail-actions] :is(.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost):not([data-ui-logo-frame],:disabled,[aria-disabled="true"],.is-inactive,[inert] *):is(:hover,:focus-visible){border:0!important;background:var(--fi-hover-background,#f3f6f8)!important} [data-detail-actions]>.fi-detail-toolbar-end{margin-left:auto} .fi-detail-kicker-icon{font-size:14px} .fi-detail-kicker-icon--success{color:var(--fi-pair-gruen-text)} .fi-detail-kicker-icon--danger{color:var(--fi-pair-rot-text)} .fi-detail-kicker-icon--warning{color:var(--fi-pair-gelb-text)} .fi-detail-kicker-icon--info{color:var(--fi-accent)} /* Chips im Detailkopf: feste Tonpalette der Vorlage. */ /* Navigationspunkte als Schaltfläche (z. B. „ChatGPT fragen“) wie Links. */ .fi-app-nav button.fi-nav-item{border:0;background:transparent;font:inherit;text-align:left;cursor:pointer} /* Kundenakte wie Vorlage (ersetzt die Einzelwerte oben): ruhige Spalte mit Linie links, Alarm als roter Hinweis, Vorgänge als graue Zeilen. */ .fi-kundenakte-panel{gap:0} .fi-kundenakte-kicker{margin:0 0 10px;color:var(--fi-section-label-color);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .fi-kundenakte-avatar{background:var(--line);color:var(--ink)} .fi-kundenakte-identity>strong{color:var(--ink);font-size:15px;font-weight:700;overflow-wrap:anywhere} .fi-kundenakte-identity>span{color:var(--sub);font-size:12px} .fi-kundenakte-alarm{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:8px 10px;border-radius:8px;background:#fde7e9;color:#a1000f;font-size:12px;line-height:1.4} .fi-kundenakte-alarm>.ti{flex:none;margin-top:1px;font-size:14px} .fi-kundenakte-actions{margin:14px 0 4px} .fi-kundenakte-actions>.btn{justify-content:center} .fi-kundenakte-ways{display:block;margin:6px 0 0;color:var(--sub);font-size:12px;line-height:1.6;overflow-wrap:anywhere} .fi-kundenakte-section{gap:0;margin-top:20px} .fi-kundenakte-title{margin:0 0 8px;color:var(--ink);font-size:13px;font-weight:700} .fi-kundenakte-count{padding:0 7px;border-radius:999px;background:var(--fi-block);color:#4a5560;font-size:11px;font-weight:600} .fi-kundenakte-record{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:4px;padding:8px 10px;border-radius:6px;background:var(--fi-block);color:var(--ink);font-size:13px;text-decoration:none} .fi-kundenakte-record:hover{background:#e3e9ee} .fi-kundenakte-record-main{display:flex;flex:1 1 auto;flex-direction:column;min-width:0} .fi-kundenakte-record-main>strong{font-size:12px} .fi-kundenakte-record-main>.fi-badge{align-self:flex-start} .fi-kundenakte-record-main>span{overflow:hidden;color:var(--sub);font-size:12px;text-overflow:ellipsis;white-space:nowrap} .fi-kundenakte-chip{flex:none;padding:1px 8px;border-radius:999px;background:var(--fi-accent-soft,#e3f4fd);color:var(--fi-accent-text,#0b74bd);font-size:11px;font-weight:600;white-space:nowrap} .fi-kundenakte-contact{grid-template-columns:14px minmax(0,1fr) auto;padding:6px 0;border-bottom:1px solid var(--fi-block);font-size:12px} .fi-kundenakte-contact>.ti{font-size:14px} .fi-kundenakte-empty{margin:0;color:var(--sub);font-size:12px} .fi-kundenakte-more{display:inline-block;margin-top:14px;color:var(--fi-accent);font-size:12px;text-decoration:none} .fi-kundenakte-more:hover{text-decoration:underline} @media(min-width:1400px){ .fi-detail-shell:not(.mail-detail)>.fi-kundenakte:not([hidden]){padding:22px 24px} /* Steht die Akte daneben, zeigt nur sie den Kontaktalarm; im Anrufdetail entfallen Warndreieck und Hinweis. */ .fi-call-detail:has(>.fi-kundenakte:not([hidden])) :is(#callDetailAlarm,#callDetailTitle .fi-contact-alarm){display:none!important} } /* Seitenteilung wie Vorlage: Liste schmal auf der Blockfläche, Detail als durchgehende weiße Fläche bis an den rechten und unteren Rand, ohne runde Ecken und ohne Abstand; Akte daneben nur durch eine graue Linie getrennt. */ @media(min-width:901px){ .fi-main .fi-service-layout:has(>.fi-service-list-panel){grid-template-columns:clamp(280px,24vw,340px) minmax(0,1fr);gap:0;column-gap:0} .fi-main .fi-service-layout:has(>.fi-service-list-panel)>.fi-service-detail{border-radius:0} .fi-main .fi-service-layout:has(>.fi-service-list-panel)>.fi-service-list-panel{padding-right:8px} .fi-main .mail-workspace{column-gap:0} .fi-main .mail-workspace>.mail-detail{border-radius:0} } /* Ohne Kopfzeile (wie Vorlage): Inhalte beginnen oben mit ihrer Überschrift; leere Listenfüße entfallen. */ .fi-app-content>.fi-shell{padding-top:0} .fi-main>.fi-page-heading:first-of-type{padding-top:14px} .workspace-footer:empty{display:none} /* Uhrzeit, Datum und Wetter auf „Heute“ rechts neben der Begrüßung. */ .fi-main:has(>.fi-today-context){position:relative} .fi-today-context{position:absolute;top:14px;right:24px;z-index:2;color:var(--sub);font-size:12px} @media(max-width:900px){.fi-today-context{position:static;padding:0 8px 4px}} /* Benutzer unten links: Glocke als runder Knopf, ungelesene Benachrichtigungen als blauer Punkt. */ .fi-app-user .fi-user-menu-badge{top:-2px;right:-2px;box-sizing:border-box;width:10px!important;min-width:10px!important;max-width:10px!important;height:10px!important;min-height:10px!important;max-height:10px!important;padding:0!important;overflow:hidden;aspect-ratio:1;border:2px solid var(--fi-block);border-radius:50%!important;background:var(--fi-accent);color:transparent;font-size:0;line-height:0} .fi-app-user .fi-user-menu-badge>*{display:none} /* Detailfläche wie Vorlage: Weiß über die volle Höhe, Iconleiste ohne Linie und Schatten, Akte breiter mit eingerückter senkrechter Linie. */ [data-detail-actions]{box-shadow:none!important} :root{--fi-kundenakte-width:380px} @media(min-width:1400px){ .fi-detail-shell:not(.mail-detail)>.fi-kundenakte:not([hidden]){top:22px;bottom:24px;padding:0 24px} } /* Verpasste Anrufe (Grundstil 2026): kein roter Balken; verpasst = rotes Icon, offen und unbearbeitet = fetter Name mit blauem Punkt, dringend = roter Chip „Rückruf fällig“. */ .fi-call-master-layout>.fi-service-list-panel .call-master-row.is-overdue:not(.is-active,.is-live,.is-selected){box-shadow:none!important} .fi-call-master-layout>.fi-service-list-panel .call-master-row.is-overdue:is(.is-active,.is-live,.is-selected){box-shadow:var(--fi-row-selected-shadow)!important} .fi-call-master-layout>.fi-service-list-panel .call-master-row .direction-icons.status-missed{color:#d70015} .fi-call-master-layout>.fi-service-list-panel .call-master-row.is-overdue:not(.is-unhandled) .mail-thread-top strong{font-weight:600} .fi-call-master-layout>.fi-service-list-panel .call-master-row.is-unhandled .mail-thread-top strong{font-weight:700} /* Listenkopf im Raster der Listenspalte: Titel ganz oben, darunter Suche/Filter, Liste, Fuß. */ :is(.fi-call-master-layout,.fi-master-record-layout)>.fi-service-list-panel:has(>.fi-list-head){grid-template-rows:auto auto minmax(0,1fr) auto} :is(.fi-call-master-layout,.fi-master-record-layout)>.fi-service-list-panel:has(>.fi-list-head)>.fi-list-head{grid-area:1/1} :is(.fi-call-master-layout,.fi-master-record-layout)>.fi-service-list-panel:has(>.fi-list-head)>.workspace-toolbar{grid-area:2/1} :is(.fi-call-master-layout,.fi-master-record-layout)>.fi-service-list-panel:has(>.fi-list-head)>:is(.fi-service-list,.fi-empty-state){grid-area:3/1} :is(.fi-call-master-layout,.fi-master-record-layout)>.fi-service-list-panel:has(>.fi-list-head)>.workspace-footer{grid-area:4/1} /* Kundenakte: Kontaktwege mit Art und Standardkennzeichnung; farbige Icons bei den letzten Kontakten. */ .fi-kundenakte-ways{display:grid;gap:4px;margin:8px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.4} .fi-kundenakte-ways>li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline;gap:8px;min-width:0} .fi-kundenakte-way-label{overflow:hidden;color:var(--sub);text-overflow:ellipsis;white-space:nowrap} .fi-kundenakte-way-value{overflow:hidden;color:var(--ink);text-overflow:ellipsis;white-space:nowrap} .fi-kundenakte-way-default{padding:0 6px;border-radius:999px;background:var(--fi-accent-soft,#e3f4fd);color:var(--fi-accent-text,#0b74bd);font-size:10px;font-weight:600;line-height:16px} .fi-kundenakte-contact>.ti.fi-detail-kicker-icon--success{color:var(--fi-pair-gruen-text)} .fi-kundenakte-contact>.ti.fi-detail-kicker-icon--danger{color:var(--fi-pair-rot-text)} .fi-kundenakte-contact>.ti.fi-detail-kicker-icon--warning{color:var(--fi-pair-gelb-text)} .fi-kundenakte-contact>.ti.fi-detail-kicker-icon--info{color:var(--fi-accent)} /* Listeneintrag Zeile 1: Name, dahinter klein die Firma. */ .fi-list-identity>.fi-list-name-extra{flex:0 1 auto;min-width:0;margin-left:calc(.25em - var(--fi-list-content-gap,10px));overflow:hidden;color:var(--sub);font-size:12px;font-weight:400;text-overflow:ellipsis;white-space:nowrap} .fi-list-identity>strong{flex:0 1 auto;min-width:0} /* E-Mail (Grundstil 2026): Postfächer als Schublade über der Hauptnavigation; Liste und Detail nutzen die volle Breite. */ .fi-list-switch{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer} .fi-list-switch-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-list-switch>.ti{flex:none;color:var(--sub);font-size:15px} .fi-list-switch:hover>.fi-list-switch-label{color:var(--fi-accent)} .mail-list-head>.fi-list-title{flex:1 1 auto} .mail-list-head>.btn{flex:none} .fi-main .mail-workspace>.mail-sidebar.fi-drawer{position:fixed;top:0;bottom:0;left:0;z-index:1200;width:min(320px,calc(100vw - 48px));height:auto!important;max-height:none!important;margin:0;padding:12px 10px 16px;overflow-y:auto;border-radius:0;background:var(--paper)!important;box-shadow:12px 0 40px rgba(47,58,69,.16)!important;transform:translateX(calc(-100% - 60px));visibility:hidden;transition:transform .24s ease,visibility .24s} .fi-main .mail-workspace>.mail-sidebar.fi-drawer.is-open{transform:none;visibility:visible} .fi-drawer-head{display:flex;align-items:center;gap:8px;padding:6px 8px 12px} .fi-drawer-head>strong{flex:1 1 auto;font-size:16px} .fi-drawer-backdrop{position:fixed;inset:0;z-index:1190;background:rgba(47,58,69,.18);opacity:0;pointer-events:none;transition:opacity .2s ease} .fi-drawer-backdrop.is-open{opacity:1;pointer-events:auto} @media(min-width:961px){.fi-main .mail-workspace{grid-template-columns:clamp(280px,24vw,340px) minmax(0,1fr)!important}} @media(prefers-reduced-motion:reduce){.fi-main .mail-workspace>.mail-sidebar.fi-drawer,.fi-drawer-backdrop{transition:none}} /* E-Mail-Liste: Spalte als Abfolge von oben nach unten (Titel, Block aus Postfach-Umschalter und Suche, Tageskopf, Liste); kein festes Raster, damit Nachladen nichts verschiebt. */ .fi-main .mail-workspace>.mail-thread-panel{display:flex!important;flex-direction:column} .fi-main .mail-workspace>.mail-thread-panel>:not(.mail-thread-list){flex:none} .fi-main .mail-workspace>.mail-thread-panel>.mail-thread-list{flex:1 1 auto;min-height:0;overflow:auto} .mail-thread-toolbar>.fi-list-switch{display:flex;width:100%;height:34px;margin-bottom:8px;padding:0 12px 0 14px;border:1px solid var(--fi-control-border-color,#d7dee4);border-radius:999px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:600} .mail-thread-toolbar>.fi-list-switch>.fi-list-switch-label{flex:1 1 auto;text-align:left} .mail-thread-toolbar>.fi-list-switch:hover{border-color:#c9d4dc} .mail-thread-toolbar>.fi-list-switch:hover>.fi-list-switch-label{color:var(--ink)} /* E-Mail-Einträge wie Anrufe: volle Breite, kleines rundes Absendersymbol, Schnellaktionen als schwebende Leiste bei Hover/Fokus (Touch: unter dem Eintrag). */ .fi-main .mail-workspace .mail-thread-list .mail-thread{grid-template-columns:minmax(0,1fr);min-height:0;padding:0} .fi-main .mail-workspace .mail-thread-list .mail-thread>.mail-thread-main{grid-template-columns:24px minmax(0,1fr);align-items:start;gap:8px;padding:10px 12px 10px 14px} .fi-main .mail-workspace .mail-thread-list{--fi-mail-sender-size:24px;--fi-mail-sender-radius:999px} .fi-main .mail-workspace .mail-thread-list .mail-thread .mail-thread-identity>.mail-thread-state{width:24px;height:24px;border-radius:999px;font-size:10px} .fi-main .mail-workspace .mail-thread-list .mail-thread>.mail-thread-quick-actions{position:absolute;top:6px;right:8px;z-index:1;flex-direction:row;align-self:auto;padding:2px;border-radius:999px;background:var(--paper);box-shadow:var(--fi-shadow-soft);opacity:0;pointer-events:none;transition:opacity .12s} .fi-main .mail-workspace .mail-thread-list .mail-thread:is(:hover,:focus-within)>.mail-thread-quick-actions{opacity:1;pointer-events:auto} .fi-main .mail-workspace .mail-thread-list .mail-thread>.mail-thread-quick-actions.is-placeholder{display:none} @media(hover:none){ .fi-main .mail-workspace .mail-thread-list .mail-thread>.mail-thread-quick-actions{position:static;grid-row:2;justify-content:flex-end;padding:0 12px 8px;background:transparent;box-shadow:none;opacity:1;pointer-events:auto} } /* E-Mail-Zeilen wie Anrufzeilen: Betreffzeile in Grundschrift, graue Zeile mit einer kompakten Kennzeichnung; ungelesen fett mit blauem Punkt. */ .fi-main .mail-workspace .mail-thread-list .mail-thread .mail-thread-top strong{font-size:14px;font-weight:600} .fi-main .mail-workspace .mail-thread-list .mail-thread .mail-thread-subject-line>.mail-thread-response-icons,.fi-main .mail-workspace .mail-thread-list .mail-thread .mail-thread-subject-line>.mail-thread-paperclip{flex:none;color:var(--sub);font-size:13px} .fi-main .mail-workspace .mail-thread-list .mail-thread.is-unread .mail-thread-top strong,.fi-main .mail-workspace .mail-thread-list .mail-thread.is-unread .mail-thread-subject-line>.fi-list-line-text{font-weight:700} .fi-main .mail-workspace .mail-thread-list .mail-thread{position:relative} .fi-main .mail-workspace .mail-thread-list .mail-thread.is-unread::before{content:"";position:absolute;top:19px;left:4px;width:7px;height:7px;border-radius:999px;background:var(--fi-accent);pointer-events:none} /* Listenspalten einheitlich (Referenz Anrufe): gleicher Innenabstand des Suchblocks und gleicher Abstand zum Detail. */ .fi-main .mail-workspace>.mail-thread-panel>.mail-thread-toolbar{padding:8px 10px} @media(min-width:901px){.fi-main .mail-workspace>.mail-thread-panel{padding-right:8px}} /* Listenspalte wie Vorlage (Anrufe, E-Mail und Vorgangslisten): 330px, Ränder 4/14px, Titel 16px oben, Suchpille 32px, Einträge mit Icon in Zeile 1 und bündigen Folgezeilen. */ @media(min-width:901px){ .fi-main .fi-service-layout:has(>.fi-service-list-panel),.fi-main .mail-workspace{grid-template-columns:var(--fi-list-column-width,clamp(300px,26vw,380px)) minmax(0,1fr)!important} .fi-main :is(.fi-service-layout,.mail-workspace)>:is(.fi-service-list-panel,.mail-thread-panel){padding:0 14px 0 4px!important} } :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar){display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:8px;margin:0;padding:0 0 8px 6px!important} :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar) .fi-filter-bar{display:flex;flex:none;flex-direction:column;gap:8px;width:100%;margin:0;padding:0} :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar) .search-wrap{position:relative;display:block;flex:none;width:100%;height:auto;min-height:0;margin:0} :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar) .search-wrap>:is(.ti,svg.fi-icon){position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--sub);font-size:13px;pointer-events:none} :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar) .search-wrap>input[type="search"]{width:100%;height:32px;min-height:32px;padding:0 12px 0 32px;border-radius:999px;font-size:13px} :is(.fi-service-list-panel,.mail-thread-panel)>.mail-thread-toolbar>.fi-list-switch{height:32px;margin:0} /* Postfachauswahl als Karte: aktives Postfach mit Farbe, Adresse und offenen E-Mails. */ :is(.mail-thread-panel>.mail-thread-toolbar,.fi-schedule-controls)>.fi-list-switch.mail-view-switch{gap:10px;height:auto;min-height:52px;padding:8px 12px 8px 8px;border:1px solid color-mix(in srgb,var(--mail-accent) 35%,#fff);border-radius:12px;background:color-mix(in srgb,var(--mail-accent) 9%,#fff)} :is(.mail-thread-panel>.mail-thread-toolbar,.fi-schedule-controls)>.fi-list-switch.mail-view-switch:hover{border-color:var(--mail-accent)} .mail-view-switch>.mail-account-icon{display:grid;flex:none;margin:0;width:34px;height:34px;border:0;border-radius:9px;background:var(--mail-accent);color:var(--fi-content-inverse-color,#fff);font-size:18px} :is(.mail-thread-toolbar,.fi-schedule-controls) .mail-view-switch>.fi-list-switch-label{display:flex;flex-direction:column;min-width:0;margin:0;color:var(--ink);font-size:inherit} .mail-view-switch>.fi-list-switch-label>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700} .mail-view-switch>.fi-list-switch-label>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub);font-size:12px;font-weight:400} .mail-view-switch>.fi-badge{display:inline-flex;flex:none;margin:0} #mailSearchForm{flex-flow:row wrap;align-items:center} #mailSearchForm>*{flex:1 1 100%} #mailSearchForm>.search-wrap{flex:1 1 0;width:auto;min-width:0} #mailSearchForm>.mail-unread-only{flex:0 0 auto} :is(.fi-service-list-panel,.mail-thread-panel) :is(.fi-service-list,.mail-thread-list){padding:0 0 8px} :is(.fi-service-list-panel,.mail-thread-panel) .fi-record-list{grid-template-columns:minmax(0,1fr);padding:0} /* Einträge nie breiter als der Listenblock: lange Texte kürzen statt die Grid-Spalte zu weiten. */ :is(.fi-service-list-panel,.mail-thread-panel) .fi-record-list>*{min-width:0} :is(.fi-service-list-panel,.mail-thread-panel) .mail-date-divider.fi-mail-group-heading{padding:var(--fi-list-group-padding-top,10px) var(--fi-list-group-padding-x,6px) var(--fi-list-group-padding-bottom,4px)!important} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main){position:relative;display:block;min-height:0;height:auto;padding:var(--fi-list-row-padding-y,10px) var(--fi-list-row-padding-right,12px) var(--fi-list-row-padding-y,10px) var(--fi-list-row-padding-left,20px)} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main)>.mail-thread-state{position:absolute;top:calc(var(--fi-list-row-padding-y,10px) + 2px);left:var(--fi-list-row-padding-left,20px);display:flex;align-items:center;justify-content:center;width:calc(var(--fi-list-row-icon-size,15px) + 1px);height:calc(var(--fi-list-row-icon-size,15px) + 1px);margin:0;border:0!important;border-radius:0!important;background:transparent!important;font-size:var(--fi-list-row-icon-size,15px)} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main)>.mail-thread-state>:is(.ti,svg.fi-icon){font-size:var(--fi-list-row-icon-size,15px);--fi-owned-icon-size:var(--fi-list-row-icon-size,15px)} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main)>.mail-thread-body{display:flex;flex-direction:column;gap:var(--fi-list-row-line-gap,2px);min-width:0} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main)>.mail-thread-body>.mail-thread-top:first-child{padding-left:calc(var(--fi-list-row-icon-size,15px) + 7px);align-items:center} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main) .mail-thread-top strong{font-size:var(--fi-list-row-name-size,14px)} .fi-main :is(.fi-service-list-panel .fi-record-row.fi-record-row--thread,.fi-call-master-layout>.fi-service-list-panel .call-master-row>.mail-thread-main,.mail-workspace .mail-thread-list .mail-thread>.mail-thread-main) .fi-list-line{margin-top:0} .fi-main .mail-workspace .mail-thread-list .mail-thread.is-unread::before{top:17px;left:7px} .fi-badge--source{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--fi-badge-source-color,#9aa7b3) 14%,#fff);color:color-mix(in srgb,var(--fi-badge-source-color,#9aa7b3) 70%,#2f3a45)} .fi-badge--source{max-width:100%;min-width:0} .fi-badge-source-icon{flex:none;font-size:12px;line-height:1;color:var(--fi-badge-source-color,#9aa7b3)} .fi-badge-source-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* E-Mail-Detail wie Vorlage und Anrufdetail: Aktionsleiste, Kicker, großer Betreff, Chips; Zuständig als Pille rechts; Kontaktakte ab 1400px rechts. */ .mail-detail.fi-detail-shell>.mail-detail-toolbar{flex-wrap:wrap;justify-content:flex-start;gap:14px;padding:14px 28px 0;border:0;background:var(--paper);box-shadow:none} .mail-detail.fi-detail-shell>.mail-detail-subject{padding:14px 28px 12px;border:0;background:var(--paper)} .mail-detail.fi-detail-shell>.fi-detail-body{padding:18px 28px 24px} @media(max-width:900px){ .mail-detail.fi-detail-shell>:is(.mail-detail-toolbar,.mail-detail-subject){padding-inline:16px} .mail-detail.fi-detail-shell>.fi-detail-body{padding:16px} } @media(min-width:1400px){.mail-detail.fi-detail-shell>.fi-kundenakte:not([hidden]){padding:22px 24px}} [data-detail-actions]>.fi-detail-toolbar-end{order:99} .mail-detail .mail-assignment-control{gap:6px;min-width:0;height:28px;padding:0 4px 0 10px;border:1px solid var(--fi-control-border-color,#d7dee4);border-radius:999px;background:var(--paper)} .mail-detail .mail-assignment-control>.ti{font-size:14px} .mail-detail .mail-assignment-control select{height:26px;min-height:0;padding:0 24px 0 0;border:0;background-color:transparent;box-shadow:none;font-size:12px} .mail-detail .mail-assignment-control.is-assigned{border-color:var(--fi-accent);color:var(--fi-accent-text)} .fi-detail-kicker>.fi-btn--mini{margin-left:2px} .fi-detail-chips>.fi-detail-chip-link{display:inline-flex;text-decoration:none} .fi-detail-chips>.fi-detail-chip-link>.fi-badge{height:auto;min-height:0;padding:1px 8px;border:0;border-radius:999px;background:var(--fi-accent-soft,#e3f4fd);color:var(--fi-accent-text,#0b74bd);font-size:11px;font-weight:600} .fi-detail-chips>.fi-badge--source{background:color-mix(in srgb,var(--fi-badge-source-color,#9aa7b3) 14%,#fff);color:color-mix(in srgb,var(--fi-badge-source-color,#9aa7b3) 70%,#2f3a45)} .fi-detail-head .fi-detail-title{margin:0;color:var(--ink);font-size:24px;font-weight:700;line-height:1.25;letter-spacing:normal} /* Typ-Icons: E-Mail grau, Anrufe behalten ihre Statusfarben; schmale Ansicht mit Seitenrand. */ .fi-main .mail-workspace .mail-thread-list .mail-thread>.mail-thread-main>.mail-thread-state{color:var(--sub)} @media(max-width:900px){.fi-main :is(.fi-service-layout,.mail-workspace)>:is(.fi-service-list-panel,.mail-thread-panel){padding:0 8px}} /* E-Mail-Nachrichten wie Vorlage: keine Karten, ruhige Absenderzeile, Fließtext 14px/1,6 bis 680px, Anhänge als Chips, Nachrichten durch graue Linien getrennt. */ .fi-main .mail-detail .mail-conversation>.fi-detail-section-head{min-height:0;margin:0 0 4px;padding:0!important;border:0!important;background:transparent!important} .fi-main .mail-detail .mail-conversation>.fi-detail-section-head :is(h2,h3,h4){color:var(--ink);font-size:14px!important;font-weight:700!important} .fi-main .mail-detail .mail-conversation .mail-message-body{max-width:680px;padding:12px 0 4px!important;border:0!important;background:transparent!important;color:var(--ink);font-size:14px;line-height:1.6} /* Antwortfeld wie Vorlage: Hinweiszeile unter den Nachrichten; Antwort/Weiterleitung öffnet den Editor angedockt an derselben Stelle. */ .mail-reply-dock{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)} .mail-reply-prompt{margin:0;color:var(--sub);font-size:13px} .mail-reply-dock:has(>#mailComposerDialog[open])>.mail-reply-prompt{display:none} .mail-reply-link{padding:0;border:0;background:none;color:var(--fi-accent);font:inherit;cursor:pointer} .mail-reply-link:hover{text-decoration:underline} dialog#mailComposerDialog.is-docked{position:static!important;inset:auto!important;display:block;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;overflow:visible!important} dialog#mailComposerDialog.is-docked:not([open]){display:none} dialog#mailComposerDialog.is-docked>.fi-dialog-header{display:none} dialog#mailComposerDialog.is-docked>.fi-dialog-body{max-height:none!important;padding:0!important;overflow:visible!important} dialog#mailComposerDialog.is-docked .mail-compose{display:flex;flex-direction:column;gap:8px} dialog#mailComposerDialog.is-docked .mail-compose>label:has(>[name="subject"]){display:none} dialog#mailComposerDialog.is-docked .mail-compose input.fi-control:not([type="file"]),dialog#mailComposerDialog.is-docked .mail-compose select.fi-control{height:32px;min-height:32px;border-radius:999px;font-size:13px} dialog#mailComposerDialog.is-docked .mail-compose-body-field textarea{height:160px!important;min-height:120px!important;border-radius:8px!important;font-size:13px;line-height:1.5;resize:vertical} dialog#mailComposerDialog.is-docked>.fi-dialog-footer{justify-content:flex-end;gap:8px;margin:0;padding:10px 0 0!important;border:0!important;background:transparent!important} /* Listenspalten: Inhalte dürfen die Spalte nie aufdehnen (z. B. fünf Filter-Tabs der Anrufe); sonst läuft die Liste unter das Detail. */ :is(.fi-service-list-panel,.mail-thread-panel){min-width:0;grid-template-columns:minmax(0,1fr)} :is(.fi-service-list-panel,.mail-thread-panel)>*{min-width:0;max-width:100%} :is(.fi-service-list-panel,.mail-thread-panel)>:is(.workspace-toolbar,.mail-thread-toolbar)>*{min-width:0;max-width:100%} /* Breite aller Listenspalten zentral (Anrufe, E-Mail, Vorgangslisten). */ :root{--fi-list-column-width:clamp(300px,26vw,380px)} /* Verlauf unter der Kontaktakte wie Vorlage: Zeitleiste mit grauer Linie, blauem Punkt, Datum grau. */ .fi-kundenakte-extra{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .fi-kundenakte-timeline{margin:0;padding:0 0 0 14px;border-left:2px solid #e1e7ec;list-style:none} .fi-kundenakte-timeline>li{position:relative;padding:0 0 10px 12px;color:var(--ink);font-size:13px;line-height:1.45;overflow-wrap:anywhere} .fi-kundenakte-timeline>li::before{content:"";position:absolute;top:4px;left:-20px;width:8px;height:8px;border:2px solid var(--paper);border-radius:999px;background:var(--fi-accent)} .fi-kundenakte-timeline-date,.fi-kundenakte-timeline-actor{color:var(--sub);font-size:12px} /* Kopf der einzelnen Nachricht klebt unter dem E-Mail-Kopf, bis die nächste Nachricht ihn ablöst. */ /* Kennzeilen der Akte (Kontaktart, Aktivität): kleines graues Icon vor der Großbuchstaben-Zeile. */ .fi-kundenakte-kicker{display:flex;align-items:center;gap:6px} .fi-kundenakte-kicker>:is(.ti,svg.fi-icon){flex:none;color:var(--fi-section-label-color);font-size:14px} .fi-kundenakte-extra .fi-kundenakte-section{margin-top:0} .fi-kundenakte-kicker>.fi-kundenakte-count{text-transform:none;letter-spacing:0} /* Detailköpfe (E-Mail, Anrufe usw.): Status-, Postfach-, Zuweisungs- und Teilen-Chips mit ihren Registry-Icons; Kopieren der Absenderadresse als reines Icon. */ .fi-detail-chips :is(.fi-badge,.fi-detail-chip-link>.fi-badge){display:inline-flex;align-items:center;gap:4px} .fi-detail-chips :is(.fi-badge,.fi-detail-chip-link>.fi-badge)>:is(.ti,svg.fi-icon){display:inline-block!important;font-size:12px;line-height:1} .fi-detail-kicker>.fi-detail-kicker-action{display:inline-grid;place-items:center;width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border:0!important;border-radius:999px;background:transparent!important;color:var(--sub);box-shadow:none!important} .fi-detail-kicker>.fi-detail-kicker-action>.ti{--fi-owned-icon-size:1em;font-size:inherit!important;color:inherit!important;line-height:1} .fi-detail-kicker>.fi-detail-kicker-action:is(:hover,:focus-visible){background:var(--fi-hover-background,#f3f6f8)!important;color:inherit!important} /* Spalte ohne Akte (E-Mail ohne zugeordneten Kontakt): nur die Aktivität, ohne Trennlinie oben. */ .fi-kundenakte>.fi-kundenakte-extra:first-child{margin-top:0;padding-top:0;border-top:0} /* „Neue Absender“ über der E-Mail-Liste: dunklere Blockfläche, darin je Absender eine schmalere weiße Karte mit Genehmigen/Blockieren. */ .mail-new-senders{flex:none;margin:8px 0 4px;padding:2px 12px 12px;border-radius:12px;background:var(--fi-block-strong,#dde4ea)} .mail-new-senders-head{display:flex;align-items:center;gap:8px;padding:8px 2px;color:var(--ink);font-size:13px;font-weight:600} .mail-new-senders-list{display:flex;flex-direction:column;gap:6px} .mail-new-sender{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px;border-radius:8px;background:var(--paper);box-shadow:var(--fi-row-selected-shadow,0 6px 18px rgba(47,58,69,.08))} .mail-new-sender-main{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none} .mail-new-sender-main>.fi-mail-sender-avatar{flex:none;width:34px;height:34px;border-radius:999px} .mail-new-sender-text{display:flex;flex-direction:column;gap:1px;min-width:0} .mail-new-sender-text>strong{overflow:hidden;font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap} .mail-new-sender.is-unread .mail-new-sender-text>strong{font-weight:700} .mail-new-sender-email{overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap} .mail-new-sender-subject{display:flex;align-items:center;gap:5px;min-width:0;color:var(--sub);font-size:12px} .mail-new-sender-subject>span:not(.fi-list-count){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-new-sender-subject>.ti{flex:none;font-size:13px} .mail-new-sender-actions{display:flex;flex:none;gap:var(--fi-mini-button-gap,4px)} .mail-new-sender-actions form{margin:0} /* Genehmigen/Blockieren wie die zentralen Bestätigen-/Ablehnen-Buttons: Farbpaar Grün bzw. Rot (Fläche + Schrift), ohne Rahmen; Hover wie zentral. Höhere Gewichtung als die zentrale Iconaktion ohne Fläche. */ :root .mail-new-sender-actions .mail-new-sender-approve:is(.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){background:var(--fi-pair-gruen-surface)!important;border-color:transparent!important;box-shadow:none!important;color:var(--fi-pair-gruen-text)!important} :root .mail-new-sender-actions .mail-new-sender-block:is(.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){background:var(--fi-pair-rot-surface)!important;border-color:transparent!important;box-shadow:none!important;color:var(--fi-pair-rot-text)!important} :root .mail-new-sender-actions .mail-new-sender-approve:is(.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *):is(:hover,:focus-visible){background:#c9eedb!important;border-color:transparent!important} :root .mail-new-sender-actions .mail-new-sender-block:is(.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *):is(:hover,:focus-visible){background:#fbcfd4!important;border-color:transparent!important} /* Neue Absender als Stapel: oberste Karte vorn, bis zu zwei weitere als schmalere Ebenen darunter angedeutet. */ .mail-new-senders-list{position:relative;z-index:0} .mail-new-senders-list>.mail-new-sender{position:relative;z-index:2} .mail-new-senders-list--stack-1{padding-bottom:6px} .mail-new-senders-list--stack-2{padding-bottom:12px} :is(.mail-new-senders-list--stack-1,.mail-new-senders-list--stack-2)::before,.mail-new-senders-list--stack-2::after{content:"";position:absolute;right:8px;bottom:6px;left:8px;height:24px;border-radius:8px;background:var(--paper);box-shadow:0 2px 6px rgba(47,58,69,.08);z-index:1} .mail-new-senders-list--stack-2::before{right:8px;bottom:6px;left:8px} .mail-new-senders-list--stack-2::after{right:16px;bottom:0;left:16px;z-index:0;opacity:.8} .mail-new-senders-list--stack-1::before{bottom:0} /* Neue Absender: Karte während des Rückgängig-Fensters abgeschwächt. */ .mail-new-sender.is-pending{opacity:.55;transition:opacity .15s} /* Kopier-Icon in der Kennzeile: gleiche Größe (12px) und Farbe wie die Adresse davor. */ .fi-detail-kicker>.fi-detail-kicker-action{width:18px!important;min-width:18px!important;height:18px!important;min-height:18px!important;color:inherit!important;font-size:inherit!important} /* Hinweis mit Rückgängig-Fenster: oben Icon ohne Rahmen und Text, darunter läuft ein dunklerer Fortschritt über die Fläche; unten weiße Aktionsleiste mit Icon-Buttons. */ .fi-toast.fi-toast--countdown{position:fixed;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0;padding:0!important;overflow:hidden} .fi-toast--countdown::before{content:"";grid-area:1/1/2/-1;align-self:stretch;justify-self:start;width:0;background:rgba(0,88,176,.12);animation:fi-toast-countdown var(--fi-toast-countdown,5s) linear forwards;pointer-events:none} .fi-toast--countdown>.fi-toast-icon{grid-area:1/1;z-index:1;width:auto;height:auto;margin:0;padding:12px 0 12px 14px;border:0!important;border-radius:0;background:transparent!important;color:var(--fi-status-fg)} .fi-toast--countdown>.fi-toast-message{grid-area:1/2;z-index:1;padding:12px 14px 12px 10px;font-size:13px!important;font-weight:600!important;overflow-wrap:anywhere} .fi-toast--countdown>.fi-toast-actions{grid-area:2/1/3/-1;justify-content:flex-end;gap:8px;padding:10px 12px;background:var(--paper);border-top:1px solid var(--fi-status-border,#b3d4ff)} @keyframes fi-toast-countdown{from{width:0}to{width:100%}} @media(prefers-reduced-motion:reduce){.fi-toast--countdown::before{animation-duration:0s;width:100%;opacity:.5}} /* E-Mail-Liste: geschlossener Umschlag bei ungelesen, offener Umschlag bei gelesen (folgt live der Klasse .is-unread). */ .mail-thread:not(.is-unread) .mail-thread-state>.mail-thread-icon-unread,.mail-thread.is-unread .mail-thread-state>.mail-thread-icon-read{display:none} /* Anrufe: Datumsbereich in der Liste als eine kompakte Zeile (von – bis), Kalender-Icon ohne Rahmen. */ .fi-call-master-toolbar .fi-call-master-dates.fi-filter-bar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;--fi-datepicker-filter-width:132px} .fi-call-master-dates .fi-date-field{flex:0 0 var(--fi-datepicker-filter-width);width:var(--fi-datepicker-filter-width)} .fi-call-master-dates .fi-date-field>input.fi-control.fi-datepicker:not(.fi-time-field){padding-inline-end:30px} .fi-call-master-dates .fi-date-field>.fi-calendar-trigger{width:26px;height:26px;inset-inline-end:4px} .fi-call-master-dates .fi-date-field>.fi-calendar-trigger .ti{font-size:16px} .fi-call-master-dates>.fi-filter-chips{flex:1 1 100%} /* Kalender-Icon im Datumsfeld ohne Hover-Fläche; der Tastaturfokus bleibt über den zentralen Fokusumriss sichtbar. */ .fi-date-field>.fi-calendar-trigger.fi-icon-plain:is(:hover,:focus-visible){background:transparent!important;border-color:transparent!important;box-shadow:none!important} /* Farbregel für Buttons (Nutzerauftrag 26.10.2026): Bestätigen grün, Ablehnen/Abbrechen/Löschen rot – immer helle Fläche mit kräftiger, fetter Schrift. Iconaktionen zeigen nur das farbige Icon; die helle Farbfläche erscheint bei Hover/Fokus. Den Ton setzt ausschließlich das Aktionsregister. */ .fi-btn--tone-success{background:var(--fi-pair-gruen-surface)!important;border-color:var(--fi-pair-gruen-surface)!important;color:var(--fi-pair-gruen-text)!important;font-weight:700!important} .fi-btn--tone-success:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#c9eedb!important;border-color:#c9eedb!important} .fi-btn--tone-danger{background:var(--fi-pair-rot-surface)!important;border-color:var(--fi-pair-rot-surface)!important;color:var(--fi-pair-rot-text)!important;font-weight:700!important} .fi-btn--tone-danger:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)):not(:disabled){background:#fbcfd4!important;border-color:#fbcfd4!important} :root :is(.fi-action-icon--ghost,.mail-toolbar-icon,.fi-btn--mini,.fi-btn--icon):is(.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success,.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger):not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){background:transparent!important;font-weight:inherit!important} :root :is(.fi-action-icon--ghost,.mail-toolbar-icon,.fi-btn--mini,.fi-btn--icon).fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success:not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){color:var(--fi-pair-gruen-text)!important} :root :is(.fi-action-icon--ghost,.mail-toolbar-icon,.fi-btn--mini,.fi-btn--icon).fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger:not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){color:var(--fi-pair-rot-text)!important} :root :is(.fi-action-icon--ghost,.mail-toolbar-icon,.fi-btn--mini,.fi-btn--icon).fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success:not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *):is(:hover,:focus-visible){background:var(--fi-pair-gruen-surface)!important} :root :is(.fi-action-icon--ghost,.mail-toolbar-icon,.fi-btn--mini,.fi-btn--icon).fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger:not(:disabled,[aria-disabled="true"],.is-inactive,[inert] *):is(:hover,:focus-visible){background:var(--fi-pair-rot-surface)!important} :is(.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success,.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger):is(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){background:transparent!important;border-color:transparent!important;color:var(--sub)!important;font-weight:inherit!important} .btn:is(.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success.fi-btn--tone-success,.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger.fi-btn--tone-danger):is(:disabled,[aria-disabled="true"],.is-inactive,[inert] *){background:var(--fi-block,#eef2f5)!important} /* Bereichsüberschriften in Anruf- und E-Mail-Detail wie die Kennzeilen der Kontaktakte: kleine graue Großbuchstaben mit Icon davor (Token --fi-section-label-color). */ .fi-call-detail-body .fi-detail-section-head :is(h3,h4),.fi-main .mail-detail :is(.fi-detail-section-head :is(h2,h3,h4),.mail-conversation>.fi-detail-section-head :is(h2,h3,h4),.mail-message-attachment-label,.mail-comment-compose .fi-field>span){display:flex!important;align-items:center;gap:6px;margin:0;color:var(--fi-section-label-color)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.06em!important;line-height:1.4!important;text-transform:uppercase!important} .fi-call-detail-body .fi-detail-section-head :is(h3,h4)>:is(.ti,svg.fi-icon),.fi-main .mail-detail :is(.fi-detail-section-head :is(h2,h3,h4),.mail-message-attachment-label,.mail-comment-compose .fi-field>span)>:is(.ti,svg.fi-icon){display:inline-block!important;flex:none;color:var(--fi-section-label-color)!important;font-size:14px!important;--fi-owned-icon-size:14px} /* Anrufdetail: Bereiche durch graue Linien getrennt (Kopf, Fakten, Verlauf, Notizen, Verknüpfungen). */ .fi-call-detail.fi-detail-shell>.fi-call-detail-head{margin:0 28px;padding:14px 0 18px!important;border-bottom:1px solid var(--line)!important} .fi-call-detail.fi-detail-shell>.fi-call-detail-body>:is(.fi-detail-facts,.fi-detail-section):not([hidden])~.fi-detail-section:not([hidden]){padding-top:18px!important;border-top:1px solid var(--line)!important} @media(max-width:900px){.fi-call-detail.fi-detail-shell>.fi-call-detail-head{margin:0 16px}} /* Unbekannte Nummer: rechter Block wie die Kontaktakte; auf schmalen Fenstern unter dem Detail. */ .fi-call-unknown .search-wrap{position:relative;display:block;margin:0} .fi-call-unknown .search-wrap>:is(.ti,svg.fi-icon){position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--sub);font-size:13px;pointer-events:none} .fi-call-unknown .search-wrap>input{width:100%;height:32px;min-height:32px;padding:0 12px 0 32px;border-radius:999px;font-size:13px} .fi-call-unknown #callUnknownState{margin:6px 0 0} .fi-call-unknown .contact-match-list{display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:12px;background:var(--paper)} .fi-call-unknown .contact-match-list[hidden]{display:none} .fi-call-unknown .contact-match-list:empty{display:none} .fi-call-unknown-assign{display:flex;flex-direction:column;gap:8px;margin-top:10px} .fi-call-unknown #callUnknownCreate{align-self:flex-start} .fi-call-unknown .fi-error:empty{display:none} @media(max-width:1399px){.fi-call-detail.fi-detail-shell>.fi-call-unknown:not([hidden]){display:block;margin:0 28px 24px;padding-top:18px;border-top:1px solid var(--line)}} /* Farbvorgaben: benannte Farbpaare des Standardthemas „Grundstil 2026“ (fiUiColorPairDefaults). Buttons und Detail-Chips verwenden dieselben Paare. */ :root{ --fi-section-label-color:#9aa7b3; --fi-pair-gruen-surface:#e3f6ec;--fi-pair-gruen-text:#17693f; --fi-pair-rot-surface:#fde7e9;--fi-pair-rot-text:#b00012; --fi-pair-blau-surface:#e3f4fd;--fi-pair-blau-text:#0b74bd; --fi-pair-gelb-surface:#fdf1dc;--fi-pair-gelb-text:#a35f00; --fi-pair-grau-surface:#eef2f5;--fi-pair-grau-text:#4a5560; --fi-pair-tuerkis-surface:#dff7f9;--fi-pair-tuerkis-text:#0a7f88; } .fi-color-themes{display:grid;gap:16px} .fi-color-pair-sample{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--fi-pair-surface,var(--fi-pair-grau-surface));color:var(--fi-pair-text,var(--fi-pair-grau-text));font-size:11px;font-weight:700;white-space:nowrap} .fi-color-swatch{display:inline-block;width:14px;height:14px;border:1px solid var(--line);border-radius:4px;background:var(--fi-swatch,transparent);vertical-align:-2px} .fi-color-theme-table td:first-child{width:1%} .fi-ui-color-palette{margin-bottom:16px} .fi-ui-color-palette .fi-card-body{display:grid;gap:10px} .fi-ui-color-palette-theme{display:grid;gap:4px} .fi-ui-color-palette-theme>.fi-row{flex-wrap:wrap;gap:6px} .fi-ui-color-select{display:flex;align-items:center;gap:8px;min-width:0} .fi-ui-color-select>.fi-color-swatch{flex:none;width:20px;height:20px} .fi-ui-color-select>select{flex:1;min-width:0} /* Verlauf (fi-detail-route, z. B. Anrufverlauf): Schritt-Badges in den Farbpaaren der Buttons – Bestätigt grün, Abbruch rot, Hinweis gelb, Zuständigkeit blau, sonst grau; fett, ohne Rahmen. */ .fi-detail-route-step[data-step-state]>.fi-detail-route-content>.fi-badge,.fi-detail-route-step>.fi-detail-route-content>.fi-badge{border-color:var(--fi-pair-grau-surface);background:var(--fi-pair-grau-surface);color:var(--fi-pair-grau-text);font-weight:700} .fi-detail-route-step[role]>.fi-detail-route-content>.fi-badge:is(.fi-badge--success,.fi-badge--success){border-color:var(--fi-pair-gruen-surface);background:var(--fi-pair-gruen-surface);color:var(--fi-pair-gruen-text)} .fi-detail-route-step[role]>.fi-detail-route-content>.fi-badge:is(.fi-badge--danger,.fi-badge--danger){border-color:var(--fi-pair-rot-surface);background:var(--fi-pair-rot-surface);color:var(--fi-pair-rot-text)} .fi-detail-route-step[role]>.fi-detail-route-content>.fi-badge:is(.fi-badge--warning,.fi-badge--warning){border-color:var(--fi-pair-gelb-surface);background:var(--fi-pair-gelb-surface);color:var(--fi-pair-gelb-text)} .fi-detail-route-step[role]>.fi-detail-route-content>.fi-badge:is(.fi-badge--info,.fi-badge--primary){border-color:var(--fi-pair-blau-surface);background:var(--fi-pair-blau-surface);color:var(--fi-pair-blau-text)} /* Wählen-Dialog: Trefferliste als Overlay ohne Abstand im Fluss. */ .dial-matches.customer-order-contact-results{margin:0} .customer-order-contact-results[hidden]{display:none!important} /* E-Mail-Notizen: Abstände wie im Anrufdetail – Linie → Überschrift 18px, Überschriftzeile 24px, Überschrift → Feld wie Anrufe, Feld → Speichern 11px. */ /* Benutzerfoto statt Initialen im Absender-Avatar (Mitarbeiterkonto mit Foto). */ .fi-mail-sender-avatar>.fi-mail-sender-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} /* Badge-Farbregel global (Listen, Detail, Verlauf): Töne aus den Farbpaaren der Buttons – success grün, danger rot, warning gelb, info/primary blau; helle Fläche, kräftige fette Schrift, ohne abweichenden Rahmen. */ .fi-badge.fi-badge--success{border-color:var(--fi-pair-gruen-surface);background:var(--fi-pair-gruen-surface);color:var(--fi-pair-gruen-text);font-weight:700} .fi-badge.fi-badge--danger{border-color:var(--fi-pair-rot-surface);background:var(--fi-pair-rot-surface);color:var(--fi-pair-rot-text);font-weight:700} .fi-badge.fi-badge--warning{border-color:var(--fi-pair-gelb-surface);background:var(--fi-pair-gelb-surface);color:var(--fi-pair-gelb-text);font-weight:700} .fi-badge:is(.fi-badge--info,.fi-badge--primary){border-color:var(--fi-pair-blau-surface);background:var(--fi-pair-blau-surface);color:var(--fi-pair-blau-text);font-weight:700} /* Kontaktakte: Avatar mit Benutzerfoto oder Firmenlogo (Initialen bis zum Laden bzw. ohne Bild). */ .fi-kundenakte-avatar{position:relative;overflow:hidden} .fi-kundenakte-avatar>.fi-kundenakte-avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} .fi-kundenakte-avatar>.fi-kundenakte-avatar-logo{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:6px;border-radius:inherit;background:var(--paper);object-fit:contain;opacity:0} .fi-kundenakte-avatar>.fi-kundenakte-avatar-logo.is-loaded{opacity:1} .fi-kundenakte-avatar:has(>.fi-kundenakte-avatar-logo.is-loaded){box-shadow:inset 0 0 0 1px var(--line)} .fi-kundenakte-avatar>[hidden]{display:none!important} /* E-Mail-Nachrichten (Detail, DocuHub-Herkunft, Composer-Anhänge): zusammengefasste Regeln. */ .mail-message header small{margin-top:2px;} .mail-message header time,.mail-message-head-actions time{flex:none;} .mail-message-body p{margin:0} .mail-comment-form{display:grid;gap:8px;margin-top:10px} .mail-comment-form textarea{width:100%} .mail-comment-form .btn{justify-self:end} .mail-attachments{flex-wrap:wrap;} .mail-attachment{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 8px;border:var(--fi-control-border-width,1px) solid #e1e7ec;border-radius:8px;background:#f3f6f8;color:var(--fi-text-p-color,#2f3a45);text-decoration:none;font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-attachment small{color:var(--sub);font-size:var(--fi-text-small-font-size,11px);font-weight:var(--fi-text-strong-font-weight,700)} .mail-attachment:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:var(--fi-hover-background,#f3f6f8)} .mail-message-html{max-width:100%;overflow-wrap:anywhere;line-height:1.5} .mail-message-html img{display:block;max-width:100%;height:auto;margin:8px 0;border-radius:6px} .mail-message-html table{max-width:100%;border-collapse:collapse} .mail-message-html td,.mail-message-html th{padding:4px 6px;vertical-align:top} .mail-message-html blockquote{margin:10px 0;padding-left:12px;border-left:3px solid #e1e7ec;color:#7d8a96} .mail-message-html a{color:#2f3a45;text-decoration:underline} .mail-message-attachment-row .mail-attachment{background:#fff} .mail-message-actions form{margin:0} .mail-message-actions .ti{font-size:var(--fi-icon-size,18px)} .mail-message-sender{min-width:0} .mail-message-sender strong,.mail-message-sender small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-window-dialog .mail-message{max-height:none; border-radius:8px;} .mail-window-dialog .mail-message-body{max-height:none; padding:var(--fi-section-padding,12px);} .mail-window-dialog .mail-html-frame{width:100%; min-height:520px; zoom:1;} .mail-message header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:13px 16px 11px; border-bottom:0; background:#fff;} .mail-message-sender small{display:block;margin-top:2px;margin-top:3px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px);} .mail-message header>time{color:var(--sub); font-size:var(--fi-text-small-font-size,11px);} .mail-message-text{white-space:normal;overflow-wrap:anywhere;color:var(--sub); font-size:var(--fi-text-small-font-size,11px); line-height:var(--fi-text-small-line-height,1.5);} .mail-message-actions{justify-content:flex-start; padding:0 16px 10px; border-bottom:0; background:#fff;} .mail-window-dialog .mail-conversation{gap:var(--fi-block-gap,20px); padding:var(--fi-section-padding,12px); background:#fff;padding:var(--fi-section-padding,12px);} .mail-message.is-outgoing{border-color:#e1e7ec; background:#eef2f5;} .mail-message>header{padding:10px 12px 8px; border-bottom:1px solid var(--line);} .mail-message-sender strong{font-size:var(--fi-text-strong-font-size,14px); color:var(--sub);font-size:var(--fi-text-strong-font-size,14px);} .mail-message time{color:var(--sub); font-size:var(--fi-text-small-font-size,11px);} .mail-message{margin:8px 0; border:1px solid #e1e7ec; border-radius:12px; background:#fff; box-shadow:none;display:flex;flex-direction:column;overflow:hidden;transition:background .12s ease,border-color .12s ease;} .mail-message.is-collapsed .mail-message-body, .mail-message.is-collapsed .mail-message-attachment-row, .mail-message.is-collapsed .mail-message-actions, .mail-message.is-collapsed .mail-sender-rules{display:none!important;} .mail-message-collapse-toggle{display:grid; place-items:center; cursor:pointer;} .mail-attachment-docuhub:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#f7effc;} .mail-message-sender-row{display:grid;grid-template-columns:minmax(0,max-content) max-content;align-items:center;column-gap:10px;min-width:0;width:max-content;max-width:100%;min-width:0; flex:1;} .mail-message-sender-name strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .mail-message-recipient{display:block; overflow:hidden; margin-top:2px; color:var(--sub); text-overflow:ellipsis; white-space:nowrap;} .mail-message-recipient span{font-weight:var(--fi-text-strong-font-weight,700);} .mail-message.is-collapsed .mail-sender-email, .mail-message.is-collapsed .mail-message-recipient{display:none;} .mail-message.is-collapsed>header{border-bottom:0; padding-top:8px; padding-bottom:8px;padding-top:9px; padding-bottom:9px;} .mail-message-head-actions time{white-space:nowrap; font-variant-numeric:tabular-nums;} .mail-message-collapse-toggle .ti{transition:transform .12s ease;} .mail-detail>.mail-conversation{padding:6px 16px 20px; background:#fff;flex:0 0 auto; min-height:120px;flex:none; min-height:0; max-height:none; overflow:visible;} .mail-html-frame{display:block;width:100%;min-height:120px;border:0;background:#fff;display:block; width:100%; min-height:120px; max-width:100%; border:0; overflow:hidden; background:#fff;} .mail-message-plain-part + .mail-message-plain-part{margin-top:8px;} .mail-message-quote{margin:10px 0; padding:9px 11px; border-left:3px solid #aeaeb2; border-radius:0 8px 8px 0; background:#f3f6f8; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); line-height:var(--fi-text-small-line-height,1.5);} .mail-message-quote + .mail-message-plain-part{margin-top:10px;} .mail-message-quote.is-quote-collapsed{max-height:calc(5 * var(--fi-text-small-line-height,1.5) * var(--fi-text-small-font-size,11px) + 18px);overflow:hidden} .mail-message-attachment-row{flex:none;display:block; padding:10px 16px 14px; border-top:1px solid var(--line); background:#ffffff;} .mail-message-attachment-heading{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px;display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px;} .mail-message-attachment-title{display:flex; align-items:center; gap:8px; min-width:0;} .mail-message-attachment-label{display:inline-flex; align-items:center; gap:5px; padding:0; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); letter-spacing:var(--fi-text-small-letter-spacing,0px); text-transform:uppercase;} .mail-message-attachment-meta{color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); white-space:nowrap;} .mail-message-attachment-row .mail-attachments{margin:0;padding:0;border:0;flex:1;display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--fi-attachment-list-gap,7px); margin:0; padding:0; border:0;} .mail-attachment-card{display:flex; align-items:stretch; gap:5px;display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:0; min-width:0; overflow:hidden; border:var(--fi-attachment-border-width,1px) solid var(--fi-attachment-border-color,#e1e7ec); border-radius:var(--fi-attachment-radius,10px); background:var(--fi-attachment-background,#fff);} .mail-attachment-card:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){border-color:var(--fi-hover-border-color,#d7dee4); box-shadow:var(--fi-shadow-soft);} .mail-attachment-main{display:grid; grid-template-columns:var(--fi-attachment-icon-box-size,32px) minmax(0,1fr) auto; align-items:center; gap:var(--fi-attachment-content-gap,9px); min-width:0; padding:var(--fi-attachment-padding-y,8px) var(--fi-attachment-padding-x,10px); color:inherit; text-decoration:none;} .mail-attachment-type-icon{display:grid; place-items:center; width:var(--fi-attachment-icon-box-size,32px); height:var(--fi-attachment-icon-box-size,32px); border-radius:var(--fi-attachment-icon-radius,8px); background:var(--fi-attachment-icon-background,#f3f6f8); color:var(--fi-attachment-icon-color,#7d8a96); font-size:var(--fi-attachment-icon-size,18px);} .mail-attachment-info{display:grid; gap:var(--fi-attachment-text-gap,2px); min-width:0;} .mail-attachment-info strong{overflow:hidden; color:var(--fi-attachment-name-color,#2f3a45); font-size:var(--fi-attachment-name-font-size,14px); font-weight:var(--fi-attachment-name-font-weight,700); line-height:var(--fi-attachment-name-line-height,1.5); letter-spacing:var(--fi-attachment-name-letter-spacing,0px); text-align:var(--fi-attachment-name-text-align,start); text-overflow:ellipsis; white-space:nowrap;} .mail-attachment-info small{color:var(--fi-attachment-meta-color,#7d8a96); font-size:var(--fi-attachment-meta-font-size,11px); font-weight:var(--fi-attachment-meta-font-weight,700); line-height:var(--fi-attachment-meta-line-height,1.5); letter-spacing:var(--fi-attachment-meta-letter-spacing,0px); text-align:var(--fi-attachment-meta-text-align,start);} .mail-attachment-open-hint{display:inline-flex; align-items:center; gap:4px; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); white-space:nowrap;} .mail-attachment-open-hint .ti{font-size:var(--fi-icon-size,18px);} .mail-attachment-actions{display:flex; align-items:center; gap:1px; padding:var(--fi-attachment-actions-padding,5px); border-left:var(--fi-attachment-border-width,1px) solid var(--fi-attachment-actions-border-color,#f3f6f8); background:var(--fi-attachment-actions-background,#f3f6f8);} .mail-attachment-actions .mail-attachment-docuhub{padding:0; border:0; background:transparent; color:var(--sub);} .mail-attachment-actions .mail-attachment-docuhub:hover:where(:not(:disabled,[aria-disabled="true"],[aria-disabled="true"] *,.is-inactive)){background:#f7effc;} .mail-attachment-bulk-actions{display:flex; align-items:center; gap:5px; flex-wrap:wrap;display:flex; align-items:center; gap:5px; flex-wrap:wrap;} .mail-window-dialog .mail-message-attachment-row{padding:var(--fi-section-padding,12px);padding:var(--fi-section-padding,12px);} .mail-window-dialog .mail-message-attachment-row .mail-attachments{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));} .mail-conversation{padding:8px 12px 14px; background:#f3f6f8;flex-direction:column;position:relative; gap:0; padding-top:10px;} .mail-conversation>.mail-message{flex:none; min-height:0; max-height:none; overflow:hidden;margin:0 0 14px; border:1px solid #e1e7ec; border-radius:16px; background:#fff; box-shadow:none;position:relative; margin:0 0 10px 0; border-radius:12px; border-color:#e1e7ec;} .mail-conversation>.mail-message.is-incoming{border-left:3px solid #d7dee4;} .mail-conversation>.mail-message.is-outgoing{margin-left:0; background:#fff;border-left:3px solid #d7dee4; background:#eef2f5;} .mail-message-thread-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; cursor:pointer;padding:11px 14px 10px;} .mail-message-thread-main{display:grid; grid-template-columns:30px minmax(0,1fr); gap:9px; min-width:0; flex:1;grid-template-columns:32px minmax(0,1fr);} .mail-message-sender-name{display:flex; align-items:center; gap:7px; min-width:0;flex-wrap:wrap; row-gap:4px;} .mail-message-sequence{flex:none; color:var(--sub); font-size:var(--fi-text-small-font-size,11px); font-weight:var(--fi-text-strong-font-weight,700); white-space:nowrap;} .mail-message-head-actions{flex:none;display:flex; align-items:center; gap:7px;align-self:flex-start; padding-top:2px;} .mail-message.is-collapsed{background:#ffffff;background:#f3f6f8;} .mail-message.is-collapsed .mail-message-thread-head{min-height:48px;} .mail-message.is-latest{box-shadow:var(--fi-shadow-soft);border-color:#e1e7ec;border-color:#d7dee4; box-shadow:var(--fi-shadow-soft);} .mail-message.is-latest .mail-message-sequence{color:var(--fi-text-p-color,#2f3a45); font-weight:var(--fi-text-strong-font-weight,700);} .mail-message-body{flex:none; min-height:0; max-height:none; overflow:visible;padding:11px 12px 13px;padding:8px 16px 18px; background:#fff; font-size:12px; line-height:1.65;color:#4a5560;overflow-wrap:anywhere;padding:10px 16px 18px;} .mail-message:not(.is-collapsed)+.mail-message{margin-top:2px;} .fi-dialog--shared .fi-modal-content :is(h1,h2,h3,h4,h5,h6):not(:where(.fi-file-preview *,.mail-message-body *,[contenteditable] *,.fi-ui-live-preview *)){margin:0;overflow-wrap:anywhere} .fi-dialog--shared :is(.fi-dialog-header,.fi-modal-content) :is(.ti,.fi-icon):not(:where(.btn *,.mail-toolbar-icon *,.fi-action-icon--ghost *,.fi-badge *,.fi-tag *,.tab *,.fi-feedback *,.fi-error *,.fi-alert *,.fi-empty-state *,.contact-alarm *,.fi-contact-alarm,.fi-detail-route-icon *,.fi-file-preview *,.mail-message-body *,.mail-thread-body *,.mail-message-content *,.mail-html-body *,.mail-message-html *,.mail-content *,.fi-paper-label *,[contenteditable] *,.fi-ui-live-preview *,.mail-attachment-card *,.fi-spinner,.fi-table-sort-icon,.fi-disclosure>summary *)){line-height:var(--fi-icon-line-height,1);font-weight:400;flex:none;vertical-align:middle} .mail-attachment-type-icon>:is(.ti,svg.fi-icon){--fi-owned-icon-size:var(--fi-attachment-icon-size,18px)} :is(.btn,.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini,.tab,.fi-badge,.fi-tag,.fi-nav-item,.fi-history-direction,.fi-toast-icon,.fi-toast-close,.mail-attachment-type-icon)>:is(.ti:not(.fi-contact-alarm),svg.fi-icon){color:inherit} :is(.btn,.tab,.mail-toolbar-icon,.fi-btn--icon,.fi-action-icon--ghost,.fi-btn--mini,.fi-badge,.fi-tag,.fi-nav-item,.fi-history-direction,.fi-toast-icon,.fi-calendar-trigger,.fi-select-trigger,.fi-upload-icon,.fi-dialog-symbol,.mail-attachment-type-icon,.fi-table-sort)>:is(.ti:not(.fi-contact-alarm),svg.fi-icon){align-self:center;vertical-align:var(--fi-icon-inline-align,middle);margin:0;flex-shrink:0} :is(.fi-card-body,.fi-detail-section,.fi-detail-body,.fi-service-list,.fi-record-list,.mail-thread-list,.dms-detail-panel,.mail-detail,.mail-auto-loading,.mail-loading,.fi-feedback[data-feedback-type="loading"]):has(>.fi-loading:only-child){display:grid;place-items:center;align-content:center;min-height:var(--fi-loading-block-min-height,110px);text-align:center} :is(.fi-card-body,.fi-detail-section,.fi-detail-body,.mail-auto-loading,.mail-loading,.fi-feedback[data-feedback-type="loading"])>.fi-loading:only-child{margin:auto;justify-self:center;align-self:center} .mail-message-thread-main>.fi-mail-sender-avatar{flex-shrink:0} .mail-detail[data-mail-thread]>.fi-detail-body>.mail-conversation.fi-detail-section{display:grid;gap:var(--fi-detail-section-gap,var(--fi-section-gap,8px));padding:var(--fi-detail-section-padding,var(--fi-section-padding,12px));background:var(--fi-box-background,#ffffff);align-content:start;border:0;box-shadow:none;max-height:none;overflow:visible;} .mail-detail[data-mail-thread] .mail-conversation>.mail-message{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0; background:var(--paper,#fff);box-shadow:none;} .mail-detail[data-mail-thread] .mail-message>header{padding:var(--fi-section-padding,12px);border-bottom:0;background:transparent;} .mail-detail[data-mail-thread] .mail-message-thread-main{grid-template-columns:var(--fi-mail-sender-size,32px) minmax(0,1fr);gap:var(--fi-list-content-gap,10px);} .mail-detail[data-mail-thread] .mail-message-sender-row{width:auto;grid-template-columns:minmax(0,1fr);gap:var(--fi-inline-gap,8px)} .mail-detail[data-mail-thread] .mail-message-sender-name{gap:var(--fi-inline-gap,8px)} .mail-detail[data-mail-thread] .mail-message-sender-name strong{color:var(--ink);white-space:normal} .mail-detail[data-mail-thread] .mail-message-head-actions{flex-wrap:wrap;justify-content:flex-end;gap:var(--fi-inline-gap,8px)} .mail-detail[data-mail-thread] .mail-message-body{padding:0 var(--fi-section-padding,12px) var(--fi-section-padding,12px)} .mail-detail[data-mail-thread] .mail-message>.fi-detail-footer-actions{display:flex;justify-content:flex-end;padding:var(--fi-section-padding,12px);margin:0;border-top:0;} .mail-detail[data-mail-thread] .mail-conversation>.mail-message.is-latest{border:0} .mail-comment-indicator{position:relative;display:inline-flex;align-items:center} [data-detail-actions] .mail-comment-indicator.has-comments::after{content:"";position:absolute;top:calc(50% - var(--fi-mini-button-icon-size,14px) / 2 - 1px);right:calc(50% - var(--fi-mini-button-icon-size,14px) / 2 - 1px);width:5px;height:5px;border-radius:50%;background:var(--fi-status-error-color,#d70015);pointer-events:none} .mail-detail[data-mail-thread] .mail-message.is-comment .mail-message-thread-main{grid-template-columns:var(--fi-mail-sender-size,32px) minmax(0,1fr)} .mail-detail[data-mail-thread] .mail-message.is-comment .mail-message-body{white-space:normal} .mail-message.is-comment,.mail-comment-compose{scroll-margin-top:calc(var(--mail-detail-toolbar-height,0px) + 120px)} .fi-main .mail-detail .mail-conversation{gap:0!important;padding:0!important;border:0!important;background:transparent!important} .fi-main .mail-detail .mail-conversation>.mail-message.is-comment{margin:10px 0!important;padding:10px 14px!important;border-top:0!important;border-radius:8px!important;background:var(--fi-block)!important} .fi-main .mail-detail .mail-conversation>[data-mail-latest-divider]{position:static;min-height:0;margin:0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid var(--line)!important;background:transparent!important} .fi-main .mail-detail .mail-conversation>[data-mail-latest-divider]+.mail-message{padding-top:8px!important;border-top:0!important} .fi-main .mail-detail .mail-conversation .mail-message-thread-head{display:flex;align-items:center;gap:10px;min-height:0;margin:0;padding:0!important;border:0!important;background:transparent!important} .fi-main .mail-detail .mail-conversation .mail-message-thread-main{display:flex;align-items:center;gap:10px;min-width:0} .fi-main .mail-detail .mail-conversation .mail-message-thread-head .fi-mail-sender-avatar{flex:none;width:34px!important;height:34px!important;border-radius:999px!important;background:var(--line)!important;color:var(--ink);font-size:12px;font-weight:600} .fi-main .mail-detail .mail-conversation .mail-message-sender{display:flex;flex-direction:column;gap:1px;min-width:0} .fi-main .mail-detail .mail-conversation .mail-message-sender-name{display:flex;align-items:baseline;gap:8px;min-width:0} .fi-main .mail-detail .mail-conversation .mail-message-sender-name>strong,.fi-main .mail-detail .mail-conversation .mail-message-sender>strong{color:var(--ink);font-size:13px;font-weight:600} .fi-main .mail-detail .mail-conversation :is(.mail-message-sequence,.mail-message-recipient,.mail-message-sender>small){color:var(--sub);font-size:12px} .fi-main .mail-detail .mail-conversation .mail-message-head-actions{display:flex;align-items:center;gap:8px;margin-left:auto} .fi-main .mail-detail .mail-conversation .mail-message-head-actions>time{color:var(--sub);font-size:12px;font-weight:400;white-space:nowrap} .fi-main .mail-detail .mail-conversation .mail-message-text{font-size:14px;line-height:1.6} .fi-main .mail-detail .mail-conversation .mail-message.is-comment .mail-message-body{padding:2px 0 0!important;font-size:13px;line-height:1.5} .fi-main .mail-detail .mail-conversation .mail-message.is-comment .mail-message-thread-main{display:block} .mail-comment-author .ti{color:inherit} .fi-main .mail-detail .mail-conversation .mail-message-attachment-row{margin:0;padding:6px 0 0!important;border:0!important;background:transparent!important} .fi-main .mail-detail .mail-conversation .mail-message-attachment-heading{margin:0 0 6px;padding:0;border:0;background:transparent} .fi-main .mail-detail .mail-conversation .mail-message-attachment-meta{color:var(--sub);font-size:12px;font-weight:400} .fi-main .mail-detail .mail-conversation .mail-attachments{display:flex!important;flex-wrap:wrap;gap:6px!important} .fi-main .mail-detail .mail-conversation .mail-attachment-card{display:inline-flex!important;align-items:center;gap:2px;width:auto!important;min-width:0;max-width:100%;min-height:0!important;padding:0 4px 0 0!important;border:0!important;border-radius:6px!important;background:var(--fi-block)!important;box-shadow:none!important} .fi-main .mail-detail .mail-conversation .mail-attachment-card:hover{background:#e3e9ee!important} .fi-main .mail-detail .mail-conversation .mail-attachment-main{display:inline-flex!important;align-items:center;gap:6px;min-width:0;padding:5px 6px 5px 10px!important;border:0!important;background:transparent!important;color:var(--ink);font-size:12px;text-decoration:none} .fi-main .mail-detail .mail-conversation .mail-attachment-type-icon{display:inline-flex;width:auto!important;height:auto!important;padding:0!important;border:0!important;background:transparent!important;color:var(--fi-accent);font-size:13px} .fi-main .mail-detail .mail-conversation .mail-attachment-info{display:inline-flex!important;flex-direction:row!important;align-items:baseline;gap:6px;min-width:0} .fi-main .mail-detail .mail-conversation .mail-attachment-info>strong{overflow:hidden;font-size:12px;font-weight:400;text-overflow:ellipsis;white-space:nowrap} .fi-main .mail-detail .mail-conversation .mail-attachment-info>small{color:var(--sub);font-size:11px;white-space:nowrap} .fi-main .mail-detail .mail-conversation .mail-attachment-open-hint{display:none!important} .fi-main .mail-detail .mail-conversation .mail-attachment-actions{display:inline-flex;gap:2px} .fi-main .mail-detail .mail-conversation>.mail-message{margin:0!important;padding:14px 0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:clip!important} /* Alle Rahmen in E-Mails eckig: eine Regel, Wert aus UI-System → E-Mail-Anhänge (mail_frame_radius). Felder, Badges und Avatare behalten ihre eigene Form. */ .fi-main .mail-detail :is(.mail-attachment,.mail-attachment-card,.mail-conversation>.mail-message.is-comment,[data-mail-newsletter-rule],.mail-message-html img),dialog#mailComposerDialog.is-docked .mail-compose-body-field textarea{border-radius:var(--fi-mail-frame-radius,0px)!important} .fi-main .mail-detail .mail-conversation>.mail-message>.mail-message-thread-head{position:sticky;top:var(--mail-detail-header-height,0px);z-index:18;margin:-8px 0 0!important;padding:8px 0!important;background:var(--paper)!important} .fi-main .mail-detail .mail-conversation>.mail-message.is-comment>.mail-message-thread-head{position:static;margin:0!important;padding:0!important;background:transparent!important} .fi-main .mail-detail .mail-conversation>.mail-message.mail-comment-compose{padding:18px 0 14px!important} .fi-main .mail-detail .mail-comment-compose>.mail-message-body{margin:0!important;padding:0!important} .fi-main .mail-detail .mail-comment-compose form.fi-detail-group{display:grid;gap:11px;margin:0!important;padding:0!important;border:0!important;background:transparent!important} .fi-main .mail-detail .mail-comment-compose form.fi-detail-group>.fi-field{display:grid;gap:17px;margin:0} .fi-main .mail-detail .mail-comment-compose .fi-field>span{min-height:24px} .fi-main .mail-detail .mail-comment-compose .fi-detail-footer-actions{margin:0!important;padding:0!important;border:0!important} .fi-badge.fi-badge--teal{border-color:var(--fi-pair-tuerkis-surface);background:var(--fi-pair-tuerkis-surface);color:var(--fi-pair-tuerkis-text);font-weight:700} .fi-badge.fi-badge--neutral{border-color:var(--fi-pair-grau-surface);background:var(--fi-pair-grau-surface);color:var(--fi-pair-grau-text);font-weight:700} /* Vorgänge (Bestellungen, Reservierungen, Reklamationen, Inspektionen, Montagen): Listenzeilen wie Anrufe/E-Mail und Vorlage – Icon 16px ohne Rahmen, Zeile 1 Name + Datum, Zeile 2 Titel + Status-Chip, Zeile 3 Vorgang · Zuständig. */ .fi-main .fi-service-list-panel .fi-record-row.fi-record-row--thread>.mail-thread-state{color:var(--sub)} .fi-main .fi-service-list-panel .fi-record-row.fi-record-row--thread .mail-thread-top strong{font-weight:600} /* Vorgänge-Detail: Kopf wie Anrufe/E-Mail (fiVorgangDetailHead) mit Linie darunter, Bereiche durch graue Linien getrennt. */ .fi-service-detail.fi-detail-shell .fi-vorgang-detail-head{margin:0 28px;padding:14px 0 18px;border-bottom:1px solid var(--line)} .fi-service-detail.fi-detail-shell .fi-vorgang-detail-head+.fi-call-detail-body{gap:22px;padding:18px 28px 24px} .fi-service-detail.fi-detail-shell .fi-vorgang-detail-head+.fi-call-detail-body>.fi-detail-section{padding:0;border-top:0} .fi-service-detail.fi-detail-shell .fi-vorgang-detail-head+.fi-call-detail-body>:is(.fi-detail-facts,.fi-detail-section,.fi-alert):not([hidden])~.fi-detail-section:not([hidden]){padding-top:18px;border-top:1px solid var(--line)} @media(max-width:900px){.fi-service-detail.fi-detail-shell .fi-vorgang-detail-head{margin:0 16px}.fi-service-detail.fi-detail-shell .fi-vorgang-detail-head+.fi-call-detail-body{padding:16px}} /* Aktivität unter der Kontaktakte (Reservierungen): Kommentar-Icon rechts im Kicker, Details kompakt. */ .fi-kundenakte-kicker>.fi-kundenakte-kicker-action{margin-left:auto;width:22px!important;min-width:22px!important;height:22px!important;min-height:22px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--sub)} .fi-kundenakte-timeline>li .fi-history-comment{display:flex;gap:6px;margin-top:4px;color:var(--sub);font-size:12px} .fi-kundenakte-timeline>li .fi-badge{vertical-align:middle} /* Zentrale sortierbare Liste (UI-System → Sortierbare Listen). */ .fi-sortable-list{display:grid;gap:var(--fi-sortable-gap,4px);margin:0;padding:0;list-style:none} .fi-sortable-item{display:flex;align-items:center;gap:8px;min-width:0;padding:var(--fi-sortable-item-padding-y,8px) var(--fi-sortable-item-padding-x,12px);border:1px solid var(--line);border-radius:var(--fi-sortable-item-radius,6px);background:var(--paper);color:var(--ink);cursor:grab} .fi-sortable-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fi-sortable-item>small{margin-left:auto;color:var(--sub)} .fi-sortable-handle{flex:none;color:var(--sub);font-size:var(--fi-sortable-handle-size,16px)} .fi-sortable-column{display:flex;flex-direction:column;gap:var(--fi-sortable-gap,4px);min-width:0;padding:var(--fi-sortable-item-padding-y,8px) var(--fi-sortable-item-padding-x,12px);border-radius:var(--fi-sortable-item-radius,6px);background:var(--fi-block);cursor:grab} .fi-sortable-column-head{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink);font-weight:700} .fi-sortable-column:focus-visible{outline:var(--fi-focus-width,2px) solid var(--fi-focus-color,#1592e6);outline-offset:var(--fi-focus-offset,2px)} [data-ui-sortable-item].is-dragging{opacity:.55} .fi-sortable-item:focus-visible{outline:var(--fi-focus-width,2px) solid var(--fi-focus-color,#1592e6);outline-offset:var(--fi-focus-offset,2px)} /* UI-System → Fahrradfarben: Farbpunkt wie auf der Website. */ .fi-bike-color-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bike-color, #d0d0d4); vertical-align: middle; } .fi-bike-color-swatch.is-multicolor { background: conic-gradient(#d4202a, #f07d1a, #f2c500, #3a9a4a, #2bb3b1, #2c6fd1, #7b4fb0, #d4202a); } .fi-bike-colors td:nth-child(3) .fi-control { width: 110px; font-family: ui-monospace, monospace; } /* Abwesenheiten: Monats- und Jahresübersicht wie die bisherige Urlaubstabelle (Zeilen nach Gruppen, Spalten je Tag). */ .fi-absence-page{display:flex;flex-direction:column;gap:var(--fi-block-gap,20px)} .fi-absence-period{display:flex;align-items:center;justify-content:space-between;gap:var(--fi-inline-gap,8px)} .fi-absence-period>.fi-row{gap:4px} .fi-absence-grid-wrap{overflow:auto} .fi-table.fi-absence-grid{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fi-text-small-font-size,11px)} .fi-table.fi-absence-grid :is(th,td){padding:3px 2px;border-bottom:var(--fi-box-border-width,1px) solid var(--line);border-right:var(--fi-box-border-width,1px) solid var(--line);text-align:center;white-space:nowrap} .fi-table.fi-absence-grid :is(th,td):last-child{border-right:0} .fi-table.fi-absence-grid :is(thead th,tbody th[scope="row"]){font-weight:600} .fi-table.fi-absence-grid :is(thead th:first-child,tbody th[scope="row"]){position:sticky;left:0;z-index:1;min-width:180px;padding-inline:8px;background:var(--paper);text-align:left;border-right:var(--fi-box-border-width,1px) solid var(--line)} .fi-absence-day{min-width:28px} .fi-absence-day>:is(span,strong){display:block;line-height:1.3} .fi-absence-day>span{color:var(--sub);font-weight:400} .fi-table.fi-absence-grid :is(.is-sunday,.is-holiday){background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-table.fi-absence-grid .is-today{box-shadow:inset 1px 0 0 var(--fi-accent),inset -1px 0 0 var(--fi-accent)} /* Heute im Kopf wie im Kalender: Tageszahl im blauen Kreis. */ .fi-absence-day.is-today>strong{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-top:1px;border-radius:999px;background:var(--fi-accent);color:#fff} .fi-absence-group>th{padding:10px 8px 4px!important;background:var(--fi-block);color:var(--fi-section-label-color,var(--sub));font-weight:600;letter-spacing:.06em;text-align:left!important;text-transform:uppercase} .fi-absence-cell>a{display:inline-flex;text-decoration:none} .fi-badge.fi-absence-code{justify-content:center;min-width:22px;padding-inline:4px} .fi-badge.fi-absence-code.is-fixed{opacity:.45} .fi-absence-span{position:relative} .fi-absence-span>a{display:flex;width:100%} .fi-absence-bar-today{position:absolute;top:0;bottom:0;left:calc(100% * var(--fi-absence-offset) / var(--fi-absence-span));width:calc(100% / var(--fi-absence-span));box-shadow:inset 1px 0 0 var(--fi-accent),inset -1px 0 0 var(--fi-accent);pointer-events:none} .fi-absence-bar-off{position:absolute;top:0;bottom:0;left:calc(100% * var(--fi-absence-offset) / var(--fi-absence-span));width:calc(100% / var(--fi-absence-span));background:color-mix(in srgb,var(--fi-pair-grau-surface) 75%,transparent);pointer-events:none} .fi-badge.fi-absence-code.fi-absence-bar{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .fi-badge.fi-absence-bar.is-continued-before{border-start-start-radius:0;border-end-start-radius:0} .fi-badge.fi-absence-bar.is-continued-after{border-start-end-radius:0;border-end-end-radius:0} .fi-badge.fi-absence-code.is-pending{opacity:.55;outline:1px dashed currentColor;outline-offset:-1px} .fi-absence-add{display:block;width:100%;height:22px;padding:0;border:0;border-radius:var(--fi-mini-button-radius,999px);background:transparent;cursor:pointer} .fi-absence-add:is(:hover,:focus-visible){background:var(--fi-hover-background,#f3f6f8)} .fi-absence-sum{min-width:36px;font-variant-numeric:tabular-nums} .fi-absence-sum.is-negative{color:var(--fi-pair-rot-text)} .fi-absence-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .fi-absence-staffing>:is(th,td){color:var(--sub);background:var(--fi-block)} /* Arbeitszeiten (Zeiterfassung): Stempel je Tag, Salden, Verlauf, Freischaltcode. */ .fi-time-page{display:flex;flex-direction:column;gap:var(--fi-block-gap,20px)} .fi-time-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fi-mini-button-gap,4px);white-space:nowrap} .fi-table.fi-time-month :is(th,td){vertical-align:top;font-variant-numeric:tabular-nums} .fi-table.fi-time-month tr.is-sunday>*{background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-table.fi-time-month tr.is-today>th{color:var(--fi-accent)} .fi-time-page .is-negative{color:var(--fi-pair-rot-text)} .fi-time-history{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .fi-time-code{font-size:1.4em;letter-spacing:.12em} .fi-time-rules{display:flex;flex-wrap:wrap;gap:var(--fi-mini-button-gap,4px);margin:0} .fi-time-inline-form{display:inline-flex;margin:0} .fi-time-model-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--fi-inline-gap,8px)} .fi-time-model-days>label{display:grid;gap:4px;font-weight:600;text-align:center} /* Diagramme (SVG) der Zeiterfassung: eine Reihe in Akzentfarbe, Soll gestrichelt, Achse und Beschriftung zurückhaltend. */ .fi-time-figure{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 16px;border-radius:var(--fi-box-radius,12px);background:var(--paper)} .fi-chart{display:block;width:100%;height:auto;max-height:220px;overflow:visible} .fi-chart-bar{fill:var(--fi-accent,#1592e6)} .fi-chart-item:hover .fi-chart-bar{fill:var(--fi-accent-hover,#0b84d4)} .fi-chart-hit{fill:transparent} .fi-chart-axis{stroke:var(--line,#e1e7ec);stroke-width:1} .fi-chart-target{stroke:var(--ink,#2f3a45);stroke-width:2;stroke-dasharray:3 2} .fi-chart-line{fill:none;stroke:var(--fi-accent,#1592e6);stroke-width:2;stroke-linejoin:round} .fi-chart-dot{fill:var(--fi-accent,#1592e6);stroke:var(--paper,#fff);stroke-width:2} .fi-chart-dot.is-negative{fill:var(--fi-pair-rot-text,#b42318)} .fi-chart-label{fill:var(--sub,#7d8a96);font-size:10px} @media print{ .fi-time-page{page:fi-absence} .fi-time-page :is(.tabs,.fi-absence-period .btn,.fi-time-stamp .btn,form.fi-row){display:none!important} .fi-time-page .fi-table-wrap{overflow:visible!important} .fi-time-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* Druck: Monats- bzw. Jahresübersicht auf A4 quer, ohne Anwendungslayout und Bedienelemente. */ @page fi-absence{size:A4 landscape;margin:8mm} @media print{ .fi-absence-page{page:fi-absence} .fi-absence-page :is(.fi-list-head .btn,.tabs,.fi-absence-period .fi-row,.fi-absence-add){display:none!important} .fi-absence-grid-wrap{overflow:visible!important} .fi-table.fi-absence-grid{width:100%;min-width:0;font-size:7pt} .fi-table.fi-absence-grid :is(th,td){padding:1px} .fi-table.fi-absence-grid :is(thead th:first-child,tbody th[scope="row"]){position:static;min-width:0} .fi-absence-day{min-width:0} .fi-absence-page *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } .fi-absence-school>th{border-bottom:0!important;padding-block:4px 0!important} .fi-absence-school-bar.is-continued-before{border-start-start-radius:0;border-end-start-radius:0} .fi-absence-school-bar.is-continued-after{border-start-end-radius:0;border-end-end-radius:0} .fi-absence-school-bar{display:block;overflow:hidden;padding:2px 6px;border-radius:var(--fi-badge-radius,999px);background:var(--fi-pair-blau-surface);color:var(--fi-pair-blau-text);font-weight:600;white-space:nowrap;text-overflow:ellipsis} /* Kalender-Ebene Abwesenheiten (nur genehmigte, nur Namen): Woche als feste Zeile am unteren Rand, Monat als Zeile am Fuß der Tageszelle. */ .fi-schedule-week>.fi-schedule-absences{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:var(--fi-schedule-axis-width,64px) repeat(7,minmax(0,1fr));background:var(--paper);border-top:var(--fi-box-border-width,1px) solid color-mix(in srgb,var(--line) 60%,var(--sub))} .fi-schedule-absences>span:first-child{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;border-right:var(--fi-box-border-width,1px) solid var(--line);color:var(--sub)} .fi-schedule-absences-day{display:flex;flex-direction:column;gap:1px;min-width:0;padding:4px 6px;border-right:var(--fi-box-border-width,1px) solid var(--line);color:var(--sub);font-size:var(--fi-text-small-font-size,11px);line-height:1.3} .fi-schedule-absences-day>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .fi-schedule-absences-day:is(.is-sunday,.is-holiday){background-color:color-mix(in srgb,var(--fi-pair-grau-surface) 60%,#ffffff)} .fi-schedule-absences-line{display:flex;align-items:center;gap:4px;min-width:0;margin:0;padding:2px var(--fi-inline-gap,8px) var(--fi-mini-button-gap,4px);color:var(--sub);font-size:var(--fi-text-small-font-size,11px);line-height:1.3;pointer-events:none} .fi-schedule-absences-line>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* Verfassen-Dialog: Option „Als Anhang weiterleiten“ als dunkler Hinweiskasten mit kleinem Schalter links. */ .mail-compose-forward-option{box-sizing:border-box;padding:10px 14px;border:1px solid var(--ink,#2f3a45);border-radius:var(--fi-control-radius,10px);background:var(--ink,#2f3a45)} .mail-compose-forward-option[hidden]{display:none} .mail-compose .mail-compose-forward-option .fi-switch{--fi-switch-width:34px;--fi-switch-height:20px;--fi-switch-knob-size:14px;--fi-switch-gap:10px;display:inline-flex;align-items:center;gap:var(--fi-switch-gap);min-height:0;color:var(--fi-content-inverse-color,#ffffff);font-size:13px;font-weight:400}