/* youbooth Booth. Farben und Charakter kommen aus der aktiven Welt (CSS-Variablen). */
/* Die Masse folgen box/Bausteine.cs: ein Knopf ist 12 vmin hoch, nie unter 72 und nie ueber 160 Bildpunkten (Bausteine.Knopf). Vorher stand hier ein fester Wert 96 — auf 720 Bildhoehe war der Browser-Knopf 10 Bildpunkte hoeher als der der Box. */
:root{--grund:#FAF7F2;--text:#141210;--akzent:#F2B23E;--akzent2:#141210;--knopftext:#141210;--sans:"Segoe UI Variable Display","Segoe UI","Inter",system-ui,sans-serif;--serif:"Georgia","Times New Roman",serif;--mono:"Cascadia Mono","Consolas",ui-monospace,monospace;--knopf:clamp(72px,12vmin,160px);--glas:color-mix(in srgb,var(--grund) 85%,transparent)}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--grund);color:var(--text);font-family:var(--sans);font-size:clamp(16px,2vmin,26px);cursor:default;transition:background .6s,color .6s}
body.schrift-serif{--sans:var(--serif)}body.schrift-mono{--sans:var(--mono)}body.schrift-rund{--sans:"Nunito","Quicksand","Segoe UI",system-ui,sans-serif}body.schrift-schmal h1{letter-spacing:-.06em}
body.zeiger-aus{cursor:none}body.kontrast{--grund:#000;--text:#fff;--akzent:#FFD500}body.knopf-normal{--knopf:clamp(59px,9.84vmin,131px)}body.knopf-riesig{--knopf:clamp(92px,15.36vmin,205px)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;transition:transform .16s cubic-bezier(.2,1.6,.4,1)}
button:active{transform:scale(.94)}
.seite{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vmin;text-align:center;gap:2.6vmin}
.seite.links{align-items:flex-start;text-align:left;padding-left:9vmin}
h1{margin:0;font-size:clamp(40px,9vmin,150px);font-weight:800;letter-spacing:-.04em;line-height:.95}
h2{margin:0;font-size:clamp(24px,4.5vmin,64px);font-weight:800;letter-spacing:-.03em}
.hinweis{font-size:clamp(14px,2vmin,26px);opacity:.65;max-width:60ch}
/* .unter: die zweite Zeile unter einer Ueberschrift, 2,2 vmin wie auf der Box (Danke, Pause, Teilen) */
.hinweis.unter{font-size:clamp(14px,2.2vmin,30px);margin:1.6vmin 0 0}
/* Nebentext: 1,6 vmin, nie unter 14 Bildpunkten, Deckkraft 190/255 — wie Bausteine.Mini. Vorher 9 bis 14 Bildpunkte bei halber Deckkraft: aus zwei Metern nicht lesbar. */
.mini{font-family:var(--mono);font-size:clamp(14px,1.6vmin,20px);letter-spacing:.16em;text-transform:uppercase;opacity:.745}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--knopf);min-width:calc(var(--knopf)*2.6);padding:0 2.2em;border-radius:999px;background:var(--akzent);color:var(--knopftext);font-weight:800;font-size:clamp(18px,2.7vmin,36px);letter-spacing:-.01em;transition:transform .16s cubic-bezier(.2,1.6,.4,1);box-shadow:0 12px 40px -14px rgba(0,0,0,.45)}
.knopf:active{transform:scale(.96)}
.knopf.zweit{background:transparent;color:var(--text);border:2px solid color-mix(in srgb,var(--text) 25%,transparent);box-shadow:none}
.knopf.glas{background:var(--glas);border-color:color-mix(in srgb,var(--text) 43%,transparent)}
.knopf.gross{min-height:calc(var(--knopf)*1.3);font-size:clamp(22px,3.6vmin,48px);padding:0 2.6em}
.knopf.klein{min-height:calc(var(--knopf)*.68);font-size:clamp(14px,2vmin,24px);padding:0 1.5em}
.knopf[disabled]{opacity:.4}
.reihe{display:flex;gap:2vmin;flex-wrap:wrap;justify-content:center;align-items:center}
.spalte{display:flex;flex-direction:column;gap:2.4vmin;align-items:center}
.seite.links .spalte{align-items:flex-start}
.kopf{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:2vmin;padding:2.2vmin 3vmin;z-index:5;pointer-events:none}
.kopf .marke{display:flex;align-items:center;gap:1vmin;font-weight:800;font-size:clamp(15px,2.2vmin,28px);letter-spacing:-.03em}
.kopf .marke img{height:3.4vmin;width:3.4vmin;border-radius:.9vmin}.kopf .logo{height:5vmin;max-width:30vw;object-fit:contain}
.kopf .status{margin-left:auto;display:flex;gap:1.4vmin;align-items:center}
.fuss{position:absolute;bottom:0;left:0;right:0;padding:1.8vmin 3vmin;display:flex;align-items:center;gap:2vmin;z-index:5;pointer-events:none}
.fuss .dehn{flex:1}
.punkt{width:.9vmin;height:.9vmin;border-radius:50%;background:#2E7D5B;display:inline-block}.punkt.aus{background:color-mix(in srgb,var(--text) 25%,transparent)}.punkt.warn{background:var(--akzent)}.punkt.rot{background:#C0392B}
.laufband{position:absolute;bottom:6vmin;left:0;right:0;overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:clamp(10px,1.4vmin,16px);letter-spacing:.2em;text-transform:uppercase;opacity:.55;pointer-events:none}
.laufband span{display:inline-block;padding-left:100%;animation:lauf 24s linear infinite}@keyframes lauf{to{transform:translateX(-100%)}}
/* Buehne */
.buehne{position:relative;width:min(100%,calc((100vh - 26vmin) * var(--ar,1.5)));aspect-ratio:var(--ar,1.5);max-height:calc(100vh - 26vmin);background:#000;border-radius:3vmin;overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.buehne video,.buehne img.live,.buehne canvas.live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.buehne video.spiegel{transform:scaleX(-1)}
.buehne .raster{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.3%,rgba(255,255,255,.3) 33.3%,rgba(255,255,255,.3) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.3) 66.6%,rgba(255,255,255,.3) calc(66.6% + 1px),transparent calc(66.6% + 1px)),linear-gradient(to bottom,transparent 33.3%,rgba(255,255,255,.3) 33.3%,rgba(255,255,255,.3) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(255,255,255,.3) 66.6%,rgba(255,255,255,.3) calc(66.6% + 1px),transparent calc(66.6% + 1px))}
.buehne .fokus{position:absolute;left:30%;top:18%;width:40%;height:58%;border:2px solid rgba(255,255,255,.55);border-radius:1.2vmin;pointer-events:none}
.buehne .overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.blitz{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30}.blitz.an{animation:blitz .32s ease-out both}@keyframes blitz{0%{opacity:1}100%{opacity:0}}
.zaehler{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.zaehler .zahl{font-size:clamp(120px,34vmin,440px);font-weight:800;letter-spacing:-.06em;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.6);animation:zahl 1s ease-out both}
@keyframes zahl{0%{transform:scale(1.6);opacity:0}18%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}
.zaehler .ring{position:absolute;width:52vmin;height:52vmin;border:1.3vmin solid var(--akzent);border-radius:50%;animation:ring 1s ease-out both}@keyframes ring{0%{transform:scale(1.8);opacity:0}30%{opacity:1}100%{transform:scale(1);opacity:0}}
.zaehler .puls{position:absolute;width:30vmin;height:30vmin;border-radius:50%;background:var(--akzent);opacity:.35;animation:pulsen 1s ease-out both}@keyframes pulsen{0%{transform:scale(.4);opacity:.6}100%{transform:scale(2.2);opacity:0}}
.zaehler .balken{position:absolute;bottom:4vmin;left:10%;right:10%;height:1.4vmin;background:rgba(255,255,255,.25);border-radius:1vmin;overflow:hidden}.zaehler .balken i{display:block;height:100%;background:var(--akzent);animation:balken 1s linear both}@keyframes balken{from{width:100%}to{width:0}}
.zaehler .wort{font-size:clamp(50px,11vmin,150px);font-weight:800;letter-spacing:-.04em;color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.5);animation:zahl 1.1s ease-out both}
.kacheln{display:flex;gap:1.2vmin;min-height:9vmin}.kacheln img{height:9vmin;aspect-ratio:var(--ar,1.5);object-fit:cover;border-radius:1.2vmin;border:2px solid rgba(255,255,255,.3)}.kacheln .leer{height:9vmin;aspect-ratio:var(--ar,1.5);border-radius:1.2vmin;border:2px dashed color-mix(in srgb,var(--text) 30%,transparent)}
/* Chip wie Bausteine.Chip: mindestens 48 Bildpunkte hoch, Schrift mindestens 16 — fuer Finger und fuer zwei Meter Abstand. */
.chips{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}.chip{min-height:clamp(48px,6.7vmin,84px);min-width:calc(clamp(48px,6.7vmin,84px)*1.6);padding:0 calc(clamp(48px,6.7vmin,84px)*.5);border-radius:999px;border:2px solid color-mix(in srgb,var(--text) 43%,transparent);font-weight:600;font-size:clamp(16px,2.2vmin,24px);color:var(--text)}.chip.an{background:var(--akzent);color:var(--knopftext);border-color:transparent;font-weight:800}
.modus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4vmin;width:clamp(150px,22vmin,300px);aspect-ratio:1;border-radius:3.5vmin;background:color-mix(in srgb,var(--text) 7%,transparent);border:2px solid color-mix(in srgb,var(--text) 10%,transparent);font-weight:800;font-size:clamp(16px,2.5vmin,32px);transition:transform .12s}
.modus:active{transform:scale(.95)}.modus.an{border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 16%,transparent)}.modus svg{width:38%;height:38%;stroke:var(--akzent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ergebnis{max-height:calc(100vh - 30vmin);max-width:92vw;border-radius:2.4vmin;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);background:#111}
.wahl-raster{display:flex;gap:1.6vmin;flex-wrap:wrap;justify-content:center}.wahl-raster img{height:22vmin;border-radius:1.6vmin;border:.6vmin solid transparent;cursor:pointer}.wahl-raster img.an{border-color:var(--akzent)}
.teilen{display:flex;gap:2vmin;flex-wrap:wrap;justify-content:center}
.teilknopf{display:flex;flex-direction:column;align-items:center;gap:1vmin;width:clamp(110px,16vmin,200px);padding:2.2vmin 1vmin;border-radius:2.6vmin;background:color-mix(in srgb,var(--text) 7%,transparent);border:2px solid color-mix(in srgb,var(--text) 10%,transparent);font-weight:700;font-size:clamp(12px,1.7vmin,20px)}
.teilknopf svg{width:42%;height:auto;stroke:var(--akzent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.teilknopf:active{transform:scale(.95)}
.qr{background:#fff;padding:1.6vmin;border-radius:2.4vmin;width:min(42vmin,340px);aspect-ratio:1}.qr svg{width:100%;height:100%;display:block}
/* Der QR auf dem Teilen-Schirm: 22 vmin mit 0,7 vmin Rand, wie QrSpalte in box/Cloud.cs */
.qr.klein{width:22vmin;padding:.7vmin;border-radius:1vmin}
.qrkasten{display:flex;flex-direction:column;align-items:center;gap:1vmin;margin-top:2.4vmin}
.spalte>.teilen.reihe{margin-top:4vmin;gap:1.6vmin}
.tastatur{display:flex;flex-direction:column;gap:1vmin;align-items:center;width:min(96vw,1100px)}.tastatur .z{display:flex;gap:.8vmin;justify-content:center;width:100%}
.tastatur button{flex:1;max-width:8.5vmin;min-width:5.5vmin;height:7.5vmin;border-radius:1.4vmin;background:color-mix(in srgb,var(--text) 10%,transparent);font-size:clamp(15px,2.4vmin,30px);font-weight:700}.tastatur button.breit{max-width:24vmin;flex:2.8}.tastatur button.primaer{background:var(--akzent);color:var(--knopftext)}
.eingabe{width:min(92vw,900px);padding:1.8vmin 2vmin;border-radius:2vmin;background:color-mix(in srgb,var(--text) 8%,transparent);border:2px solid color-mix(in srgb,var(--text) 18%,transparent);font-size:clamp(20px,3vmin,40px);font-weight:700;text-align:center;min-height:2.2em;word-break:break-all}
.eingabe .platz{opacity:.35}.eingabe .cursor{display:inline-block;width:.08em;height:1em;background:var(--akzent);vertical-align:-.15em;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.ecke{position:absolute;width:14vmin;height:14vmin;z-index:20}.ecke.ol{top:0;left:0}.ecke.or{top:0;right:0}.ecke.ul{bottom:0;left:0}.ecke.ur{bottom:0;right:0}
.nachricht{position:fixed;top:3vmin;left:50%;transform:translateX(-50%);background:var(--akzent);color:var(--knopftext);padding:1.5vmin 3.2vmin;border-radius:999px;font-weight:800;font-size:clamp(16px,2.4vmin,30px);z-index:40;box-shadow:0 10px 40px rgba(0,0,0,.35);animation:rein .3s ease-out both}
@keyframes rein{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5vmin;width:min(60vmin,360px)}.pinpad button{aspect-ratio:1.3;border-radius:2vmin;background:color-mix(in srgb,var(--text) 10%,transparent);font-size:clamp(22px,4vmin,48px);font-weight:800}
.pinanzeige{font-family:var(--mono);font-size:clamp(24px,4vmin,52px);letter-spacing:.5em}
.einstellungen{position:absolute;inset:0;background:var(--grund);display:flex;flex-direction:column;z-index:25;overflow:hidden}
.einstellungen .kopfz{display:flex;align-items:center;gap:1.5vmin;padding:2vmin 3vmin;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);font-size:clamp(14px,1.8vmin,22px);flex-wrap:wrap}
.einstellungen .liste{flex:1;overflow:auto;padding:2vmin 3vmin;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:1.5vmin 4vmin;align-content:start;font-size:clamp(13px,1.7vmin,20px)}
.einstellungen .e{display:flex;align-items:center;gap:1.5vmin;padding:1.2vmin 0;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);min-width:0}.einstellungen .e .l{flex:1;min-width:0}.einstellungen .e .l small{display:block;opacity:.5;font-size:.8em}
.einstellungen select,.einstellungen input{font:inherit;color:inherit;background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid color-mix(in srgb,var(--text) 20%,transparent);border-radius:.8vmin;padding:.6vmin 1vmin;max-width:46%}
.schalter{width:5.2vmin;height:3vmin;min-width:40px;min-height:24px;border-radius:2vmin;background:color-mix(in srgb,var(--text) 25%,transparent);position:relative;flex:none}.schalter::after{content:"";position:absolute;top:12%;left:6%;height:76%;aspect-ratio:1;border-radius:50%;background:#fff;transition:transform .15s}.schalter.an{background:var(--akzent)}.schalter.an::after{transform:translateX(calc(100% + 2px))}
.attract{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1vmin;padding:1vmin;opacity:.22;pointer-events:none;filter:blur(.4px)}.attract img{width:100%;height:100%;object-fit:cover;border-radius:1vmin}
/* Bewegung je Welt */
.bewegung{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bewegung.sanft{background:radial-gradient(70vmin 70vmin at 50% 60%,color-mix(in srgb,var(--akzent) 18%,transparent),transparent 70%);animation:atmen 7s ease-in-out infinite}@keyframes atmen{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.bewegung.partikel i,.bewegung.konfetti i{position:absolute;top:-6vmin;width:1.4vmin;height:1.4vmin;border-radius:50%;background:var(--akzent);opacity:.6;animation:fall linear infinite}.bewegung.konfetti i{border-radius:.2vmin;height:2.2vmin}@keyframes fall{to{transform:translateY(115vh) rotate(340deg)}}
.bewegung.lichtstreifen::before,.bewegung.lichtstreifen::after{content:"";position:absolute;top:-20%;width:18vmin;height:140%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--akzent) 35%,transparent),transparent);transform:skewX(-14deg);animation:streifen 9s ease-in-out infinite}.bewegung.lichtstreifen::after{animation-delay:-4.5s;width:9vmin;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--akzent2) 40%,transparent),transparent)}
@keyframes streifen{from{left:-30%}to{left:120%}}
.bewegung.wellen{background:radial-gradient(120vmin 40vmin at 30% 110%,color-mix(in srgb,var(--akzent) 28%,transparent),transparent 70%),radial-gradient(120vmin 40vmin at 80% 115%,color-mix(in srgb,var(--akzent2) 28%,transparent),transparent 70%);animation:wellen 10s ease-in-out infinite alternate}@keyframes wellen{to{background-position:10vmin 0,-10vmin 0}}
.auftritt{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.auftritt i{position:absolute}
.auftritt.konfetti i{top:-6vmin;width:1.3vmin;height:2vmin;border-radius:.2vmin;opacity:.75;animation:fall linear infinite}
.auftritt.sterne i{width:.8vmin;height:.8vmin;border-radius:50%;background:#fff!important;animation:blinken ease-in-out infinite}
.auftritt.glitzer i{width:1.1vmin;height:1.1vmin;transform:rotate(45deg);animation:blinken ease-in-out infinite}
.auftritt.bokeh i{width:9vmin;height:9vmin;border-radius:50%;filter:blur(1.4vmin);opacity:.3;animation:treiben ease-in-out infinite alternate}
.auftritt.herzen i{background:transparent!important;bottom:-8vmin;top:auto;animation:steigen linear infinite}
.auftritt.herzen i::before{content:"\2665";font-size:3vmin;color:var(--akzent)}
.auftritt.herzen i:nth-child(3n)::before{color:#fff;font-size:2.2vmin}
.auftritt.schnee i{top:-4vmin;width:1.2vmin;height:1.2vmin;border-radius:50%;background:#fff!important;filter:blur(.15vmin);opacity:.85;animation:schneien linear infinite}
.auftritt.blaetter i{top:-5vmin;width:2.6vmin;height:2.6vmin;background:var(--akzent)!important;border-radius:0 62% 0 62%;opacity:.85;animation:blattfall linear infinite}
.auftritt.blasen i{bottom:-6vmin;top:auto;width:3vmin;height:3vmin;border-radius:50%;background:transparent!important;border:.28vmin solid rgba(255,255,255,.55);animation:steigen linear infinite}
.auftritt.feuerwerk i{width:17vmin;height:17vmin;border-radius:50%;background:transparent!important;border:.5vmin dotted var(--akzent);opacity:0;animation:salve ease-out infinite}
.auftritt.feuerwerk i:nth-child(2n){border-color:#fff}
@keyframes blinken{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes treiben{from{transform:translate(0,0)}to{transform:translate(4vmin,-7vmin)}}
@keyframes steigen{to{transform:translateY(-118vh) rotate(30deg)}}
@keyframes schneien{to{transform:translateY(118vh) translateX(7vmin)}}
@keyframes blattfall{to{transform:translateY(118vh) rotate(520deg) translateX(-9vmin)}}
@keyframes salve{0%{transform:scale(.05);opacity:0}55%{transform:scale(.05);opacity:0}62%{opacity:1}100%{transform:scale(1);opacity:0}}
.regen{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.regen i{position:absolute;left:50%;top:44%;width:1.2vmin;height:1.7vmin;border-radius:.2vmin;animation:sprengen 1.7s ease-out forwards}
.regen.sterne i,.regen.glitzer i{width:1vmin;height:1vmin}
.regen.sterne i{border-radius:50%}
.regen.glitzer i{transform:rotate(45deg)}
.regen.herzen i{background:transparent!important}
.regen.herzen i::before{content:"\2665";font-size:2.6vmin;color:var(--akzent)}
@keyframes sprengen{to{transform:translate(var(--dx),calc(var(--dy) + 30vmin)) rotate(320deg);opacity:0}}
.blitzweiss{position:absolute;inset:0;background:#fff;pointer-events:none;animation:gewitter .9s linear forwards}
@keyframes gewitter{0%{opacity:0}5%{opacity:.9}20%{opacity:.05}32%{opacity:.65}52%{opacity:.03}64%{opacity:.45}100%{opacity:0}}
.zaehler .zahl.flip{animation:klappen .45s cubic-bezier(.2,1.5,.4,1) both}
@keyframes klappen{from{transform:scaleY(0);opacity:.3}60%{transform:scaleY(1.1)}to{transform:scaleY(1)}}
.zaehler .ring.neon{box-shadow:0 0 4vmin var(--akzent),inset 0 0 3vmin var(--akzent)}
.zaehler .puls.herz{opacity:.4;animation:herzschlag .95s ease-in-out both}
@keyframes herzschlag{0%{transform:scale(1)}10%{transform:scale(1.14)}24%{transform:scale(.96)}40%{transform:scale(1.22)}85%{transform:scale(1)}}
.zaehler .kreis{position:absolute;width:13vmin;height:13vmin;border:.6vmin solid var(--akzent);border-radius:50%;animation:welle .95s ease-out both}
@keyframes welle{to{transform:scale(6.5);opacity:0}}
.zaehler .wort.cheese b{display:inline-block;animation:springen .48s cubic-bezier(.2,1.6,.4,1) both}
@keyframes springen{from{transform:translateY(7vmin);opacity:0}}
body.reduziert .bewegung,body.reduziert .auftritt,body.reduziert .regen,body.reduziert .blitzweiss,body.reduziert .laufband span{animation:none!important;display:none}
@media (prefers-reduced-motion:reduce){.bewegung,.auftritt,.regen,.laufband span{animation:none!important}}
.fern-qr{display:flex;gap:3vmin;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---------- Vorfuehrung im Rahmen einer Seite ----------
   Dort fuellt das Kamerabild den ganzen Schirm und die Bedienung liegt
   darueber — wie an der richtigen Box. Nur die Buehne wird geloest; der
   Leerlaufbildschirm behaelt seinen Satzspiegel. */
html.vorfuehrung .buehne{position:absolute;inset:0;width:100%;max-height:none;
aspect-ratio:auto;border-radius:0;box-shadow:none;
background:radial-gradient(120% 90% at 50% 40%,#241d16,#0d0b09 70%)}
html.vorfuehrung .seite .spalte>#info{position:absolute;left:4vmin;top:4vmin;z-index:3;opacity:.75}
html.vorfuehrung .zaehler .zahl{font-size:clamp(90px,26vmin,300px);color:var(--akzent)}
html.vorfuehrung .zaehler .wort{color:var(--akzent)}
/* In der Vorfuehrung gibt es niemanden, der abbrechen koennte. */
html.vorfuehrung .seite .spalte>.knopf.zweit{display:none}

/* ---------- Der Blitzautomat (box/Start.cs) ----------
   Masse in vmin wie auf der Box: Rahmen 1 vmin Akzent mit innerer Linie,
   Marke oben links (3 / 2,2 vmin), Ruf links unten bei 5,5 / 26 vmin, Band
   unten mit Kante 0,5 vmin und Polster 2,4 / 26 / 2,6 / 3,5 vmin, LOS-Ring
   21 vmin (nie unter 140) bei 6 / 6 vmin. */
.seite.automat{display:block;padding:0;overflow:hidden}
.glas{background:var(--glas)}
.automat-bild{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--grund)}
.automat-bild video{width:100%;height:100%;object-fit:cover}.automat-bild video.spiegel{transform:scaleX(-1)}
.automat-hinweis{margin:0;font-size:clamp(14px,2vmin,28px);opacity:.78;max-width:70vmin;text-align:center}
.automat-rahmen{position:absolute;inset:0;border:1vmin solid var(--akzent);pointer-events:none}
.automat-linie{position:absolute;inset:1vmin;border:2px solid color-mix(in srgb,var(--grund) 65%,transparent);pointer-events:none}
.automat-marke{position:absolute;left:3vmin;top:2.2vmin;padding:.8vmin 1.6vmin .8vmin 1vmin;border-radius:1.2vmin;display:flex;align-items:center;z-index:2}
.automat-marke .marke{display:flex;align-items:center;gap:1vmin;font-weight:800;font-size:clamp(15px,2.2vmin,28px);letter-spacing:-.03em}
.automat-marke .marke img{height:3.4vmin;width:3.4vmin;border-radius:.9vmin}.automat-marke img.logo{height:5vmin;max-width:30vw;object-fit:contain}
.automat-ruf{position:absolute;left:5.5vmin;bottom:26vmin;z-index:2;animation:schweben 2.6s ease-in-out infinite alternate}
/* inline-block statt block: sonst faellt der negative obere Rand des Blocks durch den Stempel (Randkollaps) und der Schatten unten verschwindet. */
.automat-ruf .stempel{display:inline-block;background:color-mix(in srgb,#0B0B0D 59%,transparent)}
.automat-ruf .block{display:block;background:var(--akzent);color:var(--knopftext);padding:.4vmin 2vmin .7vmin;margin:-1vmin 1vmin 1vmin -1vmin;font-weight:800;font-size:max(30px,5.2vmin);letter-spacing:-.04em;line-height:1.15;white-space:nowrap}
.automat-fern{position:absolute;left:5.5vmin;bottom:26vmin;z-index:2;font-size:clamp(18px,2.6vmin,34px);opacity:1}
@keyframes schweben{to{transform:translateY(-.9vmin)}}
.automat-band{position:absolute;left:1vmin;right:1vmin;bottom:1vmin;border-top:.5vmin solid var(--akzent);padding:2.4vmin 26vmin 2.6vmin 3.5vmin;z-index:1}
.automat-chips{display:flex;flex-wrap:wrap;align-items:center}
.automat-chips .chip{margin:0 1.2vmin 1vmin 0}
.automat-los{position:absolute;right:6vmin;bottom:6vmin;width:max(140px,21vmin);height:max(140px,21vmin);z-index:3;display:grid;place-items:center;animation:atmen-los 1.9s ease-in-out infinite alternate}
.automat-los>span{grid-area:1/1;border-radius:50%;position:relative}
/* Reihenfolge ausdruecklich: der Schatten traegt einen Transform und laege sonst UEBER der Scheibe — gemessen: die Scheibe war dunkelbraun statt Amber. */
.automat-los .ring{z-index:1}.automat-los .schatten{z-index:2}.automat-los .scheibe{z-index:3}.automat-los .wort{z-index:4}
.automat-los .ring{width:100%;height:100%;border:3px dashed color-mix(in srgb,var(--akzent) 55%,transparent);animation:drehen 26s linear infinite}
.automat-los .schatten{width:82%;height:82%;background:color-mix(in srgb,#0B0B0D 67%,transparent);transform:translate(5%,5%)}
.automat-los .scheibe{width:82%;height:82%;background:var(--akzent)}
.automat-los .wort{border-radius:0;color:var(--knopftext);font-weight:800;font-size:calc(max(140px,21vmin)*.82*.26);letter-spacing:-.02em}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes atmen-los{to{transform:scale(1.045)}}
.laufband.automat-lauf{bottom:15.5vmin;opacity:1;color:#F5F2EC;text-shadow:0 1px 6px #0B0B0D;text-transform:none;letter-spacing:0;font-size:clamp(13px,1.7vmin,22px)}
.automat-sprache{position:absolute;right:5.5vmin;top:5vmin;z-index:3}
.automat-buch{position:absolute;left:5.5vmin;top:11vmin;z-index:3}
/* Plakat: Ruf mittig, Chips oben frei. Buehne: Ruf oben, Chips unten frei. */
.seite.automat.plakat .automat-ruf{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);margin-top:-11vmin}
.seite.automat.plakat .automat-band,.seite.automat.buehne .automat-band{background:transparent;border:0;padding:0;left:0;right:0}
.seite.automat.plakat .automat-band{bottom:auto;top:7vmin}
.seite.automat.plakat .automat-chips,.seite.automat.buehne .automat-chips{justify-content:center}
.seite.automat.buehne .automat-band{bottom:4vmin}
.seite.automat.buehne .automat-ruf{left:50%;bottom:auto;top:8vmin;transform:translateX(-50%)}
.seite.automat.plakat .automat-los,.seite.automat.buehne .automat-los{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%)}
.seite.automat.plakat .automat-los{margin-top:15vmin}
body.reduziert .automat-ruf,body.reduziert .automat-los,body.reduziert .automat-los .ring{animation:none}
@media (prefers-reduced-motion:reduce){.automat-ruf,.automat-los,.automat-los .ring{animation:none}}
/* Hochformat und kleine Rahmen (Spiegelbox, die Vorfuehrung auf einem Handy):
   Ruf oben mittig, LOS mittig ueber dem Band, Band ohne den Platz fuer den Ring.
   Gemessen auf 390 x 490 (Marketingseite mobil): Ruf, Chips und Ring lagen
   uebereinander. */
/* Kein transform fuer die Lage: Ruf und Ring tragen ihre Animation im
   transform (schweben, atmen), und die haette die Verschiebung ueberschrieben
   — gemessen auf 390 x 700: Ruf rechts oben, Ring auf dem Band. */
@media (max-aspect-ratio:1/1){
.seite.automat.automat .automat-ruf{left:0;right:0;bottom:auto;top:16vmin;text-align:center}
.seite.automat.automat .automat-band{padding-right:3.5vmin}
.seite.automat.automat .automat-chips{justify-content:center}
.seite.automat.automat .automat-los{left:calc(50% - max(140px,21vmin)/2);right:auto;bottom:32vmin}
.seite.automat.automat .automat-marke{top:2.2vmin}
.seite.automat.automat .laufband.automat-lauf{bottom:1.5vmin}
}
/* Das Buehnenbild der Welt: ueber dem Inhalt, unter Kopf und Fuss, nie im Weg (box/Buehnenbild.cs) */
canvas.buehnenbild{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
/* Der Farbschimmer der Welt hinter allem (Fenster.Hintergrund auf der Box) */
.schimmer{position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 62% at 50% 50%,color-mix(in srgb,var(--akzent) var(--schimmer,13.33%),transparent),transparent)}
/* Die Pause ruht auf deckendem Grund, ohne Schimmer — wie PauseBauen auf der Box (Grid mit GrundPinsel). Gemessen: mit Schimmer 64 bis 82 % der Flaeche anders, ohne unter 5. */
.seite.pause{background:var(--grund)}