/* Planung · Ansicht. Farben nur über die Tokens unten. */
@font-face{font-family:"Plex";src:url("schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("schriften/ibm-plex-sans-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url("schriften/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url("schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url("schriften/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Cond";src:url("schriften/ibm-plex-sans-condensed-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Cond";src:url("schriften/ibm-plex-sans-condensed-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Cond";src:url("schriften/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("schriften/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --grund:#eef0ec; --flaeche:#ffffff; --flaeche2:#f6f7f4; --tinte:#16212b; --leise:#5b6570; --linie:#d8dcd5; --linie2:#e8ebe5;
  --kopf:#121c25; --kopf-tinte:#eef2f5; --kopf-leise:#9fb0bf; --kopf-linie:#2a3845;
  --glut:#e8590c; --glut2:#f59f00; --glut-weich:#fde8d7;
  --blau:#2f6690; --petrol:#1d7a78; --violett:#6a4c93; --bernstein:#c0841a; --rot:#b83a1e; --gruen:#2e7d4f; --grau:#7b8692; --schiefer:#4b5b6b;
  --frei:#f1f2ee; --feiertag:#f7e9dd; --heute:#e8590c;
  --gut:#2e7d4f; --warn:#a86a00; --warn-weich:#fbf0d6; --kritisch:#b83a1e; --kritisch-weich:#f8e1da;
  --schatten:0 1px 2px rgba(20,30,40,.06),0 8px 24px rgba(20,30,40,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#0e141a; --flaeche:#151d25; --flaeche2:#19232c; --tinte:#e3e9ee; --leise:#9aa7b3; --linie:#2a3642; --linie2:#212c37;
    --kopf:#0a1015; --kopf-linie:#233140;
    --glut-weich:#3a2211; --frei:#121a21; --feiertag:#2a1c12;
    --blau:#5b93c2; --petrol:#3fa7a3; --violett:#9b7fc6; --bernstein:#dca544; --rot:#e06a4a; --gruen:#5bb07f; --grau:#8f9aa6; --schiefer:#8a9aab;
    --warn:#e0a84a; --warn-weich:#33280f; --kritisch:#e06a4a; --kritisch-weich:#3a1d15;
    --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --grund:#0e141a; --flaeche:#151d25; --flaeche2:#19232c; --tinte:#e3e9ee; --leise:#9aa7b3; --linie:#2a3642; --linie2:#212c37;
  --kopf:#0a1015; --kopf-linie:#233140;
  --glut-weich:#3a2211; --frei:#121a21; --feiertag:#2a1c12;
  --blau:#5b93c2; --petrol:#3fa7a3; --violett:#9b7fc6; --bernstein:#dca544; --rot:#e06a4a; --gruen:#5bb07f; --grau:#8f9aa6; --schiefer:#8a9aab;
  --warn:#e0a84a; --warn-weich:#33280f; --kritisch:#e06a4a; --kritisch-weich:#3a1d15;
  --schatten:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--grund);color:var(--tinte);font:14px/1.5 "Plex",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glut);outline-offset:2px;border-radius:3px}
.mono{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.cond{font-family:"Plex Cond","Plex",sans-serif}

/* Kopf ------------------------------------------------------------ */
.kopf{background:var(--kopf);color:var(--kopf-tinte);padding:22px 28px 0;position:relative;overflow:hidden}
.kopf::after{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,89,12,.28),rgba(245,159,0,.08) 45%,transparent 70%);pointer-events:none}
.kopf-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:flex-end;position:relative;z-index:1}
.kopf .marke{font:600 11px/1 "Plex Cond",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--kopf-leise)}
.kopf h1{font:600 28px/1.15 "Plex",sans-serif;margin:8px 0 4px;letter-spacing:-.01em;text-wrap:balance}
.kopf .unter{color:var(--kopf-leise);font-size:14px;margin:0}
.kennzahlen{display:flex;gap:10px;flex-wrap:wrap}
.kz{background:rgba(255,255,255,.04);border:1px solid var(--kopf-linie);border-radius:8px;padding:10px 14px;min-width:132px}
.kz b{display:block;font:600 22px/1.1 "Plex",sans-serif;font-variant-numeric:tabular-nums}
.kz span{font-size:12px;color:var(--kopf-leise)}
.kz.ziel{border-color:rgba(232,89,12,.55);background:linear-gradient(135deg,rgba(232,89,12,.22),rgba(245,159,0,.06))}
.kz.ziel b{color:#ffb070}
.werkzeug{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 0 14px;position:relative;z-index:1}
.schalter{display:inline-flex;border:1px solid var(--kopf-linie);border-radius:7px;overflow:hidden}
.schalter button{background:transparent;border:0;color:var(--kopf-leise);padding:7px 13px;cursor:pointer;font-size:13px;font-weight:500}
.schalter button[aria-pressed="true"]{background:var(--kopf-tinte);color:var(--kopf)}
.knopf{background:transparent;border:1px solid var(--kopf-linie);color:var(--kopf-tinte);padding:7px 13px;border-radius:7px;cursor:pointer;font-size:13px;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.knopf:hover{border-color:var(--kopf-leise)}
.knopf[aria-pressed="true"]{border-color:var(--glut);color:#ffb070}
.werkzeug .luecke{flex:1}
.stand{font-size:12px;color:var(--kopf-leise)}

/* Gantt ------------------------------------------------------------ */
.gantt-rahmen{background:var(--flaeche);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);position:relative}
.gantt{display:grid;grid-template-columns:var(--spalte,340px) 1fr;position:relative}
.links{position:sticky;left:0;z-index:5;background:var(--flaeche);border-right:1px solid var(--linie)}
.rechts-huelle{overflow-x:auto;overflow-y:hidden;position:relative}
.rechts{position:relative}
.skala{position:sticky;top:0;z-index:6;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.skala-links{height:var(--skala-h);display:flex;align-items:flex-end;padding:0 14px 8px;font:600 11px/1 "Plex Cond",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);border-bottom:1px solid var(--linie)}
.skala-zeile{position:relative;height:22px;border-bottom:1px solid var(--linie2)}
.skala-zeile:last-child{border-bottom:0}
.sk{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:6px;font-size:11px;color:var(--leise);border-left:1px solid var(--linie2);white-space:nowrap;clip-path:inset(0)}
.sk>.haft,.balken>.haft{position:sticky;left:6px}
.sk.monat{font:600 12px/1 "Plex",sans-serif;color:var(--tinte)}
.sk.kw{font-family:"Plex Mono",monospace;font-size:10.5px}
.sk.tag{justify-content:center;padding:0;font-family:"Plex Mono",monospace;font-size:10px;flex-direction:column;line-height:1.05}
.sk.tag.frei{color:var(--grau)}
.sk.tag.feiertag{color:var(--glut)}
.zeile{height:34px;display:flex;align-items:center;border-bottom:1px solid var(--linie2);position:relative}
.zeile.phase{height:40px;background:var(--flaeche2)}
.zeile.hervor{background:color-mix(in srgb,var(--glut) 7%,transparent)}
.lz{padding:0 10px 0 calc(12px + var(--tiefe,0) * 18px);gap:7px;cursor:pointer;min-width:0}
.lz .klapp{width:16px;height:16px;flex:none;display:grid;place-items:center;border:0;background:none;padding:0;cursor:pointer;color:var(--leise);transition:transform .15s}
.lz .klapp[aria-expanded="false"]{transform:rotate(-90deg)}
.lz .klapp.leer{visibility:hidden}
.lz .kn{font:500 10.5px/1 "Plex Mono",monospace;color:var(--leise);flex:none;min-width:54px}
.lz .ti{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.zeile.phase .ti{font-weight:600;font-size:13.5px}
.lz .pt{font:500 10.5px/1 "Plex Mono",monospace;color:var(--leise);flex:none;padding:3px 5px;border-radius:4px;background:var(--flaeche2);border:1px solid var(--linie2)}
.zeile.phase .pt{background:var(--flaeche)}
.lz .punkt-dot{width:7px;height:7px;border-radius:50%;flex:none}
.hinter{position:absolute;inset:0;pointer-events:none}
.spalte-frei{position:absolute;top:0;bottom:0;background:var(--frei)}
.spalte-feiertag{position:absolute;top:0;bottom:0;background:var(--feiertag)}
.linie-kw{position:absolute;top:0;bottom:0;border-left:1px solid var(--linie2)}
.linie-ms{position:absolute;top:0;bottom:0;border-left:1.5px dashed color-mix(in srgb,var(--tinte) 28%,transparent)}
.linie-ms.ziel{border-left:2px solid var(--glut)}
.linie-heute{position:absolute;top:0;bottom:0;border-left:2px solid var(--heute);z-index:3}
.linie-heute span{position:absolute;top:2px;left:4px;font:600 10px/1 "Plex Cond",sans-serif;color:var(--heute);letter-spacing:.08em;text-transform:uppercase;background:var(--flaeche);padding:2px 4px;border-radius:3px}
.balken{position:absolute;height:18px;top:8px;border-radius:4px;background:var(--f);color:#fff;font:500 11px/18px "Plex Cond",sans-serif;padding:0 7px;white-space:nowrap;clip-path:inset(0 round 4px);cursor:pointer;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);transition:filter .12s,box-shadow .12s;min-width:4px}
.balken:hover,.balken.hervor{filter:brightness(1.1) saturate(1.1)}
.zeile.phase .balken{height:22px;top:9px;border-radius:5px;background:linear-gradient(180deg,color-mix(in srgb,var(--f) 86%,#fff),var(--f));font-weight:600;font-size:12px;line-height:22px}
.balken.stufe2{height:14px;top:10px;background:color-mix(in srgb,var(--f) 55%,var(--flaeche));color:var(--tinte);font-size:10.5px;line-height:14px}
.balken .fuell{position:absolute;inset:0;border-radius:inherit;background:var(--f)}
.balken.angedeutet{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--f) 70%,transparent) 0 6px,color-mix(in srgb,var(--f) 40%,transparent) 6px 12px);color:var(--tinte)}
.balken.gefaehrdet{outline:2px solid var(--kritisch);outline-offset:1px}
.balken.erledigt::before{content:"✓ "}
.aufschrift{position:absolute;top:0;height:100%;display:flex;align-items:center;font:500 11px/1 "Plex Cond",sans-serif;color:var(--tinte);white-space:nowrap;pointer-events:none;padding-left:6px}
.raute{position:absolute;width:14px;height:14px;top:10px;transform:rotate(45deg);background:var(--tinte);border-radius:2px;cursor:pointer;box-shadow:0 0 0 3px var(--flaeche)}
.zeile.phase .raute{top:13px}
.raute.ziel{width:18px;height:18px;top:8px;background:linear-gradient(135deg,var(--glut2),var(--glut));box-shadow:0 0 0 3px var(--flaeche),0 0 0 6px color-mix(in srgb,var(--glut) 30%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .raute.ziel{animation:glut 2.4s ease-in-out infinite}
  @keyframes glut{0%,100%{box-shadow:0 0 0 3px var(--flaeche),0 0 0 6px color-mix(in srgb,var(--glut) 30%,transparent)}50%{box-shadow:0 0 0 3px var(--flaeche),0 0 0 11px color-mix(in srgb,var(--glut) 8%,transparent)}}
}
.raute-text{position:absolute;top:0;height:100%;display:flex;align-items:center;font:500 11px/1 "Plex Cond",sans-serif;white-space:nowrap;pointer-events:none;padding-left:14px}
.raute-text.ziel{font-weight:600;color:var(--glut)}
svg.pfeile{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
svg.pfeile path{fill:none;stroke:color-mix(in srgb,var(--tinte) 35%,transparent);stroke-width:1.2}
svg.pfeile path.aktiv{stroke:var(--glut);stroke-width:1.8}

/* Hinweisfenster und Seitenleiste ------------------------------------- */
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--kopf);color:var(--kopf-tinte);border-radius:8px;padding:10px 12px;font-size:12.5px;max-width:320px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .08s}
.tip.an{opacity:1}
.tip .t{font-weight:600;font-size:13px;margin-bottom:4px}
.tip .z{color:var(--kopf-leise);font-family:"Plex Mono",monospace;font-size:11.5px}
.tip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}
.tip dt{color:var(--kopf-leise)}
.tip dd{margin:0}
.leiste{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--flaeche);box-shadow:-12px 0 40px rgba(0,0,0,.18);z-index:60;transform:translateX(105%);transition:transform .2s ease;display:flex;flex-direction:column}
.leiste.an{transform:none}
.leiste header{padding:20px 22px 14px;border-bottom:1px solid var(--linie);position:relative}
.leiste header .streifen{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--f,var(--grau))}
.leiste h2{margin:6px 0 2px;font-size:19px;line-height:1.25;text-wrap:balance}
.leiste .zu{position:absolute;right:14px;top:14px;border:1px solid var(--linie);background:var(--flaeche);border-radius:6px;width:30px;height:30px;cursor:pointer}
.leiste .inhalt{overflow:auto;padding:16px 22px 28px;display:flex;flex-direction:column;gap:16px}
.leiste dl{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0}
.leiste dt{color:var(--leise);font-size:12.5px}
.leiste dd{margin:0}
.leiste .text{white-space:pre-line;max-width:62ch}
.leiste h3{font:600 11px/1 "Plex Cond",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--leise);margin:4px 0 0}
.chip{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 "Plex Mono",monospace;padding:4px 7px;border-radius:5px;background:var(--flaeche2);border:1px solid var(--linie);text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--leise)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.marke-art{font:600 10.5px/1 "Plex Cond",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.annahme{display:inline-block;font:600 10px/1 "Plex Cond",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-weich);padding:3px 5px;border-radius:3px;vertical-align:1px}

/* Abschnitte ------------------------------------------------------------ */
.seite{max-width:1320px;margin:0 auto;padding:30px 28px 70px;display:flex;flex-direction:column;gap:40px}
.abschnitt>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.abschnitt h2{font-size:20px;margin:0;letter-spacing:-.005em}
.abschnitt .erkl{color:var(--leise);margin:0;max-width:78ch}
.navi{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--grund) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--linie)}
.navi nav{max-width:1320px;margin:0 auto;padding:0 28px;display:flex;gap:2px;overflow-x:auto}
.navi a{padding:12px 12px;text-decoration:none;color:var(--leise);font-size:13px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
.navi a:hover{color:var(--tinte);border-bottom-color:var(--linie)}
.navi a b{font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}

/* Meilensteine als Leiste */
.ms-leiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ms{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;position:relative}
.ms:hover{border-color:var(--leise)}
.ms .datum{font:500 12px/1 "Plex Mono",monospace;color:var(--leise)}
.ms .titel{font-weight:600;line-height:1.3}
.ms .rest{font-size:12px;color:var(--leise)}
.ms.vorbei{opacity:.6}
.ms.ziel{border-color:color-mix(in srgb,var(--glut) 60%,var(--linie));background:linear-gradient(135deg,var(--glut-weich),var(--flaeche) 70%)}
.ms.ziel .titel{color:var(--glut)}
.ms i{position:absolute;right:14px;top:14px;width:10px;height:10px;transform:rotate(45deg);background:var(--f,var(--tinte));border-radius:1px}

/* Tabellen */
.tabelle-huelle{overflow-x:auto;background:var(--flaeche);border:1px solid var(--linie);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;font:600 11px/1.2 "Plex Cond",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);padding:10px 12px;border-bottom:1px solid var(--linie);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--linie2);vertical-align:top}
tr:last-child td{border-bottom:0}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.gruppe td{background:var(--flaeche2);font-weight:600}
tr.gruppe td .farbpunkt{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--f);margin-right:8px;vertical-align:0}
tr.summe td{font-weight:700;border-top:2px solid var(--linie)}
.anteil{height:6px;border-radius:3px;background:var(--linie2);min-width:90px;position:relative;margin-top:7px}
.anteil i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--f)}
.klein{font-size:12px;color:var(--leise)}
.methode{display:inline-block;font:600 10.5px/1 "Plex Cond",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:4px}
.methode.automatisch{background:color-mix(in srgb,var(--violett) 16%,transparent);color:var(--violett)}
.methode.manuell{background:var(--warn-weich);color:var(--warn)}
.methode.nicht{background:var(--flaeche2);color:var(--leise);border:1px solid var(--linie)}
.methode.pruefung{background:color-mix(in srgb,var(--gruen) 15%,transparent);color:var(--gruen)}

