/* =====================================================================
   Entwickler-App im Netz – Stilblatt nach dem Stil-Kanon Glas STREICH.
   Tokens übernommen aus ~/Claude/Produktseite/stil.css (dunkel = Grund-
   fassung, hell darunter, Umschalter über data-theme).
   Ebenen: E0 Raum · E1 .kante · E2 .kante-hoch (genau eine je Bild)
           E3 .glas-kopf (einziges backdrop-filter) · E4 Licht
   ===================================================================== */

:root {
  --grund: #0a0a0c; --karte: #141418; --karte-2: #1b1b21; --rand: #26262e;
  --schrift: #f4f4f6; --schrift-matt: #a1a1ad; --schrift-still: #6f6f7d;
  --akzent: #4d9fff; --akzent-stark: #6cb0ff; --auf-akzent: #04121f;
  --violett: #785cff; --tuerkis: #00c8be; --silber: #9aa8bd; --bernstein: #ff9a3c;
  --gut: #35d07f; --warn: #ffb020; --schlecht: #ff5a52;

  --flaeche-oben: rgba(255,255,255,.045); --flaeche-unten: rgba(255,255,255,.015);
  --flaeche-hoch-oben: rgba(255,255,255,.07); --flaeche-hoch-unten: rgba(255,255,255,.02);
  --flaeche-1: rgba(255,255,255,.035); --flaeche-2: rgba(255,255,255,.07); --flaeche-3: rgba(255,255,255,.12);
  --linie: rgba(255,255,255,.08);
  --lichtkante: inset 0 1px 0 rgba(255,255,255,.09);
  --kante: 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.13), 0 24px 60px -24px rgba(0,0,0,.9);
  --kante-hoch: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.18), 0 32px 80px -28px rgba(0,0,0,1);
  --glas: saturate(180%) blur(20px);
  --kopf-grund: rgba(10,10,12,.72); --kopf-linie: 0 1px 0 rgba(255,255,255,.07);
  --ring-grund: rgba(255,255,255,.07);

  --schleier-a: .16; --schleier-b: .13; --schleier-c: .055; --schleier-d: .075; --schleier-e: .06;
  --rausch: .035;

  --rund-karte: 20px; --rund-feld: 12px; --rund-innen: 8px; --rund-pille: 999px;
  --luft-1: 4px; --luft-2: 8px; --luft-3: 12px; --luft-4: 16px; --luft-5: 20px;
  --luft-6: 24px; --luft-7: 32px; --luft-8: 40px; --luft-9: 56px; --luft-10: 72px;
  --rand-seite: 16px;

  --kurve-rein: cubic-bezier(.22, 1, .36, 1); --kurve-raus: cubic-bezier(.4, 0, 1, 1);
  --dauer-klein: 130ms; --dauer-mittel: 300ms; --dauer-gross: 500ms; --dauer-zahl: 1100ms;
  --zeile-schmal: 46ch; --zeile-breit: 66ch;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --stufe-f: 10px; --stufe-l: 11px; --stufe-bk: 12.5px; --stufe-b: 14px;
  --stufe-t3: 17px; --stufe-t2: 22px; --stufe-t1: 30px; --stufe-d2: 52px; --stufe-d1: 72px;
  color-scheme: dark;
}

