/* style.css – Zentrales Stylesheet der App. Farben/Radius als CSS-Variablen
   in :root definiert, damit sich das Farbschema an einer Stelle anpassen
   lässt. Bewusst schlicht gehalten (kein Framework), da es sich um ein
   internes Verwaltungswerkzeug handelt.
   Farbschema (seit v2.4.1): acon-Blauton, passend zur Login-/Registrierungs-
   seite ("Variante A") - vorher ein Grünton, siehe Projekt-Notiz dazu. */
:root {
    --color-bg: #eef6fb;
    --color-surface: #ffffff;
    --color-border: #dce8f0;
    --color-text: #1c2c36;
    --color-muted: #5b7483;
    --color-primary: #1f8fc4;
    --color-primary-dark: #166a96;
    --color-primary-soft: rgba(31, 143, 196, 0.18);
    --color-danger: #b3402a;
    --radius: 10px;
    --radius-lg: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.5;
    /* Heller Verlauf statt Flächenfarbe - derselbe Blauton wie auf der
       Login-/Registrierungsseite, nur dezenter, damit Tabellen/Listen gut
       lesbar bleiben. min-height statt height, damit lange Seiten nicht
       abgeschnitten werden. */
    min-height: 100vh;
    background:
        radial-gradient(1400px 800px at 12% -8%, #d8ecf6 0%, transparent 55%),
        linear-gradient(160deg, #f4fafc 0%, #eef6fb 55%, #e7f1f8 100%);
    background-attachment: fixed;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h1 { font-size: 1.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

/* Kopfleiste: zeigt App-Name + AK-Badge (aktueller Arbeitskreis, siehe src/header.php), Navigation, eingeloggte Person */
.topbar {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 10px -4px rgba(20, 70, 100, 0.35);
}
.topbar-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 10px;
}
/* .brand ist ein <a> - OHNE eigene :hover-Regel würde die globale
   a:hover-Regel oben (Zeile ~40) beim Hovern die Textfarbe auf die
   Primärfarbe umfärben (auf dem dunkelblauen Topbar-Hintergrund kaum
   lesbar). Bewusst kein Farbwechsel, stattdessen - wie bei den übrigen
   Topbar-Links (.topbar nav a:hover) - nur eine Unterstreichung als
   einfaches Highlighting. */
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.brand:hover { color: #fff; text-decoration: underline; }
.ak-badge { font-weight: 400; font-size: 0.85rem; background: rgba(255,255,255,0.18); padding: 2px 9px; border-radius: 20px; margin-left: 8px; }
/* Name der AK-Leitung neben dem Arbeitskreis-Namen in der Topbar - optisch
   etwas dezenter (kein Fettdruck, eigener Ton in Klammern) als der
   AK-Name, damit der Arbeitskreis-Name weiterhin der visuelle Hauptfokus
   bleibt. */
.ak-badge-leiter { background: rgba(255,255,255,0.1); font-style: italic; }
.logo-preview { max-height: 60px; max-width: 200px; display: block; margin: 8px 0; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 6px; background: #fff; }
.topbar nav a {
    color: #eafaf1;
    text-decoration: none;
    margin-right: 16px;
    font-size: 0.95rem;
}
.topbar nav a:hover { text-decoration: underline; }
.topbar-user { color: #eafaf1; font-size: 0.9rem; display: flex; gap: 12px; align-items: center; }
.topbar-user a { color: #fff; }

/* .topbar-collapsible umschließt seit v2.9.0 nav + .topbar-user
   gemeinsam (siehe src/header.php), damit beide zusammen hinter dem
   Hamburger-Button auf dem Handy ein-/ausgeklappt werden können (siehe
   @media max-width:768px weiter unten). Am Desktop display:contents,
   damit nav/.topbar-user weiterhin wie bisher als direkte Flex-Kinder
   von .topbar-inner behandelt werden und sich an dessen
   justify-content:space-between nichts ändert - der umschließende Div
   selbst "verschwindet" dadurch optisch komplett. Der Mini-Kopf mit AK-
   Name/Leitungs-Name ist reiner Mobile-Inhalt und bleibt am Desktop
   verborgen. */
.topbar-collapsible { display: contents; }
.topbar-collapsible-kopf { display: none; }

/* Abmelden-Button in der Topbar: aus Sicherheitsgründen ein <form>/POST
   (siehe public/logout.php), soll optisch aber wie der bisherige reine
   Text-Link wirken - daher hier gezielt auf .topbar-user button
   beschränkt (bewusst NICHT die allgemeine .linklike-Klasse verwendet:
   die wird an anderen Stellen zusammen MIT .btn kombiniert, um wie ein
   echter, farbiger Button auszusehen - button.linklike hätte dort wegen
   höherer CSS-Spezifität die .btn-Formatierung überschrieben). */
.topbar-user button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
}
.topbar-user button:hover { text-decoration: underline; }

/* Weißer Kasten mit Rand – Standard-Container für Formulare und Info-Blöcke */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px -16px rgba(20, 70, 100, 0.25);
}

/* Listen-/Übersichtstabellen (Teilnehmer, Termine, Bescheinigungen) */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 24px -16px rgba(20, 70, 100, 0.25);
}
th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}
th { background: #eaf3f8; font-weight: 600; }
tr:last-child td { border-bottom: none; }

/* Schmale "Zähler"-Spalten in Termin-Tabellen (z.B. "Anmeldungen",
   "Teilnehmer" in dashboard.php/termine_list.php) - der eigentliche
   Zellinhalt ist immer nur ein- bis zweistellig, aber der Spaltentitel
   ist vergleichsweise lang. Fixiert die Spaltenbreite auf ein knappes Maß
   und zentriert die Schrift NUR hier, damit der gesparte Platz automatisch
   den inhaltsreicheren Spalten (Zeit/Ort, Thema, Referent) zugutekommt,
   statt dass die Spaltenbreite vom Titel bestimmt wird. Auf die jeweilige
   <table> zusätzlich .tabelle-fix setzen, damit width hier auch greift
   (ohne table-layout:fixed ignoriert der Browser die width bei langem,
   umbrechendem Kopfzeilentext teilweise). overflow-wrap/hyphens bleiben
   als Sicherheitsnetz, falls der Titel doch mal nicht in eine Zeile passt.
*/
.tabelle-fix { table-layout: fixed; }
/* Dashboard "Nächste Termine": Datum schmal, Platz für die vier
   Schnellzugriffe (Einladung, Anmeldung, Teilnahme, Anwesenheitsliste) */
.tabelle-fix .col-datum { width: 96px; }
.tabelle-fix .col-aktionen { width: 172px; }
.col-anzahl {
    width: 100px;
    text-align: center;
    font-size: 0.82rem;
    padding-left: 6px;
    padding-right: 6px;
    overflow-wrap: break-word;
    hyphens: auto;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.actions a, .actions button.linklike {
    font-size: 0.9rem;
}

form.inline { display: inline; }

/* Formularfelder */
label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 0.9rem; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], input[type=number], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: #fff;
    color: var(--color-text);
    transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=date]:focus,
input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
}
/* Breite der Formular-Boxen (Konto, Einstellungen, Systemverwaltung,
   Zwei-Faktor ...): seit v2.15.2 640 px statt 480 px - auf dem Handy ohnehin
   volle Breite. .form-breite = dieselbe Breite für reine Info-Kästen. */
.form-row, .form-breite { max-width: 640px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 400; }
.feld-inaktiv { opacity: 0.45; }
.checkbox-row input { width: auto; }

/* Anmeldung erfassen (public/anmeldung.php): pro Person eine Zeile mit
   Anmelde-Häkchen + Name, "bezahlt"-Häkchen und kurzem Notizfeld. Am Desktop
   alles in einer Reihe, auf dem Handy bricht das Notizfeld unter den Namen
   um (siehe Media Query unten). */
.anmeldung-zeile { flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; border-bottom: 1px solid var(--color-border, #e3e8ee); }
/* "bezahlt" + Notiz nur bei angemeldeten Personen (Klasse .angemeldet, per
   assets/app.js beim Umhaken live umgeschaltet). */
.anmeldung-zeile:not(.angemeldet) .anmeldung-bezahlt,
.anmeldung-zeile:not(.angemeldet) input.anmeldung-notiz { display: none; }
.gruppen-titel { font-size: 0.95rem; margin: 18px 0 4px; color: var(--color-muted); text-transform: none; }
.gruppen-titel:first-child { margin-top: 4px; }
.anmeldung-name { display: flex; align-items: center; gap: 8px; flex: 0 0 260px; }
.anmeldung-bezahlt { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.checkbox-row input.anmeldung-notiz { width: auto; flex: 1 1 220px; min-width: 0; padding: 6px 10px; }
@media (max-width: 768px) {
    .anmeldung-name { flex: 1 1 0; min-width: 0; }
    .checkbox-row input.anmeldung-notiz { flex: 1 1 100%; }
}

/* Buttons: .btn ist der Standard-Stil (primäre Farbe), Varianten .btn-secondary/.btn-danger/.btn-small kombinierbar */
.btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    margin-top: 16px;
    box-shadow: 0 6px 16px -8px var(--color-primary-soft);
    transition: filter .15s, transform .1s, box-shadow .15s;
}
/* Bewusst KEIN Farbwechsel bei :hover (weder Hintergrund- noch Textfarbe) -
   vorher wurde der Hintergrund beim Hovern dunkler UND gleichzeitig
   überschrieb die globale a:hover-Regel oben (Zeile ~40) die weiße
   Buttonschrift mit der Primärfarbe (höhere Spezifität als .btn), wodurch
   der Text auf dem dann dunkleren Blau kaum noch lesbar war. Jetzt nur ein
   dezentes, farbneutrales Aufhellen (filter: brightness) plus Anheben/
   Schatten als Hover-Hinweis - Text bleibt bei JEDEM Button (auch den
   Varianten unten) immer in seiner Ausgangsfarbe. */
.btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 18px -8px var(--color-primary-soft); }
.btn-secondary { background: #566270; }
.btn-danger { background: var(--color-danger); }
.btn-small { padding: 5px 10px; font-size: 0.85rem; margin-top: 0; }

/* Drag&Drop-Fläche für Datei-Uploads (siehe data-dropzone-for in app.js) */
.dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    color: #666;
    background: #fafafa;
    transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone-aktiv {
    border-color: var(--color-primary);
    background: #eaf4fa;
}
.dropzone-link { color: var(--color-primary); text-decoration: underline; }
.dropzone-dateiname { margin: 8px 0 0; font-weight: 600; color: var(--color-text); min-height: 1.2em; }

/* Ergebnis-Anzeige des Verbindungstests (siehe data-connection-test in app.js) */
.test-ergebnis { margin-left: 10px; font-weight: 600; }
.test-erfolg { color: #2e7d32; }
.test-fehler { color: var(--color-danger); }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }

/* Flash-Meldungen (Erfolg/Fehler), siehe src/functions.php::flash()/get_flashes() */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 0.9rem; }
.flash-success { background: #e2f3e9; color: #205c3b; border: 1px solid #b9e0c8; }
.flash-error { background: #fbe7e3; color: #7d2e1c; border: 1px solid #f0c1b6; }

.muted { color: var(--color-muted); font-size: 0.9rem; }
/* .pill: kleine Status-/Hinweis-Chips (z.B. "bereits eingeladen",
   "extern", "Referent"). Erscheinen oft NICHT in einer weißen .card
   (z.B. in der Teilnehmer-Auswahl von einladung_form.php, direkt auf
   dem Seitenhintergrund) - deshalb bewusst eine fast weiße Fläche MIT
   Rahmen statt einer reinen Farbfläche, damit der Chip auf dem seit
   v2.4.1 blauen Verlaufshintergrund genauso gut lesbar ist wie auf
   Weiß (vorher: helles Blau auf blauem Hintergrund, kaum Kontrast). */
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; background: #ffffff; border: 1px solid var(--color-border); color: #3a4a57; }
.pill-referent { background: #fdf1d6; border-color: #f3dfa8; color: #7a5b0e; }

/* Zentrierte, schmale Box für Hinweisseiten (z.B. Wartungsmodus, siehe
   src/wartung_anzeige.php) - login.php/register.php/die Passwort-Seiten
   nutzen inzwischen das .auth-*-Layout weiter unten. */
.login-wrap { max-width: 380px; margin: 60px auto; }

/* ---------------------------------------------------------------------
   Login-/Registrierungsseite ("Variante A"): eigener, vollflächiger
   Seitenrahmen mit hellblauem Verlauf (angelehnt an das acon-Logo) statt
   des normalen .container/.topbar-Layouts. Wird nur aktiv, wenn
   header.php mit $authPage = true eingebunden wurde (siehe login.php/
   register.php). --auth-accent/--auth-accent-soft sind bewusst als
   CSS-Variablen ausgelagert, damit Login (Standard, blau) und
   Registrierung (etwas kräftigeres Blau) dieselben Regeln mit je eigener
   Akzentfarbe nutzen können, ohne alles doppelt zu pflegen. */
.auth-main {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    /* untereinander: Hinweise (z. B. "wegen Inaktivität abgemeldet")
       stehen über der Karte statt links daneben */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(1100px 650px at 18% 8%, #bfe1f5 0%, transparent 60%),
        linear-gradient(160deg, #eaf5fb 0%, #dcedf8 46%, #cfe6f4 100%);
    --auth-accent: #1f8fc4;
    --auth-accent-soft: rgba(31, 143, 196, 0.28);
}
.auth-main .flash { width: 100%; max-width: 440px; margin: 0 auto 16px; box-sizing: border-box; }

.auth-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 36px 36px;
    box-shadow: 0 30px 70px -20px rgba(20, 70, 100, 0.30);
    box-sizing: border-box;
}
.auth-card-wide { max-width: 540px; padding: 40px 40px 34px; }

.auth-logo { display: block; height: 48px; width: auto; margin: 0 auto 10px; }
.auth-card-wide .auth-logo { height: 42px; margin-bottom: 8px; }

.auth-title {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 22px;
    color: #142b38;
    text-align: center;
    line-height: 1.3;
}
.auth-card-wide .auth-title { font-size: 21px; line-height: 1.35; }
.auth-subtitle { margin: 0 0 22px; font-size: 14px; color: #5b7483; text-align: center; }
.auth-card-wide .auth-subtitle { margin-bottom: 24px; font-size: 13.5px; }

.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card-wide form { gap: 14px; }
.auth-card label { margin: 0 0 6px; font-weight: 600; font-size: 13px; color: #2c3e48; }
.auth-card-wide label { font-size: 12.5px; }
.auth-card p.muted { font-size: 13px; }

.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password] {
    padding: 13px 14px;
    border-radius: 10px;
    border: 1.5px solid #e1e6e4;
    font-size: 15px;
    color: #1b2b27;
    background: #fafcfb;
    transition: border-color .15s, box-shadow .15s;
}
.auth-card-wide input[type=text],
.auth-card-wide input[type=email],
.auth-card-wide input[type=password] { padding: 12px 14px; font-size: 14.5px; }
.auth-card input[type=text]:focus,
.auth-card input[type=email]:focus,
.auth-card input[type=password]:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 4px var(--auth-accent-soft);
    background: #fff;
}

/* Zweispaltige Reihen in der Registrierung (Vorname/Nachname, E-Mail/
   Wiederholung, Passwort/Wiederholung) - auf schmalen Bildschirmen
   einspaltig. */
.auth-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field label { margin: 0; }

.auth-btn {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: var(--auth-accent);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px var(--auth-accent-soft);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.auth-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.auth-links { text-align: center; margin-top: 16px; font-size: 13.5px; color: #5b7483; }
.auth-links a { color: var(--auth-accent); text-decoration: none; }
.auth-links a:hover { color: #166a96; text-decoration: underline; }
.auth-links-bordered { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e4eef4; }

@media (max-width: 480px) {
    .auth-main { padding: 24px 14px; }
    .auth-card, .auth-card-wide { padding: 30px 22px 26px; border-radius: 16px; }
    .auth-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------
   Mobile-Anpassungen (seit v2.9.0): Hamburger-Menü in der Topbar und
   Karten-Layout für alle Übersichtstabellen auf schmalen Bildschirmen -
   auf echten Handys liefen bisher sowohl die Navigation (zu viele Links
   für eine Zeile) als auch Tabellen mit mehreren Spalten (Dashboard,
   AK-Termine, Teilnehmer, ...) sichtbar übereinander/ineinander.
   Einheitlicher Breakpoint 768px (Smartphones UND Tablets im
   Hochformat) - am Desktop (>768px) bleibt alles unverändert wie bisher.
   Siehe src/header.php für das Hamburger-Markup und assets/app.js für
   das Auf-/Zuklappen (data-nav-toggle, CSP erlaubt kein Inline-JS).
   --------------------------------------------------------------------- */

/* Hamburger-Button: drei Balken aus <span>, keine extra Icon-Font/SVG
   nötig - am Desktop per Default unsichtbar, erst in der @media-Regel
   unten eingeblendet, damit sich an der normalen Desktop-Topbar nichts
   ändert. */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .hamburger-btn { display: flex; }

    /* Die beiden Badges (Arbeitskreis-Name, Name der Leitung) würden auf
       schmalen Bildschirmen zusammen mit "AK-Verwaltung" und dem
       Hamburger-Button beengt/mehrzeilig wirken - "AK-Verwaltung" allein
       reicht auf dem Handy, beide Namen stehen weiterhin ausführlich
       oben im aufgeklappten Menü (siehe .topbar-collapsible-kopf unten). */
    .brand .ak-badge { display: none; }

    /* Nav + Abmelden-Bereich stehen in einem gemeinsamen Klapp-Container
       (.topbar-collapsible, siehe header.php) - auf dem Handy
       standardmäßig eingeklappt, erst nach Klick auf den Hamburger-Button
       sichtbar (Klasse .offen wird per app.js gesetzt). */
    .topbar-collapsible {
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
    .topbar-collapsible.offen { display: flex; }
    .topbar-collapsible-kopf {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 4px 10px;
        font-size: 0.9rem;
    }
    .topbar nav { display: flex; flex-direction: column; gap: 2px; }
    .topbar nav a {
        margin-right: 0;
        padding: 10px 4px;
        border-radius: var(--radius);
    }
    .topbar nav a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
    .topbar-user { justify-content: space-between; padding: 10px 4px 2px; }
}

/* -----------------------------------------------------------------
   Karten-Layout für Übersichtstabellen auf dem Handy: Klasse
   .tabelle-responsiv auf das jeweilige <table>-Element setzen UND an
   jeder <td> ein data-label="<Spaltentitel>" (siehe jeweilige
   .php-Datei) - CSS zeigt diesen Titel per ::before als kleines Label
   vor dem Wert an, <thead> wird komplett ausgeblendet (die Titel stehen
   ja jetzt vor jedem Wert). Jede Zeile wird dadurch zu einer eigenen
   Karte statt einer schmalen Tabellenzeile - genau das vermeidet das
   Übereinanderlaufen mehrerer Spalten, das auf echten Handys beobachtet
   wurde. Zellen OHNE data-label (typischerweise die Aktionen-Spalte mit
   mehreren Buttons) bleiben linksbündig ohne Label-Zeile davor.
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    table.tabelle-responsiv { table-layout: auto; }
    /* Die Kopfzeile besteht in den Templates durchgängig aus einer
       einfachen <tr> mit <th>-Zellen OHNE umschließendes <thead> (siehe
       z.B. public/dashboard.php, public/teilnehmer_list.php) - :has(th)
       erkennt diese Zeile unabhängig davon zuverlässig und blendet sie
       aus (die Spaltentitel stehen im Karten-Layout ja bereits per
       data-label vor jedem Wert, siehe unten). */
    table.tabelle-responsiv tr:has(th) { display: none; }
    table.tabelle-responsiv,
    table.tabelle-responsiv tbody,
    table.tabelle-responsiv tr,
    table.tabelle-responsiv td {
        display: block;
        width: 100%;
    }
    table.tabelle-responsiv tr {
        border-bottom: 8px solid var(--color-bg);
        padding: 8px 0;
    }
    table.tabelle-responsiv tr:last-child { border-bottom: none; }
    /* Bewusst kein Flex-Layout: Dort würde jedes Stück Zellinhalt (Name,
       <br>, "extern"-Pill, Ort ...) ein eigener Block, und z.B. die Pill
       rutschte vom Namen weg in die erste Reihe. Stattdessen schwebt das
       Label links (float), der Inhalt fließt rechtsbündig ganz normal. */
    table.tabelle-responsiv td {
        border-bottom: none;
        padding: 5px 14px;
        display: block;
        text-align: right;
        overflow-wrap: anywhere;
    }
    table.tabelle-responsiv td::after { content: ""; display: block; clear: both; }
    table.tabelle-responsiv td[data-label]::before {
        content: attr(data-label);
        float: left;
        margin-right: 12px;
        font-weight: 600;
        color: var(--color-muted);
        font-size: 0.82rem;
        text-align: left;
    }
    table.tabelle-responsiv td:not([data-label]) { text-align: left; }
    table.tabelle-responsiv td.actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
    }
    table.tabelle-responsiv td.actions::after { content: none; }
    /* .col-anzahl (feste schmale Breite, siehe weiter oben) ergibt im
       Karten-Layout keinen Sinn mehr - jede "Zelle" ist jetzt ohnehin
       volle Breite. */
    table.tabelle-responsiv .col-anzahl { width: auto; text-align: right; padding-left: 14px; }
    table.tabelle-responsiv .col-datum, table.tabelle-responsiv .col-aktionen { width: auto; }
}

/* Liste der gewählten/gespeicherten PDF-Anhänge (Freitext-Mail, Termin-Einladung) */
.anhang-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.anhang-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-border, #e2e8f0); }
.anhang-liste li span { min-width: 0; overflow-wrap: anywhere; }
.anhang-liste .btn-small { padding: 4px 10px; font-size: 0.85rem; flex: 0 0 auto; }
.anhang-liste label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.anhang-liste label input { width: auto; margin: 0; }

/* Fußzeile mit Datenschutz/Impressum (src/footer.php) - auf jeder Seite */
.seiten-fuss { text-align: center; padding: 18px 16px 24px; font-size: 0.85rem; color: var(--color-muted, #6b7785); }
.seiten-fuss a { color: inherit; text-decoration: underline; margin: 0 6px; }
.auth-hinweis { font-size: 0.85rem; color: var(--color-muted, #6b7785); margin: 4px 0 12px; line-height: 1.4; }

/* Datenschutzerklärung (public/datenschutz.php) */
.rechtstext { line-height: 1.55; }
.rechtstext h2 { font-size: 1.15rem; margin: 22px 0 8px; }
.rechtstext h3 { font-size: 1rem; margin: 16px 0 6px; }
.rechtstext blockquote { margin: 12px 0; padding: 8px 12px; border-left: 3px solid var(--color-primary); background: rgba(31, 143, 196, 0.06); }
.tabelle-scroll { overflow-x: auto; margin: 8px 0 12px; }
.rechtstext-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rechtstext-tabelle th, .rechtstext-tabelle td { border: 1px solid var(--color-border, #dfe6ee); padding: 6px 8px; text-align: left; vertical-align: top; }
.rechtstext-tabelle th { background: rgba(31, 143, 196, 0.08); }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
/* Auf Login/Registrierung liegt die Fußzeile auf dem Verlaufshintergrund statt darunter */
.auth-main:has(+ .seiten-fuss) { padding-bottom: 72px; }
.auth-main + .seiten-fuss { position: relative; margin-top: -64px; }
.pill-warnung { background: #fdecea; border-color: #f5c2bd; color: #8a2a1f; }
.inline-form { display: inline; margin: 0; }
.inline-form .btn { margin-top: 0; }

/* Seite "Protokolle" (public/protokolle.php) */
.reiter { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid var(--color-border); flex-wrap: wrap; }
.reiter a { padding: 8px 16px; border-radius: var(--radius) var(--radius) 0 0; color: var(--color-muted, #566270); font-weight: 600; text-decoration: none; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.reiter a:hover { color: var(--color-primary); text-decoration: none; }
.reiter a.aktiv { color: var(--color-primary); border-bottom-color: var(--color-primary); background: var(--color-surface); }
.umschalter { display: inline-flex; border: 1.5px solid var(--color-primary); border-radius: var(--radius); overflow: hidden; margin: 0 0 14px; }
.umschalter a { padding: 7px 16px; font-weight: 600; font-size: 0.92rem; color: var(--color-primary); text-decoration: none; background: var(--color-surface); }
.umschalter a + a { border-left: 1.5px solid var(--color-primary); }
.umschalter a:hover { text-decoration: none; filter: brightness(0.97); }
.umschalter a.aktiv { background: var(--color-primary); color: #fff; }
.filter-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 16px; align-items: end; }
.filter-raster label { margin-top: 10px; }
.filter-raster .filter-haken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 24px; }
.filter-raster .filter-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.protokoll-tabelle td { vertical-align: top; font-size: 0.88rem; }
.protokoll-tabelle .nowrap { white-space: nowrap; }
.protokoll-tabelle .umbruch { overflow-wrap: anywhere; }
.protokoll-tabelle .klein { font-size: 0.78rem; color: var(--color-muted, #566270); }
.seiten-navigation { display: flex; gap: 8px; margin: 12px 0; }
.zusammenfassung-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.zusammenfassung-block { margin-bottom: 0; }
.zusammenfassung-block h3 { margin: 0 0 8px; font-size: 1rem; }
.zaehl-tabelle { border: none; background: transparent; box-shadow: none; border-radius: 0; }
.zaehl-tabelle td { padding: 3px 6px; border-bottom: 1px solid var(--color-border); font-size: 0.86rem; overflow-wrap: anywhere; }
.zaehl-tabelle td.zahl { text-align: right; width: 4.5em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 768px) {
    .protokoll-tabelle .nowrap { white-space: normal; }
    .zusammenfassung-raster { grid-template-columns: 1fr; }
}

/* Live-Zähler der Empfänger-Auswahl (v2.14.6, siehe app.js) */
.auswahl-zaehler { margin: 4px 0 8px; font-weight: 600; color: var(--color-primary); min-height: 1.2em; }
.auswahl-zaehler-warnung { color: #7d2e1c; background: #fbe7e3; border: 1px solid #f0c1b6; border-radius: 6px; padding: 6px 10px; }

/* Zwei-Faktor-Anmeldung (v2.15.0) */
.zf-qr img { display: block; margin: 10px 0; background: #fff; border: 1px solid #d6dee6; border-radius: 6px; image-rendering: pixelated; max-width: 100%; height: auto; }
.zf-schluessel { font-size: 1rem; letter-spacing: 0.05em; word-break: break-all; }
.zf-codes { border: 2px solid #f0c1b6; background: #fffaf8; }
.zf-code-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 16px; }
.zf-code-liste code { font-size: 1.05rem; }

/* Platzhalter-Hilfe in den Einstellungen (v2.17.4): je Zeile
   „Platzhalter → Beispiel (Beschreibung)“; auf dem Handy untereinander. */
.platzhalter-hilfe { margin: 8px 0 12px; }
.platzhalter-hilfe p { margin: 8px 0 0; }
.platzhalter-liste {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 10px;
    margin: 4px 0 0;
    font-size: 0.88rem;
}
.platzhalter-liste dt, .platzhalter-liste dd { margin: 0; }
.platzhalter-liste dd { overflow-wrap: anywhere; color: var(--color-text); }
.platzhalter-info { color: var(--color-muted); }
@media (max-width: 560px) {
    .platzhalter-liste { grid-template-columns: 1fr; gap: 0; }
    .platzhalter-liste dd { padding: 0 0 6px 14px; }
}
.text-fehler { color: var(--color-danger); font-weight: 600; }