/* ============================================================
   Gemeinsames Design für index.php (Anmeldeformular) und
   admin.php (Übersicht). Farben lassen sich zentral über die
   CSS-Variablen in :root anpassen.
   ============================================================ */

:root {
    --farbe-primaer: #2c5f7c;
    --farbe-primaer-dunkel: #1e4257;
    --farbe-primaer-hell: #eef5f9;
    --farbe-akzent: #e07a3f;
    --farbe-erfolg: #1e7a34;
    --farbe-warnung: #b8860b;
    /* Warteliste bewusst violett - deutlich unterscheidbar vom Orange
       für "Nur noch wenige Plätze frei" */
    --farbe-warteliste: #6a3ea1;
    --farbe-warteliste-hell: #f1ebf8;
    --farbe-fehler: #b3261e;
    --farbe-hintergrund: #f4f6f8;
    --farbe-text: #1c1c1c;
    --farbe-text-schwach: #666;
    --farbe-rand: #d8dee3;
    --radius: 14px;
    --schatten: 0 2px 10px rgba(20, 40, 55, 0.08), 0 1px 2px rgba(20, 40, 55, 0.06);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(circle at 15% 0%, rgba(44, 95, 124, 0.08), transparent 55%),
        radial-gradient(circle at 100% 10%, rgba(224, 122, 63, 0.08), transparent 45%),
        var(--farbe-hintergrund);
    background-attachment: fixed;
    color: var(--farbe-text);
    margin: 0;
    padding: 2.5rem 1rem;
    line-height: 1.55;
}

.karte {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius);
    padding: 2.2rem 2rem;
    box-shadow: var(--schatten);
}

.kopfbereich {
    text-align: center;
    margin-bottom: 1.6rem;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 0.3rem;
    color: var(--farbe-primaer-dunkel);
    letter-spacing: -0.01em;
}

.unterzeile {
    color: var(--farbe-text-schwach);
    font-size: 0.95rem;
    margin: 0;
}

/* Abschnitts-Überschrift zwischen Feldgruppen (z. B. "Angaben zum Kind") */
.formular-abschnitt {
    font-size: 1.08rem;
    color: var(--farbe-primaer-dunkel);
    margin: 1.9rem 0 1.1rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--farbe-rand);
}

.formular-abschnitt:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.intro-text, .outro-text, .infotext {
    font-size: 0.92rem;
    color: var(--farbe-text-schwach);
    background: var(--farbe-primaer-hell);
    border-left: 3px solid var(--farbe-primaer);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0 0 1.3rem;
}

.intro-text :first-child, .outro-text :first-child, .infotext :first-child { margin-top: 0; }
.intro-text :last-child, .outro-text :last-child, .infotext :last-child { margin-bottom: 0; }

.feld { margin-bottom: 1.15rem; }

/* Zwei Felder nebeneinander (z. B. Vorname + Nachname), Konfiguration
   über 'reihe' => true an beiden Feldern in config.php. */
.feld-reihe {
    display: flex;
    gap: 1rem;
}

.feld-reihe > .feld {
    flex: 1;
    min-width: 0;
}

@media (max-width: 480px) {
    .feld-reihe {
        flex-direction: column;
        gap: 0;
    }
}

.feld-hinweis {
    font-size: 0.82rem;
    color: var(--farbe-text-schwach);
    margin: -0.15rem 0 0.5rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.required { color: var(--farbe-fehler); }

input, select, textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 9px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--farbe-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.15);
}

.hat-fehler input, .hat-fehler select, .hat-fehler textarea {
    border-color: var(--farbe-fehler);
}

.field-error {
    color: var(--farbe-fehler);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

.allgemeiner-fehler {
    background: #fdecea;
    border: 1px solid var(--farbe-fehler);
    color: var(--farbe-fehler);
    border-radius: 9px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}

button {
    background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-primaer-dunkel));
    color: #fff;
    border: none;
    padding: 0.8rem 1.4rem;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(44, 95, 124, 0.3);
}

button:hover { box-shadow: 0 4px 14px rgba(44, 95, 124, 0.4); }
button:active { transform: translateY(1px); }

.datenschutz {
    font-size: 0.8rem;
    color: var(--farbe-text-schwach);
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--farbe-rand);
}

.erfolg { text-align: center; }
.erfolg .haken {
    font-size: 2.8rem;
    color: var(--farbe-erfolg);
    line-height: 1;
    margin-bottom: 0.3rem;
}

.warteliste-hinweis {
    background: var(--farbe-warteliste-hell);
    border: 1px solid var(--farbe-warteliste);
    color: #45246b;
    border-radius: 9px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    text-align: left;
    margin: 1rem 0 0;
}

/* Persönlicher Abmelde-Link auf der Erfolgsseite: deutlich abgesetzte
   Box mit Überschrift und Button, damit er nicht übersehen wird. */
.abmelde-hinweis {
    background: #fff;
    border: 2px solid var(--farbe-primaer);
    border-radius: 12px;
    padding: 1.1rem 1.2rem 1rem;
    text-align: left;
    margin: 1.6rem 0 0;
    color: var(--farbe-text);
    box-shadow: 0 2px 10px rgba(44, 95, 124, 0.10);
}
.abmelde-hinweis p { margin: 0 0 0.6rem; font-size: 0.93rem; line-height: 1.5; }
.abmelde-hinweis .abmelde-hinweis-titel {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--farbe-primaer-dunkel);
    margin-bottom: 0.35rem;
}
.abmelde-knopf {
    display: inline-block;
    background: var(--farbe-primaer);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9px;
    margin: 0.15rem 0 0.7rem;
}
.abmelde-knopf:hover { background: var(--farbe-primaer-dunkel); }
.abmelde-hinweis .abmelde-hinweis-klein {
    font-size: 0.87rem;
    color: var(--farbe-text);
    margin: 0;
}

