@font-face {
    font-family: "Source Sans 3";
    src: url("/schriften/SourceSans3-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("/schriften/SourceSans3-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("/schriften/SourceSans3-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bitter Pro";
    src: url("/schriften/BitterPro-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bitter Pro";
    src: url("/schriften/BitterPro-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --karte: #ffffff;
    --grund: #e4e9e4;
    --grund-tief: #d6ddd7;
    --tinte: #1b211e;
    --tinte-leise: #556059;
    --linie: #c6cfc8;
    --linie-stark: #6b7b70;
    --gefahr: #a81622;
    --gefahr-schrift: #ffffff;
    --ok: #2a4a38;
    --info: #3a4a52;
    --hinweis: #5a3d18;
    --fehler: #2a1a16;
    --messing: #8a6b2e;
    --verein: #343e39;
    --verein-hell: #d4d4d4;
    --verein-hover: #2c3430;
    --abstand: 1rem;
    --radius: 6px;
    --radius-gross: 10px;
    --dauer: 140ms;
    --zeilenmass: 1.5;
    --seitenrand: 20px;
    --grad-klein: 0.8125rem;
    --grad-text: 1rem;
    --grad-gross: 1.25rem;
    --grad-seitentitel: 1.875rem;
    --grad-seitentitel-schmal: 1.5625rem;
    --schrift-text: "Source Sans 3", system-ui, sans-serif;
    --schrift-zier: "Bitter Pro", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: var(--grund); }
body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font: var(--grad-text) / var(--zeilenmass) var(--schrift-text);
    background: var(--grund);
    color: var(--tinte);
}
a { color: inherit; }

.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 13px 24px;
    min-height: 72px;
    background: var(--verein);
    color: #fff;
    border-bottom: 2px solid var(--messing);
}
.kopf-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--schrift-zier);
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
    min-width: 0;
    color: #fff;
}
.kopf-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kopf-wappen {
    width: 38px;
    height: 38px;
    flex: none;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    padding: 3px;
    box-sizing: border-box;
}
.wappen-vorschau {
    display: block;
    width: 160px;
    height: 160px;
    margin: 12px auto 0;
    object-fit: contain;
}
.kopf-rechts {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.kopf-ich {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: #fff;
    text-decoration: none;
}
.kopf-zeichen, .kopf-verwaltung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    text-decoration: none;
}
.kopf-ich:hover .kopf-zeichen, .kopf-verwaltung:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
}
.kopf-ich:focus-visible, .kopf-verwaltung:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.kopf-zeichen .nav-zeichen,
.kopf-verwaltung .nav-zeichen { width: 22px; height: 22px; }
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.modulzeile, .fussleiste, .seite { }
.modulzeile { display: none; }
.fussleiste { display: none; }
.unterleiste { display: none; }
.geraet-untermenue, .menue-blatt { display: none; }
.menue-liste { list-style: none; margin: 0; padding: 0; }
.menue-liste a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--tinte);
    text-decoration: none;
}
.untermenue-wort {
    display: none;
}
.fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    background: var(--karte);
    padding: 16px 20px;
    border-top: 1px solid var(--linie);
}
.fuss-links {
    margin-left: auto;
    display: flex;
    gap: 16px;
}
.fuss-marke { display: inline-flex; align-items: center; gap: 8px; }
.fuss-marke img { display: block; }
.fuss-zeichen { width: 28px; height: 22px; }
.fuss-wort { height: 19px; width: auto; }
.fuss-stand {
    margin: 0;
    padding: 0 20px 12px;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--tinte-leise);
}
.streckenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: var(--karte);
    border-bottom: 1px solid var(--linie);
}
.strecke-titel { font-weight: 600; font-size: var(--grad-gross); }
.strecke-schritte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: var(--tinte-leise);
}
.strecke-schritte li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 0.7rem;
    background: var(--linie);
    vertical-align: middle;
}
.strecke-schritte li[aria-current="step"] { color: var(--tinte); font-weight: 600; }
.strecke-abbrechen { text-decoration: underline; margin-left: 22px; }
.streckenzaehler {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--karte);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie-stark);
}
.strecke-menge { font-weight: 600; font-size: 1.125rem; }
.strecke-balken { flex: 1; height: 8px; background: var(--grund-tief); }
.strecke-balken-fuellung { display: block; height: 100%; background: var(--linie-stark); }
.strecke-satz, .strecke-hand { font-size: 15px; max-width: 44ch; text-align: right; }
.balken-0 { width: 0%; }
.balken-5 { width: 5%; }
.balken-10 { width: 10%; }
.balken-15 { width: 15%; }
.balken-20 { width: 20%; }
.balken-25 { width: 25%; }
.balken-30 { width: 30%; }
.balken-35 { width: 35%; }
.balken-40 { width: 40%; }
.balken-45 { width: 45%; }
.balken-50 { width: 50%; }
.balken-55 { width: 55%; }
.balken-60 { width: 60%; }
.balken-65 { width: 65%; }
.balken-70 { width: 70%; }
.balken-75 { width: 75%; }
.balken-80 { width: 80%; }
.balken-85 { width: 85%; }
.balken-90 { width: 90%; }
.balken-95 { width: 95%; }
.balken-100 { width: 100%; }
.mehr-blatt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    background: var(--karte);
    border-top: 1px solid var(--linie);
    z-index: 40;
    padding: 12px 16px 0;
}
.mehr-kicker { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte-leise); }
.mehr-feld, .modul-untermenue a, .geraet-untermenue a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    text-decoration: none;
}
.mehr-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    background: var(--karte);
    color: var(--tinte);
    border-top: 1px solid var(--linie);
    margin: 12px 0 0;
    padding: 12px 16px;
}
.mehr-fuss a { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.mehr-fuss .fuss-marke { margin: 0; }
.mehr-fuss > p:not(.fuss-marke) { flex: 1 0 100%; margin: 0; }
.mehr-fuss .fuss-stand { padding: 0; text-align: left; color: var(--tinte-leise); background: transparent; }
.mehr-fuss .mehr-abmelden { margin: 0 0 0 auto; }
.knopf-gefahr {
    min-height: 44px;
    border-radius: var(--radius);
    padding: 8px 14px;
    background: var(--gefahr);
    border: 1px solid var(--gefahr);
    color: var(--gefahr-schrift);
    font: 600 15px/1.2 var(--schrift-text);
    cursor: pointer;
}
.fuss-links a,
.fuss-links button {
    white-space: nowrap;
    color: inherit;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.liste-scroll { min-width: 0; width: 100%; max-width: 100%; overflow-x: auto; contain: inline-size; }
.liste.termine {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.liste.termine th,
.liste.termine td {
    overflow: hidden;
    box-sizing: border-box;
}
.liste.termine th {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    background: var(--karte);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.liste.termine tbody td {
    height: auto;
    padding: 4px 12px;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.liste.termine td[data-spalte="termin"] { white-space: normal; }
.liste.termine .zeilentitel { display: block; font-weight: 600; }
.liste.termine .neben { display: block; color: var(--tinte-leise); }
.liste.termine th[data-spalte="wann"],
.liste.termine th[data-spalte="treffen"] { width: 170px; }
.liste.termine th[data-spalte="art"],
.liste.termine th[data-spalte="zustand"] { width: 140px; }
.liste.termine th[data-spalte="aktionen"] { width: 160px; }
.liste.termine td.spalte-aktionen { white-space: nowrap; padding: 4px 8px; text-align: right; font-size: 0; }
.liste.termine td.spalte-aktionen .handlung,
.liste.termine td.spalte-aktionen .km-sprung { margin-left: 6px; }
.liste.termine td.spalte-aktionen .handlung:first-child,
.liste.termine td.spalte-aktionen .km-sprung:first-child { margin-left: 0; }
@media (max-width: 1119px) {
    .liste.termine { min-width: 1020px; }
}
@supports (width: 1cqw) {
    @media (min-width: 1120px) {
        .listenlauf:has(> .liste.termine) { container: terminliste / inline-size; }
        .liste.termine {
            --terminliste-platz: calc(100cqw - 240px - 160px);
            --terminliste-summe: calc(var(--terminliste-wann, 0) + var(--terminliste-treffen, 0) + var(--terminliste-art, 0) + var(--terminliste-zustand, 0));
        }
        .liste.termine:has(th[data-spalte="wann"]) { --terminliste-wann: 170; }
        .liste.termine:has(th[data-spalte="treffen"]) { --terminliste-treffen: 170; }
        .liste.termine:has(th[data-spalte="art"]) { --terminliste-art: 140; }
        .liste.termine:has(th[data-spalte="zustand"]) { --terminliste-zustand: 140; }
        .liste.termine th[data-spalte="wann"],
        .liste.termine th[data-spalte="treffen"] { width: min(170px, var(--terminliste-platz) * 170 / var(--terminliste-summe)); }
        .liste.termine th[data-spalte="art"],
        .liste.termine th[data-spalte="zustand"] { width: min(140px, var(--terminliste-platz) * 140 / var(--terminliste-summe)); }
    }
    @container terminliste (max-width: 1019px) {
        .liste.termine td[data-spalte="wann"],
        .liste.termine td[data-spalte="treffen"],
        .liste.termine td[data-spalte="art"],
        .liste.termine td[data-spalte="zustand"] { white-space: normal; overflow-wrap: anywhere; }
    }
}
.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--tinte-leise); }
.ampel-zusage { background: #1f7a4d; }
.ampel-absage { background: #9b2c2c; }
.ampel-entschuldigt { background: #6b4c2a; }
.ampel-unentschieden, .ampel-offen { background: #6f6a62; }
.ampel-keine { background: #8a8175; }
.teilampel { display: flex; gap: 2px; }
.teilampel i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-leise); }
.teilampel i.zusage { background: #1f7a4d; }
.teilampel i.absage { background: #9b2c2c; }
.teilampel i.offen { background: #6f6a62; }
.karte { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 16px; margin: 12px 0; background: var(--karte); }
.karte h2 { margin: 0 0 8px; font-size: 18px; }
.zeilentitel { font-weight: 600; }
.seite { flex: 1 0 auto; padding: var(--abstand) var(--seitenrand); min-width: 0; }
main { max-width: 1100px; margin: 0 auto; }

.nav-zeichen, .handlung-bild {
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.nav-zeichen { width: 24px; height: 24px; vertical-align: middle; }
.handlung-bild { width: 22px; height: 22px; }

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: var(--abstand);
    min-width: 0;
    overflow: clip;
}
.karte > h2 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}
.meldung {
    /* Jede Meldung des Portals hat die Form der Spielmeldung (.spieltisch-meldung): ein Einblendfenster oben unter der Kopfzeile, überlagert, springt nie, blendet langsam aus (Herbert, 30.10.2026). */
    position: fixed;
    left: 50%;
    top: 88px;
    z-index: 35;
    box-sizing: border-box;
    width: max-content;
    max-width: min(30rem, calc(100% - 2 * var(--abstand)));
    margin: 0;
    padding: 6px calc(var(--abstand) + 2px);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-gross);
    background: var(--karte);
    box-shadow: 0 2px 10px rgba(27, 33, 30, 0.3);
    line-height: 1.25;
    font-size: var(--grad-klein);
    font-weight: 600;
    text-align: center;
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity 2000ms ease-in-out;
}
.meldung.meldung-weg { opacity: 0; pointer-events: none; }
.meldung[hidden] { display: none; }
@media (min-width: 700px) {
    .meldung { top: 136px; }
}
@media (prefers-reduced-motion: reduce) {
    .meldung { transition: none; }
}
.meldung-satz { margin: 0; }
.meldung-wort { font-weight: 700; }
.meldung-fehler .meldung-wort { color: var(--fehler); }
.meldung-hinweis .meldung-wort { color: var(--hinweis); }
.karte-kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
}
.karte-kopfzeile h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}
.karte-kopfzeile-aktionen { display: flex; align-items: center; gap: 4px; flex: none; }
.karte-kopfzeile-aktionen .handlung { margin-left: 0; }
.listenbruch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 8px;
}
.listenbruch h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}
.karte-pflicht { border-left: 3px solid var(--messing); }
.dash-karte > h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinte);
}
.befundliste { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--linie);
    color: var(--tinte);
    text-decoration: none;
}
.befundliste > li:last-child > .zeile { border-bottom: 0; }
.zeile-text { flex: 1; min-width: 0; }
a.zeile:hover, a.zeile:focus-visible { background: var(--grund-tief); }
.zeile > .handlung { margin: 0; flex: none; width: 28px; height: 28px; border: 0; background: transparent; }
.zeile:has(> .handlung) { padding-top: 6px; padding-bottom: 6px; }
.nebensache { display: block; color: var(--tinte-leise); font-size: var(--grad-klein); }
.formular { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.formular label { margin-top: 8px; }
table.verw, table.verw tbody { display: block; width: 100%; }
table.verw thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
table.verw tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "punkt aktion" "satz aktion";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--linie);
}
table.verw td { display: block; border: 0; padding: 0; }
table.verw td[data-titel="Punkt"] { grid-area: punkt; }
table.verw td[data-titel="Was du hier findest"] { grid-area: satz; }
table.verw td.spalte-aktionen { grid-area: aktion; }
table.verw .handlung { margin: 0; }
.termin-ampel {
    display: flex;
    height: 36px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--grund-tief);
}
.termin-ampel span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.termin-ampel .zu { background: #4f9e59; }
.termin-ampel .zu-leise { background: #9ecfa6; }
.termin-ampel .ab { background: #c8433c; }
.termin-ampel .ab-leise { background: #e39a94; }
.termin-ampel .offen { background: var(--grund-tief); color: var(--tinte); }
.termin-ampel .entschuldigt { background: var(--messing); color: #fff; }
.naechster-termin .termin-ampel { height: 32px; margin: 2px 0 0; }
.termin-ampel-leise { display: block; flex: 1 0 100%; min-width: 0; }
.termin-ampel-leise .termin-ampel { height: 10px; margin: 0; border-radius: 5px; }
.termin-ampel-leise .termin-ampel span { font-size: 0; }
.termin-ampel-wort {
    display: block;
    margin-top: 6px;
    color: var(--tinte-leise);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}
.karte.vereinsbuch-karte { padding: 0; }
.karte.vereinsbuch-karte > .feldhinweis { padding: 0 16px 16px; }
.karte.vereinsbuch-karte > .befundliste .zeile { padding: 16px 20px; }
.karte.vereinsbuch-karte > .vereinsbuch-suche { padding: 16px 20px 16px; }
main .karte + .karte { margin-top: 16px; }

.seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0 0 12px;
}
.seitenkopf h1 { flex: 1; min-width: 0; white-space: normal; }
.seitenkopf h1, .anmelde-karte h1, .karte > h1 {
    margin: 0;
    font-family: var(--schrift-zier);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.2;
    white-space: nowrap;
}
.anzahl {
    margin-left: 10px;
    font-family: var(--schrift-text);
    font-size: 15px;
    font-weight: 400;
    color: var(--tinte-leise);
}

.knopf-haupt, .knopf-still, .knopf-plus {
    min-height: 44px;
    border-radius: var(--radius);
    padding: 10px 18px;
    font: 600 17px/1.2 var(--schrift-text);
    cursor: pointer;
    white-space: nowrap;
}
.knopf-haupt, .knopf-plus {
    background: var(--verein);
    border: 1px solid var(--verein);
    color: #fff;
}
a.knopf-haupt { display: inline-flex; align-items: center; text-decoration: none; }
.knopf-haupt:hover, .knopf-plus:hover { background: var(--verein-hover); }
.seitenkopf-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; flex-wrap: wrap; max-width: 100%; }
.seitenkopf-aktionen .knopf-haupt,
.seitenkopf-aktionen .knopf-plus { margin-left: auto; }
.seitenkopf-aktionen .handlung { margin-left: 0; }
a.knopf-ausnahme {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: var(--radius);
    padding: 10px 18px;
    font: 600 17px/1.2 var(--schrift-text);
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--linie-stark);
    color: var(--tinte);
}
a.knopf-ausnahme:hover { background: transparent; border-color: var(--tinte); }
.knopf-still {
    background: transparent;
    border: 1px solid var(--linie-stark);
    color: var(--tinte);
}
form.formular[data-b="liste"] > .knopf-still {
    align-self: flex-start;
    width: auto;
    margin-bottom: 12px;
}
a.knopf-still, a.knopf-haupt { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.zeichenknopf { width: 44px; padding: 0; }
.knopf-mit-zeichen { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: 100%; }
.knopf-mit-zeichen .nav-zeichen { flex: none; }

.vereinsbuch-suche {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: color-mix(in srgb, var(--grund) 38%, var(--karte));
    border-bottom: 1px solid var(--linie);
    border-radius: 10px 10px 0 0;
    padding: 12px;
}
.vereinsbuch-suche > label,
.vereinsbuch-suche-zeile > label:not(.nur-lesbar) {
    display: block;
    order: 0;
    flex: 1 0 100%;
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--tinte-leise);
}
.vereinsbuch-suche-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.vereinsbuch-suche-zeile::before {
    content: "";
    order: 3;
    flex: 1 0 100%;
    height: 0;
    margin: -6px 0 0;
}
.vereinsbuch-suche-zeile > input[type="search"],
.vereinsbuch-suche-zeile > input[type="number"] {
    order: 1;
    flex: 1 1 0;
    min-width: 9rem;
    width: auto;
    height: 44px;
    min-height: 44px;
}
.vereinsbuch-suche-zeile > .zeichenknopf,
.vereinsbuch-suche-zeile > .handlung { order: 2; flex: 0 0 44px; }
.vereinsbuch-suche-zeile > .handlung { order: 4; margin-left: 0; background: transparent; }
.vereinsbuch-suche-zeile > select + .handlung { margin-left: auto; }
.vereinsbuch-suche-zeile > .handlung:hover { background: transparent; border-color: var(--tinte); }
.vereinsbuch-suche-zeile > select { order: 4; flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; }
.vereinsbuch-suche-zeile > select.bleibt { order: 1; flex: 1 1 auto; }
.nur-lesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.formular label, form[data-b="fenster"] label, .vereinsbuch-suche label, .haken {
    display: block;
    font-size: var(--grad-klein);
    color: var(--tinte-leise);
}
.formular select[multiple],
form[data-b="fenster"] select[multiple] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 11rem;
    height: auto;
}
.formular input, .formular textarea, .formular select,
form[data-b="fenster"] input, form[data-b="fenster"] textarea, form[data-b="fenster"] select,
.vereinsbuch-suche input, .vereinsbuch-suche select {
    font: 17px/1.2 var(--schrift-text);
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--linie-stark);
    border-radius: 6px;
    background: var(--karte);
    color: var(--tinte);
    width: 100%;
    max-width: 100%;
}
.vereinsbuch-suche input, .vereinsbuch-suche select { width: auto; min-width: 8rem; }
.vereinsbuch-suche > select[data-b="auswahl"] {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
}

