/* =====================================================================
   Mischdaten-Verwaltung – Gestaltung
   =====================================================================

   Aufbau dieser Datei:
    1. Schriften (liegen auf dem eigenen Server, keine externen Links)
    2. Farben für Hell- und Dunkelmodus (CSS-Variablen)
    3. Grundlagen (Seite, Text, Links, Fokus)
    4. Seitenrahmen (Infoleiste, Kopf, Navigation, Titelband, Fuß)
    5. Bausteine (Tafeln, Tabellen, Formulare, Knöpfe, Meldungen, Marken)
    6. Raster für zweispaltige Seiten
    7. Anmeldeseite und Fehlerseite
    8. Hilfsklassen

   Gestaltungsidee: angelehnt an ninka.com – Rot, viel Weiß, dunkle
   Leisten. Wiederkehrendes Motiv sind schräge Schichten wie im Logo
   (Lack- bzw. Druckschichten): vor jedem Seitentitel und unter dem
   aktiven Navigationspunkt.

   Die Farben stehen zentral als Variablen in :root. Ab Stufe 7 werden
   Grundfarbe und Logo im Backend änderbar; dann überschreibt eine
   zusätzliche, vom Server erzeugte Datei nur diese Variablen.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Schriften: Barlow (SIL Open Font License, siehe schriften/OFL-Lizenz-Barlow.txt)
   font-display: swap = Text erscheint sofort, die Schrift wird nachgeladen
   --------------------------------------------------------------------- */
