/* Abteilungsebene und öffentliche Anmeldung – ergänzt app.css (gleiche Farben und Bausteine). */

/* Athletenportal: Weg zurück zur Abteilung und Gruppenwechsel im Seitenmenü */
.zur-abteilung { font-size: .88rem; color: var(--gedaempft) !important; }
.gruppenwechsler { display: flex; flex-wrap: wrap; gap: .3rem; padding: .2rem .5rem .8rem; }
.gruppenwechsler a { padding: .15rem .55rem !important; border: 1px solid var(--linie); border-radius: 999px; font-size: .8rem; }
.gruppenwechsler a.an { background: var(--akzent); border-color: var(--akzent); color: #fff !important; }
.wk-eltern { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .35rem 0; padding: .35rem .6rem; background: var(--akzent-hell); border-radius: 8px; }

/* Seitenmenü der Abteilung: Gruppen als eigene Rubrik. Am Handy eine waagerecht wischbare Leiste oben. */
@media (max-width: 820px) {
    body.abteilung .seitenleiste:not([hidden]) {
        display: flex !important; flex-direction: row; overflow-x: auto; position: sticky; top: 0; z-index: 5; width: auto; height: auto;
        padding: calc(.4rem + env(safe-area-inset-top)) .5rem .4rem; border-right: 0; border-bottom: 1px solid var(--linie); gap: .2rem;
    }
    body.abteilung .seitenleiste a, body.abteilung .abmelden { white-space: nowrap; font-size: .88rem; margin: 0; flex: none; }
    body.abteilung .marke, body.abteilung .nav-titel { display: none; }
    body.abteilung #nav-gruppen { display: flex; gap: .2rem; }
    body.abteilung .nav-unten { display: contents; }
    body.abteilung .nav-gruppe small { display: none; }
    body.abteilung .abmelden { display: block; }
    body.abteilung main { padding-top: 1rem; padding-bottom: 3rem; }
}
.nav-titel { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gedaempft); padding: 1rem .75rem .3rem; font-weight: 650; }
.nav-gruppe { display: flex !important; justify-content: space-between; align-items: center; }
.nav-gruppe small { font-weight: 500; }

.gruppen-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gruppen-kachel { display: block; color: var(--text); }
.gruppen-kacheln > .karte + .karte { margin-top: 0; }
.gruppen-kachel:hover { border-color: var(--akzent); text-decoration: none; }
.gruppen-kachel .gk-name { font-size: 1.5rem; font-weight: 700; color: var(--akzent); }
.gruppen-kachel .gk-zeile { font-size: .85rem; color: var(--gedaempft); }

.termin-zeile { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 16rem); gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.termin-zeile:last-child { border-bottom: 0; }
.termin-datum { text-align: center; line-height: 1.15; }
.termin-datum strong { display: block; font-size: 1.25rem; }
.termin-datum small { text-transform: uppercase; font-size: .72rem; }
.termin-titel { font-weight: 600; color: var(--text); }
.termin-meta { font-size: .84rem; color: var(--gedaempft); }
.zahlen { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
    .termin-zeile { grid-template-columns: 3.4rem minmax(0, 1fr); }
    .termin-zeile .zahlen { grid-column: 2; justify-content: flex-start; }
}


.linkfeld { display: flex; gap: .5rem; }
.linkfeld input { font-size: .85rem; }
.tabelle-scroll { overflow-x: auto; }
.tabelle td small, .tabelle th small { display: block; }
.tabelle select { width: auto; min-width: 0; max-width: 100%; padding: .25rem .4rem; font-size: .85rem; }
.tabelle td.kind-zelle select { margin-top: .3rem; max-width: 16rem; }
tr.abgemeldet td { opacity: .55; }
tr.abgemeldet td.aktionen-zelle { opacity: 1; }
.ausrichtung-r { text-align: right; }
.zelle-check { width: 1%; white-space: nowrap; }
.zelle-check input { width: auto; }
.knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.kpi-zeile { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1rem; }
.kpi-zeile > .karte + .karte { margin-top: 0; }
.aktionen-zelle { white-space: nowrap; }
.aktionen-zelle button { margin: .1rem 0 .1rem .2rem; }

/* Sitzungen */
.protokoll-feld { min-height: 340px; font-size: .95rem; line-height: 1.55; }
.speicherstand { font-size: .8rem; color: var(--gedaempft); }
.aufgabe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.aufgabe:last-child { border-bottom: 0; }
.aufgabe input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.aufgabe.erledigt .aufgabe-text { text-decoration: line-through; color: var(--gedaempft); }
.aufgabe-meta { font-size: .8rem; color: var(--gedaempft); }
.ueberfaellig { color: var(--schlecht); font-weight: 600; }