/* ---------- hell: Systemwunsch, solange nichts gewählt ist ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --grund: #f4f5f8; --karte: #ffffff; --karte-2: #eef0f5; --rand: #dcdfe7;
    --schrift: #111216; --schrift-matt: #4a4d58; --schrift-still: #6b6e7a;
    --akzent: #1f6fe0; --akzent-stark: #3a82ea; --auf-akzent: #ffffff;
    --violett: #5b3fe0; --tuerkis: #00867f; --silber: #5d6b82; --bernstein: #c2610f;
    --gut: #138a4f; --warn: #a56600; --schlecht: #d0342c;
    --flaeche-oben: rgba(255,255,255,.92); --flaeche-unten: rgba(255,255,255,.72);
    --flaeche-hoch-oben: #ffffff; --flaeche-hoch-unten: rgba(255,255,255,.9);
    --flaeche-1: rgba(17,18,22,.03); --flaeche-2: rgba(17,18,22,.06); --flaeche-3: rgba(17,18,22,.1);
    --linie: rgba(17,18,22,.08); --lichtkante: inset 0 0 0 .5px rgba(17,18,22,.08);
    --kante: 0 0 0 .5px rgba(17,18,22,.10), inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(30,40,70,.22);
    --kante-hoch: 0 0 0 .5px rgba(17,18,22,.14), inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.05), 0 32px 80px -28px rgba(30,40,70,.34);
    --kopf-grund: rgba(244,245,248,.74); --kopf-linie: 0 1px 0 rgba(17,18,22,.08);
    --ring-grund: rgba(17,18,22,.07);
    --schleier-a: .12; --schleier-b: .10; --schleier-c: .055; --schleier-d: .06; --schleier-e: .055;
    --rausch: .025;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --grund: #f4f5f8; --karte: #ffffff; --karte-2: #eef0f5; --rand: #dcdfe7;
  --schrift: #111216; --schrift-matt: #4a4d58; --schrift-still: #6b6e7a;
  --akzent: #1f6fe0; --akzent-stark: #3a82ea; --auf-akzent: #ffffff;
  --violett: #5b3fe0; --tuerkis: #00867f; --silber: #5d6b82; --bernstein: #c2610f;
  --gut: #138a4f; --warn: #a56600; --schlecht: #d0342c;
  --flaeche-oben: rgba(255,255,255,.92); --flaeche-unten: rgba(255,255,255,.72);
  --flaeche-hoch-oben: #ffffff; --flaeche-hoch-unten: rgba(255,255,255,.9);
  --flaeche-1: rgba(17,18,22,.03); --flaeche-2: rgba(17,18,22,.06); --flaeche-3: rgba(17,18,22,.1);
  --linie: rgba(17,18,22,.08); --lichtkante: inset 0 0 0 .5px rgba(17,18,22,.08);
  --kante: 0 0 0 .5px rgba(17,18,22,.10), inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -24px rgba(30,40,70,.22);
  --kante-hoch: 0 0 0 .5px rgba(17,18,22,.14), inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.05), 0 32px 80px -28px rgba(30,40,70,.34);
  --kopf-grund: rgba(244,245,248,.74); --kopf-linie: 0 1px 0 rgba(17,18,22,.08);
  --ring-grund: rgba(17,18,22,.07);
  --schleier-a: .12; --schleier-b: .10; --schleier-c: .055; --schleier-d: .06; --schleier-e: .055;
  --rausch: .025;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 640px) { :root { --rand-seite: 32px; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 128px; background: var(--grund); }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--grund); color: var(--schrift);
  font: 400 var(--stufe-b)/1.55 var(--font-sans); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.zahl, time, .tab { font-variant-numeric: tabular-nums; }
.verdeckt { display: none !important; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* ---------- E0: der Raum ---------- */
body::before, body::after { content: ""; position: fixed; inset: -20%; pointer-events: none; }
body::before {
  z-index: -2;
  background:
    radial-gradient(46rem 30rem at 18% -6%, rgb(77 159 255 / var(--schleier-a)), transparent 62%),
    radial-gradient(38rem 26rem at 88% 4%, rgb(120 92 255 / var(--schleier-b)), transparent 60%),
    radial-gradient(34rem 24rem at 62% 52%, rgb(0 200 190 / var(--schleier-c)), transparent 66%);
  animation: schweben 34s ease-in-out infinite alternate;
}
body::after {
  z-index: -2;
  background:
    radial-gradient(50rem 34rem at 82% 78%, rgb(77 159 255 / var(--schleier-d)), transparent 64%),
    radial-gradient(40rem 28rem at 8% 88%, rgb(120 92 255 / var(--schleier-e)), transparent 62%);
  animation: schweben-gegen 46s ease-in-out infinite alternate;
}
@keyframes schweben { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(-2.5%, 2%, 0) scale(1.06) } }
@keyframes schweben-gegen { from { transform: translate3d(0,0,0) scale(1.04) } to { transform: translate3d(3%, -2.5%, 0) scale(1) } }
.rausch {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--rausch);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23r)'/></svg>");
}

