/* design-system: migriert */
/* ==========================================================================
   consent.css — Anmeldung, Registrierung, 2FA, Passwort-Reset, Cookie-
   Einwilligung, Rechtstexte, Fehlerseiten (403/404/429/500) und die
   Grundbausteine des MCP-OAuth-Fensters (oauth.css baut darauf auf).

   Die Design-Token stehen in tokens.css, nicht hier — jedes Template, das
   consent.css lädt, lädt tokens.css davor.

   Optik-Stufe 3, AP5 (2026-10-11), umgesetzt nach
   docs/design/DESIGNRICHTUNG.md:
   - Primärknopf auf --accent-fill mit --on-accent-fill (Weiß, ≥ 5:1 in Ruhe,
     Hover und gedrückt). Vorher hellblau mit dunkler Schrift (C5).
   - Gedrückt-Zustand auf :active statt Anheben beim Hover.
   - Links einheitlich --accent statt Türkis (C4). Türkis bleibt Wellenform.
   - .legal-back gilt jetzt auch auf den Fehlerseiten. Vorher hing die Regel
     an .legal-card, die 404-Karte ist aber .error-card — der Link stand
     im Browser-Standardblau mit 1.63:1 da (C3). Jetzt --accent, 7.11:1 auf
     --panel.
   - Statt Emojis (🔐 🍪 🔑 …) ein Strichsymbol in einer Symbolkachel (C7);
     die Symbole liegen in templates/_auth_icons.html.
   - `transition: var(--ease) .2s` (Übergang auf ALLE Eigenschaften mit
     fester Dauer) ersetzt durch benannte Eigenschaften mit Token-Dauern.
     tokens.css setzt die Dauern und --press-scale unter
     prefers-reduced-motion herunter, deshalb braucht diese Datei keinen
     eigenen Bewegungsblock.
   - "Angemeldet bleiben": das echte Kontrollkästchen war display:none und
     damit per Tastatur nicht erreichbar. Jetzt nur optisch verborgen, der
     Fokusring liegt auf dem gezeichneten Kästchen.
   ========================================================================== */

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

body {
    font-family: var(--font-text);
    font-size: var(--size-body);
    line-height: var(--leading-body);
    background-color: var(--bg);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

/* Nur für Screenreader (Statusmeldungen, Zusatztexte). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Gemeinsamer Fokusring: steht mit Abstand auf dem Grund, nicht auf dem
   gefüllten Knopf (Ring gegen --accent-fill nur 1.85:1, gegen --panel 7.11). */
:where(.consent-card) :is(a, button, summary):focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.consent-wrapper {
    width: 100%;
    max-width: 560px;
}

.consent-card {
    background: var(--panel);
    border: var(--border-width) solid var(--border-soft);
    border-radius: var(--radius-l);
    padding: var(--space-8);
    box-shadow: var(--shadow-l);
}

.consent-header {
    text-align: center;
    margin-bottom: var(--space-6);
}

/* Symbolkachel über dem Titel (ersetzt die Emojis). Die Klasse heißt aus
   Gründen der Rückwärtskompatibilität weiter .cookie-icon. */
.cookie-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-m);
    background: var(--accent-soft);
    color: var(--accent);
}

.cookie-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.consent-header h1 {
    font-family: var(--font-display);
    font-size: var(--size-title-2);
    line-height: var(--leading-title-2);
    letter-spacing: var(--tracking-title-2);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.consent-header p {
    color: var(--text-secondary);
    font-size: var(--size-body);
    line-height: var(--leading-body);
}

.consent-header strong {
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Cookie-Optionen (Einwilligungsseite)
   Innere Gruppen bekommen --fill-1 ohne Rand: höchstens zwei Ebenen.
   -------------------------------------------------------------------------- */
.cookie-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--fill-1);
    padding: var(--space-4);
    border-radius: var(--radius-m);
}