/* Datum/Uhrzeit als eigene, etwas dezentere Zeile unter dem Termin-Titel */
.termin-zeit {
    display: inline-block;
    margin-top: 0.1rem;
    font-weight: 400;
    font-size: 0.9em;
    color: var(--farbe-text-schwach);
}

/* ---- Selbst-Abmeldung (abmelden.php) ----------------------------- */
.abmelde-text { color: var(--farbe-text); margin: 0 0 1rem; }
.abmelde-auswahl { margin: 0 0 1.3rem; }
.abmelde-auswahl-titel {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--farbe-text);
    margin: 0 0 0.55rem;
}
.abmelde-termin {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rand);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin: 0 0 0.6rem;
    font-weight: 400;
    cursor: pointer;
}
.abmelde-termin:hover { border-color: var(--farbe-primaer); }
.abmelde-termin input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    margin: 0.15rem 0 0;
    padding: 0;
    accent-color: var(--farbe-primaer);
}
.abmelde-termin-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.abmelde-termin-titel { font-weight: 600; font-size: 0.97rem; color: var(--farbe-text); }
.abmelde-liste {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem 0.8rem 2.1rem;
    background: #fff;
    border: 1px solid var(--farbe-rand);
    border-radius: 10px;
    color: var(--farbe-text);
}
.abmelde-liste li { margin: 0.2rem 0; font-weight: 600; }

.geschlossen { text-align: center; color: var(--farbe-text-schwach); }

fieldset.feld-gruppe {
    border: none;
    padding: 0;
    margin: 0 0 1.15rem;
}

fieldset.feld-gruppe legend {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    padding: 0;
    width: 100%;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 400;
    margin-bottom: 0.45rem;
    cursor: pointer;
}

.checkbox-option input { width: auto; margin: 0; }

.feld-einzel-checkbox label { display: flex; }

.option-ausgebucht { opacity: 0.55; cursor: not-allowed; }

.ausgebucht-label {
    font-size: 0.82em;
    color: var(--farbe-text-schwach);
    font-weight: 400;
}

select option:disabled { color: #999; }

/* Termin-Auswahl: eigener, hervorgehobener Rahmen um die ganze Feldgruppe */
fieldset.feld-termin,
.feld-termin {
    background: var(--farbe-primaer-hell);
    border: 1px solid rgba(44, 95, 124, 0.18);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem 1rem;
}

.feld-termin .termin-option { background: #fff; color: var(--farbe-text); }

/* Überschrift (legend) INNERHALB des hellblauen Kastens halten statt halb
   auf dessen Rand - verhält sich so in allen Browsern (auch Safari) gleich. */
fieldset.feld-termin > legend {
    float: left;
    width: 100%;
    margin: 0 0 0.7rem;
}
fieldset.feld-termin > legend + * { clear: both; }

/* Termin-Auswahl: größere Kacheln statt schlichter Radio-Zeilen */
.termin-option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--farbe-rand);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.termin-option:hover:not(.option-ausgebucht) {
    border-color: var(--farbe-primaer);
    background: var(--farbe-primaer-hell);
}

.termin-option input[type="checkbox"] {
    width: auto;
    margin-top: 0.2rem;
}

.termin-option-inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.termin-option-label { font-weight: 600; font-size: 0.95rem; }

.termin-info { font-size: 0.83rem; font-weight: 500; }
.termin-info-frei { color: var(--farbe-erfolg); }
.termin-info-wenige { color: var(--farbe-akzent); font-weight: 600; }
.termin-info-warteliste { color: var(--farbe-warteliste); font-weight: 600; }
.termin-info-voll { color: var(--farbe-text-schwach); }

.honeypot-feld {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================================
   admin.php - Übersichtsseite
   ============================================================ */

/* Standard-Breite der Übersicht ("Kompakt", ohne data-breite-Attribut).
   Über den Umschalter oben rechts lässt sich auf "Standard" oder "Weit"
   umschalten (setzt data-breite="standard"/"weit" am <body>, siehe
   admin.php) - praktisch auf einem breiten Monitor, damit die Tabelle
   nicht seitlich gescrollt werden muss. */
.wrapper { max-width: 1300px; margin: 0 auto; }
body[data-breite="standard"] .wrapper { max-width: 1700px; }
body[data-breite="weit"] .wrapper { max-width: none; }

/* Termine/Kapazitäten/Auswertung/Verteilung: bei "Kompakt" (Standard)
   weiterhin schlicht untereinander (wie bisher); bei "Standard"/"Weit"
   nebeneinander per Flexbox, damit der zusätzliche Platz auch genutzt
   wird, statt die Boxen einfach nur breiter zu ziehen. */
body[data-breite="standard"] .uebersichts-boxen,
body[data-breite="weit"] .uebersichts-boxen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.3rem;
}
body[data-breite="standard"] .uebersichts-boxen > .uebersichts-box,
body[data-breite="weit"] .uebersichts-boxen > .uebersichts-box {
    flex: 1 1 380px;
    margin-bottom: 0;
}

.breite-umschalter {
    display: inline-flex;
    border: 1px solid var(--farbe-rand);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

.breite-knopf {
    background: transparent;
    border: none;
    padding: 0.6rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--farbe-text-schwach);
    cursor: pointer;
}

.breite-knopf + .breite-knopf { border-left: 1px solid var(--farbe-rand); }

.breite-knopf:hover { background: var(--farbe-primaer-hell); }

.breite-knopf.aktiv {
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
}

/* Hinweis, dass die Übersicht (anders als das Anmeldeformular) für
   Computer/Tablet ausgelegt ist - erscheint nur auf schmalen
   (Smartphone-)Bildschirmen. */
.mobil-hinweis { display: none; }

@media (max-width: 700px) {
    .mobil-hinweis {
        display: block;
        max-width: 1300px;
        margin: 0 auto 1rem;
        background: #fdf3dc;
        border: 1px solid var(--farbe-warnung);
        color: #5c4a00;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

/* Erlaubt der Tabelle, bei Bedarf horizontal zu scrollen, statt die
   Seite zu sprengen (z. B. bei sehr vielen Spalten/kleinem Fenster). */
.tabellen-bereich {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.tabellen-bereich table { box-shadow: none; }

/* Kompaktere Tabellendarstellung: kleinere Schrift/weniger Innenabstand,
   damit deutlich mehr auf einen Blick passt. */
.tabelle-kompakt th, .tabelle-kompakt td {
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.tabelle-kompakt td { white-space: normal; }

.karte-login {
    max-width: 400px;
    margin: 4.5rem auto;
    background: #fff;
    border-radius: var(--radius);
    padding: 2.2rem;
    box-shadow: var(--schatten);
    text-align: center;
}

.karte-login input[type=password] {
    margin-bottom: 1rem;
}

.fehler { color: var(--farbe-fehler); font-size: 0.9rem; margin-bottom: 1rem; }

.kopfzeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.3rem;
}

.kopfzeile h1 { text-align: left; margin: 0; }

.aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.knopf {
    background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-primaer-dunkel));
    color: #fff;
    border: none;
    padding: 0.65rem 1.2rem;
    border-radius: 9px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(44, 95, 124, 0.25);
}

.knopf:hover { box-shadow: 0 4px 12px rgba(44, 95, 124, 0.35); }

.knopf-sekundaer {
    background: #fff;
    color: var(--farbe-primaer-dunkel);
    border: 1px solid var(--farbe-rand);
    box-shadow: none;
}

.knopf-sekundaer:hover { background: var(--farbe-primaer-hell); }

.tab-leiste {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--farbe-rand);
}

.tab-link {
    padding: 0.6rem 1.1rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--farbe-text-schwach);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-link.aktiv {
    color: var(--farbe-primaer-dunkel);
    border-bottom-color: var(--farbe-primaer);
}

.box {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.3rem;
    box-shadow: var(--schatten);
}

.box h2 {
    font-size: 1.02rem;
    margin: 0 0 0.8rem;
    color: var(--farbe-primaer-dunkel);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
}

th, td {
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--farbe-rand);
    font-size: 0.9rem;
}