/* ---------- E3: Kopfleiste ---------- */
.glas-kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--kopf-grund);
  -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas);
  box-shadow: var(--kopf-linie);
  padding-top: env(safe-area-inset-top);
}
@media (prefers-reduced-transparency: reduce) {
  .glas-kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grund); }
}
.kopf-innen {
  max-width: 1320px; margin: 0 auto; padding: var(--luft-2) var(--rand-seite);
  display: flex; align-items: center; gap: var(--luft-3); min-height: 64px; flex-wrap: wrap;
}
.marke { display: inline-flex; align-items: center; gap: var(--luft-3); min-height: 44px; text-decoration: none; border-radius: var(--rund-feld); }
.marke img { width: 32px; height: 32px; }
.marke-wort { font-size: var(--stufe-t3); font-weight: 600; letter-spacing: -.024em; }
.reiter { display: flex; gap: var(--luft-1); margin-left: auto; }
.reiter a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--luft-3);
  font-size: var(--stufe-bk); font-weight: 500; letter-spacing: 0; white-space: nowrap;
  color: var(--schrift-matt); text-decoration: none; border-radius: var(--rund-pille);
  transition: color var(--dauer-klein) var(--kurve-rein), background var(--dauer-klein) var(--kurve-rein);
}
.reiter a:hover { color: var(--schrift); background: var(--flaeche-2); }
.reiter a[aria-current="page"] { color: var(--schrift); background: var(--flaeche-2); box-shadow: var(--lichtkante); }
.reiter a .zaehler { margin-left: 6px; font-size: var(--stufe-f); color: var(--akzent); font-variant-numeric: tabular-nums; }
.rund {
  flex: none; width: 44px; height: 44px; border: none; border-radius: var(--rund-pille);
  display: inline-grid; place-items: center; cursor: pointer;
  color: var(--schrift); background: var(--flaeche-2); box-shadow: var(--lichtkante);
  transition: background var(--dauer-klein) var(--kurve-rein), transform var(--dauer-klein) var(--kurve-rein);
}
.rund:hover { background: var(--flaeche-3); }
.rund:active { transform: scale(.94); }
.rund svg { width: 20px; height: 20px; }
.rund .sonne { display: none; }
:root[data-theme="light"] .rund .sonne { display: block; }
:root[data-theme="light"] .rund .mond { display: none; }
#licht { margin-left: auto; }
.reiter:not(.verdeckt) + #licht { margin-left: 0; }
/* Schmal: die Reiter bekommen eine eigene Zeile und rollen seitlich – in
   IHREM Kasten, nie die ganze Seite. */
@media (max-width: 899px) {
  .reiter { order: 3; flex-basis: 100%; margin: 0 calc(var(--rand-seite) * -1); padding: 0 var(--rand-seite) var(--luft-1);
            overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .reiter a { min-height: 44px; }
  #licht, .reiter:not(.verdeckt) + #licht { margin-left: auto; }
}

/* ---------- Seite ---------- */
.seite { max-width: 1320px; margin: 0 auto; padding: var(--luft-7) var(--rand-seite) 0; }
@supports (padding: max(0px)) {
  .seite, .kopf-innen, .fuss-innen {
    padding-left: max(var(--rand-seite), env(safe-area-inset-left));
    padding-right: max(var(--rand-seite), env(safe-area-inset-right));
  }
}
.abschnitt { margin-top: var(--luft-9); }

/* ---------- Typografie ---------- */
.etikett {
  margin: 0 0 var(--luft-3); font-size: var(--stufe-l); line-height: 1; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--schrift-still);
}
.kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
             gap: var(--luft-1) var(--luft-3); margin-bottom: var(--luft-4); }
.kopfzeile .etikett { margin: 0; }
.kopfzeile span { font-size: var(--stufe-f); letter-spacing: .012em; color: var(--schrift-still); }
.schlagzeile { font-size: clamp(30px, 5.4vw, 52px); line-height: 1.02; letter-spacing: -.035em; max-width: 18ch; text-wrap: balance; }
.schlagzeile em { font-style: normal; color: var(--akzent); }
.titel { font-size: var(--stufe-t1); line-height: 1.15; letter-spacing: -.03em; max-width: 26ch; text-wrap: balance; }
.untertitel { font-size: var(--stufe-t3); line-height: 1.35; letter-spacing: -.024em; }
.vorspann { margin-top: var(--luft-4); max-width: var(--zeile-breit); font-size: var(--stufe-t3);
            line-height: 1.45; letter-spacing: -.024em; color: var(--schrift-matt); }
.text { color: var(--schrift-matt); max-width: var(--zeile-breit); }
.klein { font-size: var(--stufe-bk); letter-spacing: 0; color: var(--schrift-matt); line-height: 1.5; max-width: var(--zeile-breit); }
.still { color: var(--schrift-still); }
.warn { color: var(--warn); }

/* ---------- E1 / E2 ---------- */
.kante { background: linear-gradient(180deg, var(--flaeche-oben) 0%, var(--flaeche-unten) 100%);
         box-shadow: var(--kante); border-radius: var(--rund-karte); }
.kante-hoch { background: linear-gradient(180deg, var(--flaeche-hoch-oben) 0%, var(--flaeche-hoch-unten) 100%);
              box-shadow: var(--kante-hoch); border-radius: var(--rund-karte); }
.karte { padding: var(--luft-6); position: relative; min-width: 0; }

/* E4: Licht unter dem Zeiger (nur hover, zählt nicht mit) */
.scheinwerfer { position: relative; overflow: hidden; }
.scheinwerfer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--licht, var(--akzent)) 14%, transparent), transparent 42%);
}
@media (hover: hover) { .scheinwerfer:hover::after { opacity: 1; } }

/* E4: der eine Leuchtrand */
@property --winkel { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.leuchtrand { position: relative; }
.leuchtrand::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--winkel, 0deg), transparent 0%,
    color-mix(in srgb, var(--akzent) 85%, transparent) 12%, transparent 26%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: drehen 6s linear infinite; pointer-events: none;
}
@keyframes drehen { to { --winkel: 360deg; } }

