@font-face{font-family:"Geist";src:url("fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --canvas:#FBFBFA;--flaeche:#FFFFFF;--text:#2F3437;--sekundaer:#787774;--linie:#EAEAEA;--linie-stark:#D9D9D6;
  --akzent:#12489A;--akzent-dunkel:#0D3772;--akzent-hell:#E3ECFA;
  --gruen-bg:#EDF3EC;--gruen:#346538;--gelb-bg:#FBF3DB;--gelb:#956400;--rot-bg:#FDEBEC;--rot:#9F2F2D;--blau-bg:#E1F3FE;--blau:#1F6C9F;
  /* Shape rule: containers 8 px, controls 6 px, status badges pill. */
  --radius:6px;--radius-karte:8px;
  --schrift:"Geist","Segoe UI","Helvetica Neue",sans-serif;--mono:"Geist Mono","SF Mono",Consolas,monospace;
  --leiste:236px;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--canvas);color:var(--text);font:15px/1.6 var(--schrift)}
a{color:var(--akzent)}
h1,h2,h3{margin:0;letter-spacing:-.01em}
h1{font-size:24px;font-weight:600}
h2{font-size:16px;font-weight:600}
h3{font-size:14px;font-weight:600}
.mono{font-family:var(--mono);font-size:.92em}
.sekundaer{color:var(--sekundaer)}
.icon{width:1.15em;height:1.15em;vertical-align:-.2em;fill:currentColor;flex:none}

/* ---------- Layout: sidebar + content ---------- */
.app{display:grid;grid-template-columns:var(--leiste) 1fr;min-height:100vh}
.seitenleiste{background:var(--flaeche);border-right:1px solid var(--linie);display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh}
.marke{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;color:var(--text);text-decoration:none;font-weight:600}
.marke-zeichen{width:28px;height:28px;border-radius:var(--radius);background:var(--akzent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:15px;flex:none}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:grid;grid-template-columns:20px 1fr;column-gap:12px;align-items:start;padding:10px 10px;border-radius:var(--radius);color:var(--text);text-decoration:none;border-left:3px solid transparent}
.nav a .icon{width:20px;height:20px;margin-top:2px;color:var(--sekundaer)}
.nav a small{display:block;color:var(--sekundaer);font-size:12px;line-height:1.35}
.nav a:hover{background:var(--canvas)}
.nav a[aria-current=page]{background:var(--akzent-hell);border-left-color:var(--akzent)}
.nav a[aria-current=page] .icon{color:var(--akzent)}
.nav a[aria-current=page] strong{color:var(--akzent)}
.nav a strong{font-weight:500}
.nav-abschnitt{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sekundaer);padding:16px 10px 4px}
.abmelden{display:flex;align-items:center;gap:8px;margin:0;padding:12px 10px 0;border-top:1px solid var(--linie)}
.abmelden .mono{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hauptbereich{min-width:0}
.inhalt{max-width:1120px;margin:0 auto;padding:32px 40px 64px}
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .seitenleiste{position:static;height:auto;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;border-right:0;border-bottom:1px solid var(--linie);overflow-x:auto}
  .marke{padding:0 8px 0 0}.marke span:last-child{display:none}
  .nav{flex-direction:row;gap:2px}
  .nav a{grid-template-columns:auto;padding:6px 10px;border-left:0;white-space:nowrap}
  .nav a .icon{display:none}.nav a small{display:none}.nav-abschnitt{display:none}
  .abmelden{border-top:0;padding:0 0 0 8px}.abmelden .mono{display:none}
  .inhalt{padding:20px 16px 48px}
}

/* ---------- Page header ---------- */
.seitenkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 24px}
.seitenkopf p{margin:4px 0 0;color:var(--sekundaer);max-width:62ch}
.seitenkopf .aktionen{display:flex;gap:8px;flex:none}

