@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/fonts/roboto-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:EBGaramond;src:url('/assets/fonts/EBGaramond.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --tri-blue:#3ba2c4;--tri-blue-dark:#1b6d7e;--tri-blue-light:#81cde2;
  --tri-orange:#e78005;--tri-orange-light:#f8c68b;--tri-red:#d94b4b;
  --bg:#f1f4f7;--bg2:#e8edf1;--surface:#fff;--surface2:#f8fafb;--text:#16191b;--muted:#64748b;
  --border:#dce3e8;--shadow:0 16px 42px rgba(25,39,48,.10);--radius:18px;--max:1460px;
  --green:#4aa66f;--yellow:#e7a23b;--red:#d65d59;
}
:root[data-theme="dark"]{
  color-scheme:dark;--bg:#302c29;--bg2:#2a2724;--surface:#211f1d;--surface2:#2b2825;
  --text:#f3f0ec;--muted:#cbc5bd;--border:rgba(255,255,255,.09);--shadow:0 20px 54px rgba(0,0,0,.42);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Roboto,system-ui,sans-serif;line-height:1.45}
button,input,select{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:var(--max);margin:auto;padding:12px 22px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:12px;min-width:250px}.brand .theme-logo{width:154px;height:auto;display:block}.top-company{flex:1;text-align:center;font-weight:700}.top-actions{display:flex;align-items:center;gap:8px}.icon-btn,.pill,.btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:999px;cursor:pointer;transition:.15s}.icon-btn{width:38px;height:38px;display:grid;place-items:center}.icon-btn:hover,.pill:hover,.btn:hover{border-color:var(--tri-blue);background:color-mix(in srgb,var(--tri-blue) 12%,var(--surface2))}.btn{padding:9px 15px}.btn-primary{background:var(--tri-blue);border-color:var(--tri-blue);color:#fff}.btn-primary:hover{background:var(--tri-blue-dark)}
.page{max-width:var(--max);margin:auto;padding:30px 22px 60px}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:4px 0 22px}.hero h1{font-family:EBGaramond,serif;color:var(--tri-blue);font-size:38px;line-height:1.08;margin:0 0 4px}.hero p{margin:0;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.card,.panel,.code-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.kpi{padding:16px 17px;min-height:126px}.kpi .label{font-size:12px;color:var(--muted);font-weight:600;min-height:34px}.kpi .value{font-size:29px;font-weight:800;margin:5px 0 2px;letter-spacing:-.03em}.kpi .sub{font-size:11px;color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:700}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--muted)}.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.dot.unknown{background:#8b9297}
.overview-grid{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(470px,1.65fr) minmax(260px,.95fr);gap:14px;margin-bottom:24px;align-items:stretch}.panel{padding:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.panel h2,.codes-head h2{font-family:EBGaramond,serif;color:var(--tri-blue);font-size:25px;margin:0}.panel .hint{font-size:11px;color:var(--muted)}.chart{width:100%;height:250px;display:block}.chart .gridline{stroke:var(--border);stroke-width:1}.chart text{fill:var(--muted);font-size:10px}.chart .line-blue{fill:none;stroke:var(--tri-blue-light);stroke-width:3}.chart .line-orange{fill:none;stroke:var(--tri-orange);stroke-width:3}.chart .dot-blue{fill:var(--tri-blue-light)}.chart .dot-orange{fill:var(--tri-orange)}
.donut-wrap{display:flex;align-items:center;gap:30px;min-height:210px}.donut{width:170px;height:170px;border-radius:50%;position:relative;flex:0 0 auto}.donut:after{content:"";position:absolute;inset:29px;background:var(--surface);border-radius:50%}.donut-center{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center;font-weight:800}.donut-center small{font-weight:400;color:var(--muted)}.legend{display:grid;gap:7px;font-size:12px}.legend-row{display:flex;justify-content:space-between;gap:20px}.legend-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:290px}.legend-swatch{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}.bench{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.bench-box{padding:14px;border-radius:14px;background:var(--surface2);border:1px solid var(--border)}.bench-box small{color:var(--muted)}.bench-box strong{display:block;font-size:22px;margin-top:3px}
.codes-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:10px 0}.month-nav{display:flex;align-items:center;gap:8px}.month-title{min-width:155px;text-align:center;font-weight:700}.sortbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0 14px}.pill{padding:7px 11px;font-size:12px}.pill.active{background:var(--tri-blue);border-color:var(--tri-blue);color:#fff}.code-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.code-card{padding:15px 16px;cursor:pointer;border-left:5px solid var(--tri-blue-dark);transition:transform .14s,border-color .14s}.code-card:hover{transform:translateY(-2px);border-left-color:var(--tri-orange)}.code-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}.code-title h3{font-size:15px;margin:0;color:var(--tri-blue-light)}.code-title .code{font-size:10px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.metric{padding:8px 6px;background:var(--surface2);border-radius:10px;text-align:center}.metric small{display:block;font-size:9px;color:var(--muted);min-height:25px}.metric strong{display:block;font-size:14px;margin-top:2px}.privacy{margin-top:22px;font-size:11px;color:var(--muted);text-align:center}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;display:flex;align-items:center;justify-content:center;padding:22px}.modal{width:min(1020px,96vw);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.55);padding:22px}.modal-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.modal h2{font-family:EBGaramond,serif;color:var(--tri-blue);font-size:28px;margin:0}.close{border:0;background:transparent;color:var(--text);font-size:28px;cursor:pointer}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.modal .chart{height:230px}.settings{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:end;flex-wrap:wrap}.field{display:grid;gap:5px}.field label{font-size:11px;color:var(--muted)}.field input,.field select{padding:9px 11px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:10px;min-width:180px}.ampel-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ampel-month{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(520px,95vw);background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:30px}.login-card>.theme-logo{width:210px;display:block;margin:0 auto 18px}.login-card h1{font-family:EBGaramond,serif;color:var(--tri-blue);font-size:30px;text-align:center;margin:0 0 5px}.login-card>p{text-align:center;color:var(--muted);font-size:13px}.login-form{display:grid;gap:12px;margin-top:20px}.login-form .field input,.login-form .field select{width:100%;min-width:0}.error{padding:9px 11px;background:color-mix(in srgb,var(--red) 15%,var(--surface2));border:1px solid color-mix(in srgb,var(--red) 45%,var(--border));border-radius:10px;font-size:12px}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}.code-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.overview-grid{grid-template-columns:1fr 1fr}.overview-grid>.panel:nth-child(2){grid-column:1/-1;grid-row:1}.overview-grid>.panel:nth-child(1){grid-column:1}.overview-grid>.panel:nth-child(3){grid-column:2}}
@media(max-width:820px){.top-company{display:none}.brand{min-width:0}.overview-grid,.modal-grid{grid-template-columns:1fr}.overview-grid>.panel:nth-child(n){grid-column:1;grid-row:auto}.code-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(3,1fr)}.hero{align-items:flex-start;flex-direction:column}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.page{padding:20px 12px 44px}.topbar-inner{padding:9px 12px}.brand img{width:125px}.kpis{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.donut-wrap{flex-direction:column;align-items:flex-start}.codes-head{align-items:flex-start;flex-direction:column}.month-nav{width:100%;justify-content:space-between}}

.theme-logo{transition:filter .18s ease,opacity .18s ease}
.theme-logo{filter:none}
.small-value{font-size:18px!important}.tiny{font-size:12px}.role-pill{cursor:default}.role-pill:hover{border-color:var(--border);background:var(--surface2)}
.dual-chart-wrap{position:relative}.chart-legend{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--muted);margin:-2px 0 2px}.legend-line{width:20px;height:3px;border-radius:3px;display:inline-block}.legend-line.blue{background:var(--tri-blue-light)}.legend-line.orange{background:var(--tri-orange)}.chart .axis-blue{fill:var(--tri-blue-light);font-weight:700}.chart .axis-orange{fill:var(--tri-orange);font-weight:700}.chart .axis-title{font-size:9px}.dual-chart{height:260px}
.overview-grid>.panel{min-width:0}.overview-grid .donut-wrap{gap:20px;align-items:flex-start}.overview-grid .donut{width:150px;height:150px}.overview-grid .legend{min-width:0;flex:1}.overview-grid .legend-name{max-width:180px}.overview-grid .bench{grid-template-columns:1fr}.overview-grid .bench-box{padding:12px}.overview-grid .bench-box strong{font-size:20px}
.settings-page{max-width:1180px}.settings-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:4px 0 22px}.settings-title h1{font-family:EBGaramond,serif;color:var(--tri-blue);font-size:38px;line-height:1.08;margin:0 0 4px}.settings-title p{margin:0;color:var(--muted)}.settings-panel{margin-bottom:16px}.settings-panel .hint{max-width:920px;font-size:12px;line-height:1.5}.settings-table-wrap{overflow:auto;margin-top:12px}.settings-table{width:100%;border-collapse:collapse;font-size:13px}.settings-table th,.settings-table td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}.settings-table th{color:var(--muted);font-size:11px;font-weight:700;background:var(--surface2);position:sticky;top:0}.settings-table input,.settings-table select{width:100%;min-width:180px;padding:9px 10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:9px}.settings-table input:disabled,.settings-table select:disabled{opacity:.72;cursor:not-allowed}.code-settings-table th:first-child,.code-settings-table td:first-child{width:170px}.code-settings-table th:nth-child(2){width:46%}.settings-actions{position:sticky;bottom:12px;display:flex;align-items:center;gap:14px;width:max-content;margin-left:auto;padding:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.notice{margin:0 0 16px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--tri-orange) 45%,var(--border));background:color-mix(in srgb,var(--tri-orange) 9%,var(--surface));border-radius:12px;color:var(--muted);font-size:12px}.compact-settings{align-items:end}.modal-bench{margin-top:14px}
@media(max-width:820px){.settings-title{align-items:flex-start;flex-direction:column}.settings-table{min-width:680px}.overview-grid .bench{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.overview-grid .donut-wrap{flex-direction:column}.overview-grid .bench{grid-template-columns:1fr}.settings-actions{width:100%;justify-content:center;bottom:8px}.top-actions{gap:5px}.icon-btn{width:36px;height:36px}.top-actions .btn{padding:8px 10px}}


/* V1.3 Dashboard-Feinschliff */
.chart .month-divider{stroke:color-mix(in srgb,var(--border) 90%,transparent);stroke-width:1}
.month-hit{fill:transparent;cursor:pointer;transition:fill .15s ease}
.month-hit:hover{fill:color-mix(in srgb,var(--tri-blue) 8%,transparent)}
.chart-panel .year-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.year-nav-label{display:grid;justify-items:center;min-width:220px;text-align:center;line-height:1.15}
.year-nav-label strong{font-size:18px}
.distribution-panel .donut-wrap.centered{justify-content:center;align-items:center;min-height:auto;margin:6px 0 18px}
.large-donut{width:214px!important;height:214px!important}
.large-donut:after{inset:37px!important}
.distribution-panel .donut-center{font-size:21px}
.distribution-panel .donut-center small{display:block;margin-top:4px}
.segments-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.segment-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);background:var(--surface2);border-radius:12px;font-size:12px}
.segment-chip{display:inline-flex;align-items:center;gap:8px;min-width:0}.segment-index{color:var(--muted);font-size:11px;white-space:nowrap}.segment-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segment-item strong{font-size:12px}
.small-modal{width:min(620px,94vw)}
.month-modal-bench{grid-template-columns:repeat(2,1fr);margin-top:16px}
.modal-privacy{margin-top:14px}
@media(max-width:1100px){.chart-panel{grid-column:1/-1}.year-nav-label{min-width:170px}.large-donut{width:190px!important;height:190px!important}}
@media(max-width:820px){.segments-grid{grid-template-columns:1fr}.month-modal-bench{grid-template-columns:1fr}.chart-panel .year-nav{flex-wrap:wrap}.year-nav-label{order:-1;width:100%;margin-bottom:4px}}