/* ---------- Raster ---------- */
.raster { display: grid; grid-template-columns: 1fr; gap: var(--luft-5); }
@media (min-width: 960px) {
  .raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; }
  .s5 { grid-column: span 5; } .s4 { grid-column: span 4; }
}
.instrument { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linie);
              border-radius: var(--rund-karte); overflow: hidden; box-shadow: var(--kante); }
.instrument > * { background: var(--grund); background-image: linear-gradient(180deg, var(--flaeche-oben), var(--flaeche-unten));
                  padding: var(--luft-6); min-width: 0; }
@media (min-width: 820px) { .instrument.drei { grid-template-columns: 5fr 4fr 4fr; } }

/* ---------- Knöpfe ---------- */
.knopf-haupt, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--luft-2);
  border: none; border-radius: var(--rund-pille); cursor: pointer; text-decoration: none;
  transition: background var(--dauer-klein) var(--kurve-rein), transform var(--dauer-klein) var(--kurve-rein);
}
.knopf-haupt { min-height: 52px; padding: 0 var(--luft-6); font: 600 var(--stufe-b)/1 var(--font-sans); color: var(--auf-akzent); background: var(--akzent); }
.knopf-haupt.schein { box-shadow: 0 0 24px -4px color-mix(in srgb, var(--akzent) 55%, transparent); }
.knopf-haupt:hover { background: var(--akzent-stark); }
.knopf-haupt:disabled { opacity: .6; cursor: progress; }
.knopf { min-height: 44px; padding: 0 var(--luft-4); font: 500 var(--stufe-b)/1 var(--font-sans); color: var(--schrift); background: var(--flaeche-2); box-shadow: var(--lichtkante); }
@media (min-width: 900px) and (hover: hover) { .knopf { min-height: 36px; } }
.knopf:hover { background: var(--flaeche-3); }
.knopf-haupt:active, .knopf:active { transform: scale(.97); }
.knopf.weg { color: var(--schlecht); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--schlecht) 30%, transparent); }
.knopf.weg:hover { background: color-mix(in srgb, var(--schlecht) 12%, transparent); }
.knopf.akzent { color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent);
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 36%, transparent); }
.knopf.akzent:hover { background: color-mix(in srgb, var(--akzent) 20%, transparent); }
.klein-knopf { min-height: 36px; font-size: var(--stufe-bk); }
.breit { width: 100%; }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--luft-2); margin-top: var(--luft-4); }

/* ---------- Felder ---------- */
.feld {
  width: 100%; min-height: 44px; padding: var(--luft-3) var(--luft-4); border: none;
  border-radius: var(--rund-feld); font: 400 16px/1.45 var(--font-sans); color: var(--schrift);
  background: var(--flaeche-1); box-shadow: inset 0 0 0 1px var(--linie);
  transition: box-shadow var(--dauer-klein) var(--kurve-rein);
}
.feld:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akzent); }
textarea.feld { min-height: 112px; resize: vertical; }
.wahl { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rund-pille); background: var(--flaeche-1); box-shadow: inset 0 0 0 1px var(--linie); }
.wahl button { min-height: 38px; padding: 0 var(--luft-4); border: none; border-radius: var(--rund-pille); background: transparent;
               font-size: var(--stufe-bk); font-weight: 500; color: var(--schrift-matt); cursor: pointer; }
.wahl button[aria-pressed="true"] { color: var(--schrift); background: var(--flaeche-3); box-shadow: var(--lichtkante); }

/* ---------- Pillen und Zustandspunkte ---------- */
.pille { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 var(--luft-3);
         border-radius: var(--rund-pille); font-size: var(--stufe-l); font-weight: 600; letter-spacing: .02em;
         color: var(--schrift-matt); background: var(--flaeche-2); white-space: nowrap; }
.pille.s-gebaut { color: var(--gut); background: color-mix(in srgb, var(--gut) 14%, transparent); }
.pille.s-arbeit { color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.pille.s-geplant { color: var(--schrift-still); background: var(--flaeche-1); box-shadow: inset 0 0 0 1px var(--linie); }
/* Form UND Farbe: gebaut = gefüllt, in Arbeit = halb, geplant = Ring. */
.punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.punkt.p-gebaut { background: var(--gut); }
.punkt.p-arbeit { background: linear-gradient(90deg, var(--akzent) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.punkt.p-geplant { box-shadow: inset 0 0 0 1.5px var(--schrift-still); }
/* klemmt = Zustand „Achtung“: Warnfarbe UND Form (Raute), nie Farbe allein. */
.punkt.p-klemmt { background: var(--warn); border-radius: 2px; transform: rotate(45deg) scale(.85); }

/* Fortschritt: scaleX, nie width */
.balken { position: relative; height: 6px; border-radius: 3px; background: var(--ring-grund); overflow: hidden; }
/* Der Endwert steht von Anfang an im Stil; die Animation laeuft nur VON null
   dorthin. So stimmt der Balken auch, wenn der Browser gerade nicht zeichnet
   (Hintergrund-Tab) - die Zahl nie aus einem Skript-Takt abhaengig machen. */
.balken i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--anteil, 0));
            background: var(--akzent); border-radius: inherit;
            animation: wachsen 700ms var(--kurve-rein) both; }
@keyframes wachsen { from { transform: scaleX(0); } }
.balken.fertig i { background: var(--gut); }
.balken.still i { background: var(--schrift-still); }

/* ================= ÜBERBLICK ================= */
.buehne { display: grid; gap: var(--luft-7); padding: var(--luft-7); align-items: center; }
@media (min-width: 960px) { .buehne { grid-template-columns: auto minmax(0, 1fr); padding: var(--luft-8) var(--luft-9) var(--luft-8) var(--luft-8); gap: var(--luft-9); } }
@media (max-width: 519px) { .buehne { padding: var(--luft-6); gap: var(--luft-6); } }

.ring { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .grund { stroke: var(--ring-grund); }
.ring .stufe-bogen { animation: bogen var(--dauer-zahl) var(--kurve-rein) both; }
@keyframes bogen { from { stroke-dashoffset: var(--von); } }
.ring .bogen-gebaut { stroke: var(--akzent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--akzent) 60%, transparent)); }
:root[data-theme="light"] .ring .bogen-gebaut { filter: none; }
.ring .bogen-arbeit { stroke: color-mix(in srgb, var(--akzent) 35%, transparent); }
.ring .fuge { stroke: var(--grund); }
.ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-zahl { font-size: var(--stufe-d1); line-height: .95; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ring-zahl span { margin-left: 4px; font-size: 40px; font-weight: 400; color: var(--schrift-still); letter-spacing: -.035em; }
.ring-unter { margin-top: var(--luft-2); font-size: var(--stufe-l); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--schrift-still); }
@media (max-width: 519px) { .ring { width: 200px; } .ring-zahl { font-size: var(--stufe-d2); } .ring-zahl span { font-size: 30px; } }

.stufen-leiste { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; margin-top: var(--luft-6); }
.stufen-leiste a { display: grid; gap: 6px; text-decoration: none; min-width: 0; padding-bottom: var(--luft-1); border-radius: 6px; }
.stufen-leiste b { font-size: var(--stufe-f); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--schrift-still);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stufen-leiste a.dran b { color: var(--akzent); }
@media (max-width: 519px) { .stufen-leiste .stufe-titel { display: none; } }
.stufen-leiste a.fertig b { color: var(--schrift-matt); }
.buehne-zahlen { display: flex; flex-wrap: wrap; gap: var(--luft-2) var(--luft-6); margin-top: var(--luft-5); }
.buehne-zahlen div { display: grid; }
.buehne-zahlen b { font-size: var(--stufe-t2); font-weight: 600; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.buehne-zahlen span { font-size: var(--stufe-bk); color: var(--schrift-still); letter-spacing: 0; }

.drei-fragen h2 { display: flex; align-items: center; gap: var(--luft-2); font-size: var(--stufe-l); font-weight: 600;
                  text-transform: uppercase; letter-spacing: .12em; color: var(--schrift-still); margin-bottom: var(--luft-4); }
.drei-fragen h2 .punkt { width: 8px; height: 8px; }
.drei-fragen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--luft-3); }
.drei-fragen li { display: grid; gap: 2px; }
.drei-fragen li b { font-weight: 500; font-size: var(--stufe-b); line-height: 1.4; }
.drei-fragen li small { font-size: var(--stufe-bk); color: var(--schrift-still); }
.drei-fragen .klemmt-satz { font-size: var(--stufe-t3); line-height: 1.4; letter-spacing: -.024em; font-weight: 500; }
.drei-fragen .leer { color: var(--schrift-matt); }

/* App-Kacheln */
.app-kachel { display: grid; gap: var(--luft-4); cursor: pointer; text-decoration: none;
              transition: transform var(--dauer-mittel) var(--kurve-rein); }
.app-kachel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none;
                      background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--licht) 70%, transparent), transparent); }
@media (hover: hover) { .app-kachel:hover { transform: translateY(-2px); } }
.app-kachel:active { transform: scale(.99); }
.kachel-kopf { display: flex; align-items: center; gap: var(--luft-4); min-width: 0; }
.app-symbol { flex: none; width: 56px; height: 56px; }
.app-symbol img { width: 56px; height: 56px; margin: -4px; width: 64px; height: 64px; max-width: none; }
.bereich-symbol { flex: none; width: 48px; height: 48px; margin: 4px; border-radius: 12px; display: grid; place-items: center;
                  color: var(--schrift); background: linear-gradient(180deg, var(--flaeche-3), var(--flaeche-1)); box-shadow: var(--kante); }
.bereich-symbol svg { width: 24px; height: 24px; }
.kachel-kopf h3 { font-size: var(--stufe-t2); letter-spacing: -.012em; line-height: 1.2; }
.kachel-kopf small { display: block; font-size: var(--stufe-bk); color: var(--schrift-still); letter-spacing: 0; }
.kachel-zahl { margin-left: auto; text-align: right; }
.kachel-zahl b { display: block; font-size: var(--stufe-t1); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kachel-zahl b span { font-size: var(--stufe-t3); font-weight: 400; color: var(--schrift-still); margin-left: 2px; }
.kachel-zahl small { font-size: var(--stufe-f); color: var(--schrift-still); letter-spacing: .012em; }
.kachel-listen { display: grid; gap: var(--luft-4); }
@media (min-width: 960px) { .s7 .kachel-listen { grid-template-columns: 1fr 1fr; } }
.mini-liste h4 { margin: 0 0 var(--luft-2); font-size: var(--stufe-f); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--schrift-still); }
.mini-liste ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mini-liste li { display: flex; gap: var(--luft-2); align-items: baseline; font-size: var(--stufe-bk); line-height: 1.4; color: var(--schrift-matt); letter-spacing: 0; }
.mini-liste li .punkt { transform: translateY(1px); width: 8px; height: 8px; }
.mini-liste li.mehr { color: var(--schrift-still); padding-left: 16px; }
.kachel-fuss { display: flex; align-items: center; justify-content: space-between; font-size: var(--stufe-bk); color: var(--schrift-still); }
.kachel-fuss .weiter { color: var(--akzent); font-weight: 500; }

/* ================= DETAIL (eine App) ================= */
.zurueck { display: inline-flex; align-items: center; gap: var(--luft-2); min-height: 44px; color: var(--akzent);
           text-decoration: none; font-weight: 500; }
.detail-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luft-5); padding: var(--luft-7); }
.detail-kopf .app-symbol, .detail-kopf .app-symbol img { width: 88px; height: 88px; }
.detail-kopf .app-symbol img { width: 100px; height: 100px; margin: -6px; }
.detail-kopf .bereich-symbol { width: 72px; height: 72px; border-radius: 18px; }
.detail-kopf .bereich-symbol svg { width: 36px; height: 36px; }
.detail-kopf .wachs { flex: 1 1 280px; min-width: 0; }
.detail-zahl { font-size: var(--stufe-d2); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.detail-zahl span { font-size: 30px; font-weight: 400; color: var(--schrift-still); margin-left: 4px; }

/* ================= LISTEN ================= */
.zeile { display: flex; align-items: flex-start; gap: var(--luft-3); padding: var(--luft-3) 0; border-top: 1px solid var(--linie); min-width: 0; }
.zeile:first-of-type { border-top: none; }
.zeile .punkt { margin-top: 6px; }
.zeile .wachs { flex: 1; min-width: 0; }
.zeile b { font-weight: 500; }
.zeile small { display: block; font-size: var(--stufe-bk); color: var(--schrift-still); letter-spacing: 0; }
.zeile .notiz-text { margin-top: var(--luft-1); white-space: pre-line; font-size: var(--stufe-bk); color: var(--schrift-matt); letter-spacing: 0; max-width: var(--zeile-breit); }

details.klapp > summary { list-style: none; cursor: pointer; }
details.klapp > summary::-webkit-details-marker { display: none; }

/* ================= WEG BIS LIVE ================= */
.weg { position: relative; display: grid; gap: var(--luft-5); }
.stufe { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--luft-4); }
.stufe-nr { position: relative; display: grid; justify-items: center; }
.stufe-nr b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: var(--stufe-t3);
              font-weight: 600; font-variant-numeric: tabular-nums; background: var(--flaeche-2); box-shadow: var(--kante); color: var(--schrift-matt); }
.stufe.fertig .stufe-nr b { color: var(--gut); background: color-mix(in srgb, var(--gut) 14%, transparent); }
.stufe.dran .stufe-nr b { color: var(--auf-akzent); background: var(--akzent); box-shadow: 0 0 24px -4px color-mix(in srgb, var(--akzent) 55%, transparent); }
.stufe-nr::after { content: ""; position: absolute; top: 52px; bottom: calc(var(--luft-5) * -1); width: 2px; border-radius: 2px; background: var(--linie); }
.stufe:last-child .stufe-nr::after { display: none; }
.stufe.fertig .stufe-nr::after { background: color-mix(in srgb, var(--gut) 40%, transparent); }
.stufe .karte { padding: var(--luft-5) var(--luft-6); }
.stufe.fertig .karte { opacity: .72; }
.stufe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--luft-2) var(--luft-4); margin-bottom: var(--luft-3); }
.stufe-kopf h3 { font-size: var(--stufe-t2); letter-spacing: -.012em; }
.stufe-kopf span { font-size: var(--stufe-bk); color: var(--schrift-still); font-variant-numeric: tabular-nums; }
.schritt summary { display: flex; align-items: flex-start; gap: var(--luft-3); padding: var(--luft-3) 0; border-top: 1px solid var(--linie); min-height: 44px; }
.schritt:first-of-type summary { border-top: none; }
.schritt summary .punkt { margin-top: 6px; }
.schritt summary .wachs { flex: 1; min-width: 0; font-weight: 500; }
.schritt summary .wer { font-size: var(--stufe-bk); color: var(--schrift-still); white-space: nowrap; }
.schritt summary .pfeil { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--schrift-still); transition: transform var(--dauer-mittel) var(--kurve-rein); }
.schritt[open] summary .pfeil { transform: rotate(90deg); }
.schritt .notiz-text { padding: 0 0 var(--luft-4) 22px; white-space: pre-line; font-size: var(--stufe-bk); line-height: 1.55; color: var(--schrift-matt); max-width: var(--zeile-breit); letter-spacing: 0; }
@media (max-width: 519px) { .stufe { grid-template-columns: 1fr; } .stufe-nr { justify-items: start; } .stufe-nr::after { display: none; } }

/* ================= BAUPLAN-BAUM ================= */
.baum-werkzeug { display: flex; flex-wrap: wrap; gap: var(--luft-2); align-items: center; margin-bottom: var(--luft-4); }
.baum-werkzeug .feld { flex: 1 1 220px; min-height: 40px; }
.baum ul { margin: 0; padding: 0 0 0 var(--luft-5); list-style: none; border-left: 1px solid var(--linie); margin-left: 11px; }
.baum > ul { padding-left: 0; border-left: none; margin-left: 0; }
.baum li { margin: 0; }
.knoten > summary, .blatt { display: flex; align-items: center; gap: var(--luft-2); min-height: 40px; padding: var(--luft-1) var(--luft-2);
                             border-radius: var(--rund-innen); cursor: pointer; }
.knoten > summary:hover, .blatt:hover { background: var(--flaeche-1); }
.knoten > summary .pfeil { flex: none; width: 14px; height: 14px; color: var(--schrift-still); transition: transform var(--dauer-mittel) var(--kurve-rein); }
.knoten[open] > summary .pfeil { transform: rotate(90deg); }
.blatt .leer-pfeil { flex: none; width: 14px; }
.knoten-text { flex: 1; min-width: 0; font-weight: 500; line-height: 1.35; }
.stamm > summary .knoten-text { font-size: var(--stufe-t3); font-weight: 600; letter-spacing: -.024em; }
.ast-zahl { font-size: var(--stufe-f); color: var(--schrift-still); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ast-balken { flex: none; width: 56px; }
.baum .notiz-text { margin: 0 0 var(--luft-3) 38px; padding: var(--luft-3) var(--luft-4); border-radius: var(--rund-innen);
                    background: var(--flaeche-1); white-space: pre-line; font-size: var(--stufe-bk); line-height: 1.55;
                    color: var(--schrift-matt); max-width: var(--zeile-breit); letter-spacing: 0; }
.baum .treffer > summary .knoten-text, .baum .treffer.blatt .knoten-text { color: var(--akzent); }
@media (max-width: 519px) { .ast-balken { display: none; } .baum ul { padding-left: var(--luft-3); } }

/* ================= GESCHÄFT ================= */
.idee summary { display: flex; gap: var(--luft-3); align-items: flex-start; padding: var(--luft-3) 0; border-top: 1px solid var(--linie); min-height: 44px; }
.idee:first-of-type summary { border-top: none; }
.idee summary b { flex: 1; font-weight: 500; }
.idee summary .pfeil { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--schrift-still); transition: transform var(--dauer-mittel) var(--kurve-rein); }
.idee[open] summary .pfeil { transform: rotate(90deg); }
.idee .notiz-text { padding-bottom: var(--luft-4); white-space: pre-line; font-size: var(--stufe-bk); line-height: 1.55; color: var(--schrift-matt); max-width: var(--zeile-breit); letter-spacing: 0; }
.vk-stufe h3 { font-size: var(--stufe-t2); letter-spacing: -.012em; }
.vk-stufe .klein { margin-top: var(--luft-2); }
.vk-bausteine { display: grid; gap: var(--luft-3); margin-top: var(--luft-5); }
@media (min-width: 760px) { .vk-bausteine { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.vk-baustein { padding: var(--luft-4) var(--luft-5); border-radius: var(--rund-feld); background: var(--flaeche-1); box-shadow: inset 0 0 0 1px var(--linie); }
.vk-baustein b { font-size: var(--stufe-t3); letter-spacing: -.024em; }
.vk-baustein .wer { margin-left: var(--luft-2); font-size: var(--stufe-f); color: var(--schrift-still); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.vk-baustein p { margin-top: var(--luft-2); font-size: var(--stufe-bk); color: var(--schrift-matt); letter-spacing: 0; }
.vk-baustein .aufwand { margin-top: var(--luft-3); }
.vk-farbe-gut { --vk: var(--gut); } .vk-farbe-akz { --vk: var(--akzent); } .vk-farbe-warn { --vk: var(--warn); } .vk-farbe-still { --vk: var(--schrift-still); }
.vk-stufe .kopfzeile .etikett { color: var(--vk, var(--schrift-still)); }

/* ================= TEAM & NOTIZEN ================= */
.ausgabe { display: grid; gap: var(--luft-2); margin-top: var(--luft-3); }
.link-feld { font-family: var(--font-mono); font-size: var(--stufe-bk); }
.notiz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luft-2); }
.notiz.erledigt { opacity: .45; }
.art { font-size: var(--stufe-f); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--schrift-still); }
.art.fehler { color: var(--warn); } .art.frage { color: var(--violett); } .art.wunsch { color: var(--akzent); }

/* ---------- Tor ---------- */
.tor-karte { max-width: 640px; margin: var(--luft-7) auto 0; padding: var(--luft-8) var(--luft-7); display: grid; justify-items: start; }
@media (max-width: 519px) { .tor-karte { padding: var(--luft-7) var(--luft-5); margin-top: var(--luft-4); } }
.tor-symbol { width: 96px; height: 96px; margin: -8px 0 var(--luft-5) -8px; }
.tor-form { width: 100%; margin-top: var(--luft-7); }
.tor-fehler { min-height: 1.5em; margin-top: var(--luft-3); font-size: var(--stufe-bk); color: var(--warn); }
#tor-hilfe { margin-top: var(--luft-2); }

/* ---------- Warten (Zustand 2): nie eine leere Fläche ---------- */
.skelett { display: grid; gap: var(--luft-3); }
.skelett i { display: block; height: 16px; border-radius: 6px; background: var(--flaeche-2); position: relative; overflow: hidden; }
.skelett i:nth-child(1) { height: 20px; width: 60%; } .skelett i:nth-child(3) { width: 80%; height: 12px; }
.skelett i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
                    background: linear-gradient(90deg, transparent, var(--flaeche-2), transparent);
                    animation: schimmer 2.4s var(--kurve-rein) infinite; }
@keyframes schimmer { 60%, 100% { transform: translateX(100%); } }
.ausfall { border-left: 3px solid var(--warn); }

/* ---------- Quittung (Zustand 4) ---------- */
.quittung { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30; transform: translate(-50%, 16px);
            opacity: 0; pointer-events: none; padding: var(--luft-3) var(--luft-5); border-radius: var(--rund-pille);
            background: var(--karte); box-shadow: var(--kante-hoch); font-weight: 500; max-width: calc(100vw - 32px);
            transition: opacity var(--dauer-mittel) var(--kurve-rein), transform var(--dauer-mittel) var(--kurve-rein); }
.quittung.an { opacity: 1; transform: translate(-50%, 0); }
.quittung.gut { color: var(--gut); } .quittung.schlecht { color: var(--warn); }

/* ---------- Fuss ---------- */
.fuss { box-shadow: var(--kopf-linie); margin-top: var(--luft-10); }
.fuss-innen { max-width: 1320px; margin: 0 auto; padding: var(--luft-6) var(--rand-seite) max(var(--luft-8), env(safe-area-inset-bottom));
              display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--luft-3);
              font-size: var(--stufe-bk); color: var(--schrift-still); letter-spacing: 0; }

/* ---------- Ankommen: nur transform/opacity ---------- */
@keyframes herein { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.herein { animation: herein var(--dauer-gross) var(--kurve-rein) both; }
.v1 { animation-delay: 55ms; } .v2 { animation-delay: 110ms; } .v3 { animation-delay: 165ms; }
.v4 { animation-delay: 220ms; } .v5 { animation-delay: 275ms; } .v6 { animation-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; scroll-behavior: auto !important; }
  body::before, body::after, .leuchtrand::before, .skelett i::after { animation: none !important; }
}