/* ==========================================================================
   Impressum und Datenschutzerklärung
   ==========================================================================

   Eine eigene Datei, nicht die Stile der App. Der Grund steht in
   backend/main.py (legal_page): diese beiden Seiten müssen stehen, wenn die
   Anwendung *nicht* startet — genau dann sucht jemand ein Impressum. Sie
   hängen deshalb an keinem gebündelten Stylesheet, dessen Adresse sich bei
   jedem Bau ändert (styles.css wird beim Bauen zu assets/main-<hash>.css und
   existiert unter dem alten Namen nicht mehr).

   Bis August 2026 stand dieses CSS zweimal eingebettet in den beiden HTML-
   Dateien. Das trug, solange es einen einzigen Farbsatz gab; mit dem zweiten
   hätte sich jede Farbe vervierfacht. Der Pfad hier ist von Hand vergeben und
   wird beim Bauen nicht angefasst — die Zusage „steht auch ohne die App"
   bleibt damit erhalten.

   Die Werte sind aus css/core/variables.css übernommen. Eine Ausnahme ist
   begründet: die Linkfarbe im Hellmodus (siehe unten).
   ========================================================================== */

:root {
    /* Der helle Satz steht hier blank — er ist zugleich der Rückfall für
       Browser ohne light-dark(). Dort bleibt die Seite hell und lesbar,
       statt in halb aufgelösten Farben zu enden. */
    color-scheme: light dark;

    --grund: #f8fafc;
    --text: #0f172a;
    --gedaempft: #475569;
    --akzent-text: #b93f0b;
    --akzent-linie: #e0560f;
    --linie: rgba(15, 23, 42, 0.12);
    --merk-grund: rgba(224, 86, 15, 0.07);
    --code-grund: rgba(15, 23, 42, 0.06);
    --tabelle-kopf-grund: rgba(15, 23, 42, 0.04);
    --tabelle-zebra-grund: rgba(15, 23, 42, 0.02);
    /* Der eine gefüllte Knopf der Seite, mit den Werten von .btn-primary aus
       der App (core/variables.css: --primary, --primary-hover, --primary-line,
       --text-dark). Die Schrift ist in beiden Themen dunkel, weil die Fläche
       in beiden hell genug ist: 5.8:1 auf #f26a21, 6.9:1 auf #ff7a3d. */
    --haupt-grund: #f26a21;
    --haupt-grund-schwebend: #e0560f;
    --haupt-linie: #e0560f;
    --haupt-schrift: #0f172a;

    /* Satzbreite. Empfohlen sind 45–75 Zeichen je Zeile; die 720px von vorher
       waren rund 90. Nicht geraten, sondern Zeile für Zeile ausgezählt (jedes
       Zeichen einzeln, nach Oberkante gruppiert — siehe die Messung in
       e2e/flows/legal-pages.spec.js):

           38rem → 71 / 76 Zeichen im Mittelwert (Datenschutz / Impressum)
           37rem → 69 / 74
           36rem → 67 / 70

       37rem, weil beide Seiten damit unter 75 bleiben und die Tabellen noch
       Platz haben. Die Messung läuft mit der Ersatzschrift, nicht mit Inter:
       die Rechtsseiten laden keine Schrift nach, und genau so sieht sie fast
       jeder. */
    --mass: 37rem;
}

/* light-dark() liest `color-scheme` — und genau daran hängen unten die beiden
   Regeln, mit denen die App-Wahl das Betriebssystem schlägt. Ein Farbsatz je
   Thema, an einer Stelle, ohne verdoppelte Blöcke.

   Zwei Akzenttöne, nicht einer, und dieselbe Aufteilung wie in der App
   (core/variables.css, --primary-line und --primary-text):

     --akzent-text   #b93f0b  Links mitten im Fließtext. 5.31:1 auf #f8fafc —
                              normale Schrift verlangt 4.5:1.
     --akzent-linie  #e0560f  Fokusring und der Strich am Merkkasten. 3.64:1,
                              und damit über den 3:1, die für nicht-textliche
                              Elemente gelten.

   Die Wortmarke nimmt --akzent-text und trifft damit denselben Wert wie im
   Kopfbalken der App. Im Dunkelmodus: #ff8f5c für Schrift, #ff7a3d für
   Linie und Fläche — dasselbe Signal-Orange wie überall seit September 2026. */