.option-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.option-title {
    font-size: var(--size-headline);
    line-height: var(--leading-headline);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.badge {
    font-size: var(--size-caption);
    line-height: var(--leading-caption);
    letter-spacing: var(--tracking-caption);
    font-weight: var(--weight-semibold);
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.option-desc {
    font-size: var(--size-footnote);
    line-height: var(--leading-footnote);
    color: var(--text-secondary);
}

.option-desc a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* Schalter 38x22, Knopf 18, an = --accent-fill (DESIGNRICHTUNG 2.5). Das
   echte <input> bleibt fokussierbar (opacity 0, nicht display:none). */
.switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: var(--fill-3);
    /* Rand der Spur >= 3:1 gegen die Zeile (.option-item = --fill-1 ueber --panel):
       --border-strong kam dort nur auf 2.93:1 (WCAG 1.4.11, Audit S1). */
    box-shadow: inset 0 0 0 var(--border-width) var(--text-dim);
    border-radius: var(--radius-full);
    transition: background-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}

.slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    top: 2px;
    background-color: var(--text-primary);
    border-radius: 50%;
    box-shadow: var(--shadow-s);
    transition: transform var(--dur-spring) var(--spring);
}

.switch input:checked + .slider {
    background-color: var(--accent-fill);
    /* --accent-fill allein liegt bei 2.63:1 auf der Zeile; der Akzentrand
       (7.11:1) traegt die Kontur im Ein-Zustand. */
    box-shadow: inset 0 0 0 var(--border-width) var(--accent);
}

.switch input:checked + .slider::before {
    background-color: var(--on-accent-fill);
    transform: translateX(16px);
}

.switch input:focus-visible + .slider {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.switch.disabled,
.switch.disabled input {
    cursor: not-allowed;
}

.switch.disabled .slider {
    opacity: .45;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Knöpfe: Primär / Sekundär / Schlicht (DESIGNRICHTUNG 2.5)
   Anmeldeseiten nutzen --control-h-l (40px), weil hier die Hauptaktion steht.
   -------------------------------------------------------------------------- */
.button-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.btn {
    font-family: var(--font-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-h-l);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-s);
    font-size: var(--size-body);
    line-height: var(--leading-callout);
    font-weight: var(--weight-semibold);
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                transform var(--dur-press) var(--ease);
}

.btn:active {
    transform: scale(var(--press-scale));
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: var(--accent-fill);
    color: var(--on-accent-fill);
}

.btn-primary:hover {
    background: var(--accent-fill-hover);
}

.btn-primary:active {
    background: var(--accent-fill-pressed);
}

.btn-primary:disabled {
    background: var(--accent-fill);
}

.btn-secondary {
    background: var(--fill-2);
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

.btn-secondary:hover,
.btn-secondary:active {
    background: var(--fill-3);
}

.btn-tertiary {
    background: transparent;
    color: var(--accent);
    font-weight: var(--weight-medium);
}

.btn-tertiary:hover {
    background: var(--fill-1);
}

.btn-tertiary:active {
    background: var(--fill-2);
}

/* Anker als Knopf */
a.btn {
    text-decoration: none;
}

.text-center {
    text-align: center;
}

/* --------------------------------------------------------------------------
   Trenner „oder“ zwischen Formular und „Mit Discord anmelden/registrieren“
   (login.html, register.html; 2026-10-18)
   -------------------------------------------------------------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-3);
    font-size: var(--size-footnote);
    color: var(--text-dim);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: var(--border-width);
    background: var(--separator);
}

/* --------------------------------------------------------------------------
   Fußzeile (Rechtslinks, Hinweise unter Formularen)
   -------------------------------------------------------------------------- */
.consent-footer {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--size-footnote);
    line-height: var(--leading-footnote);
    letter-spacing: var(--tracking-footnote);
    color: var(--text-dim);
}

/* Absatz-Hinweis direkt unter der Knopfgruppe (vorher style="margin-top:16px"). */
p.consent-footer {
    margin-top: var(--space-4);
}

.consent-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

.consent-footer a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Footer-Zeile (nicht der Absatz-Hinweis): Links brechen um statt zu
   ueberlaufen. Widerruf/Kuendigung sehen aus wie die uebrigen Links
   (.consent-footer__contract ist nur Kennung, ohne eigene Optik); Fokusring
   ueber die :focus-visible-Regel der .consent-card, Zielhoehe mindestens
   24px (WCAG 2.5.8), auf schmalen Schirmen mehr (Breakpoint unten). */
footer.consent-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 var(--space-2);
}