@font-face {
    font-family: "Barlow";
    src: url("../schriften/Barlow-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../schriften/Barlow-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow";
    src: url("../schriften/Barlow-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Barlow Condensed";
    src: url("../schriften/BarlowCondensed-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* ---------------------------------------------------------------------
   2. Farben
   --akzent         Rot für Texte, Linien, Markierungen
   --akzent-flaeche Rot als Hintergrund von Knöpfen (mit weißer Schrift)
   --akzent-hauch   sehr helles Rot für hinterlegte Flächen
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --akzent: #c10731;
    --akzent-flaeche: #c10731;
    --akzent-flaeche-dunkler: #9b0526;
    --akzent-hauch: #fbeef1;

    --graphit: #2a2d32;            /* Infoleiste, Fußbereich, Anmeldefläche */
    --graphit-text: #eceef0;
    --graphit-leise: #aab0b7;

    --grund: #f2f3f4;              /* Seitenhintergrund */
    --flaeche: #ffffff;            /* Tafeln, Kopfbereich */
    --flaeche-leise: #f7f8f9;      /* Tabellenkopf, ruhige Tafeln */
    --linie: #d9dcdf;
    --linie-stark: #a9afb6;        /* Rahmen von Eingabefeldern */
    --text: #1d2024;
    --text-leise: #5a6068;
    --fokus: #0b63ce;              /* Fokusrahmen bewusst blau: von Rot klar unterscheidbar */

    --erfolg: #1d6f42;
    --erfolg-hauch: #e8f4ec;
    --warnung: #8a5300;
    --warnung-hauch: #fdf3e2;
    --fehler: #a4161a;
    --fehler-hauch: #fdecec;
    --info: #20558a;
    --info-hauch: #eaf1f8;

    /* Logo-Schichten */
    --logo-ebene-2: rgba(193, 7, 49, 0.62);
    --logo-ebene-3: rgba(193, 7, 49, 0.32);

    --schrift: "Barlow", "Segoe UI", system-ui, sans-serif;
    --schrift-titel: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
    --breite: 1200px;
    --rundung: 3px;
}

/* Dunkelmodus: vom Benutzer gewählt … */
:root[data-darstellung="dunkel"] {
    color-scheme: dark;

    --akzent: #f2738c;
    --akzent-flaeche: #c10731;
    --akzent-flaeche-dunkler: #e0103f;
    --akzent-hauch: #2c171c;

    --graphit: #0c0e10;
    --graphit-text: #e6e8eb;
    --graphit-leise: #9aa1a9;

    --grund: #131518;
    --flaeche: #1c1f23;
    --flaeche-leise: #202328;
    --linie: #33383e;
    --linie-stark: #59606a;
    --text: #e6e8eb;
    --text-leise: #a2a9b1;
    --fokus: #6aa8ff;

    --erfolg: #74d39d;
    --erfolg-hauch: #15271d;
    --warnung: #f0b35a;
    --warnung-hauch: #2b2213;
    --fehler: #ff8f86;
    --fehler-hauch: #2d1718;
    --info: #8ab8ec;
    --info-hauch: #15212e;

    --logo-ebene-2: rgba(242, 115, 140, 0.75);
    --logo-ebene-3: rgba(242, 115, 140, 0.45);
}

/* … oder automatisch, wenn "Wie Windows-Einstellung" gewählt und Windows dunkel ist.
   (Gleiche Werte wie oben – CSS kann Blöcke nicht wiederverwenden.) */
@media (prefers-color-scheme: dark) {
    :root[data-darstellung="system"] {
        color-scheme: dark;

        --akzent: #f2738c;
        --akzent-flaeche: #c10731;
        --akzent-flaeche-dunkler: #e0103f;
        --akzent-hauch: #2c171c;

        --graphit: #0c0e10;
        --graphit-text: #e6e8eb;
        --graphit-leise: #9aa1a9;

        --grund: #131518;
        --flaeche: #1c1f23;
        --flaeche-leise: #202328;
        --linie: #33383e;
        --linie-stark: #59606a;
        --text: #e6e8eb;
        --text-leise: #a2a9b1;
        --fokus: #6aa8ff;

        --erfolg: #74d39d;
        --erfolg-hauch: #15271d;
        --warnung: #f0b35a;
        --warnung-hauch: #2b2213;
        --fehler: #ff8f86;
        --fehler-hauch: #2d1718;
        --info: #8ab8ec;
        --info-hauch: #15212e;

        --logo-ebene-2: rgba(242, 115, 140, 0.75);
        --logo-ebene-3: rgba(242, 115, 140, 0.45);
    }
}


/* ---------------------------------------------------------------------
   3. Grundlagen
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 1.0625rem;          /* 17 px: gut lesbar auch mit Abstand zum Bildschirm */
    line-height: 1.5;
    font-variant-numeric: tabular-nums;  /* Ziffern gleich breit: Zahlen stehen sauber untereinander */
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

p {
    margin: 0 0 1rem;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--akzent);
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 2px;
}

code {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.92em;
    background: var(--flaeche-leise);
    border: 1px solid var(--linie);
    border-radius: 2px;
    padding: 0 0.25em;
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung – überall gleich */
:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
}

/* Begrenzte Inhaltsbreite mit Rand links und rechts */
.breite {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: 24px;
}

@media (max-width: 600px) {
    .breite {
        padding-inline: 16px;
    }
}


/* ---------------------------------------------------------------------
   4. Seitenrahmen
   --------------------------------------------------------------------- */

/* Link "Zum Inhalt springen": erst sichtbar, wenn er per Tab-Taste fokussiert wird */
.sprunglink {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10;
    background: var(--flaeche);
    color: var(--text);
    padding: 0.6rem 1rem;
    border: 2px solid var(--fokus);
}

.sprunglink:focus {
    top: 1rem;
}

/* --- Infoleiste (dunkel, ganz oben) --- */
.infoleiste {
    background: var(--graphit);
    color: var(--graphit-text);
    font-size: 0.9375rem;
}

.infoleiste-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    min-height: 52px;
    padding-block: 0.4rem;
}

.infoleiste-ort {
    margin: 0;
    color: var(--graphit-leise);
}

.infoleiste-ort strong {
    color: var(--graphit-text);
    font-weight: 600;
}

.infoleiste-ip {
    margin-left: 0.25rem;
}

.infoleiste-nutzer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
}

.nutzer-name {
    font-weight: 600;
}

.infoleiste-link {
    color: var(--graphit-text);
}

.infoleiste-knopf {
    font: inherit;
    color: var(--graphit-text);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--rundung);
    min-height: 38px;
    padding: 0 0.85rem;
    cursor: pointer;
}

.infoleiste-knopf:hover {
    border-color: rgba(255, 255, 255, 0.7);
}

/* Umschalter Hell / Dunkel / Wie Windows */
.darstellung-umschalter {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--rundung);
    overflow: hidden;
}

.darstellung-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--graphit-leise);
    cursor: pointer;
}

.darstellung-knopf + .darstellung-knopf {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.darstellung-knopf svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.darstellung-knopf:hover {
    color: var(--graphit-text);
}

.darstellung-knopf[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* --- Kopfbereich mit Logo und Hauptnavigation --- */
.kopfbereich {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.kopfbereich-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1rem;
}

.logo {
    display: block;
    line-height: 0;
}

.logo-grafik {
    display: block;
    height: 58px;
    width: auto;
    aspect-ratio: 1800 / 510;      /* Seitenverhältnis des ninka-Logos */
}

/* Farben der Logo-Teile (eingebettete SVG-Grafik) */
.logo-ebene-1 { fill: var(--akzent-flaeche); }
.logo-ebene-2 { fill: var(--logo-ebene-2); }
.logo-ebene-3 { fill: var(--logo-ebene-3); }
.logo-wort    { fill: var(--akzent); }
.logo-zeile   { fill: var(--text); }

.hauptnavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hauptnavigation a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    color: var(--text);
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
}

.hauptnavigation a:hover {
    color: var(--akzent);
}

/* Aktiver Punkt: schräger roter Balken darunter (Schicht-Motiv) */
.hauptnavigation a[aria-current="page"] {
    color: var(--akzent);
}

.hauptnavigation a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 2px;
    right: -2px;
    bottom: 2px;
    height: 5px;
    background: var(--akzent-flaeche);
    transform: skewX(-24deg);
}

/* --- Titelband mit Seitentitel --- */
.titelband-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 2rem 1.5rem;
}

/* Seitentitel: schmale, kursive Schrift mit schräger Schicht davor */
.seitentitel-text {
    font-family: var(--schrift-titel);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
    line-height: 1.05;
    margin: 0;
    overflow-wrap: anywhere;
}

.seitentitel-text::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.62em;
    margin-right: 0.4em;
    background: var(--akzent-flaeche);
    transform: skewX(-24deg);
}

.titelband-beschreibung {
    margin: 0.6rem 0 0;
    max-width: 70ch;
    color: var(--text-leise);
}

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

/* Unternavigation der Verwaltung (über dem Titel) */
.unternavigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.unternavigation a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--text-leise);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.unternavigation a:hover {
    color: var(--text);
}

.unternavigation a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--akzent-flaeche);
}

/* --- Inhalt und Fußbereich --- */
.inhalt {
    flex: 1;
    padding-bottom: 3rem;
}

.fuss {
    background: var(--graphit);
    color: var(--graphit-leise);
    font-size: 0.9375rem;
}

.fuss-innen {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.5rem;
}

.fuss-innen p {
    margin: 0;
}

.fuss-name {
    color: var(--graphit-text);
    font-weight: 600;
}


/* ---------------------------------------------------------------------
   5. Bausteine
   --------------------------------------------------------------------- */

/* --- Tafel: weiße Fläche für zusammengehörige Inhalte --- */
.tafel {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tafel-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.75rem;
}

.tafel-kopf h2 {
    margin: 0;
}

/* Tafel, deren Inhalt eine Tabelle bis an den Rand ist */
.tafel-tabelle {
    padding: 0;
    overflow: hidden;
}

.tafel-tabelle > .leer-hinweis,
.tafel-tabelle > .tabelle-zusammenfassung,
.tafel-tabelle > .blaettern {
    padding: 1rem 1.5rem;
    margin: 0;
}

/* Wichtige Tafel (z. B. Schlüsseldatei jetzt herunterladen) */
.tafel-wichtig {
    border-left: 6px solid var(--akzent-flaeche);
    background: var(--akzent-hauch);
}

/* Ruhige Tafel für Zusatzinformationen */
.tafel-leise {
    background: var(--flaeche-leise);
}

/* Schmale Tafel für einzelne Formulare */
.tafel-schmal {
    max-width: 640px;
}

/* --- Kennzahlen (Startseite für Administratoren) --- */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kennzahl {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    color: var(--text);
    text-decoration: none;
}

.kennzahl:hover {
    border-color: var(--linie-stark);
}

.kennzahl-wert {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.kennzahl-text {
    color: var(--text-leise);
}

.kennzahl-warnung .kennzahl-wert {
    color: var(--warnung);
}

/* --- Tabellen --- */
.tabelle-rahmen {
    position: relative;            /* hält auch unsichtbare Vorlese-Texte im Rahmen */
    overflow-x: auto;              /* breite Tabellen scrollen in sich, nicht die ganze Seite */
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
}

.tabelle th,
.tabelle td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
}

.tabelle th {
    background: var(--flaeche-leise);
    color: var(--text-leise);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.tabelle th:first-child,
.tabelle td:first-child {
    padding-left: 1.5rem;
}

.tabelle th:last-child,
.tabelle td:last-child {
    padding-right: 1.5rem;
}

.tabelle tbody tr:last-child td {
    border-bottom: 0;
}

.tabelle tbody tr:hover td {
    background: var(--flaeche-leise);
}

.tabelle .rechts {
    text-align: right;
}

.tabelle-hauptlink {
    font-weight: 600;
}

.zeile-inaktiv td {
    color: var(--text-leise);
}

.zeile-gewaehlt td {
    background: var(--akzent-hauch);
}

.tabelle-zusammenfassung {
    color: var(--text-leise);
    border-bottom: 1px solid var(--linie);
}

.blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-top: 1px solid var(--linie);
}

.details-aufklappen {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
}

.details-aufklappen summary {
    color: var(--akzent);
    cursor: pointer;
}

.details-aufklappen ul {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-leise);
}

/* --- Formulare --- */
.formular {
    max-width: 560px;
}

.feld {
    margin-bottom: 1.15rem;
}

.feld label,
.auswahl-gruppe legend {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.optional {
    font-weight: 400;
    color: var(--text-leise);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="file"],
select {
    width: 100%;
    min-height: 48px;              /* gut mit dem Finger zu treffen (Touch-Bildschirme) */
    padding: 0.55rem 0.8rem;
    font: inherit;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rundung);
}

input:hover,
select:hover {
    border-color: var(--text-leise);
}

/* Dateiauswahl: der eingebaute Knopf im Stil der Zweitknöpfe */
input[type="file"] {
    padding: 0.4rem;
}

input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    min-height: 38px;
    margin-right: 0.9rem;
    padding: 0 1rem;
    color: var(--text);
    background: var(--flaeche-leise);
    border: 1px solid var(--linie-stark);
    border-radius: var(--rundung);
    cursor: pointer;
}

.feld-hilfe {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-leise);
}

/* Auswahlfelder (Radio und Checkbox) mit großer Klickfläche */
.auswahl-gruppe {
    border: 0;
    margin: 0 0 1.15rem;
    padding: 0;
    min-width: 0;
}

.auswahl {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.55rem 0;
    cursor: pointer;
}

.auswahl input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1rem 0 0;
    accent-color: var(--akzent-flaeche);
}

.auswahl-mit-text {
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
}

.auswahl-mit-text:has(input:checked) {
    border-color: var(--akzent);
    background: var(--akzent-hauch);
}

.auswahl-mit-text:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.75;
}

.auswahl-erklaerung {
    display: block;
    color: var(--text-leise);
    font-size: 0.9375rem;
}

/* Filterzeile über Tabellen: Felder teilen sich die Breite, Knöpfe bleiben nebeneinander */
.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
}

.filterleiste .feld {
    flex: 1 1 170px;
}

.filterleiste .knopfleiste {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0 0 1.15rem;
}

/* --- Knöpfe --- */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.3rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--akzent-flaeche);
    border: 2px solid var(--akzent-flaeche);
    border-radius: var(--rundung);
    cursor: pointer;
}

.knopf:hover {
    background: var(--akzent-flaeche-dunkler);
    border-color: var(--akzent-flaeche-dunkler);
}

/* Zweitrangige Aktion: nur Rahmen */
.knopf-zweit {
    color: var(--text);
    background: transparent;
    border-color: var(--linie-stark);
}

.knopf-zweit:hover {
    background: var(--flaeche-leise);
    border-color: var(--text);
}

/* Gefährliche Aktion (Löschen) */
.knopf-gefahr {
    color: var(--fehler);
    background: transparent;
    border-color: var(--fehler);
}

.knopf-gefahr:hover {
    color: #fff;
    background: var(--fehler);
    border-color: var(--fehler);
}

.knopf-klein {
    min-height: 40px;
    padding: 0 0.9rem;
    font-size: 0.9375rem;
}

.knopf-breit {
    width: 100%;
}

.knopfleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

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

.loesch-formular {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linie);
}

/* --- Meldungen --- */
.meldung {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.1rem;
    border-left: 5px solid var(--info);
    border-radius: 0 var(--rundung) var(--rundung) 0;
    background: var(--info-hauch);
}

