/* System-Audit · automationsintelligenz. — dunkles Leitstand-Design */
:root {
  --bg: #050608;
  --flaeche: rgba(255, 255, 255, 0.035);
  --flaeche-2: rgba(255, 255, 255, 0.06);
  --linie: rgba(255, 255, 255, 0.09);
  --linie-2: rgba(255, 255, 255, 0.16);
  --text: #eef1f5;
  --text-2: #a3abb8;
  --text-3: #6b7280;
  --akzent: #2b9cf0;
  --akzent-tief: #0d85d3;
  --akzent-glow: rgba(43, 156, 240, 0.35);
  --cyan: #5ee6f5;
  --fehlt: #f2546b;
  --manuell: #f5a524;
  --tool: #4c9dff;
  --auto: #2fd39a;
  --radius: 14px;
  --leiste: 232px;
  --karte: 400px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); }
::selection { background: var(--akzent-glow); }

/* Hintergrund */
.hg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hg-gitter {
  position: absolute; inset: -2px;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 75%);
}
.hg-licht {
  position: absolute; width: 1100px; height: 700px; left: 50%; top: -420px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(13,133,211,.32), rgba(94,230,245,.08) 55%, transparent);
  filter: blur(10px); animation: atmen 9s ease-in-out infinite;
}
@keyframes atmen { 50% { opacity: .65; transform: translateX(-50%) scale(1.06); } }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; background: rgba(5,6,8,.72); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--linie);
}
.marke { color: var(--text); text-decoration: none; font-weight: 500; letter-spacing: -.01em; font-size: 16px; white-space: nowrap; }
.marke b { font-weight: 800; }
.marke i { color: var(--akzent); font-style: normal; font-weight: 800; }
.kopf-mitte { flex: 1; min-width: 0; text-align: center; }
.kopf-kunde { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
.kopf-kunde i { font-style: normal; color: var(--text-2); font-weight: 500; margin-left: 10px; }
.kopf-kunde.leer { color: var(--text-3); font-weight: 500; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.timer {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--linie-2); background: var(--flaeche); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
}
.timer-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.timer.laeuft .timer-punkt { background: var(--fehlt); box-shadow: 0 0 10px var(--fehlt); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.speicher { font-size: 12px; color: var(--text-3); min-width: 74px; text-align: right; transition: color .3s; }
.speicher.blitz { color: var(--auto); }
.intern-knopf { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 15px; }
.ist-intern .intern-knopf { border-color: var(--manuell); color: var(--manuell); box-shadow: 0 0 14px rgba(245,165,36,.35); }
.ist-start .timer, .ist-start .speicher { display: none; }

/* Rahmen: Leiste · Bühne · Karte */
.rahmen {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr) var(--karte);
  gap: 28px; padding: 28px 24px 80px; max-width: 1640px; margin: 0 auto;
}
.ist-start .rahmen { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.ist-start .leiste, .ist-start .karte { display: none; }
.leiste, .karte { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: none; }
.leiste::-webkit-scrollbar, .karte::-webkit-scrollbar { display: none; }
.buehne { min-width: 0; outline: none; }

/* Leiste */
.kapitel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kap-knopf {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
  background: none; border: 1px solid transparent; text-align: left; transition: background .2s, border-color .2s;
}
.kap-knopf:hover { background: var(--flaeche); }
.kap-knopf.aktiv { background: var(--flaeche-2); border-color: var(--linie-2); }
.kap-ring {
  --p: 0; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--akzent) calc(var(--p) * 360deg), rgba(255,255,255,.08) 0);
  position: relative;
}
.kap-ring::before { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--bg); }
.kap-ring.voll { background: linear-gradient(135deg, var(--akzent), var(--cyan)); }
.kap-ring i { position: relative; font-style: normal; font-size: 11px; font-weight: 800; color: var(--text-2); }
.kap-knopf.aktiv .kap-ring i { color: var(--text); }
.kap-text { display: grid; line-height: 1.25; min-width: 0; }
.kap-text b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kap-text small { color: var(--text-3); font-size: 11.5px; }
.kap-knopf.fokus .kap-text b::after { content: ' ★'; color: var(--cyan); font-size: 10px; }
.trenner { height: 1px; background: var(--linie); margin: 10px 8px; }
.countdown {
  margin: 18px 6px 0; padding: 14px; border-radius: var(--radius); border: 1px solid var(--linie);
  background: linear-gradient(160deg, rgba(43,156,240,.14), transparent 70%); display: grid; gap: 2px;
}
.countdown b { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12px; color: var(--text-2); }
.countdown.eng { background: linear-gradient(160deg, rgba(245,165,36,.18), transparent 70%); }

