.app-shell{min-height:100dvh;position:relative;overflow:hidden;background:#060507}
.home{min-height:100dvh;padding:var(--safe-top) 0 calc(25px + var(--safe-bottom));overflow:auto}
.home-top{position:absolute;z-index:5;top:var(--safe-top);left:14px;right:14px;display:flex;align-items:center;justify-content:space-between}
.version-chip{font-size:.61rem;text-transform:uppercase;letter-spacing:.12em;font-weight:950;color:#ead8c8;background:rgba(7,5,8,.72);border:1px solid rgba(255,255,255,.14);padding:8px 10px;border-radius:999px;backdrop-filter:blur(12px)}
.hero{height:min(64dvh,620px);min-height:500px;position:relative;display:flex;align-items:end;background:url('../assets/images/board_concept.webp') center top/cover no-repeat;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,4,7,.05),rgba(5,4,7,.16) 28%,rgba(5,4,7,.96) 85%,#060507)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 26%,rgba(194,17,54,.18),transparent 24%),linear-gradient(90deg,rgba(0,0,0,.2),transparent 45%,rgba(0,0,0,.26))}
.hero-copy{position:relative;z-index:2;padding:0 18px 27px}
.hero h1{margin:7px 0 15px;font-family:Georgia,serif;font-size:clamp(3.2rem,17vw,5.4rem);line-height:.74;letter-spacing:-.065em;text-shadow:0 10px 38px #000}
.hero h1 span{display:block;color:var(--red2);letter-spacing:.025em}
.hero p.intro{margin:0;color:#d5cad3;line-height:1.5;font-size:.94rem;max-width:460px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:18px}.facts span{padding:9px 3px;text-align:center;border:1px solid var(--line);border-radius:12px;background:rgba(9,6,10,.68);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.facts b{display:block;color:#fff;font-size:1rem;margin-bottom:2px}
.home-actions{padding:16px 14px 0;display:grid;gap:9px}.home-actions .btn{width:100%}
.audio-preview{margin:14px 14px 0;padding:13px;display:grid;grid-template-columns:45px 1fr auto;gap:11px;align-items:center}.audio-orb{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#66182a,#13090d 68%);border:1px solid rgba(255,255,255,.15);box-shadow:0 0 25px rgba(198,23,57,.24)}.audio-preview b{display:block;font-size:.84rem}.audio-preview p{margin:4px 0 0;color:var(--muted);font-size:.7rem;line-height:1.35}.audio-preview button{min-width:74px;min-height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.13);background:#1b151b;color:#fff;font-weight:850;font-size:.7rem}
.setup{min-height:100dvh;padding:var(--safe-top) 14px calc(92px + var(--safe-bottom));overflow:auto}.setup-header{display:grid;grid-template-columns:48px 1fr 50px;gap:10px;align-items:center;margin-bottom:15px}.setup-header h2{font-family:Georgia,serif;font-size:1.55rem;margin:2px 0 0}.setup-header small{color:var(--red2);text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.61rem}.setup-header .demo-link{border:0;background:none;color:#e8b36d;font-weight:900;min-height:44px;padding:0 4px}
.setup-stack{display:grid;gap:12px}.setup-card{padding:14px}.setup-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.setup-title b{font-size:.9rem}.stepper{display:flex;gap:8px}.stepper button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#201820;color:#fff;font-size:1.2rem}
.player-editors{display:grid;gap:10px}.player-editor{display:grid;grid-template-columns:46px 1fr;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;background:rgba(255,255,255,.025)}.player-mini{width:46px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 8px #000)}.player-fields{display:grid;gap:8px}.player-fields input,.player-fields select,.setting-row select{width:100%;min-height:44px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:#0e0b10;color:#fff;padding:0 11px}.player-fields input{font-weight:850}
.setting-row{display:grid;grid-template-columns:1fr 142px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}.setting-row:last-child{border-bottom:0}.setting-row b{display:block;font-size:.79rem}.setting-row small{display:block;color:var(--muted);font-size:.65rem;margin-top:2px}.setting-row select{font-size:.7rem;font-weight:800}
.setup-footer{position:fixed;z-index:20;left:0;right:0;bottom:0;padding:10px 14px calc(10px + var(--safe-bottom));background:linear-gradient(180deg,transparent,#080609 24%)}.setup-footer .btn{width:100%}
@media(min-width:700px){.setup-footer{left:50%;right:auto;width:560px;transform:translateX(-50%)}}
.install-hint{position:relative;display:block;width:calc(100% - 28px);margin:12px 14px 0;padding:14px 62px 14px 14px;text-align:left;color:var(--ink);font:inherit}.install-hint b{display:block;font-size:.84rem}.install-hint .install-sub{display:block;margin:5px 0 0;color:var(--muted);font-size:.71rem;line-height:1.4}.install-icon{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:rgba(18,14,19,.85);color:#fff;font-size:1.05rem}
.voice-pack-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:2px 0}.voice-pack-row b{display:block;font-size:.79rem}.voice-pack-row small{display:block;color:var(--muted);font-size:.65rem;margin-top:3px}.voice-pack-row button{min-width:112px;min-height:44px;border-radius:11px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,#301724,#171019);color:#fff;font-weight:900;font-size:.68rem}.voice-pack-row button:disabled{opacity:.45}.voice-pack-track{height:5px;margin-top:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.voice-pack-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9c1833,#ff5570);transition:width .25s ease}
/* Regie-Karte (Zug 2): natives <details>, kein JS-Zustand, kein position/z-index -
   liegt im Fluss von .setup-stack und kann strukturell nichts ueberlagern. */
.regie-summary{list-style:none;cursor:pointer;min-height:44px;margin-bottom:0;gap:10px}
.regie-card[open]>.regie-summary{margin-bottom:12px}
.regie-summary-text{display:grid;gap:3px;min-width:0;flex:1}
.regie-summary-text b{font-size:.85rem}
.regie-summary::-webkit-details-marker{display:none}
.regie-summary::after{content:"▸";color:var(--red2);font-size:1.05rem;font-weight:900;transition:transform .2s ease}
.regie-card[open]>.regie-summary::after{transform:rotate(90deg)}
.regie-fields{display:grid}
/* Anleitungs-Karte (app-21): dieselbe Randbreite wie .audio-preview darunter,
   damit die beiden Karten unter den Knoepfen eine Kante bilden. Alles Weitere
   erbt sie von .setup-card/.regie-card - das native <details> aus Zug 2, ohne
   eigenen JS-Zustand. */
.anleitung-karte{margin:12px 14px 0}
.anleitung-karte>.regie-summary{margin-bottom:0}
.anleitung-karte[open]>.regie-summary{margin-bottom:14px}