/* Werkmass Hub, Leitstand (O25 Nachtrag 5, Muster Hub_Leitstand_Entwurf.html).
   Nur Tokens aus tokens.css, keine eigenen Farbwerte. */

/* ---------- Grundlagen ---------- */
:root{--kopf-h:64px;--band-h:0px;--spalte-l:264px;--spalte-r:300px}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + var(--band-h) + 16px)}
body{min-height:100vh}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
a{color:var(--gruen-dunkel)}
h1,h2,h3{margin:0}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.leise{color:var(--text-sekundaer)}
/* Kleine graue 0 (G4). text-sekundaer statt status-offen: status-offen schafft auf Weiss nur 3,2:1. */
.null{color:var(--text-sekundaer)!important;font-weight:500!important}
.katext{color:var(--text-sekundaer)}
:focus-visible{outline:2px solid var(--gruen-dunkel);outline-offset:2px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:30;min-height:64px;display:grid;grid-template-columns:var(--spalte-l) minmax(0,1fr) auto;align-items:center;gap:24px;padding:0 24px;background:var(--papier);border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:10px;min-width:0}
.marke svg{width:46px;height:23px;flex:none;color:var(--anthrazit)}
.wortmarke{font:800 20px/22px var(--font-display);letter-spacing:.02em}
.wortmarke .w-mass{color:var(--gruen)}
.marke small{display:block;font:400 11px/14px var(--font-display);color:var(--text-sekundaer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{max-width:720px;width:100%;justify-self:center}
.kopf-rechts{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.kopf-rechts .wm-knopf{padding:6px 10px;font-size:13px;text-decoration:none}
.nav .navkurz{display:none}

/* Lineal als Knoepfe: wie Baustein wm-lineal, aber bedienbar */
.wm-lineal button{position:relative;padding:9px 12px 15px;font:500 12px/16px var(--font-display);color:var(--text-sekundaer);background:none;border:0;border-left:1px solid var(--masslinie);border-radius:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer}
.wm-lineal button:first-child{border-left:0}
.wm-lineal button:focus-visible{outline-offset:-3px}
.wm-lineal button::before{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;opacity:.4;background-image:linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:20% 7px;background-repeat:repeat-x}
.wm-lineal button.vorbei{background:var(--gruen);color:var(--auf-gruen);border-left-color:color-mix(in srgb,var(--auf-gruen) 35%,transparent)}
.wm-lineal button.aktiv{background:color-mix(in srgb,var(--gruen) 28%,var(--flaeche));color:var(--anthrazit);font-weight:700;box-shadow:inset 0 -4px 0 var(--gruen)}
.nav .wm-lineal button b{font-weight:700;margin-right:6px;font-variant-numeric:tabular-nums}
/* Der Baustein stylt jedes span im Lineal als Feld. Spans im Knopf sind nur Text. */
.wm-lineal button span{position:static;padding:0;border:0;color:inherit;font:inherit;white-space:inherit;overflow:visible}
.wm-lineal button span::before{content:none}

/* ---------- P1-Band ---------- */
#band{position:sticky;top:var(--kopf-h);z-index:25;background:color-mix(in srgb,var(--status-kritisch) 10%,var(--papier));border-bottom:1px solid var(--status-kritisch);padding:8px 24px;max-height:30vh;overflow:auto;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
#band h2{font:600 11px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--status-kritisch)}
#band .bitem{display:inline-flex;align-items:center;gap:6px;font:500 13px/18px var(--font-display);max-width:100%;overflow-wrap:anywhere}
#band button.jump{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:var(--anthrazit);font:inherit;text-align:left}

/* ---------- Raster ---------- */
.raster{display:grid;grid-template-columns:var(--spalte-l) minmax(0,1fr) var(--spalte-r);gap:24px;padding:20px 24px 40px;align-items:start}
.seite{position:sticky;top:calc(var(--kopf-h) + var(--band-h) + 20px);max-height:calc(100vh - var(--kopf-h) - var(--band-h) - 40px);overflow:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;padding:2px}
/* Links: feste Hoehe, damit die Ablage immer sichtbar bleibt. Es scrollen nur die Kacheln darueber.
   Nur ab Tablet: auf dem Handy loest sich die Spalte in eine Spalte auf (Karte 489ef17c). */
@media (min-width:761px){
  .seite.links{height:calc(100vh - var(--kopf-h) - var(--band-h) - 40px);overflow:hidden}
  .seite.links .satz.an{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin}
  .seite.links .ablage{flex:none}
}
.satz{display:none;flex-direction:column;gap:8px;animation:ein .2s ease;position:relative;min-width:0}
.satz.an{display:flex}
@keyframes ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.seite h2{font:600 11px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--text-sekundaer);margin:6px 2px 0;display:flex;justify-content:space-between;gap:8px}

/* ---------- Kachel ---------- */
.kachel{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;width:100%;text-align:left;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:10px 12px;cursor:pointer;color:var(--anthrazit);transition:box-shadow .12s,transform .12s,border-color .12s}
.kachel:hover{box-shadow:var(--schatten-karte);transform:translateY(-1px)}
.kachel:focus-visible,.ablage a:focus-visible{outline-offset:-2px} /* sonst schneidet die scrollende Spalte den Ring ab */
.kachel{flex:none}
.kachel[aria-pressed="true"]{border-color:var(--anthrazit);box-shadow:inset 0 0 0 1px var(--anthrazit)}
.kachel .wert{font:700 24px/28px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.kachel .wert.klein{font:600 15px/20px var(--font-display);white-space:normal;overflow-wrap:anywhere}
.kachel .wert small{font:600 13px/16px var(--font-display);margin-left:2px}
.kachel .lbl{font:500 12px/16px var(--font-display);color:var(--text-sekundaer);grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;min-width:0;overflow-wrap:anywhere}
.kachel .neben{font:600 13px/18px var(--font-display);text-align:right;white-space:nowrap}
.kachel .neben.kritisch{color:var(--status-kritisch)}
.kachel .wm-massstab{grid-column:1/-1;margin-top:6px}
.kachel.team .kn{font:600 14px/20px var(--font-display);display:flex;align-items:center;gap:8px;grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
.kachel.team .zahlen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:2px 14px;font:400 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:2px}
.kachel.team .zahlen b{font:700 15px/18px var(--font-display);color:var(--anthrazit);margin-right:3px;font-variant-numeric:tabular-nums}
.kachel.team .wm-massstab.klein{height:6px;border-width:1px;margin-top:6px}
.kachel.team .wm-massstab.klein .skala{display:none}
.punkt{width:9px;height:9px;border-radius:50%;background:var(--status-offen);flex:none;display:inline-block}
.punkt.ok{background:var(--status-ok)}.punkt.achtung{background:var(--status-achtung)}.punkt.kritisch{background:var(--status-kritisch)}

/* ---------- Zentrale (rechts oben, immer da) ---------- */
.zentrale{background:var(--flaeche-dunkel);color:var(--auf-dunkel);border-radius:var(--radius-mittel);padding:12px}
.zentrale .zk{font:600 11px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.zentrale .zz{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.zentrale button{background:transparent;border:1px solid color-mix(in srgb,var(--auf-dunkel) 25%,transparent);border-radius:var(--radius-klein);padding:8px;text-align:left;cursor:pointer;color:var(--auf-dunkel)}
.zentrale button:hover{border-color:var(--auf-dunkel)}
.zentrale button:focus-visible{outline-color:var(--auf-dunkel)}
.zentrale b{display:block;font:700 22px/26px var(--font-display);font-variant-numeric:tabular-nums}
.zentrale b.null{color:var(--auf-dunkel)!important;font-weight:500!important}
.zentrale span{font:400 11px/14px var(--font-display)}
.zentrale .konsole{display:flex;justify-content:space-between;align-items:center}

/* ---------- Ablage (links unten, immer da) ---------- */
.ablage{margin-top:auto;border-top:1px solid var(--linie);padding-top:10px}
.ablage .grp{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ablage a{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--linie);border-radius:var(--radius-pille);font:500 12px/16px var(--font-display);color:var(--anthrazit);text-decoration:none;background:var(--flaeche)}
.ablage a:hover{border-color:var(--gruen)}
.ablage a.uebergang{border-style:dashed}
.ablage a .ico{color:var(--text-sekundaer)}

/* ---------- Mitte ---------- */
.mitte{min-width:0;display:flex;flex-direction:column;gap:40px}
.abschnitt{display:flex;flex-direction:column;gap:16px;min-width:0}
.abschnitt:last-of-type{min-height:calc(100vh - var(--kopf-h) - 60px)}
/* Abschnitt 2 darf beim Start nicht schon im oberen Drittel stehen, sonst wechseln die Spalten sofort */
.abschnitt:first-of-type{min-height:36vh}
h2.wm-bemassung{font-size:12px}
h2.wm-bemassung b{font-size:16px;white-space:nowrap}
.zeile-kz{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.kz{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:10px 12px;position:relative;min-width:0}
.kz .w{font:700 22px/26px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.kz .w small{font:600 12px/16px var(--font-display);margin-left:3px;color:var(--text-sekundaer)}
.kz .l{font:500 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:2px}
.kz.haupt{border-color:var(--gruen);box-shadow:inset 0 -3px 0 var(--gruen)}
button.kz{text-align:left;cursor:pointer;color:var(--anthrazit);font-family:var(--font-display)}
button.kz:hover{box-shadow:var(--schatten-karte)}
.kz .zus{font:400 11px/14px var(--font-display);color:var(--text-sekundaer)}
.kz.warn .w{color:var(--status-kritisch)}
.zwischen{font:600 11px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--text-sekundaer);margin:4px 0 -6px}
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:var(--radius-pille);border:1px solid var(--linie);color:var(--text-sekundaer);font:700 10px/1 var(--font-display);cursor:help;vertical-align:middle;margin-left:6px}
h2.wm-bemassung .info{border-color:color-mix(in srgb,var(--masslinie) 50%,transparent)}

.heute{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.heute>a,.heute>button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:10px 12px;cursor:pointer;color:var(--anthrazit);text-decoration:none}
.heute>a:hover,.heute>button:hover{box-shadow:var(--schatten-karte)}
.heute .gz{font:700 20px/24px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.heute .gz.kritisch{color:var(--status-kritisch)}.heute .gz.gruen{color:var(--gruen-dunkel)}
.heute .gt{font:500 13px/18px var(--font-display);min-width:0;overflow-wrap:anywhere}
.heute .gt small{display:block;color:var(--text-sekundaer);font-weight:400}
.heute .pfeil{color:var(--text-sekundaer)}

/* ---------- Operations ---------- */
.op-kopf{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stufen-lineal{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row}
.stufen-lineal button{display:flex;flex-direction:column;gap:2px;padding:8px 6px 16px 8px}
.stufen-lineal button b{font:700 18px/22px var(--font-display);font-variant-numeric:tabular-nums;color:var(--anthrazit)}
.stufen-lineal button i{font-style:normal;font:600 12px/16px var(--font-display);font-variant-numeric:tabular-nums;color:var(--anthrazit)}
.stufen-lineal button.leer b,.stufen-lineal button.leer i{color:var(--text-sekundaer);font-weight:500}
.stufen-lineal button[aria-pressed="true"]{outline:2px solid var(--anthrazit);outline-offset:-2px}
.stufen-lineal button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){
 .stufen-lineal{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stufen-lineal button{border-left:0}
}

.filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter button{border:1px solid var(--linie);background:var(--flaeche);border-radius:var(--radius-pille);padding:4px 10px;font:500 12px/16px var(--font-display);cursor:pointer;color:var(--anthrazit)}
.filter button[aria-pressed="true"]{background:var(--anthrazit);color:var(--papier);border-color:var(--anthrazit)}
.filter button .leise{color:inherit}
.filter .such{margin-left:auto;border:1px solid var(--linie);border-radius:var(--radius-pille);padding:5px 12px;font:400 13px/18px var(--font-display);background:var(--flaeche);color:var(--anthrazit);min-width:200px}

/* Auftragsliste: die Breite der Mitte entscheidet, nicht die des Fensters */
.liste{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-mittel);overflow:hidden;container-type:inline-size}
.gewerk{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 14px;background:var(--flaeche-zart);border-top:1px solid var(--linie);font:700 13px/18px var(--font-display);color:var(--anthrazit)}
.gewerk:first-child{border-top:0}
.gewerk span{font:500 12px/16px var(--font-display)}
.az{position:relative;display:grid;grid-template-columns:76px minmax(120px,1.6fr) 58px 128px 92px 92px 44px 16px;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--linie);font:400 13px/18px var(--font-display);color:var(--anthrazit);text-decoration:none}
a.az{cursor:pointer}
a.az:hover,a.az:focus-visible{background:color-mix(in srgb,var(--gruen) 7%,var(--flaeche))}
a.az:focus-visible{outline-offset:-2px}
.az.kopfzeile{font:600 11px/14px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--text-sekundaer);border-top:0}
.az .nr{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.az .kurz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;min-width:0}
.az .kurz small{color:var(--text-sekundaer);font-weight:400;margin-left:6px}
.az .kurz .wm-status{font-size:11px;margin-left:6px;vertical-align:baseline}
.az .st{font:600 11px/14px var(--font-display);color:var(--text-sekundaer)}
.az .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.az .num.gruen{color:var(--gruen-dunkel);font-weight:700}
.az .pfeil{color:var(--text-sekundaer);text-align:right}
.az .spalte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.mini{display:flex;flex-direction:column;gap:3px;min-width:0}
.mini .seg{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.mini .seg i{height:6px;border-radius:2px;background:var(--status-spaeter)}
.mini .seg i.v{background:var(--gruen-hell)}.mini .seg i.a{background:var(--gruen)}
.mini small{font:500 11px/12px var(--font-display);color:var(--text-sekundaer);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keine{padding:10px 14px}
.az .rs,.az .merk{display:none}
@container (max-width:760px){
 .az{grid-template-columns:62px minmax(80px,1fr) 92px 86px 80px 36px 12px;gap:8px;padding:8px 12px}
 .az .st{display:none}
 .az .kurz .rs{display:inline}
}
/* Schmal: Karte mit zwei Zeilen. Stufe, Anspruch und stellbar bleiben ohne Klick sichtbar (Abnahme Michi). */
@container (max-width:520px){
 .az.kopfzeile{display:none}
 .az{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:6px 10px;padding:10px 12px}
 .az .nr{grid-column:1;grid-row:1}
 .az .kurz{grid-column:2/-1;grid-row:1;white-space:normal;overflow-wrap:anywhere}
 .az .kurz small{display:block;margin-left:0}
 .az .kurz .wm-status{margin-left:0}
 .az .mini{grid-column:1;grid-row:2}
 .az .anspruch{grid-column:2;grid-row:2}
 .az .stellbar{grid-column:3;grid-row:2}
 .az .pfeil{display:none}
 .az .auf{grid-column:1;grid-row:3;text-align:left}
 .az .merk{display:block;grid-column:2/-1;grid-row:3;font:400 12px/16px var(--font-display);color:var(--text-sekundaer);overflow-wrap:anywhere;align-self:end}
 .az .kurz .rs{display:block;margin-left:0}
 .az .spalte{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;font:500 11px/12px var(--font-display);color:var(--text-sekundaer)}
 .az .num.gruen .spalte{font-weight:500}
}

/* ---------- Entwicklung ---------- */
.fp{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px}
.fp>a{display:grid;grid-template-columns:auto minmax(0,1fr) 54px;align-items:center;gap:10px;padding:4px 0;text-align:left;color:var(--anthrazit);text-decoration:none}
.fp .b{font:700 13px/16px var(--font-display);color:var(--text-sekundaer);min-width:12px}
.fp .t{font:500 12px/16px var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.fp .wm-massstab{display:block}
.fp .z{font:600 12px/16px var(--font-display);text-align:right;font-variant-numeric:tabular-nums}
.auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.auto button{display:flex;align-items:center;gap:10px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:8px 10px;cursor:pointer;text-align:left;font:500 13px/18px var(--font-display);color:var(--anthrazit);min-width:0}
.auto button small{margin-left:auto;color:var(--text-sekundaer);font-weight:400;font-size:11px;text-align:right}
.auto button.fehlerhaft{flex-wrap:wrap}
.auto button .meldung,.auto .zeile-auto .meldung{flex-basis:100%;font:400 12px/16px var(--font-display);color:var(--status-kritisch)}
.auto .meldung.ruhig{color:var(--anthrazit)}
.auto button.fehlerhaft,.auto .zeile-auto{flex-wrap:wrap}
.auto .zeile-auto{display:flex;align-items:center;gap:10px;border:1px solid var(--linie);border-radius:var(--radius-klein);padding:8px 10px;font:500 13px/18px var(--font-display);min-width:0}
.auto .zeile-auto small{margin-left:auto;color:var(--text-sekundaer);font-weight:400;font-size:11px;text-align:right}

/* ---------- Kurzinfo ---------- */
.kurzinfo{position:fixed;z-index:60;max-width:300px;background:var(--flaeche-dunkel);color:var(--auf-dunkel);border-radius:var(--radius-klein);padding:8px 10px;font:400 12px/17px var(--font-display);pointer-events:none;opacity:0;visibility:hidden;left:0;top:0;box-shadow:var(--schatten-karte);transition:opacity .1s}
.kurzinfo.an{opacity:1;visibility:visible}
.kurzinfo b{font-weight:700;display:block}
.kurzinfo .zeilen{display:grid;grid-template-columns:auto auto;gap:2px 12px;margin-top:4px}
.kurzinfo .zeilen span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.kurzinfo .satztext{margin-top:4px}

/* ---------- Fenster ---------- */
.schleier{position:fixed;inset:0;background:color-mix(in srgb,var(--flaeche-dunkel) 25%,transparent);z-index:40;opacity:0;pointer-events:none;transition:opacity .15s}
.schleier.an{opacity:1;pointer-events:auto}
.fenster{position:fixed;top:0;right:0;bottom:0;z-index:50;width:560px;max-width:100vw;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .18s ease,visibility 0s .18s}
.fenster.an{transform:none;visibility:visible;transition:transform .18s ease} /* sofort sichtbar, sonst scheitert der erste Fokus */
.fenster:focus{outline:none}
.fenster .zu{position:sticky;top:0;float:right;z-index:1;padding:4px 10px;background:var(--flaeche)} /* bleibt beim Scrollen erreichbar */
.fenster h2{font:700 20px/26px var(--font-display);margin:2px 44px var(--abstand-1) 0;overflow-wrap:anywhere}
.fenster h3{font:600 12px/16px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--text-sekundaer);margin:var(--abstand-4) 0 var(--abstand-2)}
.reiter{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--linie);margin:12px 0}
.reiter button{background:none;border:0;border-bottom:3px solid transparent;padding:6px 8px;font:600 13px/18px var(--font-display);color:var(--text-sekundaer);cursor:pointer}
.reiter button[aria-selected="true"]{color:var(--anthrazit);border-bottom-color:var(--gruen)}
.fz{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fz .kz .w{font-size:18px;line-height:24px;white-space:normal}
.fz2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.quelle{font:400 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:8px;overflow-wrap:anywhere}
.notiz{font:400 13px/18px var(--font-display);color:var(--anthrazit);margin:8px 0}
.aktionen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.aktionen a{text-decoration:none}

/* ---------- Lese-Zeilen und Aktionen aus Stufe 1b ---------- */
.hint{font:400 12px/16px var(--font-display);color:var(--text-sekundaer)}
.pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-pille);font:600 11px/16px var(--font-display);background:var(--flaeche-zart);color:var(--anthrazit)}
.pill.p1{background:color-mix(in srgb,var(--status-kritisch) 14%,var(--flaeche));color:var(--status-kritisch)}
.pill.p2{background:color-mix(in srgb,var(--status-achtung) 18%,var(--flaeche))}
.zeile{border:1px solid var(--linie);border-radius:var(--radius-klein);padding:10px 12px;margin-bottom:8px;background:var(--flaeche);font:400 14px/20px var(--font-display)}
.zeile .zh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.zeile .ztitel{font-weight:600;overflow-wrap:anywhere}
.zeile .zmeta{font:400 12px/16px var(--font-display);color:var(--text-sekundaer);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.zeile .zmeta span{overflow-wrap:anywhere;min-width:0}
.zeile.neu{outline:2px solid var(--gruen);outline-offset:1px}
a.jump,button.jump{font:600 12px/16px var(--font-display);color:var(--gruen-dunkel);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.noziel{font:400 12px/16px var(--font-display);color:var(--text-sekundaer);overflow-wrap:anywhere}
details.ent{margin-top:8px}
details.ent>summary{font:600 12px/16px var(--font-display);color:var(--gruen-dunkel);cursor:pointer}
.eblock{font:400 14px/22px var(--font-text);margin-top:6px;overflow-wrap:anywhere}
.eblock .lbl{font:600 11px/16px var(--font-display);color:var(--text-sekundaer);text-transform:uppercase;letter-spacing:.03em;margin-top:8px}
.eblock pre,details.roh pre{background:var(--flaeche-zart);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:8px;font:12px/16px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:4px 0 0}
details.roh{margin-top:8px}
details.roh>summary{font:400 12px/16px var(--font-display);color:var(--text-sekundaer);cursor:pointer}
/* Meldung (Karte b678f6ae): vier Teile getrennt, Zu tun oben und hervorgehoben, Technik eingeklappt */
.meldung{font:400 14px/22px var(--font-text)}
.meldung .mabs{margin-top:10px}
.meldung .mh{font:600 11px/16px var(--font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--text-sekundaer);margin-bottom:1px}
.meldung .zutun{border:1px solid var(--gruen);background:color-mix(in srgb,var(--gruen) 10%,var(--flaeche));border-radius:var(--radius-klein);padding:8px 10px;margin-bottom:6px}
.meldung .zutun .mh{color:var(--gruen-dunkel)}
.meldung .zutun>div:last-child{font:600 14px/20px var(--font-display);color:var(--anthrazit)}
.meldung details.roh{margin-top:10px}
details.bearb{margin-top:10px}
details.bearb>summary{font:600 12px/16px var(--font-display);color:var(--text-sekundaer);cursor:pointer}
label{display:block;font:600 13px/18px var(--font-display);margin:0 0 5px}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--linie);border-radius:var(--radius-klein);font:400 14px/20px var(--font-display);color:var(--anthrazit);background:var(--flaeche)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gruen)}
.field{margin-bottom:14px}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.filters .f{min-width:150px;flex:1}
.aktzeile{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.btn-sec{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);color:var(--anthrazit);padding:7px 12px;font:600 13px/18px var(--font-display);cursor:pointer}
.btn-sec:hover:not(:disabled){border-color:var(--gruen)}
.btn-sec:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--gruen);color:var(--auf-gruen);border:1px solid var(--gruen);border-radius:var(--radius-mittel);padding:9px 16px;font:600 14px/20px var(--font-display);cursor:pointer}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}
.btn-primary.sm{padding:6px 14px;font-size:13px}
.confirm{border:1px solid var(--status-kritisch);background:color-mix(in srgb,var(--status-kritisch) 7%,var(--flaeche));border-radius:var(--radius-klein);padding:12px;margin-top:10px}
.confirm .cf-z{font-weight:700;font-size:13px;overflow-wrap:anywhere}
.confirm .cf-p{font:12px/16px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:6px 0;word-break:break-all}
.confirm label{margin-top:8px}
.confirm .cf-chk{display:flex;align-items:center;gap:8px;margin:10px 0;cursor:pointer}
.confirm .cf-chk input{width:auto}
.msg{padding:10px 12px;border-radius:var(--radius-klein);font:400 13px/18px var(--font-display);margin-bottom:12px;color:var(--anthrazit)}
.msg.err{background:color-mix(in srgb,var(--status-kritisch) 12%,var(--flaeche));border:1px solid var(--status-kritisch)}
.msg.check{background:color-mix(in srgb,var(--status-achtung) 14%,var(--flaeche));border:1px solid var(--status-achtung)}
.msg.ok{background:color-mix(in srgb,var(--gruen) 14%,var(--flaeche));border:1px solid var(--gruen)}
.torbogen{padding:8vh 16px 40px}
.torbogen .wm-karte{max-width:380px;margin:0 auto}
.torbogen h1,.torbogen h2{font:700 24px/30px var(--font-display);margin:2px 0 8px}
.torbogen p{margin:0 0 16px}
.torbogen .btn-primary{width:100%}

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .satz{animation:none}
 .kachel,.kurzinfo,.schleier,.fenster{transition:none}
 .kachel:hover{transform:none}
}