/* Typo-Bausteine */
.ueber { margin: 0 0 6px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.ueber.klein { color: var(--text-3); }
h1, h2, h3 { letter-spacing: -.025em; margin: 0; }

/* Startseite */
.start { padding: 6vh 0 40px; }
.start h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; font-weight: 800; }
.start h1 em { font-style: normal; background: linear-gradient(90deg, var(--akzent), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.start-text { max-width: 620px; color: var(--text-2); font-size: 17px; margin: 22px 0 30px; }
.start-aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.start-liste { margin-top: 44px; display: grid; gap: 8px; max-width: 640px; }
.start-zeile { display: flex; gap: 6px; }
.start-eintrag {
  flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; text-align: left; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--linie); background: var(--flaeche); transition: border-color .2s, transform .2s;
}
.start-eintrag:hover { border-color: var(--akzent); transform: translateX(3px); }
.start-eintrag span { color: var(--text-2); font-size: 13px; grid-column: 1; }
.start-eintrag time { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--text-3); font-size: 12px; }
.loeschen { width: 40px; border-radius: 12px; border: 1px solid var(--linie); background: none; color: var(--text-3); font-size: 18px; }
.loeschen:hover { color: var(--fehlt); border-color: var(--fehlt); }
.start-module { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px; }
.start-module span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-2); font-size: 13px; }
.start-module i { font-style: normal; color: var(--text-3); margin-right: 7px; font-size: 11px; font-weight: 800; }
.start-module .hell { border-color: var(--akzent); color: var(--text); }

/* Knöpfe */
.btn-haupt, .btn-geist, .btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap;
}
.btn-haupt { padding: 12px 22px; border: 0; background: linear-gradient(135deg, var(--akzent), var(--akzent-tief)); color: #fff; box-shadow: 0 8px 30px -8px var(--akzent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-haupt:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -8px var(--akzent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-geist { padding: 11px 20px; border: 1px solid var(--linie-2); background: var(--flaeche); }
.btn-geist:hover { border-color: var(--text-2); }
.btn-geist.datei { cursor: pointer; }
.btn-mini { padding: 6px 12px; font-size: 12.5px; border: 1px solid var(--linie-2); background: var(--flaeche-2); }
.btn-mini:hover { border-color: var(--akzent); }
.btn-mini.geist { background: none; color: var(--text-2); }

/* Kapitel */
.kapitel, .bauplan, .ueberblick { animation: rein .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rein { from { opacity: 0; transform: translateY(14px); } }
.kap-kopf { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.kap-nr {
  flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: linear-gradient(160deg, rgba(43,156,240,.25), rgba(94,230,245,.05)); border: 1px solid rgba(43,156,240,.35);
  box-shadow: 0 0 40px -10px var(--akzent-glow);
}
.kap-kopf h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 800; }
.kap-ziel { color: var(--text-2); margin: 10px 0 0; font-size: 14px; }
.ist-fokus .kap-nr { background: linear-gradient(160deg, rgba(94,230,245,.35), rgba(43,156,240,.1)); border-color: var(--cyan); }

.felder { display: grid; gap: 14px; }
.feld {
  padding: 18px 18px 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie);
  transition: border-color .2s;
}
.feld:focus-within { border-color: rgba(43,156,240,.5); box-shadow: 0 0 0 4px rgba(43,156,240,.08); }
.feld > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.schloss { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 99px; background: rgba(245,165,36,.15); color: var(--manuell); margin-left: 6px; vertical-align: 2px; letter-spacing: .04em; text-transform: uppercase; }
.feld input:not([type=range]):not([type=checkbox]), .feld textarea, .feld select, .bp-start input {
  width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--linie-2); border-radius: 10px; padding: 11px 13px; outline: none;
  transition: border-color .2s;
}
.feld textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--akzent); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-3); }
.eingabe-zeile { display: flex; align-items: center; gap: 10px; }
.einheit { color: var(--text-3); font-size: 13px; white-space: nowrap; }
.feld-zahl .eingabe-zeile input { max-width: 220px; }
.feld-datum .eingabe-zeile input { max-width: 240px; }
.feld-zitat textarea { font-size: 17px; font-style: italic; border-left: 3px solid var(--cyan) !important; }
.tipp { margin: 10px 0 0; font-size: 12.5px; color: var(--manuell); }
.notiz-feld { margin-top: 14px; background: transparent; border-style: dashed; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie-2); background: rgba(255,255,255,.02); font-size: 13.5px; font-weight: 600;
  color: var(--text-2); transition: all .18s cubic-bezier(.2,.8,.2,1);
}
.chip:hover { border-color: var(--text-2); color: var(--text); }
.chip.an {
  color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--akzent), var(--akzent-tief));
  box-shadow: 0 4px 18px -6px var(--akzent-glow); animation: plopp .28s cubic-bezier(.3,1.6,.5,1);
}
@keyframes plopp { 40% { transform: scale(1.08); } }
.chip-neu input { width: 130px !important; padding: 7px 13px !important; border-radius: 999px !important; font-size: 13px; background: transparent !important; border-style: dashed !important; }

