/*
 * Eigenes Design über UIkit. Farben, Schrift und Radien stehen einmal oben als Variablen.
 * Farben: Vereinsrot aus dem Logo als einzige Akzentfarbe, sonst neutrale Grautöne.
 * Schrift: Barlow, selbst gehostet (keine Anfragen an Google), Lizenz: fonts/OFL.txt
 */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }

:root {
    --rot: #c32a20;         /* Vereinsrot (Logo): Knöpfe, Auswahl, aktive Navigation */
    --rot-dunkel: #9e2119;  /* Hover, Links */
    --rot-hell: #fbeeec;    /* Hintergrund gewählter Kacheln */
    --text: #1f2328;
    --grau: #5f6670;        /* Nebentext */
    --linie: #dde1e6;       /* Rahmen */
    --hg: #f4f5f7;          /* Seitenhintergrund */
    --weiss: #ffffff;
    --fehler: #b42318;
    --ampel-gruen: #2e7d32; /* nur für die Bus-Ampel */
    --ampel-gelb: #d39200;

    --schrift: 'Barlow', system-ui, sans-serif;
    --radius: 4px;          /* Flächen */
    --radius-klein: 3px;    /* Felder, Auswahlfelder, Knöpfe */
    --schatten: 0 1px 2px rgba(16, 24, 40, .05);
}