/* Gruppenwechsel */
.wechsel-kinder { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wechsel-kind { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 8px; margin: 0; font-weight: 500; }
.wechsel-kind input { width: auto; margin-top: .2rem; }
.wechsel-kind small { display: block; font-weight: 400; }
.wahlliste label { display: flex; gap: .5rem; align-items: center; font-weight: 500; margin-bottom: .4rem; }
.wahlliste input { width: auto; }

/* Postausgang */
.mail { border-bottom: 1px solid var(--linie); padding: .7rem 0; }
.mail pre { white-space: pre-wrap; font: inherit; font-size: .9rem; margin: .4rem 0 0; background: var(--flaeche-2); padding: .6rem .8rem; border-radius: 8px; }
.mail pre a { overflow-wrap: anywhere; }

/* ---------- Öffentliche Anmeldung ---------- */
body.oeffentlich { background: var(--bg); }
.anm { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.anm-kopf { display: flex; gap: .7rem; align-items: center; margin: .5rem 0 1rem; }
.anm-kopf small { display: block; color: var(--gedaempft); }
.anm-titel { margin: .5rem 0 .8rem; font-size: 1.45rem; }
.anm-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; margin: 0 0 .5rem; }
.anm-daten dt { color: var(--gedaempft); font-size: .9rem; }
.anm-daten dd { margin: 0; font-weight: 550; }
.anm-text { white-space: normal; }
.anm-liste { list-style: none; margin: 0; padding: 0; }
.anm-liste li { border-bottom: 1px solid var(--linie); }
.anm-liste li:last-child { border-bottom: 0; }
.anm-liste summary { padding: .65rem .2rem; cursor: pointer; list-style: none; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.anm-liste summary::-webkit-details-marker { display: none; }
.anm-liste summary::after { content: 'abmelden'; margin-left: auto; font-size: .78rem; color: var(--gedaempft); }
.anm-liste details[open] summary::after { content: 'schließen'; }
.anm-diszi { flex-basis: 100%; }
.anm-abmelden { display: flex; gap: .5rem; align-items: end; padding: 0 .2rem .8rem; }
.anm-abmelden label { flex: 1; margin: 0; }
.anm-meldung { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-weight: 550; }
.anm-meldung.ok { background: var(--gut-hell); color: var(--gut); }
.anm-meldung.mail, .anm-meldung.hinweis { background: var(--info-hell); color: var(--info); }
.anm-meldung.fehler { background: var(--schlecht-hell); color: var(--schlecht); }
.anm-diszis { border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.anm-diszis legend { font-size: .85rem; font-weight: 550; padding: 0 .3rem; }
.anm-diszis label { display: flex; gap: .4rem; align-items: center; font-weight: 500; margin: 0; }
.anm-diszis input, .anm-ok input { width: auto; margin: 0; }
.anm-ok { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .85rem; }
.anm-ok input { margin-top: .2rem; }
.anm-knopf { width: 100%; justify-content: center; padding: .7rem; font-size: 1rem; }
.anm-klein { font-size: .82rem; }
.anm-falle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.anm input, .anm textarea, .anm select { font-size: 16px; }   /* sonst zoomt iOS */

[hidden] { display: none !important; }

/* ---------- Seitenleiste der Abteilung: Symbole, Einstellungen unten ---------- */
body.abteilung .seitenleiste a[data-nav] { display: flex; align-items: center; gap: .6rem; }
body.abteilung .seitenleiste svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav-unten { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: .5rem; }
.nav-unten .abmelden { margin-top: 0; }
@media (max-width: 820px) { body.abteilung .seitenleiste svg { width: 16px; height: 16px; } }

/* Reiter über einer Seite (Wettkämpfe, Kasse, Einstellungen) */
.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie); margin: -.6rem 0 1.25rem; overflow-x: auto; scrollbar-width: none; }
.reiter a { padding: .55rem .8rem; color: var(--gedaempft); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; }
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.an { color: var(--akzent); border-color: var(--akzent); }
.kopf.unterkopf { margin-bottom: 1rem; }
.kopf.unterkopf h2 { margin: 0; font-size: 1.15rem; }

/* Umschalter (Monat/Liste, Einnahme/Ausgabe) */
.umschalter { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche); }
.umschalter button { border: 0; background: none; padding: .3rem .65rem; border-radius: 7px; color: var(--gedaempft); font-size: .88rem; }
.umschalter button.an { background: var(--akzent-hell); color: var(--akzent); }
.umschalter button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; display: block; }
.umschalter.breit { display: flex; margin-bottom: .9rem; }
.umschalter.breit button { flex: 1; padding: .45rem; font-weight: 600; }