/* Recherche-Markierung */
.ist-vorab { border-style: dashed; border-color: rgba(94,230,245,.45); }
.ist-vorab .chip.an { background: rgba(94,230,245,.12); color: var(--cyan); border: 1px dashed var(--cyan); box-shadow: none; }
.ist-vorab > label::after { content: 'Recherche'; font-size: 10.5px; font-weight: 700; margin-left: 8px; padding: 2px 7px; border-radius: 99px; color: var(--cyan); border: 1px dashed var(--cyan); vertical-align: 2px; letter-spacing: .04em; text-transform: uppercase; }
.vorab-muster { display: inline-block; width: 22px; height: 12px; border-radius: 99px; border: 1px dashed var(--cyan); vertical-align: -1px; }
.angebot.ist-vorab { border: 1px dashed rgba(94,230,245,.5); border-radius: 12px; padding: 4px; }

.recherche-karte {
  margin-bottom: 18px; padding: 20px 22px; border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(94,230,245,.09), rgba(43,156,240,.04) 60%, transparent); border: 1px solid rgba(94,230,245,.28);
}
.recherche-karte h3 { font-size: 19px; margin-bottom: 10px; }
.recherche-karte ul { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }
.recherche-karte li::marker { color: var(--cyan); }
.rk-quellen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 12.5px; }
.rk-quellen a { color: var(--text-3); text-decoration: none; border-bottom: 1px dotted var(--text-3); }
.rk-intern { margin-top: 12px !important; padding: 12px 12px 12px 30px !important; border-radius: 10px; background: rgba(245,165,36,.08); color: #f3d29a !important; }
.rk-fuss { margin: 14px 0 0; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Status-Wahl */
.status-wahl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--linie-2);
  background: rgba(0,0,0,.25); font-size: 13px; font-weight: 700; color: var(--text-2); text-align: left; transition: all .2s;
}
.st span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.st-fehlt { --c: var(--fehlt); } .st-manuell { --c: var(--manuell); } .st-tool { --c: var(--tool); } .st-auto { --c: var(--auto); }
.st:hover { border-color: var(--c); color: var(--text); }
.st.an { color: #fff; border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 24px -8px var(--c); }
.st.an span { box-shadow: 0 0 10px var(--c); }

/* Angebote */
.angebote { display: grid; gap: 8px; justify-items: start; }
.angebot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.1fr) 38px; gap: 8px; width: 100%; }
.angebot .weg { border: 1px solid var(--linie-2); background: none; border-radius: 10px; color: var(--text-3); font-size: 18px; }
.angebot .weg:hover { color: var(--fehlt); border-color: var(--fehlt); }