/* Offene Punkte */
.punkte{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.pk{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px 16px 14px 18px;display:flex;flex-direction:column;gap:8px;position:relative}
.pk::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--warn)}
.pk.faellig::before{background:var(--kritisch)}
.pk.entschieden::before{background:var(--gut)}
.pk .oben{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pk .titel{font-weight:600;line-height:1.3}
.pk .vorschlag{color:var(--leise);white-space:pre-line}
.pk .vorschlag b{color:var(--tinte);font-weight:600}
.pk .fuss{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--leise);align-items:center}
.pk .fuss .bis.faellig{color:var(--kritisch);font-weight:600}
.festlegungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 24px;margin:0;padding:0;list-style:none}
.festlegungen li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--linie2)}
.festlegungen li .chip{flex:none}
.aenderung{display:flex;flex-direction:column;gap:6px}
.aenderung .art{font:600 10.5px/1 "Plex Cond",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:4px}
.art.neu{background:color-mix(in srgb,var(--gruen) 16%,transparent);color:var(--gruen)}
.art.geändert{background:var(--warn-weich);color:var(--warn)}
.art.entfallen{background:var(--kritisch-weich);color:var(--kritisch)}
.leer-hinweis{color:var(--leise);font-style:italic}
.fuss-seite{color:var(--leise);font-size:12px;max-width:90ch}

@media (max-width:760px){
  .kopf{padding:18px 16px 0}
  .kopf h1{font-size:22px}
  .seite{padding:24px 16px 60px}
  .navi nav{padding:0 16px}
  .gantt{--spalte:190px}
  .lz .kn,.lz .pt{display:none}
  .punkte{grid-template-columns:1fr}
}

/* Druck: A3 quer, alles aufgeklappt bis Stufe 2, keine Bedienelemente */
@page{size:A3 landscape;margin:10mm}
@media print{
  body{background:#fff}
  .werkzeug,.navi,.leiste,.tip,.nur-bildschirm{display:none!important}
  .kopf{padding:14px 18px 12px}
  .kopf::after{display:none}
  .rechts-huelle{overflow:visible}
  .gantt-rahmen{box-shadow:none}
  .abschnitt{break-inside:avoid-page}
  .seitenumbruch{break-before:page}
  .raute.ziel{animation:none}
  .zeile{break-inside:avoid}
}