/* Stilvorlage ADFC-Fahrradcodierung.
 *
 * Aufbau:
 *   1. Fundament          — Farb-/Maß-Tokens, Reset, Grundtypografie
 *   2. Geteilte Bausteine  — Buttons, Formulare, Karten, Hinweise (folgt)
 *   3. Öffentlicher Bereich — unter .bereich-oeffentlich (folgt)
 *   4. Admin-Bereich        — unter .bereich-admin (folgt)
 *
 * Verbindliches ADFC-CI: Dunkelblau, Orange, Hellblau. Kein Rot/Grün/Gelb
 * als Signalfarbe ohne zusätzlichen Text bzw. Symbol (Barrierefreiheit).
 */

/* ── 1. FUNDAMENT ──────────────────────────────────────────────── */

:root {
    /* Markenfarben */
    --blau-900:    #0f4b7c;   /* Primär, Text auf Weiß */
    --blau-800:    #0c3c64;   /* dunklere Variante (Hover) */
    --orange:      #ee7f01;   /* Akzent */
    --orange-hell: #f59b3d;
    --hellblau:    #94e0f2;   /* Flächen */

    /* Neutrale Flächen und Linien */
    --flaeche: #eef3f8;
    --linie:   #dde7ef;
    --weiss:   #ffffff;

    /* Graustufen */
    --grau-900: #1a1a18;
    --grau-700: #3d3d3a;
    --grau-500: #696965;
    --grau-300: #c5c2bb;
    --grau-100: #efece7;

    /* Signalrot (nur mit Text/Symbol, nie allein) */
    --rot:      #b33a2a;
    --rot-hell: #fdf0ee;

    /* Schrift */
    --schrift-display: Georgia, 'Times New Roman', serif;
    --schrift-text:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Maße */
    --radius:      6px;
    --radius-lg:   12px;
    --schatten:    0 2px 8px rgba(15, 75, 124, 0.10);
    --schatten-lg: 0 8px 32px rgba(15, 75, 124, 0.14);
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--schrift-text);
    background: var(--flaeche);
    color: var(--grau-900);
    min-height: 100vh;
    font-size: 1rem;
    line-height: 1.5;
}

/* ── 2. GETEILTE BAUSTEINE ─────────────────────────────────────── */
/* Maße und Optik folgen der schlichten öffentlichen Linie. Additiv aus
 * dem Admin-Bereich übernommen, weil barrierefrei und für Public unschädlich:
 * der Tastatur-Fokusring (.btn:focus-visible) und das ⚠-Symbol vor
 * Fehlermeldungen (.feld-fehler, .hinweis--fehler). */

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: var(--radius);
    font-family: var(--schrift-text);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: opacity 0.15s;
    line-height: 1.4;
}

.btn:hover { opacity: 0.85; }

.btn:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

.btn--primär {
    background: var(--blau-900);
    color: var(--weiss);
    border-color: var(--blau-900);
}

.btn--sekundär {
    background: transparent;
    color: var(--blau-900);
    border-color: var(--blau-900);
}

/* Formulare */
.formular-gruppe { margin-bottom: 1.25rem; }

.formular-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--blau-900);
}

.formular-eingabe {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius);
    font-family: var(--schrift-text);
    font-size: 1rem;
    background: var(--weiss);
    transition: border-color 0.15s;
}

.formular-eingabe:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(238, 127, 1, 0.18);
}

.formular-eingabe--fehler { border-color: var(--rot); }

.feld-fehler {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--rot);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.feld-fehler::before { content: '⚠'; }