.formular input[type="radio"],
.formular input[type="checkbox"],
form[data-b="fenster"] input[type="radio"],
form[data-b="fenster"] input[type="checkbox"] {
    width: auto;
    min-width: 1.25rem;
    min-height: 1.25rem;
    margin-top: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    flex: 0 0 auto;
    accent-color: var(--verein);
}
.formular label:has(input[type="radio"]),
.formular label:has(input[type="checkbox"]),
form[data-b="fenster"] label:has(input[type="radio"]),
form[data-b="fenster"] label:has(input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 44px;
    color: var(--tinte);
}
.haken { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--tinte); }
.haken input { width: auto; min-height: 0; }
.haken span { min-width: 0; overflow-wrap: break-word; }
.rechte-gruppe { margin: 0.9rem 0 0.15rem; font-weight: 600; color: var(--tinte); }
.wahlfeld { min-width: 0; margin: 0 0 12px; }
.wahlfeld-titel { margin: 0 0 6px; font-size: var(--grad-klein); color: var(--tinte-leise); }
.wahlfeld-leer { margin: 0; color: var(--tinte-leise); }
.wahlfeld-reihe { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
form[data-b="fenster"] label.wahlfeld-punkt:has(input[type="checkbox"]),
form[data-b="fenster"] label.wahlfeld-punkt:has(input[type="radio"]),
.formular label.wahlfeld-punkt:has(input[type="checkbox"]),
.formular label.wahlfeld-punkt:has(input[type="radio"]) {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 5px 10px;
    gap: 0;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    background: var(--karte);
    color: var(--tinte);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}
form[data-b="fenster"] label.wahlfeld-punkt input[type="checkbox"],
form[data-b="fenster"] label.wahlfeld-punkt input[type="radio"],
.formular label.wahlfeld-punkt input[type="checkbox"],
.formular label.wahlfeld-punkt input[type="radio"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: 0;
    cursor: pointer;
}
form[data-b="fenster"] label.wahlfeld-punkt span,
.formular label.wahlfeld-punkt span {
    line-height: 1;
    text-align: center;
    pointer-events: none;
}
form[data-b="fenster"] label.wahlfeld-punkt:has(input:checked),
.formular label.wahlfeld-punkt:has(input:checked) {
    background: var(--verein);
    border-color: var(--verein);
    color: var(--gefahr-schrift);
}
form[data-b="fenster"] label.wahlfeld-punkt:has(input:focus-visible),
.formular label.wahlfeld-punkt:has(input:focus-visible) {
    outline: 2px solid var(--messing);
    outline-offset: 2px;
}
.wahlfeld input[type="hidden"] { display: none; }
.wahlfeld-breit .wahlfeld-reihe { flex-direction: column; align-items: stretch; }
form[data-b="fenster"] .wahlfeld-breit label.wahlfeld-punkt:has(input[type="checkbox"]),
form[data-b="fenster"] .wahlfeld-breit label.wahlfeld-punkt:has(input[type="radio"]),
.formular .wahlfeld-breit label.wahlfeld-punkt:has(input[type="checkbox"]),
.formular .wahlfeld-breit label.wahlfeld-punkt:has(input[type="radio"]) {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 8px 12px;
}
form[data-b="fenster"] .wahlfeld-breit label.wahlfeld-punkt span,
.formular .wahlfeld-breit label.wahlfeld-punkt span {
    line-height: 1.3;
    text-align: left;
}
.feldhinweis { color: var(--tinte-leise); font-size: var(--grad-klein); }
.einladung-kopie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.einladung-kopie .einladung-satz { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.kopierzeichen { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
.kopierwort { font-size: var(--grad-klein); color: var(--tinte); }
.formular-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.schreibhinweis { border-top: 1px solid var(--linie); padding-top: 8px; color: var(--tinte-leise); font-size: var(--grad-klein); }

.konto-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.konto-zeile { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.konto-zeile:last-child { border-bottom: 0; }
.konto-name { margin: 0; font-weight: 600; }
.konto-stand { margin: 4px 0 0; color: var(--tinte-leise); font-size: var(--grad-klein); }
.konto-handlungen { display: flex; gap: 8px; margin-top: 8px; }
.liste { width: 100%; border-collapse: collapse; margin: 0; }
.liste th, .liste td { text-align: left; border-bottom: 1px solid var(--linie); }
.liste td { padding: 4px 12px; font-size: 14px; vertical-align: middle; background: var(--karte); }
.liste td.spalte-aktionen { white-space: nowrap; text-align: right; width: 1%; }
.liste th.spalte-aktionen { width: 72px; text-align: right; }
.aktionen-reihe {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.aktionen-reihe .handlung { margin-left: 0; flex: none; }
.aktionen-reihe form { display: inline-flex; margin: 0; gap: 0; }
.aktionen-reihe .zeichenknopf { flex: none; }
.pfeil-hoch .nav-zeichen { transform: rotate(-90deg); }
.pfeil-runter .nav-zeichen { transform: rotate(90deg); }
.liste td form { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.listenlauf:has(.liste td form) > .liste { width: max-content; min-width: 100%; }
.listenlauf > table.liste-breit { width: max-content; min-width: 100%; }
.karte.vereinsbuch-karte,
.karte:has(.listenlauf) { max-width: 100%; contain: inline-size; }
.listenlauf > table.liste-breit th,
.listenlauf > table.liste-breit td { white-space: nowrap; }
.fassung-neben { display: none; }
.betrag-fest { white-space: nowrap; }
@media (max-width: 699px) {
    .listenlauf > table.liste-fassung-a { width: 100%; min-width: 0; }
    .listenlauf > table.liste-fassung-a th:not(:first-child):not(.spalte-aktionen),
    .listenlauf > table.liste-fassung-a td:not(:has(> .zeilentitel)):not(.spalte-aktionen) { display: none; }
    .listenlauf > table.liste-fassung-a .fassung-neben { display: block; margin-top: 2px; }
    .listenlauf > table.liste-fassung-a .zeilentitel { min-width: 120px; white-space: normal; overflow-wrap: anywhere; }
    .listenlauf > table.liste-fassung-a td.spalte-aktionen { width: 1%; }
}
.listenlauf > table.listenkarte-liste {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}
.listenlauf > table.listenkarte-liste th,
.listenlauf > table.listenkarte-liste td {
    white-space: normal;
    overflow-wrap: anywhere;
}
.listenlauf > table.listenkarte-liste th {
    height: auto;
}
.listenlauf > table.listenkarte-liste th .listensort {
    min-width: 0;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}
.listenlauf > table.listenkarte-liste th.spalte-aktionen { width: 7.5rem; }
.listenlauf > table.listenkarte-liste td.spalte-aktionen {
    white-space: nowrap;
    overflow-wrap: normal;
}
.listenlauf:has(> table.listenkarte-liste) { overflow-x: clip; }
.liste th {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    background: var(--karte);
    white-space: nowrap;
    vertical-align: middle;
}
.liste tbody tr:last-child td { border-bottom: 0; }
.listenlauf {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;
    contain: inline-size;
}
.liste.vereinsbuch {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
}
.liste.vereinsbuch th {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    background: var(--karte);
    border-bottom: 1px solid var(--linie);
    text-align: left;
    overflow: hidden;
}
.liste.vereinsbuch td {
    height: 52px;
    padding: 4px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--linie);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.liste.vereinsbuch tbody tr:hover { background: var(--grund-tief); }
.liste.vereinsbuch th[data-spalte="art"] { width: 76px; }
.liste.vereinsbuch th[data-spalte="mitgliedschaft"] { width: 150px; text-align: right; }
.liste.vereinsbuch td[data-spalte="mitgliedschaft"] { text-align: right; font-variant-numeric: tabular-nums; }
.liste.vereinsbuch th[data-spalte="aemter"] { width: 22%; }
.liste.vereinsbuch th[data-spalte="instrument"],
.liste.vereinsbuch th[data-spalte="register"] { width: 18%; }
.liste.vereinsbuch th[data-spalte="konto"] { width: 72px; text-align: center; }
.liste.vereinsbuch td[data-spalte="konto"] { text-align: center; }
.liste.vereinsbuch th[data-handlung="1"] { width: 72px; }
.liste.vereinsbuch th[data-handlung="2"] { width: 98px; }
.liste.vereinsbuch th[data-handlung="3"] { width: 144px; }
.liste.vereinsbuch th[data-handlung="4"] { width: 190px; }
main.betreiber .karte.vereinsbuch-karte {
    border-radius: 8px;
    border: 1px solid var(--linie);
    margin-left: var(--abstand);
    margin-right: var(--abstand);
}
main.betreiber .liste.vereinsbuch { min-width: 0; width: 100%; }
main.betreiber .liste.vereinsbuch th[data-spalte="vermerk"],
main.betreiber .liste.vereinsbuch th[data-spalte="stand"],
main.betreiber .liste.vereinsbuch th[data-spalte="fuer"] { width: 34%; }
.liste.vereinsbuch td[data-spalte="handlung"] { text-align: right; font-size: 0; padding: 4px 4px; white-space: nowrap; overflow: visible; }
.liste.vereinsbuch td[data-spalte="handlung"] .handlung { margin-left: 0; }
.listensort {
    display: flex;
    align-items: center;
    min-height: 44px;
    gap: 4px;
    color: inherit;
    text-decoration: none;
}
.zeilentitel { font-size: 15px; font-weight: 600; display: block; }
.liste.vereinsbuch td[data-spalte="name"] .zeilentitel { display: inline; vertical-align: middle; }
.vereinsbuch-kuerzel {
    display: inline-block;
    font-size: 11px;
    border: 1px solid var(--linie);
    border-radius: 4px;
    min-width: 44px;
    text-align: center;
    padding: 2px 4px;
}
.vereinsbuch-fehlend { color: var(--tinte-leise); }
.marke {
    display: inline-block;
    margin-left: 6px;
    background: var(--grund-tief);
    border: 1px solid var(--linie);
    border-radius: 999px;
    font-size: 0.85em;
    padding: 0 6px;
}
.liste.vereinsbuch .marke.marke-aktiv {
    background: transparent;
    border: 1px solid var(--messing);
    color: var(--tinte);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
    vertical-align: middle;
}
.liste.vereinsbuch tbody tr:has(.marke-aktiv) td:first-child { box-shadow: inset 3px 0 0 var(--messing); }
.vereinsbuch-suche-zeile > select.weit {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}
.liste.ehrungen {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}
.liste.ehrungen th,
.liste.ehrungen td {
    white-space: nowrap;
}
.liste.ehrungen th {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
    background: var(--karte);
}
.liste.ehrungen td {
    height: 52px;
    padding: 4px 12px;
    font-size: 14px;
    vertical-align: middle;
}
.liste.ehrungen .zeilentitel { display: inline; font-weight: 600; }
.liste.ehrungen .nebensache {
    display: block;
    margin-top: 2px;
    color: var(--tinte-leise);
    font-size: var(--grad-klein);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.mitgliedsbild {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--grund-tief);
}
.mitgliedsbild-gross { width: 160px; height: 160px; }
.hinweiskarte {
    border-left: 3px solid var(--messing);
    background: var(--karte);
    padding: 10px 14px;
    margin: 0 0 12px;
}
.handlung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 2px;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    background: var(--karte);
    color: var(--tinte);
    cursor: pointer;
    text-decoration: none;
}
.handlung:hover { background: var(--grund-tief); }
.handlung[hidden] { display: none; }
.zellenknopf {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fenster {
    display: none;
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: var(--abstand);
    max-width: 32rem;
    width: calc(100% - 2rem);
    background: var(--karte);
    color: var(--tinte);
}
.fenster-breit { max-width: 40rem; }
.fenster[open] {
    position: fixed;
    z-index: 40;
    display: flex;
    flex-direction: column;
    top: 84px;
    right: 0;
    bottom: auto;
    left: 0;
    width: min(32rem, calc(100vw - 2rem));
    height: fit-content;
    max-height: calc(100dvh - 96px);
    margin: 0 auto;
    overflow: hidden;
    min-width: 0;
}
.fenster-breit[open] { width: min(40rem, calc(100vw - 2rem)); }
.fenster::backdrop {
    background: rgba(0, 0, 0, 0.4);
    clip-path: inset(76px 0 0 0);
}
.fenster h2 {
    margin: 0 0 12px;
    font-family: var(--schrift-zier);
    font-size: var(--grad-gross);
    font-weight: 600;
}
.fenster-kreuz {
    position: static;
    align-self: flex-end;
    flex: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 8px auto;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--linie-stark);
    background: var(--karte);
    color: var(--tinte);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.fenster-kreuz:hover { background: var(--grund-tief); }
.fenster-gespeichert {
    margin: var(--abstand) 0 0;
    border-left: 3px solid var(--ok);
    background: color-mix(in srgb, var(--ok) 7%, var(--karte));
    color: var(--ok);
    font-weight: 600;
    padding: 8px 12px;
}
.fenster-hinweis {
    margin: 0 0 12px;
}
.fenster-gespeichert:not([hidden]) + .formular-fuss { margin-top: 8px; }
.fenster-koerper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
}
.fenster form,
.fenster .formular,
.fenster .reiterkasten,
.fenster .katalog,
.fenster .katalog-liste {
    min-width: 0;
    max-width: 100%;
}
.fenster input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fenster select,
.fenster textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.fenster .reiterleiste {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}
.fenster .formular-fuss,
.fenster .zuordnung-zeile-kopf {
    flex-wrap: wrap;
    min-width: 0;
}

.liste.menue { width: 100%; border-collapse: collapse; }
.liste.menue th, .liste.menue td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--linie);
    text-align: left;
    vertical-align: middle;
}
.liste.menue th {
    height: 44px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.reiterkasten { min-width: 0; max-width: 100%; }
.reiterleiste {
    display: flex;
    gap: 4px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    contain: inline-size;
    border-bottom: 1px solid var(--linie);
}
.reiter {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--tinte-leise);
    font: inherit;
    cursor: pointer;
}
.reiter.ist-an { color: var(--tinte); border-bottom-color: var(--verein); }
.reiterblatt { display: none; min-width: 0; max-width: 100%; padding-top: 12px; }
.reiterblatt.ist-an { display: block; }
.betreiber .reiterkasten,
.betreiber > .formular {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 0;
}
.klapp-kopf { min-height: 44px; cursor: pointer; color: var(--tinte); }
.zuordnung-zeile { border-bottom: 1px solid var(--linie); padding: 8px 0; }
.zuordnung-zeile-kopf { display: flex; justify-content: space-between; gap: 12px; }
.zuordnung-zeile-name { font-size: 20px; font-weight: 600; }
.zuordnung-zeile-zeit { font-size: 14px; color: var(--tinte-leise); }
.katalog { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.katalog-suche {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--linie-stark);
    border-radius: 6px;
    background: var(--karte);
    color: var(--tinte);
    font: 17px/1.2 var(--schrift-text);
}
.bestand { padding: 10px 0 4px; }
.bestand + .bestand { border-top: 1px solid var(--linie); }
.bestand-name { margin: 0; font-size: 20px; font-weight: 600; }
.bestand-satz { margin: 2px 0 0; color: var(--tinte-leise); }
.katalog-gewaehlt { display: flex; flex-direction: column; gap: 4px; }
.katalog-wahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 4px 0 12px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.katalog-liste { display: none; list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
.katalog-liste.ist-offen { display: block; }
.katalog-immer .katalog-liste { display: block; max-height: 280px; }
.katalog-eintrag {
    min-height: 44px;
    width: 100%;
    text-align: left;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 6px;
    padding: 0 12px;
}
.namensuche-liste {
    display: none;
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 180px;
    overflow: auto;
}
.namensuche-liste.ist-offen { display: block; }
.namensuche-eintrag {
    min-height: 44px;
    width: 100%;
    text-align: left;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    cursor: pointer;
    margin-top: 6px;
    padding: 0 12px;
    color: var(--tinte);
    font: 17px/1.2 var(--schrift-text);
}
.katalog-weg {
    width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.anmelde-schirm {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.anmelde-karte { width: min(32rem, 100%); }
.sperrsatz {
    border-left: 3px solid var(--hinweis);
    padding: 8px 12px;
    color: var(--hinweis);
}
.leerhinweis { padding: 16px; }
.vollexport-liste { width: 100%; }
.vollexport-liste th, .vollexport-liste td { overflow-wrap: anywhere; }
.vollexport-schmal { display: none; }
@media (max-width: 449px) {
    table.vollexport-liste,
    table.vollexport-liste tbody,
    table.vollexport-liste tr,
    table.vollexport-liste td { display: block; width: 100%; max-width: 100%; }
    table.vollexport-liste thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    table.vollexport-liste td.vollexport-breit { display: none; }
    table.vollexport-liste .vollexport-schmal { display: block; font-weight: 400; }
    table.vollexport-liste td.ist-datei { font-weight: 600; border: 0; padding: 8px 0 12px; }
}


.schrank-karte { min-width: 0; }
.schrank-kopf, .schrank-ebene, .schrank-ebene-kopf { width: 100%; }
.schrank-kopf, .schrank-ebene-kopf, .schrank-kopf-aktionen, .schrank-ebene-aktionen, .schrank-kasten-aktionen {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.schrank-kopf, .schrank-ebene-kopf { justify-content: space-between; }
.schrank-kopf h2 { margin: 0; }
.schrank-ebene { margin-top: 14px; }
.schrank-ebene-kopf .zeilentitel { flex: 1; margin: 0; min-width: 0; }
.schrank-kopf-aktionen, .schrank-ebene-aktionen, .schrank-kasten-aktionen { flex: none; }
.schrank-kopf-aktionen .handlung,
.schrank-ebene-aktionen .handlung,
.schrank-kasten-aktionen .handlung { margin-left: 0; }
.schrank-bord {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    container-type: inline-size;
    container-name: schrank;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--linie);
    border-radius: 10px;
    background: var(--grund);
}
.budget-bord { grid-template-columns: 1fr; }
.schrank-kasten.budget-kasten {
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
    background: color-mix(in srgb, var(--messing) 32%, var(--karte));
    border-color: var(--linie);
    box-shadow: none;
}
.schrank-kasten.budget-kasten .termin-ampel-leise,
.schrank-kasten.budget-kasten .termin-balken { flex: 0 0 auto; height: auto; }
.budget-bord > .schrank-kasten-neu {
    border-color: var(--linie);
    box-shadow: none;
}
.budget-ampel { margin-top: 8px; }
.budget-ampel .termin-ampel .ent { order: 1; }
.budget-ampel .termin-ampel .zu { order: 2; }
.budget-ampel .termin-ampel .zu-leise { order: 3; }
.budget-ampel .termin-ampel .ab { order: 4; }
.budget-ampel .termin-ampel .ab-leise { order: 5; }
.budget-seite { margin: 12px 0 2px; font-weight: 700; }
.schrank-kasten {
    min-width: 0;
    max-width: none;
    min-height: 7.5rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid var(--linie-stark);
    border-radius: 8px;
    background: var(--karte);
    box-shadow: inset 0 -3px 0 var(--messing);
}
.schrank-code {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}
.schrank-kasten p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.schrank-kasten-aktionen { margin-top: auto; }
.schrank-kasten-neu {
    width: 100%;
    max-width: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    border-style: dashed;
    color: var(--tinte-leise);
    background: transparent;
    box-shadow: none;
}
.schrank-textknopf {
    width: auto;
    margin-top: 8px;
    padding: 0 4px;
    color: var(--verein);
    font-weight: 600;
    text-align: left;
}
@container schrank (min-width: 66rem) {
    .schrank-bord { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
    .kopf { gap: 12px; padding-left: 12px; padding-right: 12px; }
    .seite, main { min-width: 0; max-width: 100%; }
    .fenster[open] { width: min(32rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); }
    .fenster-breit[open] { width: min(40rem, calc(100vw - 1rem)); }
    .schrank-bord { gap: 4px; padding: 4px; }
    .schrank-kasten { padding: 4px; gap: 2px; min-height: 6.5rem; }
    .schrank-kasten-aktionen { gap: 2px; }
    .schrank-kasten-aktionen .handlung { width: 28px; height: 28px; }
    .schrank-kasten-aktionen .handlung-bild { width: 16px; height: 16px; }
    .seitenkopf { flex-wrap: wrap; align-items: flex-start; }
    .seitenkopf h1 { flex: 1 0 100%; }
    .seitenkopf-aktionen { flex: 1 1 100%; max-width: 100%; justify-content: flex-end; }
    /* Reines Plus (Wort „+“, trägt aria-label) bleibt in der Titelzeile. Textknöpfe (Konten, Bankimport) umbrechen weiter. */
    .seitenkopf:has(> .seitenkopf-aktionen > .knopf-plus[aria-label]:only-child) { flex-wrap: nowrap; align-items: center; }
    .seitenkopf:has(> .seitenkopf-aktionen > .knopf-plus[aria-label]:only-child) > h1 { flex: 1 1 auto; min-width: 0; }
    .seitenkopf:has(> .seitenkopf-aktionen > .knopf-plus[aria-label]:only-child) > .seitenkopf-aktionen { flex: none; width: auto; max-width: none; }
    .seitenkopf h1, .anmelde-karte h1 { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
    .knopf-plus { white-space: nowrap; }
    .fussleiste {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        min-height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--karte);
        border-top: 1px solid var(--linie);
        z-index: 30;
    }
    .fussleiste-feld {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        text-decoration: none;
        color: var(--tinte-leise);
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        cursor: pointer;
    }
    .fussleiste-feld span { max-width: 100%; overflow-wrap: anywhere; }
    .fussleiste-feld.ist-aktiv { color: var(--verein); }
    .fussleiste-feld:focus-visible { outline: 2px solid var(--verein); outline-offset: -2px; }
    .kopf-ich-name { display: none; }
    .fussleiste .mehr { flex: 1 1 0; min-width: 0; display: flex; }
    .fussleiste .mehr > button { flex: 1; color: var(--tinte-leise); }
    .fussleiste .mehr > button.ist-aktiv { color: var(--verein); }
    .fussleiste-feld .mehr-winkel { font-size: 9px; line-height: 1; }
    .fussleiste-unter { display: block; font-size: 10px; font-weight: 700; line-height: 1.1; }
    .unterleiste {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 27;
        background: var(--karte);
        border-top: 1px solid var(--linie);
        overflow: visible;
    }
    .unterleiste .menue-liste {
        display: flex;
        align-items: stretch;
        width: auto;
        max-width: 100%;
        min-width: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scrollbar-width: none;
    }
    .unterleiste .menue-liste::-webkit-scrollbar { display: none; }
    .unterleiste .menue-liste > li { display: flex; align-items: stretch; }
    .unterleiste .menue-liste > li.untermenue-wort { display: none; }
    .unterleiste .menue-liste a {
        min-height: 44px;
        padding: 0 14px;
        border-bottom: 0;
        font-size: 15px;
        white-space: nowrap;
    }
    .unterleiste .untermenue-wort + .untermenue-punkt { box-shadow: inset 1px 0 0 var(--linie); }
    .unterleiste .untermenue-punkt a { padding-left: 14px; }
    .unterleiste .menue-liste a[aria-current="page"] {
        margin: 0;
        padding-left: 14px;
        border-left: 0;
        background: transparent;
        color: var(--verein);
        box-shadow: inset 0 -2px 0 var(--verein);
        font-weight: 600;
    }
    .seite {
        flex: 1 1 auto;
        width: 100%;
        padding-top: var(--abstand);
        padding-right: var(--seitenrand);
        padding-bottom: var(--abstand);
        padding-left: var(--seitenrand);
    }
    .seite:has(> main.betreiber) {
        padding-left: 0;
        padding-right: 0;
    }
    .betreiber > .seitenkopf,
    .betreiber .dash-gruppenwort,
    .betreiber > [data-b="hinweis"],
    .betreiber > [data-b="liste"] {
        padding-left: var(--abstand);
        padding-right: var(--abstand);
    }
    .betreiber .karte,
    .betreiber .reiterkasten,
    .betreiber > .formular {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    body:has(nav.fussleiste) .fuss { margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    body:has(nav.fussleiste):has(.unterleiste) .fuss { margin-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
    body:has(.unterleiste) .menue-flaeche,
    body:has(.unterleiste) .menue-schleier { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
    .menue-blatt[hidden],
    .geraet-untermenue[hidden] { display: none !important; }
    .menue-blatt:not([hidden]),
    .geraet-untermenue:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 28;
        pointer-events: none;
    }
    .menue-schleier {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        background: rgba(27, 33, 30, 0.34);
        opacity: 0;
        pointer-events: auto;
        transition: opacity 320ms ease-out;
    }
    .menue-blatt.ist-offen .menue-schleier,
    .geraet-untermenue.ist-offen .menue-schleier { opacity: 1; }
    .menue-flaeche {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 128px);
        background: var(--karte);
        color: var(--tinte);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 28px rgba(27, 33, 30, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        pointer-events: auto;
        transform: translateY(110%);
        transition: transform 320ms ease-out;
    }
    .menue-blatt.ist-offen .menue-flaeche,
    .geraet-untermenue.ist-offen .menue-flaeche { transform: none; }
    .menue-griff {
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: var(--linie-stark);
        margin: 8px auto 2px;
        flex: none;
        touch-action: none;
        cursor: grab;
    }
    .menue-titel {
        margin: 0;
        padding: 8px 16px 2px;
        font-family: var(--schrift-zier);
        font-size: 20px;
        font-weight: 600;
    }
    .menue-liste { list-style: none; margin: 0; padding: 0 16px 8px; }
    .menue-liste a {
        display: flex;
        align-items: center;
        min-height: 56px;
        font-size: 17px;
        color: var(--tinte);
        text-decoration: none;
        border-bottom: 1px solid var(--linie);
    }
    .menue-liste a[aria-current="page"] {
        border-left: 3px solid var(--verein);
        font-weight: 600;
        margin-left: -16px;
        padding-left: 13px;
        background: var(--grund-tief);
    }
    .untermenue-punkt a { padding-left: 12px; }
    .menue-flaeche .mehr-kicker,
    .menue-flaeche .mehr-feld { padding-left: 16px; padding-right: 16px; }
    .menue-flaeche .mehr-feld { border-bottom: 1px solid var(--linie); }
    .menue-flaeche .mehr-fuss { margin: 12px 0 0; }
    .menue-flaeche .mehr-fuss .mehr-abmelden { padding: 0; }
    .fuss-stand {
        position: static;
        padding: 0 12px 8px;
        background: transparent;
    }
    @media (prefers-reduced-motion: reduce) {
        .menue-schleier, .menue-flaeche { transition: none; }
    }
    .modulzeile { display: none; }
    .vereinsbuch-suche-zeile { gap: 8px 6px; }
    .vereinsbuch-suche-zeile::before { margin: -8px 0 0; }
    .vereinsbuch-suche-zeile > select { flex: 1 1 calc(50% - 6px); max-width: calc(50% - 6px); }
    .vereinsbuch-suche-zeile > select.weit {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .liste.vereinsbuch { min-width: 790px; width: 790px; }
    .liste.vereinsbuch th[data-spalte="art"] { width: 68px; }
    .liste.vereinsbuch th[data-spalte="name"] { width: 190px; }
    .liste.vereinsbuch th[data-spalte="mitgliedschaft"],
    .liste.vereinsbuch th[data-spalte="aemter"],
    .liste.vereinsbuch th[data-spalte="instrument"],
    .liste.vereinsbuch th[data-spalte="register"] { width: 130px; }
}
@media (min-width: 700px) and (max-width: 1119px) {
    .modulzeile {
        display: flex;
        position: sticky;
        top: 72px;
        z-index: 15;
        min-height: 52px;
        background: var(--karte);
        border-bottom: 1px solid var(--linie);
    }
    .modulzeile-feld {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 52px;
        padding: 0 16px;
        text-decoration: none;
    }
    .modulzeile-feld.ist-aktiv { color: var(--verein); box-shadow: inset 0 -2px 0 var(--verein); }
    .modul-untermenue { position: relative; margin-left: auto; }
    .modul-untermenue > summary {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 16px;
        list-style: none;
        cursor: pointer;
    }
    .modul-untermenue > summary::-webkit-details-marker { display: none; }
    .modul-untermenue > summary::marker { content: ""; }
    .modul-untermenue-blatt { display: none; }
    .modul-untermenue[open] > .modul-untermenue-blatt {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 20;
        min-width: 14rem;
        background: var(--karte);
        border: 1px solid var(--linie);
    }
    .modul-untermenue .menue-liste { padding: 0 16px 8px; }
    .modul-untermenue .untermenue-wort + .untermenue-punkt { margin-top: 8px; border-top: 1px solid var(--linie); }
}
.seitenleiste { display: none; }
@media (min-width: 1120px) {
    .modulzeile { display: none; }
    .seite { display: flex; align-items: flex-start; padding: 0; }
    main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: var(--abstand) var(--seitenrand); }
    .seitenleiste {
        display: block;
        width: 240px;
        flex: 0 0 240px;
        position: sticky;
        top: 72px;
        min-height: calc(100vh - 72px);
        background: var(--karte);
        border-right: 1px solid var(--linie);
        padding: 12px 0;
    }
    .seitenleiste-feld {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 16px;
        text-decoration: none;
        color: var(--tinte);
    }
    .seitenleiste-feld.ist-aktiv { box-shadow: inset 3px 0 0 var(--verein); color: var(--verein); }
    .seitenleiste .menue-liste { padding: 0 0 8px; }
    .seitenleiste .menue-liste a { min-height: 44px; padding: 0 16px 0 48px; font-size: 16px; }
    .seitenleiste .untermenue-wort + .untermenue-punkt { margin-top: 8px; border-top: 1px solid var(--linie); }
    main { flex: 1; min-width: 0; padding: var(--abstand) var(--seitenrand); }
    .fuss { padding: 24px 32px; }
}

[data-zeichen="abfrage"] { mask-image: url("/zeichen/abfrage.svg"); -webkit-mask-image: url("/zeichen/abfrage.svg"); }
[data-zeichen="abspielen"] { mask-image: url("/zeichen/abspielen.svg"); -webkit-mask-image: url("/zeichen/abspielen.svg"); }
[data-zeichen="amt"] { mask-image: url("/zeichen/amt.svg"); -webkit-mask-image: url("/zeichen/amt.svg"); }
[data-zeichen="amtsseite"] { mask-image: url("/zeichen/amtsseite.svg"); -webkit-mask-image: url("/zeichen/amtsseite.svg"); }
[data-zeichen="ansehen"] { mask-image: url("/zeichen/ansehen.svg"); -webkit-mask-image: url("/zeichen/ansehen.svg"); }
[data-zeichen="aufgaben"] { mask-image: url("/zeichen/aufgaben.svg"); -webkit-mask-image: url("/zeichen/aufgaben.svg"); }
[data-zeichen="aufgabenliste"] { mask-image: url("/zeichen/aufgabenliste.svg"); -webkit-mask-image: url("/zeichen/aufgabenliste.svg"); }
[data-zeichen="ausgabe"] { mask-image: url("/zeichen/ausgabe.svg"); -webkit-mask-image: url("/zeichen/ausgabe.svg"); }
[data-zeichen="ausliefern"] { mask-image: url("/zeichen/ausliefern.svg"); -webkit-mask-image: url("/zeichen/ausliefern.svg"); }
[data-zeichen="bearbeiten"] { mask-image: url("/zeichen/bearbeiten.svg"); -webkit-mask-image: url("/zeichen/bearbeiten.svg"); }
[data-zeichen="beleg"] { mask-image: url("/zeichen/beleg.svg"); -webkit-mask-image: url("/zeichen/beleg.svg"); }
[data-zeichen="bewilligung"] { mask-image: url("/zeichen/bewilligung.svg"); -webkit-mask-image: url("/zeichen/bewilligung.svg"); }
[data-zeichen="bild"] { mask-image: url("/zeichen/bild.svg"); -webkit-mask-image: url("/zeichen/bild.svg"); }
[data-zeichen="bildAufnehmen"] { mask-image: url("/zeichen/bildAufnehmen.svg"); -webkit-mask-image: url("/zeichen/bildAufnehmen.svg"); }
[data-zeichen="budget"] { mask-image: url("/zeichen/budget.svg"); -webkit-mask-image: url("/zeichen/budget.svg"); }
[data-zeichen="chronik"] { mask-image: url("/zeichen/chronik.svg"); -webkit-mask-image: url("/zeichen/chronik.svg"); }
[data-zeichen="daten"] { mask-image: url("/zeichen/daten.svg"); -webkit-mask-image: url("/zeichen/daten.svg"); }
[data-zeichen="datenschutz"] { mask-image: url("/zeichen/datenschutz.svg"); -webkit-mask-image: url("/zeichen/datenschutz.svg"); }
[data-zeichen="drucken"] { mask-image: url("/zeichen/drucken.svg"); -webkit-mask-image: url("/zeichen/drucken.svg"); }
[data-zeichen="ehrung"] { mask-image: url("/zeichen/ehrung.svg"); -webkit-mask-image: url("/zeichen/ehrung.svg"); }
[data-zeichen="einladung"] { mask-image: url("/zeichen/einladung.svg"); -webkit-mask-image: url("/zeichen/einladung.svg"); }
[data-zeichen="einlesen"] { mask-image: url("/zeichen/einlesen.svg"); -webkit-mask-image: url("/zeichen/einlesen.svg"); }
[data-zeichen="einteilung"] { mask-image: url("/zeichen/einteilung.svg"); -webkit-mask-image: url("/zeichen/einteilung.svg"); }
[data-zeichen="erlassen"] { mask-image: url("/zeichen/erlassen.svg"); -webkit-mask-image: url("/zeichen/erlassen.svg"); }
[data-zeichen="etikett"] { mask-image: url("/zeichen/etikett.svg"); -webkit-mask-image: url("/zeichen/etikett.svg"); }
[data-zeichen="favorit"] { mask-image: url("/zeichen/favorit.svg"); -webkit-mask-image: url("/zeichen/favorit.svg"); }
[data-zeichen="fest"] { mask-image: url("/zeichen/fest.svg"); -webkit-mask-image: url("/zeichen/fest.svg"); }
[data-zeichen="feststellen"] { mask-image: url("/zeichen/feststellen.svg"); -webkit-mask-image: url("/zeichen/feststellen.svg"); }
[data-zeichen="gastkapelle"] { mask-image: url("/zeichen/gastkapelle.svg"); -webkit-mask-image: url("/zeichen/gastkapelle.svg"); }
[data-zeichen="gegenstand"] { mask-image: url("/zeichen/gegenstand.svg"); -webkit-mask-image: url("/zeichen/gegenstand.svg"); }
[data-zeichen="geldausgang"] { mask-image: url("/zeichen/geldausgang.svg"); -webkit-mask-image: url("/zeichen/geldausgang.svg"); }
[data-zeichen="geldeingang"] { mask-image: url("/zeichen/geldeingang.svg"); -webkit-mask-image: url("/zeichen/geldeingang.svg"); }
[data-zeichen="handkasse"] { mask-image: url("/zeichen/handkasse.svg"); -webkit-mask-image: url("/zeichen/handkasse.svg"); }
[data-zeichen="herunterladen"] { mask-image: url("/zeichen/herunterladen.svg"); -webkit-mask-image: url("/zeichen/herunterladen.svg"); }
[data-zeichen="hochladen"] { mask-image: url("/zeichen/hochladen.svg"); -webkit-mask-image: url("/zeichen/hochladen.svg"); }
[data-zeichen="interneVeranstaltung"] { mask-image: url("/zeichen/interneVeranstaltung.svg"); -webkit-mask-image: url("/zeichen/interneVeranstaltung.svg"); }
[data-zeichen="kaution"] { mask-image: url("/zeichen/kaution.svg"); -webkit-mask-image: url("/zeichen/kaution.svg"); }
[data-zeichen="konto"] { mask-image: url("/zeichen/konto.svg"); -webkit-mask-image: url("/zeichen/konto.svg"); }
[data-zeichen="konzertmeister"] { mask-image: url("/zeichen/konzertmeister.svg"); -webkit-mask-image: url("/zeichen/konzertmeister.svg"); }
[data-zeichen="kopieren"] { mask-image: url("/zeichen/kopieren.svg"); -webkit-mask-image: url("/zeichen/kopieren.svg"); }
[data-zeichen="loeschen"] { mask-image: url("/zeichen/loeschen.svg"); -webkit-mask-image: url("/zeichen/loeschen.svg"); }
[data-zeichen="mappe"] { mask-image: url("/zeichen/mappe.svg"); -webkit-mask-image: url("/zeichen/mappe.svg"); }
[data-zeichen="material"] { mask-image: url("/zeichen/material.svg"); -webkit-mask-image: url("/zeichen/material.svg"); }
[data-zeichen="mitnehmen"] { mask-image: url("/zeichen/mitnehmen.svg"); -webkit-mask-image: url("/zeichen/mitnehmen.svg"); }
[data-zeichen="nachzaehlen"] { mask-image: url("/zeichen/nachzaehlen.svg"); -webkit-mask-image: url("/zeichen/nachzaehlen.svg"); }
[data-zeichen="notenarchiv"] { mask-image: url("/zeichen/notenarchiv.svg"); -webkit-mask-image: url("/zeichen/notenarchiv.svg"); }
[data-zeichen="person"] { mask-image: url("/zeichen/person.svg"); -webkit-mask-image: url("/zeichen/person.svg"); }
[data-zeichen="plus"] { mask-image: url("/zeichen/plus.svg"); -webkit-mask-image: url("/zeichen/plus.svg"); }
[data-zeichen="preise"] { mask-image: url("/zeichen/preise.svg"); -webkit-mask-image: url("/zeichen/preise.svg"); }
[data-zeichen="programm"] { mask-image: url("/zeichen/programm.svg"); -webkit-mask-image: url("/zeichen/programm.svg"); }
[data-zeichen="rechnungAusgang"] { mask-image: url("/zeichen/rechnungAusgang.svg"); -webkit-mask-image: url("/zeichen/rechnungAusgang.svg"); }
[data-zeichen="rechnungEingang"] { mask-image: url("/zeichen/rechnungEingang.svg"); -webkit-mask-image: url("/zeichen/rechnungEingang.svg"); }
[data-zeichen="reise"] { mask-image: url("/zeichen/reise.svg"); -webkit-mask-image: url("/zeichen/reise.svg"); }
[data-zeichen="schichtplan"] { mask-image: url("/zeichen/schichtplan.svg"); -webkit-mask-image: url("/zeichen/schichtplan.svg"); }
[data-zeichen="schluessel"] { mask-image: url("/zeichen/schluessel.svg"); -webkit-mask-image: url("/zeichen/schluessel.svg"); }
[data-zeichen="sitzplaetze"] { mask-image: url("/zeichen/sitzplaetze.svg"); -webkit-mask-image: url("/zeichen/sitzplaetze.svg"); }
[data-zeichen="sitzungen"] { mask-image: url("/zeichen/sitzungen.svg"); -webkit-mask-image: url("/zeichen/sitzungen.svg"); }
[data-zeichen="spalten"] { mask-image: url("/zeichen/spalten.svg"); -webkit-mask-image: url("/zeichen/spalten.svg"); }
[data-zeichen="spiele"] { mask-image: url("/zeichen/spiele.svg"); -webkit-mask-image: url("/zeichen/spiele.svg"); }
[data-zeichen="startseite"] { mask-image: url("/zeichen/startseite.svg"); -webkit-mask-image: url("/zeichen/startseite.svg"); }
[data-zeichen="statutenparameter"] { mask-image: url("/zeichen/statutenparameter.svg"); -webkit-mask-image: url("/zeichen/statutenparameter.svg"); }
[data-zeichen="stornieren"] { mask-image: url("/zeichen/stornieren.svg"); -webkit-mask-image: url("/zeichen/stornieren.svg"); }
[data-zeichen="stueck"] { mask-image: url("/zeichen/stueck.svg"); -webkit-mask-image: url("/zeichen/stueck.svg"); }
[data-zeichen="suchen"] { mask-image: url("/zeichen/suchen.svg"); -webkit-mask-image: url("/zeichen/suchen.svg"); }
[data-zeichen="termin"] { mask-image: url("/zeichen/termin.svg"); -webkit-mask-image: url("/zeichen/termin.svg"); }
[data-zeichen="tracht"] { mask-image: url("/zeichen/tracht.svg"); -webkit-mask-image: url("/zeichen/tracht.svg"); }
[data-zeichen="veranstaltungen"] { mask-image: url("/zeichen/veranstaltungen.svg"); -webkit-mask-image: url("/zeichen/veranstaltungen.svg"); }
[data-zeichen="verbergen"] { mask-image: url("/zeichen/verbergen.svg"); -webkit-mask-image: url("/zeichen/verbergen.svg"); }
[data-zeichen="vereinsartBlaulicht"] { mask-image: url("/zeichen/vereinsartBlaulicht.svg"); -webkit-mask-image: url("/zeichen/vereinsartBlaulicht.svg"); }
[data-zeichen="vereinsartChor"] { mask-image: url("/zeichen/vereinsartChor.svg"); -webkit-mask-image: url("/zeichen/vereinsartChor.svg"); }
[data-zeichen="vereinsartKapelle"] { mask-image: url("/zeichen/vereinsartKapelle.svg"); -webkit-mask-image: url("/zeichen/vereinsartKapelle.svg"); }
[data-zeichen="vereinsartLandjugend"] { mask-image: url("/zeichen/vereinsartLandjugend.svg"); -webkit-mask-image: url("/zeichen/vereinsartLandjugend.svg"); }
[data-zeichen="vereinsartSchuetzengilde"] { mask-image: url("/zeichen/vereinsartSchuetzengilde.svg"); -webkit-mask-image: url("/zeichen/vereinsartSchuetzengilde.svg"); }
[data-zeichen="vereinsartSchuetzenkompanie"] { mask-image: url("/zeichen/vereinsartSchuetzenkompanie.svg"); -webkit-mask-image: url("/zeichen/vereinsartSchuetzenkompanie.svg"); }
[data-zeichen="vereinsbuch"] { mask-image: url("/zeichen/vereinsbuch.svg"); -webkit-mask-image: url("/zeichen/vereinsbuch.svg"); }
[data-zeichen="vereinskassa"] { mask-image: url("/zeichen/vereinskassa.svg"); -webkit-mask-image: url("/zeichen/vereinskassa.svg"); }
[data-zeichen="verlauf"] { mask-image: url("/zeichen/verlauf.svg"); -webkit-mask-image: url("/zeichen/verlauf.svg"); }
[data-zeichen="verweis"] { mask-image: url("/zeichen/verweis.svg"); -webkit-mask-image: url("/zeichen/verweis.svg"); }
[data-zeichen="wahlurne"] { mask-image: url("/zeichen/wahlurne.svg"); -webkit-mask-image: url("/zeichen/wahlurne.svg"); }
[data-zeichen="weiter"] { mask-image: url("/zeichen/weiter.svg"); -webkit-mask-image: url("/zeichen/weiter.svg"); }
[data-zeichen="zerlegen"] { mask-image: url("/zeichen/zerlegen.svg"); -webkit-mask-image: url("/zeichen/zerlegen.svg"); }
[data-zeichen="zeugwart"] { mask-image: url("/zeichen/zeugwart.svg"); -webkit-mask-image: url("/zeichen/zeugwart.svg"); }
[data-zeichen="zurueck"] { mask-image: url("/zeichen/zurueck.svg"); -webkit-mask-image: url("/zeichen/zurueck.svg"); }
[data-zeichen="zuruecknehmen"] { mask-image: url("/zeichen/zuruecknehmen.svg"); -webkit-mask-image: url("/zeichen/zuruecknehmen.svg"); }

.fenster-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fenster-titelzeile h2 { margin: 0; }
.protokolllauf { overflow-x: auto; }
.liste.protokoll {
    border-collapse: collapse;
    table-layout: fixed;
}
.liste.protokoll.vereinsbuch-export { width: 736px; }
.liste.protokoll.modul-export { width: 720px; }
.liste.protokoll th {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
}
.liste.protokoll td {
    height: 52px;
    padding: 4px 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--linie);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.liste.protokoll th[data-spalte="wann"] { width: 150px; }
.liste.protokoll th[data-spalte="wer"] { width: 180px; }
.liste.protokoll th[data-spalte="zeilen"] { width: 80px; }
.liste.protokoll th[data-spalte="spalten"] { width: 90px; }
.liste.protokoll th[data-spalte="liste"] { width: 220px; }
.liste.protokoll th[data-spalte="einschraenkung"] { width: 32%; }

/* Terminampel wie im Vorgänger: Fläche aus Zusagen, Offen, Entschuldigt, Absagen.
   Offen ist gelb, nur in der Ampel. Entschuldigt ist Messing. Stufe 3 ist Gelb. */
.balken-0 { width: 0%; }
.balken-5 { width: 5%; }
.balken-10 { width: 10%; }
.balken-15 { width: 15%; }
.balken-20 { width: 20%; }
.balken-25 { width: 25%; }
.balken-30 { width: 30%; }
.balken-35 { width: 35%; }
.balken-40 { width: 40%; }
.balken-45 { width: 45%; }
.balken-50 { width: 50%; }
.balken-55 { width: 55%; }
.balken-60 { width: 60%; }
.balken-65 { width: 65%; }
.balken-70 { width: 70%; }
.balken-75 { width: 75%; }
.balken-80 { width: 80%; }
.balken-85 { width: 85%; }
.balken-90 { width: 90%; }
.balken-95 { width: 95%; }
.balken-100 { width: 100%; }
.termin-ampel {
    display: flex;
    height: 36px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--grund-tief);
}
.termin-ampel span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.termin-ampel .zu { background: #4f9e59; }
.termin-ampel .zu-leise { background: #9ecfa6; }
.termin-ampel .auf { background: #e0a31a; color: var(--tinte); }
.termin-ampel .ent { background: var(--messing); color: #fff; }
.termin-ampel .ab { background: #c8433c; }
.termin-ampel .ab-leise { background: #e39a94; }
.termin-ampel .stufe-0 { background: #cfc8bd; color: var(--tinte); }
.termin-ampel .stufe-1 { background: #c8433c; }
.termin-ampel .stufe-2 { background: #dd8435; }
.termin-ampel .stufe-3 { background: #d9b13b; }
.termin-ampel .stufe-4 { background: #4f9e59; }
.dash-ampel { flex: 1 0 100%; min-width: 0; }
.befundliste .zeile:has(.dash-ampel) { flex-wrap: wrap; row-gap: 8px; }
.befundliste .zeile:has(.dash-ampel) > .zeile-text { flex: 1 1 0; }
.befundliste .zeile:has(.dash-ampel) > .handlung { flex: 0 0 auto; }
.dash-ampel .termin-ampel { height: 10px; margin: 0; border-radius: 5px; }
.dash-ampel .termin-ampel span { font-size: 0; }
.termin-ampel-leise { display: block; min-width: 0; }
.termin-ampel-leise .termin-ampel { height: 10px; margin: 0; border-radius: 5px; }
.termin-ampel-leise .termin-ampel span { font-size: 0; }
.termin-balken.stand-ton { display: inline-block; width: 36px; margin-right: 6px; vertical-align: middle; }
.termin-balken.stand-ton .termin-ampel { height: 10px; border-radius: 5px; }
.liste.termine .termin-ampel-leise { margin-top: 6px; }
.termin-register {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    background: var(--karte);
}
.termin-register h3 {
    margin: 0;
    padding: 12px 16px 0;
    font-family: var(--schrift-zier);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}
.termin-register .termin-balken { margin: 8px 16px 12px; }
.karte.naechster-termin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 12px;
    align-items: center;
    overflow: visible;
}
.karte.naechster-termin .karte-kopf { display: contents; }
.karte.naechster-termin .karte-kopf h2 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--schrift-zier);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinte);
}
.karte.naechster-termin .termin-kicker {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    color: var(--tinte-leise);
    font-size: 15px;
}
.karte.naechster-termin .karte-kopf > :last-child { grid-column: 3; grid-row: 1; margin: 0; }
.karte.naechster-termin .termin-meta,
.karte.naechster-termin .termin-balken,
.karte.naechster-termin .karte-stand,
.karte.naechster-termin .info-klapp,
.karte.naechster-termin > .befundliste { grid-column: 1 / -1; }
.karte.naechster-termin .termin-balken .termin-ampel { height: 32px; margin: 2px 0 0; }
.karte.naechster-termin .termin-ampel-leise .termin-ampel { height: 10px; margin: 0; }
.karte.naechster-termin .termin-meta { display: block; margin: 2px 0 6px; }
.karte.naechster-termin .termin-meta dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.karte.naechster-termin .termin-meta dd { margin: 0; font-weight: 400; color: var(--tinte-leise); }
.karte-stand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--linie);
}
.karte-stand .stand-wort { flex: 1 1 160px; font-weight: 600; }
.karte-stand .stand-wort .marke { font-weight: 400; }
.karte-stand form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.termin-folge { padding: 2px 0 4px; }
.termin-folge .zeile { flex-wrap: wrap; }
.termin-folge-form { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.liste tr.gruppe .termin-ampel { height: 8px; margin: 4px 0 0; border-radius: 4px; }
.liste tr.gruppe .termin-ampel span { font-size: 0; }
.klapp-kopf > .termin-balken { margin: 6px 0 8px; font-weight: 400; }
.info-klapp:has(> .klapp-kopf > .termin-balken) { border-bottom: 1px solid var(--linie); padding: 4px 0; }
.info-klapp:has(> .klapp-kopf > .termin-balken) > .klapp-kopf { font-weight: 600; }
table.liste.rueckzeilen { table-layout: fixed; width: 100%; }
table.liste.rueckzeilen th:nth-child(1) { width: 28px; }
table.liste.rueckzeilen th:nth-child(3) { width: 92px; }
table.liste.rueckzeilen th:nth-child(4) { width: 100px; }
.liste th.spalte-ton, .liste td.spalte-ton { width: 28px; min-width: 28px; text-align: center; }
.liste td.spalte-ton .termin-ampel { width: 8px; height: 14px; margin: 0 auto; border-radius: 2px; }
.liste td.spalte-ton .stufe-flaeche { margin: 0; height: 14px; }
.liste td.spalte-ton .termin-balken { width: 8px; }
.dash-karte > h2 {
    margin: 0 0 8px;
    font-family: var(--schrift-zier);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinte);
}
.karte-rueck { position: relative; }
.karte-rueck > .karte-stift { position: absolute; top: 12px; right: 12px; margin: 0; }
.termin-kurz { flex-wrap: wrap; gap: 8px; }
.zeile-winkel { color: var(--tinte-leise); }
.karte.naechster-termin .info-klapp { margin: 8px 0 0; border-top: 1px solid var(--linie); padding-top: 0; }
.karte.naechster-termin .klapp-kopf {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    font-family: var(--schrift-zier);
    font-weight: 600;
    font-size: 16px;
    list-style: none;
}
.karte.naechster-termin .klapp-kopf::-webkit-details-marker { display: none; }
.klapp-pfeil { display: inline-flex; width: 28px; justify-content: center; }
.karte.naechster-termin details[open] > .klapp-kopf .klapp-pfeil { transform: rotate(90deg); }
.befundliste { list-style: none; margin: 0; padding: 0; }
.befundliste .zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}
.befundliste .zeile-text { flex: 1 1 auto; min-width: 0; }
.befundliste .zeilentitel { font-weight: 600; }
.befundliste .nebensache { color: var(--tinte-leise); }

/* Baustein stufe — Fläche 8×36, am Mitglied 8×14. Kein Punkt. */
.stufe-flaeche { display: inline-block; width: 8px; height: 36px; margin-right: 8px; border-radius: 2px; vertical-align: middle; }
.zeile-text:has(> .stufe-flaeche) { display: flex; align-items: center; gap: 8px; }
.zeile-text:has(> .stufe-flaeche) > .stufe-flaeche { flex: 0 0 auto; margin-right: 0; }
.zeile-text:has(> .stufe-flaeche) > .zeilentitel,
.zeile-text:has(> .stufe-flaeche) > .nebensache { display: block; flex: 1 1 auto; min-width: 0; color: inherit; font-size: inherit; }
.stufe-klein { height: 14px; }
.stufe-0 { background: #cfc8bd; }
.stufe-1 { background: #c8433c; }
.stufe-2 { background: #dd8435; }
.stufe-3 { background: #d9b13b; }
.stufe-4 { background: #4f9e59; }
.stand-knopf { min-height: 44px; min-width: 44px; padding: 4px; }
.stand-knopf .stufe-flaeche { height: 36px; width: 10px; margin: 0; }
.mappe-zeile { display: flex; align-items: center; gap: 12px; }
.mappe-stand { display: flex; flex: 0 0 auto; gap: 4px; }
.mappe-stand form { margin: 0; }
.mappe-text { min-width: 0; }
.mappe-werkzeug { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mappe-eine { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--tinte-leise); font-size: 13px; }
.vorrat-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 0; }
.vorrat-leiste .nebensache { display: inline; margin: 0; }
.chipzeile {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.chipzeile::-webkit-scrollbar { display: none; }
.chipzeile a[data-b="leiste"],
.chipzeile [data-b="marke"] {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin: 0;
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: var(--tinte-leise);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.chipzeile [data-b="marke"] { background: var(--verein); color: #fff; }
.listenlauf:has(> .liste.liste-mappe) > .liste.liste-mappe {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}
.listenlauf:has(> .liste.liste-mappe-mehr) > .liste.liste-mappe-mehr {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
.liste-mappe th[data-spalte="noten"],
.liste-mappe td.spalte-aktionen { width: 4.5rem; text-align: right; }
.liste-mappe .mappe-text .zeilentitel,
.liste-mappe .mappe-text .nebensache {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Baustein zeile — Button trägt dieselbe Zeile wie der Verweis. */
button.zeile { width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 16px; }

/* Baustein feldpaar */
.feldpaar { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.feldpaar > * { flex: 1 1 140px; }

/* Baustein kopf — Produktmarke, wenn die Vereinsart kein Zeichen hat. */
.kopf-marke { width: 22px; height: 22px; object-fit: contain; }

/* Konzertmeister: die gezeichnete K, derselbe Knopf wie die anderen Zeichen. */
button.km-sprung { overflow: hidden; line-height: 0; }
.termin-kopfzeile {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}
.liste.termine .termin-kopfzeile > .zeilentitel {
    display: inline;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.termin-aktionen {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: none;
}
.termin-aktionen .handlung { margin: 0; }
.fenster-titelzeile { flex-wrap: nowrap; }
.fenster-titelzeile h2 { flex: 1 1 auto; min-width: 0; }
.fenster-titelzeile .km-sprung { margin-left: auto; }
.km-zeile {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.km-zeile > p,
.km-zeile > .feldhinweis {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
table.km-zuordnung,
table.km-zuordnung tbody { display: block; width: 100%; }
table.km-zuordnung thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
table.km-zuordnung tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "buch" "aktion";
    align-items: start;
    row-gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--linie);
}
table.km-zuordnung td { display: block; border: 0; padding: 0; min-width: 0; }
table.km-zuordnung td[data-titel="Aus Konzertmeister"] { grid-area: name; }
table.km-zuordnung td[data-titel="Im Vereinsbuch"] { grid-area: buch; }
table.km-zuordnung td.spalte-aktionen { grid-area: aktion; width: auto; text-align: left; margin-top: 8px; }
table.km-zuordnung .nebensache { display: block; white-space: normal; }
table.km-zuordnung .knopf-still,
table.km-zuordnung .knopf-haupt { width: auto; }
table.km-zuordnung form { display: block; min-width: 0; margin: 0; }
table.km-zuordnung .katalog { margin-top: 8px; }
table.km-zuordnung .katalog-suche { width: 100%; }
.km-vorschlaege { display: flex; flex-flow: column nowrap; gap: 6px; margin-top: 8px; padding: 8px; border: 1px dashed var(--linie-stark); border-radius: 8px; background: var(--grund-tief); }
.km-vorschlaege-kopf { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.km-vorschlaege .knopf-still { width: 100%; justify-content: space-between; text-align: left; white-space: normal; background: var(--karte); }
.km-vorschlaege .knopf-still::after { content: "Zuordnen ›"; margin-left: 12px; font-size: 0.85rem; white-space: nowrap; }
table.km-zuordnung details.info-klapp { margin-top: 8px; }

/* Zerlegen: antippen setzt den Schnitt, die Stimme steht auf der Seite. */
.zerlegen-seiten { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.zerlegen-blatt {
    position: relative;
    margin: 0;
    width: calc(50% - 6px);
    max-width: 220px;
    min-width: 0;
}
.zerlegen-seite {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px;
    border: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
.zerlegen-seite.ist-farbe-0 { border-color: var(--verein); }
.zerlegen-seite.ist-farbe-1 { border-color: var(--messing); }
.zerlegen-seite.ist-farbe-2 { border-color: #1d4e89; }
.zerlegen-seite.ist-farbe-3 { border-color: #1b7a4e; }
.zerlegen-seite.ist-farbe-4 { border-color: #6a3d9a; }
.zerlegen-seite.ist-farbe-5 { border-color: #0f766e; }
.zerlegen-seite.ist-farbe-0 .zerlegen-name { color: var(--verein); }
.zerlegen-seite.ist-farbe-1 .zerlegen-name { color: var(--messing); }
.zerlegen-seite.ist-farbe-2 .zerlegen-name { color: #1d4e89; }
.zerlegen-seite.ist-farbe-3 .zerlegen-name { color: #1b7a4e; }
.zerlegen-seite.ist-farbe-4 .zerlegen-name { color: #6a3d9a; }
.zerlegen-seite.ist-farbe-5 .zerlegen-name { color: #0f766e; }
.zerlegen-auge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    margin: 0;
    background: var(--karte);
}
[data-blick-bild] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 55vh;
    margin: 0 0 12px;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.zerlegen-seite canvas { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--linie); border-radius: 4px; pointer-events: none; }
.zerlegen-nr { display: block; margin-top: 4px; text-align: center; font-size: 13px; color: var(--tinte-leise); pointer-events: none; }
.zerlegen-name { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; line-height: 1.3; pointer-events: auto; }
.zerlegen-still { display: none; }
.zerlegen-still.ist-wahl { display: block; margin-top: 12px; }
.zerlegen-still .feldpaar,
.zerlegen-still .katalog > label,
.zerlegen-still .katalog-suche { display: none; }
.zerlegen-still.ist-wahl .katalog-liste { display: block; max-height: 240px; }
.zerlegen-blaettern { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; }
.zerlegen-gerda { margin: 8px 0 0; }
.zerlegen-gerda .knopf-still { width: 100%; }
[data-blick-stand] { margin: 8px 0 4px; }

@media (max-width: 390px) {
    .ausgabe-bemerkung { display: none; }
}
.liste-ausgaben tr.ist-kind td:first-child {
    position: relative;
    padding-left: 34px;
}
.ausgabe-pfeil {
    position: absolute;
    left: 8px;
    top: 4px;
    width: 14px;
    height: 18px;
    border-left: 2px solid var(--messing);
    border-bottom: 2px solid var(--messing);
    border-bottom-left-radius: 12px;
}
.ausgaben-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
}
.ausgaben-kopf h2 { margin: 0; }
.ausgaben-kopf .knopf-haupt { min-height: 36px; padding: 6px 14px; font-size: 15px; }
.folgeseiten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 16px;
}
.folgeseiten-seiten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.folgeseiten-seite, .folgeseiten-schritt {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--radius);
    border: 1px solid var(--linie-stark);
    padding: 6px 10px;
    color: var(--tinte);
    text-decoration: none;
    background: transparent;
}
.folgeseiten-seite.ist {
    background: var(--verein);
    border-color: var(--verein);
    color: #fff;
    font-weight: 650;
}
.folgeseiten-schritt { width: 40px; padding: 0; }
.folgeseiten-weiter {
    background: var(--verein);
    border-color: var(--verein);
    color: #fff;
}
.folgeseiten-ruhe { color: var(--tinte-leise); padding: 0 2px; }
.folgeseiten-anzahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.folgeseiten-anzahl select[data-b="auswahl"] { width: auto; min-height: 40px; }
.handel-stueck { margin: 0 0 8px; font-size: 20px; font-weight: 650; }
.handel-stueck span { display: block; margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--tinte-leise); }
.handel-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.handel-karte {
    position: relative;
    border: 1px solid var(--linie);
    border-radius: 12px;
    padding: 14px 14px 12px;
    background: var(--papier, var(--karte));
}
.handel-karte.passt { box-shadow: inset 3px 0 0 var(--messing); }
.handel-grad {
    float: right;
    margin: 0 0 8px 8px;
    padding: 2px 8px;
    border: 1px solid var(--messing);
    border-radius: 999px;
    color: var(--messing);
    font-size: 12px;
    letter-spacing: 0.04em;
}
.handel-passt { margin: 0 0 4px; color: var(--messing); font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.handel-titel { margin: 0; font-size: 18px; }
.handel-satz { margin: 4px 0 0; }
.handel-meta { margin: 4px 0 0; color: var(--tinte-leise); font-size: 14px; }
.handel-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.handel-fuss .knopf-haupt, .handel-fuss .knopf-still { width: auto; }
.handel-mehr { margin: 14px 0 0; }
body:has(.pult:not([hidden])) { overflow: hidden; }
.pult[hidden] { display: none; }
.pult {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: #1a1410;
    color: #f7f3ed;
    overscroll-behavior: none;
}
.pult-blatt {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    inset: auto;
    overflow: auto;
    display: flex;
    width: auto;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}
.pult-blatt { --pult-hell: .8; }
.pult-hell canvas { filter: brightness(var(--pult-hell)); }
.pult-dunkel canvas { filter: invert(1) hue-rotate(180deg) brightness(var(--pult-hell)); box-shadow: none; }
.pult-sepia canvas { filter: sepia(.45) brightness(var(--pult-hell)); }
.pult-gastzeichen {
    position: absolute;
    left: 0;
    right: 0;
    top: 42%;
    z-index: 4;
    margin: 0;
    transform: rotate(-24deg);
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: .04em;
    color: #1c1915;
    opacity: .22;
    pointer-events: none;
    user-select: none;
}
.pult-blatt canvas {
    display: block;
    height: auto;
    margin: auto;
    background: #fff;
    box-shadow: 0 0 24px rgba(0, 0, 0, .6);
}
.pult-dock {
    position: relative;
    flex: 0 0 auto;
    z-index: 2;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .3rem;
    max-width: none;
    margin: 0;
    padding: .4rem .5rem;
    padding-top: calc(.4rem + env(safe-area-inset-top));
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: rgba(26, 20, 16, .88);
}
.pult-zeile { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: nowrap; gap: .3rem; min-width: 0; }
.pult-stufenform { margin: 0; flex: 0 0 auto; }
.pult[data-leiste="aus"] .pult-dock { display: none; }
.pult-name {
    flex: 1 1 auto;
    min-width: 2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    opacity: .85;
}
.pult-stand {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: .85rem;
    line-height: 1;
    text-align: center;
    opacity: .85;
}
.pult-nr { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pult-nummerfeld {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: 0;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    background: rgba(26, 20, 16, .96);
    color: #f7f3ed;
}
.pult-nummernzahl {
    margin: 0;
    min-height: 3.6rem;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
}
.pult-nummerntreffer {
    margin: 0;
    min-height: 2.6rem;
    max-width: min(92vw, 26rem);
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    opacity: .9;
}
.pult-nummerntasten {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 96px));
    gap: .55rem;
}
.pult-nummerntasten button {
    width: auto;
    min-height: 64px;
    padding: .9rem 0;
    border: 1px solid rgba(247, 243, 237, .45);
    border-radius: 12px;
    background: transparent;
    color: #f7f3ed;
    font: 600 1.7rem/1 var(--schrift-text);
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
}
.pult-nummerntasten button:active { background: rgba(247, 243, 237, .18); }
.pult-nummerntasten [data-pult-nummern="los"] {
    background: #e4b6ba;
    border-color: #e4b6ba;
    color: #1a1410;
    font-size: 1.2rem;
}
.pult-nummerntasten [data-pult-nummern="los"]:disabled { opacity: .35; cursor: default; }
.pult-nummernzu {
    width: auto;
    padding: .6rem 1.2rem;
    border: 1px solid rgba(247, 243, 237, .45);
    border-radius: 999px;
    background: transparent;
    color: #f7f3ed;
    font: 1rem/1 var(--schrift-text);
    text-align: center;
    cursor: pointer;
}
.pult-nummerfeld[hidden] { display: none; }
.pult-dock .pult-stufe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: .4rem .5rem;
    border: 1px solid rgba(247, 243, 237, .45);
    border-radius: 8px;
    background: transparent;
    color: #f7f3ed;
    cursor: pointer;
}
.pult-dock .pult-stufe .stufe-flaeche {
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(26, 20, 16, .28);
}
.pult-heim,
.pult-dock .zellenknopf.pult-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: .4rem .5rem;
    overflow: visible;
    border: 1px solid rgba(247, 243, 237, .45);
    border-radius: 8px;
    background: transparent;
    color: #f7f3ed;
    font: .9rem/1 var(--schrift-text);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}
.pult-heim.pult-bild,
.pult-dock .zellenknopf.pult-bild {
    width: auto;
    min-width: 0;
    padding: .4rem .5rem;
}
.pult-heim:active,
.pult-dock .zellenknopf.pult-zeichen:active,
.pult-dock .pult-stufe:active { background: rgba(247, 243, 237, .18); }
.pult-heim:focus-visible,
.pult-dock .zellenknopf:focus-visible,
.pult-nummerfeld:focus-visible {
    outline: 2px solid #f7f3ed;
    outline-offset: 2px;
}
.pult-flaeche { position: relative; margin: auto; line-height: 0; }
.pult-blatt canvas.pult-mal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    touch-action: none;
}
.pult[data-stift="an"] .pult-blatt { touch-action: none; }
.pult[data-stift="an"] canvas.pult-mal { pointer-events: auto; cursor: crosshair; }
.pult-stift {
    position: fixed;
    left: 50%;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
    max-width: calc(100% - 1rem);
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    padding: .4rem .55rem;
    border-radius: 999px;
    background: rgba(26, 20, 16, .92);
}
.pult-stift::-webkit-scrollbar { display: none; }
.pult-stift[hidden] { display: none; }
.pult[data-stift="an"] [data-pult="stift"] { background: #e4b6ba; border-color: #e4b6ba; color: #1a1410; }
.pult-stift [aria-pressed="true"] { background: #e4b6ba; border-color: #e4b6ba; color: #1a1410; }
.pult-strichstand { flex: 0 0 auto; font-size: .75rem; opacity: .85; white-space: nowrap; }
.pult-kette, .pult [data-vorrat] { display: none; }
.pult-stueck {
    position: absolute;
    left: 50%;
    top: .75rem;
    z-index: 5;
    margin: 0;
    padding: .35rem .8rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #1c1915;
    color: #f7f3ed;
    font: .85rem/1.2 var(--schrift-text);
    pointer-events: none;
}
.pult-anzeige {
    display: flex;
    gap: .5rem;
    margin: .25rem 0 .75rem;
}
.pult-anzeige .zellenknopf {
    width: auto;
    flex: 1 1 0;
    min-height: 44px;
    text-align: center;
    border: 1px solid var(--linie);
    border-radius: 8px;
}
.pult-anzeige .zellenknopf[aria-pressed="true"] {
    background: var(--messing);
    color: #fff;
    border-color: var(--messing);
}
@media (max-width: 540px) {
    .pult-mass, .pult-heim-text { display: none; }
}

.befundliste .zeile-zahl {
    flex: 0 0 auto;
    min-width: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.dash-gruppenwort { margin: 1.25rem 0 0.35rem; font-weight: 600; }
.karte-zahl { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 600; }

.dash-raster {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}
@media (min-width: 960px) {
    .dash-raster { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
    .dash-raster > .naechster-termin,
    .dash-raster > .leerzustand,
    .dash-raster > .zentrale,
    .dash-raster > .dash-bereich { grid-column: 1 / -1; }
}
.dash-gruppe { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.dash-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.dash-raster .dash-gruppenwort { margin: 0; font-family: var(--schrift-zier); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--tinte); }
.dash-raster .karte { margin: 0; border-radius: 8px; background: var(--karte); }
.dash-raster > .naechster-termin {
    background: color-mix(in srgb, var(--messing) 10%, var(--karte));
}
.zentrale {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.zentrale .lesart-stand { margin: 0; }
.zentrale-brett {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.zentrale-fach,
.zentrale-auftritt,
.zentrale-ueben,
.zentrale-stueck {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.zentrale-fach {
    min-height: 7.5rem;
    padding: 12px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--karte);
}
.zentrale-fach.ist-ton-verein,
.zentrale-fach.ist-ton-rot,
.zentrale-fach.ist-ton-gruen,
.zentrale-fach.ist-ton-blau,
.zentrale-fach.ist-ton-schwarz {
    border-color: transparent;
    color: #fff;
}
.zentrale-fach.ist-ton-verein { background: var(--verein); }
.zentrale-fach.ist-ton-rot { background: var(--gefahr); }
.zentrale-fach.ist-ton-gruen { background: #1f7a4d; }
.zentrale-fach.ist-ton-blau { background: #1d4e89; }
.zentrale-fach.ist-ton-schwarz { background: var(--tinte); }
.zentrale-fach.ist-ton-verein .lesart-wort,
.zentrale-fach.ist-ton-rot .lesart-wort,
.zentrale-fach.ist-ton-gruen .lesart-wort,
.zentrale-fach.ist-ton-blau .lesart-wort,
.zentrale-fach.ist-ton-schwarz .lesart-wort,
.zentrale-fach.ist-ton-verein .zentrale-satz,
.zentrale-fach.ist-ton-rot .zentrale-satz,
.zentrale-fach.ist-ton-gruen .zentrale-satz,
.zentrale-fach.ist-ton-blau .zentrale-satz,
.zentrale-fach.ist-ton-schwarz .zentrale-satz { color: inherit; }
.zentrale-fach:hover,
.zentrale-auftritt:hover,
.zentrale-ueben:hover,
.zentrale-stueck:hover,
.zentrale-befund:hover,
.zentrale-neu:hover { border-color: var(--linie-stark); }
.zentrale-fach.ist-ton-verein:hover,
.zentrale-fach.ist-ton-rot:hover,
.zentrale-fach.ist-ton-gruen:hover,
.zentrale-fach.ist-ton-blau:hover,
.zentrale-fach.ist-ton-schwarz:hover { border-color: transparent; }
.zentrale-name,
.zentrale .lesart-name {
    font-family: var(--schrift-zier);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.zentrale-auftritt,
.zentrale-ueben {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--karte);
}
.zentrale-auftritt {
    background: color-mix(in srgb, var(--messing) 10%, var(--karte));
}
.zentrale-satz { color: var(--tinte-leise); font-size: 14px; line-height: 1.45; }
.zentrale-stueck {
    min-height: 7.5rem;
    padding: 12px;
    border: 0;
    border-radius: 8px;
}
.zentrale-stueck.ist-stufe-1 { background: #c8433c; color: #fff; }
.zentrale-stueck.ist-stufe-2 { background: #dd8435; color: #fff; }
.zentrale-stueck.ist-stufe-3 { background: #d9b13b; color: var(--tinte); }
.zentrale-stueck .lesart-wort,
.zentrale-stueck .zentrale-satz { color: inherit; }
.dash-bereich {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 0;
    padding: 16px 0 0;
    border-top: 2px solid var(--linie-stark);
}
.dash-bereich .dash-gruppenwort { margin: 0; }
.zentrale-befund,
.zentrale-neu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--linie);
    border-radius: 12px;
    background: var(--karte);
    color: inherit;
    text-decoration: none;
}
.zentrale-befund {
    color: var(--tinte);
    font-weight: 600;
}
.dash-raster .karte > h2 { margin: 0 0 8px; font-family: var(--schrift-zier); font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinte); }
.dash-raster .befundliste { margin: 4px 0 0; }
.dash-raster .zeile { gap: 8px; padding: 4px 0; min-height: 44px; }
.dash-raster .zeile-zahl { min-width: 2.6ch; width: 2.6ch; text-align: right; font-family: var(--schrift-zier); font-weight: 700; font-size: 28px; line-height: 1; color: var(--tinte); }
.dash-raster .zeile-zahl-null { font-weight: 600; color: var(--tinte-leise); }
.dash-raster .zeile:has(.zeile-zahl-null) .zeilentitel { font-weight: 400; color: var(--tinte-leise); }
.dash-raster .zeile .zeilentitel { font-size: 16px; }
@media (max-width: 699px) {
    .dash-raster .zeile-zahl { font-size: 24px; }
}

.vom-balken { height: 8px; margin: 8px 0 4px; background: var(--grund-tief); overflow: hidden; }
.vom-balken[hidden] { display: none; }
.vom-balken-fuellung { display: block; height: 100%; background: var(--linie-stark); }
.vom-balken.unbekannt .vom-balken-fuellung { width: 30%; animation: vom-balken-lauf 1.6s ease-in-out infinite; }
@keyframes vom-balken-lauf {
    0% { transform: translateX(0); }
    100% { transform: translateX(233%); }
}
@media (prefers-reduced-motion: reduce) {
    .vom-balken.unbekannt .vom-balken-fuellung { animation: none; width: 100%; opacity: 0.45; }
}

.lesart-stand {
    margin: 0 0 14px;
    font-family: var(--schrift-zier);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
}
.lesart-skala {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.lesart-stufe {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px;
    min-width: 0;
}
.lesart-spur {
    position: relative;
    display: flex;
    justify-content: center;
}
.lesart-spur::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--linie);
}
.lesart-stufe:first-child .lesart-spur::before { top: 18px; }
.lesart-stufe:last-child .lesart-spur::before { height: 18px; bottom: auto; }
.lesart-punkt {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin-top: 16px;
    border: 2px solid var(--linie-stark);
    border-radius: 50%;
    background: var(--karte);
    flex: none;
}
.lesart-stufe.ist-gilt .lesart-punkt {
    border-color: var(--messing);
    background: var(--messing);
}
.lesart-karte {
    min-width: 0;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    background: var(--karte);
}
.lesart-stufe.ist-gilt .lesart-karte {
    border-color: var(--messing);
    background: color-mix(in srgb, var(--messing) 10%, var(--karte));
    box-shadow: inset 3px 0 0 var(--messing);
}
.lesart-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    font-family: var(--schrift-zier);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}
.lesart-wort {
    font-family: var(--schrift-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--messing);
}
.lesart-satz,
.lesart-bestaetigung {
    margin: 6px 0 0;
    color: var(--tinte-leise);
    font-size: var(--grad-klein);
    line-height: 1.45;
}
.lesart-stufe.ist-gilt .lesart-satz { color: var(--tinte); }
.lesart-bestaetigung {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--linie);
}
.lesart-karte form { margin: 0; min-width: 0; }
.lesart-karte .knopf-still { width: 100%; margin-top: 10px; }

.ea-satz {
    margin: 0 0 8px;
    color: var(--tinte-leise);
    font-size: var(--grad-klein);
    line-height: 1.45;
}
.ea-satz:has(> .knopf-still),
.fenster p:has(> .knopf-still) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
@media (max-width: 699px) {
    .ea-satz:has(> .knopf-still) > .knopf-still,
    .fenster p:has(> .knopf-still) > .knopf-still {
        flex: 1 1 100%;
        justify-content: flex-start;
        white-space: normal;
    }
}
.ea-lauf {
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
    overflow-x: auto;
}
.ea-t {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    margin: 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 10px;
    overflow: hidden;
}
.ea-spalte {
    display: flex;
    flex-direction: column;
    flex: 1 0 26rem;
    width: 26rem;
    min-width: 26rem;
    min-height: 100%;
    padding: 12px 10px 0;
    box-sizing: border-box;
}
.ea-t > .ea-spalte + .ea-spalte { border-left: 2px solid var(--tinte); }
.ea-kopf {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 40px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tinte);
    font-size: 18px;
}
.ea-blatt { flex: 1 1 auto; min-width: 0; }
.ea-spalte .liste { table-layout: fixed; width: 100%; min-width: 24rem; }
.ea-spalte .liste th,
.ea-spalte .liste td { padding: 6px 8px; }
.ea-spalte .liste th:first-child,
.ea-spalte .liste td:first-child { text-align: left; width: auto; }
.ea-spalte .liste th:nth-child(2),
.ea-spalte .liste td:nth-child(2) { width: 8.5rem; white-space: nowrap; text-align: right; }
.ea-spalte .liste th.spalte-aktionen,
.ea-spalte .liste td.spalte-aktionen { width: 52px; text-align: right; padding-left: 4px; padding-right: 4px; }
.ea-spalte .handlung { margin-left: 0; }
.ea-spalte .listenlauf { overflow: visible; }
.ea-fuss { margin-top: auto; }
.ea-summe {
    margin: 10px 0 0;
    font-family: var(--schrift-zier);
    font-weight: 600;
}
.ea-summenzeile td { font-weight: 600; border-top: 3px double var(--tinte); border-bottom: 0; }
.ea-ton-zu { color: #4f9e59; font-weight: 600; }
.ea-ton-ab { color: #c8433c; font-weight: 600; }
.ea-ton-soll { color: var(--messing); font-weight: 600; }
.ea-ton-ein { color: #4f9e59; font-weight: 600; }
.ea-ton-aus { color: #c8433c; font-weight: 600; }
.ea-ton-vor-ein { color: #5f9a68; font-weight: 600; }
.ea-ton-vor-aus { color: #c56b64; font-weight: 600; }
.budget-ampel .termin-ampel .ent { order: 1; }
.budget-ampel .termin-ampel .zu { order: 2; }
.budget-ampel .termin-ampel .zu-leise { order: 3; }
.budget-ampel .termin-ampel .ab { order: 4; }
.budget-ampel .termin-ampel .ab-leise { order: 5; }





/* Spielkarten (Modul Spiele). Kartenformat 62,9 x 99,88 mm, das Verhältnis kommt aus dem Deck-Manifest. */
.spielkarte {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--karte-verhaeltnis, 62.9 / 99.88);
    border-radius: 4.8% / 3%;
    box-shadow: 0 1px 3px rgba(27, 33, 30, 0.35);
    background: #fffdf6;
}
/* Rückseite: nur Vereinsfarben, kein Bild. Grund = --rueck-grund (sonst --verein), Rand und Karo = dieselbe Farbe mit Weiß gemischt. */
.spielkarte-rueck {
    --rueck-gr: var(--rueck-grund, var(--verein, #343e39));
    --rueck-hell: color-mix(in srgb, var(--rueck-gr) 55%, #fff);
    --rueck-zart: color-mix(in srgb, var(--rueck-gr) 82%, #fff);
    position: relative;
    overflow: hidden;
    background-color: var(--rueck-gr);
    background-image:
        repeating-linear-gradient(45deg, transparent 0 5px, var(--rueck-zart) 5px 6px),
        repeating-linear-gradient(-45deg, transparent 0 5px, var(--rueck-zart) 5px 6px);
}
.spielkarte-rueck::after {
    content: "";
    position: absolute;
    inset: 7% 10%;
    border: 1px solid var(--rueck-hell);
    border-radius: 4% / 2.5%;
    background: var(--rueck-gr);
}
.spielhand {
    display: flex;
    width: 100%;
    max-width: 30rem;
    margin: 16px 0 4px;
}
.spielhand > .spielkarte {
    flex: 0 0 26.3%;
    width: 26.3%;
}
.spielhand > .spielkarte + .spielkarte {
    margin-left: -7.9%;
}
.spielkarten-muster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 9rem));
    gap: 12px;
}
@media (min-width: 640px) {
    .spielkarten-muster {
        grid-template-columns: repeat(4, minmax(0, 9rem));
    }
}

/* Spieltisch (Modul Spiele, Stufe 2a). Hand in zwei Reihen am Handy, einreihig am PC. Tippziele mindestens 44 px. */
.spieltisch { --team-wir: #1d7a3a; --team-sie: #1f4f9e; min-width: 0; max-width: 52rem; margin: 0 auto var(--abstand); }
/* Wer zusammengehört, trägt dieselbe Farbe (Laubgrün und Blau); die Meldung steht in einem Streifen über dem Tisch und deckt keinen Namen. */
.team-wir { color: var(--team-wir); }
.team-sie { color: var(--team-sie); }
.spieltisch-brett {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr);
    grid-template-areas: ". oben ." "links mitte rechts";
    align-items: center;
    gap: 4px 6px;
    padding: 10px 8px 26px; /* unten bleibt ein freier Streifen für „Du bist Geber“, damit es nicht auf dem „am Zug“ der Seitensitze liegt */
    /* Der leichte Messing-Ton der Dashboard-Karte (.naechster-termin), nur als Grund, ohne Kante (ADR-0030). */
    background: color-mix(in srgb, var(--messing) 10%, var(--karte));
    border: 1px solid var(--linie);
    border-bottom: 0;
    border-radius: var(--radius-gross) var(--radius-gross) 0 0;
    /* Das Spielfeld rastet unter der Kopfzeile ein (spiele.js, solange der Nutzer nicht selbst scrollt). */
    scroll-margin-top: 128px;
}
.sitz { min-width: 0; text-align: center; }
.sitz-oben { grid-area: oben; justify-self: center; width: 100%; display: flex; flex-direction: column; }
.sitz-oben .sitz-name { margin-bottom: -2px; } /* der Name des Partners steht dicht über dem Fächer wie bei den Seitensitzen; Partner und Geber stehen in seiner Zeile */
.sitz-oben .sitz-faecher { margin-top: 2px; }
.sitz-links { grid-area: links; }
.sitz-rechts { grid-area: rechts; }
.sitz p { margin: 0; }
.sitz-name { font-weight: 600; overflow-wrap: anywhere; }
.sitz-zahl { font-size: var(--grad-klein); }
.sitz-zug { font-weight: 700; color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
.spieltisch .sitz-zug[hidden] { display: block; visibility: hidden; } /* „am Zug“ behält seine Zeile: das Spielfeld wechselt seine Höhe nicht mit jedem Zug */
.sitz-am-zug .sitz-name { text-decoration: underline; text-underline-offset: 3px; }
/* Die verdeckte Hand eines Mitspielers: ein zusammengeschobener Fächer. Breite und Schritt je Sitz, die Neigung folgt der Stelle der Karte
   (--i) und der Zahl der Karten, die noch da sind (--n: setzt der Server, spiele.js führt es nach). Die Drehung um einen Punkt unter der Karte
   schiebt die Nachbarn zusätzlich auseinander (Radius mal Winkel); der Schritt ist deshalb klein. */
.sitz-faecher { --f-breite: 50px; --f-schritt: 5px; --f-winkel: 3.5deg; --n: 9; min-height: calc(var(--f-breite) * 1.88 + 4px); display: flex; justify-content: center; margin: 8px 0 6px; padding-top: 4px; }
/* Die Fächer der Seiten liegen um 90° gedreht, wie die Spieler dort sitzen: der Bogen zeigt zur Tischmitte. */
.sitz-links .sitz-faecher, .sitz-rechts .sitz-faecher { --f-lang: 155px; --f-hoch: 90px; position: relative; left: 50%; width: var(--f-lang); height: var(--f-hoch); margin: calc((var(--f-lang) - var(--f-hoch)) / 2) 0 calc((var(--f-lang) - var(--f-hoch)) / 2) calc(var(--f-lang) / -2); }
.sitz-links .sitz-faecher { transform: translateX(14px) rotate(90deg); }
.sitz-rechts .sitz-faecher { transform: translateX(-14px) rotate(-90deg); }
.sitz-faecher .spielkarte {
    flex: 0 0 var(--f-breite);
    width: var(--f-breite);
    margin-left: calc(var(--f-schritt) - var(--f-breite));
    transform-origin: 50% 170%;
    transform: rotate(calc((var(--i, 0) - (var(--n) - 1) / 2) * var(--f-winkel)));
    transition: transform 120ms ease-out;
    box-shadow: 0 0 0 1px rgba(27, 33, 30, 0.4), 0 2px 4px rgba(27, 33, 30, 0.3);
}
.sitz-faecher .spielkarte:first-child { margin-left: 0; }
.sitz-faecher .spielkarte:nth-child(2) { --i: 1; }
.sitz-faecher .spielkarte:nth-child(3) { --i: 2; }
.sitz-faecher .spielkarte:nth-child(4) { --i: 3; }
.sitz-faecher .spielkarte:nth-child(5) { --i: 4; }
.sitz-faecher .spielkarte:nth-child(6) { --i: 5; }
.sitz-faecher .spielkarte:nth-child(7) { --i: 6; }
.sitz-faecher .spielkarte:nth-child(8) { --i: 7; }
.sitz-faecher .spielkarte:nth-child(9) { --i: 8; }
.sitz-faecher .spielkarte[hidden], .spieltisch [hidden] { display: none; }
.stich {
    grid-area: mitte;
    position: relative;
    width: 11rem;
    height: 12rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.stich:focus-visible { outline: 2px solid var(--verein); outline-offset: 2px; }
.stich-platz { position: absolute; width: 30%; display: block; }
.stich-platz .spielkarte { width: 100%; }
/* Vier Karten in Kreuzlage: nebeneinander nichts verdeckt, oben und unten berühren sich fast nur, damit jede Karte erkennbar bleibt (Herbert, 28.10.2026). */
.stich-oben { left: 35%; top: 0; }
.stich-unten { left: 35%; top: 49%; }
.stich-links { left: 0; top: 25%; }
.stich-rechts { left: 70%; top: 25%; }
.stich-platz .ist-neu { animation: spielkarte-ein 120ms ease-out; }
/* Der eben abgeschlossene Stich liegt kurz vollständig da: die Karte des Siegers trägt einen Ring in der Vereinsfarbe, die übrigen treten zurück. */
/* Eine neu gelegte Karte gleitet vom Platz ihres Spielers in die Mitte (Start und Maß setzt spiele.js als --von-x, --von-y, --von-s); die der Mitspieler dreht dabei von der Rückseite um. */
.stich-platz .spielkarte-fliegt { animation: karte-fliegt 450ms ease-out backwards; }
.stich-platz .spielkarte-gleitet { animation: karte-gleitet 450ms ease-out backwards; }
.stich-platz .spielkarte-flug-rueck { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; animation: karte-dreht 450ms ease-out forwards; }
@keyframes karte-fliegt {
    0% { opacity: 0; transform: translate(var(--von-x), var(--von-y)) rotate(var(--von-r, 0deg)) scale(var(--von-s)) perspective(600px) rotateY(-90deg); }
    49% { opacity: 0; }
    50% { opacity: 1; transform: translate(calc(var(--von-x) / 2), calc(var(--von-y) / 2)) rotate(calc(var(--von-r, 0deg) / 2)) scale(calc((var(--von-s) + 1) / 2)) perspective(600px) rotateY(-90deg); }
    100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(var(--ende-s, 1)) perspective(600px) rotateY(0deg); }
}
@keyframes karte-dreht {
    0% { opacity: 1; transform: translate(var(--von-x), var(--von-y)) rotate(var(--von-r, 0deg)) scale(var(--von-s)) perspective(600px) rotateY(0deg); }
    49% { opacity: 1; }
    50% { opacity: 0; transform: translate(calc(var(--von-x) / 2), calc(var(--von-y) / 2)) rotate(calc(var(--von-r, 0deg) / 2)) scale(calc((var(--von-s) + 1) / 2)) perspective(600px) rotateY(90deg); }
    100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(1) perspective(600px) rotateY(90deg); }
}
@keyframes karte-gleitet {
    from { transform: translate(var(--von-x), var(--von-y)) scale(var(--von-s)); }
    to { transform: translate(0px, 0px) scale(var(--ende-s, 1)); }
}
}
/* Die Karte des Siegers endet größer (1,06) und bekommt den Ring erst, wenn sie liegt: sonst sprang sie am Ende der Bahn und trug den Ring schon im Flug (Herbert, 28.10.2026). */
.stich-platz .spielkarte-sticht.spielkarte-fliegt { animation: karte-fliegt 450ms ease-out backwards, ring-ein 250ms ease-out 450ms backwards; }
.stich-platz .spielkarte-sticht.spielkarte-gleitet { animation: karte-gleitet 450ms ease-out backwards, ring-ein 250ms ease-out 450ms backwards; }
@keyframes ring-ein {
    from { box-shadow: 0 1px 3px rgba(27, 33, 30, 0.35); }
}
/* Eine Siegerkarte, die schon lag, wächst und bekommt den Ring in 250 ms, statt beim vierten Stein zu springen (Herbert, 29.10.2026). */
.stich-platz .spielkarte-sticht:not(.spielkarte-fliegt):not(.spielkarte-gleitet) { animation: sieger-ein 250ms ease-out backwards; }
@keyframes sieger-ein {
    from { transform: scale(1); box-shadow: 0 1px 3px rgba(27, 33, 30, 0.35); }
}
/* Nach dem Stich laufen alle Karten des Stichs den Weg rückwärts: zum Sitz des Stechers und über den Bildschirmrand hinaus. spiele.js legt sie als
   Kopien in eine Schicht über dem Bild (damit die Seite nicht breiter wird) und misst nur Ziel (--weg-x, --weg-y) und Neigung (--weg-r). */
.stich-weg { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.stich-weg .spielkarte, .stich-weg .spielkarte-sticht { position: absolute; margin: 0; max-width: none; animation: karte-weg 450ms ease-in forwards; }
@keyframes karte-weg {
    from { transform: translate(0, 0) scale(var(--weg-s0, 1)) rotate(0deg); }
    to { transform: translate(var(--weg-x), var(--weg-y)) scale(0.7) rotate(var(--weg-r, 0deg)); }
}
/* Die Kopie der Siegerkarte bleibt absolut, auch wenn .stich-ausgang ihr position: relative gibt (sonst sprang sie beim Loslaufen). */
.stich-weg .spielkarte-sticht.spielkarte { position: absolute; }
.stich-ausgang .spielkarte { opacity: 1; } /* Karten sind voll deckend (Herbert, 28.10.2026); der Sieger trägt den Ring */
.stich-ausgang .spielkarte-sticht { --ende-s: 1.06; position: relative; z-index: 2; opacity: 1; transform: scale(1.06); box-shadow: 0 0 0 2px var(--karte), 0 0 0 5px var(--verein), 0 4px 10px rgba(27, 33, 30, 0.45); }
@keyframes spielkarte-ein {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.spieltisch-meldung {
    /* Eine Meldung ist ein Einblendfenster, kein Absatz im Fluss: sie überlagert, die Seite wechselt ihre Höhe nie. Immer oben, unter der Kopfzeile. */
    position: fixed;
    left: 50%;
    top: 88px;
    z-index: 35;
    box-sizing: border-box;
    width: max-content;
    max-width: min(30rem, calc(100% - 2 * var(--abstand)));
    margin: 0;
    padding: 6px calc(var(--abstand) + 2px);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-gross);
    background: var(--karte);
    box-shadow: 0 2px 10px rgba(27, 33, 30, 0.3);
    line-height: 1.25;
    font-size: var(--grad-klein);
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 2000ms ease-in-out; /* langsam verblassen */
    pointer-events: none;
}
.spieltisch-meldung.ist-sichtbar { opacity: 1; transition: opacity 250ms ease-out; }
.spieltisch-meldung:empty { display: none; }
/* Zeichen der anderen („Paul klopft“): kurzes Aufleuchten unten, mittig am unteren Rand des Tisches, zwischen den gelegten Karten und der eigenen Hand, in der Farbe der Mannschaft (Herbert, 30.10.2026). */
.spieltisch-markieren { position: absolute; top: 6px; right: 8px; z-index: 6; margin: 0; }
/* Schlechter Zug (nur Vereinsadmin): kleiner runder roter Knopf oben rechts am Tisch (Herbert, 30.10.2026); die Tippfläche bleibt 44 px. */
.spieltisch-markieren-knopf { position: relative; display: block; width: 18px; height: 18px; padding: 0; border: 2px solid var(--karte); border-radius: 50%; background: var(--gefahr); box-shadow: 0 0 0 1px var(--gefahr); cursor: pointer; }
.spieltisch-markieren-knopf::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.spieltisch-zeichen {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 6;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 2 * var(--abstand));
    margin: 0;
    padding: 6px calc(var(--abstand) + 2px);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-gross);
    background: var(--karte);
    line-height: 1.25;
    font-size: var(--grad-klein);
    text-align: center;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 450ms ease-in-out;
    pointer-events: none;
}
.spieltisch-zeichen.ist-sichtbar { opacity: 1; transition: opacity 120ms ease-out; }
.spieltisch-zeichen:empty { display: none; }
.zeichen-wort { font-weight: 700; }
.spieltisch-zeichen.team-wir { background: color-mix(in srgb, var(--team-wir) 12%, var(--karte)); border-color: var(--team-wir); }
.spieltisch-zeichen.team-sie { background: color-mix(in srgb, var(--team-sie) 12%, var(--karte)); border-color: var(--team-sie); }
@media (min-width: 700px) {
    .spieltisch-meldung { top: 136px; }
}
.weis-zeigen {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(calc(100% - 16px), 22rem);
    padding: 6px 8px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-gross);
    background: var(--karte);
    box-shadow: 0 2px 8px rgba(27, 33, 30, 0.25);
    pointer-events: none;
    animation: weis-aus 450ms ease-in 5000ms forwards;
}
.weis-name { margin: 0 0 2px; font-size: var(--grad-klein); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.weis-reihe { display: flex; justify-content: center; }
.weis-reihe .spielkarte { flex: 0 1 3.4rem; min-width: 0; width: 3.4rem; }
.weis-reihe .spielkarte + .spielkarte { margin-left: -1.3rem; }
.weis-reihe .spielkarte-fliegt { animation: karte-fliegt 450ms ease-out backwards; }
@keyframes weis-aus { to { opacity: 0; } }
.spieltisch-brett { position: relative; }
.spieltisch-trumpf { position: absolute; top: 4px; left: 10px; margin: 0; z-index: 1; } /* die Trumpfzeile liegt im Tisch, oben links, und nimmt keine Zeile unter dem Tisch; unten links stehen „Geber“ und „am Zug“ */
.spieltisch-trumpf[hidden] { display: none; }
.sitz-rolle { font-size: var(--grad-klein); font-weight: 700; color: var(--tinte); }
.sitz-rolle:empty { display: none; }
.sitz-rolle span { display: block; }
.sitz-links, .sitz-rechts, .sitz-oben { position: relative; }
.sitz-links .sitz-rolle, .sitz-rechts .sitz-rolle { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; } /* „Geber“ und „hebt ab“ liegen über dem freien Rand des Fächers und schieben nichts */
.sitz-name .nebensache { display: inline; margin: 0; font-weight: 400; } /* Partner und Geber stehen klein in der Zeile des Namens */
.sitz-name .nebensache[hidden] { display: none; }
.sitz-name [data-geberwort]:not([hidden])::before, .sitz-name [data-abhebwort]:not([hidden])::before { content: "· "; } /* trennt Geber und „hebt ab“ vom Namen, ohne den Text zu ändern */
.sitz-links .sitz-rolle span:not([hidden]), .sitz-rechts .sitz-rolle span:not([hidden]) { width: fit-content; margin: 0 auto; padding: 0 6px; border-radius: 4px; background: var(--karte); } /* „Geber“ bleibt auf dem Kartenrücken lesbar */
.sitz-offene { display: block; margin: 4px 0; }
.sitz-oben .sitz-offene, .sitz-links .sitz-offene, .sitz-rechts .sitz-offene { position: absolute; margin: 0; top: 24px; } /* die offene Karte liegt am Sitz und schiebt den Tisch nicht auseinander (beim Abheben) */
.sitz-oben .sitz-offene { right: -50px; }
.sitz-links .sitz-offene { left: 2px; }
.sitz-rechts .sitz-offene { right: 2px; }
.sitz-offene .spielkarte { width: 44px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(27, 33, 30, 0.35); }
.sitz-unten { position: absolute; inset: 0; margin: 0; pointer-events: none; } /* „Du bist Geber“, „Du hebst ab“ und die offene Karte liegen am Spielfeld und nehmen im Fluss keinen Platz: die Hand rückt dicht unter den Tisch */
.sitz-unten .sitz-rolle { position: absolute; left: 10px; right: auto; bottom: 5px; margin: 0; text-align: left; } /* unten links, wie die Trumpfzeile oben links: unter dem Stich hing „Geber“ hinter der untersten Karte */
.sitz-unten .sitz-offene { position: absolute; right: 14px; top: calc(100% - 26px); margin: 0; } /* die Karte ragt in die freie Zeile unter dem Spielfeld, nicht in den Fächer */
.spieltisch-weiter { margin: 8px 0; }
.spieltisch-mitschrift { margin: 8px 0 0; }
.spieltisch-mitschrift p { margin: 0 0 4px; }
.mitschrift-x, .mitschrift-s, .mitschrift-b { max-width: 36rem; padding: 8px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.mitschrift-x-bild { display: block; width: 100%; height: auto; }
.mitschrift-x-bild line, .mitschrift-x-bild circle { fill: none; stroke: var(--tinte); stroke-linecap: round; }
.mitschrift-x-bild .mitschrift-kreuz { stroke-width: 4; }
.mitschrift-x-bild .mitschrift-strich { stroke-width: 6; }
.mitschrift-x-bild .mitschrift-teiler { stroke-width: 1; stroke: var(--linie-stark); }
.mitschrift-x-bild .mitschrift-noggel, .mitschrift-x-bild .mitschrift-erledigt { stroke-width: 2; }
.mitschrift-wort { font-size: 13px; font-weight: 600; fill: var(--tinte); }
.mitschrift-s-bild { display: block; width: 100%; height: auto; }
.mitschrift-s-bild line, .mitschrift-s-bild path { fill: none; stroke: var(--tinte); stroke-linecap: round; stroke-linejoin: round; }
.mitschrift-s-bild .mitschrift-strich { stroke-width: 5; }
.mitschrift-s-bild .mitschrift-teiler, .mitschrift-s-bild .mitschrift-fuehrung { stroke-width: 2; }
.mitschrift-b-bild { display: block; width: 100%; height: auto; }
.mitschrift-b-bild line { fill: none; stroke: var(--linie-stark); stroke-width: 1; }
.mitschrift-b-bild .mitschrift-punkt { fill: var(--tinte); stroke: none; }
.mitschrift-b-bild .mitschrift-spur-punkt { fill: none; stroke: var(--tinte); stroke-width: 1.5; opacity: 0.25; }
.mitschrift-summe { font-size: 20px; font-weight: 700; fill: var(--tinte); }
.mitschrift-rest { font-size: 26px; font-weight: 700; fill: var(--tinte); }
.mitschrift-zahl { font-size: 28px; font-weight: 700; fill: var(--tinte); }
.mitschrift-reste { font-size: 13px; font-weight: 700; fill: var(--tinte); }
.mitschrift-etikett { font-size: 11px; fill: var(--tinte-leise, var(--tinte)); opacity: 0.75; }
.spieltisch-weise { margin: 4px 0; }
/* Punktestand am Ende eines Spiels (Fenster): je Partei die Zahlen dieses Spiels und der Stand der Partie. */
.spielende-titel { margin: 0 0 8px; font-size: var(--grad-gross); font-weight: 700; }
/* Gewonnen in Messing, verloren in Rot (Herbert, 30.10.2026): ein getönter Streifen mit farbiger Kante, die Schrift bleibt dunkel und lesbar. Das Rot ist das feste --gefahr, nicht die Vereinsfarbe. */
.spielende-titel[data-ton] { padding: 10px 12px; border-left: 6px solid var(--linie-stark); border-radius: 4px; background: color-mix(in srgb, var(--linie-stark) 12%, var(--karte)); }
.spielende-titel[data-ton="gewonnen"] { border-left-color: var(--messing); background: color-mix(in srgb, var(--messing) 18%, var(--karte)); }
.spielende-titel[data-ton="verloren"] { border-left-color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 12%, var(--karte)); }
/* Partie gewonnen oder verloren (Herbert, 31.10.2026): das Ganze bis zum Ziel ist der größte Erfolg, deutlich über dem Stempel für ein Match. Gewonnen: Pokalfeld in Messing mit Sternen, verloren: ruhiges Rot ohne Schmuck. */
.spielende-titel[data-partie="gewonnen"], .spielende-titel[data-partie="verloren"] { margin: 0 0 12px; padding: 14px 12px 16px; border: 4px double var(--messing); border-radius: 10px; text-align: center; font-size: 2rem; line-height: 1.15; }
.spielende-titel[data-partie="gewonnen"] { background: linear-gradient(180deg, color-mix(in srgb, var(--messing) 38%, var(--karte)), color-mix(in srgb, var(--messing) 14%, var(--karte))); animation: spielende-partie-ein 450ms ease-out; }
.spielende-titel[data-partie="gewonnen"]::before { content: "\2605  \2605  \2605"; display: block; margin-bottom: 4px; font-size: 1.5rem; letter-spacing: .3em; color: var(--messing); text-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 35%, transparent); }
.spielende-titel[data-partie="verloren"] { border-color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 10%, var(--karte)); }
@keyframes spielende-partie-ein { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spielende-titel[data-partie="gewonnen"] { animation: none; } }
/* Goldregen: kleine Messingplättchen fallen einmal durch das Fenster und verschwinden; kein Dauerlauf, bei reduzierter Bewegung gar nicht. */
[data-spielende-formular] { position: relative; }
.spielende-regen { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.spielende-regen span { position: absolute; top: -14px; left: var(--x); width: var(--g); height: calc(var(--g) * 1.6); border-radius: 1px; background: var(--messing); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinte) 25%, transparent); opacity: 0; animation: goldregen var(--d) ease-in var(--w) 1 both; }
.spielende-regen span:nth-child(3n) { background: color-mix(in srgb, var(--messing) 55%, #fff); }
.spielende-regen span:nth-child(5n) { background: color-mix(in srgb, var(--messing) 75%, #000); }
@keyframes goldregen { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(520px) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spielende-regen { display: none; } }
[data-spielende-frage]:empty { display: none; }
/* Match im Punktestand (Herbert, 31.10.2026): ein schräg aufgesetzter Stempel mit doppeltem Rand, in Messing für den Gewinner, in Rot für den Verlierer. */
.spielende-match { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 12px 12px; padding: 8px 12px; text-align: center; transform: rotate(-2deg); border: 4px double var(--messing); border-radius: 8px; color: var(--tinte); background: color-mix(in srgb, var(--messing) 14%, var(--karte)); }
.spielende-match[hidden] { display: none; }
.spielende-match[data-ton="verloren"] { border-color: var(--gefahr); background: color-mix(in srgb, var(--gefahr) 10%, var(--karte)); }
.spielende-match-wort { font-size: 1.75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; }
.spielende-match-text { font-size: var(--grad-klein); font-weight: 600; }
.spielende-match-neu { animation: spielende-match-ein 450ms ease-out; }
@keyframes spielende-match-ein { from { transform: rotate(-2deg) scale(1.6); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spielende-match-neu { animation: none; } }
.spielende-tafel { margin: 0 0 8px; }
.spielende-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 5rem; gap: 8px; align-items: baseline; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.spielende-zahl { text-align: right; font-size: var(--grad-gross); font-weight: 700; font-variant-numeric: tabular-nums; }
.spielende-kopf .spielende-zahl { font-size: var(--grad-klein); font-weight: 600; }
[data-stoeck][aria-pressed="true"], [data-melden][aria-pressed="true"] { border-color: var(--verein); box-shadow: inset 0 0 0 2px var(--verein); }
.spieltisch-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 8px 0 0; }
.spieltisch-chips[hidden], .spieltisch-chips .chip[hidden] { display: none; }
.knopf-still.chip { position: relative; flex: none; width: auto; min-width: 0; height: auto; min-height: 0; padding: 3px 11px; border-radius: 999px; background: var(--karte); font-size: 0.8125rem; font-weight: 400; line-height: 1.25; display: inline-flex; align-items: center; } /* schmale Pille (Herbert, 30.10.2026); die Tippfläche bleibt 44 px hoch, unsichtbar, im ::before */
.knopf-still.chip::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.chip[aria-pressed="true"] { border-color: var(--verein); box-shadow: inset 0 0 0 2px var(--verein); }
.chip[aria-disabled="true"], .chip:disabled { opacity: 0.55; }
.weis-liste { display: grid; gap: 4px; margin: 0 0 8px; }
.neu-tisch:has(option[value="schallner"]:checked) .nur-kreuzjass, .neu-tisch:has(option[value="schnapsen"]:checked) .nur-kreuzjass, .neu-tisch:has(option[value="watten"]:checked) .nur-kreuzjass { display: none; }
.neu-tisch:has(option[value="kreuzjass"]:checked) .nur-schallner, .neu-tisch:has(option[value="schnapsen"]:checked) .nur-schallner, .neu-tisch:has(option[value="watten"]:checked) .nur-schallner { display: none; }
.neu-tisch:has(option[value="kreuzjass"]:checked) .nur-schnapsen, .neu-tisch:has(option[value="schallner"]:checked) .nur-schnapsen, .neu-tisch:has(option[value="watten"]:checked) .nur-schnapsen { display: none; }
.neu-tisch:has(option[value="kreuzjass"]:checked) .nur-watten, .neu-tisch:has(option[value="schallner"]:checked) .nur-watten, .neu-tisch:has(option[value="schnapsen"]:checked) .nur-watten { display: none; }
.neu-tisch:has(option[value="schnapsen"]:checked) .nur-jass, .neu-tisch:has(option[value="watten"]:checked) .nur-jass { display: none; }
/* Schnapsen am Tisch (Stufe 6b): zwei Plätze, der Talon links neben dem Stich, die Trumpfkarte quer unter dem Stapel. */
.spieltisch-brett-zwei { grid-template-areas: ". oben ." "talon mitte ."; }
.talon { grid-area: talon; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding-bottom: 2px; }
.talon-stapel { position: relative; z-index: 1; display: block; }
.talon-stapel .spielkarte { width: 42px; box-shadow: 0 0 0 1px rgba(27, 33, 30, 0.35), 2px 2px 0 rgba(27, 33, 30, 0.2); }
.talon-trumpf { position: absolute; z-index: 0; top: 14px; left: calc(50% + 4px); display: block; width: 63px; height: 42px; }
.talon-trumpf[hidden] { display: none; }
.talon-trumpf .spielkarte { position: absolute; left: 10.5px; top: -10.5px; width: 42px; transform: rotate(90deg); box-shadow: 0 0 0 1px rgba(27, 33, 30, 0.35); }
.talon-text { margin: 6px 0 0; text-align: center; font-size: var(--grad-klein); }
.spieltisch-steuerung { display: flow-root; min-height: 56px; padding: 0 8px 8px; background: color-mix(in srgb, var(--messing) 10%, var(--karte)); border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius-gross) var(--radius-gross); } /* untere Leiste des Tisches: Knöpfe und Weis-Satz kommen und gehen, die Hand darunter bleibt stehen und liegt dicht am Tisch */
.spieltisch-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.spieltisch-stand { margin: 4px 0; }
.spieltisch-stand p { margin: 0; }
.handkarte-melde { position: relative; }
.handkarte-melde::after {
    content: attr(data-melde);
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 22px;
    padding: 1px 5px;
    border-radius: 11px;
    background: var(--tinte);
    color: var(--karte);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.handreihe {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
}
.handkarte {
    flex: 0 0 calc(20% - 5px);
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4.8% / 3%;
    background: transparent;
    cursor: pointer;
    transition: transform 120ms ease-out;
}
.handkarte:hover:not([aria-disabled="true"]) { transform: translateY(-4px); }
.handkarte:focus-visible { outline: 3px solid var(--verein); outline-offset: 2px; }
.handkarte[aria-disabled="true"] { filter: grayscale(0.7) brightness(0.8); cursor: not-allowed; }
.handkarte-tipp { outline: 3px solid var(--verein); outline-offset: 2px; transform: translateY(-6px); }
.lernhilfe { display: grid; gap: 8px; margin: 8px 0; }
.lernhilfe p { margin: 0; }
.lernhilfe-satz { padding: 10px 12px; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 8px; }
.lernhilfe-tipp { padding: 10px 12px; border-left: 3px solid var(--verein); background: var(--grund-tief); }
.handkarte[data-sendet] { filter: brightness(0.9); }
/* Ansagen als Leiste über der Hand (Trumpf, Schlag, Weisen, Aus): kein Fenster, das die eigenen Karten verdeckt. */
.spieltisch-handzone { position: relative; }
.spielleiste { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 6; } /* Die Leiste liegt über dem Tisch, direkt über der Hand: nichts rückt, wenn sie kommt oder geht */
.spielleiste-teil { scroll-margin-top: 84px; margin: 8px 0 0; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); } /* rund wie der Tisch (Herbert, 31.10.2026) */
.spielleiste-teil .wahlfeld { margin: 0 0 8px; }
.spielleiste-teil label.wahlfeld-punkt:has(input[type="radio"]) { min-height: 44px; font-size: 16px; }
/* Trumpf ansagen: vier Bilder der Farben statt Textknöpfen, in der Mitte (Herbert, 31.10.2026). Das Wort bleibt für Vorleser und für den Ansagen-Knopf im Dokument. */
[data-leiste="ansage"] .wahlfeld-reihe { display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; }
/* Trumpf ansagen: rotes Kopfband in der Vereinsfarbe, Texte linksbündig, Knöpfe teilen sich die Breite (Herbert, 31.10.2026, „das mit dem roten Kopf“). */
.spielleiste-teil[data-leiste="ansage"] { padding: 0 0 16px; overflow: hidden; }
.spielleiste-teil[data-leiste="ansage"] .wahlfeld { margin: 0; }
.spielleiste-teil[data-leiste="ansage"] .wahlfeld-titel { display: block; margin: 0 0 14px; padding: 12px 16px; background: var(--verein); color: #fff; font-size: 18px; font-weight: 700; text-align: left; }
.spielleiste-teil[data-leiste="ansage"] .wahlfeld-reihe { margin: 0 16px 12px; }
.spielleiste-teil[data-leiste="ansage"] [data-b="hinweis"] { margin: 0 16px 8px; font-size: 16px; line-height: 1.45; color: var(--tinte); text-align: left; }
.spielleiste-teil[data-leiste="ansage"] .nebensache { color: var(--tinte-leise); }
.spielleiste-teil[data-leiste="ansage"] .formular-fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px 0; }
.spielleiste-teil[data-leiste="ansage"] .formular-fuss > * { width: 100%; justify-content: center; }
[data-leiste="ansage"] label.wahlfeld-punkt:has(input[type="radio"]) { flex: 0 0 auto; width: 66px; min-height: 60px; padding: 4px; border-radius: 12px; border-width: 2px; }
[data-leiste="ansage"] label.wahlfeld-punkt:has(input[type="radio"]) .farbzeichen { display: block; width: 44px; height: 44px; object-fit: contain; }
.farbzeichen-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Die gewählte Farbe: dicker Rand und getönter Grund in der Vereinsfarbe, das Bild bleibt in seinen Farben. */
[data-leiste="ansage"] label.wahlfeld-punkt:has(input:checked) { background: color-mix(in srgb, var(--verein) 16%, var(--karte)); border-color: var(--verein); box-shadow: 0 0 0 2px var(--verein); }
[data-leiste="schlag"] .wahlfeld-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.spielleiste-teil .nebensache { margin: 0 0 4px; }
.spielleiste-teil [role="status"]:empty { display: none; }
.spielleiste-teil .formular-fuss { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.spielleiste-teil .haken { min-height: 44px; font-size: 16px; }
/* Handy im Hochformat: Tisch und alle neun Karten stehen im Bild, wenn das Spielfeld unter der Kopfzeile einrastet (spiele.js). Alles am Tisch (Fächer, Stich, Hand)
   skaliert mit --s; je niedriger der Bildschirm, desto kleiner. Schmaler als 44 px wird keine Karte der Hand (Tippfläche). */
@media (max-width: 699px) {
    .spieltisch { --s: 0.86; }
    .spieltisch-brett { scroll-margin-top: 118px; }
    .sitz-faecher { --f-breite: calc(50px * var(--s)); --f-schritt: calc(5px * var(--s)); }
    .sitz-links .sitz-faecher, .sitz-rechts .sitz-faecher { --f-lang: calc(155px * var(--s)); --f-hoch: calc(90px * var(--s)); }
    .sitz-links .sitz-faecher { transform: translateX(calc(14px * var(--s))) rotate(90deg); }
    .sitz-rechts .sitz-faecher { transform: translateX(calc(-14px * var(--s))) rotate(-90deg); }
    .stich { width: calc(11rem * var(--s)); height: calc(12rem * var(--s)); }
    .handkarte { flex: 0 0 calc((20% - 5px) * var(--s)); }
}
@media (max-width: 699px) and (max-height: 819px) { .spieltisch { --s: 0.72; } }
@media (max-width: 699px) and (max-height: 759px) { .spieltisch { --s: 0.64; } }
@media (max-width: 699px) and (max-height: 699px) { .spieltisch { --s: 0.58; } }
@media (min-width: 900px) {
    .spieltisch-brett { grid-template-columns: minmax(0, 1fr) 14rem minmax(0, 1fr); padding: 16px 16px 30px; }
    .spieltisch-steuerung { padding: 0 16px 12px; }
    .stich { width: 14rem; height: 14rem; }
    .sitz-faecher { --f-breite: 64px; --f-schritt: 9px; --f-winkel: 3deg; }
    .sitz-links .sitz-faecher, .sitz-rechts .sitz-faecher { --f-lang: 200px; --f-hoch: 115px; }
}
/* Ab Tablet liegt die Hand in einer Reihe: zwei Reihen mit Karten von einem Fünftel der Breite füllten ein Tablet im Hochformat fast ganz. */
@media (min-width: 700px) {
    .handreihe { flex-wrap: nowrap; gap: 0; justify-content: center; }
    .handkarte { flex: 0 0 min(10.5%, 96px); }
    .handkarte + .handkarte { margin-left: -1.2%; }
}
/* Ein breiter, aber niedriger Bildschirm (Laptop, 1280 x 800): der Tisch nimmt das Mass des schmalen Bildschirms, damit die Hand unter ihm noch ganz im Bild steht. */
@media (min-width: 900px) and (max-height: 919px) {
    .spieltisch-brett { grid-template-columns: minmax(0, 1fr) 11rem minmax(0, 1fr); padding: 10px 8px 26px; scroll-margin-top: 96px; }
    .stich { width: 11rem; height: 11rem; }
    .sitz-faecher { --f-breite: 50px; --f-schritt: 5px; --f-winkel: 3.5deg; }
    .sitz-links .sitz-faecher, .sitz-rechts .sitz-faecher { --f-lang: 155px; --f-hoch: 90px; }
    .handkarte { flex: 0 0 min(10.5%, 80px); }
}
@media (min-width: 700px) and (max-width: 1119px) {
    .spieltisch-brett { scroll-margin-top: 176px; }
}
@media (prefers-reduced-motion: reduce) {
    .spieltisch-meldung, .spieltisch-meldung.ist-sichtbar, .spieltisch-zeichen, .spieltisch-zeichen.ist-sichtbar { transition: none; }
    .weis-reihe .spielkarte-fliegt { animation: none; }
    .weis-zeigen { animation: none; }
    .handkarte { transition: none; }
    .handkarte:hover:not([aria-disabled="true"]) { transform: none; }
    .stich-platz .ist-neu, .stich-platz .spielkarte-fliegt, .stich-platz .spielkarte-gleitet, .stich-platz .spielkarte-flug-rueck, .stich-platz .spielkarte-sticht.spielkarte-fliegt, .stich-platz .spielkarte-sticht.spielkarte-gleitet, .stich-platz .spielkarte-sticht:not(.spielkarte-fliegt):not(.spielkarte-gleitet) { animation: none; }
    .stich-weg { display: none; }
    .stich-weg .spielkarte, .stich-weg .spielkarte-sticht { animation: none; }
    .sitz-faecher .spielkarte { transition: none; }
}

/* Spiele, Stufe 3: Der Einladungslink hat keine Trennstelle und darf die Karte nicht sprengen (390 px). */
.karte p strong { overflow-wrap: anywhere; }

/* Spiele-Startseite: die Spiele als Kacheln mit Kartenfächer. Der Grund ist ein Hauch Messing, keine Kante (ADR-0030). */
.seitenkopf-rechts .knopf-plus { margin-left: auto; }
.karte.spiele-karte { border: 0; padding: 0; background: none; }
.spielkachel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "text faecher" "knoepfe knoepfe";
    gap: 8px 12px;
    align-items: start;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: color-mix(in srgb, var(--messing) 10%, #fff);
}
.spielkachel-text { grid-area: text; min-width: 0; }
.spielkachel-name { margin: 0 0 4px; font-family: var(--schrift-zier); font-size: 20px; font-weight: 600; }
.spielkachel-text p { margin: 0; }
.spielkachel-knoepfe { grid-area: knoepfe; display: flex; flex-wrap: wrap; gap: 8px; }
.spielkachel-knoepfe .knopf-still { flex: 1 1 0; padding: 10px 8px; font-size: 16px; }
.spielfaecher { grid-area: faecher; position: relative; width: 104px; height: 100px; margin-top: 4px; }
.spielfaecher .spielkarte { position: absolute; top: 0; width: 54px; transform-origin: 50% 100%; }
.spielfaecher .spielkarte:nth-child(1) { left: 0; transform: rotate(-12deg); }
.spielfaecher .spielkarte:nth-child(2) { left: 24px; transform: rotate(0deg); z-index: 1; }
.spielfaecher .spielkarte:nth-child(3) { left: 48px; transform: rotate(12deg); z-index: 2; }
@media (max-width: 449px) {
    .seitenkopf.seitenkopf-rechts h1 { flex: 1 1 0; }
    .seitenkopf-rechts .seitenkopf-aktionen { flex: none; justify-content: flex-end; }
}
/* Der Rückweg („Zurück zu …“) steht auf jeder Seite oben: Tippfläche 44 px, nicht die Zeilenhöhe eines Wortes (Herbert, 30.10.2026). */
.rueckweg { margin: 0 0 4px; }
.rueckweg a { display: inline-flex; align-items: center; min-height: 44px; }