/* Chaos-Bahn - editorial competition interface for upper-secondary classrooms. */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:root {
  --karte: #fff; --kontur: #d9ddd6; --text: #202c27; --gedimmt: #66716b;
  --blau: #253d32; --rot: #af433d; --gruen: #2b7158; --gelb: #d7f275; --lila: #74618f;
  --papier: #f3f4ee; --dunkel: #192a23; --mono: 'Cascadia Code', 'Consolas', monospace;
}
/* Teacher dashboard and cloud session controls share the classroom visual system. */
.wolken-kopf { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 20px 0; }
.wolken-kopf h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 8px 0; overflow-wrap: anywhere; }
.wolken-kopf .hinweis { margin-top: 10px; }
.wolken-tabs, .wolken-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.wolken-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: start; }
.wolken-raster > * { min-width: 0; }
.wolken-raster aside.karte { position: sticky; top: 20px; }
.wolken-raster .strecke { margin-top: 24px; }
.knopf-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--kontur); border-radius: 6px; text-decoration: none; margin-top: 12px; font-size: .87rem; font-weight: 600; }
.haken { display: flex; align-items: center; gap: 12px; font-weight: 400; }
.haken input { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; accent-color: var(--gruen); }
.bibliothek-zeile, .sitzung-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--kontur); padding: 15px 0; text-decoration: none; }
.bibliothek-zeile .haken { margin: 0; flex: 1; }
.bibliothek-zeile small, .sitzung-zeile small { display: block; font-size: .72rem; color: var(--gedimmt); margin-top: 4px; }
.bibliothek-zeile span, .sitzung-zeile span { overflow-wrap: anywhere; min-width: 0; }
.bibliothek-zeile button { flex-shrink: 0; }
#bibliothek-liste { max-height: 600px; overflow: auto; margin-top: 16px; }
.wolken-qr { display: flex; align-items: center; gap: 24px; }
.wolken-qr img { flex: 0 0 150px; width: 150px; height: 150px; border-radius: 8px; }
.wolken-qr a { overflow-wrap: anywhere; font-size: .75rem; }
.wolken-qr h3 { margin-bottom: 10px; }
.wolken-pause { background: #f0edda; border: 1px solid #d9cd8c; border-left: 4px solid #9b8033; border-radius: 6px; padding: 18px 24px; margin: 20px 0; }
.wolken-pause p { font-size: .85rem; margin-top: 6px; }
.wolken-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.wolken-antworten button { display: flex; align-items: center; justify-content: start; text-align: left; min-height: 85px; padding: 20px; margin: 0; }
.wolken-antworten b { font: 1rem var(--mono); opacity: .5; }
.wolken-antworten span { overflow-wrap: anywhere; }
.wolken-uhr { font: 1.4rem var(--mono); white-space: nowrap; }
.vorschlaege { margin-top: 16px; }
.team-wechsel { min-height: 34px; padding: 5px; font-size: .78rem; }
.tabellen-rahmen { overflow-x: auto; }
.ergebnis-tabelle { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ergebnis-tabelle th { text-align: left; white-space: nowrap; }
.ergebnis-tabelle td, .ergebnis-tabelle th { padding: 12px; vertical-align: top; border-bottom: 1px solid var(--kontur); }
details > summary { cursor: pointer; padding: 14px 0; }
@media (max-width: 850px) {
  .wolken-raster { grid-template-columns: 1fr; gap: 0; }
  .wolken-raster aside.karte { position: static; }
  .wolken-kopf { flex-wrap: wrap; gap: 8px; }
  .wolken-qr { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .wolken-antworten { grid-template-columns: 1fr; }
  .wolken-antworten button { min-height: 65px; }
  .sitzung-zeile { flex-wrap: wrap; }
}
@media print {
  .kopf, .ablauf, .druck-aus, #meldung { display: none !important; }
  body, .karte { background: white !important; color: black !important; }
  .container, body[data-ansicht=lehrer] .container { max-width: none; padding: 0; }
  .tabellen-rahmen { overflow: visible; border: 0; padding: 0; }
  .ergebnis-tabelle { font-size: 9pt; }
  .ergebnis-tabelle tr { break-inside: avoid; }
  @page { size: landscape; margin: 12mm; }
}
html { min-height: 100%; }
body { min-height: 100vh; background: var(--papier); color: var(--text); font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #739c22; outline-offset: 4px; }
a { color: var(--blau); text-underline-offset: 4px; }
h1, h2, h3 { line-height: 1.15; font-weight: 650; letter-spacing: -.035em; }
h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.12rem; }
.symbol { width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0; }
.wappen { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: 5px; }
.wappen .symbol { width: 19px; height: 19px; }
.kopf { min-height: 90px; max-width: 1440px; margin: auto; padding: 24px 5%; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--kontur); }
.titel { display: flex; align-items: center; gap: 11px; font-size: 1rem; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.unterzeile { border-left: 1px solid var(--kontur); padding-left: 18px; font-size: .76rem; color: var(--gedimmt); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.verbindung { font-size: .68rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.verbindung::before { content: ''; width: 6px; height: 6px; display: inline-block; background: var(--gruen); border-radius: 50%; margin-right: 7px; }
.verbindung[data-online=false]::before { background: var(--rot); }
.sprachwahl { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--kontur); border-radius: 6px; }
.sprachwahl .sprach-knopf { padding: 4px 8px; margin: 0; border: 0; border-radius: 3px; min-height: 27px; background: transparent; color: var(--gedimmt); font-size: .66rem; font-weight: 650; box-shadow: none; }
.sprachwahl .sprach-knopf.aktiv { color: #fff; background: var(--text); }
.ablauf { display: flex; justify-content: center; gap: 42px; padding: 23px 20px; color: #89918b; font-size: .72rem; }
.ablauf span { display: flex; gap: 9px; align-items: center; }
.ablauf b { font-family: var(--mono); font-size: .63rem; font-weight: 400; }
.ablauf .aktuell { color: var(--text); font-weight: 700; }
.ablauf .aktuell b { border-radius: 50%; background: var(--gelb); color: var(--text); width: 23px; height: 23px; display: grid; place-items: center; }
.ablauf .erledigt { color: var(--gruen); }
.container { max-width: 760px; margin: 0 auto; padding: 12px 28px 70px; }
.container.breit, body[data-ansicht=lehrer] .container { max-width: 1320px; }
body[data-ansicht=schueler][data-angemeldet=false] .container { max-width: 1280px; }
.karte { background: var(--karte); border: 1px solid var(--kontur); border-radius: 12px; padding: 26px; margin: 14px 0; }
.karte > h2, .karte > h3 { margin-bottom: 16px; }
.rubrik { font-family: var(--mono); font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--gedimmt); margin-bottom: 14px; }
.hinweis { color: var(--gedimmt); font-size: .87rem; line-height: 1.65; }
.zentriert { text-align: center; }
.fehler { font-size: .83rem; color: var(--rot); margin-top: 8px; min-height: 1.2em; }
label { display: block; color: var(--text); font-size: .77rem; font-weight: 600; margin: 18px 0 7px; }
input, textarea, select { width: 100%; color: var(--text); background: #fafbf8; border: 1px solid #cdd3ca; border-radius: 6px; padding: 12px 13px; font-size: 1rem; min-height: 46px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #7e8880; }
input:focus, textarea:focus, select:focus { outline: 2px solid #748c4f; outline-offset: 2px; background: #fff; }
button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; border: 1px solid transparent; border-radius: 6px; padding: 10px 17px; margin-top: 12px; color: #fff; background: var(--blau); font-size: .87rem; font-weight: 600; line-height: 1.35; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover:not(:disabled) { background: #365b46; }
button:disabled { cursor: default; }
button.voll { width: 100%; }
button.sekundaer { background: transparent; border-color: var(--kontur); color: var(--text); }
button.sekundaer:hover { background: #edf1e9; border-color: #9da99c; }
button.gefahr { background: #fcf0ec; color: var(--rot); border-color: #e9c8c2; }
button.gruen { background: var(--gelb); color: var(--text); border-color: #bdd659; }
button.gruen:hover { background: #c8e563; }
button.mini { min-height: 34px; padding: 6px 10px; font-size: .74rem; margin: 3px; }
button.mini .symbol { width: 16px; height: 16px; }
.pille { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 650; border-radius: 4px; padding: 5px 9px; background: #edf1e8; }
.pille.gruen { background: #e2f2e6; color: var(--gruen); }
.pille.rot { color: var(--rot); background: #fff0ee; }
.pille.gelb { background: var(--gelb); }
/* Arrival: one statement, one action, no visual clutter around the form. */
.einstieg { display: grid; grid-template-columns: 1.35fr 1fr; min-height: 555px; border: 1px solid var(--kontur); border-radius: 16px; overflow: hidden; margin-top: 14px; }
.einstieg-bild { background: var(--dunkel); color: #f3f6ea; padding: 38px 42px 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.einstieg-bild .rubrik { color: var(--gelb); }
.einstieg-bild h1 { max-width: 470px; font-size: clamp(2.4rem, 4.3vw, 4.3rem); letter-spacing: -.06em; line-height: 1.02; }
.einstieg-bild > p { color: #b6c3b8; max-width: 340px; margin-top: 17px; font-size: .87rem; }
.zug-szene { position: relative; flex: 1; min-height: 185px; display: flex; align-items: center; justify-content: center; }
.zug-szene img { position: relative; width: 115%; max-height: 285px; object-fit: contain; z-index: 1; filter: drop-shadow(0 25px 22px #07170c70); }
.szene-ring { position: absolute; width: 310px; height: 310px; border: 1px solid #536548; border-radius: 50%; transform: rotateX(58deg); }
.szene-ring::after { content: ''; position: absolute; inset: 24px; border: 1px solid #44573d; border-radius: 50%; }
.einstieg-fakten { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #415047; padding-top: 17px; font-family: var(--mono); font-size: .65rem; color: #8e9d90; }
.einstieg-fakten b { margin-left: 6px; color: #e6ebdc; font-weight: 400; }
.einstieg-formular { background: #fff; padding: 45px; display: flex; flex-direction: column; justify-content: center; }
.einstieg-formular h2 { font-size: 2rem; margin: 4px 0 13px; }
.einstieg-formular label { margin-top: 30px; }
.einstieg-formular button { min-height: 50px; justify-content: space-between; }
.einstieg-formular .fussnote { font-size: .74rem; color: var(--gedimmt); margin-top: 22px; }
/* Faction identity and the question workshop. */
.volk-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--dunkel); color: #fff; padding: 26px; margin: 12px 0 24px; min-height: 190px; overflow: hidden; border-radius: 12px; }
.volk-banner::after { content: ''; position: absolute; width: 210px; height: 210px; right: -35px; top: -55px; border: 1px solid #ffffff20; border-radius: 50%; }
.volk-banner h2 { font-size: 2rem; margin: 7px 0; }
.volk-banner .rubrik { color: #c1cdbd; margin: 0; }
.volk-banner .hinweis { color: #b6c3b8; }
.zug-bild { max-height: 160px; max-width: 54%; object-fit: contain; position: relative; z-index: 1; }
.frage-slot { border: 1px solid var(--kontur); border-radius: 7px; padding: 14px; margin: 10px 0; background: #fafbf8; }
.frage-slot.fertig { background: #f1f6ed; border-color: #d3dfc8; }
.slot-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; font-weight: 600; }
.slot-kopf > span { overflow-wrap: anywhere; }
.slot-kopf button { flex-shrink: 0; }
.antwort-zeile { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.antwort-zeile input[type=radio] { width: 20px; height: 20px; min-height: 20px; flex-shrink: 0; accent-color: var(--gruen); }
.schreib-fortschritt { display: block; width: 100%; height: 6px; margin: 20px 0; accent-color: var(--gruen); border: none; border-radius: 3px; overflow: hidden; }
.schreib-fortschritt::-webkit-progress-bar { background: #e7ebe3; }
.schreib-fortschritt::-webkit-progress-value { background: var(--gruen); }
/* Duels: readable question, large choices, unmistakable feedback. */
.duell-karte { padding: 28px; }
.duell-kopf { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding-bottom: 16px; border-bottom: 1px solid var(--kontur); }
.duell-kopf > b { font: .7rem var(--mono); color: var(--gedimmt); }
.duell-frage { font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.35; margin: 22px 0; overflow-wrap: anywhere; }
.antwort-knopf { display: flex; justify-content: flex-start; text-align: left; width: 100%; min-height: 58px; background: #fff; color: var(--text); border: 1px solid var(--kontur); padding: 14px 17px; margin: 10px 0; font-size: .97rem; font-weight: 500; overflow-wrap: anywhere; }
.antwort-knopf:hover:not(:disabled) { background: #f0f4e8; border-color: #7f9653; }
.antwort-knopf.gewaehlt { background: #edf5ce; border-color: #829843; }
.antwort-knopf.richtig { background: #e3f2e6; color: #205739; border: 2px solid #548866; }
.antwort-knopf.falsch { background: #f9e9e4; color: #973d35; border: 2px solid #b8675c; }
.antwort-buchstabe { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: #f0f2ec; border: 1px solid #dce1d7; border-radius: 4px; font: .77rem var(--mono); margin-right: 5px; }
.antwort-knopf.richtig .antwort-buchstabe { background: #c5e2ce; border-color: #a7cbb2; }
.antwort-knopf.falsch .antwort-buchstabe { background: #efc8bd; border-color: #dba69a; }
.countdown { text-align: center; width: 62px; height: 62px; display: grid; place-items: center; border: 2px solid #91a776; border-radius: 50%; font: 1.6rem var(--mono); margin: 22px auto 12px; background: #f2f7e7; }
.countdown.knapp { border-color: var(--rot); background: #fff0eb; color: var(--rot); }
.warte-animation { display: grid; place-items: center; width: 64px; height: 64px; background: #eef3e6; color: var(--blau); border-radius: 50%; margin: 20px auto; }
.warte-animation .symbol { width: 29px; height: 29px; }
.schuss-leiste { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
.schuss-punkt { width: 18px; height: 5px; border-radius: 2px; background: #dfe5d9; }
.schuss-punkt.richtig { background: var(--gruen); }
.schuss-punkt.falsch { background: var(--rot); }
.schuss-punkt.aktiv { background: #829943; }
.ergebnis-text { padding: 15px; border-radius: 7px; background: #f0f3eb; font-size: 1.15rem; }
/* Teacher: a wide desk with a persistent, readable roster. */
body[data-ansicht=lehrer] #app { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
body[data-ansicht=lehrer] #app > .karte { margin: 0; }
body[data-ansicht=lehrer] #app > .anmeldung { grid-column: 1 / -1; max-width: 440px; width: 100%; margin: 40px auto; padding: 38px; }
body[data-ansicht=lehrer] #app > .breite-karte { grid-column: 1 / -1; }
body[data-ansicht=lehrer] #app > .hinweis-karte { grid-column: 1 / -1; }
table.uebersicht { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 12px; }
table.uebersicht td, table.uebersicht th { text-align: left; padding: 13px 8px; border-bottom: 1px solid #e3e7df; }
table.uebersicht th { font: .64rem var(--mono); letter-spacing: .07em; color: var(--gedimmt); text-transform: uppercase; }
table.uebersicht td { font-variant-numeric: tabular-nums; }
table.uebersicht tr:last-child td { border: 0; }
table.uebersicht td:first-child { padding-left: 0; }
table.uebersicht select { min-height: 34px; max-width: 130px; }
.ticker-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ticker { min-width: 0; background: #fff; border: 1px solid var(--kontur); border-radius: 8px; padding: 16px; font-size: .8rem; }
.ticker .namen { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.tick-punkte { display: flex; align-items: center; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.tick { width: 10px; height: 10px; background: #e0e6d9; border-radius: 2px; }
.tick.richtig { background: var(--gruen); }
.tick.falsch { background: var(--rot); }
/* Projector: a dark stadium board with stable lanes. */
body[data-ansicht=beamer] { --papier: #15231e; --text: #edf1e7; --gedimmt: #b2bfb5; --kontur: #35443b; --karte: #203129; --blau: #d7f275; --gruen: #a8cd77; }
body[data-ansicht=beamer] .sprach-knopf.aktiv { color: #1c2b23; }
body[data-ansicht=beamer] .karte, body[data-ansicht=beamer] .ticker { background: var(--karte); }
body[data-ansicht=beamer] .ticker { border-color: var(--kontur); }
body[data-ansicht=beamer] .ablauf .aktuell b { color: #243026; }
body[data-ansicht=beamer] h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
body[data-ansicht=beamer] .container { padding-top: 15px; }
.beamer-einstieg { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: center; }
.beamer-einstieg .einstieg-bild { background: transparent; padding: 28px 10px; }
.beamer-einstieg .einstieg-bild h1 { font-size: clamp(3rem, 5vw, 5rem); }
.beamer-einstieg .zug-szene { min-height: 230px; }
.qr-box { text-align: center; }
.qr-box h2 { font-size: 1.6rem !important; }
.qr-box img { width: min(30vw, 270px); padding: 12px; background: #fff; border-radius: 8px; margin: 12px 0; }
.join-link { display: flex; justify-content: center; margin-top: 8px; }
.join-link .url { font-family: var(--mono); font-size: .78rem; color: var(--gelb); overflow-wrap: anywhere; }
.teilnehmer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.teilnehmer span { padding: 7px 13px; background: #ffffff09; border: 1px solid var(--kontur); border-radius: 5px; font-size: .83rem; }
.team-vorschau { display: block; width: 100%; height: 130px; object-fit: contain; margin: 8px 0; }
.strecke { margin: 25px 0; }
.bahn { position: relative; height: 128px; background: #1e3027; border: 1px solid #3c4b3f; border-radius: 8px; margin: 10px 0; overflow: hidden; }
.bahn .gleis { position: absolute; left: 0; right: 0; bottom: 13px; height: 5px; border-top: 1px solid #718367; border-bottom: 1px solid #718367; background: repeating-linear-gradient(90deg, transparent 0 20px, #627455 20px 22px); opacity: .55; }
.bahn .zug { position: absolute; bottom: -4px; left: 0; width: 145px; text-align: center; transform: translateX(-8%); transition: left 1.6s ease-in-out; }
.bahn .zug img { width: 100%; height: 97px; object-fit: contain; filter: drop-shadow(0 5px 5px #0007); }
.bahn .zug .ersatz { display: inline-flex; margin-bottom: 18px; color: #d7f275; }
.bahn .zug .ersatz .symbol { width: 60px; height: 60px; }
.bahn .etikett { position: absolute; top: 11px; left: 15px; display: flex; align-items: center; font-size: .8rem; font-weight: 650; gap: 4px; }
.bahn .tacho { position: absolute; top: 12px; right: 24px; color: #c4d9a3; font: .78rem var(--mono); }
.ziel-linie { position: absolute; right: 10px; top: 0; bottom: 0; width: 4px; border-left: 1px dashed #94a186; opacity: .5; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 15px; margin: 28px 0; }
.podest { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 180px; text-align: center; background: #293e30; border: 1px solid #667c50; border-radius: 9px; padding: 17px; }
.podest-platz { font: 2rem var(--mono); color: var(--gelb); }
.podest .team-vorschau { height: 80px; margin: 0; }
.fuss-hinweis { text-align: center; padding: 20px; font-size: .72rem; color: var(--gedimmt); }
@media (min-width: 1000px) {
  body[data-ansicht=lehrer][data-phase=writing] #app > .karte:first-child,
  body[data-ansicht=lehrer][data-phase=lobby] #app > .karte:first-child:not(.anmeldung) { grid-row: span 2; }
}
@media (min-width: 761px) {
  body[data-ansicht=beamer] .kopf { min-height: 72px; padding-top: 17px; padding-bottom: 17px; }
  body[data-ansicht=beamer] .ablauf { padding-top: 13px; padding-bottom: 13px; }
  .beamer-einstieg .einstieg-bild { padding: 12px 10px; }
  .beamer-einstieg .einstieg-bild h1 { font-size: clamp(2.7rem, 4.1vw, 4rem); }
  .beamer-einstieg .zug-szene { min-height: 155px; max-height: 155px; }
  .beamer-einstieg .zug-szene img { max-height: 235px; }
  .beamer-einstieg .einstieg-fakten { display: none; }
  .beamer-einstieg .qr-box img { width: min(25vw, 230px); }
  body[data-ansicht=beamer][data-phase=writing] .ticker-raster { grid-template-columns: repeat(3, 1fr); }
  body[data-ansicht=beamer][data-phase=writing] .team-vorschau { height: 70px; margin: 0; }
  body[data-ansicht=beamer][data-phase=writing] .ticker { padding: 12px 16px; }
  body[data-ansicht=beamer][data-phase=writing] .schreib-fortschritt { margin: 10px 0; }
  body[data-ansicht=beamer][data-phase=writing] #app > .karte { padding: 18px; }
  body[data-ansicht=beamer][data-phase=writing] .gesamt-fortschritt { margin: 16px auto; }
  body[data-ansicht=beamer] .bahn { height: clamp(74px, calc((100vh - 270px) / 6), 112px); }
  body[data-ansicht=beamer] .bahn .zug img { height: 76px; }
  body[data-ansicht=beamer] .bahn .zug { bottom: -18px; }
  body[data-ansicht=beamer] .bahn .etikett, body[data-ansicht=beamer] .bahn .tacho { top: 8px; }
  body[data-ansicht=beamer] .strecke { margin: 12px 0; }
}
@media (max-width: 760px) {
  .kopf { padding: 17px 20px; min-height: 72px; gap: 10px; }
  .unterzeile, .verbindung { display: none; }
  .kopf-rechts { gap: 10px; }
  .ablauf { gap: 16px; padding: 17px 10px; font-size: .65rem; }
  .ablauf span { gap: 5px; }
  .container { padding: 8px 16px 45px; }
  .karte { padding: 21px; }
  .einstieg { grid-template-columns: 1fr; margin-top: 2px; }
  .einstieg-bild { padding: 26px; min-height: 0; }
  .einstieg-bild h1 { max-width: none; font-size: 2.1rem; }
  .einstieg-bild > p { max-width: 250px; font-size: .8rem; }
  .einstieg .zug-szene { display: none; }
  .einstieg .szene-ring { width: 180px; height: 180px; }
  .einstieg-fakten { margin-top: 22px; font-size: .58rem; position: relative; z-index: 2; }
  .einstieg-formular { padding: 27px; }
  .einstieg-formular h2 { font-size: 1.6rem; }
  .einstieg-formular label { margin-top: 20px; }
  .volk-banner { padding: 22px; min-height: 160px; }
  .volk-banner h2 { font-size: 1.5rem; }
  .zug-bild { max-height: 130px; max-width: 49%; }
  .duell-karte { padding: 18px; }
  .duell-kopf .pille { font-size: .66rem; padding: 5px; }
  body[data-ansicht=lehrer] #app { display: block; }
  body[data-ansicht=lehrer] #app > .karte { margin: 14px 0; overflow-x: auto; }
  table.uebersicht { font-size: .75rem; }
  table.uebersicht td, table.uebersicht th { padding: 9px 5px; }
  .beamer-einstieg { grid-template-columns: 1fr; gap: 0; }
  .beamer-einstieg .einstieg-bild { display: none; }
  .qr-box img { width: 230px; }
  .podium { gap: 8px; }
  .podest { min-width: 0; flex: 1; font-size: .75rem; padding: 10px; }
  .bahn .zug { width: 100px; }
  .bahn .zug img { height: 85px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.gesamt-fortschritt { margin: 24px auto; }
/* Cloud pages own their inner grid; the LAN teacher layout uses a different root. */
body[data-cloud=true][data-ansicht=lehrer] #app { display: block; }
body[data-cloud=true] #meldung:empty { display: none; }
body[data-cloud=true] .wolken-kopf { width: 100%; }
@media print {
  body[data-cloud=true] .container { max-width: none; padding: 0; }
  body[data-cloud=true] .tabellen-rahmen { overflow: visible; }
}