.mini-zeile { padding: .5rem 0; border-bottom: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
.mini-zeile:last-child { border-bottom: 0; }
.mini-zeile > a { flex-basis: 100%; }
.mini-zeile small { color: var(--gedaempft); margin-right: auto; }
.gut-text { color: var(--gut) !important; }
.schlecht-text { color: var(--schlecht) !important; }

/* ---------- Kalender ---------- */
:root { --f-wettkampf: #0a4f9e; --f-meldeschluss: #b7791f; --f-sitzung: #7c3aed; --f-veranstaltung: #1f8a53; --f-training: #0e7490; --f-frei: #6b7280; --f-sonstiges: #475569; --f-geplant: #2e6fb0; --f-aufgabe: #c0392b; }
@media (prefers-color-scheme: dark) {
    :root { --f-wettkampf: #6ea6ea; --f-meldeschluss: #e0b04f; --f-sitzung: #a78bfa; --f-veranstaltung: #4cc38a; --f-training: #22b8cf; --f-frei: #9aa3af; --f-sonstiges: #94a3b8; --f-geplant: #6aa7e8; --f-aufgabe: #f07167; }
}
.f-wettkampf { --f: var(--f-wettkampf); } .f-meldeschluss { --f: var(--f-meldeschluss); } .f-sitzung { --f: var(--f-sitzung); }
.f-veranstaltung { --f: var(--f-veranstaltung); } .f-training { --f: var(--f-training); } .f-frei { --f: var(--f-frei); }
.f-sonstiges { --f: var(--f-sonstiges); } .f-geplant { --f: var(--f-geplant); } .f-aufgabe { --f: var(--f-aufgabe); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--f, var(--gedaempft)); flex: none; }

.kal-leiste { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.kal-nav { display: flex; align-items: center; gap: .35rem; }
.kal-nav button { padding: .3rem .7rem; }
.kal-monat { font-size: 1.25rem; margin-left: .5rem; }
.kal-rechts { display: flex; gap: .5rem; align-items: center; }
.kal-rechts select { width: auto; }
.kal-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.filterchip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .7rem; font-size: .82rem; background: var(--flaeche); color: var(--gedaempft); text-decoration: line-through; }
.filterchip.an { color: var(--text); text-decoration: none; }
.filterchip:not(.an) .punkt { opacity: .35; }

.monat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.monat-kopf, .monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monat-kopf div { padding: .45rem .6rem; font-size: .75rem; font-weight: 650; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--linie); }
.tag { min-height: 7.2rem; padding: .3rem .3rem .4rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.tag:nth-child(7n) { border-right: 0; }
.tag:hover { background: var(--flaeche-2); }
.tag.fremd { background: color-mix(in srgb, var(--flaeche-2) 55%, transparent); }
.tag.fremd .tag-nr { opacity: .45; }
.tag-nr { font-size: .8rem; font-weight: 600; padding: .1rem .3rem; align-self: flex-start; border-radius: 999px; }
.tag.heute .tag-nr { background: var(--akzent); color: #fff; }
.pille { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: .14rem .4rem; font-size: .74rem; line-height: 1.3; font-weight: 550;
    background: color-mix(in srgb, var(--f) 14%, var(--flaeche)); color: var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pille b { font-weight: 700; }
.pille.f-geplant, .pille.f-aufgabe { background: none; border: 1px dashed var(--f); }
.pille-mehr { border: 0; background: none; font-size: .72rem; color: var(--gedaempft); padding: 0 .4rem; text-align: left; }
@media (max-width: 820px) {
    .tag { min-height: 4.2rem; padding: .2rem .15rem; }
    .pille { font-size: 0; padding: 0; height: 6px; border-left: 0; background: var(--f); border-radius: 3px; }
    .pille b { display: none; }
    .pille.f-geplant, .pille.f-aufgabe { background: none; border: 1.5px dashed var(--f); height: 6px; }
    .pille-mehr { font-size: .65rem; padding: 0 .1rem; }
    .kal-monat { font-size: 1.05rem; }
}

.agenda-tag { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--linie); }
.agenda-tag:last-child { border-bottom: 0; }
.agenda-datum { text-align: center; line-height: 1.15; padding-top: .2rem; }
.agenda-datum strong { display: block; font-size: 1.35rem; }
.agenda-datum small { font-size: .72rem; color: var(--gedaempft); text-transform: uppercase; }
.agenda-tag.heute .agenda-datum strong { color: var(--akzent); }
.agenda-eintraege { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.agenda-heute { font-size: .72rem; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .05em; }
.ereignis { position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--linie); border-radius: 8px; padding: .45rem .7rem .45rem 1.65rem; background: var(--flaeche); }
.ereignis::before { content: ''; position: absolute; left: .7rem; top: .95rem; width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.ereignis:hover { background: var(--flaeche-2); }
.ereignis.f-geplant, .ereignis.f-aufgabe { border-style: dashed; }
.e-titel { display: block; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.e-meta { display: block; font-size: .8rem; color: var(--gedaempft); }
.ereignis-art { display: flex; gap: .5rem; align-items: center; margin: -.4rem 0 .8rem; color: var(--gedaempft); font-size: .88rem; }

.was-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.was-wahl label { display: flex; gap: .5rem; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .7rem; margin: 0; cursor: pointer; font-weight: 400; }
.was-wahl label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.was-wahl input { width: auto; margin-top: .2rem; }
.was-wahl strong { display: block; font-size: .9rem; }
.was-wahl small { display: block; color: var(--gedaempft); font-size: .76rem; line-height: 1.3; }
@media (max-width: 560px) { .was-wahl { grid-template-columns: minmax(0, 1fr); } }
.anleitung { font-size: .88rem; padding-left: 1.1rem; }
.anleitung li { margin-bottom: .35rem; }

/* ---------- Dateien: Ablage wie im ZenIT-ERP ---------- */
.ablage { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ablage-seite { position: sticky; top: 1rem; display: flex; flex-direction: column; height: calc(100dvh - 6.25rem); min-height: 18rem;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: .45rem; }
/* Ordnerbaum scrollt im Rahmen, Zuletzt und Papierkorb stehen fest unten. */
.ablage-oben { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.ablage-unten { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--linie); margin-top: .4rem; padding-top: .4rem; }
.ablage-link { display: flex; align-items: center; gap: .5rem; padding: .38rem .6rem; border-radius: 7px; color: var(--text); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ablage-link:hover { background: var(--flaeche-2); text-decoration: none; }
.ablage-link.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.ablage-link.ueber, .krumen a.ueber { background: var(--akzent-hell); outline: 2px solid var(--akzent); }
.ablage-baum { --baum-strich: color-mix(in srgb, var(--gedaempft) 40%, var(--flaeche)); --zeile: 2.05rem; --pfeil: 1rem; --einzug: .7rem; margin-left: 1.05rem; }
.baum { list-style: none; margin: 0; padding: 0; }
.baum .baum { margin-left: calc(var(--einzug) + var(--pfeil) / 2); }
.baum li { position: relative; padding-left: var(--einzug); }
.baum li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--baum-strich); }
.baum li:last-child::before { bottom: auto; height: calc(var(--zeile) / 2); }
.baum li::after { content: ''; position: absolute; left: 0; top: calc(var(--zeile) / 2); width: calc(var(--einzug) - 2px); border-top: 1px solid var(--baum-strich); }
.baum li.einzeln::after { width: calc(var(--einzug) + var(--pfeil) - 2px); }
.baum li.einzeln > .baum-zeile { padding-left: var(--pfeil); }
.baum li.zu > .baum { display: none; }
.baum-zeile { display: flex; align-items: center; min-height: var(--zeile); min-width: 0; }
.baum-zeile .ablage-link { flex: 1; min-width: 0; padding-left: .3rem; }
.baum-pfeil { flex: none; width: var(--pfeil); height: var(--pfeil); padding: 0; border: 0; background: none; border-radius: 4px; display: grid; place-items: center; color: var(--gedaempft); }
.baum-pfeil:hover { background: var(--flaeche-2); color: var(--text); }
.baum-pfeil svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
li.auf > .baum-zeile .baum-pfeil svg { transform: rotate(90deg); }
.mini-ordner { width: 15px; height: 11px; border-radius: 2px; background: #5b9bf0; position: relative; flex: none; margin-top: 2px; }
.mini-ordner::before { content: ''; position: absolute; left: 0; top: -2.5px; width: 6px; height: 3px; border-radius: 1.5px 1.5px 0 0; background: #5b9bf0; }
.mini-uhr { width: 13px; height: 13px; border: 1.6px solid currentColor; border-radius: 50%; flex: none; position: relative; opacity: .75; }
.mini-uhr::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 3px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.mini-korb { width: 12px; height: 13px; border: 1.6px solid currentColor; border-top-width: 2.5px; border-radius: 0 0 3px 3px; flex: none; opacity: .75; }

.ablage-haupt { min-width: 0; display: flex; flex-direction: column; }
.ablage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 2.4rem; }
.ablage-kopf > button { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; font-size: .88rem; }
.ablage-kopf > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ablage-kopf input[type=search] { width: 13rem; padding: .35rem .8rem; border-radius: 999px; font-size: .85rem; background: var(--flaeche-2); border-color: transparent; }
.krumen { flex: 1; min-width: 10rem; display: flex; align-items: center; gap: .2rem; font-size: .95rem; overflow: hidden; }
.krumen a { color: var(--gedaempft); padding: .1rem .3rem; border-radius: 5px; white-space: nowrap; }
.krumen a:hover { color: var(--text); text-decoration: none; }
.krumen strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .3rem; }
.krumen .trenner { color: var(--gedaempft); opacity: .5; }
.flaeche { position: relative; margin-top: .75rem; min-height: 22rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: .5rem; outline: none; }
.flaeche.ablegen { border: 2px dashed var(--akzent); background: var(--akzent-hell); }
.flaeche.ablegen::after { content: 'Loslassen zum Hochladen'; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--akzent); background: color-mix(in srgb, var(--flaeche) 70%, transparent); border-radius: 12px; }
.ablage-leer { margin: .5rem; padding: 3rem 1rem; text-align: center; color: var(--gedaempft); border: 1px dashed var(--linie); border-radius: 10px; font-size: .92rem; }
.ablage-ueberall { text-align: center; margin: .75rem 0 .25rem; font-size: .88rem; }
.fussleiste { display: flex; align-items: center; gap: 1rem; min-height: 2.2rem; font-size: .8rem; color: var(--gedaempft); margin-top: .4rem; }
.fuss-aktionen { margin-left: auto; display: flex; gap: .3rem; }

.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .25rem; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem .6rem; border-radius: 10px; cursor: default; user-select: none; -webkit-user-select: none; }
.kachel:hover { background: var(--flaeche-2); }
.kachel.gewaehlt { background: var(--akzent-hell); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 30%, transparent); }
.kachel.ueber { background: var(--akzent-hell); box-shadow: inset 0 0 0 2px var(--akzent); }
.kachel.zieht { opacity: .4; }
.kachel-bild { height: 4.6rem; display: flex; align-items: center; justify-content: center; }
.kachel-name { font-size: .8rem; text-align: center; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-meta { font-size: .7rem; color: var(--gedaempft); margin-top: -.2rem; }
.kachel-menue { position: absolute; top: .25rem; right: .25rem; border: 0; background: var(--flaeche); padding: 0 .4rem; line-height: 1.4; border-radius: 6px; font-size: 1rem; color: var(--gedaempft); opacity: 0; box-shadow: var(--schatten); }
.kachel:hover .kachel-menue, .kachel.gewaehlt .kachel-menue, .kachel-menue:focus { opacity: 1; }
@media (pointer: coarse) { .kachel-menue { opacity: 1; } }
.namensfeld { font-size: .8rem; padding: .15rem .3rem; text-align: center; width: 100%; }

/* Ordner und Blatt, gezeichnet */
.ordner-bild { position: relative; width: 4.2rem; height: 3.3rem; display: block; }
.ordner-lasche { position: absolute; left: 0; top: 0; width: 45%; height: 30%; background: #4f8fe8; border-radius: 5px 5px 0 0; }
.ordner-koerper { position: absolute; left: 0; right: 0; bottom: 0; top: 14%; background: linear-gradient(180deg, #78aef5, #5b9bf0); border-radius: 3px 6px 6px 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.dblatt { position: relative; width: 3.3rem; height: 4.3rem; display: block; background: #fff; border: 1px solid #d9dee5; border-radius: 4px 12px 4px 4px; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); overflow: hidden; }
@media (prefers-color-scheme: dark) { .dblatt { background: #222; border-color: #383838; } }
.dblatt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dblatt-zeilen { position: absolute; left: .45rem; right: .45rem; top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.dblatt-zeilen i { display: block; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.dblatt-zeilen i:nth-child(2) { width: 75%; } .dblatt-zeilen i:nth-child(4) { width: 55%; }
.dblatt-raster { position: absolute; left: .4rem; right: .4rem; top: .5rem; height: 1.7rem; background-image: linear-gradient(color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 14%, transparent) 1px, transparent 1px); background-size: 33% 33%; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.dblatt-bild { position: absolute; left: .4rem; right: .4rem; top: .5rem; height: 1.8rem; border-radius: 3px; background: linear-gradient(160deg, #fbcfe8, #fda4af); }
.fahne { position: absolute; left: -1px; bottom: .45rem; padding: .05rem .35rem; border-radius: 0 4px 4px 0; color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: #78716c; }
.a-seite { background: #8b5cf6; } .a-bild { background: #f43f5e; } .a-video { background: #7c3aed; } .a-ton { background: #6366f1; } .a-pdf { background: #ef4444; }
.a-text { background: #64748b; } .a-tabelle { background: #059669; } .a-kommaliste { background: #0891b2; } .a-praesentation { background: #f97316; }
.a-dokument { background: #2563eb; } .a-archiv { background: #d97706; }

/* Liste */
.ablage-tabelle tr.kachel { display: table-row; }
.ablage-tabelle td { vertical-align: middle; }
.ablage-tabelle .kachel-menue { position: static; opacity: .6; box-shadow: none; background: none; }
.zeile-name { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.zeile-name .kachel-name { text-align: left; font-size: .9rem; font-weight: 550; -webkit-line-clamp: 1; }
.zeile-bild { width: 1.6rem; height: 1.6rem; flex: none; display: flex; align-items: center; justify-content: center; }
.zeile-bild .ordner-bild { transform: scale(.36); transform-origin: center; flex: none; }
.zeile-bild .dblatt { transform: scale(.36); transform-origin: center; flex: none; }
.such-liste { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.such-treffer { display: flex; gap: .6rem; align-items: center; padding: .45rem .3rem; border-bottom: 1px solid var(--linie); color: var(--text); }
.such-treffer small { display: block; color: var(--gedaempft); }
.ziel-liste { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--linie); border-radius: 8px; padding: .3rem; }
.ziel-liste label { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .5rem; border-radius: 6px; font-weight: 500; cursor: pointer; }
.ziel-liste label:has(input:checked) { background: var(--akzent-hell); }
.ziel-liste label:has(input:disabled) { opacity: .45; cursor: default; }
.ziel-liste input { width: auto; margin: 0; }
.ziel-liste .tief-1 { padding-left: 1.4rem; } .ziel-liste .tief-2 { padding-left: 2.4rem; } .ziel-liste .tief-3 { padding-left: 3.4rem; } .ziel-liste .tief-4, .ziel-liste .tief-5 { padding-left: 4.4rem; }

.kontextmenue { position: fixed; z-index: 60; min-width: 12rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: .3rem; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); }
.kontextmenue button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .7rem; border-radius: 6px; font-size: .88rem; color: var(--text); }
.kontextmenue button:hover:not(:disabled), .kontextmenue button:focus { background: var(--flaeche-2); outline: none; }
.kontextmenue button.gefahr { color: var(--schlecht); }
.kontextmenue hr { border: 0; border-top: 1px solid var(--linie); margin: .3rem 0; }

.hochladeleiste { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: 20rem; max-width: calc(100vw - 2rem); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); font-size: .82rem; }
.hl-kopf { display: flex; justify-content: space-between; padding: .55rem .8rem; border-bottom: 1px solid var(--linie); }
.hochladeleiste ul { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.hochladeleiste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; padding: .45rem .8rem; border-bottom: 1px solid var(--linie); }
.hl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-stand { color: var(--gedaempft); }
.hl-balken { grid-column: 1 / -1; height: 4px; background: var(--flaeche-2); border-radius: 2px; overflow: hidden; }
.hl-balken i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .2s; }
li.ok .hl-stand { color: var(--gut); } li.ok .hl-balken { display: none; }
li.fehler .hl-stand { color: var(--schlecht); } li.fehler .hl-balken { display: none; }

.vorschau { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 16, .82); display: flex; flex-direction: column; }
.v-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; color: #fff; }
.v-kopf strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-zahl { font-size: .8rem; opacity: .7; }
.v-inhalt { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3.5rem 1.5rem; }
.v-inhalt img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.v-inhalt iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 8px; background: #fff; }
.v-text { width: min(760px, 100%); max-height: 100%; overflow-y: auto; background: var(--flaeche); color: var(--text); border-radius: 10px; padding: 1.5rem 1.75rem; white-space: pre-wrap; line-height: 1.55; }
.v-pfeil { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; width: 2.6rem; height: 3.4rem; border-radius: 10px; }
.v-pfeil.links { left: .5rem; } .v-pfeil.rechts { right: .5rem; }
@media (max-width: 640px) { .v-inhalt { padding: 0 .5rem 1rem; } .v-pfeil { top: auto; bottom: 1rem; transform: none; } }

.seite-blatt { max-width: 860px; }
.seite-titel { font-size: 1.5rem; font-weight: 700; border: 0; padding: .2rem 0; margin-bottom: .6rem; background: none; }
.seite-titel:focus { outline: none; }
.seite-text { min-height: 60vh; border: 0; padding: 0; background: none; font-size: 1rem; }
.seite-text:focus { outline: none; }

@media (max-width: 820px) {
    .ablage { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .ablage-seite { position: static; flex-direction: row; overflow-x: auto; height: auto; min-height: 0; gap: .3rem; background: none; border: 0; box-shadow: none; padding: 0; }
    .ablage-oben, .ablage-unten { flex: none; flex-direction: row; gap: .3rem; border: 0; margin: 0; padding: 0; overflow: visible; }
    .ablage-seite .ablage-baum { display: none; }
    .ablage-link { border: 1px solid var(--linie); border-radius: 999px; padding: .3rem .7rem; }
    .ablage-kopf input[type=search] { order: 5; width: 100%; }
    .krumen { flex-basis: 100%; }
    .ablage-kopf > button { flex: 1; justify-content: center; }
    .kacheln { grid-template-columns: repeat(auto-fill, minmax(6.3rem, 1fr)); }
}
@media (max-width: 640px) { .nur-breit { display: none; } }

/* ---------- Kasse ---------- */
.ergebnis-band { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.1rem 1.4rem; border-radius: var(--radius); margin-bottom: 1rem; background: var(--flaeche); border: 1px solid var(--linie); }
.ergebnis-band small { display: block; color: var(--gedaempft); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ergebnis-band strong { font-size: 2.2rem; line-height: 1.1; }
.ergebnis-band p { margin: 0; font-weight: 600; }
.ergebnis-band p small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ergebnis-band.plus { background: var(--gut-hell); border-color: transparent; } .ergebnis-band.plus strong, .ergebnis-band.plus p { color: var(--gut); }
.ergebnis-band.minus { background: var(--schlecht-hell); border-color: transparent; } .ergebnis-band.minus strong, .ergebnis-band.minus p { color: var(--schlecht); }
a.kpi { color: var(--text); text-decoration: none; display: block; }
.monatsbalken { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .3rem; align-items: end; }
.mb-monat { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .72rem; min-width: 0; }
.mb-monat small { white-space: nowrap; }
.mb-saeulen { height: 8rem; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--linie); }
.mb-saeulen span { width: 40%; max-width: 1.1rem; border-radius: 3px 3px 0 0; min-height: 0; }
.mb-ein, .punkt.mb-ein { background: var(--gut); } .mb-aus, .punkt.mb-aus { background: var(--schlecht); opacity: .8; }
.legende { display: flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--gedaempft); margin: .6rem 0 0; }
.legende .punkt + * { margin-right: .6rem; }
@media (max-width: 640px) { .mb-monat small:last-child { display: none; } .mb-saeulen { height: 6rem; } }

.kassen-rechnung { display: flex; align-items: center; gap: .8rem 1.1rem; flex-wrap: wrap; }
.kassen-rechnung > div small { display: block; font-size: .75rem; color: var(--gedaempft); }
.kassen-rechnung > div strong { font-size: 1.25rem; }
.kassen-rechnung .op { font-size: 1.3rem; color: var(--gedaempft); }
.kr-ist { margin-left: auto; padding-left: 1.1rem; border-left: 1px solid var(--linie); }
.kr-diff { padding: .45rem .9rem; border-radius: 10px; background: var(--flaeche-2); }
.kr-diff.ok { background: var(--gut-hell); } .kr-diff.ok strong { color: var(--gut); }
.kr-diff.falsch { background: var(--schlecht-hell); } .kr-diff.falsch strong { color: var(--schlecht); }
.kr-diff.offen { background: var(--warn-hell); } .kr-diff.offen strong { color: var(--warn); font-size: 1rem; }
@media (max-width: 640px) { .kr-ist { margin-left: 0; border-left: 0; padding-left: 0; } }
.buchung-form { border: 1px solid var(--linie); border-radius: 10px; padding: .8rem; margin-bottom: 1rem; background: var(--flaeche-2); }
.buchung-form .umschalter { margin-bottom: .7rem; }
.buchung { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.buchung:last-child { border-bottom: 0; }
.buchung small { display: block; color: var(--gedaempft); }
.buchung-betrag { font-weight: 650; white-space: nowrap; }
.karte h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gedaempft); margin: 1rem 0 .2rem; }
.live-diff { margin: -.3rem 0 .8rem; padding: .5rem .8rem; border-radius: 8px; background: var(--flaeche-2); font-weight: 600; font-size: .92rem; }
.live-diff.ok { background: var(--gut-hell); color: var(--gut); }
.live-diff.falsch { background: var(--schlecht-hell); color: var(--schlecht); }
.zaehlung { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .4rem; margin: .6rem 0 1rem; }
.zaehlung label { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; font-weight: 550; }
.zaehlung label span { width: 2.8rem; text-align: right; flex: none; color: var(--gedaempft); }
.zaehlung input { padding: .3rem .4rem; min-width: 0; }
tr.klickzeile { cursor: pointer; }
tr.klickzeile:hover td { background: var(--flaeche-2); }
.tabelle tfoot td { border-top: 2px solid var(--linie); }
.dok-text { white-space: pre-wrap; font-size: .95rem; }

/* Athletenportal der Gruppe: selten Gebrauchtes zusammengeklappt, Einstellungen unten */
.nav-mehr summary { padding: .5rem .75rem; border-radius: 8px; color: var(--gedaempft); font-weight: 500; cursor: pointer; list-style: none; }
.nav-mehr summary::-webkit-details-marker { display: none; }
.nav-mehr summary::after { content: ' ▸'; font-size: .8em; }
.nav-mehr[open] summary::after { content: ' ▾'; }
.nav-mehr summary:hover { background: var(--flaeche-2); }
.nav-mehr a { display: block; padding-left: 1.4rem !important; font-size: .93rem; }
@media (max-width: 820px) { .nav-mehr { display: contents; } .nav-mehr summary { display: none; } .nav-mehr a { padding-left: .75rem !important; } }
.nav-unten .abmelden { padding: .5rem .75rem; }
.tabelle td.ausrichtung-r, .tabelle th.ausrichtung-r { white-space: nowrap; }
.ablage-kopf input[type=search] { width: 11rem; }
.krumen { min-width: 6rem; }
@media (max-width: 1100px) and (min-width: 821px) { .ablage-kopf > button span, .ablage-kopf input[type=search] { width: 8rem; } }
@media (max-width: 1400px) { .krumen { flex-basis: 100%; } }
.ereignis, .pille, .filterchip { white-space: normal; }
.ereignis { min-width: 0; }
.e-titel, .e-meta { overflow-wrap: break-word; }
.kachel-name { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.ablage-kopf > button svg { flex: none; }
@media (max-width: 820px) {
    .ablage-kopf input[type=search] { order: 5; width: 100%; flex-basis: 100%; }
    .pille { white-space: nowrap; }
}

/* ---------- Sitzungen: Teilnehmer und Anwesenheit ---------- */
.wahlliste.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 1rem; margin-top: .6rem; }
.wahlliste label small { color: var(--gedaempft); font-weight: 400; }
.haken { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.haken input { width: auto; }
.tn-zeile { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.tn-zeile:last-of-type { border-bottom: 0; }
.tn-name { min-width: 0; }
.tn-name small { display: block; }
.tn-zeile .umschalter { flex: none; }
.tn-zeile .umschalter button { font-size: .8rem; padding: .25rem .5rem; }
.tn-zeile .umschalter button.an[data-w="da"] { background: var(--gut-hell); color: var(--gut); }
.tn-zeile .umschalter button.an[data-w="entschuldigt"] { background: var(--warn-hell); color: var(--warn); }
.tn-zeile .umschalter button.an[data-w="fehlt"] { background: var(--schlecht-hell); color: var(--schlecht); }
.einladung-hinweis { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .55rem .75rem; margin-bottom: .6rem;
    border-radius: 8px; background: var(--warn-hell); font-size: .88rem; }
.quote { display: block; width: 5rem; height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; margin-left: auto; }
.quote span { display: block; height: 100%; background: var(--gut); }
@media (max-width: 640px) {
    .tn-zeile { flex-wrap: wrap; }
}

/* ---------- Trainingsinhalte (Gruppenportal): Sammlung der Abteilung ---------- */
.lp-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: .5rem 0 .6rem; }
.lp-kopf h2 { margin: 0 0 .15rem; }
.lp-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; font-size: .85rem; }
.lp-beschreibung { margin: .4rem 0 0; font-size: .9rem; max-width: 70ch; }
.chip.andere { opacity: .6; }
/* Stufenleiter: die Stufen eines Lernpfads nebeneinander, mit Pfeil dazwischen – Klick springt zur Stufe */
.stufenleiter { list-style: none; display: flex; gap: .4rem; margin: 0 0 1rem; padding: 0; overflow-x: auto; scrollbar-width: thin; }
.stufenleiter li { flex: 1 1 0; min-width: 9.5rem; position: relative; }
.stufenleiter li + li::before { content: '›'; position: absolute; left: -.33rem; top: 50%; transform: translate(-50%, -50%); color: var(--gedaempft); font-size: 1.1rem; }
.stufenleiter a { display: flex; gap: .55rem; align-items: flex-start; height: 100%; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text); }
.stufenleiter a:hover { background: var(--flaeche-2); text-decoration: none; }
.sl-nr { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; font-size: .85rem; }
.sl-text { min-width: 0; font-size: .85rem; line-height: 1.3; }
.sl-text small { display: block; color: var(--gedaempft); margin-top: .15rem; }
.stufe .stufe-kopf > span { display: flex; gap: .35rem; align-items: center; }
.stufe { scroll-margin-top: 1rem; }
.uebungstabelle td.r { white-space: nowrap; }
.baustein-zeile { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.baustein-zeile:last-child { border-bottom: 0; }
.baustein-zeile p { margin: .2rem 0 0; font-size: .88rem; color: var(--gedaempft); }
.nowrap { white-space: nowrap; }
.ablauf-liste { margin: 0; padding-left: 1.4rem; }
.ablauf-liste li { margin-bottom: .8rem; padding-left: .2rem; }
.ablauf-liste li p { margin: .15rem 0 0; font-size: .92rem; max-width: 75ch; }
.formdialog { min-width: min(560px, 86vw); }
.formdialog .wahlliste label span small { display: block; color: var(--gedaempft); font-weight: 400; }
.vorschlagsgruppe { margin-bottom: .6rem; }
.vorschlagsgruppe summary { cursor: pointer; margin-bottom: .4rem; }
@media print { .stufenleiter { display: none; } }
.niveau-zeile { margin: .35rem 0 0; font-weight: 650; font-size: .9rem; }

/* Personenauswahl (namenWahl in abteilung.js) */
.feld { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.feld-titel { font-size: .85rem; font-weight: 550; }
.namenwahl { position: relative; }
.namenwahl input { width: 100%; padding-right: 2.2rem; margin: 0; }
.namenwahl-pfeil { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: .3rem .5rem; color: var(--gedaempft); box-shadow: none; }
.namenwahl-liste { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem; list-style: none;
    max-height: 15rem; overflow-y: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.namenwahl-liste li { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: 7px; cursor: pointer; }
.namenwahl-liste li:hover, .namenwahl-liste li.an { background: var(--akzent-hell); }
.namenwahl-liste li[aria-selected="true"] { font-weight: 600; }
.namenwahl-leer { color: var(--gedaempft); border-top: 1px solid var(--linie); border-radius: 0 0 7px 7px !important; margin-top: .2rem; }
.avatar-klein { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); font-size: .7rem; font-weight: 700; flex: none; }
.namenwahl-liste li:hover .avatar-klein, .namenwahl-liste li.an .avatar-klein { background: var(--flaeche); }

/* Tabellen- und Texteditor (bueroeditor.js) */
.buero-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.buero-zurueck { font-size: 1.6rem; line-height: 1; padding: 0 .4rem .15rem; border-radius: 8px; color: var(--text); }
.buero-zurueck:hover { background: var(--flaeche-2); text-decoration: none; }
.buero-titel { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 650; border-color: transparent; background: none; padding: .3rem .5rem; margin: 0; }
.buero-titel:hover, .buero-titel:focus { border-color: var(--linie); background: var(--flaeche); }
.buero-kopf .speicherstand { white-space: nowrap; }
.buero-kopf .speicherstand.offen { color: var(--warn); font-weight: 600; }
.buero-knoepfe { display: flex; gap: .4rem; }
.fassung-zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }

.buero-tabelle { height: calc(100dvh - 8.5rem); min-height: 22rem; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: #fff; color: #0a0a0a; }
.univer-flaeche { width: 100%; height: 100%; }
/* Univer bringt eigene Bedienelemente mit – die allgemeinen Formularstile des Portals nicht darauf übertragen. */
.buero-tabelle input, .buero-tabelle textarea, .buero-tabelle button, .buero-tabelle select { width: auto; min-height: 0; margin: 0; box-shadow: none; font: inherit; }

.buero-text { display: flex; flex-direction: column; }
.text-leiste { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .1rem; padding: .3rem .45rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius) var(--radius) 0 0; }
.tl-gruppe { display: flex; align-items: center; gap: .1rem; padding: 0 .35rem; border-right: 1px solid var(--linie); }
.tl-gruppe:last-of-type { border-right: 0; }
.text-leiste button { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .4rem; border: 0; background: none; border-radius: 6px; font-size: .95rem; color: var(--text); box-shadow: none; }
.text-leiste button:hover { background: var(--flaeche-2); }
.text-leiste button.an { background: var(--akzent-hell); color: var(--akzent); }
.text-leiste svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.text-leiste select { width: auto; margin: 0; padding: .2rem 1.6rem .2rem .45rem; height: 2rem; font-size: .85rem; border-radius: 6px; }
#t-absatz { width: 8.5rem; } #t-schrift { width: 9rem; } #t-groesse { width: 4.2rem; }
.tl-farbe { position: relative; flex-direction: column; gap: 0; line-height: 1; padding-bottom: 6px !important; }
.tl-farbstrich { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px; }
.tl-marker { font-weight: 700; font-size: .85rem; }
.farbpalette { position: fixed; z-index: 60; padding: .5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); }
.farbfelder { display: grid; grid-template-columns: repeat(6, 1.6rem); gap: .3rem; }
.farbfelder button { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: none; }
.farb-ohne { width: 100%; margin-top: .45rem; padding: .3rem; font-size: .82rem; border: 0; background: var(--flaeche-2); border-radius: 6px; box-shadow: none; }
.text-blatt-flaeche { border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: auto; height: calc(100dvh - 11.5rem); min-height: 22rem; background: #e9ebef; }
.text-blatt-flaeche .docx-wrapper { background: transparent !important; padding: 1.5rem 1rem 3rem !important; }
.text-blatt-flaeche section.docx { box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 20px rgba(0, 0, 0, .08) !important; color: #000; background: #fff; margin-bottom: 1.5rem !important;
    font-family: Calibri, Carlito, Arial, sans-serif; font-size: 11pt; line-height: 1.08; }
.text-blatt-flaeche [contenteditable] { outline: none; }
.text-blatt-flaeche section.docx > header, .text-blatt-flaeche section.docx > footer { min-height: 1em; }
.text-blatt-flaeche section.docx > header:hover, .text-blatt-flaeche section.docx > footer:hover, .text-blatt-flaeche section.docx > header:focus, .text-blatt-flaeche section.docx > footer:focus { outline: 1px dashed #b8c2d0; outline-offset: 4px; }
/* Portal-Stile (Tabellen, Überschriften, Links) nicht ins Dokument tragen – :where hat die niedrigste Priorität, Word-Formate gewinnen. */
:where(.docx) table { width: auto; border-collapse: collapse; }
:where(.docx) th, :where(.docx) td { padding: 0 5.4pt; border-bottom: 0; text-align: inherit; vertical-align: top; font-size: inherit; font-weight: inherit; color: inherit; text-transform: none; letter-spacing: normal; white-space: normal; }
:where(.docx) table.t-neu { width: 100%; }
:where(.docx) table.t-neu td { border: 1px solid #000; padding: 2pt 5.4pt; }
:where(.docx) h1 { font-size: 16pt; font-weight: 400; color: #2f5496; margin: 12pt 0 0; line-height: 1.08; }
:where(.docx) h2 { font-size: 13pt; font-weight: 400; color: #2f5496; margin: 2pt 0 0; line-height: 1.08; }
:where(.docx) h3 { font-size: 12pt; font-weight: 400; color: #1f3763; margin: 2pt 0 0; line-height: 1.08; }
:where(.docx) a { color: #0563c1; text-decoration: underline; }
:where(.docx) img { max-width: 100%; }
.text-fuss { display: flex; justify-content: flex-end; padding: .3rem .6rem 0; font-size: .78rem; color: var(--gedaempft); }

/* Einstellungen auf dem Handy */
.hochlade-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.hochlade-form label { flex: 1 1 14rem; margin: 0; }
.hochlade-form input[type=file] { width: 100%; }
@media (max-width: 820px) {
    .reiter { flex-wrap: wrap; overflow: visible; gap: .35rem; border-bottom: 0; margin: -.3rem 0 1rem; }
    .reiter a { border: 1px solid var(--linie); border-radius: 999px; padding: .35rem .8rem; font-size: .88rem; background: var(--flaeche); }
    .reiter a.an { background: var(--akzent-hell); border-color: var(--akzent); }
    .einst-liste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
    .einst-liste td { display: block; padding: 0; border: 0; }
    .einst-liste td:first-child { grid-column: 1; }
    .einst-liste td:nth-child(2) { grid-column: 1; grid-row: 2; }
    .einst-liste td:last-child { grid-column: 2; grid-row: 1 / span 2; }
    .einst-liste td:nth-child(2):empty { display: none; }
    .hochlade-form button { width: 100%; justify-content: center; }
}
@media (max-width: 820px) {
    .buero-tabelle { height: calc(100dvh - 11rem); }
    .buero-kopf .speicherstand { font-size: .72rem; }
    .text-leiste { flex-wrap: nowrap; overflow-x: auto; }
    .text-leiste > *, .tl-gruppe > * { flex: none; }
    .text-blatt-flaeche { height: calc(100dvh - 13rem); }
    .text-blatt-flaeche .docx-wrapper { padding: .5rem !important; }
    /* Am Handy die Seite an die Breite anpassen statt seitlich zu scrollen (Seitenmaße für die Datei sind gemerkt). */
    .text-blatt-flaeche section.docx { width: 100% !important; min-height: 0 !important; padding: 20px 18px !important; }
    .text-blatt-flaeche section.docx table { width: 100% !important; }
    .text-blatt-flaeche section.docx > header, .text-blatt-flaeche section.docx > footer { margin: 0 0 .8rem !important; position: static !important; }
}
/* Office-Schriften, die auf Mac und Handy meist fehlen: auf ähnliche vorhandene Schriften abbilden (nur lokal, nichts wird geladen). */
@font-face { font-family: Calibri; src: local('Calibri'), local('Carlito'), local('Helvetica Neue'), local('Arial'); }
@font-face { font-family: Calibri; font-weight: bold; src: local('Calibri Bold'), local('Carlito Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'); }
@font-face { font-family: Aptos; src: local('Aptos'), local('Helvetica Neue'), local('Arial'); }
@font-face { font-family: Cambria; src: local('Cambria'), local('Caladea'), local('Georgia'); }