/* Gemeinsame Bausteine, auf dem Handy mit eigenem Größenraster. */
.icon { width: 1.5em; height: 1.5em; flex: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.spieler-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.spieler-chip { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; max-width: 100%; }
.spieler-chip > span:not(.initialen) { overflow-wrap: anywhere; }
.initialen { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; flex: none; color: var(--weiss); font-size: 24px; border: 2px solid var(--weiss); }
.getippt { font-weight: 800; }
.optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.option { position: relative; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 24px; border: 3px solid var(--weiss); border-radius: var(--radius); background: var(--weiss); color: var(--grau); overflow-wrap: anywhere; }
.buchstabe { font-weight: 800; color: var(--rot); }
.option-label { flex: 1; }
.richtig-label { visibility: hidden; font-size: .65em; }
.tipp-chips { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; font-size: 24px; }
.tipp-chips:empty { display: none; }
.tipp-chips .initialen { width: 36px; height: 36px; font-size: 22px; }
.countdown { position: relative; height: 56px; border: 1px solid var(--gold); overflow: hidden; border-radius: 8px; margin: 28px 0; background: var(--tanne-tief); }
.countdown-fuellung { position: absolute; inset: 0; background: var(--gold-hell); transform-origin: left; }
.countdown-zeit { position: absolute; right: 16px; top: 4px; padding: 0 12px; color: var(--tanne); background: var(--gold-hell); font-weight: 700; }
.bild { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--tanne); }
.motiv, .bild-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-fallback { display: flex; align-items: center; justify-content: center; color: var(--gold-hell); }
.bild-fallback .icon { width: 28%; height: 40%; }
.bild .ki-label { position: absolute; right: 20px; bottom: 18px; padding: 4px 10px; color: var(--gold-hell); background: var(--tanne-tief); font-size: 22px; z-index: 2; }
.sequenz { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sequenz-frage, .sequenz-szene, .sequenz-rang { position: absolute; inset: 0; transform-origin: center; }
.sequenz-frage { padding: 24px; }
.sequenz-frage h2 { margin-bottom: 32px; }
.sequenz-szene, .sequenz-rang { visibility: hidden; }
.sequenz-rang { background: var(--tanne); padding: 28px 190px; }
.pointe-platte { position: absolute; left: 48px; top: 48px; bottom: 48px; width: 640px; padding: 38px; border-radius: var(--radius-gross); background: var(--weiss); color: var(--grau); overflow: hidden; }
.pointe-platte h2 { color: var(--rot); font-size: 66px; }
.pointe { font-size: 48px; font-weight: 700; line-height: 1.1; margin: 24px 0; overflow-wrap: anywhere; }
.pointe-zahl { font-size: 92px; color: var(--rot); }
.effekt { display: flex; flex-wrap: wrap; gap: 12px; height: 160px; position: relative; align-content: center; color: var(--rot); }
.effekt .icon { width: 60px; height: 60px; }
.jury-stempel { display: block; border: 2px solid var(--rot); color: var(--rot); padding: 10px; font-size: 28px; transform: rotate(-2deg); }
.pointe-platte blockquote { margin: 28px 0; font-size: 36px; line-height: 1.25; overflow-wrap: anywhere; }
.zitat-wort { display: inline; }
.jury, .zahlen-ranking { font-size: 26px; }
.zahlen-ranking { padding-left: 26px; }
.rangliste { list-style: none; padding: 0; margin: 28px 0; }
.rangliste li { min-height: 86px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--gold); }
.rangliste .platz { width: 50px; font-weight: 700; }
.rangliste .spieler-chip { flex: 1; }
.punkte { white-space: nowrap; }
.pause { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: center; background: var(--creme); color: var(--grau); text-align: center; }
.pause[hidden] { display: none; }
.pause h2 { color: var(--rot); }
.partikel { position: absolute; top: 0; pointer-events: none; z-index: 4; color: var(--gold); }
.flocke { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-hell); }
.stern-partikel { width: 26px; height: 26px; }
/* Alle Beamergrößen beziehen sich auf die feste 1920 × 1080 Bühne. */
.beamer { overflow: hidden; background: var(--tanne-tief); }
.beamer .buehne { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; overflow: hidden; background: var(--tanne); color: var(--gold-hell); font-size: 32px; }
.beamer h1, .beamer h2, .beamer h3 { color: var(--gold-hell); }
.beamer h2 { font-size: 70px; }
.beamer-kopf { position: absolute; top: 36px; left: 64px; right: 64px; height: 104px; display: flex; align-items: center; gap: 32px; border-bottom: 2px solid var(--linie); background: var(--weiss); color: var(--grau); padding: 12px 26px; }
.beamer .beamer-kopf h1 { color: var(--rot); font-size: 42px; margin: 0; flex: 1; max-width: 1300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-sterne { color: var(--gold); font-size: 32px; }
.beamer #inhalt { position: absolute; inset: 170px 64px 64px; }
.beamer #verbindung { position: absolute; bottom: 12px; left: 64px; margin: 0; font-size: 22px; }
.schnee { position: absolute; inset: 0; pointer-events: none; }
.willkommen { padding: 200px 70px; border-bottom: 1px solid var(--gold); }
.willkommen h2 { font-size: 124px; }
.frage-buehne h2 { max-width: 1640px; margin-bottom: 40px; }
.frage-buehne .option { min-height: 148px; font-size: 44px; }
.frage-buehne .optionen { gap: 24px; }
.frage-buehne .eyebrow { margin: 0 0 18px; }
.beamer .sequenz-frage .option { min-height: 180px; font-size: 40px; }
.beamer .sequenz-frage .optionen { gap: 24px; }
.beamer .pointe-platte h2 { color: var(--rot); }
.beamer .sequenz-rang h2 { font-size: 58px; }
.beamer .sequenz-rang .rangliste { margin-top: 16px; }
.sperre { text-align: center; padding-top: 130px; }
.sperre h2 { font-size: 96px; }
.trommel { display: block; font-size: 280px; line-height: 1.3; }
.lobby { height: 620px; position: relative; }
.lobby > .bild { border-radius: var(--radius-gross); }
.lobby-platte { position: absolute; left: 36px; top: 24px; bottom: 24px; width: 650px; background: var(--weiss); color: var(--grau); border-radius: var(--radius-gross); padding: 24px 32px; }
.beamer .lobby-platte h2 { color: var(--rot); font-size: 52px; }
.lobby-platte p { font-size: 27px; line-height: 1.2; margin: 12px 0; }
.qr-code { height: 300px; text-align: center; }
.qr-code canvas { width: 300px; height: 300px; image-rendering: pixelated; }
#lobby-spieler { padding-top: 30px; }
.rang-buehne { max-width: 1250px; margin: 0 auto; }
.rang-buehne h2 { font-size: 64px; }
.rang-buehne .eyebrow { margin: 0 0 10px; }
.rang-buehne .rangliste { margin: 12px 0; }
.weiter { margin: 12px 0; }
.finale { position: absolute; inset: 0; }
.finale > .bild { position: absolute; inset: 0; }
.finale-platte { position: relative; margin: 24px auto; padding: 30px 46px; width: 1320px; border-radius: var(--radius-gross); background: var(--weiss); color: var(--grau); }
.beamer .finale h2 { color: var(--rot); font-size: 56px; }
.finale .eyebrow { margin: 0 0 12px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 24px; margin: 25px 0; }
.podium-platz { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; width: 30%; padding: 16px; border: 1px solid var(--linie); border-top: 4px solid var(--rot); background: var(--creme); }
.podium-platz .spieler-chip { flex-direction: column; text-align: center; }
.platz-1 { min-height: 270px; }
.platz-2 { min-height: 240px; }
.platz-3 { min-height: 210px; }
.effekt-stapel { height: 240px; }
.finale .rangliste { font-size: 25px; margin: 0; }
.finale .rangliste li { min-height: 52px; }
.finale .rangliste .initialen { width: 36px; height: 36px; font-size: 22px; }
.beamer .pause { position: absolute; background: var(--tanne-tief); color: var(--gold-hell); }
.beamer .pause h2 { color: var(--gold-hell); font-size: 120px; }
@media (prefers-reduced-motion: reduce) { .partikel { display: none; } }