/* NTSFTP — Oberflaeche
 * ======================================================================
 *
 * Token-System: Alle wiederkehrenden Werte (Abstaende, Schriftgroessen,
 * Farben, Radien, Schatten, Uebergaenge, Breiten) sind als Custom
 * Properties in :root deklariert und werden im gesamten Stylesheet ueber
 * var(--…) referenziert. Ziel: eine Aenderung an einer Stelle wirkt
 * konsistent ueberall, und Werte lassen sich pro Farbmodus (ab S5) bzw.
 * responsiv (ab S6) ueberschreiben, ohne Selektoren anzufassen.
 *
 * Farbmodus: Die Palette steht nur EINMAL da. Jedes Farbtoken ist doppelt
 * deklariert — erst der Hellwert allein, dann derselbe Wert in light-dark().
 * Browser ohne light-dark() verwerfen die zweite Zeile als ungueltig und
 * behalten die erste; die Anwendung bleibt dort hell und funktionsfaehig.
 * Ohne diesen Rueckfall waere var(--…) dort leer und die Seite unlesbar.
 * Welcher Zweig gilt, entscheidet allein color-scheme (siehe Abschnitt 1b).
 *
 * Breakpoint-Konvention (bewusst KEINE Custom Properties):
 *   Custom Properties werden von der Media-Query-Engine nicht ausgewertet
 *   — `@media (min-width: var(--irgendwas))` ist ungueltig. Breakpoints
 *   stehen deshalb als Zahlenwerte direkt in den @media-Regeln, hier nur
 *   als Konvention dokumentiert:
 *     - mobile-first, min-width: 600px / 900px / 1200px
 *     - zusaetzlich (pointer: coarse) fuer Touch-Bedienung
 *     - zusaetzlich (prefers-reduced-motion: reduce) fuer Bewegung
 *   Die eigentlichen @media-Regeln kommen erst in S6.
 *
 * Gliederung dieser Datei:
 *   1. Tokens (:root)
 *   2. Grundlagen
 *   3. Kopf und Navigation
 *   4. Bausteine
 *   5. Meldungen
 *   6. Formulare
 *   7. Listen und Tabellen
 *   8. Marken
 *   9. Fehlerseite
 *  10. Hilfsklassen (Sprunglink, nur-vorlesen)
 *  11. Eingabeart und Bewegung
 *  12. Einwilligung und Rechtsverweise
 */

/* === 1. Tokens ========================================================= */