.meldung ul,
.meldung ol {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.meldung-erfolg {
    border-left-color: var(--erfolg);
    background: var(--erfolg-hauch);
}

.meldung-fehler {
    border-left-color: var(--fehler);
    background: var(--fehler-hauch);
}

.meldung-hinweis {
    border-left-color: var(--warnung);
    background: var(--warnung-hauch);
}

.liste-schritte li {
    margin-bottom: 0.3rem;
}

/* --- Marken für Rollen und Status --- */
.rollen-marke,
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.55rem;
    border-radius: 2px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.rolle-admin {
    color: var(--akzent);
    background: var(--akzent-hauch);
}

.rolle-benutzer {
    color: var(--info);
    background: var(--info-hauch);
}

.rolle-leser {
    color: var(--text-leise);
    background: var(--flaeche-leise);
    box-shadow: inset 0 0 0 1px var(--linie);
}

/* In der dunklen Infoleiste: Rollenmarke heller */
.infoleiste .rollen-marke {
    color: var(--graphit-text);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* Status mit farbigem Punkt davor */
.status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.status-an,
.status-ok {
    color: var(--erfolg);
    background: var(--erfolg-hauch);
}

.status-warnung,
.status-hinweis {
    color: var(--warnung);
    background: var(--warnung-hauch);
}

.status-fehler {
    color: var(--fehler);
    background: var(--fehler-hauch);
}

.status-aus {
    color: var(--text-leise);
    background: var(--flaeche-leise);
}

.aktions-marke {
    font-weight: 600;
}

.aktion-anmeldung_fehlgeschlagen,
.aktion-konto_gesperrt {
    color: var(--fehler);
}

/* --- Angabenliste (Name: Wert) --- */
.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.45rem 1.5rem;
    margin: 0 0 1rem;
}

.angaben dt {
    color: var(--text-leise);
}

.angaben dd {
    margin: 0;
}


/* ---------------------------------------------------------------------
   6. Raster
   --------------------------------------------------------------------- */
.raster-zwei,
.raster-breit-schmal {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

/* In Rastern übernimmt der Rasterabstand den Abstand der Tafeln */
.raster-zwei > .tafel,
.raster-breit-schmal > .tafel,
.stapel > .tafel {
    margin-bottom: 0;
}

.raster-zwei,
.raster-breit-schmal {
    margin-bottom: 1.5rem;
}

.stapel {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 960px) {
    .raster-zwei {
        grid-template-columns: 1fr 1fr;
    }

    .raster-breit-schmal {
        grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    }
}


/* ---------------------------------------------------------------------
   7. Anmeldeseite und Fehlerseite
   --------------------------------------------------------------------- */
.anmeldung-flaeche {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 100vh;
}

/* Linke, dunkle Seite mit Logo */
.anmeldung-marke {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
    background: var(--graphit);
    color: var(--graphit-text);
}

.anmeldung-marke .logo-grafik {
    height: auto;
    width: min(440px, 100%);
}

/* Logo auf dunklem Grund: Schrift weiß, Schichten bleiben rot */
.logo-invertiert .logo-wort { fill: #fff; }
.logo-invertiert .logo-zeile { fill: rgba(255, 255, 255, 0.82); }
.logo-invertiert .logo-ebene-2 { fill: rgba(225, 35, 78, 0.8); }
.logo-invertiert .logo-ebene-3 { fill: rgba(225, 35, 78, 0.5); }

.anmeldung-zweck {
    position: relative;
    z-index: 1;
    max-width: 30ch;
    margin: 0;
    font-size: 1.25rem;
    color: var(--graphit-leise);
}

/* Drei große schräge Schichten unten – das Logo-Motiv als Fläche */
.anmeldung-schichten {
    position: absolute;
    left: 18%;
    right: -12%;
    bottom: 9%;
}

.anmeldung-schichten span {
    display: block;
    height: clamp(44px, 7vh, 76px);
    margin-bottom: clamp(14px, 2.4vh, 24px);
    background: #c10731;
    transform: skewX(-26deg);
}

.anmeldung-schichten span:nth-child(1) { margin-left: 16%; opacity: 0.95; }
.anmeldung-schichten span:nth-child(2) { margin-left: 8%; opacity: 0.55; }
.anmeldung-schichten span:nth-child(3) { margin-left: 0; opacity: 0.25; }

/* Rechte Seite mit dem Formular */
.anmeldung-formularseite {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 5rem) 1.5rem;
    background: var(--flaeche);
}

.anmeldung-formular {
    width: min(440px, 100%);
}

.anmeldung-formular .seitentitel-text {
    margin-bottom: 1.75rem;
}

.anmeldung-hilfe {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-leise);
}

@media (max-width: 860px) {
    .anmeldung-flaeche {
        grid-template-columns: 1fr;
    }

    .anmeldung-marke {
        min-height: 0;
    }

    .anmeldung-schichten {
        display: none;
    }
}

/* Eigenständige Fehlerseite */
.fehlerseite-inhalt {
    width: min(640px, 100% - 32px);
    margin: clamp(2rem, 10vh, 6rem) auto;
    padding: 2rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
}

.fehlerseite-inhalt .seitentitel-text {
    margin-bottom: 1rem;
}

.fehlerseite-code {
    color: var(--text-leise);
    font-weight: 600;
    margin-bottom: 0.25rem;
}


/* ---------------------------------------------------------------------
   8. Hilfsklassen
   --------------------------------------------------------------------- */

/* Nur für Bildschirmleser sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.gedaempft {
    color: var(--text-leise);
}

.klein {
    font-size: 0.875rem;
}

/* Klein-Angaben in Tabellenzellen in eigener Zeile */
.tabelle .klein {
    display: block;
}

.zahl {
    font-variant-numeric: tabular-nums;
}

.nicht-umbrechen {
    white-space: nowrap;
}

.text-breite {
    max-width: 72ch;
}

.leer-hinweis {
    color: var(--text-leise);
}

.abstand-oben {
    margin-top: 2rem;
}