footer.consent-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

@media (max-width: 480px) {
    body {
        padding: var(--space-3);
    }

    .consent-card {
        padding: var(--space-5);
        border-radius: var(--radius-m);
    }
}

/* ==========================================================================
   Rechtstexte (Impressum/Datenschutz/AGB) + Fehlerseiten — dieselbe Karte,
   aber breiter (Fließtext statt kompakter Formulare).
   ========================================================================== */
.legal-wrapper {
    max-width: var(--content-max-narrow);
}

.legal-card h1 {
    font-family: var(--font-display);
    font-size: var(--size-title-1);
    line-height: var(--leading-title-1);
    letter-spacing: var(--tracking-title-1);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.legal-card .legal-updated {
    color: var(--text-dim);
    font-size: var(--size-footnote);
    margin-bottom: var(--space-6);
}

.legal-card h2 {
    font-family: var(--font-display);
    font-size: var(--size-title-3);
    line-height: var(--leading-title-3);
    letter-spacing: var(--tracking-title-3);
    font-weight: var(--weight-semibold);
    margin: var(--space-8) 0 var(--space-3);
    color: var(--text-primary);
}

.legal-card h2:first-of-type {
    margin-top: 0;
}

/* Rechtstexte werden gelesen, nicht überflogen: eine Stufe größer als der
   UI-Fließtext und mit mehr Zeilenabstand. */
.legal-card p,
.legal-card ul {
    color: var(--text-secondary);
    font-size: var(--size-headline);
    line-height: 1.65;
    margin-bottom: var(--space-3);
}

.legal-card ul {
    margin-left: var(--space-5);
}

.legal-card li {
    margin-bottom: var(--space-1);
}

.legal-card strong {
    color: var(--text-primary);
}

.legal-card a:not(.legal-back):not(.btn) {
    color: var(--accent);
}

.legal-card .legal-note {
    background: var(--fill-1);
    border-radius: var(--radius-s);
    padding: var(--space-3) var(--space-4);
    font-size: var(--size-callout);
    line-height: var(--leading-callout);
    color: var(--text-secondary);
    margin-top: var(--space-5);
}

/* Zurück-Link auf Rechtstexten UND Fehlerseiten (C3). */
.legal-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--control-h-m);
    margin-top: var(--space-6);
    padding: 0 var(--space-2);
    border-radius: var(--radius-s);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--size-body);
    font-weight: var(--weight-medium);
    transition: background-color var(--dur-fast) var(--ease),
                transform var(--dur-press) var(--ease);
}

.legal-back:visited {
    color: var(--accent);
}

.legal-back:hover {
    background: var(--fill-1);
    text-decoration: underline;
}

.legal-back:active {
    background: var(--fill-2);
    transform: scale(var(--press-scale));
}

/* ---- Fehlerseiten (403/404/429/500) ---- */
.error-wrapper {
    text-align: center;
}

.error-card .error-code {
    font-family: var(--font-display);
    font-size: var(--size-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    /* Farbleiter der Kacheln statt Türkis: Türkis ist Wellenform und Meter. */
    background: linear-gradient(135deg, var(--tone-2), var(--tone-4));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: var(--space-2);
}

.error-card h1 {
    font-family: var(--font-display);
    font-size: var(--size-title-2);
    line-height: var(--leading-title-2);
    letter-spacing: var(--tracking-title-2);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.error-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

/* Bei erzwungenen Farben (Windows-Kontrastdesign) fällt der Textverlauf weg. */
@media (forced-colors: active) {
    .error-card .error-code {
        background: none;
        color: CanvasText;
    }
}

/* ==========================================================================
   Formulare (Anmeldung, Registrierung, Reset, OAuth)
   ========================================================================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.form-label {
    font-size: var(--size-callout);
    line-height: var(--leading-callout);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.forgot-link {
    font-size: var(--size-footnote);
    color: var(--accent);
    text-decoration: none;
    border-radius: var(--radius-s);
}

.forgot-link:hover {
    text-decoration: underline;
}

.form-input {
    width: 100%;
    min-height: var(--control-h-l);
    padding: var(--space-2) var(--space-3);
    background: var(--field-bg);
    border: var(--border-width) solid var(--field-border);
    border-radius: var(--radius-s);
    color: var(--text-primary);
    font-family: var(--font-text);
    font-size: var(--size-body);
    /* transparent statt none: im Windows-Kontrastdesign wird der Umriss
       sichtbar, dort gibt es keinen box-shadow. */
    outline: 2px solid transparent;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.form-input::placeholder {
    color: var(--text-dim);
}

.form-input[aria-invalid="true"] {
    border-color: var(--danger);
}

/* "Angemeldet bleiben" */
.form-options {
    margin-bottom: var(--space-6);
}

.remember-me {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-callout);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

/* Optisch verborgen, aber fokussier- und per Leertaste schaltbar. */
.remember-me input {
    position: absolute;
    opacity: 0;
    width: 18px;
    height: 18px;
    margin: 0;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: var(--field-bg);
    border: var(--border-width) solid var(--field-border);
    border-radius: calc(var(--radius-s) / 2);
    position: relative;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.remember-me input:checked + .checkbox-custom {
    background-color: var(--accent-fill);
    border-color: var(--accent-fill);
}

.remember-me input:focus-visible + .checkbox-custom {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.remember-me input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--on-accent-fill);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Meldungen (flash): Fehler und Erfolg mit Statusfarbe, Text bleibt lesbar.
   -------------------------------------------------------------------------- */
.flash-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.alert {
    padding: var(--space-3);
    border-radius: var(--radius-s);
    font-size: var(--size-callout);
    line-height: var(--leading-callout);
    font-weight: var(--weight-medium);
    text-align: center;
    color: var(--text-primary);
    background: var(--fill-1);
    border: var(--border-width) solid var(--border);
}

.alert-error,
.alert-danger {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.alert-success {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.alert-warning {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.alert-info {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ==========================================================================
   Recovery-Codes (recovery_codes.html; vorher ein <style>-Block dort)
   ========================================================================== */
.recovery-code-list {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    background: var(--field-bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-m);
    font-family: var(--font-mono);
    font-size: var(--size-headline);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

/* Ein Klick markiert genau einen Code. */
.recovery-code-list li {
    padding: 2px 0;
    user-select: all;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .recovery-code-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fingerbedienung: jedes Bedienelement mindestens 44px hoch. */
@media (pointer: coarse) {
    .btn,
    .form-input,
    .legal-back {
        min-height: var(--hit-min);
    }
}

/* ==========================================================================
   Handy hochkant (apple-design): Safe-Area, dvh, Inputs >= 16px (kein
   iOS-Zoom), Touch-Ziele >= 44px, Karte oben ausgerichtet statt zentriert,
   damit die Tastatur das Formular nicht verdeckt.
   ========================================================================== */
@media (max-width: 640px) {
    html { -webkit-text-size-adjust: 100%; }

    body {
        min-height: 100vh;
        min-height: 100dvh;
        align-items: flex-start;
        padding-top: max(var(--space-3), env(safe-area-inset-top));
        padding-right: max(var(--space-3), env(safe-area-inset-right));
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
        padding-left: max(var(--space-3), env(safe-area-inset-left));
    }

    .consent-wrapper,
    .consent-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .consent-header h1 {
        font-size: clamp(1.25rem, 5.6vw, 1.5rem);
        letter-spacing: -0.02em;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .form-input,
    .form-input[type="date"],
    select.form-input,
    textarea.form-input {
        font-size: 1rem;
        min-height: var(--hit-min);
    }

    .btn { min-height: var(--hit-min); }

    .forgot-link,
    .consent-footer a,
    .register-optional__summary {
        display: inline-block;
        padding-block: 0.7rem;
    }
    .register-optional__summary { display: block; }

    .remember-me { min-height: var(--hit-min); }

    .consent-card img,
    .consent-card svg { max-width: 100%; }
    .consent-card { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .consent-card *,
    .consent-card *::before,
    .consent-card *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}