/* Zeitfresser */
.zeitfresser { display: grid; gap: 10px; }
.zf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) 46px; gap: 14px; align-items: center; font-size: 14px; }
.zf b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.zf input[type=range] { width: 100%; accent-color: var(--akzent); height: 22px; }
.zf-summe { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.zf-summe span { flex: 1 1 150px; padding: 12px 14px; border-radius: 12px; background: rgba(242,84,107,.08); border: 1px solid rgba(242,84,107,.25); font-size: 12.5px; color: var(--text-2); display: grid; }
.zf-summe b { font-size: 24px; color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Fit-Check */
.fitcheck { margin-top: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(245,165,36,.35); background: rgba(245,165,36,.06); display: grid; gap: 8px; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.haken input { margin-top: 3px; accent-color: var(--manuell); width: 16px; height: 16px; }
.fit-regel { margin: 6px 0 0; font-size: 12.5px; color: var(--manuell); }

.kap-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }

/* Interne Ebene */
.nur-intern { display: none !important; }
.ist-intern .nur-intern { display: revert !important; }
.ist-intern .feld.nur-intern { display: block !important; border-color: rgba(245,165,36,.35); }
.ist-intern .fitcheck.nur-intern { display: grid !important; }
.intern-hinweis { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 30px); opacity: 0; z-index: 30; padding: 8px 16px; border-radius: 99px; background: #241a07; border: 1px solid var(--manuell); color: var(--manuell); font-size: 12.5px; font-weight: 700; transition: all .3s; pointer-events: none; }
.ist-intern .intern-hinweis { opacity: 1; transform: translate(-50%, 0); }

/* Systemkarte */
.karte { padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); border: 1px solid var(--linie); }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.karte-kopf .ueber { margin: 0; }
.umschalter { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(0,0,0,.4); border: 1px solid var(--linie); }
.umschalter button { border: 0; background: none; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text-3); }
.umschalter button.an { background: var(--flaeche-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-2); }
.systemkarte { width: 100%; height: auto; display: block; overflow: visible; }
.kante { stroke-width: 1.6; stroke: rgba(255,255,255,.07); transition: stroke .5s; }
.k-erfasst { stroke: rgba(255,255,255,.18); }
.k-fehlt { stroke: rgba(242,84,107,.5); stroke-dasharray: 3 5; }
.k-manuell { stroke: rgba(245,165,36,.45); stroke-dasharray: 6 5; }
.k-tool { stroke: rgba(76,157,255,.45); stroke-dasharray: 2 4; }
.k-auto { stroke: var(--auto); stroke-dasharray: 5 7; animation: fluss 1.1s linear infinite; filter: drop-shadow(0 0 3px rgba(47,211,154,.7)); }
@keyframes fluss { to { stroke-dashoffset: -24; } }
.knoten { cursor: pointer; }
.knoten .kern { fill: #0b0e13; stroke: rgba(255,255,255,.14); stroke-width: 1.5; transition: all .5s; }
.knoten .halo { fill: none; stroke: none; transition: all .5s; }
.knoten text { fill: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .01em; transition: fill .4s; }
.knoten:hover text { fill: var(--text); }
.n-erfasst .kern { stroke: rgba(255,255,255,.55); }
.n-erfasst text { fill: var(--text-2); }
.n-fehlt .kern { stroke: var(--fehlt); fill: rgba(242,84,107,.14); }
.n-manuell .kern { stroke: var(--manuell); fill: rgba(245,165,36,.14); }
.n-tool .kern { stroke: var(--tool); fill: rgba(76,157,255,.16); }
.n-auto .kern { stroke: var(--auto); fill: rgba(47,211,154,.22); }
.n-auto .halo { fill: rgba(47,211,154,.12); filter: url(#glow); animation: halo 2.6s ease-in-out infinite; transform-origin: center; }
.n-fehlt text, .n-manuell text, .n-tool text, .n-auto text { fill: var(--text); }
@keyframes halo { 50% { opacity: .35; } }
.knoten.puls .kern { animation: knotenpuls .9s cubic-bezier(.3,1.6,.5,1); }
@keyframes knotenpuls { 35% { r: 19; stroke-width: 3; } }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 4px 0 14px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.lg i { width: 8px; height: 8px; border-radius: 50%; }
.lg-fehlt i { background: var(--fehlt); } .lg-manuell i { background: var(--manuell); } .lg-tool i { background: var(--tool); } .lg-auto i { background: var(--auto); }
.kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kz { padding: 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--linie); display: grid; gap: 2px; align-content: start; }
.kz-wert { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kz-name { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.kz-klein { font-size: 12px; color: var(--fehlt); font-weight: 700; }
.kz-balken { height: 4px; border-radius: 4px; background: rgba(255,255,255,.07); margin-top: 8px; overflow: hidden; }
.kz-balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--manuell), var(--auto)); border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* Bauplan */
.bp-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.bp-zahlen div { padding: 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); display: grid; }
.bp-zahlen b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp-zahlen span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.bp-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 12px; font-size: 14px; }
.bp-start label { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.bp-start input { width: auto; padding: 8px 10px; }
.bp-launch b { color: var(--cyan); }
.bp-launch.leer { color: var(--text-3); }
.ampel { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; border: 1px solid; }
.ampel-gruen { color: var(--auto); background: rgba(47,211,154,.08); border-color: rgba(47,211,154,.35); }
.ampel-gelb { color: var(--manuell); background: rgba(245,165,36,.08); border-color: rgba(245,165,36,.35); }
.ampel-rot { color: var(--fehlt); background: rgba(242,84,107,.08); border-color: rgba(242,84,107,.35); }
.leer-hinweis, .phase-leer { color: var(--text-3); font-size: 14px; }

.gantt { --g-name: 130px; position: relative; padding: 34px 0 6px; margin-bottom: 40px; border-radius: var(--radius); }
.g-wochen { position: absolute; top: 0; left: var(--g-name); right: 0; height: 100%; overflow: hidden; }
.g-wochen span { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--linie); padding-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.g-wochen span i { display: block; font-style: normal; font-weight: 500; }
.g-zeile { position: relative; display: grid; grid-template-columns: var(--g-name) 1fr; align-items: center; height: 44px; }
.g-name { font-size: 13px; font-weight: 700; color: var(--text-2); }
.g-spur { position: relative; height: 30px; }
.g-balken { position: absolute; top: 0; height: 100%; border-radius: 9px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 800; color: #04121c; overflow: hidden; transform-origin: left; animation: wachsen .8s cubic-bezier(.2,.8,.2,1) both; white-space: nowrap; }
.g-launch { background: linear-gradient(90deg, var(--cyan), #9ff3fb); box-shadow: 0 0 22px -4px rgba(94,230,245,.6); }
.g-fundament { background: linear-gradient(90deg, var(--akzent), #74bdf5); animation-delay: .15s; }
.g-ausbau { background: linear-gradient(90deg, #8b7cf6, #b9aefb); animation-delay: .3s; }
@keyframes wachsen { from { transform: scaleX(0); opacity: 0; } }
.g-marker { position: absolute; top: 26px; bottom: 0; width: 0; border-left: 2px solid var(--fehlt); }
.g-marker span { position: absolute; bottom: -20px; left: -1px; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; color: #fff; background: var(--fehlt); padding: 1px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }

.phasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.phase { padding: 14px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; gap: 10px; align-content: start; }
.phase header { display: grid; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.phase header b { font-size: 15px; }
.phase header span { font-size: 12px; color: var(--text-3); }
.phase-launch header b { color: var(--cyan); }
.phase-fundament header b { color: #74bdf5; }
.phase-ausbau header b { color: #b9aefb; }
.baustein { padding: 13px; border-radius: 12px; border: 1px solid var(--linie); background: rgba(0,0,0,.28); display: grid; gap: 6px; animation: rein .4s both; }
.baustein.an { border-color: var(--linie-2); }
.bs-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bs-kopf b { font-size: 14px; }
.bs-tage { font-size: 11px; color: var(--text-3); font-weight: 700; white-space: nowrap; }
.baustein p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.bs-aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.bs-tag { font-size: 11px; color: var(--cyan); font-weight: 700; }
.weitere { margin: 4px 0 24px; }
.weitere summary { cursor: pointer; color: var(--text-2); font-weight: 700; font-size: 14px; padding: 8px 0; }
.weitere-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.weitere .baustein { opacity: .75; }
.weitere .baustein:hover { opacity: 1; }

.zielkarte { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 20px; align-items: center; padding: 22px; border-radius: 20px; border: 1px solid var(--linie); background: radial-gradient(ellipse at 80% 50%, rgba(47,211,154,.07), transparent 60%), var(--flaeche); margin-bottom: 16px; }
.zielkarte h3 { font-size: 24px; margin-bottom: 8px; }
.zielkarte p { color: var(--text-2); font-size: 14px; margin: 0; }
.zk-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zk-paar figure { margin: 0; text-align: center; }
.zk-paar figcaption { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.bp-intern { padding: 18px; border-radius: var(--radius); border: 1px solid rgba(245,165,36,.35); background: rgba(245,165,36,.06); }
.bp-intern ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }

/* Zusammenfassung */
.ueberblick .feld { margin-bottom: 12px; }
.export-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.export-hinweis { font-size: 13px; color: var(--text-3); }
.vorschau { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--text-2); background: rgba(0,0,0,.4); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; max-height: 60vh; overflow: auto; }

/* Responsiv */
@media (max-width: 1280px) {
  :root { --karte: 340px; --leiste: 76px; }
  .kap-text, .countdown span { display: none; }
  .kap-knopf { justify-content: center; padding: 8px 0; }
  .countdown { padding: 10px 4px; text-align: center; margin: 14px 0 0; }
  .countdown b { font-size: 22px; }
}
@media (max-width: 980px) {
  .rahmen { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 90px; gap: 16px; }
  .leiste { position: sticky; top: 58px; z-index: 10; max-height: none; overflow-x: auto; margin: 0 -16px; padding: 8px 16px; background: rgba(5,6,8,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
  .kapitel-liste { display: flex; gap: 4px; }
  .kapitel-liste .trenner { width: 1px; height: auto; margin: 4px; }
  .kap-knopf { width: 46px; }
  .countdown { display: none; }
  .karte { position: static; max-height: none; order: 3; }
  .buehne { order: 2; }
  .status-wahl { grid-template-columns: 1fr 1fr; }
  .phasen { grid-template-columns: minmax(0, 1fr); }
  .zielkarte { grid-template-columns: minmax(0, 1fr); }
  .kopf { padding: 12px 16px; gap: 10px; }
  .speicher { display: none; }
  .kopf-kunde i { display: none; }
}
@media (max-width: 560px) {
  .marke { font-size: 14px; }
  .marke span, .kopf-mitte { display: none; }
  .kap-kopf { gap: 14px; }
  .kap-nr { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
  .angebot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .angebot input[data-f=name] { grid-column: 1 / -1; }
  .zf { grid-template-columns: minmax(0, 1fr) 46px; }
  .zf input[type=range] { grid-column: 1 / -1; grid-row: 2; }
  .gantt { --g-name: 86px; }
  .g-wochen span i { display: none; }
  .zk-paar { grid-template-columns: minmax(0, 1fr); }
  .kap-fuss { flex-wrap: wrap; }
  .kap-fuss .btn-haupt { flex: 1; }
}

/* Druck */
@media print {
  :root { --bg: #fff; --text: #111; --text-2: #333; --text-3: #666; --linie: #ddd; --linie-2: #ccc; --flaeche: #fff; --flaeche-2: #f6f6f6; }
  body { background: #fff; color: #111; }
  .hg, .kopf, .leiste, .karte, .export-knoepfe, .export-hinweis, .feld, .intern-hinweis, .ueberblick .kap-kopf { display: none !important; }
  .rahmen { display: block; padding: 0; }
  .vorschau { max-height: none; border: 0; background: none; color: #111; font-size: 11px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }