/* STAGED Designer - Look-Schicht "Studio" (Lex 17.10.2026: Qualitaet wie Floating Alpha, Status und Feedback, aber ohne Metallrahmen).
   Liegt NACH dem Inline-CSS in index.html und ueberschreibt nur Optik, keine Logik. Rueckbau: Link in index.html entfernen.
   Bausteine: Tiefe (Verlauf + Innenlicht + weicher Schatten), Radius 14, Gruen als Haupt-Akzent mit Glow, Magenta sparsam,
   grosse Touch-Ziele, ruhige Bewegung (.12-.18s), Fokusringe, Text immer in kurzen Absaetzen. */
:root{
  --r:14px;--r-s:10px;--r-l:20px;
  --flaeche:linear-gradient(180deg,rgba(17,26,46,.96),rgba(10,16,30,.96));
  --flaeche2:linear-gradient(180deg,#121b30,#0d1424);
  --innen:inset 0 1px 0 rgba(255,255,255,.05);
  --schatten:0 10px 28px rgba(0,0,0,.42);
  --schatten-hoch:0 18px 46px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(120,240,93,.16);
  --glow:0 0 18px rgba(120,240,93,.22);
  --rand:rgba(120,240,93,.16);--rand-stark:rgba(120,240,93,.42);
  --panel:var(--flaeche);
}
body{background:
  radial-gradient(1100px 520px at 8% -8%,rgba(120,240,93,.075),transparent 62%),
  radial-gradient(900px 480px at 100% 108%,rgba(201,79,176,.06),transparent 60%),
  #050912;
  background-attachment:fixed;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
::selection{background:rgba(120,240,93,.32)}

/* ---------- Kopfzeile ---------- */
#app{grid-template-rows:58px 1fr}
header{background:linear-gradient(180deg,rgba(14,21,38,.96),rgba(8,13,24,.94));border-bottom:1px solid rgba(120,240,93,.2);box-shadow:0 8px 26px rgba(0,0,0,.4);gap:16px}
header .marke{font-size:13px;letter-spacing:.26em;text-shadow:0 0 14px rgba(120,240,93,.55)}
header .marke small{letter-spacing:.1em;color:var(--dim2)}
nav{gap:3px;padding:4px;border-radius:14px;background:rgba(5,9,18,.6);border:1px solid var(--line);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
nav button{border-radius:10px;padding:8px 13px;font-size:11.5px;font-weight:500;letter-spacing:.08em;transition:background .15s,color .15s,box-shadow .15s,transform .12s}
nav button:hover{background:rgba(120,240,93,.07);color:var(--text)}
nav button:active{transform:translateY(1px)}
nav button.an{background:linear-gradient(180deg,rgba(120,240,93,.26),rgba(120,240,93,.09));color:#d6ffc8;box-shadow:inset 0 0 0 1px rgba(120,240,93,.5),0 4px 16px rgba(120,240,93,.18)}
#projektName{font-size:14px;letter-spacing:.01em}
#stand{padding:3px 9px;border-radius:99px;background:rgba(120,240,93,.07);border:1px solid var(--rand);color:#a8d79b}

/* ---------- Knoepfe, Felder ---------- */
.knopf{background:var(--flaeche2);border:1px solid var(--line);border-radius:10px;box-shadow:var(--innen);padding:8px 14px;font-weight:500;transition:border-color .15s,background .15s,color .15s,box-shadow .15s,transform .12s}
.knopf:hover{border-color:var(--gold2);color:var(--gold);background:linear-gradient(180deg,rgba(120,240,93,.09),rgba(120,240,93,.03));box-shadow:var(--ring)}
.knopf:active{transform:translateY(1px);box-shadow:none}
.knopf.prim{background:linear-gradient(180deg,#8bff70,#58c53f);border-color:#78f05d;color:#04120a;font-weight:700;box-shadow:0 4px 18px rgba(120,240,93,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.knopf.prim:hover{background:linear-gradient(180deg,#a2ff8b,#6ad94f);color:#04120a;box-shadow:0 6px 24px rgba(120,240,93,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.knopf.klein{padding:4px 10px;border-radius:8px}
.knopf.rot:hover{box-shadow:0 0 0 3px rgba(255,90,90,.14);background:rgba(255,90,90,.06)}
input,textarea,select{background:#09101e;border:1px solid var(--line);border-radius:10px;padding:9px 12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.4);transition:border-color .15s,box-shadow .15s}
input:hover,textarea:hover,select:hover{border-color:#2d3d5c}
input:focus,textarea:focus,select:focus{border-color:var(--gold2);box-shadow:inset 0 1px 3px rgba(0,0,0,.4),var(--ring)}
textarea{line-height:1.55}
label{letter-spacing:.04em}

/* ---------- Projekt-Seite ---------- */
#tabProjekt{padding:30px 28px 60px}
.projektWrap{max-width:1180px}
.projektWrap>h1{position:relative;font-size:34px;line-height:1.08;margin:0 0 6px;letter-spacing:.01em;padding:22px 26px 0;border-radius:var(--r-l) var(--r-l) 0 0;border:1px solid var(--rand);border-bottom:0;
  background:radial-gradient(800px 200px at 0% 0%,rgba(120,240,93,.14),transparent 62%),radial-gradient(600px 200px at 100% 100%,rgba(201,79,176,.09),transparent 60%),var(--flaeche)}
.projektWrap>h1 small{font-size:14px;color:var(--dim);margin-top:6px;max-width:70ch;padding-bottom:20px}
.zitat{border:1px solid var(--rand);border-left:4px solid var(--gold);border-radius:0 0 var(--r-l) var(--r-l);margin:-6px 0 22px;padding:14px 22px;background:linear-gradient(180deg,rgba(120,240,93,.06),rgba(10,16,30,.9))}
.karten{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-top:20px}
.karte{position:relative;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);padding:18px 18px 16px;box-shadow:var(--schatten),var(--innen);transition:transform .15s,border-color .15s,box-shadow .15s}
.karte::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,rgba(120,240,93,.5),transparent);opacity:0;transition:opacity .18s}
.karte:hover{transform:translateY(-2px);border-color:var(--rand-stark);box-shadow:var(--schatten-hoch),0 0 0 3px rgba(120,240,93,.1),var(--innen)}
.karte:hover::before{opacity:1}
.karte h3{font-size:16.5px;line-height:1.3;margin:0 0 8px;letter-spacing:.005em}
.karte .meta{line-height:1.5}
.karte .balken{height:6px;border-radius:99px;margin-top:12px;background:#121c33;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.karte .balken i{border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 0 10px rgba(120,240,93,.45)}
.karte .knopf{margin-top:12px}
.karte.neu{border:1.5px dashed rgba(120,240,93,.38);background:linear-gradient(180deg,rgba(120,240,93,.06),rgba(10,16,30,.95))}
.karte.neu h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- Schwebende Glasflaechen ---------- */
.glas{border-radius:var(--r);border:1px solid var(--rand);background:linear-gradient(180deg,rgba(17,26,46,.94),rgba(8,13,24,.92));box-shadow:var(--schatten-hoch),var(--innen)}
.glas.frei{border-color:var(--rand-stark);box-shadow:0 28px 64px rgba(0,0,0,.7),0 0 0 3px rgba(120,240,93,.07)}
.glasKopf{padding:9px 12px;background:linear-gradient(180deg,rgba(120,240,93,.1),rgba(120,240,93,.03));border-bottom:1px solid var(--rand)}
.glasKopf b{font-size:10.5px;letter-spacing:.18em;text-shadow:0 0 10px rgba(120,240,93,.4)}
.glasKopf .w button{border-radius:7px;padding:4px 8px;transition:background .12s,color .12s}
.glasReiter{border-radius:10px;background:linear-gradient(180deg,rgba(17,26,46,.96),rgba(8,13,24,.96));box-shadow:var(--schatten);transition:border-color .15s,background .15s,box-shadow .15s}
.glasReiter:hover{box-shadow:var(--schatten),var(--glow)}
.glasGriff{opacity:.7;transition:opacity .15s}.glas:hover .glasGriff{opacity:1}

/* ---------- Prozess ---------- */
.baum{padding:14px 10px 18px}
.baum .phase{margin-bottom:12px;padding-bottom:4px}
.baum .phase>b{font-size:10.5px;letter-spacing:.2em;color:var(--gold);padding:8px 10px 6px;opacity:.85}
.baum .schritt{padding:8px 12px;border-radius:10px;font-size:13.2px;border:1px solid transparent;transition:background .12s,border-color .12s,color .12s,transform .12s}
.baum .schritt:hover{background:rgba(120,240,93,.06);border-color:var(--rand);color:var(--text)}
.baum .schritt.an{background:linear-gradient(90deg,rgba(120,240,93,.17),rgba(120,240,93,.05));border-color:var(--rand-stark);color:#d6ffc8;box-shadow:0 2px 12px rgba(120,240,93,.12)}
.baum .schritt i{width:9px;height:9px;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.schrittWrap{padding:30px 38px 90px;max-width:900px}
.schrittWrap h2{font-size:26px;line-height:1.2;letter-spacing:.005em}
.schrittWrap .ziel{font-size:14.5px;line-height:1.6;max-width:68ch;margin:8px 0 22px}
.regel{display:inline-block;padding:5px 12px;border-radius:99px;background:rgba(120,240,93,.08);border:1px solid var(--rand);letter-spacing:.05em}
.feld{margin-bottom:0;padding:16px 18px 18px;margin-bottom:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--flaeche);box-shadow:var(--innen);transition:border-color .15s,box-shadow .15s}
.feld:focus-within{border-color:var(--rand-stark);box-shadow:0 0 0 3px rgba(120,240,93,.08),var(--innen)}
.feldKopf{margin-bottom:8px}
.feldKopf label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#cfe3c8}
.fragez{width:22px;height:22px;border-radius:50%;transition:background .12s,box-shadow .12s}
.fragez:hover{background:rgba(120,240,93,.18);box-shadow:var(--ring)}
.feld .mehrfach{gap:8px}
.feld .mehrfach label{border-radius:99px;padding:7px 14px;background:#0c1426;transition:border-color .12s,background .12s}
.feld .mehrfach label:hover{border-color:var(--gold2);background:rgba(120,240,93,.06)}
.feld .mehrfach label:has(input:checked){background:linear-gradient(180deg,rgba(120,240,93,.22),rgba(120,240,93,.08));border-color:var(--rand-stark);color:#d6ffc8}
.fragen{border-radius:var(--r);padding:14px 18px;background:linear-gradient(180deg,rgba(163,47,136,.14),rgba(163,47,136,.05));border:1px solid rgba(201,79,176,.38)}
.check{margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--flaeche);box-shadow:var(--innen)}
.check label{padding:7px 0;border-radius:8px;transition:color .12s}
.check label:hover{color:var(--gold)}
.kritik{border-radius:var(--r);padding:14px 18px}
.leiste{margin-top:26px;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.wissen{padding:20px 16px}
.wissen .happen{border-radius:var(--r-s);padding:12px 14px;line-height:1.55;background:var(--flaeche2);box-shadow:var(--innen)}
.wissen .beispiel{border-color:var(--rand-stark);background:linear-gradient(180deg,rgba(120,240,93,.1),rgba(120,240,93,.03))}

/* ---------- Kurven, Befund, Tabellen ---------- */
.kurvenWrap{padding:28px 32px}
.kurvenWrap h2{font-size:24px}
#bartleGraph,#kurve{border-radius:var(--r);border:1px solid var(--rand);box-shadow:var(--schatten),var(--innen)}
.befund div{border-radius:var(--r-s);padding:10px 14px;line-height:1.5;box-shadow:var(--innen)}
table.xp{border-radius:var(--r-s)}
table.xp tr:hover td{background:rgba(120,240,93,.04)}
table.xp th{border-bottom:2px solid var(--gold2);color:#bff5ae}

/* ---------- Dokument ---------- */
.dokNav,.dokRechts{background:var(--flaeche);box-shadow:var(--innen)}
.dokNav{border-radius:var(--r);border-color:var(--rand)}
.dokRechts{border-left-color:var(--rand)}
.dokRechts h4,.dokNav b{color:var(--gold);letter-spacing:.18em}
.dokRechts .knopf{text-align:left}

/* ---------- Tutorial, Hinweise, Toast ---------- */
/* Tour (Lex 17.10.): Abdunklung macht allein #tutLicht (Aussparung um das Element). Hier kein Weichzeichner und keine zweite Abdunklung, sonst ist auch der Inhalt im Rahmen grau und unscharf. */
#tutDeck{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#tutBox,#tutWill{border-radius:var(--r-l);background:linear-gradient(180deg,#101a2f,#0a1120);border:1px solid var(--rand-stark);box-shadow:var(--schatten-hoch),0 0 0 4px rgba(120,240,93,.06);padding:22px 24px;line-height:1.6}
#tutWill h3,#tutBox h3{font-size:18px;margin-bottom:12px;padding-left:12px;border-left:4px solid var(--gold)}
#tutWill ul{padding-left:0;list-style:none;display:grid;gap:6px;margin:10px 0 0}
#tutWill li{position:relative;padding:7px 12px 7px 32px;font-size:13.5px;border-radius:var(--r-s);background:rgba(120,240,93,.045);border:1px solid var(--line);line-height:1.5}
#tutWill li::before{content:"";position:absolute;left:12px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(120,240,93,.7)}
#tutWill .reihe{gap:10px;margin-top:16px}
#tutBox .fuss{margin-top:16px}
.tutHell{box-shadow:0 0 0 4px var(--gold),0 0 22px 4px rgba(120,240,93,.4),0 0 0 9999px rgba(3,6,12,.66)!important;border-radius:var(--r-s)}
#toast{border-radius:99px;padding:11px 22px;background:linear-gradient(180deg,#16233f,#101a2f);border-color:var(--rand-stark);box-shadow:var(--schatten-hoch),var(--glow)}
#erklHinweis{box-shadow:0 6px 22px rgba(120,240,93,.35)}

/* ---------- Scrollbalken und Fokus ---------- */
::-webkit-scrollbar-thumb{background:#2a3650;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--gold2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.coBanner{border-radius:12px;box-shadow:var(--schatten),var(--innen)}

/* ---------- Breite Bildschirme und Handy ---------- */
@media (min-width:1700px){.projektWrap{max-width:1360px}.karten{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.schrittWrap{max-width:980px}}
@media (max-width:900px){#tabProjekt{padding:20px 14px 60px}.projektWrap>h1{font-size:27px;padding:16px 16px 0}.projektWrap>h1 small{padding-bottom:14px}.schrittWrap{padding:20px 16px 80px}.feld{padding:14px}.kurvenWrap{padding:20px 14px}}
@media (max-width:640px){#app{grid-template-rows:auto 1fr}nav{border-radius:12px}.karten{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Feinschliff 2: Kopfzeile passt auf 1600 px, Eingabefelder atmen, Glas-Knoepfe sauber ---------- */
nav button{white-space:nowrap}
header .rechts{flex:none}
header .rechts .knopf{padding:6px 10px;white-space:nowrap}
@media (max-width:2000px){header{gap:12px;padding:0 12px}nav button{padding:8px 9px;font-size:11px;letter-spacing:.05em}header .marke small{display:none}header .marke{letter-spacing:.2em}}
@media (max-width:1650px){nav{gap:1px;padding:3px}nav button{padding:7px 7px;font-size:10.5px;letter-spacing:.03em}header .rechts{gap:4px}header .rechts .knopf{padding:5px 8px;font-size:12px}}
.feld textarea{min-height:104px;line-height:1.6;font-size:14.5px}
.glasInhalt .knopf.klein{white-space:nowrap;padding:4px 8px;font-size:11.5px}
@media (max-width:1700px){header .mitte{min-width:60px}#stand{display:none}}

/* ---------- Spiel-Schicht (ui-spiel.js): Interaktions-Sprache der STAGED-Website ---------- */
:root{--fed:cubic-bezier(.2,.9,.3,1.2);--glatt:cubic-bezier(.2,.8,.2,1)}
#spielNetz{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#spielGlow{position:fixed;left:-160px;top:-160px;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:60;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle,rgba(120,240,93,.13),rgba(120,240,93,.04) 45%,transparent 70%);mix-blend-mode:screen}
#spielGlow.an{opacity:1}
/* Spotlight auf Karten und Boxen */
.spiel .karte:hover,.spiel .feld:hover,.spiel .check:hover,.spiel .wissen .happen:hover,.spiel .befund div:hover,.spiel .fragen:hover{
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(120,240,93,.10),transparent 62%),var(--flaeche)}
.spiel .karte{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--glatt),border-color .15s,box-shadow .15s}
.spiel .karte:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
.spiel .knopf{transition:transform .22s var(--fed),border-color .15s,background .15s,color .15s,box-shadow .15s}
.spiel .knopf:active{transform:scale(.96)!important}
/* Aufsteigen */
@keyframes spielAuf{from{opacity:0;translate:0 22px;filter:blur(2px)}to{opacity:1;translate:0 0;filter:none}}
.spielAuf{animation:spielAuf .7s var(--glatt) both;animation-delay:var(--sd,0ms)}
/* Klick-Ring, Pop, Konfetti */
.spielRing{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(120,240,93,.55);pointer-events:none;animation:spielRing .6s ease-out forwards}
@keyframes spielRing{to{transform:scale(22);opacity:0}}
.pop{animation:spielPop .45s var(--fed)}
@keyframes spielPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.spielKonf{position:fixed;width:8px;height:12px;border-radius:2px;z-index:70;pointer-events:none;animation:spielKonf 1.3s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spielKonf{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 260px)) rotate(var(--dr));opacity:0}}
/* Eyebrow-Chip und Verlaufs-Ueberschriften wie auf der Website */
.projektWrap>h1::before{content:"S.T.A.G.E.D. DESIGNER \00B7 PROVE IT FIRST";display:block;width:fit-content;margin:0 0 12px;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  font:600 10.5px/1 Consolas,"Cascadia Mono",monospace;letter-spacing:.2em;color:var(--gold);text-shadow:0 0 10px rgba(120,240,93,.45)}
.schrittWrap h2,.kurvenWrap h2{background:linear-gradient(90deg,#fff 0%,#d6ffc8 55%,#e8a0d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
/* Springende Federn: Navigation, Toast, Tutorial */
.spiel nav button{transition:background .15s,color .15s,box-shadow .15s,transform .25s var(--fed)}
.spiel nav button:hover{transform:translateY(-1px)}
.spiel nav button.an{animation:spielPop .4s var(--fed)}
.spiel #toast{transition:opacity .2s,transform .35s var(--fed);transform:translateX(-50%) translateY(14px) scale(.96)}
.spiel #toast.an{transform:translateX(-50%) translateY(0) scale(1)}
.spiel #tutWill.an,.spiel #tutBox.an{animation:spielAuf .45s var(--fed) both}
/* Fortschritt: glimmender Balken */
.karte .balken i{position:relative;overflow:hidden}
.karte .balken i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:spielGlimm 2.8s ease-in-out infinite}
@keyframes spielGlimm{60%,100%{transform:translateX(100%)}}
@media (pointer:coarse){#spielGlow,#spielNetz{display:none}}

/* ---------- Farbcodes pro Phase (wie die Walzen auf der Website: Gruen, Magenta, Amber, Blau) ---------- */
.baum .phase{--ph:120,240,93}
.baum .phase:nth-of-type(4n+2){--ph:201,79,176}
.baum .phase:nth-of-type(4n+3){--ph:255,200,90}
.baum .phase:nth-of-type(4n+4){--ph:110,168,255}
.baum .phase>b{color:rgb(var(--ph));display:flex;align-items:center;gap:9px;text-shadow:0 0 12px rgba(var(--ph),.35)}
.baum .phase>b::before{content:"";width:9px;height:9px;border-radius:3px;background:rgb(var(--ph));box-shadow:0 0 10px rgba(var(--ph),.7);flex:none}
.baum .phase .schritt:hover{background:rgba(var(--ph),.07);border-color:rgba(var(--ph),.28)}
.baum .phase .schritt.an{background:linear-gradient(90deg,rgba(var(--ph),.2),rgba(var(--ph),.05));border-color:rgba(var(--ph),.5);color:#fff;box-shadow:0 2px 14px rgba(var(--ph),.18)}
.baum .phase .schritt.an i{background:rgb(var(--ph));box-shadow:0 0 10px rgba(var(--ph),.8)}
/* Halo-Puls: erledigte Checkliste, gespeichert (wie das gruene Aufleuchten des Automaten) */
@keyframes spielHalo{0%{box-shadow:0 0 0 0 rgba(120,240,93,.55),var(--innen)}100%{box-shadow:0 0 0 26px rgba(120,240,93,0),var(--innen)}}
.halo{animation:spielHalo .9s ease-out 2;border-color:var(--rand-stark)!important}
/* Mono-Beschriftungen und ehrliche Mini-Hinweise */
#stand,.karte .meta,.wirkung,.feld>small,.feld .hinweis{font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.04em}
#stand{background:linear-gradient(90deg,rgba(255,200,90,.18),rgba(201,79,176,.18));border-color:rgba(255,200,90,.4);color:#ffe3a3}
/* Schwebender Alpha-Knopf: Glow wie "Ask the Companion" auf der Website */
button[class*="alphaKreativ"],#alphaKreativBtn,.akFloat{box-shadow:0 0 0 0 rgba(120,240,93,.4);animation:spielAtmen 3.4s ease-in-out infinite}
@keyframes spielAtmen{0%,100%{box-shadow:0 0 0 0 rgba(120,240,93,.35),0 8px 24px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 12px rgba(120,240,93,0),0 8px 28px rgba(120,240,93,.25)}}
.projektWrap>h1::before{position:static!important;transform:none!important;inset:auto!important;left:auto!important;top:auto!important;height:auto!important;border-style:solid}
.karte{display:flex;flex-direction:column}.karte>.knopf:last-child,.karte>div:last-child{margin-top:auto}

/* ---------- Tabs Review, Stil, Spielpaket, Ideen, Pruefen, Dokument: gleicher Studio-Look ---------- */
input[type=checkbox],input[type=radio]{accent-color:var(--gold)}
.rvK,.stKarte,.spKarte,.ideK{border-radius:var(--r);border:1px solid var(--rand);box-shadow:var(--schatten),var(--innen);padding:16px 18px;line-height:1.55;transition:border-color .15s,box-shadow .15s}
.rvK:hover,.stKarte:hover,.spKarte:hover,.ideK:hover{border-color:var(--rand-stark)}
.rvBreit,.stBreite,.spBreite{gap:16px;padding:22px 20px 60px}
.rvBreit>.rvK:first-child,.stBreite>.stKarte:first-child,.spBreite>.spKarte:first-child{background:radial-gradient(700px 160px at 0% 0%,rgba(120,240,93,.12),transparent 62%),radial-gradient(500px 160px at 100% 100%,rgba(201,79,176,.08),transparent 60%),var(--flaeche);border-color:var(--rand-stark)}
.rvC{border-radius:var(--r);border:1px solid var(--line);background:var(--flaeche2);box-shadow:var(--innen);padding:10px;transition:transform .2s var(--glatt),border-color .15s,box-shadow .15s}
.rvC:hover{transform:translateY(-3px);border-color:var(--rand-stark);box-shadow:var(--schatten-hoch),0 0 0 3px rgba(120,240,93,.08)}
.rvChip{border-radius:99px;padding:3px 11px;font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.03em;background:rgba(255,255,255,.03)}
.rvGrid:empty{display:block}
.rvGrid:empty::before{content:"Noch nichts zu prüfen. Sobald Bilder oder Sounds entstehen, erscheinen sie hier zum Bewerten.";display:block;padding:34px 24px;text-align:center;color:var(--dim);border:1.5px dashed var(--rand);border-radius:var(--r);background:rgba(120,240,93,.03)}
.stGK{border-radius:var(--r);background:var(--flaeche2);border:1px solid var(--line);padding:12px 14px;box-shadow:var(--innen);transition:transform .2s var(--glatt),border-color .15s,box-shadow .15s}
.stGK:hover,.stGK:focus-visible{transform:translateY(-3px);border-color:var(--rand-stark);box-shadow:var(--schatten),0 0 0 3px rgba(120,240,93,.1)}
.stDrop{border:2px dashed var(--rand);border-radius:var(--r);padding:30px;background:rgba(120,240,93,.025)}
.stDrop:hover,.stDrop.drag{border-color:var(--gold);background:rgba(120,240,93,.08);box-shadow:inset 0 0 40px rgba(120,240,93,.07)}
.stRef{border-radius:var(--r-s);transition:transform .2s var(--glatt),border-color .15s}.stRef:hover{transform:translateY(-2px);border-color:var(--rand-stark)}
.spKl{border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 14px}
.spBalken{height:10px;border-radius:99px;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}.spBalkenFuell{box-shadow:0 0 12px rgba(120,240,93,.55)}
.spChip{border-radius:99px;font-family:Consolas,"Cascadia Mono",monospace}
.spTab th{color:#bff5ae;border-bottom:2px solid var(--gold2)}.spTab tr:hover td{background:rgba(120,240,93,.04)}
#tabPruefen .kurvenWrap{max-width:1180px;margin:0 auto;inset:0 0 0 0}
#prErgebnis>*{border-radius:var(--r-s)}
#prErgebnis [style*="background"]{transition:border-color .15s,background .15s}
#prErgebnis [style*="background"]:hover{border-color:var(--rand-stark)!important}
.dokRechts label,.dokRechts .mehrfach label{display:flex;align-items:flex-start;gap:10px;line-height:1.35;padding:6px 0;cursor:pointer}
.dokRechts label input{margin-top:1px}
.dokRechts label:hover{color:var(--gold)}
.chip{border-radius:99px;transition:transform .2s var(--fed),border-color .15s}.chip:hover{transform:translateY(-1px)}
#toast{border-radius:16px;max-width:min(560px,90vw);line-height:1.45;text-align:center}

/* ====== Phase "Pruefen und Testen": Selbstpruefung als Karten, Kurven als nummerierte Abschnitte ====== */
#prErgebnis{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-items:start;margin-top:14px}
.pr-g{margin:0!important;padding:16px 18px 12px;border-radius:var(--r);border:1px solid var(--rand);background:var(--flaeche);box-shadow:var(--schatten),var(--innen)}
.pr-g:has(h4 span[style*="ff6b6b"]){border-color:rgba(255,107,107,.45);background:radial-gradient(520px 140px at 0% 0%,rgba(255,107,107,.12),transparent 62%),var(--flaeche)}
.pr-g:has(h4 span[style*="e0a33b"]):not(:has(h4 span[style*="ff6b6b"])){border-color:rgba(224,163,59,.3)}
.pr-g>h4{font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px!important;color:#e3ecf7;gap:10px!important}
.pr-g>h4 span:first-child{width:12px!important;height:12px!important}
span[style*="#78f05d"][style*="border-radius:50%"]{box-shadow:0 0 10px rgba(120,240,93,.75)}
span[style*="#e0a33b"][style*="border-radius:50%"]{box-shadow:0 0 10px rgba(224,163,59,.7)}
span[style*="#ff6b6b"][style*="border-radius:50%"]{box-shadow:0 0 10px rgba(255,107,107,.75)}
.pr-b{background:rgba(255,255,255,.028)!important;border:1px solid transparent!important;border-left:3px solid var(--line)!important;border-radius:10px!important;padding:10px 12px!important;font-size:13.5px!important;line-height:1.5;margin:6px 0!important;transition:background .15s,transform .18s var(--glatt),border-color .15s}
.pr-b:has(>span:first-child[style*="78f05d"]){border-left-color:rgba(120,240,93,.6)!important}
.pr-b:has(>span:first-child[style*="e0a33b"]){border-left-color:rgba(224,163,59,.75)!important}
.pr-b:has(>span:first-child[style*="ff6b6b"]){border-left-color:rgba(255,107,107,.85)!important}
.pr-b:hover{background:rgba(120,240,93,.07)!important;transform:translateX(3px);border-top-color:var(--rand)!important;border-right-color:var(--rand)!important;border-bottom-color:var(--rand)!important}
#prStart{padding:11px 22px;font-size:14px}
#prSumme{font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.04em;color:var(--dim)}
/* Kurven */
#tabKurven .kurvenWrap{counter-reset:kk;padding:30px max(36px,calc((100% - 1320px)/2)) 90px;padding-right:calc(max(36px,(100% - 1320px)/2) + var(--dockK,0px))}
#tabKurven .kurvenWrap>h2{counter-increment:kk;display:flex;align-items:center;gap:14px;margin:46px 0 6px;font-size:24px;line-height:1.2}
#tabKurven .kurvenWrap>h2:first-child{margin-top:0}
#tabKurven .kurvenWrap>h2::before{content:"0" counter(kk);flex:none;font:600 11px/1 Consolas,"Cascadia Mono",monospace;letter-spacing:.16em;color:var(--gold);padding:6px 10px;border-radius:99px;border:1px solid var(--rand);background:rgba(120,240,93,.06);-webkit-text-fill-color:var(--gold)}
#tabKurven .kurvenWrap .sub{max-width:82ch;line-height:1.6;margin-bottom:14px}
#zeitleiste,#kurve,#flowKanal,#bartleGraph,#tempoChart,#xpChart{max-width:100%;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schatten),var(--innen);padding:8px}
table.xp{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;border-collapse:separate;border-spacing:0;box-shadow:var(--schatten),var(--innen)}
table.xp th,table.xp td{padding:9px 12px}
.befund .warn{border-left:3px solid #ff6b6b}.befund .gut{border-left:3px solid #78f05d}
#flowRat,.kritik{border-radius:var(--r)}
@media (max-width:900px){#prErgebnis{grid-template-columns:1fr}#tabKurven .kurvenWrap{padding:20px 14px 80px}}

/* ====== Phasen Gestalten und Ausgeben: Tabellen als Karten, ruhiger Grundriss, Steckbrief in voller Breite ====== */
.arbeit2{max-width:1500px!important;margin:0 auto;padding:22px 28px 60px!important}
.tab2{border-collapse:separate!important;border-spacing:0;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--r);box-shadow:var(--schatten),var(--innen);overflow:hidden}
.tab2 th{background:linear-gradient(180deg,#14213a,#0f1a2e)!important;color:#bff5ae!important;font-family:Consolas,"Cascadia Mono",monospace;font-size:10.5px!important;letter-spacing:.14em!important;padding:12px 12px!important;border-bottom:2px solid var(--gold2)!important}
.tab2 td{padding:11px 12px!important;border-bottom:1px solid rgba(30,42,64,.7)!important;transition:background .12s}
.tab2 tr:last-child td{border-bottom:0!important}
.tab2 tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
.tab2 tbody tr:hover td{background:rgba(120,240,93,.06)!important}
.tab2 tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tab2 td b{color:#fff}
.artChip{border-radius:99px!important;padding:3px 11px!important;font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.04em;background:rgba(255,255,255,.03)}
.artChip.raum{background:rgba(110,168,255,.08)}.artChip.station{background:rgba(201,79,176,.1)}.artChip.bp{background:rgba(120,240,93,.08)}
.pkName{font-size:14px!important}
.pkHinweis{font-family:Consolas,"Cascadia Mono",monospace;letter-spacing:.03em;color:var(--dim)}
.pkIn{border-radius:8px!important}.pkIn:hover{background:rgba(255,255,255,.03)!important}.pkIn:focus{box-shadow:var(--ring)}
select.pkIn{background:var(--flaeche2)!important}
/* Grundriss: Bedienhinweis als schwebende Pille statt Text ueber dem Plan */
#grHilfe,#flowHilfe,#wbHilfe{background:rgba(8,13,24,.86)!important;backdrop-filter:blur(8px);border:1px solid var(--rand);border-radius:12px;padding:8px 14px!important;font-family:Consolas,"Cascadia Mono",monospace;font-size:10.5px!important;letter-spacing:.02em;line-height:1.5;max-width:min(62%,780px);pointer-events:none;box-shadow:var(--schatten)}
/* Bau-Steckbrief: leere Spalte rechts weg */
body.ui2 #tabFeatures.an{grid-template-columns:minmax(0,1fr) auto!important}
#feMitte{max-width:none}
/* Rails: Checkboxen schlanker */
.ui2 .glasInhalt input[type=checkbox],.ui2 aside input[type=checkbox],.dokRechts input[type=checkbox]{width:19px!important;height:19px!important}
.pkName{min-width:320px!important}

/* ====== Gestalten Schritt 2: Steckbrief/Stückliste als feste Seitenleiste im Raum (statt Glasfläche über dem Plan) ====== */
body.ui2 #tabGrundriss #grFlaeche{right:316px!important;width:auto!important}
body.ui2 #tabGrundriss #grRechts{top:0!important;right:0!important;bottom:0!important;left:auto!important;width:316px!important;height:auto!important;max-height:none!important;border-radius:0!important;border:0!important;border-left:1px solid var(--rand)!important;background:var(--fl)!important;padding:16px 16px 24px!important;overflow:auto;box-shadow:none!important;backdrop-filter:none!important}
body.ui2 #tabGrundriss #grRechts h4{margin:14px 0 8px;font:600 10.5px/1 Consolas,"Cascadia Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
body.ui2 #tabGrundriss #grRechts h4:first-child{margin-top:0}
body.ui2 #tabGrundriss #grRechts label{display:block;font-size:11px;color:var(--dim);letter-spacing:.05em;margin:10px 0 4px}
body.ui2 #tabGrundriss #grRechts input[type=text],body.ui2 #tabGrundriss #grRechts input[type=number],body.ui2 #tabGrundriss #grRechts select,body.ui2 #tabGrundriss #grRechts textarea{width:100%}
body.ui2 #tabGrundriss #grHilfe,body.ui2 #tabGrundriss .raumLeiste{right:328px!important;max-width:none}
body.ui2 #tabGrundriss .raumLeiste{overflow-x:auto;scrollbar-width:thin}

/* ====== Companion-Modi und Meilensteine (ui2/modi.js) ====== */
.msBox{display:flex;align-items:center;justify-content:center;gap:0;min-width:0;flex:1}
.msBox .ms{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 6px;border-radius:10px;color:var(--dim);font-size:12px;white-space:nowrap;cursor:pointer;transition:.15s}
.msBox .ms:hover{background:rgba(120,240,93,.07);color:var(--text)}
.msBox .ms i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line2,#1e2a40);display:grid;place-items:center;font:700 10px Consolas,monospace;font-style:normal;background:#0a1120}
.msBox .ms.bereit i{border-color:var(--gold);color:var(--gold)}
.msBox .ms.wartet i{border-color:#c94fb0;background:#c94fb0;color:#fff;box-shadow:0 0 12px rgba(201,79,176,.7);animation:spielHalo .9s ease-out infinite}
.msBox .ms.wartet span{color:#f4b6e7}
.msBox .ms.fertig i{border-color:var(--gold);background:var(--gold);color:#04120a}
.msBox .ms.fertig span{color:#bff5ae}
.msLin{width:26px;height:2px;border-radius:2px;background:var(--line2,#1e2a40);flex:none;position:relative;overflow:hidden}
.msLin.voll::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold2),var(--gold),#c94fb0)}
@media(max-width:1900px){.msBox .ms span{display:none}}
#sd2Fuss .platz.msBox{overflow:hidden;justify-content:center}
#sd2Fuss .stand{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modiChip{font:700 9.5px/1 Consolas,monospace;padding:3px 6px;border-radius:99px;border:1px solid var(--line2,#1e2a40);color:var(--dim);margin-left:2px}
.modiChip.selbst{color:#c8d3e6}.modiChip.gemeinsam{color:#9fd5ff;border-color:rgba(110,168,255,.5)}.modiChip.auto{color:#f4b6e7;border-color:rgba(201,79,176,.6);background:rgba(201,79,176,.12)}
.modiKarte{margin:10px 12px;padding:12px 14px;border:1px solid var(--rand);border-radius:var(--r);background:var(--fl);box-shadow:var(--innen)}
.modiKarte h3{margin:0 0 8px;font:600 10.5px/1 Consolas,"Cascadia Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.modiSeg{display:flex;gap:2px;padding:3px;border:1px solid var(--line2,#1e2a40);border-radius:12px;background:rgba(5,9,18,.6)}
.modiSeg button{flex:1;border:0;background:none;padding:6px 8px;border-radius:9px;color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer;transition:.15s}
.modiSeg button:hover{color:var(--text)}
.modiSeg button.an{background:linear-gradient(180deg,rgba(120,240,93,.26),rgba(120,240,93,.09));color:#d6ffc8;box-shadow:inset 0 0 0 1px rgba(120,240,93,.5)}
.modiSeg button.an.auto{background:linear-gradient(180deg,rgba(201,79,176,.3),rgba(201,79,176,.1));color:#ffd6f4;box-shadow:inset 0 0 0 1px rgba(201,79,176,.6)}
.modiSeg.klein button{padding:3px 6px;font-size:11px}
.modiPh{margin:8px 0}.modiPh summary{cursor:pointer;color:var(--dim);font-size:12px}
.modiZeile{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0;font-size:12px}
.modiAkt{margin-top:8px}.modiIter{margin-top:8px;font:600 11px Consolas,monospace;color:#bff5ae;letter-spacing:.04em}
.hinweis{font-size:12px;color:var(--dim);line-height:1.5;margin:6px 0}
.modiOv{position:fixed;inset:0;z-index:300;background:rgba(3,6,12,.72);backdrop-filter:blur(4px);display:grid;place-items:center}
.modiDlg{width:min(640px,94vw);max-height:90vh;overflow:auto;border:1px solid rgba(201,79,176,.6);border-radius:20px;background:linear-gradient(180deg,#121a30,#0a1120);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 6px rgba(201,79,176,.08);padding:22px 24px;animation:spielAuf .4s var(--fed) both}
.modiDlg h2{margin:0 0 4px;font-size:22px}.modiDlg .kick{font:700 10.5px Consolas,monospace;letter-spacing:.2em;color:#f4b6e7;text-transform:uppercase;margin-bottom:6px}
.modiFakt{border:1px solid var(--line2,#1e2a40);border-radius:12px;padding:9px 12px;margin:8px 0;background:rgba(255,255,255,.02)}
.modiFuss{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.modiDlg textarea{width:100%;margin-top:4px}

.modiVor{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line2,#1e2a40);border-radius:12px;padding:9px 12px;margin:8px 0;background:rgba(255,255,255,.02);cursor:pointer;line-height:1.45}
.modiVor input{margin-top:3px}.modiVor b{color:#bff5ae;font:600 11px Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}

.modiSeg button.an.deck{background:linear-gradient(180deg,rgba(224,163,59,.3),rgba(224,163,59,.1));color:#ffe3a3;box-shadow:inset 0 0 0 1px rgba(224,163,59,.6)}
.modiChip.deck{color:#ffe3a3;border-color:rgba(224,163,59,.6);background:rgba(224,163,59,.12)}
.modiSeg button{padding:6px 5px;font-size:12px}

/* Wissen raus (Lex 18.10.2026): Buch-Zitate und Quellen-Panels sind abgeschaltet, ihre Reiter unsichtbar */
.glasReiter[data-auf="R"],.glasReiter[data-auf="K"],#railR,#railK{display:none!important}

.zitat,#zitat{display:none!important}

/* ===== Definieren: Kacheln (Lex 18.10.2026) – Symbole, Hero, Feld-Kacheln, Ueberblick, Ideen-Automat ===== */
.kIco{--kc:120,240,93;display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;color:rgb(var(--kc));background:rgba(var(--kc),.12);box-shadow:inset 0 0 0 1px rgba(var(--kc),.35);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.kIco svg{width:18px;height:18px}
#baum .schritt{display:flex;align-items:center;gap:9px}
#baum .schritt .kIco{width:24px;height:24px;flex-basis:24px;border-radius:7px}#baum .schritt .kIco svg{width:15px;height:15px}
#baum .schritt:hover .kIco,.feld:hover>.feldKopf .kIco{transform:scale(1.14) rotate(-6deg)}
.kHero{display:flex;align-items:center;gap:18px;margin:0 0 20px;padding:18px 20px;border-radius:18px;background:radial-gradient(120% 140% at 0% 0%,rgba(120,240,93,.14),transparent 55%),radial-gradient(100% 120% at 100% 100%,rgba(201,79,176,.16),transparent 60%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.kHeroIco{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:17px;color:#78f05d;background:rgba(120,240,93,.12);box-shadow:inset 0 0 0 1px rgba(120,240,93,.4),0 0 24px rgba(120,240,93,.18);animation:kSchwebe 4.5s ease-in-out infinite}
.kHeroIco svg{width:32px;height:32px}
.kHeroTxt{flex:1;min-width:0}.kHeroTxt h2{margin:0}.kHeroTxt .ziel{margin:6px 0 0!important}
.kRing{position:relative;width:54px;height:54px;flex:0 0 54px;order:3}.kRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.kRingBg,.kRingFg{fill:none;stroke-width:4}.kRingBg{stroke:rgba(255,255,255,.1)}.kRingFg{stroke:#78f05d;stroke-linecap:round;transition:stroke-dasharray .6s cubic-bezier(.3,1.2,.5,1)}
.kRing b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}
@keyframes kSchwebe{50%{transform:translateY(-4px) rotate(-3deg)}}
.schrittWrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start;max-width:1100px}
.schrittWrap>*{grid-column:1/-1}
.schrittWrap>.feld[data-feldwrap]{grid-column:auto;cursor:pointer;border-radius:16px;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.schrittWrap>.feld.ekZu:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 1px rgba(120,240,93,.4)}
.schrittWrap>.feld.ekZu:active{transform:scale(.98)}
.schrittWrap>.feld:not(.ekZu){grid-column:1/-1;cursor:auto}
.feldKopf{display:flex;align-items:center;gap:10px}.feldKopf label{flex:1;min-width:0}
.kStat{margin-left:auto;font-size:13px;color:var(--dim);width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.06)}
.kGefuellt .kStat{color:#0d1a0a;background:#78f05d;animation:kPop .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes kPop{0%{transform:scale(.4)}}
.kVor{margin-top:8px;font-size:13px;line-height:1.5;color:#d9e4d4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kVor .leer{color:var(--dim);font-style:italic}.kVor em{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.feld:not(.ekZu)>.kVor{display:none}
.fakt.kFakt{display:flex;align-items:center;gap:10px;animation:kEin .5s both;animation-delay:var(--sd,0ms)}
.fakt.kFakt b{white-space:normal}
@keyframes kEin{from{opacity:0;transform:translateY(10px) scale(.96)}}
/* Ideen-Automat */
.automat{border-radius:18px;padding:16px 18px;background:radial-gradient(110% 130% at 0% 0%,rgba(224,163,59,.14),transparent 55%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(224,163,59,.35);text-align:left}
.leerZust2 .automat{margin-top:22px}
.aKopf{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}.aTitel{font-size:11.5px;letter-spacing:.2em;font-weight:800;color:#e0a33b}.aSub{font-size:13px;color:var(--dim)}
.aWalzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.aWalze{--wc:120,240,93;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.aLabel{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.aFenster{height:54px;display:grid;place-items:center;text-align:center;padding:0 8px;border-radius:12px;background:#0b1118;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 8px 14px rgba(0,0,0,.5),inset 0 -8px 14px rgba(0,0,0,.5);overflow:hidden}
.aWert{font-size:14px;font-weight:700;line-height:1.2;color:#fff}
.aWalze.rollt .aWert{filter:blur(1.2px);color:#e0a33b;animation:kRoll .09s linear infinite}
.aWalze.stopp .aFenster{animation:kStopp .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes kRoll{50%{transform:translateY(-3px)}}@keyframes kStopp{30%{transform:translateY(6px)}60%{transform:translateY(-3px)}}
.aHalt{border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--dim);border-radius:8px;padding:5px 0;font:inherit;font-size:12px;cursor:pointer;min-height:32px}
.aHalt.an{background:rgba(120,240,93,.18);border-color:#78f05d;color:#78f05d}.aWalze.gehalten .aFenster{box-shadow:inset 0 0 0 1px #78f05d,0 0 14px rgba(120,240,93,.25)}
.aSatz{margin:14px 0 10px;font-size:16px;line-height:1.5;color:#fff;min-height:48px}
.aKnoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.aDreh{background:linear-gradient(180deg,#e0a33b,#b9801f);color:#1a1205;font-weight:800;border:0;border-radius:12px;padding:10px 20px;font-size:15px;cursor:pointer;min-height:44px;box-shadow:0 4px 0 #7a5413;transition:transform .08s,box-shadow .08s}
.aDreh:active{transform:translateY(3px);box-shadow:0 1px 0 #7a5413}.automat.dreht .aDreh{opacity:.6}
.aBtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#e8efe4;border-radius:10px;padding:9px 13px;font:inherit;font-size:13px;cursor:pointer;min-height:40px}
.aBtn:hover{border-color:#78f05d;color:#78f05d}.aZahl{font-size:12px;color:var(--dim);margin-left:auto}
.automat.fertig{animation:kGlow .9s}@keyframes kGlow{40%{box-shadow:inset 0 0 0 1px #e0a33b,0 0 30px rgba(224,163,59,.4)}}
@media (max-width:900px){.kHero{padding:14px;gap:12px}.kHeroIco{width:46px;height:46px;flex-basis:46px}.schrittWrap{grid-template-columns:1fr}.aZahl{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){.kHeroIco,.fakt.kFakt,.aWalze.rollt .aWert{animation:none!important}}

#baum .schritt>.kIco{flex:0 0 24px!important;width:24px!important;min-width:24px}

.schrittWrap>.feld.ekZu .ekVor:not(.kVor){display:none!important}
.schrittWrap>.feld .feldKopf{flex-wrap:wrap;row-gap:6px}.schrittWrap>.feld .feldKopf label{flex:1 1 90px}

.kDlgBg{position:fixed;inset:0;z-index:9000;background:rgba(5,8,14,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.kDlg{position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;border-radius:20px;background:#0f1622;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.kDlgX{position:absolute;right:10px;top:8px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
.kDlgIn .automat{box-shadow:none;border-radius:20px}
.kFunken{display:flex;flex-wrap:wrap;gap:8px}.kFunke{flex:1 1 auto;background:linear-gradient(180deg,rgba(224,163,59,.22),rgba(224,163,59,.08))!important;border-color:rgba(224,163,59,.5)!important}
.kFunke:hover{transform:translateY(-2px) rotate(-1deg)}

.kLeerIco{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 14px;border-radius:26px;color:#78f05d;background:radial-gradient(circle at 30% 25%,rgba(120,240,93,.22),rgba(201,79,176,.12));box-shadow:inset 0 0 0 1px rgba(120,240,93,.35),0 0 40px rgba(120,240,93,.12);animation:kSchwebe 4.5s ease-in-out infinite}
.kLeerIco svg{width:44px;height:44px}
.leerZust2 .kn2,.leerZust2 button{transition:transform .15s cubic-bezier(.3,1.6,.5,1)}.leerZust2 .kn2:hover{transform:translateY(-3px) scale(1.04)}
@media (prefers-reduced-motion:reduce){.kLeerIco{animation:none}}