@supports (color: light-dark(#000, #fff)) {
    :root {
        --grund: light-dark(#f8fafc, #090d16);
        --text: light-dark(#0f172a, #f8fafc);
        --gedaempft: light-dark(#475569, #94a3b8);
        --akzent-text: light-dark(#b93f0b, #ff8f5c);
        --akzent-linie: light-dark(#e0560f, #ff7a3d);
        --linie: light-dark(rgba(15, 23, 42, 0.12), rgba(248, 250, 252, 0.12));
        --merk-grund: light-dark(rgba(224, 86, 15, 0.07), rgba(255, 122, 61, 0.08));
        --code-grund: light-dark(rgba(15, 23, 42, 0.06), rgba(248, 250, 252, 0.07));
        --tabelle-kopf-grund: light-dark(rgba(15, 23, 42, 0.04), rgba(248, 250, 252, 0.05));
        --tabelle-zebra-grund: light-dark(rgba(15, 23, 42, 0.02), rgba(248, 250, 252, 0.02));
        --haupt-grund: light-dark(#f26a21, #ff7a3d);
        --haupt-grund-schwebend: light-dark(#e0560f, #ff6424);
        --haupt-linie: light-dark(#e0560f, #ff7a3d);
    }
}

/* Die Wahl aus den Einstellungen der App, gesetzt von legal/thema.js.
   Sie schlägt das Betriebssystem in beide Richtungen — wer ein dunkles System
   hat und die App auf „Hell (White Mode)" gestellt hat, bekommt auch hier
   Hell. Genau dieser Fall war der Anlass für den Umbau.

   `color-scheme` steuert dabei zweierlei: die Farben oben über light-dark(),
   und das, was der Browser selbst beisteuert — Rollbalken und Auswahlfarbe. */
:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px 20px 64px;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body>header,
body>main,
body>footer {
    max-width: var(--mass);
    margin: 0 auto;
}

/* --- Kopf und Fuß -------------------------------------------------------- */

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 36px;
}

.kopf-links {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.marke {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
    text-decoration: none;
}

/* Wie in der App: die Marke trägt den Schriftton, nicht den Konturton. Ihre
   kleinste Erscheinung dort ist 12 px, und ein Ton für alle ist besser als
   zwei. */
.marke span {
    color: var(--akzent-text);
}

/* Der Name der Seite neben der Marke. */
.bereich {
    color: var(--gedaempft);
}

/* Der einzige gefüllte Knopf der Seite.
   Wer hier ist, kam fast immer aus der App (Fusszeile, Anmeldedialog) und
   will nach dem Lesen zurück — wie „Fertig" in den Einstellungen. Der Weg
   stand dreimal da: als Marke, als umrandeter Knopf hier und noch einmal in
   der Fusszeile, alle drei gleich leise. Jetzt steht er einmal und laut; die
   Marke bleibt ein Link, weil man ihn dort erwartet. */
.kopf-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--haupt-schrift);
    text-decoration: none;
    border-radius: 8px;
    background: var(--haupt-grund);
    box-shadow: inset 0 0 0 1px var(--haupt-linie);
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.kopf-zurueck:hover {
    background: var(--haupt-grund-schwebend);
    text-decoration: none;
}

.fuss {
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--linie);
    font-size: .875rem;
    color: var(--gedaempft);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* --- Inhaltsverzeichnis ------------------------------------------------- */

/* Eine offene Liste ohne Kasten. Vorher: sieben Pillen mit eigenem Rahmen in
   einem gerahmten Kasten — acht Rahmen für sieben Sprungmarken, und die
   übrigen sieben Abschnitte fehlten. Die Links tragen die Textfarbe mit einer
   leisen Unterstreichung: vierzehn Links im Akzentton hätten neben dem einen
   gefüllten Knopf um die Aufmerksamkeit gerungen. */
.inhaltsverzeichnis {
    margin: 24px 0 8px;
}

.inhaltsverzeichnis-titel {
    margin: 0 0 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gedaempft);
}

.inhaltsverzeichnis ol {
    margin: 0;
    padding-left: 1.75em;
}

.inhaltsverzeichnis li {
    margin-bottom: 4px;
}

.inhaltsverzeichnis li::marker {
    color: var(--gedaempft);
    font-variant-numeric: tabular-nums;
}

.inhaltsverzeichnis a {
    color: var(--text);
    text-decoration-color: var(--linie);
}

.inhaltsverzeichnis a:hover {
    text-decoration-color: currentColor;
}

/* --- Text & Typografie --------------------------------------------------- */

/* Der Fließtext trägt die volle Textfarbe.
 *
 * Er stand auf der gedämpften: `p, ul, ol, td { color: var(--gedaempft) }`.
 * Auf einer Rechtsseite *ist* der Absatz der Inhalt — er gehört auf den
 * höchsten Kontrast, nicht auf den niedrigsten. Im Hellmodus wäre das Grau
 * zudem mit 4.54:1 nur knapp über der Grenze gewesen, und zwar für die
 * Hauptmasse des Textes.
 *
 * Gedämpft bleibt, was Beiwerk ist: der Name der Seite im Kopf und die
 * Fußzeile. */
h1 {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 8px;
}

h2 {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 40px 0 10px;
    scroll-margin-top: 24px;
}

h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 24px 0 8px;
}

p,
ul,
ol {
    margin: 0 0 14px;
}

li {
    margin-bottom: 6px;
}

/* Die Anschrift als Text, nicht als Karte. Der Kasten hob sie als etwas
   Besonderes heraus — auf einer Seite, deren einziger Inhalt Angaben dieser
   Art sind. */
address {
    font-style: normal;
    line-height: 1.6;
    margin: 0 0 14px;
}

/* Die Schlüsselnamen in Abschnitt 11 sind länger als die Spalte am Telefon.
   `overflow-wrap` bricht sie erst, wenn es nicht anders geht — und weil im
   Markup ein <wbr> hinter jedem Unterstrich steht, bricht es dort statt
   mitten im Wort. Ohne das stand da „piaz_auth_toke / n". */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .875em;
    padding: 2px 6px;
    background: var(--code-grund);
    border: 1px solid var(--linie);
    border-radius: 4px;
    overflow-wrap: break-word;
}

a {
    color: var(--akzent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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

/* Ein sichtbarer Ring für Tastaturfokus */
a:focus-visible,
.rollbereich:focus-visible {
    outline: 2px solid var(--akzent-linie);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Merkkasten ---------------------------------------------------------- */

.merk {
    border-left: 3px solid var(--akzent-linie);
    background: var(--merk-grund);
    padding: 14px 18px 2px;
    border-radius: 0 8px 8px 0;
    margin: 20px 0;
}

/* --- Tabellen ------------------------------------------------------------ */

/* Der Rollbereich liegt um die Tabelle, nicht auf ihr.
 *
 * Vorher stand `display: block; overflow-x: auto` an der <table> selbst. Das
 * rollt zwar, nimmt dem Element aber seine Tabellenrolle: für einen
 * Screenreader war das keine Tabelle mehr, sondern eine Folge loser Zellen —
 * die Zuordnung „Wand → Foto, Titel, Gebiet …" ging dabei verloren.
 *
 * `tabindex="0"` steht im Markup, nicht hier: ein Bereich, der rollt, muss
 * auch ohne Maus erreichbar sein (WCAG 2.1.1). Wer nicht wischen kann, sah
 * sonst die abgeschnittene Spalte nie. */
.rollbereich {
    overflow-x: auto;
    margin: 16px 0 24px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--grund);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .925rem;
}

th,
td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

tr:last-child th,
tr:last-child td {
    border-bottom: none;
}

/* Kein `white-space: nowrap` mehr: der Zeilenkopf durfte nicht umbrechen und
   schob die Tabelle am Telefon über den Rand hinaus. Umbrochen passt sie. */
th {
    font-weight: 600;
    background: var(--tabelle-kopf-grund);
    width: 34%;
    min-width: 8rem;
    padding-right: 16px;
}

tr:nth-child(even) td {
    background: var(--tabelle-zebra-grund);
}

/* --- Drucken ------------------------------------------------------------- */

/* Rechtsseiten werden gedruckt und abgelegt. Ohne diesen Block druckt der
   Browser entweder die dunkle Fläche oder wirft sie weg — und dann steht
   heller Text auf weißem Papier.
 *
 * `:root[data-theme]` steht mit dabei, weil die beiden Regeln oben sonst
 * gleich stark wären und die Wahl aus der App bis aufs Papier durchschlüge.
 * Beim Drucken gilt immer der helle Satz. */
@media print {

    :root,
    :root[data-theme] {
        color-scheme: light;
    }

    body {
        padding: 0;
        font-size: 11pt;
        background: #fff;
        color: #0f172a;
    }

    p,
    li,
    address,
    th,
    td,
    h1,
    h2,
    h3 {
        color: #0f172a;
    }

    .kopf-zurueck,
    .inhaltsverzeichnis {
        display: none;
    }

    .rollbereich {
        overflow: visible;
        border: none;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    table,
    .merk,
    address,
    .fuss {
        break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }
}