/* V1.4 Dashboard-Feinschliff */
.distribution-panel{display:grid;grid-template-rows:auto auto 1fr;align-content:start}.panel-month{font-size:.68em;color:var(--muted);font-family:Roboto,system-ui,sans-serif;font-weight:500;margin-left:8px}.distribution-panel .panel-head{margin-bottom:6px}.distribution-panel .donut-wrap.centered{margin:2px 0 10px}.large-donut{width:236px!important;height:236px!important}.large-donut:after{inset:40px!important}.distribution-panel .donut-center{font-size:22px}.segments-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 24px;align-content:start}.segment-item{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:9px;padding:0;border:0;background:transparent;border-radius:0;font-size:14px;line-height:1.15}.segment-item .legend-swatch{margin-right:0;width:10px;height:10px}.segment-item .segment-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.segment-item strong{font-size:14px;justify-self:end}.dual-chart-wrap{margin-top:2px}.chart-legend{font-size:12px;margin:0 0 4px}.chart .axis-title{font-size:13.5px;font-weight:700}.chart .axis-tick{font-size:12.5px}.chart .month-label{font-size:12.5px}.chart .month-label.active{fill:var(--text);font-weight:700}.chart .month-focus{fill:color-mix(in srgb,var(--tri-blue) 9%,transparent)}.chart .dot-focus{stroke:var(--surface);stroke-width:1.5}.month-hit.active{fill:color-mix(in srgb,var(--tri-blue) 5%,transparent)}.chart-panel .year-nav{margin-top:12px}@media(max-width:1200px){.segments-grid{gap:5px 16px}.segment-item{font-size:13px}.segment-item strong{font-size:13px}.large-donut{width:212px!important;height:212px!important}.large-donut:after{inset:36px!important}}@media(max-width:820px){.segments-grid{grid-template-columns:1fr}.segment-item{font-size:14px}}

/* V1.4b Logo + Abstand */
.distribution-panel .donut-wrap.centered{margin:2px 0 15px}