/* Towerful – iPad und großer Bildschirm (Handoff v1.1, Mockups 2a–2t in
   docs/design/Readback iPad.dc.html). Stufen über data-layout am <html> (js/layout.js):
   schmal = 600–1023 (hochkant), breit = ab 1024 (quer, Desktop). Werte 1:1 aus den Mockups. */

/* ================================================================================================
   Gemeinsam ab 600 px
   ============================================================================================== */

/* Fenster statt Bottom-Sheet: 560 breit, Bestätigungen 420, Radius 24 */
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg { align-items: center; padding: 24px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet { width: 560px; max-width: 100%; max-height: calc(100% - 48px); border-radius: 24px; padding: 24px 28px 22px; gap: 18px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet > .griff { display: none; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.klein .sheet { width: 420px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.klein .title { font: 600 20px var(--font-sans); }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.klein .textblock { gap: 8px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.klein .knoepfe .btn.gross { height: 52px; }
/* Eintippen: oben verankert (40 px), damit die Bildschirmtastatur nichts verdeckt (2r) */
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.oben { align-items: flex-start; padding-top: 40px; }
/* Mikrofon-Erklärung (2b) */
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .symbol { width: 52px; height: 52px; border-radius: 15px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .symbol::after { width: 15px; height: 15px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .textblock .title { font: 600 24px/1.2 var(--font-sans); letter-spacing: -.01em; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .punkte { gap: 10px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .knoepfe:has(> .btn.text) { flex-direction: row-reverse; gap: 10px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet .knoepfe:has(> .btn.text) > * { flex: 1; height: 56px; }

/* Befunde eines Schritts (Zusammenfassung): breiteres Fenster */
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.befunde .sheet { width: 680px; }

/* Kopfzeile in Fenstern (Lage, Eintippen, Befunde) */
.fenster-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fenster-kopf .title { font: 600 20px var(--font-sans); }
.fenster-kopf .schliessen { margin: -10px -12px -10px 0; }
.lage-fenster .lage-text { font: 400 18px/1.55 var(--font-sans); }
.lage-fenster .lage-auftrag { font: 600 18px/1.4 var(--font-sans); padding-top: 8px; }
.sheet textarea { min-height: 120px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet textarea { border: 1.5px solid var(--ink); background: var(--raised); padding: 14px 16px; font: 400 17px/1.5 var(--font-sans); resize: none; }
.eingabe-hinweis { font: 400 13px/1.45 var(--font-sans); color: var(--ink-3); }
.eingabe-knoepfe { gap: 10px; }
.eingabe-knoepfe .btn { height: 52px; }
.eingabe-knoepfe .btn.voll { gap: 10px; }

/* Tastenkappe (Mono 11, Rand, Radius 5) */
.kappe { display: inline-flex; align-items: center; font: 500 11px var(--font-mono); color: var(--ink-3); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-3); }
.kappe.dunkel { color: var(--auf-dunkel-2); border-color: var(--dunkel-offen); }
.btn.voll .kappe.dunkel { color: var(--auf-dunkel-2); }

/* Seitentitel der Bereiche */
.seiten-titel { font: 600 28px var(--font-sans); letter-spacing: -.01em; margin: 0; }
.seiten-titel.gross { font: 600 32px var(--font-sans); letter-spacing: -.02em; }
.seiten-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.seiten-kopf > span { font: 400 14px var(--font-sans); color: var(--ink-2); }
.link-knopf { font: 500 14px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.pflicht-klein { font: 400 11px/1.6 var(--font-mono); color: var(--ink-3); }
.platz { flex: 1; }

/* Weitermachen quer (2c, 2n) */
:root:is([data-layout=schmal], [data-layout=breit]) .weiter-karte { flex-direction: row; align-items: center; gap: 20px; padding: 18px 20px; }
:root:is([data-layout=schmal], [data-layout=breit]) .weiter-karte .weiter-text { flex: 1; gap: 10px; }
:root:is([data-layout=schmal], [data-layout=breit]) .weiter-karte .stepbar { max-width: 260px; }
:root:is([data-layout=schmal], [data-layout=breit]) .weiter-karte .fortsetzen { width: auto; padding: 0 24px; flex: none; }
:root:is([data-layout=schmal], [data-layout=breit]) .filter button { height: 40px; padding: 0 16px; border-radius: 20px; }

/* Einfache Seiten (Erstbesuch hochkant, Besonderheiten, Zusammenfassung hochkant): Spalte 640 */
:root:is([data-layout=schmal], [data-layout=breit]) .screen.einfach > :is(.scroll, .fuss, .zf-fuss, .dock, .erstbesuch-fuss) { padding-inline: max(24px, calc((100% - 640px) / 2)); }
:root:is([data-layout=schmal], [data-layout=breit]) .screen.einfach > .scroll { padding-top: 48px; }
:root:is([data-layout=schmal], [data-layout=breit]) .screen.einfach > .zf-fuss { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.erstbesuch-fuss { padding: 16px 22px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }

/* Befundkarte ab 600 px: Werte in Mono, Musterlösung unten offen, Anhören unter dem Text (2g, 2q, 2j) */
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .bkopf { padding: 16px 20px; }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .eigener { padding: 14px 20px; gap: 8px; }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .eigener .text { line-height: 1.75; }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .gruppe { padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .gruppe + .gruppe { border-top: 1px solid var(--line-2); }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .glabel { padding: 0; }
:root:is([data-layout=schmal], [data-layout=breit]) .befunde .zeilen { padding: 0; gap: 8px; font: 400 15px/1.45 var(--font-sans); }
:root:is([data-layout=schmal], [data-layout=breit]) .befund-zeile { flex-direction: column; align-items: flex-start; gap: 8px; }
:root:is([data-layout=schmal], [data-layout=breit]) .befund-zeile .btn { height: 36px; padding: 0 12px; border-radius: 10px; font: 500 13px var(--font-sans); gap: 6px; }
:root:is([data-layout=schmal], [data-layout=breit]) .wert-falsch, :root:is([data-layout=schmal], [data-layout=breit]) .wert-richtig { font-size: 15px; }
:root:is([data-layout=schmal], [data-layout=breit]) .muster { margin: 0; padding: 16px 20px; background: var(--fill-3); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-card) var(--r-card); }
:root:is([data-layout=schmal], [data-layout=breit]) .muster p { font: 400 15px/1.6 var(--font-sans); }
:root:is([data-layout=schmal], [data-layout=breit]) .muster .knopfreihe { padding-top: 4px; max-width: 420px; }

/* Ton-Detail als Karte (2g, 2q) */
.ton-karte { gap: 10px; }
.ton-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; }
.ton-kopfzeile > span:last-child { font: 500 13px var(--font-sans); color: var(--ink-2); }
.ton-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.ton-ziffer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 8px; }
.ton-ziffer b { font: 500 30px/1 var(--font-mono); }
.ton-ziffer i { width: 100%; height: 3px; border-radius: 2px; background: var(--ink); }
.ton-ziffer small { font: 500 12px var(--font-sans); color: var(--ink-2); }
.ton-ziffer.falsch { border-radius: 10px 10px 0 0; background: color-mix(in oklch, var(--pron) 8%, transparent); }
.ton-ziffer.falsch b, .ton-ziffer.falsch small { color: var(--pron-text); font-weight: 600; }
.ton-ziffer.falsch i { background: var(--pron); }
.ton-ziffer.unklar b { color: var(--ink-3); }
.ton-ziffer.unklar i { border-radius: 0; background: repeating-linear-gradient(90deg, var(--line-4) 0 4px, transparent 4px 7px); }
.ton-ziffer.unklar small { color: var(--ink-3); }

/* ================================================================================================
   Hochkant 600–1023 (2n–2q)
   ============================================================================================== */

/* Tabs unten als Segment in der Mitte */
:root[data-layout=schmal] .tabs { justify-content: center; padding: 10px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
:root[data-layout=schmal] .tabs .segment { flex: none; gap: 6px; padding: 4px; border-radius: 16px; background: var(--muted-fill); }
:root[data-layout=schmal] .tabs button { flex: none; height: 44px; padding: 0 22px; border-radius: 12px; flex-direction: row; font: 500 14px var(--font-sans); color: var(--ink-2); }
:root[data-layout=schmal] .tabs button::before { display: none; }
:root[data-layout=schmal] .tabs button[aria-current=page] { background: var(--raised); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Spalte für Listen max. 720 */
:root[data-layout=schmal] .scroll.spalte-720 { padding: 28px max(40px, calc((100% - var(--spalte)) / 2)) 24px; gap: 22px; }
:root[data-layout=schmal] .scroll.seite { padding: 28px max(40px, calc((100% - var(--spalte)) / 2)) 24px; gap: 20px; }

/* Übungen als Karten zweispaltig (2n) */
.karten-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.uebung-karte { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.uebung-karte .oben { display: flex; justify-content: space-between; align-items: flex-start; }
.uebung-karte .texte { display: flex; flex-direction: column; gap: 3px; }
.uebung-karte .texte b { font: 600 16px/1.3 var(--font-sans); }
.uebung-karte .texte span { font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); }
.uebung-karte .zuletzt { font: 400 12px var(--font-sans); color: var(--ink-3); border-top: 1px solid var(--line-2); padding-top: 10px; }
:root:is([data-layout=schmal], [data-layout=breit]) .icao { width: 52px; height: 52px; }
:root:is([data-layout=schmal], [data-layout=breit]) .icao b { font-size: 12px; }
:root:is([data-layout=schmal], [data-layout=breit]) .badge { padding: 3px 7px; }

/* Einrichten als großes Sheet (2o): 680 breit, 56 px unter Oberkante */
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.einrichten { align-items: center; padding: 24px; }
:root:is([data-layout=schmal], [data-layout=breit]) .sheet-hg.einrichten .sheet { width: 600px; height: auto; max-height: calc(100% - 48px); padding: 0; gap: 0; border-radius: 24px; background: var(--surface); overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); }
:root[data-layout=breit] .eintipp textarea { font-size: 17px; }
.einrichten-panel.v-sheet { height: auto; max-height: 100%; }
.einrichten-panel.v-sheet > .scroll { flex: 0 1 auto; }
.einrichten-panel.v-sheet .einrichten-kopf.hell .griff { display: none; }
.einrichten-panel.v-sheet .einrichten-kopf.hell { padding: 24px 28px 20px; gap: 6px; }
.einrichten-panel.v-sheet .einrichten-kopf.hell .griff { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line-3); margin: 8px 0 10px; }
.einrichten-panel.v-sheet .einrichten-inhalt { padding: 20px 28px 8px; gap: 24px; }
.einrichten-panel.v-sheet .fuss { padding: 14px 28px 20px; gap: 10px; border-top: 0; }
.einrichten-panel.v-sheet .btn.start, .einrichten-panel.v-spalte .btn.start { height: 60px; }
.einrichten-panel.v-sheet .check { min-height: 32px; }
.einrichten-panel:not(.v-seite) .frage > .heading, .einrichten-panel:not(.v-seite) .frage > .fragekopf { padding: 0; }
.einrichten-panel.v-sheet .hilfen-zeile, .einrichten-panel.v-spalte .hilfen-zeile { padding: 12px 0 0; }

/* Übungsschritt hochkant (2p, 2q) */
:root[data-layout=schmal] .befunde .gruppen.beide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:root[data-layout=schmal] .befunde .gruppen.beide .gruppe + .gruppe { border-top: 0; border-left: 1px solid var(--line-2); }

/* Kontextzeile als Leiste mit „Lage" (2e, 2p) */
:root:is([data-layout=schmal], [data-layout=breit]) .ctx { flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); overflow: visible; }
:root:is([data-layout=schmal], [data-layout=breit]) .ctx button { background: var(--raised); border-radius: 6px; padding: 4px 8px; min-height: 0; font: 500 12px var(--font-mono); letter-spacing: 0; }
:root:is([data-layout=schmal], [data-layout=breit]) .ctx .ctx-lage { display: inline-flex; background: none; font: 500 12px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }

/* Transkript groß (2f, 2p); letzter Funkspruch klein (2e) */

/* Probefunk ab 600 px (2b) */
.screen.probefunk-gross { align-items: center; padding: calc(28px + env(safe-area-inset-top)) 40px calc(28px + env(safe-area-inset-bottom)); }
.pf-kopf { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.pf-kopf .text-knopf { font: 500 15px var(--font-sans); min-height: 44px; }
.pf-mitte { flex: 1; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.pf-mitte h1 { font: 600 44px/1.1 var(--font-sans); letter-spacing: -.02em; margin: 0; }
.pf-mitte .pf-anleitung { font: 400 16px var(--font-sans); color: var(--ink-2); }
.pf-mitte .transkript { width: 100%; text-align: left; }
.pf-mitte .transkript:has(.text:empty) { display: none; }
.pf-mitte .fehlerfrei { width: 100%; text-align: left; }
.pf-mitte > .btn { width: 280px; }
.pf-taste { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }

/* ================================================================================================
   Quer und Desktop ab 1024 px (2a–2m)
   ============================================================================================== */

/* Gesamtbreite max. 1440, Hintergrund läuft durch */

/* Rahmen: Seitenleiste 248 statt Tabs (2c) */
:root[data-layout=breit] .screen.nav { flex-direction: row; }
:root[data-layout=breit] .screen.nav .tabs { display: none; }
:root[data-layout=breit] .screen.nav .seitenleiste { display: flex; }
:root[data-layout=breit] .screen.nav .bereich { min-width: 0; }
.seitenleiste { width: 248px; flex: none; background: var(--fill-2); border-right: 1px solid var(--line); flex-direction: column; padding: calc(22px + env(safe-area-inset-top)) 14px 18px; }
.seitenleiste .kopf-marke { padding: 0 8px 28px; }
.seitenleiste .eintrag { height: 48px; border-radius: 12px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; font: 500 15px var(--font-sans); color: var(--ink-2); }
.seitenleiste .eintrag[aria-current=page] { background: var(--raised); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seitenleiste .pflicht-klein { padding: 0 8px; }

/* Bereichsseiten */
:root[data-layout=breit] .scroll.seite { padding: 40px max(40px, calc((100% - var(--spalte)) / 2)) 32px; gap: 20px; }

/* Üben ab 1024 px: nur die Übungen, als Karten (Einrichten öffnet sich als Fenster) */
:root[data-layout=breit] .scroll.spalte-720 { padding: 40px max(40px, calc((100% - var(--spalte)) / 2)) 32px; gap: 22px; }
:root[data-layout=breit] .karten-raster { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.einrichten-kopf.kompakt { flex-direction: row; align-items: center; gap: 14px; padding: 16px 20px 16px 24px; flex: none; }
.einrichten-kopf.kompakt .icao-kachel { width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--dunkel-chip); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.einrichten-kopf.kompakt .icao-kachel b { font: 600 13px var(--font-mono); }
.einrichten-kopf.kompakt .icao-kachel small { font: 500 10px var(--font-mono); color: var(--auf-dunkel-2); }
.einrichten-kopf.kompakt .titelblock { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.einrichten-kopf.kompakt .titelblock b { font: 600 18px/1.25 var(--font-sans); }
.einrichten-kopf.kompakt .titelblock span { font: 500 11px var(--font-mono); letter-spacing: .06em; color: var(--auf-dunkel-2); text-transform: uppercase; }
.einrichten-panel.v-spalte .einrichten-inhalt { padding: 16px 24px 8px; gap: 18px; }
.einrichten-panel.v-spalte .fuss { padding: 12px 24px 18px; gap: 10px; }

/* Start erster Besuch (2a): Raster 1fr 480 */
.screen.erstbesuch-breit { display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.erstbesuch-breit .einstieg { padding: 40px 64px; display: flex; flex-direction: column; gap: 40px; min-height: 0; }
.marke.gross { font-size: 20px; }
.marke.gross i { width: 36px; height: 36px; }
.erstbesuch-breit .held { display: flex; flex-direction: column; gap: 18px; max-width: 560px; padding-top: 40px; }
.erstbesuch-breit .held h1 { font: 600 52px/1.05 var(--font-sans); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.erstbesuch-breit .held p { font: 400 19px/1.55 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }
.schritte-quer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.schritte-quer .schritt { display: flex; flex-direction: column; gap: 6px; border-top: 2px solid var(--ink); padding-top: 12px; }
.schritte-quer .nr { font: 600 12px var(--font-mono); color: var(--ink-3); }
.schritte-quer b { font: 600 16px var(--font-sans); }
.schritte-quer span:last-child { font: 400 14px/1.45 var(--font-sans); color: var(--ink-2); }
.probefunk-spalte { background: var(--surface-2); border-left: 1px solid var(--line); padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.probefunk-spalte h2 { font: 600 26px/1.2 var(--font-sans); letter-spacing: -.01em; margin: 0; }
.probefunk-spalte p { font: 400 16px/1.55 var(--font-sans); color: var(--ink-2); }
.pegel-karte { gap: 12px; }
.pegel-vorschau { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.pegel-vorschau i { width: 6px; border-radius: 1px; background: var(--step-open); }
.probefunk-spalte .knoepfe { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.btn.h60 { height: 60px; }
.probefunk-spalte .btn.text { height: 48px; }

/* Übungsschritt (2d–2i): Kopf 72, Lesen links, Funk-Säule rechts */

/* Sprechtaste groß (2d–2f, 2i) */

/* Lage im Anruf-Schritt groß (2d) */
:root[data-layout=breit] .lage-karte { padding: 24px 28px; gap: 16px; }
:root[data-layout=breit] .lage-karte .lage-text { font: 400 20px/1.55 var(--font-sans); }
:root[data-layout=breit] .lage-karte .lage-auftrag { font: 600 20px/1.4 var(--font-sans); }
:root[data-layout=breit] .tipp-zeile { display: flex; gap: 10px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-2); }
.tipp-zeile .label { flex: none; line-height: 1.9; }
.tower-info { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); }
.knopfreihe.hoeren .btn { height: 44px; border-radius: 12px; font: 500 14px var(--font-sans); }

/* Fehlerfrei in der Säule (2i): nur Haken und Titel */

/* Mitschrift in der Säule (2h): füllt die Säule zwischen oben und Sprechtaste */

/* Fortschritt (2k, 2l) */
.fortschritt-leer { display: flex; flex-direction: column; }
.fortschritt-leer .leer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 40px 0; }
.leer-leiste { display: flex; gap: 4px; width: 220px; }
.leer-leiste i { flex: 1; height: 6px; border-radius: 3px; background: var(--step-open); }
.fortschritt-leer h2 { font: 600 22px/1.3 var(--font-sans); max-width: 420px; margin: 0; }
.fortschritt-leer p { font: 400 16px/1.5 var(--font-sans); color: var(--ink-2); max-width: 440px; text-wrap: pretty; }
.fortschritt-leer .btn { width: 280px; margin-top: 8px; }
.f-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.f-karte { padding: 18px 20px; gap: 8px; }
.f-karte h2 { font: 600 18px var(--font-sans); margin: 0; }
.f-unter { font: 400 13px var(--font-sans); color: var(--ink-3); }
.f-zeilen { display: flex; flex-direction: column; }
.f-zeile, .f-runde { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.f-runde { gap: 14px; padding: 10px 0; }
.f-form { width: 12px; font: 600 12px var(--font-sans); }
.f-form.inhalt { color: var(--content); }
.f-form.aussprache { color: var(--pron); }
.f-text { flex: 1; font: 400 15px var(--font-sans); }
.f-zeile .link-knopf { font-size: 13px; min-height: 0; }
.f-balken { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.f-balken-zeile { display: flex; align-items: center; gap: 12px; }
.f-balken-zeile > span:first-child { width: 120px; font: 500 14px var(--font-sans); }
.f-balken-zeile .balken { flex: 1; height: 8px; border-radius: 4px; background: var(--muted-fill); overflow: hidden; }
.f-balken-zeile .balken i { display: block; height: 100%; background: var(--ink); }
.f-balken-zeile .data { width: 40px; text-align: right; font-size: 13px; }
.f-titel { flex: 1; font: 500 15px var(--font-sans); }
.f-art { width: 100px; font: 400 13px var(--font-sans); color: var(--ink-3); }
.f-runde .data { width: 40px; }
.f-datum { width: 90px; text-align: right; font: 400 13px var(--font-sans); color: var(--ink-3); }
.handy-nur { display: none; }
:root[data-layout=handy] .scroll.seite { padding: 28px 20px 16px; gap: 20px; }
:root[data-layout=handy] .f-art { display: none; }

/* Schmalere Querformate (iPad Pro 12,9 hochkant = 1024, iPad mini quer = 1133) */
:root[data-layout=breit] .seitenleiste { width: clamp(200px, 21vw, 248px); }
:root[data-layout=breit] .filter { flex-wrap: wrap; overflow: visible; }

/* Zusammenfassung ab 600 px: Ergebnis, Schritte und Knöpfe als ein ruhiger Block in der Mitte */
:root:is([data-layout=schmal], [data-layout=breit]) .screen.zf { justify-content: center; }
:root:is([data-layout=schmal], [data-layout=breit]) .screen.zf > .scroll { flex: 0 1 auto; padding-bottom: 8px; }

/* Übungskarten (Bug 960): ruhig, klare Hierarchie, Fuß unten bündig */
.uebung-karte { padding: 18px 20px; border-radius: 20px; gap: 12px; min-height: 168px; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
@media (hover: hover) { .uebung-karte:hover { border-color: var(--line-3); box-shadow: 0 8px 24px -16px rgba(0,0,0,.25); } }
.uebung-karte .oben { align-items: center; }
.uebung-karte .ort { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.uebung-karte .ort b { color: var(--ink); font-weight: 600; }
.uebung-karte .tags { display: inline-flex; gap: 6px; }
.tag-klein { font: 500 11px var(--font-mono); letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); text-transform: uppercase; }
.uebung-karte .texte b { font: 600 18px/1.3 var(--font-sans); letter-spacing: -.005em; }
.uebung-karte .texte span { font: 400 14px/1.4 var(--font-sans); }
.uebung-karte .fuss-zeile { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 13px var(--font-sans); color: var(--ink-3); }
.uebung-karte .stand { font: 500 12px var(--font-mono); padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.uebung-karte .stand.ok { background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); }
.uebung-karte .stand.neu { background: none; padding: 0; color: var(--ink-3); font: 400 13px var(--font-sans); }

/* Filter als Segment wie unter iOS (Bug 961) */
.filter.segment-filter { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 12px; background: var(--muted-fill); overflow: visible; }
:root .filter.segment-filter button { height: 36px; padding: 0 16px; border: 0; border-radius: 9px; font: 500 14px var(--font-sans); color: var(--ink-2); background: none; }
:root .filter.segment-filter button[aria-pressed=true] { background: var(--raised); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Profil unten in der Seitenleiste */
.seitenleiste .profil-zeile { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 0 12px; border-radius: 12px; text-align: left; width: 100%; }
.seitenleiste .profil-zeile[aria-current=page], .seitenleiste .profil-zeile:hover { background: var(--raised); }
.seitenleiste .profil-zeile .texte { display: flex; flex-direction: column; min-width: 0; }
.seitenleiste .profil-zeile b { font: 600 13px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenleiste .profil-zeile small { font: 400 12px var(--font-sans); color: var(--ink-3); }
.seitenleiste .zurueck { height: 40px; padding: 0 14px; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font: 500 14px var(--font-sans); color: var(--ink-3); border-radius: 12px; }
/* Admin-Bereich breiter als die Lese-Spalte (Tabelle, Kennzahlen) */


/* Eine Inhaltsbreite für alle Bereiche (Bug 965): Üben, Fortschritt, Einstellungen, Profil, Admin.
   Die Scrollleiste bekommt immer ihren Platz, damit nichts springt, wenn eine Seite länger ist. */
:root[data-layout=schmal] { --spalte: 720px; }
:root[data-layout=breit] { --spalte: 960px; }
:root:is([data-layout=schmal], [data-layout=breit]) .screen.nav .scroll { scrollbar-gutter: stable; }

/* Mitschrift ab 1024 px (Bug 966): eine Hälfte nur für Notizen, die andere mit Lage und Sprechtaste
   untereinander; bei „Funk-Säule links" (Linkshänder) Notizen links */