:root {
    /* --- Marken-Anker: nie invertiert, unabhaengig vom Farbmodus ------- */
    --marke-blau: #003366;
    --marke-blau-2: #314F6F;
    --marke-grau: #575756;

    /* --- Logo: folgt dem Farbmodus, damit auf dunklem Grund kein weisser
     * Kasten entsteht. Kein filter: invert() — das macht aus #003366 ein
     * giftiges Orange und waere ein Markenverstoss. */
    --logo-blau: #003366;
    --logo-blau: light-dark(#003366, #ffffff);
    --logo-zusatz: #000000;
    --logo-zusatz: light-dark(#000000, #e6ebf2);

    /* --- Flaechen -------------------------------------------------------- */
    --grund: #f5f7fa;
    --grund: light-dark(#f5f7fa, #0e141b);
    --grund-versenkt: #eef1f6;             /* Tabellenkopf, code */
    --grund-versenkt: light-dark(#eef1f6, #121a23);
    --flaeche: #ffffff;
    --flaeche: light-dark(#ffffff, #161e27);

    /* --- Raender ----------------------------------------------------------
     * --rand ist rein dekorativ (Kartenrahmen, Trenner) und traegt keine
     * Kontrastgarantie. Fuer Bedienelemente (Formularrahmen, Knoepfe) gilt
     * --rand-stark; beide Modi liegen dort ueber den 3:1 aus WCAG 1.4.11.
     */
    --rand: #d5dce5;                        /* nur dekorativ */
    --rand: light-dark(#d5dce5, #2b3643);
    --rand-stark: #7d8794;                  /* hell 3,64:1 · dunkel 3,72:1 */
    --rand-stark: light-dark(#7d8794, #6b7885);

    /* --- Text -------------------------------------------------------------- */
    --text: #1a2430;                        /* hell 15,7:1 · dunkel 15,5:1 */
    --text: light-dark(#1a2430, #e6ebf2);
    --text-schwach: #575756;                /* hell 7,24:1 (= CD-Grau) · dunkel 8,24:1 */
    --text-schwach: light-dark(#575756, #a3aebd);

    /* --- Akzent --------------------------------------------------------------
     * #003366 liegt auf dunklem Grund bei 1,49:1 und ist dort als Akzentfarbe
     * unbrauchbar. Der Dark-Mode-Wert #8fb8e6 (8,96:1) ist eine Ableitung
     * derselben Blau-Rampe, kein eigener CD-Ton. Der unveraenderte Markenwert
     * bleibt als --marke-blau erhalten und wird nur fuers Logo verwendet.
     */
    --akzent: #003366;                      /* hell 12,61:1 · dunkel 8,96:1 */
    --akzent: light-dark(#003366, #8fb8e6);
    --akzent-stark: #0a4680;                /* Hover */
    --akzent-stark: light-dark(#0a4680, #b3d1f0);
    --akzent-schwach: #dde7f2;              /* Tint */
    --akzent-schwach: light-dark(#dde7f2, #1b2b3d);
    --akzent-text: #ffffff;                 /* Text auf --akzent */
    --akzent-text: light-dark(#ffffff, #0e141b);

    /* --- Fokus -------------------------------------------------------------- */
    --fokus: #003366;
    --fokus: light-dark(#003366, #8fb8e6);

    /* --- Status: Erfolg / Fehler / Hinweis / Gefahr -------------------------- */
    --erfolg-grund: #e6f4ea;
    --erfolg-grund: light-dark(#e6f4ea, #142a1d);
    --erfolg-text: #1a5c33;                 /* hell 7,05:1 · dunkel 9,18:1 */
    --erfolg-text: light-dark(#1a5c33, #8fd9a8);
    --fehler-grund: #fdeaea;
    --fehler-grund: light-dark(#fdeaea, #33191b);
    --fehler-text: #a4232a;                 /* hell 6,36:1 · dunkel 8,46:1 */
    --fehler-text: light-dark(#a4232a, #f4a7ab);
    --hinweis-grund: #fdf6e3;
    --hinweis-grund: light-dark(#fdf6e3, #2e2617);
    --hinweis-text: #6b5518;                /* hell 6,63:1 · dunkel 9,76:1 */
    --hinweis-text: light-dark(#6b5518, #e8cf8a);
    --gefahr: #a4232a;
    --gefahr: light-dark(#a4232a, #f08a90);

    /* --- Notfall-Zugang ------------------------------------------------------
     * Eigene Tokens statt --fehler-grund/--fehler-text: das Banner meldet kein
     * Ergebnis einer Aktion, sondern einen Zustand, der bestehen bleibt, bis
     * ein Administrator angelegt ist. Es muss deshalb kraeftiger stehen als
     * eine Meldungsflaeche und traegt hellen Text auf dunklem Grund.
     */
    --notfall-grund: #a4232a;               /* --notfall-text darauf: hell 6,36:1 · dunkel 8,17:1 */
    --notfall-grund: light-dark(#a4232a, #5c1418);
    --notfall-text: #ffffff;
    --notfall-text: light-dark(#ffffff, #f4a7ab);

    /* --- Tabellenzustaende --------------------------------------------------
     * Eigene Tokens statt Wiederverwendung von --fehler-grund/--hinweis-grund:
     * eine Meldungsflaeche darf kraeftig sein, eine Tabellenzeile muss den
     * normalen Zeilentext weiterhin tragen. Im Dark Mode brauchen beide
     * deshalb unterschiedliche Werte.
     */
    --zeile-abgelehnt: #fdeaea;             /* --text darauf: hell 13,5:1 · dunkel 14,3:1 */
    --zeile-abgelehnt: light-dark(#fdeaea, #2a1618);
    --zeile-fehler: #fdf6e3;
    --zeile-fehler: light-dark(#fdf6e3, #2a2314);

    /* --- Abstand --------------------------------------------------------------
     * Werte ohne exakte Entsprechung im Bestand (6px, 10px, 14px, 20px)
     * werden beim Umbau auf den naechstgroesseren Schritt aufgerundet
     * (z. B. 14px -> --abstand-4), nicht abgerundet.
     */
    --abstand-1: 0.25rem;   /* 4px */
    --abstand-2: 0.5rem;    /* 8px */
    --abstand-3: 0.75rem;   /* 12px */
    --abstand-4: 1rem;      /* 16px */
    --abstand-5: 1.5rem;    /* 24px */
    --abstand-6: 2rem;      /* 32px */

    /* --- Typografie ------------------------------------------------------------ */
    --text-s: 0.8125rem;    /* 13px */
    --text-m: 1rem;         /* 16px */
    --text-l: 1.0625rem;    /* 17px */
    --text-xl: 1.375rem;    /* 22px */
    --text-xxl: 3.5rem;     /* 56px */
    --zeilenhoehe: 1.5;
    --zeilenhoehe-eng: 1.25;
    --fett-halb: 600;
    --fett: 700;

    /* --- Radius --------------------------------------------------------------- */
    --radius-klein: 4px;
    --radius: 6px;           /* Bestandswert bleibt */
    --radius-gross: 10px;
    --radius-rund: 999px;    /* fuer .marke-recht */

    /* --- Schatten ---------------------------------------------------------------
     * Nur die Farbe ist ein eigenes Token, die Geometrie bleibt fest:
     * light-dark() ist in der box-shadow-Kurzschreibweise nicht gueltig
     * (wird erst mit den einzelnen Komponenten ausgewertet) — relevant fuer S5.
     */
    --schatten-farbe: rgba(26, 36, 48, 0.12);
    --schatten-farbe: light-dark(rgb(16 24 40 / 0.10), rgb(0 0 0 / 0.55));
    --schatten-1: 0 1px 2px var(--schatten-farbe);
    --schatten-2: 0 2px 8px var(--schatten-farbe);
    --schatten-3: 0 8px 24px var(--schatten-farbe);

    /* --- Bewegung --------------------------------------------------------------- */
    --dauer-schnell: 120ms;
    --dauer: 200ms;

    /* --- Breiten ------------------------------------------------------------------ */
    --breite-inhalt: 1100px;
    --breite-formular: 520px;
    --breite-karte: 400px;
}

/* === 1b. Farbmodus ======================================================
 *
 * color-scheme erledigt die gesamte Umschaltung: light-dark() loest gegen den
 * berechneten color-scheme-Wert auf. Drei Zustaende, zwei Zeilen Ueberschrift,
 * keine doppelt gepflegte Palette.
 *
 * Ohne data-thema gilt "light dark" — also die Systemeinstellung (= Auto).
 * thema.js setzt data-thema nur, wenn der Benutzer bewusst gewaehlt hat.
 *
 * Der @supports-Riegel ist notwendig: ohne ihn wuerde ein Browser ohne
 * light-dark() zwar color-scheme verstehen und seine nativen Steuerelemente
 * und Scrollbalken dunkel zeichnen, unsere Farbtokens blieben aber auf den
 * Hellwerten stehen — dunkle Scrollbalken an heller Seite.
 */
@supports (color: light-dark(#000, #fff)) {
    :root                      { color-scheme: light dark; }
    :root[data-thema="hell"]   { color-scheme: light; }
    :root[data-thema="dunkel"] { color-scheme: dark; }
}

/* === 2. Grundlagen ====================================================== */

* { box-sizing: border-box; }

/* Das hidden-Attribut muss jede Layout-Regel schlagen.
 *
 * [hidden] { display: none } steht nur im User-Agent-Stylesheet, und jede
 * Autor-Regel mit display gewinnt dagegen — unabhaengig von der Spezifitaet.
 * Ohne diese Zeile blieben .thema-schalter, .fortschritt und .einwilligung
 * trotz hidden sichtbar, also genau das Gegenteil dessen, was das Markup
 * zusichert: ein Farbschalter ohne JavaScript, der nichts tut.
 *
 * !important ist hier bewusst gesetzt und keine Nachlaessigkeit: hidden ist
 * eine Aussage darueber, ob ein Element ueberhaupt da ist. Das darf keine
 * Layout-Regel ueberstimmen. */
[hidden] { display: none !important; }

/* html auf 100% statt body auf feste px: Browser-Zoom wirkt wieder, und iOS
 * zoomt Eingabefelder unter 16px beim Fokus automatisch hinein — bei
 * --text-m (16px) auf body bleibt das aus. */
html { font-size: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: var(--text-m);
    line-height: var(--zeilenhoehe);
    color: var(--text);
    background: var(--grund);
}

body.zentriert {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--abstand-4);
}

/* Anmeldeseite: Logo statt Ueberschrift, darunter der Claim. */
.anmelde-titel { display: flex; justify-content: center; margin: 0 0 var(--abstand-2); }

.claim {
    margin: 0 0 var(--abstand-5);
    color: var(--text-schwach);
    font-size: var(--text-s);
    text-align: center;
}

/* Anmeldeseite: Karte und Farbschema-Schalter untereinander, zentriert. */
.anmeldebereich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--abstand-4);
    width: 100%;
    max-width: var(--breite-karte);
}

/* === 3. Kopf und Navigation ============================================= */

/* Kein Burger-Menue: es gibt hoechstens vier Navigationslinks, Nicht-Admins
 * sehen genau einen. Ein Burger braeuchte Fokusfalle, aria-expanded, Escape-
 * und Aussenklick-Behandlung — viel Mechanik, um vier Links zu verstecken,
 * die problemlos sichtbar bleiben koennen. Stattdessen bricht der Kopf auf
 * schmalen Bildschirmen in zwei Zeilen um. */
.kopf {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "marke werkzeuge"
        "navigation navigation";
    align-items: center;
    gap: var(--abstand-2) var(--abstand-4);
    padding: var(--abstand-2) var(--abstand-4);
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    box-shadow: var(--schatten-1);
}

.kopf .marke { grid-area: marke; }
.kopf .werkzeuge { grid-area: werkzeuge; }
.kopf .navigation { grid-area: navigation; }

.werkzeuge { display: flex; align-items: center; gap: var(--abstand-3); }

@media (min-width: 900px) {
    .kopf {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "marke navigation werkzeuge";
        gap: var(--abstand-5);
        padding: var(--abstand-3) var(--abstand-5);
    }
}

.marke {
    display: flex;
    align-items: center;
    font-weight: var(--fett-halb);
    font-size: var(--text-l);
    line-height: var(--zeilenhoehe-eng);
    color: var(--text);
    text-decoration: none;
}

/* --- Logo -------------------------------------------------------------------
 * Seitenverhaeltnis der Vorlage: 964 x 455 (~2,12:1).
 *
 * Umschaltung ueber zwei explizite Regeln statt light-dark(): die Funktion
 * akzeptiert nur <color>, keine <image>-Werte. Das ist die einzige Stelle im
 * Stylesheet, an der die Palette doppelt gefuehrt werden muss.
 *
 * Achtung beim Austausch: diese Pfade laufen nicht ueber Assets::url(), haben
 * also kein ?v=. Ein neues Logo braucht deshalb einen neuen Dateinamen
 * (logo-nts-2.png), sonst haelt der immutable-Cache das alte fest.
 */
.marke-logo {
    display: block;
    width: 5.3rem;
    height: 2.5rem;
    background: center / contain no-repeat url("/assets/logo-nts.png");
}

.marke-logo-gross { width: 8.5rem; height: 4rem; }

:root[data-thema="dunkel"] .marke-logo {
    background-image: url("/assets/logo-nts-hell.png");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) .marke-logo {
        background-image: url("/assets/logo-nts-hell.png");
    }
}

.navigation { display: flex; flex-wrap: wrap; gap: var(--abstand-1); }

.navigation a {
    padding: var(--abstand-2) var(--abstand-3);
    color: var(--akzent);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color var(--dauer-schnell) ease;
}

.navigation a:hover { background: var(--grund-versenkt); text-decoration: underline; }

.navigation a[aria-current="page"] {
    background: var(--akzent-schwach);
    font-weight: var(--fett-halb);
}

.abmelden { display: flex; align-items: center; gap: var(--abstand-3); margin: 0; }
.benutzer { color: var(--text-schwach); }

/* Auf sehr schmalen Geraeten weicht der Benutzername dem Abmelden-Knopf. */
@media (max-width: 479px) {
    .benutzer { display: none; }
}

.inhalt { max-width: var(--breite-inhalt); margin: var(--abstand-5) auto; padding: 0 var(--abstand-4); }
.fuss { padding: var(--abstand-5); color: var(--text-schwach); text-align: center; }

@media (min-width: 600px) {
    .inhalt { padding: 0 var(--abstand-5); }
}

/* === 3b. Farbschema-Schalter =============================================
 *
 * Segmentierte Schaltergruppe (Auto / Hell / Dunkel). Im Markup steht sie mit
 * hidden — thema.js blendet sie erst ein. Ohne JavaScript bleibt also kein
 * toter Bedienknopf stehen, und die Systemeinstellung greift trotzdem.
 * Sichtbarkeit wird ueber das hidden-Attribut gesteuert, nicht ueber ein
 * style=""-Attribut — die CSP verbietet Inline-Styles.
 */
.thema-schalter {
    display: flex;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-rund);
    overflow: hidden;
}

.thema-schalter button {
    padding: var(--abstand-1) var(--abstand-3);
    font: inherit;
    font-size: var(--text-s);
    color: var(--text-schwach);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color var(--dauer-schnell) ease,
                color var(--dauer-schnell) ease;
}

.thema-schalter button + button { border-left: 1px solid var(--rand); }
.thema-schalter button:hover { background: var(--grund-versenkt); }

.thema-schalter button[aria-pressed="true"] {
    color: var(--akzent);
    background: var(--akzent-schwach);
    font-weight: var(--fett-halb);
}

/* Der Fokusring wuerde am abgerundeten Rand der Gruppe beschnitten
 * (overflow: hidden), deshalb hier nach innen gelegt. */
.thema-schalter button:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: -2px;
}

/* === 4. Bausteine ======================================================== */

.karte-schmal {
    width: 100%;
    max-width: var(--breite-karte);
    padding: var(--abstand-6);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
}

.karte {
    padding: var(--abstand-5);
    margin-bottom: var(--abstand-5);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
}

.karten-kopf { display: flex; flex-direction: column; margin-bottom: var(--abstand-3); }

/* Rueckweg ueber der Ueberschrift auf Impressum und Datenschutzerklaerung.
 * inline-block, damit der Aussenabstand nach unten ueberhaupt wirkt — als
 * inline-Element haette der Link keine Blockhoehe. */
.zurueck {
    display: inline-block;
    margin-bottom: var(--abstand-4);
    color: var(--text-schwach);
    font-size: var(--text-s);
}

.zurueck:hover { color: var(--text); }
.nebentext { color: var(--text-schwach); font-size: var(--text-s); }

h1 { font-size: var(--text-xl); line-height: var(--zeilenhoehe-eng); margin: 0 0 var(--abstand-4); }
h2 { font-size: var(--text-l); line-height: var(--zeilenhoehe-eng); margin: 0 0 var(--abstand-3); }
h3 { font-size: var(--text-m); line-height: var(--zeilenhoehe-eng); margin: var(--abstand-5) 0 var(--abstand-2); }

.kopfzeile { display: flex; align-items: center; gap: var(--abstand-3); }
.kopfzeile h1 { margin-bottom: 0; }

/* Der Knopf neben der Ueberschrift steht rechts und braucht den Abstand nach
 * oben nicht, den ein Formularknopf mitbringt. */
.kopfzeile .knopf { margin-top: 0; margin-left: auto; }

/* === 5. Meldungen ======================================================== */

.erfolg, .fehler, .hinweis {
    padding: var(--abstand-3) var(--abstand-4);
    margin: 0 0 var(--abstand-4);
    border-radius: var(--radius);
}

.erfolg  { background: var(--erfolg-grund);  color: var(--erfolg-text); }
.fehler  { background: var(--fehler-grund);  color: var(--fehler-text); }
.hinweis { background: var(--hinweis-grund); color: var(--hinweis-text); }

/* Ueber die volle Breite und ohne Radius: das Banner sitzt zwischen Kopf und
 * Inhalt und soll wie ein Balken wirken, nicht wie eine Meldungskarte. */
.notfall-banner {
    padding: var(--abstand-3) var(--abstand-4);
    margin: 0;
    background: var(--notfall-grund);
    color: var(--notfall-text);
    font-weight: 600;
    text-align: center;
}

/* === 6. Formulare ======================================================== */

.formular, .formular-breit { display: flex; flex-direction: column; gap: var(--abstand-2); }
.formular-breit { max-width: var(--breite-formular); }

label { font-weight: 500; margin-top: var(--abstand-2); }
label.ankreuz { display: flex; align-items: center; gap: var(--abstand-2); font-weight: 400; }

input[type="text"], input[type="password"], input[type="date"], input[type="file"],
select, textarea {
    padding: var(--abstand-2) var(--abstand-3);
    font: inherit;
    color: inherit;
    background: var(--flaeche);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
}

/* :focus-visible statt :focus: der Ring erscheint bei Tastaturbedienung
 * zuverlaessig (Pflicht nach WCAG 2.4.7), bleibt bei einem Mausklick aber
 * aus — das war mit :focus vorher nicht unterscheidbar. Der Ring
 * verschwindet dadurch nicht, er wird nur gezielter eingesetzt. */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: 2px;
}

.knopf {
    align-self: flex-start;
    margin-top: var(--abstand-3);
    padding: var(--abstand-2) var(--abstand-4);
    font: inherit;
    color: var(--akzent-text);
    background: var(--akzent);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dauer-schnell) ease,
                border-color var(--dauer-schnell) ease;
}

/* Hover ueber ein eigenes Token statt filter: brightness(): --akzent ist mit
 * #003366 so dunkel, dass eine Aufhellung um 10 % kaum sichtbar waere, und im
 * Dark Mode (S5) wuerde brightness() den dann hellen Akzent auswaschen statt
 * ihn hervorzuheben. --akzent-stark ist pro Farbmodus passend gesetzt. */
.knopf:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); }

.knopf-schlicht {
    padding: 5px var(--abstand-3);
    font: inherit;
    font-size: var(--text-s);
    color: var(--akzent);
    background: transparent;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dauer-schnell) ease,
                color var(--dauer-schnell) ease;
}

.knopf-schlicht.gefahr { color: var(--gefahr); }
.knopf-schlicht:hover { background: var(--grund); }

/* Gesperrter Knopf: wartet auf die Löschbestätigung oder auf einen laufenden
 * Upload. Ohne diese Regeln saehe er aus wie ein bedienbarer. */
.knopf:disabled {
    color: var(--text-schwach);
    background: var(--rand);
    border-color: var(--rand);
    cursor: not-allowed;
}

.knopf:disabled:hover { background: var(--rand); border-color: var(--rand); }

.knopf-schlicht:disabled {
    color: var(--text-schwach);
    border-color: var(--rand);
    cursor: not-allowed;
}

/* Auch der gefaehrliche Knopf verliert im gesperrten Zustand sein Rot — es
 * soll erst aufscheinen, wenn der Name stimmt und der Klick wirklich loescht. */
.knopf-schlicht.gefahr:disabled { color: var(--text-schwach); }
.knopf-schlicht:disabled:hover { background: transparent; }

/* Grid mit auto-fit statt Flexbox: die Formulare ordnen sich vom Handy bis
 * zum Desktop selbst um, ohne eine einzige Media Query. */
.aktionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--abstand-4);
    margin: var(--abstand-5) 0;
}

.aktion {
    display: grid;
    gap: var(--abstand-2);
    align-content: start;
    padding: var(--abstand-4);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.aktion label { margin-top: 0; }
.aktion .knopf { margin-top: 0; align-self: start; }

/* min-width: 0 verhindert, dass ein breites input[type=file] das Grid
 * aufblaest — Grid-Elemente haben sonst min-width: auto. */
.aktion input, .aktion select { min-width: 0; max-width: 100%; }

/* Ankreuzfeld in einem Aktionsformular. Kasten und Beschriftung gehoeren in
 * eine Zeile — das Grid von .aktion wuerde sie untereinander setzen, deshalb
 * hier Flexbox. */
.ankreuzfeld {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    margin: 0;
}

/* width: auto schlaegt die 100%-Breite der Formularfelder zurueck: ein
 * Ankreuzkasten, der die ganze Zeile einnimmt, sieht aus wie ein Fehler. */
.ankreuzfeld input { width: auto; min-width: 0; margin: 0; }
.ankreuzfeld label { margin: 0; font-weight: normal; }

/* Ausklappbereich (<details>). Bewusst ohne JavaScript: <details> bringt das
 * Auf- und Zuklappen, die Tastaturbedienung und die Ansage im Screenreader
 * selbst mit. */
.ausklapp {
    margin-bottom: var(--abstand-4);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.ausklapp > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-3);
    padding: var(--abstand-3) var(--abstand-4);
    cursor: pointer;
    border-radius: var(--radius);

    /* display: flex nimmt <summary> in Chrome das Aufklapp-Dreieck; Safari
     * braucht zusaetzlich ::-webkit-details-marker. Ohne Ersatz waere nicht zu
     * erkennen, dass sich der Block oeffnen laesst. */
    list-style: none;
}

.ausklapp > summary::-webkit-details-marker { display: none; }

/* Eigenes Dreieck: dreht beim Aufklappen um 90 Grad. currentColor, damit es
 * in Hell und Dunkel automatisch stimmt. */
.ausklapp > summary::before {
    content: '';
    flex: none;
    align-self: center;
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--dauer-schnell) ease;
}

.ausklapp[open] > summary::before { transform: rotate(90deg); }

.ausklapp > summary:hover { background: var(--grund-versenkt); }

/* Der Fokusring gehoert auf die ganze Zeile, nicht nur auf das Dreieck. */
.ausklapp > summary:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: -2px;
}

/* Ist der Bereich offen, trennt eine Linie Kopf und Inhalt. */
.ausklapp[open] > summary {
    border-bottom: 1px solid var(--rand);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.ausklapp-titel { font-weight: 500; }

.ausklapp-hinweis {
    font-size: var(--text-s);
    color: var(--text-schwach);
}

/* Der Filter.
 *
 * Jedes Label gehoert mit seinem Feld in EINE Rasterzelle. Lagen beide als
 * Geschwister direkt im Grid, verteilte auto-fit sie auf getrennte Zellen —
 * jedes Label stand dann neben einem fremden Feld. Dafuer die .feld-Huelle. */
.filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--abstand-3) var(--abstand-4);
    align-items: start;
    padding: var(--abstand-4);
    margin-bottom: 0;
}

.filter .feld {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.filter label { margin-top: 0; font-size: var(--text-s); }
.filter select, .filter input { min-width: 0; width: 100%; }
.filter .knopf { margin-top: 0; }

/* Die Knopfzeile laeuft immer ueber die volle Breite unter den Feldern. */
.filter-knoepfe {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
}

.inline { display: inline; margin: 0; }

/* Loeschbestaetigung: Beschriftung, Feld und Knopf untereinander. .inline ist
 * dafuer nicht zu gebrauchen — es ist fuer einen einzelnen Knopf in einer
 * Tabellenzeile gedacht und bricht als display: inline jede Blockaufteilung. */
.loeschen {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    max-width: var(--breite-formular);
}

.loeschen label { margin-top: 0; }

/* .knopf-schlicht bringt — anders als .knopf — kein align-self mit und liefe
 * im Flex-Container sonst ueber die volle Breite. */
.loeschen .knopf-schlicht { align-self: flex-start; margin-top: var(--abstand-3); }

/* Eine Karte, die etwas Unwiderrufliches enthaelt, hebt sich vom Rest ab —
 * dieselbe Sprache wie .zugangsdaten, dort aus demselben Grund. Nur der Rand
 * traegt die Farbe: eine flaechig eingefaerbte Karte waere im Dark Mode
 * entweder blass oder grell, je nachdem, und das Kontrastverhaeltnis des
 * Textes darin muesste eigens nachgezogen werden. */
.gefahrzone { border-color: var(--gefahr); }

/* Der Umfang des Loeschens. fieldset bringt eigene Raender und Innenabstaende
 * mit, die hier nur stoeren — die Karte rahmt bereits.
 *
 * Bewusst KEIN display: flex am fieldset: <legend> ist kein gewoehnliches
 * Kind, und die Browser sind sich bis heute nicht einig, ob es dann als
 * Flex-Element mitlaeuft oder an seinem Platz bleibt. Die Zeilen stapeln sich
 * ueber den Aussenabstand der Beschriftungen, das tut dasselbe ohne Wette. */
.umfang { margin: 0; padding: 0; border: 0; }
.umfang legend { padding: 0; font-weight: 500; }

/* align-items: start, damit der Auswahlknopf bei einer umbrechenden
 * Beschriftung an der ersten Zeile stehenbleibt und nicht mittig wegrutscht. */
.umfang label {
    display: flex;
    align-items: start;
    gap: var(--abstand-2);
    margin: var(--abstand-2) 0 0;
    font-weight: 400;
}

.umfang input { margin-top: 0.2em; }
.umfang .nebentext { margin: var(--abstand-2) 0 0; }

/* === 6b. Fortschritt beim Upload ==========================================
 *
 * Der Block ist im Markup hidden und wird von app.js eingeblendet. Ohne
 * JavaScript bleibt er unsichtbar, statt als leerer Balken herumzustehen.
 * ========================================================================= */

.fortschritt {
    display: flex;
    align-items: center;
    gap: var(--abstand-3);
    margin-top: var(--abstand-3);
}

/* appearance: none, damit Rand und Farbe in beiden Farbmodi zu den uebrigen
 * Bausteinen passen — die Browservorgabe ignoriert unsere Tokens. */
.fortschritt-balken {
    flex: 1;
    height: var(--abstand-3);
    appearance: none;
    background: var(--grund-versenkt);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    overflow: hidden;
}

.fortschritt-balken::-webkit-progress-bar { background: var(--grund-versenkt); }
.fortschritt-balken::-webkit-progress-value { background: var(--akzent); }
.fortschritt-balken::-moz-progress-bar { background: var(--akzent); }

.fortschritt-text {
    font-size: var(--text-s);
    color: var(--text-schwach);
    white-space: nowrap;
}

/* === 7. Listen und Tabellen ============================================== */

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

.projektliste li {
    display: flex;
    align-items: center;
    gap: var(--abstand-3);
    padding: var(--abstand-4);
    margin-bottom: var(--abstand-2);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.projektliste a { flex: 1; text-decoration: none; color: var(--text); transition: color var(--dauer) ease; }
.projektname { display: block; font-weight: var(--fett-halb); color: var(--akzent); }
.ordnername { display: block; font-size: var(--text-s); color: var(--text-schwach); }

.zuordnungen { list-style: none; padding: 0; margin: 0 0 var(--abstand-3); }

.zuordnungen li {
    display: flex;
    align-items: center;
    gap: var(--abstand-3);
    padding: var(--abstand-2) 0;
    border-bottom: 1px solid var(--rand);
}

/* Das erste Element traegt den Namen und schiebt Marke und Knopf nach rechts.
 * Bewusst :first-child statt span:first-child -- in den Detailmasken ist der
 * Name ein Link auf den jeweils anderen Datensatz. */
.zuordnungen li > :first-child { flex: 1; }

.brotkrumen { margin: var(--abstand-3) 0 var(--abstand-5); }
.brotkrumen a { color: var(--akzent); text-decoration: none; transition: color var(--dauer) ease; }
.brotkrumen .trenner { color: var(--text-schwach); margin: 0 var(--abstand-2); }

.dateiliste {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
}

.dateiliste th, .dateiliste td {
    padding: 9px var(--abstand-3);
    text-align: left;
    border-bottom: 1px solid var(--rand);
    vertical-align: middle;
}

.dateiliste th { background: var(--grund-versenkt); font-size: var(--text-s); }
.dateiliste tr:last-child td { border-bottom: none; }
.dateiliste .rechts { text-align: right; }
.dateiliste .leer { color: var(--text-schwach); text-align: center; padding: var(--abstand-5); }
.dateiliste a { color: var(--akzent); text-decoration: none; transition: color var(--dauer) ease; }
.dateiliste a:hover { text-decoration: underline; }

/* Symbole statt Emoji: Screenreader lasen "Aktenordner"/"Seite mit Eselsohr"
 * vor jedem einzelnen Dateinamen. Die Symbole sind jetzt aria-hidden, die
 * Bedeutung steht als .nur-vorlesen-Text im Markup.
 *
 * Der Vorrat bekommt position: absolute statt display: none — Letzteres
 * bricht <use>-Referenzen in manchen Engines. */
.symbolvorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

.dateiliste .ordner, .dateiliste .datei {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
}

.symbol {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    color: var(--text-schwach);
}

.dateiliste .ordner .symbol { color: var(--akzent); }

.zeilenaktionen { display: flex; gap: var(--abstand-2); white-space: nowrap; }
.pfad { font-family: Consolas, "Courier New", monospace; font-size: var(--text-s); word-break: break-all; }

/* Zustand nicht allein ueber Farbe transportieren: zusaetzliche Randmarkierung links. */
tr.status-denied { background: var(--zeile-abgelehnt); border-left: 3px solid var(--fehler-text); }
tr.status-error  { background: var(--zeile-fehler);    border-left: 3px solid var(--hinweis-text); }

/* --- Breite Tabellen: scrollen statt umbrechen -------------------------------
 * Das Audit-Log hat sieben Spalten. Als Karten waeren das sieben Zeilen mal
 * 50 Eintraege — unbrauchbar lang. Dort ist die Tabellenform selbst der
 * Informationstraeger, also bleibt sie eine Tabelle und bekommt einen eigenen
 * Scrollbereich. tabindex="0" im Markup ist Pflicht, sonst ist der Bereich
 * per Tastatur nicht erreichbar.
 */
.tabellenrahmen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}

.tabellenrahmen:focus-visible {
    outline: 2px solid var(--fokus);
    outline-offset: 2px;
}

.dateiliste-breit { min-width: 62rem; }

@media (max-width: 899px) {
    .dateiliste-breit .pfad { max-width: 18rem; }
}

/* --- Dateiliste auf dem Handy: Karten statt Tabelle --------------------------
 * Der Dateibrowser ist der taegliche Kundenbildschirm — hier waere seitliches
 * Scrollen die falsche Loesung. Die Zeile wird zur Karte, die Spaltennamen
 * wandern aus dem thead in ein ::before je Zelle.
 *
 * :not(.dateiliste-breit) ist wesentlich: das Audit-Log benutzt dieselbe
 * Klasse .dateiliste und soll hier ausdruecklich NICHT umbrechen.
 */
@media (max-width: 599px) {
    .dateiliste:not(.dateiliste-breit),
    .dateiliste:not(.dateiliste-breit) tbody,
    .dateiliste:not(.dateiliste-breit) tr,
    .dateiliste:not(.dateiliste-breit) td {
        display: block;
    }

    /* thead nicht per display:none entfernen — der Inhalt soll fuer
     * Screenreader erhalten bleiben. */
    .dateiliste:not(.dateiliste-breit) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .dateiliste:not(.dateiliste-breit) {
        border: 0;
        background: none;
        overflow: visible;
    }

    .dateiliste:not(.dateiliste-breit) tr {
        margin-bottom: var(--abstand-2);
        padding: var(--abstand-3);
        background: var(--flaeche);
        border: 1px solid var(--rand);
        border-radius: var(--radius);
    }

    .dateiliste:not(.dateiliste-breit) td {
        padding: var(--abstand-1) 0;
        border-bottom: 0;
    }

    /* Der Name traegt kein Label — er ist die Ueberschrift der Karte. */
    .dateiliste:not(.dateiliste-breit) td[data-spalte]::before {
        content: attr(data-spalte) ": ";
        color: var(--text-schwach);
        font-size: var(--text-s);
    }

    .dateiliste:not(.dateiliste-breit) td.rechts { text-align: left; }

    /* Vollbreite Sonderzeilen (uebergeordneter Ordner, Leerzustand). */
    .dateiliste:not(.dateiliste-breit) td[colspan] { padding: var(--abstand-2) 0; }
    .dateiliste:not(.dateiliste-breit) .leer { padding: var(--abstand-5) 0; }

    .dateiliste:not(.dateiliste-breit) .zeilenaktionen {
        margin-top: var(--abstand-2);
        white-space: normal;
    }

    .dateiliste:not(.dateiliste-breit) .zeilenaktionen .inline { flex: 1; }
    .dateiliste:not(.dateiliste-breit) .zeilenaktionen .knopf-schlicht { width: 100%; }

    /* Ohne Tabellenkopf liesse sich ein nacktes Kaestchen nicht zuordnen. */
    .dateiliste:not(.dateiliste-breit) .auswahlspalte { display: none; }
}

/* === 7b. Auswahl fuer den ZIP-Download ====================================
 *
 * Die Spalte bleibt schmal und mittig; im Kartenumbruch unter 600px faellt sie
 * ganz weg — dort waere ein Kaestchen ohne Tabellenkopf nicht zuzuordnen, und
 * der Einzeldownload je Zeile bleibt ohnehin erreichbar.
 * ========================================================================= */

.auswahlspalte { width: 1%; text-align: center; }

.zip-leiste { margin-top: var(--abstand-4); }
.zip-leiste .knopf { margin-top: 0; }

/* === 7c. Zugangsdaten =====================================================
 *
 * Die Karte erscheint genau einmal, direkt nach dem Erzeugen eines Passworts.
 * Der Rahmen in --gefahr ist Absicht: er soll auffallen, weil der Inhalt nach
 * dem Verlassen der Seite unwiederbringlich weg ist.
 * ========================================================================= */

.zugangsdaten { border-color: var(--gefahr); }

.datenliste {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--abstand-2) var(--abstand-4);
    margin: 0 0 var(--abstand-4);
}

.datenliste dt { font-weight: 500; color: var(--text-schwach); }
.datenliste dd { margin: 0; }

/* Das Passwort etwas groesser: es wird abgetippt oder vorgelesen. */
.geheimnis { font-size: var(--text-l); letter-spacing: 0.05em; }

.anschreiben {
    width: 100%;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--text-s);
    resize: vertical;
}

.zugangsdaten .knopf-schlicht { margin-top: var(--abstand-3); }

/* === 8. Marken ============================================================ */

.marke-recht {
    padding: 3px var(--abstand-3);
    font-size: var(--text-s);
    border-radius: var(--radius-rund);
    white-space: nowrap;
}

.marke-read { background: var(--akzent-schwach); color: var(--akzent); }
.marke-full { background: var(--erfolg-grund); color: var(--erfolg-text); }

/* === 9. Fehlerseite ======================================================= */

.fehlerseite { max-width: var(--breite-formular); margin: 60px auto; text-align: center; }
.statuscode {
    font-size: var(--text-xxl);
    font-weight: var(--fett);
    line-height: var(--zeilenhoehe-eng);
    color: var(--text-schwach);
    margin: 0;
}

.blaettern { display: flex; gap: var(--abstand-5); margin-top: var(--abstand-4); }
.blaettern a { color: var(--akzent); text-decoration: none; transition: color var(--dauer) ease; }

code {
    padding: 1px 5px;
    font-family: Consolas, "Courier New", monospace;
    font-size: var(--text-s);
    background: var(--grund-versenkt);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
}

/* === 10. Hilfsklassen ===================================================== */

/* Nur fuer Screenreader: traegt Bedeutung, die visuell das Icon oder das Logo
 * uebernimmt. clip-path statt display:none — Letzteres wuerde den Text auch
 * aus dem Accessibility-Tree entfernen. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Sprunglink: erst beim Tastaturfokus sichtbar. */
.sprunglink {
    position: absolute;
    left: var(--abstand-2);
    top: calc(var(--abstand-2) * -10);
    z-index: 10;
    padding: var(--abstand-2) var(--abstand-4);
    color: var(--akzent-text);
    background: var(--akzent);
    border-radius: var(--radius);
    transition: top var(--dauer-schnell) ease;
}

.sprunglink:focus-visible { top: var(--abstand-2); }

/* main traegt tabindex="-1", damit der Sprunglink dort wirklich landet; der
 * Ring waere hier aber nur Rauschen, der Sprung ist Bestaetigung genug. */
.inhalt:focus { outline: none; }

/* === 11. Eingabeart und Bewegung ========================================== */

/* Touch-Bedienung: Trefferflaechen von mindestens 44px. Bewusst an
 * (pointer: coarse) gebunden und nicht an eine Bildschirmbreite — ein Tablet
 * mit Stift oder Maus braucht die zusaetzliche Hoehe nicht. */
@media (pointer: coarse) {
    .knopf,
    .knopf-schlicht,
    .navigation a,
    .thema-schalter button {
        min-height: 44px;
    }

    .knopf-schlicht { padding-top: var(--abstand-2); padding-bottom: var(--abstand-2); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === 12. Einwilligung und Rechtsverweise =================================
 *
 * Die Leiste sitzt fixiert am unteren Rand und ist bewusst NICHT modal: ein
 * Sperrbalken wuerde Impressum und Datenschutzerklaerung erst nach einer
 * Entscheidung freigeben und auf der Anmeldeseite den Fokus aus dem
 * Benutzernamensfeld reissen.
 *
 * z-index bleibt UNTER dem Sprunglink (z-index: 10). Geometrisch ueberschneiden
 * sich beide nicht — der Sprunglink sitzt oben links, die Leiste unten —, aber
 * die Regel "der Sprunglink liegt ueber allem" soll ausdruecklich erhalten
 * bleiben.
 * ========================================================================= */

.einwilligung {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    box-shadow: var(--schatten-3);
}

.einwilligung-inhalt {
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding: var(--abstand-4);
}

.einwilligung h2 {
    margin: 0 0 var(--abstand-2);
    font-size: var(--text-l);
}

.einwilligung h2:focus { outline: none; }

.einwilligung p { margin: 0 0 var(--abstand-3); }

/* Die aufgeklappten Einstellungen duerfen auf kleinen Geraeten nicht die
 * halbe Seite verdecken. */
.einwilligung-wahl {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: var(--abstand-3);
    padding: var(--abstand-3);
    background: var(--grund-versenkt);
    border-radius: var(--radius);
}

.einwilligung-wahl fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.einwilligung-wahl legend { font-weight: var(--fett-halb); }

.einwilligung-kategorie + .einwilligung-kategorie {
    margin-top: var(--abstand-4);
    padding-top: var(--abstand-4);
    border-top: 1px solid var(--rand);
}

.einwilligung-kategorie .nebentext { margin: var(--abstand-1) 0 0; }

.einwilligung-eintraege {
    margin: var(--abstand-2) 0 0;
    padding-left: var(--abstand-5);
    font-size: var(--text-s);
}

.einwilligung-eintraege li + li { margin-top: var(--abstand-2); }

/* Mobile-first: die Knoepfe stehen untereinander und damit alle gleich breit.
 * "Alle akzeptieren" und "Nur notwendige" tragen dieselbe Klasse und duerfen
 * sich auch in der Darstellung nicht unterscheiden — eine Ablehnung darf nicht
 * schwerer zu treffen sein als eine Zustimmung. */
.einwilligung-knoepfe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.einwilligung-knoepfe .knopf,
.einwilligung-knoepfe .knopf-schlicht {
    align-self: stretch;
    margin-top: 0;
    text-align: center;
}

@media (min-width: 600px) {
    .einwilligung-knoepfe { flex-direction: row; flex-wrap: wrap; align-items: center; }

    .einwilligung-knoepfe .knopf,
    .einwilligung-knoepfe .knopf-schlicht { align-self: auto; }
}

/* Die fixierte Leiste verdeckt sonst ausgerechnet die Fusszeile — und damit
 * die Verweise auf Datenschutz und Impressum. Ueber eine Klasse und nicht ueber
 * ein Inline-Style: style="" ist projektweit untersagt und wuerde ausserdem an
 * der CSP haengen. */
body.einwilligung-offen { padding-bottom: 22rem; }

@media (min-width: 600px) {
    body.einwilligung-offen { padding-bottom: 16rem; }
}

/* --- Rechtsseiten (Impressum, Datenschutz) -------------------------------- */

.rechtsangaben {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abstand-1) var(--abstand-4);
    margin: 0;
}

@media (min-width: 600px) {
    .rechtsangaben { grid-template-columns: max-content 1fr; }
}

.rechtsangaben dt { font-weight: var(--fett-halb); }
.rechtsangaben dd { margin: 0 0 var(--abstand-2); }

/* Eine fehlende Pflichtangabe soll auffallen, nicht verschwinden. */
.fehlt { color: var(--fehler-text); font-weight: var(--fett-halb); }

/* --- Rechtsverweise in der Fusszeile ------------------------------------- */

.rechtsfuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-3);
    margin-top: var(--abstand-2);
    font-size: var(--text-s);
}

/* --- Hinweis unter dem Farbschalter -------------------------------------- */

.thema-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    margin: var(--abstand-2) 0 0;
    color: var(--text-schwach);
    font-size: var(--text-s);
    text-align: center;
}

@media (pointer: coarse) {
    .einwilligung-knoepfe .knopf,
    .einwilligung-knoepfe .knopf-schlicht,
    .rechtsfuss .knopf-schlicht,
    .rechtsfuss a {
        min-height: 44px;
    }

    .rechtsfuss a { display: inline-flex; align-items: center; }
}