/* =========================================================
   Rechtsseiten (legal_base.html: Impressum, Datenschutz, AGB)

   Stand vorher: 22 Zeilen `<style>` im `<head>` des Templates – die Stelle,
   an der keine der Prüfungen aus `test_designsystem.py` greift. Entsprechend
   standen dort rohe Abstände (10 neben 12 neben 16 neben 20 neben 22 neben
   26 neben 30 neben 34 neben 40 neben 72), rohe Schriftgrößen und vier
   Graustufen als Hex-Werte neben denen aus `tokens.css` (`#d6d6de`,
   `#9a9aa8`) – zwei eigene Töne für „Text" und „leiser Text", die es als
   Token längst gab.

   Die Seiten laden bewusst **nicht** `style.css`: sie sind Fließtext, kein
   Dashboard. Was sie brauchen, steht hier – die Marke kommt aus
   `tokens.css`, das davor geladen wird.
   ========================================================= */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Raleway', system-ui, sans-serif;
    line-height: 1.65;
}

/* `--link` statt `--primary`: die Markenfarbe ist als *Fläche* gedacht und
   erreicht als Text auf dunklem Grund nur 3,96:1 – gefordert sind 4,5:1.
   Dieselbe Unterscheidung wie im Dashboard. */
a { color: var(--link); }

.legal-top {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border-soft);
}
.legal-top a {
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .22em;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
/* 26 px ist ein Bauteilmaß (das kleine Logo in der Kopfzeile), keine
   Rasterstufe – wie die Avatargrößen im Dashboard. */
.legal-top img { width: 26px; height: 26px; border-radius: 50%; }

.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
}
.legal h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.legal h2 { font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-2); }
.legal p, .legal li { color: var(--text); }
.legal .muted { color: var(--muted); }

/* Ein noch auszufüllender Platzhalter im Rechtstext – sichtbar gestrichelt,
   damit er nicht versehentlich in den Betrieb geht. */
.ph {
    background: var(--primary-bg);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-xs);
    padding: 0 var(--sp-1);
    color: var(--text);
    white-space: nowrap;
}

.legal-note {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-5);
    font-size: var(--fs-sm);
}

.legal-back {
    display: inline-block;
    margin-top: var(--sp-6);
    font-weight: 700;
    text-decoration: none;
}

footer {
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-xs);
    padding: var(--sp-5);
    border-top: 1px solid var(--border-soft);
}

/* Tastatur: derselbe Ring wie im Dashboard und auf der Verkaufsseite.
   Ohne ihn sieht niemand, wo er beim Durchtabben gerade steht. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}