th {
    background: var(--farbe-primaer);
    color: #fff;
    font-weight: 600;
}

tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: #fafbfc; }

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.status-angemeldet { background: #e6f4ea; color: var(--farbe-erfolg); }
.status-warteliste { background: var(--farbe-warteliste-hell); color: var(--farbe-warteliste); }

.termin-zelle-zeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.termin-zelle-zeile:not(:last-child) { margin-bottom: 0.3rem; }

.anzahl { color: var(--farbe-text-schwach); font-size: 0.9rem; margin-bottom: 1rem; }

.leer {
    text-align: center;
    color: var(--farbe-text-schwach);
    padding: 2.2rem;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.kapazitaeten-feldname {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0.9rem 0 0.35rem;
}

.kapazitaeten-feldname:first-of-type { margin-top: 0; }

.kapazitaeten-liste { list-style: none; margin: 0; padding: 0; }

.kapazitaeten-liste li {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.88rem;
    border-bottom: 1px solid #f0f0f0;
}

.kapazitaeten-liste li:last-child { border-bottom: none; }

.kapazitaet-voll span:last-child { color: var(--farbe-fehler); font-weight: 600; }

/* Termine-Box */
/* Termine-Zeile: große Zahl (aktuell "angemeldet") links, daneben Name,
   Balken und Legende. Bewusst ohne Farbcodierung der Zahl - nur groß und
   fett, damit sie auf den ersten Blick auffällt. */
.termin-uebersicht {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.1rem;
}
.termin-uebersicht:last-child { margin-bottom: 0; }

.termin-uebersicht-zahl {
    flex-shrink: 0;
    min-width: 2.2ch;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--farbe-primaer-dunkel);
    text-align: right;
}

.termin-uebersicht-inhalt { flex: 1; min-width: 0; }

.termin-uebersicht-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.termin-uebersicht-name { font-weight: 600; font-size: 0.94rem; }
.termin-uebersicht-deadline { font-size: 0.8rem; color: var(--farbe-text-schwach); }

.balken-spur {
    background: #eef1f3;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    display: flex;
}

.balken-fuellung-regulaer { background: var(--farbe-erfolg); height: 100%; }
.balken-fuellung-warteliste { background: var(--farbe-warteliste); height: 100%; }

.termin-uebersicht-legende {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--farbe-text-schwach);
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.legende-punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.legende-punkt-regulaer { background: var(--farbe-erfolg); }
.legende-punkt-warteliste { background: var(--farbe-warteliste); }

/* Auswertung: Balkendiagramme aus reinem CSS/PHP, keine externe Bibliothek */
.auswertung-feld { margin-bottom: 1.4rem; }
.auswertung-feld:last-child { margin-bottom: 0; }
.auswertung-feldname { font-weight: 600; font-size: 0.94rem; margin-bottom: 0.6rem; }

.auswertung-hinweis {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--farbe-text-schwach);
    margin-left: 0.3rem;
}

/* Tortendiagramme (reines CSS, kein JS): mehrere Karten nebeneinander,
   auf schmalen Bildschirmen untereinander. */