/* --- Grundlagen (überschreibt UIkit) --------------------------------------------------------- */
html { font-family: var(--schrift); font-size: 16px; color: var(--text); background: var(--hg); line-height: 1.5; }
body { background: var(--hg); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-card-title, .uk-modal-title, .uk-legend { font-family: var(--schrift); font-weight: 600; color: var(--text); }
.uk-h2, h1.uk-h2 { font-size: 1.75rem; }
.uk-card-title { font-size: 1.25rem; }
.uk-light:is(h1, h2, h3, .uk-h1, .uk-h2, .uk-h3), .uk-light :is(h1, h2, h3, .uk-h1, .uk-h2, .uk-h3) { color: #fff; }
.uk-table th, .uk-description-list > dt { text-transform: none; font-size: .88rem; font-weight: 600; color: var(--grau); }
a, .uk-link { color: var(--rot-dunkel); }
a:hover, .uk-link:hover { color: var(--rot); }
.uk-text-meta { color: var(--grau); }
.uk-list-primary > ::before { color: var(--rot) !important; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Knöpfe: keine Großbuchstaben */
.uk-button { font-family: var(--schrift); text-transform: none; font-weight: 600; font-size: .95rem; border-radius: var(--radius-klein); line-height: 40px; padding: 0 18px; }
.uk-button-large { line-height: 46px; font-size: 1rem; padding: 0 24px; }
.uk-button-primary { background: var(--rot); }
.uk-button-primary:hover, .uk-button-primary:focus { background: var(--rot-dunkel); }
.uk-button-default { border-color: var(--linie); color: var(--text); background: var(--weiss); }
.uk-button-default:hover { border-color: var(--text); color: var(--text); background: var(--weiss); }

/* Formularfelder */
.uk-input, .uk-select, .uk-textarea { border-radius: var(--radius-klein); border-color: var(--linie); background: var(--weiss); color: var(--text); font-size: .95rem; }
.uk-input, .uk-select:not([multiple]):not([size]) { height: 40px; }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(31, 35, 40, .08); color: var(--text); }
.uk-form-danger, .uk-form-danger:focus { border-color: var(--fehler) !important; color: var(--text) !important; }
.uk-form-label { color: var(--text); font-size: .85rem; font-weight: 500; margin-bottom: 3px; display: inline-block; }
.uk-radio, .uk-checkbox { width: 16px; height: 16px; margin-top: 0; border-color: #98a0aa; flex-shrink: 0; }
.uk-radio:checked, .uk-checkbox:checked, .uk-radio:checked:focus, .uk-checkbox:checked:focus { background-color: var(--rot); border-color: var(--rot); }
.feld-fehler { color: var(--fehler); font-size: .85rem; margin-top: 3px; font-weight: 500; }
.feld-fehler::before { content: "! "; font-weight: 600; }

/* Karten, Hinweise, Fenster */
.uk-card-default { border-radius: var(--radius); box-shadow: var(--schatten); border: 1px solid var(--linie); color: var(--text); }
.uk-card-body { padding: 28px 32px; }
.uk-alert { border-radius: var(--radius-klein); border-left: 3px solid currentColor; font-size: .92rem; }
.uk-alert-success { background: #eef6f0; color: #1e5a32; }
.uk-alert-warning { background: #fdf5e7; color: #7a4a06; }
.uk-alert-danger { background: var(--rot-hell); color: var(--fehler); }
.uk-modal-dialog { border-radius: var(--radius); }

/* --- Rahmen: Navigation, Fotoband, Fußzeile ---------------------------------------------------- */
.uk-navbar-container:not(.uk-navbar-transparent) { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.uk-navbar-nav > li > a { text-transform: none; font-family: var(--schrift); font-size: .95rem; font-weight: 500; color: var(--text); min-height: 64px; }
.uk-navbar-nav > li > a:hover { color: var(--rot); }
.uk-navbar-nav > li.uk-active > a { color: var(--rot); box-shadow: inset 0 -2px 0 var(--rot); }
.uk-navbar-toggle { min-height: 64px; color: var(--text); }
.uk-navbar-container .uk-container { max-width: 1200px; }
.logo-desktop { height: 42px; width: auto; }
.logo-mobil { height: 36px; width: auto; }

/* Das Foto liegt nur oben als Band und läuft in den hellen Hintergrund aus. */
.buehne { position: relative; isolation: isolate; flex: 1 0 auto; }
.buehne::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 340px; z-index: -1;
    background:
        linear-gradient(180deg, rgba(16, 20, 28, .55) 0%, rgba(16, 20, 28, .3) 60%, rgba(244, 245, 247, 0) 80%, var(--hg) 100%),
        var(--buehne-bild) center 35% / cover no-repeat;
}
.buehne-inhalt { max-width: 1200px; padding-top: 28px; padding-bottom: 48px; }
.titel-schatten { text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }

.fusszeile { background: var(--weiss); border-top: 1px solid var(--linie); padding: 16px 0; font-size: .85rem; color: var(--grau); }
.fusszeile .uk-container { max-width: 1200px; }
.fusszeile a { color: var(--grau); }
.fusszeile a:hover { color: var(--rot); }

/* --- Startseite: Kopf und "Das Wichtigste in Kürze" --------------------------------------------- */
.kopfbereich { color: #fff; margin-bottom: 18px; }
.kopf-titel { color: #fff; font-size: 2rem; line-height: 1.2; margin: 0 0 6px; }
.kopf-text { max-width: 58em; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.kopf-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Fortschritt 1. Angaben › 2. Prüfen › 3. Fertig */
.ablauf { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; padding: 0; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.ablauf li + li::before { content: "›"; margin-right: 10px; color: rgba(255, 255, 255, .5); }
.ablauf .ist-erledigt { color: rgba(255, 255, 255, .85); }
.ablauf .ist-aktuell { color: #fff; font-weight: 600; }

.eckdaten { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); border: 1px solid var(--linie); padding: 16px 22px 4px; margin-bottom: 16px; }
.eckdaten-kopf { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.eckdaten-titel { font-size: 1.1rem; margin: 0; }
/* Merkblatt direkt neben dem Titel, getrennt durch einen feinen Strich – wichtig und leicht zu übersehen */
.eckdaten-merkblatt { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--linie); font-weight: 600; color: var(--rot); }
.eckdaten-merkblatt:hover { color: var(--rot-dunkel); }
.eckdaten-raster { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr 1.1fr; }
.eckdatum { padding: 0 20px; border-left: 1px solid var(--linie); }
.eckdatum:first-child { padding-left: 0; border-left: 0; }
.eckdatum-label { display: block; font-size: .8rem; font-weight: 600; color: var(--grau); margin-bottom: 4px; }
.eckdatum-liste { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.45; }
.eckdatum-liste strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.eckdaten-mehr { border-top: 1px solid var(--linie); margin-top: 14px; }
.eckdaten-mehr summary { cursor: pointer; padding: 10px 0; font-size: .9rem; font-weight: 500; color: var(--rot-dunkel); }
.eckdaten-mehr-inhalt { font-size: .9rem; padding-bottom: 12px; columns: 2; column-gap: 32px; }
.eckdaten-mehr-inhalt .uk-list { margin: 0 0 8px; }
.eckdaten-mehr-inhalt .uk-list > li { break-inside: avoid; margin-top: 4px; }
.eckdaten-mehr-titel { font-weight: 600; margin: 8px 0 0; break-after: avoid; }

/* --- Anmeldung: Formular + Seitenleiste ----------------------------------------------------------- */
.anmeldung-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
.formular-flaeche { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); border: 1px solid var(--linie); padding: 20px 24px 24px; }

/* Schritte: Nummer kommt per Zähler, ein ausgeblendeter Schritt zählt nicht mit */
#anmeldeformular, #ticketformular { counter-reset: schritt; }
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; counter-increment: schritt; }
.schritt + .schritt, .schritt + .absenden { border-top: 1px solid var(--linie); margin-top: 18px; padding-top: 14px; }
fieldset[hidden] { display: none; }
.schritt-titel { font-size: 1.05rem; font-weight: 600; line-height: 1.3; padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.schritt-titel + * { clear: both; }
.schritt-titel::before { content: counter(schritt) "."; color: var(--rot); margin-right: 6px; }
.schritt-notiz { font-size: .85rem; font-weight: 400; color: var(--grau); margin-left: 8px; }

/* Felder im 6er-Raster: b2 = ein Drittel, b3 = halbe, b6 = volle Breite */
.felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; }
.feld.b2 { grid-column: span 2; }
.feld.b3 { grid-column: span 3; }
.feld.b6 { grid-column: span 6; }
/* Kontoinhaber = Teilnehmer: die übernommenen (schreibgeschützten) Felder werden ausgeblendet */
.konto-feld:has(input[readonly]) { display: none; }

.feld-gruppe { margin-bottom: 12px; }
.feld-gruppe:last-child { margin-bottom: 0; }
.feld-gruppe-titel { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 4px; }
.feld-gruppe-link { font-weight: 400; margin-left: 8px; }
.feld-gruppe-hinweis { font-weight: 400; margin-left: 8px; color: var(--grau); }
.feld-notiz { color: var(--grau); font-size: .85rem; margin: 6px 0 0; }
.feld-text { margin: 0; font-size: .9rem; color: var(--grau); }

/* Auswahlfelder: ganze Fläche klickbar, Titel und Zusatz in einer Zeile (bricht nur bei Platzmangel um) */
.kacheln { display: grid; gap: 6px; }
.kacheln-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln-4, .kacheln-kurs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln-mitglied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachel {
    display: flex; align-items: center; gap: 8px; height: 100%; box-sizing: border-box; min-height: 36px;
    padding: 5px 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--weiss);
    cursor: pointer; font-size: .9rem; line-height: 1.25;
}
.kachel:hover { border-color: #aab1ba; }
.kachel-text { min-width: 0; }
.kachel-titel { font-weight: 500; }
.kachel-info { color: var(--grau); font-size: .82rem; margin-left: 2px; }
.kachel:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.kachel:has(input:disabled) { cursor: not-allowed; opacity: .5; }
/* Altersklasse: wählt anmeldung.js aus dem Geburtstag, nicht anklickbar */
.kacheln-auto .kachel { pointer-events: none; cursor: default; }
.kacheln-auto .kachel:not(:has(input:checked)) { color: var(--grau); }
.kachel-huelle { position: relative; }
.kachel-huelle .kachel { padding-right: 30px; }
.kachel-mehr { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); color: var(--grau); padding: 2px; line-height: 0; }
.kachel-mehr:hover { color: var(--rot); }
.kacheln-kurs .kachel { padding-left: 8px; gap: 7px; }
.kacheln-kurs .kachel-huelle .kachel { padding-right: 26px; }
.kacheln-kurs .kachel-info { font-size: .78rem; }
.kacheln-kurs .kachel-mehr { right: 4px; }

/* Tage als kleine Tabelle: Zeile = Tag, Spalten = Skibus / Skipass */
.tage-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; border: 1px solid var(--linie); }
.tage-tabelle th, .tage-tabelle td { padding: 0 12px; height: 36px; border-top: 1px solid var(--linie); text-align: left; }
.tage-tabelle thead th { height: 30px; border-top: 0; background: var(--hg); font-size: .8rem; font-weight: 600; color: var(--grau); }
.tage-tabelle thead th:not(:first-child), .tage-tabelle td { width: 90px; text-align: center; }
.tage-tabelle tbody th { font-weight: 400; color: var(--grau); }
.tage-tabelle tbody th strong { color: var(--text); font-weight: 600; margin-right: 4px; }
.tage-tabelle td label { display: flex; align-items: center; justify-content: center; height: 36px; cursor: pointer; }
.tage-tabelle td:has(input:checked) { background: var(--rot-hell); }
.tage-tabelle td:has(input:disabled) label { cursor: not-allowed; opacity: .5; }
.tage-tabelle td.auf-anfrage { font-size: .8rem; color: var(--grau); }
/* Bus-Ampel neben dem Häkchen: grün = Plätze frei, gelb = nur noch wenige, rot = ausgebucht */
.tage-tabelle:has(.ampel) thead th:nth-child(2), .tage-tabelle:has(.ampel) td.bus-zelle { width: 150px; text-align: left; }
.tage-tabelle td.bus-zelle label { justify-content: flex-start; gap: 10px; }
.tage-tabelle:not(:has(.ampel)) td.bus-zelle label { justify-content: center; }
.ampel { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--grau); white-space: nowrap; }
.ampel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ampel-gruen::before { background: var(--ampel-gruen); }
.ampel-gelb::before { background: var(--ampel-gelb); }
.ampel-gelb { color: var(--text); }
.ampel-rot::before { background: var(--rot); }
.ampel-rot { color: var(--rot-dunkel); font-weight: 500; }
td.bus-zelle .ampel-rot { margin-left: 4px; }
/* Ticket-Anzahl: gleiche Tabelle, Zellen mit Auswahlliste */
.anzahl-tabelle thead th:not(:first-child), .anzahl-tabelle td { width: auto; }
.anzahl-tabelle thead th { height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.anzahl-ort { display: block; font-weight: 400; }
.anzahl-tabelle td { padding: 4px 8px; height: 44px; }
.anzahl-tabelle .uk-select:not([multiple]):not([size]) { height: 34px; max-width: 90px; margin: 0 auto; display: block; }
.anzahl-tabelle td:has(option:checked:not([value="0"])) { background: var(--rot-hell); }

.haken-reihe { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 8px; font-size: .9rem; }
.haken-reihe label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

.einwilligung { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); cursor: pointer; font-size: .88rem; }
.einwilligung input { margin-top: 2px; }
.einwilligung:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); }
.begleit-bereich { margin-top: 8px; }

.iban-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.iban-zeile .uk-input { flex: 1 1 240px; }

.foto-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; align-items: center; }

.absenden .uk-button { margin-top: 10px; }
/* Online-Anmeldung so nicht möglich: gut sichtbar beim Absende-Knopf und in der Seitenleiste */
.sperre-hinweis {
    color: var(--fehler); background: var(--rot-hell); border: 1px solid var(--fehler); border-radius: var(--radius-klein);
    padding: 6px 10px; margin: 10px 0; font-weight: 500; font-size: .88rem; line-height: 1.35;
}
.sperre-hinweis::before { content: "! "; font-weight: 700; }
.sperre-hinweis[hidden] { display: none; }
.uk-button-primary:disabled { background: var(--linie); color: var(--grau); border-color: transparent; cursor: not-allowed; }

/* Seitenleiste "Deine Anmeldung": bleibt beim Scrollen stehen */
.auswahl-karte {
    position: sticky; top: 84px; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
    border: 1px solid var(--linie); border-top: 3px solid var(--rot); padding: 14px 16px 16px;
}
.auswahl-karte-titel { font-weight: 600; margin: 0 0 6px; }
.auswahl-liste { margin: 0; font-size: .88rem; }
.auswahl-liste > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid var(--linie); }
.auswahl-liste > div[hidden] { display: none; }
.auswahl-liste dt { color: var(--grau); font-weight: 400; }
.auswahl-liste dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.auswahl-liste dd.ist-leer { color: #a3a9b1; font-weight: 400; }
.auswahl-preis { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--text); margin-top: 4px; padding-top: 10px; }
.auswahl-preis-label { font-weight: 600; }
.auswahl-preis-wert { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.auswahl-hinweis { color: var(--grau); font-size: .82rem; line-height: 1.35; min-height: 1.1em; }
.auswahl-weiter { margin-top: 12px; }

/* Seitenleiste auf Zusammenfassung und Bestätigung: Preis + Aktionen (bleibt auch am Handy normal im Fluss) */
.aktion-karte {
    position: sticky; top: 84px; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
    border: 1px solid var(--linie); border-top: 3px solid var(--rot); padding: 14px 16px 16px;
}
.aktion-karte .auswahl-preis { border-top: 0; margin-top: 0; padding-top: 0; }
.aktion-karte .auswahl-hinweis { margin: 4px 0 14px; }
.aktion-karte form + form { margin-top: 8px; }
.aktion-kontakt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .88rem; }
.formular-flaeche > .uebersicht, .formular-flaeche > .ticket-tabelle { max-width: none !important; }
.formular-flaeche > .uebersicht tr:first-child > .uebersicht-gruppe { padding-top: 0 !important; }