/* ---------- Breiten ---------- */
@media (min-width:1600px){:root{--spalte-l:288px;--spalte-r:332px}}
@media (max-width:1279px){
 :root{--spalte-l:220px}
 .raster{grid-template-columns:var(--spalte-l) minmax(0,1fr);grid-template-areas:"l m" "l r"}
 .seite.links{grid-area:l}.mitte{grid-area:m}
 /* Rechte Spalte steht unter der Mitte: alle Saetze zeigen, sonst springt die Seite beim Wechsel */
 .seite.rechts{grid-area:r;position:static;max-height:none;overflow:visible}
 .seite.rechts .satz{display:flex}
 .kopf{grid-template-columns:auto minmax(0,1fr) auto}
 .abschnitt:last-of-type{min-height:0}
}
@media (max-width:760px){
 .kopf{grid-template-columns:auto minmax(0,1fr);padding:8px 16px;gap:8px}
 .marke svg,.marke small{display:none}
 .kopf-rechts .wm-knopf{padding:5px 8px;font-size:12px;line-height:16px}
 .nav{grid-column:1/-1;order:3}
 .nav .navlang{display:none}.nav .navkurz{display:inline}
 .nav .wm-lineal button{padding:6px 8px 12px}
 #band{position:static;padding:8px 16px}
 /* Eine Spalte. Seitenspalten loesen sich auf, damit jede Kachel erreichbar bleibt:
    oben Themen als Leiste, dann die Mitte, dann Zentrale und alle Teams. */
 .raster{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px 40px;gap:16px}
 .seite{display:contents}
 .satz{display:flex}
 /* Handy-Reihenfolge (Karte ae3019ad): Kopf, Zentrale (mit Teams und Entscheidungen), Zahlenleiste, Abschnitte */
 .zentrale{order:1}
 /* Nur die Themenleiste scrollt waagerecht in sich, die Seite selbst nie (Karte 489ef17c) */
 .satz[data-satz="unternehmen"].links-satz{order:2;flex-direction:row;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:2px;margin:0 -2px;min-width:0;max-width:100%}
 .satz.links-satz[data-satz="unternehmen"]>h2{display:none}
 .satz.links-satz[data-satz="unternehmen"]>*{min-width:150px;scroll-snap-align:start}
 .mitte{order:3;gap:28px}
 h2.wm-bemassung b{white-space:normal;text-align:center}
 .abschnitt:first-of-type{min-height:0}
 .seite.rechts .satz{order:4}
 .satz.links-satz[data-satz="betrieb"]{order:5}
 .satz.links-satz[data-satz="entwicklung"]{order:6}
 .ablage{display:none}
 .op-kopf{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stufen-lineal{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stufen-lineal button{border-left:0;padding:6px 8px 14px}
 .filter .such{margin-left:0;width:100%;min-width:0}
 .zeile-kz{grid-template-columns:repeat(2,minmax(0,1fr))}
 .kz .w{font-size:20px}
 .fenster{width:100vw}
 .fz{grid-template-columns:1fr 1fr}
}