.kreisdiagramme {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
}

.kreisdiagramm-karte {
    flex: 1 1 200px;
    text-align: center;
}

.kreis {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 0.9rem;
}

.kreis-legende {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.82rem;
}

.kreis-legende li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
}

.legende-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.auswertung-zeile {
    display: grid;
    grid-template-columns: minmax(90px, 30%) 1fr auto;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
    font-size: 0.86rem;
}

.auswertung-label {
    color: var(--farbe-text);
    overflow-wrap: anywhere;
}

.auswertung-balken-spur {
    background: #eef1f3;
    border-radius: 6px;
    height: 18px;
    overflow: hidden;
}

.auswertung-balken-fuellung {
    background: linear-gradient(135deg, var(--farbe-primaer), var(--farbe-akzent));
    height: 100%;
    border-radius: 6px 0 0 6px;
    min-width: 2px;
}

.auswertung-wert {
    font-weight: 600;
    color: var(--farbe-primaer-dunkel);
    text-align: right;
    white-space: nowrap;
}

.stat-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.3rem;
}

.stat-kachel {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--schatten);
}

.stat-kachel-wert {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--farbe-primaer-dunkel);
    line-height: 1.1;
}

.stat-kachel-label {
    font-size: 0.82rem;
    color: var(--farbe-text-schwach);
    margin-top: 0.25rem;
}

/* ============================================================
   Fußzeile (Impressum/Datenschutz) - auf allen Seiten, siehe
   renderFooterLinks() in functions.php und $IMPRESSUM_URL/
   $DATENSCHUTZ_URL in config.php.
   ============================================================ */
.seiten-fuss {
    max-width: 720px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--farbe-text-schwach);
}
.seiten-fuss a { color: var(--farbe-text-schwach); text-decoration: underline; }
.seiten-fuss a:hover { color: var(--farbe-primaer-dunkel); }
/* In admin.php ist der Inhalt breiter als 720px - Fußzeile dort ebenfalls verbreitern
   (siehe class="admin-seite" am <body> dort), inkl. Breiten-Umschalter. */
body.admin-seite .seiten-fuss { max-width: 1300px; }
body.admin-seite[data-breite="standard"] .seiten-fuss { max-width: 1700px; }
body.admin-seite[data-breite="weit"] .seiten-fuss { max-width: none; }

/* ============================================================
   Admin: Bearbeiten/Löschen einer einzelnen Anmeldung
   ============================================================ */
.wrapper-schmal { max-width: 720px; }

