:root {
    --bg: #f5f6f8;
    --flaeche: #ffffff;
    --flaeche-2: #f0f2f5;
    --text: #1a1d23;
    --gedaempft: #626b79;
    --linie: #e2e5ea;
    --akzent: #0a4f9e;          /* SSV-Blau aus dem Vereinslogo */
    --akzent-hell: #e8f0fa;
    --gut: #1f8a53;
    --gut-hell: #e6f5ec;
    --warn: #b7791f;
    --warn-hell: #fdf3dc;
    --schlecht: #c0392b;
    --schlecht-hell: #fbe9e7;
    --info: #2e6fb0;
    --info-hell: #e8f1fb;
    --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --radius: 10px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Echtes Schwarz statt Dunkelblau (Test auf Wunsch des Trainers, 25.10.2026) – Grautöne neutral wie auf dem iPhone. */
        --bg: #000000;
        --flaeche: #141414;
        --flaeche-2: #1f1f1f;
        --text: #f2f2f2;
        --gedaempft: #9b9b9b;
        --linie: #2b2b2b;
        --akzent: #6ea6ea;
        --akzent-hell: #1a2a40;
        --gut: #4cc38a;
        --gut-hell: #173024;
        --warn: #e0b04f;
        --warn-hell: #33291a;
        --schlecht: #f07167;
        --schlecht-hell: #3a1f1d;
        --info: #6aa7e8;
        --info-hell: #1a2a3c;
        --schatten: none;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
small, .gedaempft { color: var(--gedaempft); }
.zahl { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.seitenleiste {
    width: 230px; flex: none; padding: 1.25rem .75rem; background: var(--flaeche);
    border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; height: 100vh;
}
.seitenleiste[hidden] { display: none; }
.marke { display: flex; gap: .6rem; align-items: center; padding: 0 .5rem 1.25rem; }
.marke small { display: block; font-size: .78rem; }
.logo { width: 38px; height: 38px; flex: none; object-fit: contain; }
.anmeldung .vereinslogo { display: block; width: 150px; margin: 0 auto 1.25rem; background: #fff; border-radius: 10px; padding: .6rem; }
.seitenleiste a { padding: .5rem .75rem; border-radius: 8px; color: var(--text); font-weight: 500; }
.seitenleiste a:hover { background: var(--flaeche-2); text-decoration: none; }
.seitenleiste a.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.abmelden { margin-top: auto; text-align: left; padding: .5rem .75rem; }
main { flex: 1; min-width: 0; padding: 1.75rem 2rem 4rem; max-width: 1280px; }

@media (max-width: 820px) {
    .layout { flex-direction: column; }
    .seitenleiste {
        width: auto; height: auto; position: sticky; top: 0; z-index: 5; flex-direction: row;
        overflow-x: auto; padding: .5rem; border-right: 0; border-bottom: 1px solid var(--linie);
    }
    .marke, .abmelden { display: none; }
    .seitenleiste a { white-space: nowrap; font-size: .9rem; }
    main { padding: 1rem 1rem 4rem; }
}

/* ---------- Bausteine ---------- */
.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kopf p { margin: .25rem 0 0; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem; min-width: 0; }
.karte + .karte { margin-top: 1rem; }
.raster { display: grid; gap: 1rem; }
.raster > .karte + .karte { margin-top: 0; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .r3, .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r-2-1 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .r2, .r3 { grid-template-columns: minmax(0, 1fr); } .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi .wert { font-size: 1.4rem; } }
.abstand { margin-top: 1rem; }

.kpi .wert { font-size: 1.9rem; font-weight: 650; line-height: 1.1; margin-top: .25rem; }
.kpi .titel { font-size: .82rem; color: var(--gedaempft); font-weight: 500; }
.kpi.klickbar { cursor: pointer; }
@media (hover: hover) { .kpi.klickbar:hover { border-color: var(--akzent); } }

button, .knopf {
    font: inherit; font-weight: 550; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
    padding: .45rem .9rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
    white-space: nowrap;
}
/* Hover nur mit echter Maus: iOS hält :hover nach dem Tippen fest – der neu gezeichnete Knopf an derselben Stelle
   (z. B. Start nach „Neu starten“) wurde sonst grau mit weißer Schrift. */
@media (hover: hover) { button:hover, .knopf:hover { background: var(--flaeche-2); text-decoration: none; } }
/* Kurzes Eindrücken nach dem Tippen (Klasse aus app.js) – nicht über :active, das färbte am iPhone beim Scrollen
   jede Zeile unter dem Finger grau. */
.gedrueckt { transform: scale(.97); filter: brightness(.92); }
/* Plan wird auf dem Server neu vorgeschlagen: alte Ansicht abdunkeln, bis der neue da ist. */
#app.wartet .karte { opacity: .45; transition: opacity .15s; pointer-events: none; }
button.primaer, .knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.primaer:hover { filter: brightness(1.05); }
button.klein, .knopf.klein { padding: .2rem .55rem; font-size: .82rem; }
button.link { border: 0; background: none; color: var(--akzent); padding: 0; font-weight: 500; }
button.gefahr { color: var(--schlecht); }
button:disabled { opacity: .55; cursor: default; }

input, select, textarea {
    font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 8px; padding: .45rem .6rem; width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
label { display: block; font-size: .85rem; font-weight: 550; margin-bottom: .75rem; }
label > input, label > select, label > textarea { margin-top: .25rem; font-weight: 400; }
.formzeile { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter > * { width: auto; }
.filter input[type=search] { min-width: 220px; flex: 1; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: .78rem; font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tr.klickbar { cursor: pointer; }
@media (hover: hover) { tr.klickbar:hover td { background: var(--flaeche-2); } }
.tabelle-scroll { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
td.r, th.r { text-align: right; white-space: nowrap; }

.chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 999px;
    font-size: .78rem; font-weight: 550; background: var(--flaeche-2); color: var(--text); white-space: nowrap;
}
.chip .punkt { width: 8px; height: 8px; border-radius: 50%; }
.chip.gut { background: var(--gut-hell); color: var(--gut); }
.chip.warn { background: var(--warn-hell); color: var(--warn); }
.chip.schlecht { background: var(--schlecht-hell); color: var(--schlecht); }
.chip.info { background: var(--info-hell); color: var(--info); }
.chip.akzent { background: var(--akzent-hell); color: var(--akzent); }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; }
.pf-chips { margin: -.4rem 0 .8rem; gap: .3rem .9rem; }
.pf-wahl { display: flex; gap: .3rem; align-items: center; margin: 0; font-weight: 500; }
.pf-wahl input { width: auto; }
.pf-chips .chip button { padding: 0 0 0 .2rem; color: var(--text-2, inherit); }
.pf-neu { display: flex; gap: .5rem; margin-bottom: .8rem; }
button.chip { border: 1px solid var(--linie); cursor: pointer; padding: .3rem .75rem; font-size: .85rem; }
button.chip.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Leistungszelle: Farbintensität nach Punkten */
.zelle { display: inline-block; min-width: 64px; padding: .15rem .45rem; border-radius: 6px; font-variant-numeric: tabular-nums; font-size: .88rem; }
.zelle small { display: block; font-size: .7rem; line-height: 1.1; }
.st-0 { background: transparent; color: var(--gedaempft); }
.st-1 { background: color-mix(in srgb, var(--gut) 8%, transparent); }
.st-2 { background: color-mix(in srgb, var(--gut) 18%, transparent); }
.st-3 { background: color-mix(in srgb, var(--gut) 30%, transparent); }
.st-4 { background: color-mix(in srgb, var(--gut) 45%, transparent); font-weight: 600; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    font-weight: 650; font-size: .85rem; background: var(--info-hell); color: var(--info);
}
.avatar.w { background: var(--schlecht-hell); color: var(--schlecht); }
.avatar.gross { width: 56px; height: 56px; font-size: 1.2rem; }
.person { display: flex; align-items: center; gap: .6rem; }
.person strong { display: block; line-height: 1.2; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: .55rem 0; border-bottom: 1px solid var(--linie); display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.liste li:last-child { border-bottom: 0; }
.leer { color: var(--gedaempft); font-size: .9rem; padding: .5rem 0; }

.stufeninfo { font-size: .86rem; margin: .5rem 0 0; background: var(--flaeche-2); border-radius: 8px; padding: .5rem .7rem; }
.einstufung td, .einstufung th { padding: .3rem .4rem; }
.einstufung select { width: auto; padding: .2rem .3rem; }
.anlauf-wert { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.hinweise { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.hinweise li { position: relative; padding: .45rem 0 .45rem 1.1rem; margin-bottom: .35rem; }
.hinweise li::before { content: ''; position: absolute; left: .1rem; top: .95rem; width: 7px; height: 7px; border-radius: 50%; background: var(--m, var(--linie)); }
.hinweise li.warnung { --m: var(--warn); }
.hinweise li.hebel { --m: var(--info); }
.hinweise li.staerke { --m: var(--gut); }
.vorschlag { margin-top: .7rem !important; }
.vorschlag { background: var(--flaeche-2); border-radius: 8px; padding: .55rem .8rem; margin: .2rem 0 .8rem; font-size: .86rem; }
.vorschlag-titel { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); margin-bottom: .2rem; }
.vorschlag ul { margin: 0; padding-left: 1.1rem; }
.vorschlag li { margin: .15rem 0; }
.empfehlung { padding: .6rem .9rem; background: var(--flaeche-2); border-radius: 8px; margin-bottom: .6rem; }
.empfehlung h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m, var(--linie)); margin-right: .45rem; vertical-align: .08em; }
.empfehlung h3 { margin: 0 0 .2rem; }
.empfehlung p { margin: 0; font-size: .9rem; }
.empfehlung.fokus { --m: var(--akzent); }
.empfehlung.staerke { --m: var(--gut); }
.empfehlung.hebel { --m: var(--info); }
.empfehlung.warnung { --m: var(--warn); }
.empfehlung.daten { --m: var(--gedaempft); }
.uebungen { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.uebungen li { margin: .15rem 0; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; overflow-x: auto; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: .5rem .75rem; color: var(--gedaempft); }
.tabs button.an { color: var(--akzent); border-color: var(--akzent); }

.diagramm { position: relative; height: 300px; }
.diagramm.klein { height: 220px; }

/* Anwesenheit */
.anwesenheit-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.anw {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--linie);
    border-radius: 10px; background: var(--flaeche); cursor: pointer; text-align: left; width: 100%;
    font-weight: 500; white-space: normal;
}
.anw .status { margin-left: auto; }
.anw.da { border-color: var(--gut); background: var(--gut-hell); }
.anw.entschuldigt { border-color: var(--warn); background: var(--warn-hell); }
.anw.fehlt { border-color: var(--schlecht); background: var(--schlecht-hell); }
.matrix td, .matrix th { padding: .3rem; text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; white-space: nowrap; }
.punkt-da, .punkt-fehlt, .punkt-ent, .punkt-leer { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.punkt-da { background: var(--gut); }
.punkt-fehlt { background: var(--schlecht-hell); border: 1px solid var(--schlecht); }
.punkt-ent { background: var(--warn); }
.punkt-leer { background: var(--flaeche-2); }
.balken { height: 8px; background: var(--flaeche-2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.balken > span { display: block; height: 100%; background: var(--akzent); border-radius: 4px; }

.station { border: 1px solid var(--linie); border-radius: 10px; padding: .8rem 1rem; }
.station h3 { display: flex; align-items: center; gap: .5rem; }
.rahmen { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .88rem; color: var(--gedaempft); }
.rahmen span { display: flex; align-items: center; gap: .35rem; }
.rahmen input { width: auto; padding: .25rem .4rem; }
.rahmen input.rtext { width: 260px; }
.block { display: grid; grid-template-columns: 70px 1fr; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--linie); }
.block:last-child { border-bottom: 0; }
.block .min { font-weight: 650; color: var(--akzent); font-variant-numeric: tabular-nums; }
.block textarea { min-height: 48px; }
.block input { font-weight: 600; margin-bottom: .3rem; }

.wk { display: grid; grid-template-columns: 78px 1fr; gap: 1rem; padding: .85rem 1rem; }
.wk + .wk { margin-top: .6rem; }
.wk.vorgemerkt { border-color: var(--akzent); }
.wk-datum { font-variant-numeric: tabular-nums; }
.wk-datum small { display: block; color: var(--gedaempft); }
.wk-titel { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; font-weight: 600; }
.wk-meta { font-size: .85rem; margin-top: .15rem; }
.wk-klassen { margin-top: .3rem; }
.wk-kinder { margin-top: .5rem; }
.kopf + .raster h2.abstand:first-child, .raster > div > h2.abstand:first-child { margin-top: 0; }
@media (max-width: 640px) { .wk { grid-template-columns: 1fr; gap: .3rem; } }
pre.export { background: var(--flaeche-2); padding: 1rem; border-radius: 8px; max-height: 480px; overflow: auto; font-size: .8rem; white-space: pre-wrap; }

#toast {
    position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(150%);
    background: var(--text); color: var(--bg); padding: .65rem 1.1rem; border-radius: 10px; font-weight: 500;
    transition: transform .25s, visibility .25s; z-index: 50; max-width: calc(100vw - 2rem); visibility: hidden;
    pointer-events: none;   /* nur Hinweis – ein Tipp darauf soll die Kachel darunter treffen (Schnellerfassung) */
}
#toast.sichtbar { transform: translateX(-50%) translateY(0); visibility: visible; }
#toast.fehler { background: var(--schlecht); color: #fff; }

dialog {
    border: 1px solid var(--linie); border-radius: 14px; padding: 0; width: min(620px, calc(100vw - 2rem));
    background: var(--flaeche); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
dialog::backdrop { background: rgba(10, 12, 16, .45); }
dialog form { padding: 1.25rem 1.5rem; }
dialog.breit { width: min(1000px, calc(100vw - 2rem)); }
.dialoginhalt { padding: 1.25rem 1.5rem; }
.vergleichsliste tr.eigener td { background: var(--flaeche-2); font-weight: 600; }
.vergleichsliste tr.gewaehlt td { background: var(--akzent-hell); font-weight: 700; }
.vergleichsliste thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 2; box-shadow: 0 1px 0 var(--linie); }
.kopf .aktionen select { width: auto; }
.talenttabelle td, .talenttabelle th { padding: .35rem .4rem; }
.talenttabelle tr.gruppenkopf td { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gedaempft); font-weight: 600; padding-top: .9rem; }
button.zelle { border: 0; cursor: pointer; font: inherit; text-align: right; min-width: 78px; }
button.zelle:hover { outline: 2px solid var(--akzent); }
dialog .fuss { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

.anmeldung { max-width: 380px; margin: 12vh auto; }
.anmeldung .marke { padding: 0 0 1rem; }
.hinweis { background: var(--info-hell); color: var(--text); border-radius: 8px; padding: .7rem .9rem; font-size: .88rem; }
.hinweis.warn { background: var(--warn-hell); }
.laden { color: var(--gedaempft); }

@media print {
    .seitenleiste, .aktionen, .keindruck, #toast { display: none !important; }
    main { padding: 0; max-width: none; }
    .karte { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    body { background: #fff; color: #000; }
}

/* ---------- Trainingsmodus am Handy ---------- */
body.heute main { max-width: 640px; margin: 0 auto; padding: .75rem .75rem 6rem; }
@media (max-width: 820px) { body.heute .seitenleiste { display: none; } }
.heute-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin-bottom: .8rem; }
.stepper button { font-size: .78rem; padding: .45rem .2rem; justify-content: center; white-space: normal; line-height: 1.15; }
.stepper button.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.heute-liste { display: grid; gap: .4rem; }
.heute-suche { position: sticky; top: calc(.4rem + env(safe-area-inset-top)); z-index: 5; margin: 0 0 .6rem; font-size: 16px; padding: .65rem .8rem; border-radius: 12px; box-shadow: 0 0 0 .4rem var(--bg); }
.heute-kind[hidden] { display: none; }
.heute-kind { justify-content: space-between; padding: .9rem 1rem; font-size: 1.05rem; width: 100%; }
.heute-kind.da { background: var(--gut-hell); border-color: var(--gut); }
.heute-kind.fehlt { background: var(--schlecht-hell); border-color: var(--schlecht); }
.heute-kind.entschuldigt { background: var(--warn-hell); border-color: var(--warn); }
.heute-kind .status { font-weight: 700; }
.heute-leiste { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem; justify-content: center; padding: .7rem .75rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--flaeche); border-top: 1px solid var(--linie); z-index: 20; }
.heute-leiste button { flex: 1; max-width: 300px; justify-content: center; padding: .75rem; font-size: 1rem; }
.heute-gruppe + .heute-gruppe, .karte + .heute-gruppe { margin-top: .7rem; }
.heute-gruppe-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.heute-kinder { display: grid; gap: .3rem; margin-top: .6rem; }
.heute-zeile { display: block; text-align: left; width: 100%; white-space: normal; padding: .55rem .7rem; font-weight: 500; }
.heute-zeile small { display: block; color: var(--gedaempft); font-weight: 400; margin-top: .15rem; }
.heute-uebungen details { border-top: 1px solid var(--linie); padding: .45rem 0; font-size: .9rem; }
.heute-uebungen summary { cursor: pointer; }
.heute-uebungen ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.heute-kinderliste { margin-top: .6rem; border-top: 1px solid var(--linie); padding-top: .5rem; }
.heute-kinderliste > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--gedaempft); }
.heute-kinderliste .heute-kinder { margin-top: .4rem; }
.abschluss-fortschritt { height: 4px; border-radius: 2px; background: var(--flaeche-2); margin-bottom: .7rem; overflow: hidden; }
.abschluss-fortschritt span { display: block; height: 100%; background: var(--akzent); }
.abschluss-kind h2 { font-size: 1.6rem; margin: .4rem 0 1rem; }
.abschluss-kind .stufen-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.stufen-segmente.gross .seg { height: 52px; font-size: 1.15rem; border-radius: 10px; }
.abschluss-stufe { margin: .8rem 0 .2rem; }
.abschluss-kriterium { font-size: .85rem; margin: 0; }
.schnell-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .8rem 0; }
.schnell-knoepfe button { justify-content: center; padding: .8rem .4rem; white-space: normal; }
.schnell-knoepfe button.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.lernpfad h2 { margin-top: .5rem; }
.stufe .stufe-kopf { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.stufe p { margin: .25rem 0; font-size: .92rem; }
.uebungstabelle { margin-top: .6rem; }
.uebungstabelle td { vertical-align: top; }
@media (max-width: 640px) { .uebungstabelle thead { display: none; } .uebungstabelle td { display: block; border: 0; padding: .15rem 0; } .uebungstabelle tr { display: block; border-bottom: 1px solid var(--linie); padding: .4rem 0; } }
@media print { .lernpfad[hidden] { display: none !important; } .lernpfad { break-before: page; } .lernpfad:first-child { break-before: auto; } }

/* ---------- Baukasten ---------- */
.baukasten-liste { display: grid; gap: .3rem; }
.baukasten-eintrag { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; padding: .35rem 0; border-bottom: 1px dashed var(--linie); font-size: .9rem; }
.baukasten-knoepfe { display: inline-flex; gap: .25rem; align-items: center; flex: none; font-size: .85rem; }
.baukasten-knoepfe input { padding: .2rem .3rem; }
.baukasten-bloecke { display: grid; gap: .6rem; margin: .6rem 0; }
.baukasten-kopf { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; }
.baukasten-text { white-space: pre-wrap; font-size: .9rem; margin: .3rem 0 0; }
.baukasten-liste > button, .baukasten-bloecke > .aktionen { justify-self: start; margin-top: .3rem; }

/* ---------- Handy: feste Leiste unten, nichts verrutscht ---------- */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
button, .knopf, .tabbar a { -webkit-tap-highlight-color: transparent; }
.tabbar { display: none; }
.blatt-hintergrund[hidden] { display: none; }

@media (max-width: 820px) {
    /* clip statt hidden: hidden macht body zum Scroll-Container, dann bleiben sticky-Elemente (Speichern-Leiste) nicht stehen. */
    html, body { overflow-x: clip; overscroll-behavior: none; }
    body { font-size: 16px; }
    .layout { display: block; min-height: 0; }
    .seitenleiste, .seitenleiste[hidden] { display: none !important; }
    main { padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(88px + env(safe-area-inset-bottom)); max-width: none; }
    h1 { font-size: 1.4rem; }
    .kopf { margin-bottom: 1rem; gap: .75rem; }
    .kopf > div:first-child { min-width: 0; }
    .aktionen { width: 100%; }
    /* Athleten: „+ Athlet“ oben rechts neben der Überschrift, die übrigen Knöpfe in einer Zeile darunter. */
    .kopf-athleten { position: relative; }
    .kopf-athleten #neu { position: absolute; top: 0; right: 0; }
    .kopf-athleten .aktionen { flex-wrap: nowrap; gap: .4rem; }
    .kopf-athleten .aktionen > button:not(#neu) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: .7rem; padding-right: .7rem; }
    .karte { padding: .95rem 1rem; overflow-x: auto; }
    /* Eingabefelder ab 16px, sonst zoomt iOS beim Antippen hinein und die Seite verrutscht. */
    input, select, textarea { font-size: 16px; }
    .tabs { margin-left: -.25rem; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    img, canvas, svg { max-width: 100%; }

    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
        background: var(--flaeche); border-top: 1px solid var(--linie);
        padding: 4px 4px env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
    }
    .tabbar[hidden] { display: none; }
    .tabbar a, .tabbar button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px;
        border: 0; background: none; border-radius: 10px; padding: 0; font: 600 11px/1.1 system-ui, -apple-system, sans-serif;
        color: var(--gedaempft); text-decoration: none;
    }
    .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .tabbar .aktiv { color: var(--akzent); }
    .tabbar a:hover, .tabbar button:hover { background: none; text-decoration: none; }

    /* Trainingsmodus: Leiste mit den Schritt-Knöpfen sitzt über der Menüleiste. */
    body.heute main { padding: calc(.75rem + env(safe-area-inset-top)) .75rem calc(160px + env(safe-area-inset-bottom)); }
    .heute-leiste { bottom: calc(60px + env(safe-area-inset-bottom)); padding-bottom: .7rem; }

    /* Terminlisten: Datum und Zeit oben, Stand darunter – statt vier gequetschter Spalten. */
    .terminliste tr { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
    .terminliste td { border: 0; padding: 0; }
    .terminliste td:nth-child(2) { text-align: right; color: var(--gedaempft); }
    .terminliste td:nth-child(3):empty, .terminliste td:nth-child(4):empty { display: none; }
    .terminliste td:nth-child(3) { margin-top: .25rem; }
    .terminliste td:nth-child(4) { margin-top: .25rem; text-align: right; font-size: .88rem; }

    /* Athletenlisten: Name oben, darunter die vier Bereiche nebeneinander – ohne seitliches Wischen. */
    .athletenliste thead, .athletenliste .m-weg { display: none; }
    .athletenliste tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem .4rem; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
    .athletenliste td { border: 0; padding: 0; min-width: 0; }
    .athletenliste td:first-child { grid-column: 1 / -1; }
    .athletenliste td.leer { grid-column: 1 / -1; }
    .athletenliste .m-wert::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .athletenliste .zelle { display: block; min-width: 0; width: 100%; text-align: left; font-size: .85rem; padding: .25rem .35rem; white-space: nowrap; overflow: hidden; }
    .tabelle-scroll:has(.athletenliste) { overflow: visible; }
    .karte:has(.athletenliste) { overflow: visible; }

    /* Reiter umbrechen statt seitlich weiterlaufen. */
    .tabs { flex-wrap: wrap; overflow: visible; margin-left: 0; gap: .35rem; border-bottom: 0; }
    .tabs button { border: 1px solid var(--linie); border-radius: 999px; padding: .4rem .8rem; font-size: .88rem; background: var(--flaeche); }
    .tabs button.an { background: var(--akzent); border-color: var(--akzent); color: #fff; }

    .terminliste td:first-child { white-space: nowrap; }

    body.vollbild .tabbar { display: none; }
    /* Erfassen: „Andere Disziplin“ fest direkt über der Menüleiste (Höhe der Leiste: 61 px plus Home-Balken). */
    .erf-andere { position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 29; margin: 0;
        padding: .6rem 1rem; background: var(--bg); border-top: 1px solid var(--linie); }
    .erf-diszis { margin-bottom: 4.5rem; }
    body.vollbild main { padding: 0; }
}

/* Unteres Blatt (Mehr-Menü, Zahlenfeld): fest, ohne Wischen. */
.blatt-hintergrund { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 20, .45); display: flex; align-items: flex-end; justify-content: center; }
.blatt {
    width: 100%; max-width: 520px; background: var(--flaeche); border-radius: 18px 18px 0 0;
    padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom)); display: grid; gap: 2px;
}
.blatt > a, .blatt > button.link { display: block; padding: .85rem .5rem; font-size: 1.05rem; color: var(--text); border-bottom: 1px solid var(--linie); text-align: left; }
.blatt > a:last-of-type { border-bottom: 0; }
.blatt > button.link { color: var(--schlecht); border-bottom: 0; margin-top: .25rem; }

/* ---------- Schnellerfassung ---------- */
.erf-diszis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.erf-diszis button { flex-direction: column; align-items: flex-start; gap: .1rem; padding: 1rem; min-height: 78px; border-radius: 14px; font-size: 1.15rem; }
.erf-diszis small { font-size: .8rem; font-weight: 500; color: var(--gedaempft); }
.erf-andere { display: flex; gap: .5rem; margin-top: .8rem; }
.erf-andere input { flex: 1; min-width: 0; margin: 0; }
.erf-weiter { width: 100%; justify-content: space-between; padding: 1rem; margin-bottom: .8rem; border-radius: 14px; background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }

.erf { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.erf-leiste {
    position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .5rem;
    padding: calc(.5rem + env(safe-area-inset-top)) .75rem .5rem; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.erf-titel { text-align: center; line-height: 1.2; min-width: 0; }
.erf-titel strong { display: block; font-size: 1.1rem; }
.erf-titel small { font-size: .8rem; }
.erf-zurueck { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 1.5rem; border-radius: 12px; }
.erf-uhr { position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 9; background: var(--bg); padding: .75rem .75rem .6rem; text-align: center; border-bottom: 1px solid var(--linie); }
.erf-zeit { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-bottom: .6rem; }
.erf-uhrknoepfe { display: flex; gap: .5rem; justify-content: center; }
.erf-uhrknoepfe button { flex: 1; max-width: 240px; justify-content: center; padding: .85rem; font-size: 1.1rem; border-radius: 12px; }
button.erf-start, button.erf-start:hover { background: var(--gut); border-color: var(--gut); color: #fff; }
button.erf-stopp, button.erf-stopp:hover { background: var(--schlecht); border-color: var(--schlecht); color: #fff; }
.erf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem; }
@media (min-width: 560px) { .erf-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.erf-kind {
    display: grid; grid-template-rows: auto auto auto; justify-items: start; align-content: center; gap: 1px;
    height: 88px; padding: .5rem .75rem; border-radius: 14px; text-align: left; white-space: nowrap; overflow: hidden;
    user-select: none; -webkit-user-select: none;
}
@media (hover: hover) { .erf-kind:hover { background: var(--flaeche); } }
.erf-name { font-size: 1rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.erf-wert { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gedaempft); line-height: 1.15; }
.erf-pb { font-size: .75rem; color: var(--gedaempft); font-weight: 500; }
.erf-pb b { color: var(--gut); }
.erf-kind.fertig { background: var(--gut-hell); border-color: var(--gut); }
.erf-kind.fertig .erf-wert { color: var(--text); }
.erf-kind.blitz { animation: erf-blitz .5s ease-out; }
@keyframes erf-blitz { from { background: var(--gut); } }
.erf-hinweis { font-size: .85rem; text-align: center; padding: 0 1rem 2rem; margin: 0; }
/* Läufe/Gruppen: wenige Kinder, große Kacheln; Auswahl als Blatt mit Antipp-Kacheln (Zahl = Reihenfolge/Bahn). */
.erf-gruppenleiste { display: flex; gap: .5rem; padding: .75rem .75rem 0; }
.erf-gruppenleiste button { flex: 1; min-width: 0; justify-content: center; min-height: 44px; border-radius: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erf-gruppenleiste button.klein { flex: 0 1 auto; }
.erf-raster.gross .erf-kind { height: 128px; }
.erf-raster.gross .erf-name { font-size: 1.2rem; }
.erf-raster.gross .erf-wert { font-size: 1.8rem; }
.erf-wahlblatt { max-height: 88vh; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.erf-wahlliste { overflow-y: auto; padding: .25rem 0 .5rem; }
.erf-wahlsuche { margin: .35rem 0 .2rem; font-size: 16px; padding: .6rem .75rem; border-radius: 12px; }
#wahlstand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
.erf-wahltitel { font-size: .85rem; margin: .8rem 0 .4rem; }
.erf-wahlraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
@media (min-width: 560px) { .erf-wahlraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.erf-wahl { justify-content: flex-start; gap: .45rem; min-height: 52px; padding: .5rem .7rem; border-radius: 12px; font-size: 1rem; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; user-select: none; -webkit-user-select: none; }
.erf-wahl span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.erf-wahl small { margin-left: auto; color: var(--gedaempft); font-weight: 500; font-variant-numeric: tabular-nums; }
.erf-wahl b { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--akzent); color: #fff; font-size: .85rem; }
.erf-wahl.an { background: var(--akzent-hell); border-color: var(--akzent); }

.zahlenfeld { gap: .6rem; }
.zf-kopf { display: flex; justify-content: space-between; align-items: center; }
.zf-kopf small { display: block; color: var(--gedaempft); }
.zf-kopf strong { font-size: 1.15rem; }
.zf-anzeige { font-size: 2.6rem; font-weight: 700; text-align: center; padding: .4rem; border-radius: 12px; background: var(--flaeche-2); min-height: 4rem; }
.zf-anzeige small { font-size: 1.2rem; color: var(--gedaempft); }
.zf-versuche { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 2.2rem; align-items: center; margin: .2rem 0 .3rem; font-size: .95rem; }
.zf-versuch { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .2rem .15rem .6rem; border-radius: 999px; background: var(--flaeche-2); }
.zf-versuch.bester { background: var(--gut-hell); box-shadow: inset 0 0 0 1px var(--gut); }
.zf-versuch button { min-height: 32px; min-width: 32px; padding: 0 .5rem; justify-content: center; border-radius: 999px; font-size: .85rem; }
.zf-tasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.zf-tasten button { height: 56px; justify-content: center; font-size: 1.5rem; font-weight: 600; border-radius: 12px; }
.zf-aktionen { display: flex; gap: .5rem; }
.zf-aktionen button { flex: 1; justify-content: center; padding: .9rem; font-size: 1.05rem; border-radius: 12px; }

/* ---------- Wissen: Ordnerbaum links, Vorschau rechts ---------- */
.wissen { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.wissen .karte + .karte { margin-top: 0; }
.wissen-links { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .6rem; max-height: calc(100vh - 2rem); padding: .9rem; }
.wissen-suche input { font-size: 1rem; padding: .6rem .75rem; }
.wissen-knoepfe { display: flex; gap: .4rem; }
.wissen-baum { overflow-y: auto; margin: 0 -.5rem; padding: 0 .5rem; min-height: 0; }
.wissen-ordnerkopf { display: flex; align-items: center; }
.wissen-auf {
    flex: 1; min-width: 0; justify-content: flex-start; border: 0; background: none; padding: .4rem .35rem; font-weight: 650;
    border-radius: 6px; white-space: normal; text-align: left;
}
.wissen-auf small { font-weight: 500; margin-left: auto; padding-left: .4rem; }
.wissen-ordnerkopf.tiefe-1 .wissen-auf { font-weight: 550; font-size: .92rem; }
.wissen-auf .pfeil { display: inline-block; width: 1rem; color: var(--gedaempft); transition: transform .15s; font-size: 1.1rem; line-height: 1; }
.wissen-ordner.offen > .wissen-ordnerkopf .pfeil { transform: rotate(90deg); }
.wissen-ordneredit { border: 0; background: none; padding: .2rem .45rem; color: var(--gedaempft); opacity: .5; }
.wissen-ordnerkopf:hover .wissen-ordneredit { opacity: 1; }
.wissen-inhalt { display: none; padding-left: 1rem; }
.wissen-ordner.offen > .wissen-inhalt { display: block; }
.wissen-eintrag { display: block; padding: .35rem .5rem; border-radius: 6px; color: var(--text); font-size: .9rem; line-height: 1.3; }
.wissen-eintrag:hover, .wissen-treffer:hover { background: var(--flaeche-2); text-decoration: none; }
.wissen-eintrag.aktiv, .wissen-treffer.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.wissen-trefferzahl { font-size: .8rem; margin: 0 0 .3rem; }
.wissen-treffer { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--text); border-bottom: 1px solid var(--linie); }
.wissen-treffer strong { display: block; line-height: 1.3; }
.wissen-treffer small { display: block; font-size: .75rem; }
.wissen-treffer span { display: block; font-size: .83rem; color: var(--gedaempft); line-height: 1.35; margin-top: .15rem; }
.wissen-rechts { padding: 1.4rem 1.75rem 1.75rem; min-height: 50vh; }
.wissen-kopfzeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.wissen-pfad { flex: 1; font-size: .85rem; min-width: 0; }
.wissen-titel { margin-bottom: 1rem; }
.wissen-text { max-width: 72ch; line-height: 1.6; }
.wissen-text h3 { font-size: 1rem; margin: 1.3rem 0 .4rem; color: var(--akzent); }
.wissen-text p { margin: 0 0 .7rem; }
.wissen-text ul, .wissen-text ol { margin: 0 0 .7rem; padding-left: 1.3rem; }
.wissen-text li { margin: .2rem 0; }
.wissen-text .merksatz { background: var(--akzent-hell); border-radius: 8px; padding: .65rem .9rem; margin: 1.1rem 0 .5rem; font-weight: 550; }
.wissen-stichworte { margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: .6rem; }
.wissen-leer { max-width: 52ch; }
.wissen-textfeld { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; line-height: 1.5; min-height: 320px; }
.wissen-editor .fuss { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.wissen-vorschau-auf summary { cursor: pointer; color: var(--gedaempft); font-size: .88rem; margin-bottom: .5rem; }
.wissen-treffer span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.merksatz.oben { background: var(--akzent-hell); border-radius: 8px; padding: .65rem .9rem; margin: -.3rem 0 1rem; font-weight: 600; max-width: 72ch; }
.wissen-sprung { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wissen-sprung:empty { display: none; }
.wissen-text h3 { scroll-margin-top: 1rem; }
.nur-handy { display: none; }
@media (max-width: 820px) {
    /* Handy: erst Suche und Ordner, nach dem Antippen nur der Eintrag. */
    .wissen { display: block; }
    .wissen-links { position: static; max-height: none; padding: .8rem; }
    .wissen-baum { overflow: visible; }
    .wissen.mit-auswahl .wissen-links { display: none; }
    .wissen:not(.mit-auswahl) .wissen-rechts { display: none; }
    .wissen-rechts { padding: 1rem; min-height: 0; overflow: visible; }
    .wissen-suche { position: sticky; top: 0; z-index: 2; background: var(--flaeche); padding-top: .1rem; }
    .wissen-auf, .wissen-eintrag { padding-top: .6rem; padding-bottom: .6rem; }
    .wissen-sprung { margin: 0 0 .8rem; }
    .wissen-ordneredit { opacity: 1; padding: .5rem .6rem; }
    .wissen-textfeld { font-size: 16px; }
    .nur-handy { display: inline-flex; }
}

/* ---------- Handy: kompakte Kopfzeilen ---------- */
.nur-desktop { display: inline; }
.inaktive-wahl { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; }
@media (max-width: 820px) {
    .nur-desktop { display: none !important; }
    .zurueck-link { font-size: .85rem; font-weight: 550; margin-bottom: .2rem; }
    .kopf p { font-size: .9rem; }
    /* Aktionen oben als kleine Knöpfe in einer Reihe statt großer Kacheln untereinander. */
    .kopf > .aktionen { gap: .35rem; flex-wrap: wrap; }
    .kopf > .aktionen > button, .kopf > .aktionen > .knopf {
        padding: .32rem .7rem; font-size: .84rem; border-radius: 999px; min-height: 34px;
    }
    /* Filter so breit wie ihr Inhalt, die Suche nimmt rechts den Rest. */
    .athletenfilter { display: flex; flex-wrap: nowrap; gap: .4rem; margin-bottom: .75rem; }
    .athletenfilter select { flex: 0 1 auto; width: auto; max-width: 30%; padding: .4rem .45rem; }
    .athletenfilter input[type=search] { flex: 1 1 40%; width: auto; min-width: 0; }
    .athletenfilter .inaktive-wahl { display: none; }
}

/* ---------- Trainingsseite: einklappen statt scrollen ---------- */
.klappkarte > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.klappkarte > summary::-webkit-details-marker { display: none; }
.klapp-pfeil { font-size: 1.4rem; line-height: 1; color: var(--gedaempft); transition: transform .15s; }
.klappkarte[open] .klapp-pfeil { transform: rotate(90deg); }
.anw-fertig { margin-top: .8rem; width: 100%; justify-content: center; }
details.vorschlag > summary { cursor: pointer; margin-bottom: 0; }
details.vorschlag[open] > summary { margin-bottom: .3rem; }
details.stufeninfo > summary { cursor: pointer; }
details.stufeninfo[open] > summary { margin-bottom: .25rem; }
.ue-titel { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--text); white-space: normal; text-align: left; display: inline; cursor: pointer; }
.ue-titel:hover { background: none; text-decoration: underline; }
.ue-mehr { margin-left: .35rem; color: var(--akzent); font-weight: 500; }
.inhaltfenster { max-width: 560px; }
.inhaltfenster h3 { margin: 1rem 0 .3rem; }
.inhaltfenster ul { margin: 0; padding-left: 1.2rem; }
.gruppenreiter { display: none; }
@media (max-width: 820px) {
    .gruppenreiter { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .8rem; }
    .gruppenreiter button { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; padding: .45rem .7rem; border-radius: 10px; }
    .gruppenreiter button small { font-weight: 500; color: var(--gedaempft); }
    .gruppenreiter button.an { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }
    .gruppenraster .station.reiter-aus { display: none; }
    .gruppenraster { margin-top: .6rem; }
    .ue-text { display: none; }
    .ue-mehr { display: inline; }
    .baukasten-eintrag { padding: .5rem 0; }
    .rahmen { display: grid; gap: .4rem; }
    .rahmen span { display: grid; grid-template-columns: auto 56px auto minmax(0, 1fr); min-width: 0; }
    .rahmen input[data-rahmen-text] { width: 100%; min-width: 0; }
    .klapptext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
    .inhaltfenster { padding: 1.1rem 1.1rem; }
}

/* ---------- Heute: zwei Kinder nebeneinander, Gruppen wählen ---------- */
.heute-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.heute-kind { padding: .75rem .8rem; font-size: 1rem; text-align: left; white-space: normal; line-height: 1.25; }
.heute-kind > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.gruppenzahl { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-bottom: .6rem; background: var(--flaeche-2); border-radius: 10px; padding: .25rem; }
.gruppenzahl button { justify-content: center; border: 0; background: none; padding: .5rem; font-size: .92rem; }
.gruppenzahl button.an { background: var(--flaeche); box-shadow: var(--schatten); color: var(--akzent); }
.gruppenwahl { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 700; flex: 1; min-width: 0; }
.gruppenwahl span { white-space: nowrap; }
.gruppenwahl select { width: auto; flex: 1; min-width: 0; font-weight: 600; padding: .35rem .5rem; }

/* Als App auf dem Homescreen: Der Bereich unter der Statusleiste bekommt eine feste Fläche, damit iOS dort
   keinen Inhalt verwischt durchscheinen lässt, und der Seitenkopf rückt ein Stück darunter. */
@media (display-mode: standalone) and (max-width: 820px) {
    body::before {
        content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); z-index: 40;
        background: var(--bg);
    }
    main, body.heute main { padding-top: calc(1.25rem + env(safe-area-inset-top)); }
}

/* Eigene Aufgabe für Kinder, die zwei oder mehr Stufen von der Gruppe entfernt sind */
.eigene-aufgabe { font-size: .86rem; margin: .5rem 0 0; background: var(--flaeche-2); border-radius: 8px; padding: .45rem .7rem; }
.eigene-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.eigene-aufgabe details { margin-top: .3rem; }
.eigene-aufgabe summary { cursor: pointer; }
.eigene-aufgabe ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.testtag { font-size: .88rem; background: var(--akzent-hell); border-radius: 8px; padding: .55rem .75rem; margin: .6rem 0 0; }
.testtag .baukasten-eintrag { align-items: center; }

/* Athletenseite: Technik-Stufen als Stufenleiste (antippen = Arbeitsstufe setzen) */
.stufenleiste { padding: .55rem 0; border-top: 1px solid var(--linie); }
.stufenleiste:first-of-type { border-top: 0; }
.stufen-kopf { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; font-size: .92rem; margin-bottom: .35rem; }
.stufen-kopf .gedaempft { font-size: .8rem; text-align: right; }
.stufen-segmente { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.stufen-segmente .seg { height: 30px; padding: 0; border-radius: 6px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--gedaempft); font-size: .8rem; font-weight: 600; justify-content: center; }
.stufen-segmente .seg.fertig { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.stufen-segmente .seg.aktuell { background: var(--akzent-hell); border: 2px solid var(--akzent); color: var(--akzent); }
.anlauf-knoepfe { margin: .2rem 0 1rem; }
details.aufklapp > summary { cursor: pointer; }
details.aufklapp[open] > summary { margin-bottom: .2rem; }

/* Athletenseite am Handy: Kennzahlen als kleine, ruhige Kacheln */
@media (max-width: 820px) {
    .athlet-kpis { gap: .45rem; }
    .athlet-kpis .kpi { padding: .5rem .65rem; }
    .athlet-kpis .kpi .titel { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
    .athlet-kpis .kpi .wert, .athlet-kpis .kpi .wert[style] { font-size: 1rem !important; margin-top: .1rem; }
    .athlet-kpis .kpi small { display: block; font-size: .7rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

.stufen-pruefung { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .9rem; }
.stufen-pruefung li { margin-bottom: .45rem; }

/* Heimplan-Fenster: Herunterladen und Teilen nebeneinander, Schließen darunter – passt auch aufs Handy */
#heimform .fuss { flex-wrap: wrap; }
#heimform .fuss button { flex: 1 1 40%; justify-content: center; }
#heimform .fuss #heimzu { order: 3; flex-basis: 100%; }

/* ---------- Wettkampftag ---------- */
.wk-naechstes-zeile { display: flex; gap: .9rem; align-items: center; margin-top: .3rem; font-size: 1.05rem; }
.wk-uhr { font-weight: 700; font-size: 1.15rem; color: var(--akzent); min-width: 3.2rem; }
.wk-ablauf { display: grid; }
.wk-ablauf-zeile { display: flex; gap: .9rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.wk-ablauf-zeile:last-child { border-bottom: 0; }
.wk-ablauf-zeile.vorbei { opacity: .45; }
.wk-ablauf-zeile.jetzt { background: var(--akzent-hell); margin: 0 -.6rem; padding-left: .6rem; padding-right: .6rem; border-radius: 8px; }
.wk-kinder { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wk-kind { border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .75rem; }
.wk-kind-kopf { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wk-erster { margin-left: auto; font-size: .85rem; font-weight: 600; }
.wk-wettbewerbe { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.wk-zeiten { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .45rem; font-size: .86rem; }
.wk-zeiten .zahl { font-weight: 700; }
.wk-dateien { display: grid; gap: .35rem; }
.wk-dateien a { padding: .45rem 0; border-bottom: 1px dashed var(--linie); }
.wk-zeitplan { font-size: .85rem; display: grid; gap: .15rem; margin-top: .4rem; }
.wk-zeitplan .zahl { font-weight: 700; display: inline-block; min-width: 3rem; }
@media (max-width: 820px) { .wk-kinder { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 800 m Zwischenzeiten ---------- */
.zz-uhr-karte { text-align: center; position: sticky; top: calc(.5rem + env(safe-area-inset-top)); z-index: 5; }
.zz-uhr { font-size: 3rem; font-weight: 750; letter-spacing: .02em; line-height: 1.1; }
.zz-uhr-knoepfe { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.zz-uhr-knoepfe button { min-width: 120px; justify-content: center; padding: .6rem 1rem; font-size: 1rem; }
.zz-liste { display: grid; gap: .6rem; margin-top: .8rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.zz-liste .karte + .karte { margin-top: 0; }
.zz-kind { padding: .7rem .8rem; }
.zz-kopf { display: flex; gap: .5rem; align-items: stretch; }
.zz-tipp { flex: 1; min-width: 0; justify-content: space-between; flex-wrap: wrap; white-space: normal; text-align: left; padding: .6rem .7rem; font-size: 1.05rem; background: var(--akzent-hell); border-color: var(--akzent); }
.zz-tipp:disabled { background: var(--flaeche-2); border-color: var(--linie); opacity: 1; }
.zz-urteil { font-size: .82rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.zz-ziel { margin: 0; width: 88px; font-size: .75rem; }
.zz-ziel input { padding: .35rem .45rem; text-align: center; font-variant-numeric: tabular-nums; }
.zz-marken { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; margin: .5rem 0 .3rem; }
.zz-marke { text-align: center; background: var(--flaeche-2); border-radius: 8px; padding: .3rem .15rem; line-height: 1.2; }
.zz-marke small { display: block; font-size: .68rem; color: var(--gedaempft); }
.zz-marke .zahl { font-weight: 650; font-size: .9rem; }
.langsam { background: var(--schlecht-hell) !important; color: var(--schlecht); }
.schnell { background: var(--warn-hell) !important; color: var(--warn); }
.passt { background: var(--gut-hell) !important; color: var(--gut); }
.zz-marke.langsam small, .zz-marke.schnell small, .zz-marke.passt small { color: inherit; }
@media (max-width: 820px) { .zz-liste { grid-template-columns: minmax(0, 1fr); } .zz-uhr { font-size: 2.6rem; } }
.zz-endzeit { flex: none; padding: .4rem .6rem; font-size: .85rem; border-color: var(--gut); color: var(--gut); }

/* ---------- Halle oder Stadion, Dauerlauf draußen, Lauf-ABC ---------- */
.ortwahl { max-width: 260px; margin: .5rem 0 .4rem; }
.heute-ort { margin: .2rem 0 .6rem; }
.heute-ort .ortwahl { max-width: none; margin: 0 0 .4rem; }
.dauerlauf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: .2rem 0 .4rem; }
.dauerlauf-aus { font-size: .82rem; margin: 0 0 .3rem; }
.aufbau { font-size: .85rem; margin: .4rem 0 0; }
.halle-hinweis { font-size: .8rem; margin: .2rem 0 0; }
.abc { margin: .5rem 0; }
.abc-titel { font-size: .88rem; }
.abc-plus { width: auto; max-width: 100%; margin-top: .3rem; padding: .3rem .5rem; font-size: .85rem; }

/* Einstellungen (seiteEinstellungen) */
.kopierfeld { display: flex; gap: .5rem; margin: 0 0 .8rem; }
.kopierfeld input { flex: 1; min-width: 0; margin: 0; font-size: .85rem; }
.einst-zeile { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--linie); }
.einst-zeile > div { min-width: 0; }
.einst-zeile small { display: block; color: var(--gedaempft); }
.zeitzeile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.zeitzeile select, .zeitzeile input { margin: 0; min-width: 0; width: 100%; }
.zeitzeile .bis { color: var(--gedaempft); }
.zeit-weg { padding: .3rem .55rem; }
@media (max-width: 820px) {
    /* Speichern bleibt über der Menüleiste sichtbar statt am Ende der langen Seite. */
    .einst-speichern { position: sticky; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 20; margin: 1rem -1rem 0; padding: .6rem 1rem; background: var(--bg); border-top: 1px solid var(--linie); }
    .einst-speichern button { flex: 1; justify-content: center; }
    .zeitzeile { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "wt wt wt weg" "beginn bis ende ."; gap: .35rem .4rem;
        padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
    .zeitzeile .wt { grid-area: wt; }
    .zeitzeile .beginn { grid-area: beginn; }
    .zeitzeile .bis { grid-area: bis; }
    .zeitzeile .ende { grid-area: ende; }
    .zeitzeile .zeit-weg { grid-area: weg; }
}

/* ---------- Handy: einfache Ansichten (Training, Lernpfade) ---------- */
.nur-handy-block, .plan-ansicht { display: none; }
.plan-zurueck { margin-bottom: .6rem; }
details.stufe > summary { list-style: none; cursor: pointer; }
details.stufe > summary::-webkit-details-marker { display: none; }
.stufe-aktionen { display: flex; gap: .4rem; margin: .1rem 0 .4rem; }
@media (max-width: 820px) {
    .nur-gross { display: none !important; }
    .nur-handy-block { display: block; }
    /* Anwesenheit: zwei Spalten, kompakt */
    .anwesenheit-liste { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .anw { padding: .5rem .55rem; gap: .45rem; min-height: 3rem; font-size: .92rem; line-height: 1.2; }
    .anw small { display: none; }
    .anw .avatar { width: 28px; height: 28px; font-size: .7rem; flex: none; }
    /* Plan: Übersicht statt Editor */
    #plankarte:not(.bearbeiten) .plan-editor { display: none; }
    #plankarte:not(.bearbeiten) .plan-ansicht { display: block; }
    .plan-ansicht-kopf { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
    .plan-ansicht-kopf h2 { margin: 0; }
    .plan-ansicht h3 { font-size: 1rem; margin: 1.1rem 0 .45rem; }
    .plan-heute { display: flex; justify-content: center; margin-top: .8rem; }
    .plan-gruppe { border-top: 1px solid var(--linie); margin-top: 1rem; }
    .plan-gruppe .chips { margin: .4rem 0 .6rem; }
    .plan-abc { margin-top: 1rem; padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); }
    .plan-abc > summary { cursor: pointer; }
    .plan-ausklang { margin: 1rem 0 0; }
    /* Lernpfade: zum Nachlesen – Auswahl als Liste, Stufen aufklappen, Bearbeiten am Rechner */
    #pfadwahl-handy { width: 100%; font-size: 1rem; padding: .7rem .8rem; margin: .6rem 0 1rem; }
    .lernpfad .stufenleiter, .lernpfad .keindruck, .lp-meta span + span { display: none !important; }
    .lernpfad .lp-kopf h2 { font-size: 1.3rem; }
    details.stufe { padding: 0; }
    details.stufe > summary { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .95rem 1rem; }
    details.stufe > summary h3 { font-size: 1rem; margin: 0; }
    details.stufe > summary::after { content: '›'; font-size: 1.3rem; color: var(--gedaempft); transition: transform .15s; }
    details.stufe[open] > summary::after { transform: rotate(90deg); }
    details.stufe > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
    details.stufe[open] { padding-bottom: .9rem; }
    .stufe-zahl { margin-left: auto; font-size: .8rem; color: var(--gedaempft); white-space: nowrap; }
    .stufe .baukasten-eintrag { padding: .55rem 0; }
}
@media (max-width: 820px) {
    details.stufe > summary h3, .plan-gruppe h3 { flex: 1; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 1rem; font-weight: 650; }
    details.stufe > summary { flex-wrap: nowrap; }
}
.stufe-zahl { display: none; }
@media (max-width: 820px) { .stufe-zahl { display: inline; } }