/* ---------- Cards and grids ---------- */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-karte);padding:20px 24px;overflow-x:auto}
.karte + .karte,.raster + .karte,.karte + .raster,.raster + .raster,.karte + form,form + .karte,.hinweis-kasten + .karte{margin-top:16px}
.raster > .karte,.zweispaltig > .karte,.zweispaltig > .karte + .karte{margin-top:0}
.karte-kopf{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.karte-kopf h2,.karte-kopf h3{flex:1}
.karte-text{margin:0 0 16px;color:var(--sekundaer);max-width:70ch}
.karte.gefahr{border-color:#F3C8CA}
.karte.gefahr h2,.karte.gefahr h3{color:var(--rot)}
.raster{display:grid;gap:16px}
.raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.raster-2,.raster-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.raster-2,.raster-4{grid-template-columns:1fr}}

/* ---------- Status tiles ---------- */
.dienst{position:relative;display:flex;align-items:center;gap:12px;padding-right:40px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-karte);padding:14px 16px}
.punkt{width:12px;height:12px;border-radius:50%;flex:none}
.punkt.gruen{background:#3E8E4A}.punkt.gelb{background:#D99A12}.punkt.rot{background:#C5453F}.punkt.blau{background:var(--akzent)}
.dienst > span:not(.punkt){flex:1;min-width:0}.dienst .info{position:absolute;top:10px;right:10px}
.dienst strong{display:block;font-weight:500}
.dienst small{color:var(--sekundaer);font-size:13px}
.kennzahl{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-karte);padding:14px 16px}
.kennzahl .zahl{font:500 26px/1.2 var(--mono);letter-spacing:-.02em}
.kennzahl small{color:var(--sekundaer);font-size:13px}
.schalter-karte{display:flex;align-items:center;gap:16px}
.wachsend{flex:1;min-width:0}
.kennzahlen-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.kennzahlen-reihe .zahl{font:500 22px/1.2 var(--mono);letter-spacing:-.02em}
@media (max-width:640px){.kennzahlen-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.schalter-karte .zustand{font-weight:600;font-size:17px}
.schalter-karte .icon-gross{width:36px;height:36px;padding:8px;border-radius:var(--radius);background:var(--gruen-bg);color:var(--gruen)}
.schalter-karte.aus .icon-gross{background:var(--gelb-bg);color:var(--gelb)}
.schalter-karte.gesperrt .icon-gross{background:var(--rot-bg);color:var(--rot)}

/* ---------- Info tooltip (CSS only, hover + keyboard focus) ---------- */
.info{position:relative;display:inline-flex;vertical-align:middle}
.info-knopf{width:18px;height:18px;border-radius:50%;border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--sekundaer);font:600 11px/1 var(--schrift);cursor:help;padding:0;display:grid;place-items:center}
.info-knopf:hover,.info-knopf:focus-visible{border-color:var(--akzent);color:var(--akzent);outline:none}
.info-text{display:none;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:20;width:300px;max-width:80vw;padding:10px 12px;border-radius:var(--radius);background:var(--text);color:#fff;font-size:13px;line-height:1.5;font-weight:400;text-align:left;box-shadow:0 4px 16px rgba(47,52,55,.12)}
.info-text::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;background:var(--text);transform:translateX(-50%) rotate(45deg)}
.info:hover .info-text,.info-knopf:focus-visible + .info-text,.info:focus-within .info-text{display:block}
.info.links .info-text{left:auto;right:0;transform:none}.info.links .info-text::before{left:auto;right:4px;transform:rotate(45deg)}
.hinweis-kasten{display:flex;gap:10px;align-items:flex-start;background:var(--blau-bg);color:var(--blau);border-radius:var(--radius);padding:10px 12px;margin:0 0 16px;font-size:14px}
.hinweis-kasten .icon{margin-top:3px}

/* ---------- Forms ---------- */
.formular{display:grid;gap:6px;max-width:460px}
.formular label{font-weight:500;margin-top:10px}
.formular label:first-of-type{margin-top:0}
.formular input,.formular select,.formular textarea,.suche input,.zeile-formular select,.zeile-formular input{font:inherit;padding:8px 10px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--flaeche);color:var(--text)}
.formular input:focus,.formular select:focus,.formular textarea:focus,.suche input:focus,.knopf:focus-visible,.knopf-leise:focus-visible,.knopf-gefahr:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.formular.breit{max-width:none}
.formular .aktion{margin-top:12px}
.hilfe{font-size:13px;color:var(--sekundaer)}
.fehler{display:block;color:var(--rot);background:var(--rot-bg);padding:8px 10px;border-radius:var(--radius);margin:4px 0 8px}
.warnung{display:block;color:var(--gelb);background:var(--gelb-bg);padding:8px 10px;border-radius:var(--radius);margin:4px 0 8px}
.erfolg{display:flex;gap:8px;align-items:center;color:var(--gruen);background:var(--gruen-bg);padding:8px 10px;border-radius:var(--radius);margin:0 0 16px}
.knopf{font:inherit;font-weight:500;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--akzent);background:var(--akzent);color:#fff;cursor:pointer;white-space:nowrap}
.knopf:hover{background:var(--akzent-dunkel)}
.knopf:active{transform:scale(.98)}
.knopf-leise{font:inherit;padding:6px 10px;border-radius:var(--radius);border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--text);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.knopf-leise:hover{background:var(--canvas)}
.knopf-leise:active{transform:scale(.98)}
.knopf-gefahr{font:inherit;font-weight:500;padding:8px 14px;border-radius:var(--radius);cursor:pointer;background:var(--rot-bg);color:var(--rot);border:1px solid var(--rot)}
.knopf-gefahr:hover{background:var(--rot);color:#fff}
.knopf-gefahr:active{transform:scale(.98)}
.suche{display:flex;gap:8px;margin:0 0 16px}.suche input{min-width:260px}
.zeile-formular{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.zeile-formular select,.zeile-formular input{padding:4px 8px}

/* Toggle switch: a checkbox with a track and a knob. */
.schalter{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--linie);cursor:pointer;margin:0;font-weight:400}
.schalter:first-of-type{border-top:0}
.schalter input{position:absolute;opacity:0;width:0;height:0}
.schalter .bahn{flex:none;width:40px;height:22px;border-radius:999px;background:var(--linie-stark);position:relative;transition:background .15s;margin-top:2px}
.schalter .bahn::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.schalter input:checked + .bahn{background:var(--akzent)}
.schalter input:checked + .bahn::after{transform:translateX(18px)}
.schalter input:focus-visible + .bahn{outline:2px solid var(--akzent);outline-offset:2px}
.schalter .beschriftung{flex:1}
.schalter .info{margin-left:auto;margin-top:3px}
.schalter .beschriftung strong{display:block;font-weight:500}
.schalter .beschriftung small{color:var(--sekundaer);font-size:13px;display:block}
.feldzeile{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--linie)}
.feldzeile:first-of-type{border-top:0}
.feldzeile strong{display:block;font-weight:500}
.feldzeile small{color:var(--sekundaer);font-size:13px;display:block}
.feldzeile input,.feldzeile select{font:inherit;padding:8px 10px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--flaeche);width:100%}
@media (max-width:640px){.feldzeile{grid-template-columns:1fr}}