.mini-knopf {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    white-space: nowrap;
    margin: 0 0.25rem 0.25rem 0;
}
.mini-knopf:hover { background: #dceaf1; }
.mini-knopf-gefahr { background: #fdecea; color: var(--farbe-fehler); }
.mini-knopf-gefahr:hover { background: #fadbd8; }
/* Aktionen stehen in der ERSTEN Spalte (immer sichtbar, auch wenn die
   Tabelle seitlich gescrollt werden muss); Buttons untereinander, damit
   die Spalte schmal bleibt. */
.aktionen-zelle { white-space: nowrap; width: 1%; }
.aktionen-zelle .mini-knopf { display: block; text-align: center; margin: 0 0 0.3rem; }
.aktionen-zelle .mini-knopf:last-child { margin-bottom: 0; }
@media print { .aktionen-spalte { display: none; } }

.knopf-gefahr-voll {
    background: linear-gradient(135deg, var(--farbe-fehler), #7a170f);
    box-shadow: 0 2px 8px rgba(179, 38, 30, 0.3);
    width: auto;
}
.knopf-gefahr-voll:hover { box-shadow: 0 4px 14px rgba(179, 38, 30, 0.4); }

.formular-aktionen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.formular-aktionen button { width: auto; }

.admin-hinweis-box {
    background: #e6f4ea;
    border: 1px solid var(--farbe-erfolg);
    color: #164f24;
    border-radius: 9px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}

.loeschen-vorschau {
    width: 100%;
    margin: 1rem 0 1.3rem;
    border-collapse: collapse;
}
.loeschen-vorschau th {
    text-align: left;
    color: var(--farbe-text-schwach);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem 0.3rem 0;
    vertical-align: top;
    white-space: nowrap;
}
.loeschen-vorschau td {
    font-size: 0.9rem;
    padding: 0.3rem 0;
}

.admin-termin-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.admin-termin-option .termin-option {
    flex: 1 1 260px;
    margin-bottom: 0;
    min-width: 0;
}
.admin-status-auswahl {
    width: auto;
    flex: 0 0 auto;
    padding: 0.35rem 0.5rem;
    border-radius: 7px;
    border: 1px solid var(--farbe-rand);
    font-size: 0.85rem;
}

@media print {
    .aktionen, .logout, .tab-leiste, .mobil-hinweis, .aktionen-zelle { display: none; }
    body { padding: 0; background: #fff; }
    .box, table, .stat-kachel, .leer { box-shadow: none; }
    .wrapper { max-width: none; }
}

@media (max-width: 480px) {
    .karte, .karte-login { padding: 1.5rem 1.2rem; }
    .auswertung-zeile { grid-template-columns: 1fr; row-gap: 0.25rem; }
    .auswertung-wert { text-align: left; }
    .termin-uebersicht { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .termin-uebersicht-zahl { text-align: left; }
}

/* ============================================================
   Einstellungen (einstellungen.php)
   ============================================================ */
.wrapper-einstellungen { max-width: 880px; }
body.admin-seite:has(.wrapper-einstellungen) .seiten-fuss { max-width: 880px; }

.einstellungen-einleitung { color: var(--farbe-text-schwach); font-size: 0.93rem; margin: 0 0 1.2rem; }
.einstellungen-stand { display: block; margin-top: 0.25rem; font-size: 0.85rem; }

.einstellungen-warnung {
    background: #fdf3dc;
    border: 1px solid var(--farbe-warnung);
    color: #5c4a00;
    border-radius: 9px;
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    margin: 0 0 1rem;
}

.einstellungen-raster {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1rem;
}
.einstellungen-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .einstellungen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .einstellungen-raster, .einstellungen-raster-2 { grid-template-columns: 1fr; }
}

.einstellungen-termin {
    border: 1px solid var(--farbe-rand);
    border-radius: 12px;
    padding: 0.9rem 1.1rem 0.2rem;
    margin: 0 0 1rem;
    background: #fafcfd;
}
.einstellungen-termin legend {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--farbe-primaer-dunkel);
    padding: 0 0.4rem;
}
.einstellungen-termin-stand {
    font-size: 0.83rem;
    color: var(--farbe-text-schwach);
    margin: 0 0 0.8rem;
}

.einstellungen-selten summary {
    cursor: pointer;
    list-style: revert;
}
.einstellungen-selten summary h2 { display: inline; margin: 0; }
.einstellungen-selten[open] summary { margin-bottom: 1rem; }

.einstellungen-speichern { margin: 0 0 2rem; }
.einstellungen-speichern button { width: auto; min-width: 260px; }

.box-gefahr { border: 1px solid rgba(179, 38, 30, 0.35); }
.box-gefahr h2 { color: var(--farbe-fehler); }
.box-gefahr p { font-size: 0.92rem; }
.loeschen-zeile { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.loeschen-zeile input { max-width: 220px; }
/* Eingabefelder im Raster immer auf gleicher Höhe, auch wenn ein
   Hinweistext umbricht */
.einstellungen-raster > .feld { display: flex; flex-direction: column; }
.einstellungen-raster > .feld > input { margin-top: auto; }

/* ---- Pausen-Schalter (Einstellungen) / Pausen-Hinweis ------------ */
.status-box { border: 2px solid var(--farbe-erfolg); }
.status-box.status-pausiert { border-color: var(--farbe-akzent); background: #fff8f2; }
.status-kopf { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; font-size: 0.95rem; }
.status-punkt {
    width: 0.8rem; height: 0.8rem; border-radius: 50%;
    background: var(--farbe-erfolg); flex: 0 0 auto; align-self: center;
}
.status-pausiert .status-punkt { background: var(--farbe-akzent); }
.status-knoepfe { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.status-knoepfe button { width: auto; }
.knopf-pausieren { background: linear-gradient(135deg, var(--farbe-akzent), #b85a24); box-shadow: 0 2px 8px rgba(224, 122, 63, 0.35); }
.knopf-oeffnen { background: linear-gradient(135deg, var(--farbe-erfolg), #145524); box-shadow: 0 2px 8px rgba(30, 122, 52, 0.3); }
.knopf-leise { background: #fff; color: var(--farbe-primaer-dunkel); border: 1px solid var(--farbe-rand); box-shadow: none; }
.knopf-leise:hover { box-shadow: none; background: var(--farbe-primaer-hell); }

.pause-banner {
    background: #fff3e8;
    border: 1px solid var(--farbe-akzent);
    color: #7a3d12;
    border-radius: 9px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.92rem;
}
.pause-banner a { color: #7a3d12; font-weight: 600; margin-left: 0.4rem; }

/* Öffentliches Formular während einer Pause */
.pause-hinweis {
    background: #fff8f2;
    border: 1px solid var(--farbe-akzent);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    color: var(--farbe-text);
    font-size: 1rem;
    line-height: 1.55;
}

/* ---- Termine hinzufügen / ausblenden / entfernen (Einstellungen) --- */
.standard-knopf-unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einstellungen-termin-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.einstellungen-termin-kopf .einstellungen-termin-stand { margin: 0; }
.termin-sichtbar { margin: 0; font-size: 0.9rem; font-weight: 600; }
.termin-versteckt { background: #f4f5f7; border-style: dashed; }
.termin-versteckt-marke {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: #e3e6ea; color: var(--farbe-text-schwach); font-size: 0.75rem; font-weight: 600;
}
.termin-entfernen { margin: 0.2rem 0 0.9rem; }
.knopf-entfernen {
    width: auto; background: #fff; color: var(--farbe-fehler); border: 1px solid rgba(179, 38, 30, 0.45);
    box-shadow: none; font-size: 0.85rem; padding: 0.4rem 0.8rem;
}
.knopf-entfernen:hover { background: #fdecea; box-shadow: none; }
.termin-entfernen-hinweis { font-size: 0.82rem; color: var(--farbe-text-schwach); }
.knopf-hinzufuegen {
    width: auto; background: #fff; color: var(--farbe-primaer-dunkel); border: 1px dashed var(--farbe-primaer);
    box-shadow: none; font-size: 0.92rem;
}
.knopf-hinzufuegen:hover { background: var(--farbe-primaer-hell); box-shadow: none; }
.termin-hinzufuegen-hinweis { margin-top: 0.4rem; }
.termin-versteckt-badge {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: #e3e6ea; color: var(--farbe-text-schwach); font-size: 0.72rem; font-weight: 600; vertical-align: middle;
}
.torten-auswahl { display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; margin-top: 0.4rem; }
.torten-auswahl .checkbox-option { margin: 0; }

/* ============================================================
   Drucken einzelner Bereiche (admin.php): Knöpfe "Drucken" bei
   "Verteilung" und bei der Tabelle
   ============================================================ */
.box-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.box-kopf h2 { margin: 0; }
.tabellen-kopf { margin: 0.4rem 0 0.7rem; }
.tabellen-kopf h2 { font-size: 1.02rem; color: var(--farbe-primaer-dunkel); }
.tabellen-anzahl { font-weight: 400; color: var(--farbe-text-schwach); }
.druck-knopf {
    width: auto;
    background: #fff;
    color: var(--farbe-primaer-dunkel);
    border: 1px solid var(--farbe-rand);
    box-shadow: none;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
}
.druck-knopf:hover { background: var(--farbe-primaer-hell); box-shadow: none; }
.druck-kopf { display: none; }

@media print {
    .druck-knopf { display: none !important; }

    /* Kopfzeile mit Titel, Stand und Anzahl - nur auf dem Papier */
    body[data-druck] .druck-kopf {
        display: block;
        margin: 0 0 8pt;
        padding-bottom: 5pt;
        border-bottom: 1.5pt solid #222;
        color: #000;
    }
    .druck-kopf strong { display: block; font-size: 13pt; }
    .druck-kopf span { font-size: 9pt; color: #444; }

    /* Alles ausblenden, was nicht zum gewählten Bereich gehört */
    body[data-druck] .kopfzeile,
    body[data-druck] .pause-banner,
    body[data-druck] .admin-hinweis-box,
    body[data-druck] .stat-kacheln,
    body[data-druck] .mobil-hinweis,
    body[data-druck] .seiten-fuss,
    body[data-druck] .leer { display: none !important; }
    body[data-druck="tabelle"] .uebersichts-boxen { display: none !important; }
    body[data-druck="verteilung"] .druckbereich-tabelle { display: none !important; }
    body[data-druck="verteilung"] .uebersichts-boxen > :not(.druckbereich-verteilung) { display: none !important; }

    body[data-druck] { padding: 0; margin: 0; background: #fff !important; }
    body[data-druck] .wrapper { max-width: none !important; margin: 0; }
    body[data-druck] .box-kopf h2 { display: none; }
    body[data-druck] .box-kopf { margin: 0; }

    /* ---- Tortendiagramme (Hochformat) ---- */
    body[data-druck="verteilung"] .druckbereich-verteilung {
        box-shadow: none; border: none; padding: 0; width: 100%; max-width: none; flex: none;
    }
    body[data-druck="verteilung"] .kreisdiagramme {
        display: grid; grid-template-columns: 1fr 1fr; gap: 18pt 24pt;
    }
    body[data-druck="verteilung"] .kreisdiagramm-karte { break-inside: avoid; }
    .kreis, .legende-swatch {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }


}

/* ---- Tabellen-Druckfassung (Querformat) ----
   Bewusst NICHT nur in @media print: Während des Druckvorgangs (data-druck
   am <body>, nur solange der Druckdialog offen ist) wird die Tabelle auch
   am Bildschirm so aufgebaut, damit das Skript in admin.php nachmessen
   kann, ob sie auf A4 quer passt, und notfalls einzelne Zellen verkleinert. */
body[data-druck="tabelle"] .druckbereich-tabelle { width: 274mm; max-width: 274mm; }
/* ---- Tabelle (Querformat) ---- */
body[data-druck="tabelle"] .tabellen-bereich {
    overflow: visible; box-shadow: none; border-radius: 0;
}
body[data-druck="tabelle"] table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: none;
    font-size: 7.5pt;
    color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body[data-druck="tabelle"] thead { display: table-header-group; } /* Kopfzeile auf jeder Seite */
body[data-druck="tabelle"] th {
    background: #dfe5ea !important;
    color: #000 !important;
    font-weight: 700;
    font-size: 7.5pt;
    padding: 4pt 4pt;
    border-top: 1pt solid #333;
    border-bottom: 1pt solid #333;
    white-space: normal;
    text-align: left;
    vertical-align: bottom;
}
body[data-druck="tabelle"] td {
    padding: 3pt 4pt;
    font-size: 7.5pt;
    border-bottom: 0.5pt solid #b8bec4;
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    background: #fff !important;
}
/* Nur E-Mail-Adressen dürfen notfalls mitten im Wort umbrechen;
   kurze Angaben (PLZ, Klasse, Telefon, Datum) bleiben zusammen. */
body[data-druck="tabelle"] td.spalte-email { hyphens: none; }
body[data-druck="tabelle"] td.spalte-textarea:not(:empty) { min-width: 32mm; }
body[data-druck="tabelle"] td.spalte-tel,
body[data-druck="tabelle"] td.spalte-number { white-space: nowrap; }
body[data-druck="tabelle"] tbody tr:nth-child(even) td { background: #eef1f4 !important; }
body[data-druck="tabelle"] tbody tr:last-child td { border-bottom: 1pt solid #333; }
body[data-druck="tabelle"] tr { break-inside: avoid; page-break-inside: avoid; }
body[data-druck="tabelle"] .aktionen-spalte,
body[data-druck="tabelle"] .aktionen-zelle { display: none !important; }
body[data-druck="tabelle"] .termin-zelle-zeile { white-space: nowrap; gap: 3pt; }
body[data-druck="tabelle"] .status-badge {
    background: none !important; padding: 0; font-size: 7pt; border-radius: 0;
}
body[data-druck="tabelle"] .status-angemeldet { color: #1e7a34 !important; }
body[data-druck="tabelle"] .status-warteliste { color: #6a3ea1 !important; }
body[data-druck="tabelle"] table.druck-notbremse th,
body[data-druck="tabelle"] table.druck-notbremse td { font-size: 6.5pt; }
/* Stufe 1 der Anpassung: "nicht umbrechen"-Regeln lockern */
body[data-druck="tabelle"] table.druck-locker td.spalte-tel,
body[data-druck="tabelle"] table.druck-locker td.spalte-number { white-space: normal; }
body[data-druck="tabelle"] table.druck-locker td.spalte-textarea:not(:empty) { min-width: 18mm; }
body[data-druck="tabelle"] table.druck-locker .termin-zelle-zeile { white-space: normal; flex-wrap: wrap; }
body[data-druck="tabelle"] table.druck-eng th,
body[data-druck="tabelle"] table.druck-eng td,
body[data-druck="tabelle"] table.druck-notbremse th,
body[data-druck="tabelle"] table.druck-notbremse td { padding-left: 2.5pt; padding-right: 2.5pt; }

/* Telefonnummer: Vorwahl und Rufnummer jeweils nicht umbrechen */
.tel-teil { white-space: nowrap; }
.einstellungen-unterueberschrift { font-weight: 600; font-size: 0.92rem; margin: 1.1rem 0 0.2rem; padding-top: 0.9rem; border-top: 1px solid var(--farbe-rand); }

/* ---- Logo oben im Formular ---------------------------------------- */
.schullogo { display: block; margin: 0 auto 1.1rem; max-width: 100%; height: auto; object-fit: contain; }
.schullogo-klein  { max-height: 60px;  max-width: min(200px, 100%); }
.schullogo-mittel { max-height: 95px;  max-width: min(300px, 100%); }
.schullogo-gross  { max-height: 140px; max-width: min(420px, 100%); }

/* Logo-Bereich auf der Einstellungsseite */
.logo-bereich { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.6rem; }
.logo-vorschau {
    width: 200px; min-height: 110px; display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--farbe-rand); border-radius: 10px; background: #fff; padding: 0.6rem;
}
.logo-vorschau img { max-width: 100%; max-height: 120px; object-fit: contain; }
.logo-leer { color: var(--farbe-text-schwach); font-size: 0.85rem; }
.logo-eingaben { flex: 1; min-width: 240px; }
.logo-eingaben input[type="file"] { padding: 0.45rem; background: #fff; }
.logo-label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.logo-groessen { display: flex; gap: 1.2rem; }
.logo-groessen .checkbox-option { margin: 0; }

/* ---- Termin-Filter über der Tabelle (admin.php) --------------------
   Zusammenhängende Knopfgruppe wie der Umschalter Kompakt/Standard/Weit */
.filter-leiste { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.filter-titel { font-size: 0.85rem; font-weight: 600; color: var(--farbe-text-schwach); }
.filter-umschalter {
    display: inline-flex; flex-wrap: wrap;
    border: 1px solid var(--farbe-rand); border-radius: 9px; overflow: hidden; background: #fff;
    box-shadow: var(--schatten);
}
.filter-knopf {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 1.05rem; font-size: 0.88rem; font-weight: 600;
    color: var(--farbe-text-schwach); text-decoration: none; background: transparent;
}
.filter-knopf + .filter-knopf { border-left: 1px solid var(--farbe-rand); }
.filter-knopf:hover { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }
.filter-knopf.aktiv { background: var(--farbe-primaer); color: #fff; }
.filter-anzahl {
    display: inline-block; min-width: 1.6em; padding: 0.05rem 0.45rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; text-align: center;
    background: #eef1f3; color: var(--farbe-text-schwach);
}
.filter-knopf.aktiv .filter-anzahl { background: rgba(255, 255, 255, 0.22); color: #fff; }
@media print { .filter-leiste { display: none !important; } }
.druck-kopf .druck-filter { font-weight: 700; color: #000; }

/* ---- Tortendiagramme: ausgewogenes Raster -------------------------
   Nie "3 + 1": Bei 4 Diagrammen entweder alle nebeneinander oder 2 x 2,
   bei 3 entweder nebeneinander oder untereinander. Richtet sich nach der
   tatsächlich verfügbaren Breite des Kastens (Container-Abfrage). */
.druckbereich-verteilung { container-type: inline-size; }
.kreisdiagramme.kreise-2, .kreisdiagramme.kreise-3, .kreisdiagramme.kreise-4 {
    display: grid; gap: 1.8rem; grid-template-columns: 1fr;
}
@container (min-width: 460px) {
    .kreisdiagramme.kreise-2, .kreisdiagramme.kreise-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 700px) {
    .kreisdiagramme.kreise-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 940px) {
    .kreisdiagramme.kreise-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Werkzeugleiste über der Tabelle: Filter, Drucken, CSV ----------- */
.tabellen-werkzeuge { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.werkzeug-gruppe {
    display: inline-flex; border: 1px solid var(--farbe-rand); border-radius: 9px; overflow: hidden;
    background: #fff; box-shadow: var(--schatten);
}
.werkzeug-knopf, button.werkzeug-knopf {
    display: inline-flex; align-items: center; width: auto; margin: 0;
    padding: 0.6rem 1.05rem; font-size: 0.88rem; font-weight: 600; font-family: inherit; line-height: normal;
    color: var(--farbe-primaer-dunkel); background: transparent; border: none; border-radius: 0;
    box-shadow: none; text-decoration: none; cursor: pointer;
}
.werkzeug-knopf + .werkzeug-knopf { border-left: 1px solid var(--farbe-rand); }
.werkzeug-knopf:hover, button.werkzeug-knopf:hover { background: var(--farbe-primaer-hell); box-shadow: none; }
button.werkzeug-knopf:active { transform: none; }
@media print { .tabellen-werkzeuge { display: none !important; } }

/* ============================================================
   Admin: Bearbeiten + Löschen auf EINER Seite
   Unten: [Änderungen speichern] [Abbrechen] ........ [Anmeldung löschen]
   "Anmeldung löschen" klappt darunter eine rote Rückfrage auf.
   ============================================================ */
.bearbeiten-aktionen { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--farbe-rand); }
.bearbeiten-aktionen .knopf { padding: 0.8rem 1.3rem; font-size: 1rem; }
button.knopf-gefahr-rand {
    margin-left: auto;
    width: auto;
    background: #fff;
    color: var(--farbe-fehler);
    border: 1px solid #e3b5b1;
    box-shadow: none;
}
button.knopf-gefahr-rand:hover,
button.knopf-gefahr-rand.aktiv { background: #fdecea; border-color: var(--farbe-fehler); box-shadow: none; }
.loeschen-rueckfrage {
    margin-top: 0.9rem;
    padding: 1rem 1.1rem;
    background: #fdf0ee;
    border: 1px solid #e3b5b1;
    border-radius: 10px;
    color: #3d1a17;
}
.loeschen-rueckfrage[hidden] { display: none; }
.loeschen-rueckfrage p { margin: 0 0 0.8rem; line-height: 1.45; }
.loeschen-rueckfrage strong { color: var(--farbe-fehler); }
.loeschen-rueckfrage-knoepfe { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.loeschen-rueckfrage-knoepfe button { width: auto; }
.loeschen-rueckfrage-knoepfe .knopf-sekundaer { padding: 0.8rem 1.3rem; font-size: 1rem; }
@media (max-width: 520px) {
    button.knopf-gefahr-rand { margin-left: 0; }
}
/* alle Knöpfe in diesen Reihen exakt gleich hoch */
.bearbeiten-aktionen > button, .bearbeiten-aktionen > .knopf,
.loeschen-rueckfrage-knoepfe > button {
    line-height: 1.25;
    padding: 0.75rem 1.3rem;
    font-size: 1rem;
    border: 1px solid transparent;
}
.bearbeiten-aktionen > .knopf-sekundaer, .loeschen-rueckfrage-knoepfe > .knopf-sekundaer { border-color: var(--farbe-rand); }
.bearbeiten-aktionen > button.knopf-gefahr-rand { border-color: #e3b5b1; }
.bearbeiten-aktionen > button.knopf-gefahr-rand.aktiv,
.bearbeiten-aktionen > button.knopf-gefahr-rand:hover { border-color: var(--farbe-fehler); }

/* ---- Freischalt-Zeitpunkt pro Termin ("Anmeldung ab") ------------- */
.termin-freigabe-marke,
.termin-freigabe-badge {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: #e3eef6; color: #1f5a80; font-size: 0.75rem; font-weight: 600; vertical-align: middle;
}
.termin-freigabe-badge { padding: 0.05rem 0.45rem; font-size: 0.72rem; }
.termin-freigabe-reihe { align-items: end; }
.termin-freigabe-stand {
    margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--farbe-text-schwach);
    align-self: end; padding-bottom: 0.7rem;
}
.termin-freigabe-stand strong { color: #1f5a80; }

/* ============================================================
   Übersichtstabelle: Zebra je Datensatz + Druck-Sonderregeln
   (Anmerkungen als eigene Zeile, Termin-Spalte bei Filter)
   ============================================================ */
/* Bildschirm: Zebra über Klassen statt nth-child, weil die (am Bildschirm
   unsichtbaren) Anmerkungszeilen sonst das Streifenmuster verschieben */
.tabelle-kompakt tbody tr td { background: transparent; }
.tabelle-kompakt tbody tr.zeile-b td { background: #fafbfc; }
.anmerkung-zeile { display: none; }
.termin-kopf-status { display: none; }

body[data-druck="tabelle"] tbody tr:nth-child(even) td { background: transparent !important; }
body[data-druck="tabelle"] tbody tr.zeile-b td { background: #eef1f4 !important; }
/* Anmerkungs-Spalte(n) im Druck weg - stattdessen eigene Zeile, wenn etwas drinsteht */
body[data-druck="tabelle"] th.kopf-textarea,
body[data-druck="tabelle"] td.spalte-textarea { display: none !important; }
body[data-druck="tabelle"] tr.anmerkung-zeile { display: table-row; }
body[data-druck="tabelle"] tr.hat-anmerkung td { border-bottom: none !important; padding-bottom: 1.5pt; }
body[data-druck="tabelle"] tr.hat-anmerkung { break-after: avoid; page-break-after: avoid; }
body[data-druck="tabelle"] tr.anmerkung-zeile td { padding-top: 0; white-space: normal; }
body[data-druck="tabelle"] .anmerkung-eintrag { overflow-wrap: break-word; }
body[data-druck="tabelle"] .anmerkung-eintrag b { font-weight: 700; }
/* Terminfilter aktiv: Termin-Spalte weg ... */
body[data-druck="tabelle"] table.druck-ohne-termin th.kopf-termin,
body[data-druck="tabelle"] table.druck-ohne-termin td.spalte-termin { display: none !important; }
/* ... bzw. nur noch "Warteliste" (Spalte "Status"), falls es Wartelistenplätze gibt */
body[data-druck="tabelle"] table.druck-termin-nur-status .termin-kopf-text,
body[data-druck="tabelle"] table.druck-termin-nur-status .termin-anderer,
body[data-druck="tabelle"] table.druck-termin-nur-status .termin-kurzname,
body[data-druck="tabelle"] table.druck-termin-nur-status .status-angemeldet { display: none !important; }
body[data-druck="tabelle"] table.druck-termin-nur-status .termin-kopf-status { display: inline; }
/* Bildschirm: ausgefüllte Anmerkungen etwas breiter, damit die Zeile nicht sehr hoch wird */
@media screen { .tabelle-kompakt td.spalte-textarea:not(:empty) { min-width: 16rem; } }