.formular-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Karten */
.karte {
    background: var(--weiss);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(15, 75, 124, 0.08);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.karte__kopf {
    background: var(--blau-900);
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.karte__titel {
    font-family: var(--schrift-display);
    color: var(--weiss);
    font-size: 1.05rem;
    font-weight: 600;
}

.karte__körper { padding: 1.5rem 1.25rem; }

/* Hinweise */
.hinweis {
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.hinweis--info {
    background: var(--hellblau);
    border-left: 3px solid var(--blau-900);
    color: var(--blau-900);
}

.hinweis--fehler {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--rot-hell);
    border-left: 3px solid var(--rot);
    color: var(--rot);
}

.hinweis--fehler::before { content: '⚠'; }

/* Leerzustand */
.leerzustand {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--grau-500);
}

.leerzustand__symbol {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

/* ── 3. ÖFFENTLICHER BEREICH ───────────────────────────────────── */
/* Buchungsstrecke: schmale Lesespalte, geführter Ablauf. Nur .kopfzeile
 * trägt einen Bereichspräfix, weil der Name auch im Admin vergeben ist;
 * die übrigen Klassen sind eindeutig öffentlich. */

.bereich-oeffentlich .kopfzeile {
    background: var(--blau-900);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kopfzeile__logo {
    color: var(--orange);
    font-size: 1.6rem;
    line-height: 1;
}

.kopfzeile__titel {
    font-family: var(--schrift-display);
    color: var(--weiss);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.haupt {
    max-width: 660px;
    margin: 2rem auto;
    padding: 0 1rem 3rem;
}

/* Fortschrittsleiste */
.fortschritt {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 0;
}

.fortschritt__schritt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
    position: relative;
}

.fortschritt__schritt:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0.85rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--linie);
    z-index: 0;
}

.fortschritt__zahl {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--linie);
    border: 2px solid var(--grau-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.fortschritt__bezeichnung {
    font-size: 0.72rem;
    color: var(--grau-300);
    text-align: center;
}

.fortschritt__schritt--aktiv .fortschritt__zahl {
    background: var(--blau-900);
    border-color: var(--blau-900);
    color: var(--weiss);
}

.fortschritt__schritt--aktiv .fortschritt__bezeichnung {
    color: var(--blau-900);
    font-weight: 500;
}

.fortschritt__schritt--erledigt .fortschritt__zahl {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--weiss);
}

.fortschritt__schritt--erledigt::after {
    background: var(--orange) !important;
}

/* Checkbox */
.checkbox-gruppe {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius);
    cursor: pointer;
}

.checkbox-gruppe input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--blau-900);
    cursor: pointer;
    flex-shrink: 0;
}

/* Slot-Auswahl */
.slot-tag { margin-bottom: 1.5rem; }

.slot-tag__datum {
    font-family: var(--schrift-display);
    font-weight: 600;
    color: var(--blau-900);
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

.slot-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.5rem;
}

.slot-knopf { position: relative; }

.slot-knopf input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.slot-knopf label {
    display: block;
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius);
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    background: var(--weiss);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
}

.slot-knopf:hover label {
    border-color: var(--blau-900);
}

.slot-knopf input[type="radio"]:checked + label {
    border-color: var(--blau-900);
    background: var(--blau-900);
    color: var(--weiss);
}

.slot-knopf input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* Übersichtstabelle (Prüfen-Schritt) */
.uebersicht-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

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

.uebersicht-tabelle th {
    color: var(--grau-500);
    font-weight: 400;
    width: 40%;
}

.uebersicht-tabelle td { font-weight: 500; }

/* Mobil (≤ 480px) — Desktop-Layout unberührt */
@media (max-width: 480px) {
    .bereich-oeffentlich .kopfzeile {
        padding: 0.85rem 1rem;
    }

    .kopfzeile__titel {
        font-size: 1rem;
    }

    .haupt {
        margin: 1.25rem auto;
        padding: 0 0.75rem 2rem;
    }

    .fortschritt__bezeichnung {
        font-size: 0.62rem;
    }

    .karte__körper {
        padding: 1.25rem 1rem;
    }

    .formular-aktionen {
        flex-direction: column;
    }

    .formular-aktionen .btn {
        width: 100%;
        text-align: center;
    }

    .slot-knopf label {
        padding: 0.7rem 0.85rem;
    }
}

/* ── 4. ADMIN-BEREICH ──────────────────────────────────────────── */
/* Verwaltungswerkzeug: breites Layout, klebende Navigation, Datentabellen.
 * Nur .kopfzeile trägt einen Bereichspräfix (Name auch öffentlich vergeben).
 * .formular-gruppe wird hier überschrieben, weil das 2-Spalten-Raster eine
 * vertikale Flex-Stapelung braucht statt des öffentlichen Fluss-Abstands. */

/* Kopfzeile mit Navigation */
.bereich-admin .kopfzeile {
    background: var(--blau-900);
    border-bottom: 2px solid var(--orange);
    position: sticky;
    top: 0;
    z-index: 100;
}

.kopfzeile__innen {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--weiss);
}

.logo__zeichen {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--orange);
    letter-spacing: -0.05em;
}

.logo__name {
    font-family: var(--schrift-display);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.logo__name em {
    font-style: italic;
    color: var(--orange-hell);
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav__link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0.45rem 1rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.nav__link:hover { background: rgba(255, 255, 255, 0.10); color: var(--weiss); }

.nav__link--hervorgehoben {
    background: var(--orange);
    color: var(--blau-900);
    font-weight: 600;
}

.nav__link--hervorgehoben:hover {
    background: var(--orange-hell);
    color: var(--blau-900);
}

/* Hauptinhalt */
.hauptinhalt {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

.seitenüberschrift {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--grau-300);
}

.seitenüberschrift h1 {
    font-family: var(--schrift-display);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--blau-900);
    letter-spacing: -0.025em;
}

/* Datentabelle */
.datentabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
}

.datentabelle th {
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--grau-500);
    background: var(--grau-100);
    border-bottom: 2px solid var(--grau-300);
    white-space: nowrap;
}

.datentabelle td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--grau-100);
    vertical-align: middle;
}

.datentabelle tr:last-child td { border-bottom: none; }

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

/* Status-Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.badge--aktiv     { background: var(--hellblau);  color: var(--blau-900); }
.badge--inaktiv   { background: var(--grau-100);  color: var(--grau-500); }
.badge--storniert { background: var(--rot-hell);  color: var(--rot);      }

/* Gefahr-Button (Löschen) */
.btn--gefahr {
    background: transparent;
    color: var(--rot);
    border-color: rgba(179, 58, 42, 0.35);
    font-size: 0.87rem;
    padding: 0.4rem 0.8rem;
}

.btn--gefahr:hover { background: var(--rot-hell); border-color: var(--rot); }

.tabellenaktionen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Formular-Raster (zweispaltig) */
.formular-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}

.bereich-admin .formular-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0;
}

.formular-gruppe--breit { grid-column: 1 / -1; }

.pausen-gruppe {
    grid-column: 1 / -1;
    padding: 1.25rem;
    background: var(--grau-100);
    border-radius: var(--radius);
    border: 1.5px dashed var(--grau-300);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.pausen-gruppe__hinweis {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    color: var(--grau-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Login-Seite */
body.layout-anmeldung {
    background: var(--blau-900);
    background-image:
        radial-gradient(ellipse at 15% 60%, rgba(238, 127, 1, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(15, 75, 124, 0.6) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.anmeldekarte {
    background: var(--weiss);
    border-radius: var(--radius-lg);
    box-shadow: var(--schatten-lg);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.anmeldekarte__kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    padding: 2.25rem 2.5rem 2rem;
    text-align: center;
}

.anmeldekarte__zeichen {
    font-size: 2.5rem;
    line-height: 1;
    display: block;
    margin-bottom: 0.6rem;
}

.anmeldekarte__titel {
    font-family: var(--schrift-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--blau-900);
    letter-spacing: -0.025em;
}

.anmeldekarte__untertitel {
    font-size: 0.9rem;
    color: var(--grau-500);
    margin-top: 0.2rem;
}

.anmeldekarte__körper { padding: 2rem 2.5rem 2.5rem; }

.bereich-admin .anmeldeformular .formular-gruppe { margin-bottom: 1.25rem; }

.anmeldeformular .btn--primär {
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* Hilfsklassen */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

/* ── Fußzeile (öffentlich + Admin) ─────────────────────────────── */
.fusszeile {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 1rem 2rem;
    border-top: 1px solid var(--linie);
    background: var(--flaeche);
}

.fusszeile__link {
    color: var(--blau-900);
    text-decoration: underline;
    font-size: 0.95rem;
}

.fusszeile__link:hover {
    color: var(--blau-800);
}