/* Darstellungsstile für Beamer und Handy während eines Spiels: Klar, Hell, Bühne, Fokus, Regenbogen.
 * Aktiv über body.styled.stil-<name> (siehe applyStyle in common.js). Anmeldung, Quiz-Auswahl
 * und Editor bleiben unverändert (dort gilt Nunito aus style.css). Schriften liegen lokal (SIL Open Font License, assets/fonts/). */

@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(fonts/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(fonts/nunito-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Atkinson; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Atkinson; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }

/* ---------- Grundwerte je Stil ---------- */

body.styled {
  --font: Nunito, system-ui, sans-serif;
  --font-display: var(--font);
  --fg: #fff;
  --fg-muted: #aab1b8;
  --soft: rgba(255, 255, 255, .12);
  --controls-bg: rgba(0, 0, 0, .28);
  --ring: var(--brand);
  font-family: var(--font);
  color: var(--fg);
}
body.stil-klar { background: radial-gradient(1200px 520px at 50% -10%, #3a4148 0%, #2b3035 55%, #24282c 100%) fixed #2b3035; }
body.stil-hell {
  --font: Atkinson, system-ui, sans-serif;
  --fg: #1e2226; --fg-muted: #5f666d; --soft: rgba(30, 34, 38, .07); --controls-bg: #fff;
  background: #f4f6f3;
}
body.stil-buehne {
  --font-display: Fredoka, Nunito, sans-serif;
  --fg-muted: #d6eedd; --soft: rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, #2f8a2a 0%, #1b6b4f 55%, #164a5c 100%) fixed #1e5631;
}
body.stil-fokus { --fg-muted: #b8c4cc; background: radial-gradient(900px 600px at 50% 35%, #33515f, #1c2a33) fixed #1c2a33; }
body.stil-regenbogen { --fg-muted: #b9b6e0; --soft: rgba(255, 255, 255, .12); --ring: url(#ring-rb); background: #17153a; }

/* Hintergrund-Motive (fest stehend, hinter allem) */
body.stil-hell::before, body.stil-buehne::before, body.stil-regenbogen::before, body.stil-regenbogen::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
}
body.stil-hell::before { width: 70vw; height: 70vw; border-radius: 50%; background: #e3f3de; right: -22vw; top: -46vw; }
body.stil-buehne::before {
  inset: -20%; opacity: .09; transform: rotate(-8deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M48 10 L30 48 H44 L38 80 L62 38 H48 L56 10Z' fill='white'/%3E%3C/svg%3E");
  background-size: 120px;
}
body.stil-regenbogen::before {
  left: 50%; top: 100%; width: 165vmax; height: 165vmax; transform: translate(-50%, -50%); border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, transparent 0 46%, #e8435a 46% 48.5%, #f7893b 48.5% 51%, #f9d64a 51% 53.5%, #4dba38 53.5% 56%,
    #2fb4e0 56% 58.5%, #5b6cf0 58.5% 61%, #a45be0 61% 63.5%, transparent 63.5%);
}
body.stil-regenbogen::after { inset: 0; opacity: .12; background-image: radial-gradient(#fff 1.2px, transparent 1.6px); background-size: 46px 46px; }

/* ---------- Allgemeine Anpassungen im Spiel ---------- */

body.styled h1, body.styled h2, body.styled .q-text, body.styled .pin, body.styled .podest-name { font-family: var(--font-display); }
body.styled .muted { color: var(--fg-muted); }
body.styled .card .muted, body.styled .join-info .muted, body.styled .overview .muted, body.styled .prize .muted, body.styled .p-prize .muted, body.styled .order-solution .muted { color: var(--muted); } /* auf weißen Karten */
body.styled .result.bad .muted { color: rgba(255, 255, 255, .85); }
body.styled .result.good .muted, body.styled .result.partial .muted { color: rgba(30, 34, 38, .8); }
body.styled .controls { background: var(--controls-bg); }
body.styled .btn-ghost { background: var(--soft); color: var(--fg); }
body.styled .progress { background: var(--soft); }
body.styled .countdown-big { background: var(--soft); }
body.styled .input-hint { color: var(--fg); }
body.styled .text-answers li { background: var(--soft); }
body.styled .text-answers li.ok { background: var(--brand); color: var(--brand-ink); } /* richtige Antwort hervorgehoben */
body.styled .answer-echo { background: var(--soft); }
body.styled .bar { background: var(--controls-bg); }
body.styled .result.neutral { background: transparent; }
body.styled .q-title { font-family: var(--font-display); }
body.stil-hell .controls { border-top: 1px solid #e3e6e8; }
body.stil-hell .q-title { background: transparent; text-align: left; padding: 0; font-size: 2.4em; }
body.stil-hell .leaderboard, body.stil-hell .join-info, body.stil-hell .chip { border: 2px solid #e1e5e8; }
body.stil-hell .bar { border-bottom: 1px solid #e3e6e8; }
body.stil-hell .avatar-row, body.stil-hell .arrow, body.stil-hell .avatar-tabs { background: rgba(30, 34, 38, .07); color: var(--fg); }
body.stil-hell .avatar-tab, body.stil-hell .avatar-swatches small, body.stil-hell .avatar-row-label small { color: var(--fg-muted); }
body.stil-hell .result.good { color: var(--brand-ink); }
body.stil-buehne .q-title { border-radius: 22px; box-shadow: 0 10px 0 rgba(0, 0, 0, .18); }
body.stil-regenbogen .q-title { box-shadow: 0 0 0 4px #f9d64a, 0 0 0 8px #e8435a; }
body.stil-fokus .q-title { background: rgba(0, 0, 0, .5); color: #fff; }

/* ---------- Antwortkacheln (Beamer und Handy) ---------- */

body.stil-klar .answer { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); border-radius: 14px; }
body.stil-klar .answer .shape, body.stil-regenbogen .answer .shape { background: #fff; }
body.stil-klar .answer.ans-a .shape, body.stil-regenbogen .answer.ans-a .shape { color: var(--ans-a); }
body.stil-klar .answer.ans-b .shape, body.stil-regenbogen .answer.ans-b .shape { color: var(--ans-b); }
body.stil-klar .answer.ans-c .shape, body.stil-regenbogen .answer.ans-c .shape { color: var(--ans-c); }
body.stil-klar .answer.ans-d .shape, body.stil-regenbogen .answer.ans-d .shape { color: var(--ans-d); }

body.stil-hell .answer { background: #fff; color: var(--fg); border: 2px solid #e1e5e8; box-shadow: none; padding: 0; overflow: hidden; border-radius: 14px; gap: 0; }
body.stil-hell .answer .shape { align-self: stretch; height: auto; width: 2.4em; border-radius: 0; color: #fff; font-size: 1.3em; }
body.stil-hell .answer > span:nth-child(2) { padding: .7em 1em; }
body.stil-hell .answer.ans-a .shape { background: var(--ans-a); }
body.stil-hell .answer.ans-b .shape { background: var(--ans-b); }
body.stil-hell .answer.ans-c .shape { background: var(--ans-c); }
body.stil-hell .answer.ans-d .shape { background: var(--ans-d); }
body.stil-hell .answer.selected { border-color: var(--fg); outline: 3px solid var(--fg); }

body.stil-buehne .answer { border-radius: 18px; box-shadow: 0 7px 0 rgba(0, 0, 0, .25); font-family: Fredoka, Nunito, sans-serif; font-weight: 600; }
body.stil-buehne .answer .shape { border-radius: 50%; }
body.stil-fokus .answer { border-radius: 12px; box-shadow: none; }

body.stil-regenbogen .answer { border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); position: relative; overflow: hidden; }
body.stil-regenbogen .answer::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(255, 255, 255, .35); }
body.stil-regenbogen .answer .shape { border-radius: 50%; }
body.stil-regenbogen .answer.ans-a { background: linear-gradient(120deg, #0f766e, #0e8f6e); }
body.stil-regenbogen .answer.ans-b { background: linear-gradient(120deg, #b45309, #c2410c); }
body.stil-regenbogen .answer.ans-c { background: linear-gradient(120deg, #86198f, #9d1f8f); }
body.stil-regenbogen .answer.ans-d { background: linear-gradient(120deg, #1d4ed8, #4338ca); }
.rb { background: linear-gradient(90deg, #e8435a, #f7893b, #f9d64a, #4dba38, #2fb4e0, #5b6cf0, #a45be0); }

/* ---------- Beamer: Frageseite ---------- */

.host-app.fit { height: 100vh; height: 100dvh; }
.host-app.fit > section { min-height: 0; overflow: hidden; }
.question { position: relative; }
.question .tiles .answer { min-height: 11vh; }
.q-head, .q-subhead { display: flex; align-items: center; gap: 1vw; }
.q-head .type-badge, .q-subhead .type-badge { align-self: center; }
.q-num { font-weight: 800; font-size: 1.05em; padding: .35em 1em; border-radius: 99px; background: var(--soft); white-space: nowrap; }
.q-logo { height: 1.9em; opacity: .9; }
.q-text { margin: 0; font-weight: 900; text-align: center; font-size: 2.5em; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; min-width: 0; }
.q-text-big { font-size: 3.5em; flex: 1; }
.q-middle { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2vw; min-height: 0; }
/*
 * Bildbereich: Das Bild ist höchstens so hoch wie sein Bereich (Container-Abfrage, 100cqh) abzüglich
 * Rahmen bzw. Schrägstellung und --img-gap Abstand nach oben und unten. So ragt es nie in Frage oder
 * Antworten, und zwischen den Elementen bleibt Luft.
 */
.question { --img-gap: 1.2vh; }
.question.has-image .q-middle, .q-imgrow { container-type: size; }
.q-middle .q-image { max-height: min(44vh, calc(100cqh - 2 * var(--img-gap))); max-width: 58vw; min-width: 0; }
.q-middle .q-image.framed { max-height: min(44vh, calc(100cqh - 12px - 2 * var(--img-gap))); }
.q-image { object-fit: contain; border-radius: 16px; display: block; }
.q-image.framed { box-shadow: 0 0 0 6px #fff, 0 18px 40px rgba(0, 0, 0, .45); }

.timer-ring { width: 7.75em; height: 7.75em; position: relative; flex-shrink: 0; }
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.timer-ring circle { fill: none; stroke-width: 12; }
.timer-ring .ring-track { stroke: var(--soft); }
.timer-ring .ring-fill { stroke: var(--ring); stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.timer-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.9em; font-weight: 900; }

.count-box { width: 7.75em; text-align: center; flex-shrink: 0; }
.count-n { font-size: 2.5em; font-weight: 900; }
.count-l { color: var(--fg-muted); font-weight: 700; }
.count-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.count-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--soft); }
.count-dots i.on { background: var(--brand); }

/* Hell */
.q-hell .q-num { background: none; padding: 0; color: var(--brand-strong); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.q-hell .q-head .progress { flex: 1; }
.q-hell .q-secs { font-weight: 700; font-size: 1.9em; min-width: 3.4em; text-align: right; }
.q-hell .q-answered-line { color: var(--fg-muted); font-weight: 700; }
.q-hell .q-text { text-align: left; font-size: 2.75em; font-weight: 700; }
.q-hell .q-text-big { font-size: 3.7em; display: flex; align-items: center; }
.q-split { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4vw; min-height: 0; }
.q-split .q-image { width: 100%; height: 100%; object-fit: contain; background: #fff; min-height: 0; } /* nicht zuschneiden: bei Skizzen fehlte sonst Inhalt */
.q-split .tiles { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.q-imgrow { flex: 1; display: flex; justify-content: center; min-height: 0; }
.q-imgrow .q-image { max-height: min(40vh, calc(100cqh - 2 * var(--img-gap))); }

/* Bühne */
.q-buehne .q-card {
  background: #fff; color: var(--text); border-radius: 22px; padding: 1em 1.8em .9em; box-shadow: 0 10px 0 rgba(0, 0, 0, .18);
  position: relative; margin-top: .6em;
}
.q-buehne .q-card .q-num { position: absolute; top: -.8em; left: 1.6em; background: #ffd23f; color: #1e2226; transform: rotate(-3deg); font-family: Fredoka, Nunito, sans-serif; font-weight: 700; }
.q-buehne .q-card .type-badge { position: absolute; top: -.8em; right: 1.6em; }
.q-buehne .q-text { font-weight: 700; }
.timer-bubble { width: 8.1em; height: 7.5em; position: relative; flex-shrink: 0; }
.timer-bubble svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; }
/* Ziffern genau in den Kreis (Mittelpunkt 58/58 von 130×120) setzen, die Spitze zählt nicht mit */
.timer-bubble span {
  position: absolute; left: 1.54%; top: 1.67%; width: 86.15%; height: 93.33%;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding-bottom: .036em;
  font-family: Fredoka, Nunito, sans-serif; font-size: 3.5em; font-weight: 700; color: #1e5631;
}
.q-image.tilted { border: 8px solid #fff; transform: rotate(-1.5deg); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
.q-middle .q-image.tilted { max-height: min(44vh, calc(100cqh - 16px - 1.5vh - 2 * var(--img-gap))); box-sizing: border-box; } /* Rand und Schräglage */
.crowd { flex: 1; align-self: stretch; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; overflow: hidden; }
.avatar-crowd { width: 4.75em; height: 5.1em; animation: pop .4s ease-out; }
.q-buehne .count-n { font-family: Fredoka, Nunito, sans-serif; font-size: 2.9em; }

/* Fokus */
.fokus-blur { position: fixed; inset: -40px; z-index: -1; background-size: cover; background-position: center; filter: blur(28px) brightness(.5); }
.q-imgwrap { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 0; position: relative; }
.q-fokus.no-image .q-imgwrap { flex: 0 0 3.6em; }
.q-imgwrap .q-image { max-height: 100%; max-width: 72vw; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); border-radius: 14px; }
.timer-pill {
  position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .55); border: 3px solid var(--brand); border-radius: 99px;
  padding: .05em .6em; font-weight: 900; font-size: 2.1em; min-width: 2.4em; text-align: center;
}
.count-pill { position: absolute; top: 0; right: 0; background: rgba(0, 0, 0, .55); border-radius: 99px; padding: .45em 1em; font-weight: 800; font-size: 1.25em; }
.q-banner { font-size: 2.25em; background: rgba(0, 0, 0, .55); border-radius: 14px; padding: .3em .7em; }
.q-fokus .q-text-big { display: flex; align-items: center; justify-content: center; font-size: 3.9em; padding: 0 4vw; }
.q-fokus .tiles .answer { min-height: 0; padding: 1.1vh 1vw; font-size: 1.55em; }
.q-fokus .tiles { gap: 10px; }

/* Regenbogen */
.q-regenbogen .q-num.rb { color: #17153a; font-weight: 900; background: linear-gradient(90deg, #e8435a, #f7893b, #f9d64a, #4dba38, #2fb4e0, #5b6cf0, #a45be0); }
.q-regenbogen .q-card { padding: 4px; border-radius: 22px; }
.q-regenbogen .q-card .q-text { background: #fff; color: #17153a; border-radius: 18px; padding: .35em .7em; }
.rb-frame { padding: 5px; border-radius: 18px; display: flex; min-height: 0; }
.rb-frame .q-image { max-height: min(40vh, calc(100cqh - 10px - 2 * var(--img-gap))); max-width: 56vw; border-radius: 14px; }
.q-regenbogen .timer-ring span { font-size: 2.9em; }

/* ---------- Handy ---------- */

/* Buchstaben stehen in allen Kacheln auf gleicher Höhe, auch wenn eine Antwort zweizeilig ist */
.choose .answers:not(.list) .answer > span:nth-child(2) { min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; line-height: 1.25; }
.choose .answers.list { grid-template-columns: 1fr; }
.choose .answers.list .answer { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; }

.p-timer { flex-shrink: 0; }
.p-timer .timer-ring { width: 64px; height: 64px; }
.p-timer .timer-ring span { font-size: 1.45rem; }
.p-timer .timer-ring circle { stroke-width: 13; }
.p-secs { font-weight: 700; font-size: 1.4rem; color: var(--brand-strong); white-space: nowrap; }
.p-progress { height: 6px; border-radius: 0; margin: -16px -16px 0; }
body.stil-buehne .p-timer.timer { background: var(--brand); color: #fff; font-family: Fredoka, Nunito, sans-serif; }
body.stil-fokus .p-timer.timer { background: rgba(0, 0, 0, .45); border: 3px solid var(--brand); color: #fff; border-radius: 99px; min-width: 3.2em; }

body.stil-buehne .choose .q-top { background: #fff; color: var(--text); border-radius: 18px; padding: 10px 12px 10px 14px; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
body.stil-buehne .choose .q-text { font-family: Fredoka, Nunito, sans-serif; font-weight: 600; font-size: 1.25rem; }
body.stil-regenbogen .choose .q-top { background: #fff; color: #17153a; border-radius: 16px; padding: 10px 12px 10px 14px; box-shadow: 0 0 0 3px #f9d64a, 0 0 0 6px #e8435a; margin: 6px; }
body.stil-regenbogen .p-timer .ring-track { stroke: #e6e4f2; }
body.stil-regenbogen .p-timer .timer-ring span { color: #17153a; }
body.stil-fokus .choose .q-top { flex-direction: column-reverse; text-align: center; gap: 10px; }
body.stil-fokus .choose .q-text { font-size: 1.45rem; font-weight: 900; }
body.stil-fokus .choose .p-strip { order: -1; }
body.styled .choose .q-text { text-align: left; }
body.stil-fokus .choose .q-text { text-align: center; }
body.stil-klar .choose .q-text, body.stil-regenbogen .choose .q-text { font-weight: 800; }
/* Mit Bildstreifen dürfen die Kacheln etwas niedriger werden, damit alles auf den Bildschirm passt */
.choose.with-strip .answers { min-height: 0; }

/* Hell: farbiger Buchstabe als Band oben (2×2) bzw. links (Liste), wie auf dem Beamer */
body.stil-hell .choose .answers:not(.list) .answer .shape { width: 100%; height: 2.3em; align-self: stretch; }
body.stil-hell .choose .answers:not(.list) .answer > span:nth-child(2) { flex: 1; align-items: center; padding: .5em; }
body.stil-hell .choose .answer .tick { color: var(--fg); }

/* Bildstreifen (Option „Bilder auch auf den Handys“) */
.p-strip {
  position: relative; display: block; width: 100%; height: min(22vh, 180px); flex-shrink: 0; padding: 0; border: 0;
  border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .35); cursor: zoom-in; font: inherit;
}
.p-strip::before {
  content: ''; position: absolute; inset: -20px; background: var(--strip-bg, none) center / cover; filter: blur(16px) brightness(.6);
  opacity: 0; transition: opacity .3s;
}
.p-strip img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity .3s; }
.p-strip.loaded::before, .p-strip.loaded img { opacity: 1; }
.p-strip-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; opacity: .8; }
.p-strip.loaded .p-strip-note { display: none; }
.p-strip:disabled { cursor: default; }
.p-strip-zoom { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; font-weight: 800; padding: 4px 9px; border-radius: 99px; }
.p-strip-zoom { display: none; } .p-strip.loaded .p-strip-zoom { display: block; }
body.stil-buehne .p-strip { border: 4px solid #fff; }
body.stil-regenbogen .p-strip { box-shadow: 0 0 0 3px #f9d64a, 0 0 0 6px #e8435a; }
.p-zoom {
  position: fixed; inset: 0; z-index: 20; background: rgba(10, 12, 14, .94); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 20px; cursor: zoom-out;
}
.p-zoom img { max-width: 100%; max-height: calc(100% - 70px); border-radius: 12px; }
.p-zoom-close { color: #fff; font-weight: 800; background: rgba(255, 255, 255, .15); padding: 10px 20px; border-radius: 99px; }
/* Effekte im hellen Stil: Karten mit Rand statt Schatten */
body.stil-hell .fx-note { border: 2px solid #e1e5e8; box-shadow: none; }

/* ==========================================================================
   Stile mit Hintergrund-Motiv (szenen.js): Japan, Jahreszeiten, Tafel, Karopapier, Weltraum, Meer.
   Aufbau wie „Klar“, die Frage steht auf einer ruhigen Karte, damit sie vor dem Bild gut lesbar bleibt.
   ========================================================================== */

@font-face { font-family: 'Zen Maru'; font-weight: 700; font-display: swap; src: url(fonts/zen-maru-gothic-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Zen Maru'; font-weight: 900; font-display: swap; src: url(fonts/zen-maru-gothic-latin-900-normal.woff2) format('woff2'); }
@font-face { font-family: 'Patrick Hand'; font-weight: 400; font-display: swap; src: url(fonts/patrick-hand-latin-400-normal.woff2) format('woff2'); }

/* Motiv-Ebene */
.szene-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sz-teil { position: absolute; }
.sz-teil svg { display: block; width: 100%; height: auto; overflow: visible; }
.sz-wiese svg, .sz-strand svg, .sz-boden_herbst svg, .sz-schnee svg, .sz-ablage svg, .sz-sand svg { height: 100%; }
.sz-baum svg, .sz-seegras_l svg, .sz-seegras_r svg { height: 100%; width: auto; }
.sz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sz-wellen::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42vh; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%23e8b9b0' stroke-width='1.3' opacity='.55'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M10 40a30 30 0 0 1 60 0M20 40a20 20 0 0 1 40 0M30 40a10 10 0 0 1 20 0'/%3E%3Cpath d='M-40 20a40 40 0 0 1 80 0M-30 20a30 30 0 0 1 60 0M-20 20a20 20 0 0 1 40 0M-10 20a10 10 0 0 1 20 0M40 20a40 40 0 0 1 80 0M50 20a30 30 0 0 1 60 0M60 20a20 20 0 0 1 40 0M70 20a10 10 0 0 1 20 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 40px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}
.sz-lochung::before {
  content: ''; position: absolute; left: 1.2vw; top: 0; bottom: 0; width: max(14px, 2.6vmin);
  background: radial-gradient(circle closest-side, #e9ecef 82%, #ced4da 86%, transparent 92%) center / 100% 33.3% repeat-y;
}
.sz-lochung::after { content: ''; position: absolute; top: 0; bottom: 0; left: max(34px, 6vw); width: 2px; background: #ff8787; }
.sz-strahlen::before {
  content: ''; position: absolute; inset: -10%; animation: sz-rays 9s ease-in-out infinite alternate;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .07) 0 3vw, transparent 3vw 9vw);
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%);
}
.sz-spin { transform-box: view-box; transform-origin: 50% 50%; animation: sz-spin 90s linear infinite; }
.sz-fisch svg { animation: sz-swim 16s ease-in-out infinite alternate; }
.sz-wave, .sz-wave2 { transform-box: fill-box; transform-origin: 50% 100%; animation: sz-sway 5s ease-in-out infinite alternate; }
.sz-wave2 { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes sz-rays { from { transform: translateX(-2vw) skewX(-4deg); } to { transform: translateX(2vw) skewX(4deg); } }
@keyframes sz-spin { to { transform: rotate(360deg); } }
@keyframes sz-swim { to { transform: translateX(var(--swim, 10vw)); } }
@keyframes sz-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
body.szene-still .szene-bg *, body.szene-still .szene-bg::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .szene-bg *, .szene-bg::before { animation: none !important; } }

/* Gemeinsame Gestaltung */
body.szene { --card: rgba(255, 255, 255, .92); --card-fg: #1e2226; }
body.szene .question .q-text, body.szene .ready .q-big { background: var(--card); color: var(--card-fg); border-radius: 18px; padding: .3em .8em; box-shadow: 0 .25em 1em rgba(0, 0, 0, .15); }
body.szene .q-text-big { flex: 1; }
body.szene .answer { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .22); background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); border-radius: 14px; }
body.szene .answer .shape { background: #fff; }
body.szene .answer.ans-a .shape { color: var(--ans-a); }
body.szene .answer.ans-b .shape { color: var(--ans-b); }
body.szene .answer.ans-c .shape { color: var(--ans-c); }
body.szene .answer.ans-d .shape { color: var(--ans-d); }
body.szene .choose .q-top { background: var(--card); color: var(--card-fg); border-radius: 16px; padding: 10px 12px 10px 14px; }
body.szene .choose .q-text { font-weight: 800; }
body.szene .p-timer .ring-track { stroke: rgba(0, 0, 0, .1); }
body.szene .p-timer .timer-ring span { color: var(--card-fg); }

/* Japan */
body.stil-japan {
  --font-display: 'Zen Maru', Nunito, sans-serif; --fg: #2a2320; --fg-muted: #6b5d55; --soft: rgba(42, 35, 32, .08); --controls-bg: rgba(255, 250, 243, .92);
  --ring: #c0392b; --card-fg: #2a2320; --ans-a: #445755; --ans-b: #73584a; --ans-c: #523854; --ans-d: #394c73; /* Farbsatz Tusche */
  background: #f7efe3;
}
body.stil-japan .question .q-text { border: 2px solid rgba(192, 57, 43, .25); box-shadow: none; border-radius: 8px; }
body.stil-japan .answer { border-radius: 8px; }

/* Jahreszeiten */
body.stil-fruehling {
  --fg: #213a2a; --fg-muted: #4f6b57; --soft: rgba(33, 58, 42, .08); --controls-bg: rgba(255, 255, 255, .85);
  --ring: #3f9b4f; --card-fg: #213a2a; --ans-a: #48eadc; --ans-b: #fed2bb; --ans-c: #f78bff; --ans-d: #acc7fe; /* Farbsatz Blüte */
  background: linear-gradient(#cfeaf7, #eef8e6 60%, #dff0cf) fixed #eef8e6;
}
body.stil-sommer {
  --fg: #3b2a12; --fg-muted: #6b5530; --soft: rgba(59, 42, 18, .08); --controls-bg: rgba(255, 255, 255, .85);
  --ring: #e8590c; --card-fg: #3b2a12; --ans-a: #18cfc2; --ans-b: #feac80; --ans-c: #df6ce8; --ans-d: #85abfe; /* Farbsatz Sonne */
  background: linear-gradient(#ffd98a, #ffeec4 45%, #bfe9f0 75%, #8fd3e3) fixed #ffeec4;
}
body.stil-herbst {
  --fg: #fff4e6; --fg-muted: #e9cfb4; --soft: rgba(255, 255, 255, .14); --controls-bg: rgba(0, 0, 0, .3);
  --ring: #f59f00; --card: rgba(255, 248, 240, .95); --card-fg: #3b2414; --ans-a: #546c69; --ans-b: #8b6b5b; --ans-c: #68496a; --ans-d: #4c5f88; /* Farbsatz Laub */
  background: radial-gradient(120% 90% at 50% 0%, #7a3b1d, #4a2412 60%, #2e170c) fixed #4a2412;
}
body.stil-winter {
  --fg: #eef6ff; --fg-muted: #b9cde3; --soft: rgba(255, 255, 255, .14); --controls-bg: rgba(0, 0, 0, .3);
  --ring: #a5d8ff; --card-fg: #12263f; --ans-a: #b0d8d2; --ans-b: #e7d9d2; --ans-c: #d0aed2; --ans-d: #bec7d9; /* Farbsatz Eis */
  background: linear-gradient(#0b1d33, #1b3a5c 70%, #2c5175) fixed #1b3a5c;
}

/* Helle Farbsätze (Blüte, Sonne, Eis): dunkle Schrift, Buchstabenfeld dunkel mit weißem Buchstaben */
body.stil-fruehling .answer, body.stil-sommer .answer, body.stil-winter .answer, body.stil-fruehling .order-item, body.stil-sommer .order-item, body.stil-winter .order-item, body.stil-fruehling .order-chip, body.stil-sommer .order-chip, body.stil-winter .order-chip, body.stil-fruehling .bar-label, body.stil-sommer .bar-label, body.stil-winter .bar-label { color: #1e2226; }
body.stil-fruehling .answer .shape, body.stil-sommer .answer .shape, body.stil-winter .answer .shape { background: #1e2226; }
body.stil-fruehling .answer.ans-a .shape, body.stil-fruehling .answer.ans-b .shape, body.stil-fruehling .answer.ans-c .shape, body.stil-fruehling .answer.ans-d .shape, body.stil-sommer .answer.ans-a .shape, body.stil-sommer .answer.ans-b .shape, body.stil-sommer .answer.ans-c .shape, body.stil-sommer .answer.ans-d .shape, body.stil-winter .answer.ans-a .shape, body.stil-winter .answer.ans-b .shape, body.stil-winter .answer.ans-c .shape, body.stil-winter .answer.ans-d .shape { color: #fff; }
body.stil-fruehling .answer .tick, body.stil-sommer .answer .tick, body.stil-winter .answer .tick, body.stil-fruehling .chosen, body.stil-sommer .chosen, body.stil-winter .chosen { color: #1e2226; }

/* Tafel: Kreide-Rahmen statt gefüllter Kacheln, in den leuchtenden Tönen der Kernpalette */
body.stil-tafel {
  --font-display: 'Patrick Hand', Nunito, sans-serif; --fg: #f1f3ea; --fg-muted: #c3cdbf; --soft: rgba(255, 255, 255, .12); --controls-bg: rgba(0, 0, 0, .28);
  --ring: #fbfbf4; --card: transparent; --card-fg: #fbfbf4; --controls-bg: rgba(20, 32, 24, .75); --ans-a: #0f766e; --ans-b: #b45309; --ans-c: #86198f; --ans-d: #1d4ed8;
  background: radial-gradient(60% 50% at 30% 30%, rgba(255, 255, 255, .06), transparent 70%), radial-gradient(50% 40% at 75% 65%, rgba(255, 255, 255, .05), transparent 70%), #2f4a36;
}
body.stil-tafel .question .q-text, body.stil-tafel .ready .q-big { box-shadow: none; font-weight: 400; }
body.stil-tafel .q-text-big { font-size: 4.2em; }
body.stil-tafel .answer { box-shadow: none; background-image: none; border: .12em solid; border-radius: 6px; font-family: 'Patrick Hand', Nunito, sans-serif; font-weight: 400; color: #fbfbf4; }
body.stil-tafel .answer .shape { background: transparent; border: .1em solid currentColor; border-radius: 6px; }
body.stil-tafel .answer.ans-a { background: rgba(45, 212, 191, .18); border-color: #2dd4bf; } body.stil-tafel .answer.ans-a .shape { color: #2dd4bf; }
body.stil-tafel .answer.ans-b { background: rgba(251, 146, 60, .18); border-color: #fb923c; } body.stil-tafel .answer.ans-b .shape { color: #fb923c; }
body.stil-tafel .answer.ans-c { background: rgba(232, 121, 249, .18); border-color: #e879f9; } body.stil-tafel .answer.ans-c .shape { color: #e879f9; }
body.stil-tafel .answer.ans-d { background: rgba(96, 165, 250, .18); border-color: #60a5fa; } body.stil-tafel .answer.ans-d .shape { color: #60a5fa; }
body.stil-tafel .choose .q-top { background: rgba(0, 0, 0, .15); }
body.stil-tafel .choose .q-text { font-family: 'Patrick Hand', Nunito, sans-serif; font-weight: 400; font-size: 1.4rem; }
body.stil-tafel .p-timer .ring-track { stroke: rgba(255, 255, 255, .15); }

/* Karopapier: Heft mit Textmarker, Kacheln in den zarten Tönen der Kernpalette */
body.stil-karo {
  --font-display: 'Patrick Hand', Nunito, sans-serif; --fg: #1f2a44; --fg-muted: #4d5a78; --soft: rgba(31, 42, 68, .07); --controls-bg: rgba(255, 255, 255, .9);
  --ring: #1c7ed6; --card: transparent; --card-fg: #1f2a44; --ans-a: #ccf3ee; --ans-b: #ffe2c6; --ans-c: #f6d4fb; --ans-d: #d3e2ff;
  background-color: #fdfdfb;
  background-image: linear-gradient(rgba(28, 126, 214, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 126, 214, .16) 1px, transparent 1px);
  background-size: 22px 22px; background-attachment: fixed;
}
body.stil-karo .ans-a, body.stil-karo .ans-b, body.stil-karo .ans-c, body.stil-karo .ans-d { color: #1f2a44; }
body.stil-karo .question .q-text, body.stil-karo .ready .q-big { box-shadow: none; font-weight: 400; }
body.stil-karo .q-text-big { font-size: 4.2em; }
body.stil-karo .answer { box-shadow: none; background-image: none; border-radius: 3px; }
body.stil-karo .answer .shape { background: #1f2a44; border-radius: 4px; }
body.stil-karo .answer.ans-a .shape, body.stil-karo .answer.ans-b .shape, body.stil-karo .answer.ans-c .shape, body.stil-karo .answer.ans-d .shape { color: #fff; }
body.stil-karo .tiles .answer:nth-child(odd) { transform: rotate(-.4deg); }
body.stil-karo .tiles .answer:nth-child(even) { transform: rotate(.5deg); }
body.stil-karo .host-app > section, body.stil-karo .player-app { padding-left: max(46px, 7.5vw); }
body.stil-karo .choose .q-top { background: rgba(255, 255, 255, .7); }
body.stil-karo .choose .q-text { font-family: 'Patrick Hand', Nunito, sans-serif; font-weight: 400; font-size: 1.4rem; }
body.stil-karo .answer .tick, body.stil-karo .chosen { color: #1f2a44; }

/* Weltraum */
body.stil-weltraum {
  --fg: #e7ecff; --fg-muted: #aab3dd; --soft: rgba(255, 255, 255, .12); --controls-bg: rgba(0, 0, 0, .35);
  --ring: #ffd43b; --card: rgba(20, 24, 58, .8); --card-fg: #f1f3ff; --ans-a: #026059; --ans-b: #974301; --ans-c: #6d0076; --ans-d: #0b36c0; /* Farbsatz Juwel */
  background: radial-gradient(80% 70% at 20% 10%, #2a2466 0%, transparent 60%), radial-gradient(70% 60% at 90% 90%, #3b1d5e 0%, transparent 60%), #0a0c22;
}
body.stil-weltraum .question .q-text, body.stil-weltraum .ready .q-big { border: 1px solid rgba(151, 117, 250, .5); box-shadow: 0 0 2em rgba(151, 117, 250, .25); }
body.stil-weltraum .p-timer .ring-track { stroke: rgba(255, 255, 255, .15); }

/* Meer */
body.stil-meer {
  --fg: #e6fbff; --fg-muted: #a9dbe5; --soft: rgba(255, 255, 255, .14); --controls-bg: rgba(0, 0, 0, .3);
  --ring: #66d9e8; --card-fg: #0b3a4f; --ans-a: #004b45; --ans-b: #7a3501; --ans-c: #520158; --ans-d: #0118a8; /* Farbsatz Tiefsee */
  background: linear-gradient(#0c8599 0%, #0b5f7a 45%, #073b56 100%) fixed #0b5f7a;
}

/* Lösungswert (Schätz- und Eintippfragen) auf hellem Grund: dunkleres Grün */
body.stil-hell .big-value, body.stil-japan .big-value, body.stil-fruehling .big-value, body.stil-sommer .big-value, body.stil-karo .big-value { color: var(--brand-strong); }