/* ---------- Tabs (sub-navigation inside an area) ---------- */
.reiter{display:flex;gap:4px;border-bottom:1px solid var(--linie);margin:0 0 20px}
.reiter a{padding:8px 12px;margin-bottom:-1px;color:var(--sekundaer);text-decoration:none;border-bottom:2px solid transparent}
.reiter a[aria-current=page]{color:var(--akzent);border-bottom-color:var(--akzent);font-weight:500}
.reiter a:hover{color:var(--text)}

/* ---------- Tables, badges, empty states ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--sekundaer);padding:8px 10px;border-bottom:1px solid var(--linie);font-size:13px}
td{padding:10px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
td a,td.kunde{overflow-wrap:anywhere}td.kunde{min-width:150px;max-width:220px}td.bewertung{width:1%;white-space:nowrap}
td,th{padding-left:8px;padding-right:8px}
tr:last-child td{border-bottom:0}
.marke-status{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.gruen{background:var(--gruen-bg);color:var(--gruen)}.gelb{background:var(--gelb-bg);color:var(--gelb)}.rot{background:var(--rot-bg);color:var(--rot)}.blau{background:var(--blau-bg);color:var(--blau)}
.grau{background:var(--canvas);color:var(--sekundaer);border:1px solid var(--linie)}
.leer{display:flex;gap:12px;align-items:flex-start;padding:20px;border:1px dashed var(--linie-stark);border-radius:var(--radius-karte);color:var(--sekundaer);margin:0}
.leer .icon{margin-top:3px}
.prompt{white-space:pre-wrap;font:13px/1.55 var(--mono);background:var(--canvas);border:1px solid var(--linie);border-radius:var(--radius);padding:16px;overflow-x:auto;margin:0}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:16px}.zweispaltig > *{min-width:0}
@media(max-width:1024px){.zweispaltig{grid-template-columns:1fr}}
.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:flex}
.laden{gap:10px;align-items:center;color:var(--sekundaer);margin:0 0 16px}
.laden .punkt{background:var(--akzent);animation:puls 1s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.laden .punkt{animation:none}.schalter .bahn,.schalter .bahn::after{transition:none}}
.pruefliste{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pruefliste li{display:flex;gap:10px;align-items:center}
summary{cursor:pointer;font-weight:500;padding:6px 0}
details.abschnitt{border-top:1px solid var(--linie);padding:4px 0}
details.abschnitt:first-of-type{border-top:0}
.liste-scroll{max-height:520px;overflow:auto;border:1px solid var(--linie);border-radius:var(--radius)}
.ergebnis{margin-bottom:16px}
.schritt{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--akzent);color:#fff;font-size:13px;font-weight:600;margin-right:8px}
.anmeldung{max-width:400px;margin:64px auto}
.anmeldung .karte{padding:28px 32px}
.anmeldung .marke{padding:0 0 16px}
.stufe-legende{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--sekundaer);margin:0 0 12px}
.stufe-legende span{display:inline-flex;gap:6px;align-items:center}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--sekundaer);margin:0 0 16px}
.meta strong{color:var(--text);font-weight:500}
.voll{width:100%}
.karte textarea.voll{font:inherit;padding:8px 10px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--flaeche);color:var(--text)}
.standardwert{display:block;margin-top:6px}
.mailzeile{display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--linie)}
.mailzeile:last-child{border-bottom:0}
.mailzeile > div{flex:1;min-width:0}
.mailzeile .anfang{display:block;color:var(--sekundaer);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schalter-karte + form{margin-top:16px}
.karte-kopf .schritt{margin-right:10px}
.raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.raster-3{grid-template-columns:1fr}}
.stufen .raster > div{display:grid;gap:4px;align-content:start;padding:12px;border:1px solid var(--linie);border-radius:var(--radius)}
.stufen .raster > div .marke-status{justify-self:start}
.stufen small{color:var(--sekundaer);font-size:13px}
.kategorie{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;vertical-align:middle}
.kategorie .sekundaer{font-weight:400}
.beispiel{display:block;margin:8px 0 0;padding:8px 10px;background:var(--canvas);border:1px solid var(--linie);border-radius:var(--radius);font:13px/1.5 var(--mono);white-space:pre-wrap}
.ueberschrift-marke{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:10px}

/* ---------- Round 2: feedback, decisions ---------- */
.kennzahlen-karten .kennzahl{position:relative;padding-right:36px}
.kennzahlen-karten .kennzahl .info{position:absolute;top:10px;right:10px}
.bewerten{display:inline-flex;gap:4px;margin:0}
.bewerten .knopf-leise{padding:3px 7px;font-size:12px}
.bewerten .knopf-leise.gut{color:var(--gruen)}
.grund-legende{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.punkt-klein{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin-right:4px}
.punkt-klein.gruen{background:#3E8E4A}.punkt-klein.gelb{background:#D99A12}.punkt-klein.rot{background:#C5453F}.punkt-klein.grau{background:var(--linie-stark)}
.karte-fuellend{display:flex;flex-direction:column}
.balken{display:flex;align-items:flex-end;gap:3px;height:96px;flex:1 1 96px;min-height:96px;padding:0 2px;border-bottom:1px solid var(--linie)}
.balken-tag{position:relative;cursor:default}.balken-tag:hover span{filter:brightness(.75)}
.balken-tag::after{content:attr(data-info);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--text);color:var(--flaeche);font-size:12px;line-height:1.3;padding:5px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .1s;z-index:5}
.balken-tag:hover::after{opacity:1}
.balken-tag:nth-child(-n+6)::after{left:0;transform:none}.balken-tag:nth-last-child(-n+6)::after{left:auto;right:0;transform:none}
.balken-tag{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%;min-width:0}
.balken-tag span{display:block;flex:1;border-radius:2px 2px 0 0;min-height:1px}
.b-mails{background:var(--akzent-hell)}.b-entwuerfe{background:var(--akzent)}
.balken-tag .h0{height:0%}.balken-tag .h5{height:5%}.balken-tag .h10{height:10%}.balken-tag .h15{height:15%}.balken-tag .h20{height:20%}.balken-tag .h25{height:25%}.balken-tag .h30{height:30%}.balken-tag .h35{height:35%}.balken-tag .h40{height:40%}.balken-tag .h45{height:45%}.balken-tag .h50{height:50%}.balken-tag .h55{height:55%}.balken-tag .h60{height:60%}.balken-tag .h65{height:65%}.balken-tag .h70{height:70%}.balken-tag .h75{height:75%}.balken-tag .h80{height:80%}.balken-tag .h85{height:85%}.balken-tag .h90{height:90%}.balken-tag .h95{height:95%}.balken-tag .h100{height:100%}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.balken-achse{display:flex;justify-content:space-between;font-size:11px;color:var(--sekundaer);margin:4px 0 8px}
.bewertung-inline{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.bewertung-inline .bewerten input{padding:3px 8px;font-size:13px;border:1px solid var(--linie-stark);border-radius:var(--radius);width:180px}
.seiten{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0 0}
.suche select{font:inherit;padding:8px 10px;border:1px solid var(--linie-stark);border-radius:var(--radius);background:var(--flaeche)}
.suche label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.alarmband{display:flex;gap:12px;align-items:center;padding:10px 40px;background:var(--rot-bg);color:var(--rot);border-bottom:1px solid #F3C8CA}
.alarmband.tag{background:var(--gelb-bg);color:var(--gelb);border-bottom-color:#EAD9A6}
.alarmband > div{flex:1;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:14px}
.alarmband .icon{width:20px;height:20px}
@media (max-width:1024px){.alarmband{padding:10px 16px}}
tr.geaendert td{background:var(--gelb-bg)}
.hilfe-seite h2{margin-top:4px}
.hilfe-seite details.abschnitt summary{font-size:15px}
.hilfe-seite ol{margin:8px 0 0 20px;padding:0}
.hilfe-seite li{margin:4px 0}
.hilfe-seite pre{margin:8px 0}

.liste-knapp{margin:4px 0 0;padding-left:18px;font-size:13px}.liste-knapp li{margin:3px 0}