/* --- Übrige Seiten ----------------------------------------------------------------------------- */
.inhalt-schmal { max-width: 760px; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.preis-tabelle td.preis-leistung { min-width: 220px; }
.kontakt-email { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.merkblatt-vorschau { width: 100%; height: 80vh; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.uebersicht-wert { overflow-wrap: anywhere; }

/* --- Tablet: Auswahl-Karte wird zur Preisleiste unten ------------------------------------------- */
@media (max-width: 959px) {
    .anmeldung-raster { grid-template-columns: minmax(0, 1fr); }
    .buehne-inhalt:has(.auswahl-karte) { padding-bottom: 96px; }
    .aktion-karte { position: static; }
    .eckdaten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .eckdatum:nth-child(3) { padding-left: 0; border-left: 0; }
    .auswahl-karte {
        position: fixed; top: auto; left: 10px; right: 10px; bottom: 10px; z-index: 980; padding: 8px 14px;
        border: 1px solid var(--linie); border-left: 4px solid var(--rot); box-shadow: 0 4px 16px rgba(16, 24, 40, .18);
        display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;
    }
    .auswahl-karte :is(.auswahl-karte-titel, .auswahl-liste, .auswahl-weiter) { display: none; }
    .auswahl-karte .auswahl-preis { display: contents; }
    .auswahl-karte .auswahl-preis-label { grid-column: 1; }
    .auswahl-karte .auswahl-preis-wert { grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; }
    .auswahl-karte .auswahl-hinweis { grid-column: 1; min-height: 0; }
    .auswahl-karte .sperre-hinweis { grid-column: 1 / -1; margin: 6px 0 2px; padding: 5px 10px; font-size: .85rem; }
    /* Unter dem Formular steht schon ein Absende-Knopf */
    .aktion-karte button[form] { display: none; }
}

/* --- Handy --- */
@media (max-width: 639px) {
    .buehne::before { height: 300px; }
    .buehne-inhalt { padding-top: 18px; }
    .kopf-titel { font-size: 1.6rem; }
    .kopf-text { font-size: .92rem; }
    .eckdaten { padding: 14px 16px 4px; }
    .eckdaten-merkblatt { flex-basis: 100%; margin: 4px 0 0; padding-left: 0; border-left: 0; }
    /* Termine | Kurszeiten nebeneinander, Skibus und Anmeldeschluss darunter */
    .eckdaten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px 16px; }
    .eckdatum, .eckdatum:nth-child(3) { padding: 0; border: 0; }
    .eckdatum:nth-child(2), .eckdatum:nth-child(4) { grid-column: 1 / -1; }
    .eckdaten-mehr-inhalt { columns: 1; }

    .formular-flaeche, .uk-card-body { padding: 18px 16px 20px; }
    /* 2 Spalten: b2 = halbe Breite, b3/b6 = volle Breite; m1/m2 erzwingen halbe/volle Breite */
    .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px 10px; }
    .feld.b2, .feld.m1 { grid-column: span 1; }
    .feld.b3, .feld.b6, .feld.m2 { grid-column: 1 / -1; }
    .feld.m1 { grid-column: span 1; }
    .kacheln-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kacheln-4 .kachel-info { display: block; margin-left: 0; }
    .kacheln-kurs { grid-template-columns: minmax(0, 1fr); }
    .kacheln-mitglied { grid-template-columns: minmax(0, 1fr); }
    .tage-tabelle th, .tage-tabelle td { padding: 0 8px; }
    .tage-tabelle thead th:not(:first-child), .tage-tabelle td { width: 64px; }
    .tage-tabelle:has(.ampel) thead th:nth-child(2), .tage-tabelle:has(.ampel) td.bus-zelle { width: 116px; }
    .tage-tabelle td.bus-zelle label { gap: 8px; }
    .foto-zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .foto-zeile .kacheln-2 { max-width: 220px; }
    .schritt-notiz { display: block; margin: 2px 0 0; }

    /* Knöpfe volle Breite */
    .iban-zeile .uk-button, #anmeldeformular button[type="submit"] { width: 100%; }

    /* Übersicht (Zusammenfassung/Bestätigung): Beschriftung über dem Wert */
    .uebersicht th, .uebersicht td { display: block; width: auto !important; }
    .uebersicht th { padding: 8px 0 0 !important; border-bottom: 0 !important; font-size: 13px; }
    .uebersicht td { padding: 0 0 8px !important; }
    .uebersicht th.uebersicht-gruppe { padding: 14px 0 4px !important; border-bottom: 1px solid var(--rot) !important; font-size: 14px; }

    /* Gebührentabelle als Blöcke je Leistung */
    .preis-tabelle thead { display: none; }
    .preis-tabelle, .preis-tabelle tbody, .preis-tabelle tr { display: block; }
    .preis-tabelle tr { padding: 10px 0; border-top: 1px solid var(--linie); }
    .preis-tabelle td { display: flex; justify-content: space-between; padding: 2px 0 !important; border: 0; }
    .preis-tabelle td.preis-leistung { display: block; min-width: 0; font-weight: 600; margin-bottom: 4px; }
    .preis-tabelle td[data-label]::before { content: attr(data-label); color: var(--grau); }

    .merkblatt-vorschau { display: none; }
}