/* CHAOS / The knowledge race. Presentation layer shared by cloud and LAN. */
@font-face { font-family: 'DM Sans'; src: url('/fonts/DMSans-Variable.ttf') format('truetype'); font-style: normal; font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root, body[data-ansicht=beamer] {
  color-scheme: dark;
  --papier: #0b0d12; --karte: #14171f; --kontur: #2b303b;
  --text: #f5f6fa; --gedimmt: #a0a8b9; --dunkel: #090b10;
  --gelb: #d5ff3f; --blau: #d5ff3f; --gruen: #8febaa; --rot: #ff8793; --lila: #b5a0ff;
  --schrift: 'DM Sans', 'Segoe UI', sans-serif;
  --titel: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --mono: 'Cascadia Code', 'Consolas', monospace;
}
body { background: radial-gradient(ellipse at 85% 0, #25273866, transparent 50%), var(--papier); font-family: var(--schrift); font-size: 15px; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E"); z-index: -1; }
h1, h2, h3 { letter-spacing: -.015em; }
h1, .einstieg h2, .rennen-hero h2, .sieger-buehne h2, .warte-lobby h1, .volk-banner h2 { font-family: var(--titel); font-weight: 700; text-transform: uppercase; }
h1 { font-size: clamp(3rem, 5.5vw, 5.3rem); line-height: .98; }
h2 { font-size: 1.4rem; font-weight: 750; }
h3 { font-weight: 700; }
a { color: var(--text); }
button, a, input, textarea, select, summary { outline-offset: 5px; }
:is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--gelb); }
::selection { background: var(--gelb); color: #101309; }
.kopf { max-width: 1480px; min-height: 92px; padding: 22px 42px; border-bottom-color: #ffffff13; }
.titel { gap: 13px; }
.wortmarke { display: block; line-height: 1; }
.wortmarke .logo { display: block; height: 60px; width: auto; }
.unterzeile { font-size: .7rem; padding-left: 22px; margin-left: 10px; text-transform: uppercase; letter-spacing: .1em; }
.kopf-rechts { gap: 22px; }
.verbindung { font-size: .61rem; color: var(--gedimmt); }
.verbindung[data-online=true]::before { background: var(--gelb); box-shadow: 0 0 9px #d5ff3f60; }
body[data-angemeldet=false] .verbindung { visibility: hidden; }
.sprachwahl { border-radius: 5px; background: #ffffff04; }
.sprachwahl .sprach-knopf { color: var(--gedimmt); min-width: 32px; }
.sprachwahl .sprach-knopf.aktiv, body[data-ansicht=beamer] .sprach-knopf.aktiv { background: #343944; color: #fff; }
.container, .container.breit, body[data-ansicht=lehrer] .container, body[data-ansicht=schueler][data-angemeldet=false] .container { max-width: 1360px; padding: 28px 42px 64px; }
body[data-ansicht=schueler][data-angemeldet=true] .container, body[data-ansicht=auth] .container { max-width: 860px; }
.ablauf:empty { display: none; }
.ablauf { gap: 52px; padding: 20px; background: #ffffff02; font-size: .65rem; color: #8b93a4; border-bottom: 1px solid #ffffff0a; text-transform: uppercase; letter-spacing: .08em; }
.ablauf .aktuell { color: var(--gelb); }
.ablauf .aktuell b { color: #11140a; border-radius: 3px; }
.ablauf .erledigt { color: #a5bcb1; }
.rubrik { font-family: var(--schrift); font-size: .63rem; font-weight: 750; letter-spacing: .16em; color: var(--gedimmt); }
.hinweis { color: var(--gedimmt); line-height: 1.7; font-size: .82rem; }
.karte { border-radius: 10px; padding: 26px; border-color: #ffffff13; background: linear-gradient(145deg, #191d26, #12151c); box-shadow: 0 8px 24px #00000012; }
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.abschnitt-kopf .rubrik { margin-bottom: 8px; }
.abschnitt-kopf > .symbol { width: 27px; height: 27px; color: var(--gelb); }
button, .knopf-link { border-radius: 5px; min-height: 44px; font-size: .8rem; font-weight: 750; padding: 11px 17px; transition: transform .16s, background .16s, border-color .16s, box-shadow .16s; }
button { background: var(--gelb); color: #11150a; }
button:hover:not(:disabled), button.gruen:hover:not(:disabled) { background: #e4ff80; box-shadow: 0 4px 25px #c8f92b20; transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(1px); }
button.gruen { background: var(--gelb); color: #101409; border-color: var(--gelb); }
button.sekundaer, .knopf-link { background: #ffffff04; border-color: #ffffff25; color: var(--text); }
button.sekundaer:hover:not(:disabled), .knopf-link:hover { background: #ffffff0c; border-color: #ffffff55; box-shadow: none; }
button.gefahr { color: #ff99a1; border-color: #ff76872a; background: #ff65780b; }
button.gefahr:hover:not(:disabled) { background: #ff65781c; color: #ffb2b9; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.mini { font-size: .68rem; min-height: 34px; padding: 7px 10px; }
.knopf-link { text-decoration: none; gap: 10px; }
input, textarea, select { background: #0e1118; border: 1px solid #333948; border-radius: 5px; color: var(--text); font-size: .88rem; min-height: 48px; padding: 13px; }
input:focus, textarea:focus, select:focus { background: #10141b; outline: 2px solid var(--gelb); border-color: transparent; }
input::placeholder, textarea::placeholder { color: #81899a; }
input[type=checkbox], input[type=radio], .haken input, .antwort-zeile input[type=radio] { accent-color: var(--gelb); }
label { font-size: .74rem; color: #c9cdd8; margin-top: 20px; }
.haken { font-size: .76rem; line-height: 1.5; }
.pille { color: #ccd3e2; background: #252b36; border: 1px solid #ffffff0b; font-size: .64rem; text-transform: uppercase; letter-spacing: .055em; padding: 6px 10px; }
.pille.gruen { color: #a2efb5; background: #254132; }
.pille.rot { background: #462a35; color: #ffabba; }
.pille.gelb { color: #162000; background: var(--gelb); }
.fehler:not(:empty) { background: #4d232d; color: #ffb7c0; padding: 12px 16px; border-radius: 5px; }
.einstieg { grid-template-columns: 1.5fr 1fr; min-height: 570px; border-color: #ffffff20; border-radius: 12px; margin: 16px 0 0; box-shadow: 0 30px 70px #0004; }
.einstieg-bild { isolation: isolate; padding: 39px 38px 25px; background: #0a1016; min-height: 540px; }
.arena-kunst { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% center; z-index: -2; }
.einstieg-bild::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #080c1280 0, #080c1220 55%, #080c12e8 100%), linear-gradient(90deg, #080c1290, transparent 85%); z-index: -1; }
.hero-inhalt { position: relative; }
.hero-inhalt .rubrik { color: #d5ff3f; display: flex; align-items: center; gap: 9px; font-size: .6rem; }
.signal-punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 11px #d5ff3f70; flex-shrink: 0; margin-right: 6px; }
.einstieg-bild h1 { font-size: clamp(3.6rem, 6.8vw, 6.5rem); line-height: .9; letter-spacing: -.025em; max-width: none; }
.einstieg-bild h1 em { font-style: normal; display: block; color: var(--gelb); }
.hero-inhalt > p { max-width: 325px; font-size: .8rem; line-height: 1.65; color: #c5cbd6; margin-top: 22px; }
.einstieg-fakten { margin-top: auto; border-color: #ffffff35; padding-top: 18px; color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.einstieg-fakten > span { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.einstieg-fakten small { grid-column: 1/-1; color: var(--gelb); font: .62rem var(--mono); }
.einstieg-fakten b { font: 650 .67rem/1.4 var(--schrift); margin-left: 0; color: #edf0f7; }
.einstieg-fakten .symbol { width: 16px; height: 16px; color: #b1bacb; }
.einstieg-formular { padding: 46px 38px; background: radial-gradient(ellipse at 110% 0, #d5ff3f0e, transparent 60%), #171b23; }
.einstieg-formular h2 { font-size: clamp(2.5rem, 3.5vw, 3.6rem); line-height: 1; margin: 0 0 19px; }
.einstieg-formular .rubrik { color: var(--gelb); margin-bottom: 15px; }
.einstieg-formular .hinweis { font-size: .84rem; }
.einstieg-formular button { margin-top: 28px; min-height: 53px; text-align: left; }
.einstieg-formular button::after { content: '↗'; font-size: 1.2rem; margin-left: auto; }
.einstieg-formular button:has(svg)::after { content: none; }
.einstieg-formular .fussnote { font-size: .68rem; line-height: 1.7; color: #acb4c5; }
.zugang-symbol { display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid #d5ff3f45; background: #d5ff3f0c; color: var(--gelb); border-radius: 9px; margin-bottom: 27px; transform: rotate(-5deg); }
.zugang-symbol .symbol { width: 24px; height: 24px; transform: rotate(5deg); }
.zugang-fuss { border-top: 1px solid #ffffff12; padding-top: 21px; margin-top: 30px; display: flex; align-items: center; gap: 9px; font: .55rem/1.6 var(--mono); letter-spacing: .025em; color: #8992a5; }
.zugang-fuss .symbol { width: 16px; height: 16px; }
.liga-teams { margin-top: 32px; }
.liga-teams > .rubrik { text-align: center; color: #7f899d; font-size: .57rem; }
.liga-teams > div:last-child { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #ffffff12; border-radius: 7px; }
.liga-teams > div > span { display: flex; align-items: center; gap: 6px; padding: 18px 15px; border-right: 1px solid #ffffff12; }
.liga-teams > div > span:last-child { border-right: 0; }
.liga-teams small { font: .5rem var(--mono); color: #798294; margin-right: 4px; }
.liga-teams b { font-size: .7rem; font-weight: 600; }
[data-team=feen], [data-volk=feen] { --team: #72e6b5; }
[data-team=orks], [data-volk=orks] { --team: #ffae72; }
[data-team=roboter], [data-volk=roboter] { --team: #79b8ff; }
[data-team=magier], [data-volk=magier] { --team: #be9aff; }
[data-team=monster], [data-volk=monster] { --team: #7be5ee; }
[data-team=dinos], [data-volk=dinos] { --team: #efd080; }
[data-team] .wappen, .team-pille { color: var(--team, var(--gelb)); }
.wolken-kopf { margin: 8px 0 24px; gap: 18px; }
.wolken-kopf h1 { font-size: clamp(2.8rem, 4.6vw, 4.5rem); margin: 6px 0; }
.wolken-kopf > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.wolken-kopf .rubrik { margin-bottom: 8px; }
.wolken-kopf > div > a { font-size: .68rem; color: var(--gedimmt); }
.wolken-kopf > button { align-self: start; }
.wolken-kopf .knopf-link { margin: 12px 0 0; }
.rennen-hero { min-height: 230px; overflow: hidden; position: relative; display: flex; align-items: center; border: 1px solid #ffffff20; border-radius: 10px; padding: 30px; background: linear-gradient(90deg, #11151bf5 2%, #11151b80 60%, #11151b20), url('/images/chaos-arena.webp') 60% 59%/cover; }
.rennen-hero h2 { max-width: 550px; font-size: clamp(2.7rem, 4.8vw, 4.5rem); line-height: .98; color: #fff; }
.rennen-hero .rubrik { color: var(--gelb); font-size: .58rem; }
.rennen-hero p { color: #c3cbd9; font-size: .76rem; margin-top: 15px; }
.rennen-hero .knopf-link { background: var(--gelb); color: #11150a; border-color: var(--gelb); margin-top: 18px; }
.hero-startnummer { position: absolute; right: 28px; bottom: 0; font: italic 700 12rem/.9 var(--titel); color: #d5ff3f12; pointer-events: none; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 27px; gap: 14px; }
.kennzahl { padding: 20px 24px; display: flex; gap: 17px; align-items: center; border: 1px solid #ffffff12; border-radius: 8px; background: #151922; }
.kennzahl > .symbol { width: 23px; height: 23px; color: var(--gelb); }
.kennzahl strong { display: block; font: 700 2.1rem/1 var(--titel); }
.kennzahl span { display: block; margin-top: 5px; color: var(--gedimmt); font-size: .65rem; }
.wolken-tabs { border-bottom: 1px solid var(--kontur); gap: 25px; margin-bottom: 15px; }
.wolken-tabs button, .wolken-tabs button.gruen { background: none; padding: 15px 2px; border: 0; margin: 0; border-radius: 0; border-bottom: 2px solid transparent; color: var(--gedimmt); }
.wolken-tabs button.gruen { border-bottom-color: var(--gelb); color: var(--gelb); }
.wolken-tabs button:hover:not(:disabled) { background: none; transform: none; box-shadow: none; color: #fff; }
.wolken-raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; }
.wolken-raster aside.karte { top: 18px; }
.modus-auswahl { border: 0; margin: 23px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.modus-auswahl legend { font-size: .74rem; font-weight: 650; color: #c9cdd8; margin-bottom: 10px; }
.modus-karte { position: relative; display: flex; flex-direction: column; border: 1px solid #343b4a; border-radius: 6px; padding: 15px 12px; margin: 0; cursor: pointer; background: #10141b; transition: border-color .15s, background .15s; }
.modus-karte input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.modus-karte:focus-within { outline: 2px solid var(--gelb); outline-offset: 3px; }
.modus-karte:has(input:checked) { border-color: var(--gelb); background: #d5ff3f09; }
.modus-karte:hover { border-color: #768151; }
.modus-symbol { display: inline-flex; margin-bottom: 13px; color: #a0acc2; }
.modus-karte:has(input:checked) .modus-symbol { color: var(--gelb); }
.modus-karte strong { font-size: .72rem; line-height: 1.5; color: #edf0f8; }
.modus-karte small { font-size: .63rem; font-weight: 400; line-height: 1.5; color: #8e9aaf; margin-top: 7px; }
.modus-haken { display: none; position: absolute; top: 13px; right: 9px; color: var(--gelb); }
.modus-haken .symbol { width: 14px; height: 14px; }
.modus-karte:has(input:checked) .modus-haken { display: block; }
#neue-sitzung > button[type=submit] { min-width: 180px; }
.bibliothek-karte h2 { font-size: 1.3rem; }
.bibliothek-zeile, .sitzung-zeile { border-color: #ffffff10; padding: 16px 0; font-size: .83rem; }
.sitzung-zeile:hover { background: #ffffff02; }
.bibliothek-zeile small, .sitzung-zeile small { font-size: .64rem; color: #8f9aad; }
.bibliothek-zeile > .haken span { font-size: .75rem; }
.bibliothek-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.bibliothek-reiter button { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.bibliothek-reiter b { font-family: var(--mono); font-size: .7rem; }
.bibliothek-zeile:has(.bibliothek-frage) { flex-direction: column; align-items: stretch; gap: 13px; padding: 20px 0; }
.bibliothek-frage { min-width: 0; }
.bibliothek-frage > strong, .bibliothek-frage .haken { font-size: .82rem; line-height: 1.6; overflow-wrap: anywhere; }
.bibliothek-metadaten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0 0; }
.bibliothek-metadaten .pille { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.bibliothek-metadaten small { margin: 0; font-size: .66rem; }
.bibliothek-aktionen { display: flex; flex-wrap: wrap; gap: 7px; }
.bibliothek-aktionen .mini { min-height: 36px; margin: 0; }
#fragequelle { padding: 15px; margin: 16px 0; background: #d5ff3f06; border: 1px solid #d5ff3f35; border-radius: 6px; }
#fragequelle[hidden] { display: none; }
#fragequelle .hinweis { margin-bottom: 0; }
.leerstand { text-align: center; border: 1px dashed #ffffff20; border-radius: 7px; padding: 28px 20px; margin: 20px 0 4px; }
.leerstand > .symbol { color: var(--gelb); width: 28px; height: 28px; margin-bottom: 17px; }
.leerstand h3 { font-size: .95rem; margin-bottom: 8px; }
.leerstand .hinweis { font-size: .73rem; }
.wolken-qr { align-items: center; gap: 20px; }
.wolken-qr img { background: #fff; padding: 9px; border-radius: 7px; width: 150px; height: 150px; flex-basis: 150px; }
.wolken-qr a { color: var(--gelb); font-size: .66rem; }
.wolken-qr h3 { font-size: 1.05rem; }
.wolken-qr .hinweis { font-size: .72rem; }
.wolken-pause { background: #2b2517; border-color: #756032; border-left-color: #ffd370; color: #f2d691; }
.volk-banner { background: radial-gradient(ellipse at 80% 90%, color-mix(in srgb, var(--team, #d5ff3f) 17%, transparent), transparent 70%), #151923; border: 1px solid color-mix(in srgb, var(--team, #d5ff3f) 35%, transparent); min-height: 205px; padding: 28px; }
.volk-banner::before { content: '//'; position: absolute; right: 22%; bottom: -50px; color: #ffffff04; font: italic 700 17rem var(--titel); }
.volk-banner::after { border-radius: 0; transform: rotate(-15deg); border-color: #ffffff10; }
.volk-banner h2 { font-size: 3rem; color: var(--team, var(--gelb)); }
.volk-banner .rubrik { font-size: .6rem; color: #9eaec1; }
.zug-bild { max-height: 180px; filter: drop-shadow(0 15px 18px #0008); }
.fragen-labor h2 { font-size: 1.65rem; }
.fragen-labor > .rubrik { color: var(--gelb); }
.labor-fortschritt { margin: 25px 0; }
.labor-fortschritt > span { font: .62rem var(--mono); color: #bec6d7; }
.labor-fortschritt > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 10px; }
.labor-fortschritt i { height: 5px; background: #303744; transform: skew(-20deg); }
.labor-fortschritt i.fertig { background: var(--gelb); box-shadow: 0 0 8px #d5ff3f25; }
.frage-slot { background: #10141b; border-color: #2f3643; padding: 16px; border-radius: 6px; }
.frage-slot.fertig { background: #b3dc4505; border-color: #d5ff3f25; }
.slot-kopf { font-size: .8rem; gap: 8px; }
.slot-kopf > span { display: flex; align-items: center; gap: 15px; }
.slot-nummer { font: 700 1.4rem var(--titel); color: #7b879a; }
.fertig .slot-nummer { color: var(--gelb); }
.schreib-fortschritt { accent-color: var(--gelb); }
.schreib-fortschritt::-webkit-progress-bar { background: #2c3340; }
.schreib-fortschritt::-webkit-progress-value { background: var(--gelb); }
.warte-lobby { padding: 40px 28px; min-height: 330px; background: radial-gradient(ellipse at 50% 20%, #d5ff3f08, transparent 65%), var(--karte); }
.warte-lobby h1 { font-size: clamp(2.7rem, 5vw, 4rem); }
.warte-lobby h2 { font: 700 2.3rem var(--titel); text-transform: uppercase; margin: 20px 0; }
.warte-lobby .rubrik { color: var(--gelb); }
.warte-radar { position: relative; margin: 15px auto 35px; width: 68px; height: 68px; display: grid; place-items: center; color: var(--gelb); border: 1px solid #d5ff3f60; border-radius: 50%; background: #d5ff3f08; }
.warte-radar::before { content: ''; position: absolute; inset: -13px; border: 1px solid #d5ff3f28; border-radius: 50%; animation: radar 3s ease-out infinite; }
.warte-radar .symbol { width: 27px; height: 27px; }
.spieler-pass { border: 1px solid #ffffff20; border-radius: 5px; margin: 24px auto; padding: 13px 24px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; font-size: 1.15rem; font-weight: 700; }
.spieler-pass span { display: block; color: var(--gedimmt); font-size: .7rem; font-weight: 400; margin-top: 4px; }
.duell-arena { border-top: 3px solid var(--gelb); padding: 27px; }
.duell-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.duell-status .rubrik { color: var(--gelb); margin: 0; }
.gegner-zeile, .ticker-gegner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gegner-zeile { padding: 17px 0; border-bottom: 1px solid #ffffff15; margin-bottom: 24px; font-size: .8rem; }
.gegner-zeile span { flex: 1; overflow-wrap: anywhere; }
.gegner-zeile span:last-child { text-align: right; }
.gegner-zeile b, .ticker-gegner > b { font: italic 700 1.2rem var(--titel); color: var(--gelb); }
.duell-arena .wolken-kopf { align-items: start; gap: 20px; margin-bottom: 28px; }
.duell-arena .wolken-kopf h2 { font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.4; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wolken-uhr { width: 72px; height: 72px; flex: 0 0 72px; border: 3px solid var(--gelb); border-radius: 50%; display: grid; place-items: center; color: var(--gelb); font: 700 1.8rem var(--titel); background: #d5ff3f06; }
.wolken-uhr[data-knapp=true] { color: #ff8793; border-color: #ff8793; background: #ff87930b; }
.wolken-antworten { gap: 12px; }
.wolken-antworten button { border: 1px solid #3a4354; background: #1a202c; min-height: 95px; color: #eff2fa; font-weight: 600; font-size: .84rem; border-radius: 6px; padding: 17px; gap: 14px; }
.wolken-antworten button b { display: grid; place-items: center; width: 29px; height: 32px; border-radius: 3px; color: #12150b; font: 700 1.05rem var(--titel); opacity: 1; background: var(--antwort, #d5ff3f); flex-shrink: 0; }
.wolken-antworten button:nth-child(2) { --antwort: #aab5ff; }
.wolken-antworten button:nth-child(3) { --antwort: #ffb992; }
.wolken-antworten button:nth-child(4) { --antwort: #8ce0dd; }
.wolken-antworten button:hover:not(:disabled) { background: #28303c; border-color: var(--antwort, var(--gelb)); }
.wolken-antworten button:disabled { opacity: .65; }
.wolken-antworten button.richtig { background: #24482f; border: 2px solid #94ecab; opacity: 1; color: #deffe6; }
.wolken-antworten button.falsch { background: #482830; border: 2px solid #ff8793; opacity: 1; color: #ffd2d8; }
.wolken-antworten button .symbol { margin-left: auto; }
.duell-feedback { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #ffffff15; background: #ffffff03; border-radius: 6px; margin-bottom: 16px; }
.duell-feedback > .symbol { color: var(--gelb); flex-shrink: 0; }
.duell-feedback strong { display: block; font: 700 1.65rem var(--titel); letter-spacing: .01em; }
.duell-feedback p { font-size: .74rem; color: #b1bdce; margin-top: 3px; }
.duell-feedback[data-ergebnis=richtig] { border-color: #8febaa50; background: #8febaa0c; }
.duell-feedback[data-ergebnis=richtig] strong { color: #a2eeb6; }
.duell-feedback[data-ergebnis=falsch] strong { color: #ffb1b9; }
.antwort-knopf { color: var(--text); background: #191f2a; border-color: #394353; }
.antwort-knopf:hover:not(:disabled) { background: #2a3541; border-color: var(--gelb); }
.antwort-knopf.gewaehlt { background: #313c1d; border-color: var(--gelb); }
.antwort-knopf.richtig { background: #24482f; color: #dcffe4; border-color: #94ecab; }
.antwort-knopf.falsch { background: #482830; color: #ffd2d8; border-color: #ff8793; }
.antwort-buchstabe { background: #303a4d; border-color: #53617a; color: #fff; }
.antwort-knopf.richtig .antwort-buchstabe { background: #356344; color: #fff; border-color: #8febaa; }
.antwort-knopf.falsch .antwort-buchstabe { background: #6b3340; color: #fff; border-color: #ff8793; }
.countdown { background: #252f18; border-color: var(--gelb); color: var(--gelb); }
.countdown.knapp { background: #482830; color: var(--rot); }
.warte-animation, .ergebnis-text { color: #e8edf8; background: #252d3b; }
.beamer-einstieg { grid-template-columns: 1.55fr 1fr; gap: 24px; }
.beamer-einstieg .einstieg-bild { border-radius: 10px; min-height: 400px; padding: 30px; }
.beamer-einstieg .einstieg-bild h1 { font-size: clamp(3rem, 5.8vw, 5.5rem); }
.beamer-einstieg .einstieg-fakten { display: grid; }
.beamer-einstieg .wolken-qr { flex-direction: column; text-align: center; padding: 24px; margin: 0; }
.beamer-einstieg .wolken-qr img { width: 230px; height: 230px; flex-basis: auto; }
.beamer-einstieg .wolken-qr h3 { font: 700 1.9rem var(--titel); text-transform: uppercase; }
.teilnehmer span { background: #ffffff05; border-color: #ffffff1a; padding: 8px 14px; font-size: .8rem; border-radius: 4px; }
.renn-uebersicht { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, .9fr); gap: 24px; align-items: start; }
.renn-uebersicht > * { min-width: 0; }
.rennen-titel { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 5px 0 17px; }
.rennen-titel .rubrik { margin: 0; color: var(--gelb); }
.rennen-titel > span:last-child { font-size: .66rem; color: var(--gedimmt); }
.strecke { margin: 15px 0; }
.bahn, body[data-ansicht=beamer] .bahn { height: 114px; position: relative; background: linear-gradient(90deg, #181e2b, #10141d); border: 1px solid #303b4b; border-left: 3px solid var(--team, #d5ff3f); border-radius: 7px; margin: 11px 0; overflow: hidden; }
.bahn::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #ffffff05 calc(25% - 1px), #ffffff05 25%); }
body[data-phase=racing] .bahn .gleis { background-position: 0 0; animation: schienenfluss 3s linear infinite; }
.bahn[data-fuehrend=true] { border-color: var(--team); background: linear-gradient(90deg, color-mix(in srgb, var(--team) 10%, #111620), #111620); }
.bahn .gleis { height: 4px; bottom: 12px; border-color: var(--team, #d5ff3f); background: repeating-linear-gradient(90deg, transparent 0 20px, #667992 20px 22px); opacity: .3; }
.bahn .etikett, body[data-ansicht=beamer] .bahn .etikett { top: 9px; left: 11px; color: var(--team, #d5ff3f); font-size: .7rem; letter-spacing: .02em; }
.bahn .etikett .symbol { width: 15px; height: 15px; }
.bahn-rang { color: #8190a7; font: .66rem var(--mono); padding-right: 6px; }
.bahn .tacho, body[data-ansicht=beamer] .bahn .tacho { top: 12px; right: 18px; color: #bdc9db; font-size: .63rem; }
.bahn .zug, body[data-ansicht=beamer] .bahn .zug { bottom: -5px; }
.bahn .zug img, body[data-ansicht=beamer] .bahn .zug img { height: 91px; }
.ziel-linie { width: 8px; border: none; right: 7px; opacity: .3; background: repeating-conic-gradient(#c2cbd8 0% 25%, transparent 0% 50%) 0 0/8px 8px; }
.rangliste { margin-top: 0; padding: 20px; }
.rangliste .abschnitt-kopf { margin-bottom: 10px; }
.rangliste h2 { font-size: 1.1rem; }
.rangliste .rubrik { font-size: .55rem; }
.rang-zeile { display: flex; gap: 11px; align-items: center; padding: 18px 0; border-bottom: 1px solid #ffffff0e; }
.rang-zeile:last-child { border-bottom: 0; }
.rang-nummer { font: 700 1.5rem var(--titel); color: #a2adbf; }
.rang-zeile > span:not(.wappen) { min-width: 0; flex: 1; }
.rang-zeile strong { color: var(--team); font-size: .76rem; display: block; }
.rang-zeile small { display: block; color: #8c98ac; font-size: .62rem; margin-top: 3px; overflow-wrap: anywhere; }
.rang-zeile .wappen { margin: 0; }
.rang-strecke { font: .7rem var(--mono); white-space: nowrap; }
.ticker, body[data-ansicht=beamer] .ticker { background: #10151e; border: 1px solid #303747; border-radius: 6px; }
.ticker-raster { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ticker-gegner strong { font-size: .77rem; overflow-wrap: anywhere; }
.ticker-gegner > b { font-size: .85rem; }
.tick { width: 17px; height: 6px; background: #465168; transform: skew(-15deg); }
.tick.richtig, .schuss-punkt.richtig { background: #9fea94; }
.tick.falsch, .schuss-punkt.falsch { background: #f38a99; }
.tick-punkte small { color: #b0bed5; margin-left: auto; font: .6rem var(--mono); }
.sieger-buehne { position: relative; isolation: isolate; overflow: hidden; padding: 25px 16px 18px; margin-bottom: 22px; border-radius: 10px; border: 1px solid #d5ff3f55; background: radial-gradient(ellipse at 50% 0, #d5ff3f23, transparent 75%), #171d19; text-align: center; }
.sieger-buehne::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(120deg, transparent 0 60px, #d5ff3f04 61px 62px, transparent 63px 90px); }
.sieger-buehne > .rubrik { color: var(--gelb); font-size: .58rem; }
.sieger-buehne > h2 { color: var(--gelb); font-size: clamp(2rem, 4vw, 3.5rem); }
.sieger-podium { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 10px; margin-top: 25px; }
.sieger-team { flex: 1; min-width: 85px; padding: 18px 8px; border: 1px solid #ffffff20; background: #ffffff03; border-radius: 5px; }
.sieger-team[data-platz="1"] { order: 1; padding-top: 30px; border-color: #d5ff3f75; background: #d5ff3f09; }
.sieger-team[data-platz="2"] { order: 0; }
.sieger-team[data-platz="3"] { order: 2; }
.sieger-rang { color: var(--gelb); display: block; font: 700 1.7rem var(--titel); }
.sieger-rang .symbol { width: 31px; height: 31px; }
.sieger-team img { width: 100%; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 8px #0006); }
.sieger-team h3 { font-size: .78rem; color: var(--team); margin: 7px 0; }
.sieger-team strong { font: .7rem var(--mono); }
body[data-ansicht=beamer][data-phase=finished] .renn-uebersicht { grid-template-columns: 1fr 1.1fr; }
body[data-ansicht=beamer][data-phase=finished] .sieger-team img { height: 115px; }
.podest { background: #1e2730; border-color: #7c884d; color: #f0f3fb; }
.podest-platz { color: var(--gelb); }
table.uebersicht th, .ergebnis-tabelle th { color: #a8b5ca; }
.ergebnis-tabelle td { overflow-wrap: anywhere; max-width: 360px; }
table.uebersicht td, table.uebersicht th, .ergebnis-tabelle td, .ergebnis-tabelle th { border-color: #303846; }
.ergebnis-tabelle tr:nth-child(even) { background: #ffffff03; }
@keyframes radar { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.3); opacity: 0; } }
@keyframes schienenfluss { to { background-position: -220px 0; } }
@media (min-width: 851px) {
  body[data-ansicht=beamer] .kopf { min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
  body[data-ansicht=beamer] .ablauf { padding: 12px; }
  body[data-ansicht=beamer] .container { padding-top: 17px; }
  body[data-ansicht=beamer] .wolken-kopf { margin: 0 0 19px; }
  body[data-ansicht=beamer] .wolken-kopf h1 { font-size: clamp(2.3rem, 3.5vw, 3.6rem); }
  body[data-ansicht=beamer] .rennen-titel { margin-bottom: 8px; }
  body[data-ansicht=beamer] .strecke { margin: 8px 0; }
  body[data-ansicht=beamer] .bahn { height: clamp(62px, calc((100dvh - 260px) / 6 - 8px), 112px); margin: 8px 0; }
  body[data-ansicht=beamer] .bahn .zug img { height: clamp(50px, calc((100dvh - 390px) / 6), 88px); }
  body[data-ansicht=beamer] .bahn .zug { bottom: -10px; }
  body[data-ansicht=beamer] .bahn .etikett { top: 5px; }
  body[data-ansicht=beamer] .rang-zeile { padding: 12px 0; }
  body[data-ansicht=beamer] .rangliste h2 { font-size: 1.3rem; }
}
@media (min-width: 1500px) { body[data-ansicht=beamer] .container { max-width: 1560px; } }
@media (max-width: 1080px) {
  .container, .container.breit, body[data-ansicht=lehrer] .container, body[data-ansicht=schueler][data-angemeldet=false] .container { padding-left: 25px; padding-right: 25px; }
  .kopf { padding-left: 25px; padding-right: 25px; }
  .einstieg-formular { padding: 30px; }
  .einstieg-bild { padding: 30px; }
  .liga-teams > div > span { padding: 15px 9px; }
  .liga-teams small { display: none; }
  .modus-auswahl { grid-template-columns: 1fr; }
  .modus-karte { display: grid; grid-template-columns: 25px 1fr; column-gap: 10px; padding: 12px; }
  .modus-symbol { margin: 0; grid-row: 1/3; align-items: center; }
  .modus-karte small { margin-top: 3px; }
  .modus-haken { top: 10px; }
  .renn-uebersicht { gap: 16px; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); }
}
@media (max-width: 850px) {
  .wolken-raster { grid-template-columns: 1fr; gap: 0; }
  .wolken-raster aside.karte { position: static; }
  .modus-auswahl { grid-template-columns: repeat(3, 1fr); }
  .modus-karte { display: flex; }
  .modus-symbol { margin-bottom: 12px; }
  .renn-uebersicht, body[data-ansicht=beamer][data-phase=finished] .renn-uebersicht { grid-template-columns: 1fr; }
  .beamer-einstieg { grid-template-columns: 1.2fr 1fr; }
  .beamer-einstieg .wolken-qr img { width: 180px; height: 180px; }
  .beamer-einstieg .einstieg-bild h1 { font-size: 3.5rem; }
}
@media (max-width: 760px) {
  .kopf { min-height: 76px; padding: 18px 20px; }
  .unterzeile { display: none; }
  .kopf-rechts { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  .verbindung { display: block; font-size: .52rem; letter-spacing: .02em; }
  .wortmarke .logo { height: 44px; }
  .container, .container.breit, body[data-ansicht=lehrer] .container, body[data-ansicht=schueler][data-angemeldet=false] .container { padding: 18px 18px 40px; }
  .einstieg { grid-template-columns: 1fr; margin-top: 0; min-height: 0; }
  .einstieg-bild { min-height: 360px; padding: 25px; }
  .einstieg-bild h1 { font-size: clamp(3.8rem, 11vw, 5.7rem); }
  .hero-inhalt > p { max-width: 275px; font-size: .74rem; margin-top: 16px; }
  .arena-kunst { object-position: 50% 63%; }
  .einstieg-fakten { margin-top: auto; padding-top: 15px; gap: 12px; }
  .einstieg-fakten b { font-size: .59rem; }
  .einstieg-formular { padding: 27px; }
  body[data-ansicht=schueler] .einstieg-formular { order: -1; }
  .einstieg-formular h2 { font-size: 2.8rem; }
  .zugang-symbol { display: none; }
  .einstieg-formular button { margin-top: 23px; }
  .zugang-fuss { margin-top: 22px; padding-top: 18px; }
  .liga-teams { margin-top: 25px; }
  .liga-teams > div:last-child { grid-template-columns: repeat(3, 1fr); }
  .liga-teams > div > span { border-bottom: 1px solid #ffffff12; justify-content: center; padding: 14px 5px; }
  .liga-teams > div > span:nth-child(3n) { border-right: none; }
  .liga-teams > div > span:nth-child(n+4) { border-bottom: none; }
  .liga-teams b { font-size: .64rem; }
  .liga-teams .symbol { width: 15px; height: 15px; }
  .ablauf { gap: 17px; padding: 16px 8px; font-size: .58rem; letter-spacing: .02em; }
  .ablauf span { gap: 5px; }
  .ablauf .aktuell b { width: 20px; height: 20px; }
  .wolken-kopf { flex-wrap: wrap; gap: 10px; margin: 5px 0 20px; }
  .wolken-kopf h1 { font-size: 3rem; }
  .wolken-kopf .rubrik { font-size: .57rem; }
  .rennen-hero { padding: 24px; min-height: 230px; }
  .rennen-hero h2 { font-size: 3rem; max-width: 330px; }
  .rennen-hero p { font-size: .7rem; max-width: 245px; }
  .hero-startnummer { display: none; }
  .kennzahlen { gap: 7px; margin: 13px 0 22px; }
  .kennzahl { padding: 16px 12px; gap: 8px; align-items: start; }
  .kennzahl > .symbol { width: 16px; height: 16px; margin-top: 4px; }
  .kennzahl strong { font-size: 1.8rem; }
  .kennzahl span { font-size: .56rem; line-height: 1.4; }
  .karte { padding: 21px; }
  .wolken-raster { gap: 0; }
  .volk-banner { min-height: 165px; padding: 21px; }
  .volk-banner h2 { font-size: 2.4rem; }
  .zug-bild { max-height: 130px; max-width: 51%; }
  .fragen-labor h2 { font-size: 1.4rem; }
  .slot-kopf { font-size: .73rem; }
  .slot-kopf > span { gap: 10px; }
  .slot-nummer { font-size: 1.15rem; }
  .frage-slot { padding: 12px; }
  .duell-arena { padding: 20px; }
  .duell-arena .wolken-kopf { flex-wrap: nowrap; gap: 14px; }
  .duell-arena .wolken-kopf h2 { font-size: 1.3rem; }
  .wolken-uhr { width: 56px; height: 56px; flex-basis: 56px; font-size: 1.5rem; }
  .wolken-antworten { grid-template-columns: 1fr; gap: 9px; }
  .wolken-antworten button { min-height: 65px; padding: 13px; font-size: .83rem; }
  .wolken-antworten button b { width: 28px; height: 31px; }
  .gegner-zeile { margin-bottom: 18px; }
  .duell-feedback { padding: 13px; }
  .duell-feedback strong { font-size: 1.4rem; }
  .beamer-einstieg { grid-template-columns: 1fr; }
  .beamer-einstieg .einstieg-bild { display: none; }
  .beamer-einstieg .wolken-qr img { width: 230px; height: 230px; }
  .bahn .zug { width: 110px; }
  .bahn .zug img, body[data-ansicht=beamer] .bahn .zug img { height: 88px; }
  .bahn .tacho, body[data-ansicht=beamer] .bahn .tacho { font-size: .55rem; top: 13px; }
  .bahn .etikett, body[data-ansicht=beamer] .bahn .etikett { font-size: .62rem; }
  .bahn-rang { font-size: .56rem; }
  .rennen-titel > span:last-child { font-size: .56rem; }
  .sieger-team img { height: 82px; }
}
@media (max-width: 420px) {
  .modus-auswahl { grid-template-columns: 1fr; }
  .modus-karte { display: grid; grid-template-columns: 27px 1fr; }
  .modus-symbol { margin: 0; }
  .einstieg-bild { min-height: 340px; padding: 23px; }
  .einstieg-bild h1 { font-size: 3.7rem; }
  .einstieg-formular { padding: 24px; }
  .einstieg-fakten { gap: 8px; }
  .einstieg-fakten .symbol { display: none; }
  .kennzahl > .symbol { display: none; }
  .kennzahl { text-align: center; justify-content: center; }
  .sitzung-zeile { gap: 9px; }
}
.runden-ergebnis { border-top: 3px solid var(--gelb); }
.runden-kopf { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 21px; }
.runden-kopf h2 { font: 700 clamp(1.8rem, 3vw, 2.7rem)/1.05 var(--titel); text-transform: uppercase; margin: 7px 0 0; }
.runden-kopf > .symbol { color: var(--gelb); width: 31px; height: 31px; flex-shrink: 0; }
.runden-teams { margin: 0; padding: 0; list-style: none; }
.runden-team { display: grid; grid-template-columns: minmax(170px, 1.4fr) 3fr; gap: 16px; align-items: center; padding: 16px 12px; border-top: 1px solid var(--kontur); }
.runden-team[data-eigen=true] { background: #d5ff3f0b; box-shadow: inset 3px 0 var(--gelb); }
.runden-teamname { display: flex; align-items: center; gap: 11px; }
.runden-teamname .wappen { color: var(--team); flex-shrink: 0; }
.runden-teamname h3 { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.runden-eigen { color: var(--gelb); font-size: .55rem; font-weight: 800; letter-spacing: .09em; }
.runden-strafe { display: block; color: var(--rot); font-size: .61rem; margin-top: 4px; }
.runden-team dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.runden-team dt { color: var(--gedimmt); font-size: .63rem; margin-bottom: 4px; }
.runden-team dd { margin: 0; font: 700 1.1rem/1.3 var(--mono); }
.runden-team dd small { display: block; color: var(--gedimmt); font: 400 .64rem/1.5 var(--schrift); margin-top: 3px; }
.runden-weiter { margin: 17px 0 0; padding-top: 16px; border-top: 1px solid var(--kontur); color: var(--gedimmt); font-size: .8rem; }
.runden-weiter strong { color: var(--gelb); font-family: var(--mono); white-space: nowrap; }
@media (min-width: 851px) and (max-height: 800px) {
  body[data-ansicht=beamer] .runden-ergebnis { padding: 16px 24px; }
  body[data-ansicht=beamer] .runden-kopf { margin-bottom: 12px; }
  body[data-ansicht=beamer] .runden-kopf h2 { font-size: 1.8rem; }
  body[data-ansicht=beamer] .runden-team { padding: 5px 12px; }
  body[data-ansicht=beamer] .runden-team dt { font-size: .59rem; margin-bottom: 2px; }
  body[data-ansicht=beamer] .runden-team dd { font-size: 1rem; line-height: 1.2; }
  body[data-ansicht=beamer] .runden-team dd small { font-size: .6rem; line-height: 1.3; margin-top: 1px; }
  body[data-ansicht=beamer] .runden-weiter { margin-top: 10px; padding-top: 9px; }
}
@media (max-width: 640px) {
  .runden-team { grid-template-columns: 1fr; gap: 13px; padding: 16px 10px; }
  .runden-team dl { gap: 7px; }
  .runden-team dd { font-size: .92rem; }
  .runden-team dt, .runden-team dd small { font-size: .57rem; }
  .runden-kopf h2 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  :root, body[data-ansicht=beamer] { color-scheme: light; --text: #111; --gedimmt: #555; --karte: #fff; --kontur: #ccc; }
  body::before { display: none; }
  body, .karte { background: white !important; color: #111 !important; box-shadow: none; }
  .ergebnis-tabelle th { color: #111; }
  .kennzahlen, .rennen-hero, .liga-teams { display: none; }
}