/* ══════════════════════════════════════════════════════════════════════════
   Flip7 — Impressum und Datenschutzerklärung.

   Warum eigene Stile und nicht app.css: Das ist ein Stylesheet für EINE
   Oberfläche, die als Ganzes im Bildschirm steht (`.ansicht` mit
   `min-height: 100dvh`, feste Fußleiste, kein Fließtext). Rechtstexte sind
   das Gegenteil — lange Seiten, die man scrollt und ausdruckt. Zwei Aufgaben,
   zwei Dateien; hier wird nur die Farbwelt übernommen.

   Diese Seiten müssen ohne JavaScript funktionieren. Ein Impressum, das
   erst ein Programm zusammenbaut, ist im Zweifel keins.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --grund:      #0d1017;
    --karte:      #1a2030;
    --rand:       #2b344a;
    --text:       #eef1f7;
    --text-leise: #97a1b8;
    --primaer:    #f5a524;

    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.kopf {
    border-bottom: 1px solid var(--rand);
    background: #12151f;
    position: sticky;
    top: 0;
    z-index: 1;
}

.kopf-inhalt {
    max-width: 46rem;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.marke {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
}
.marke b { color: var(--primaer); }

/* 48 px Touch-Fläche wie in der App — auch hier tippt jemand mit dem Daumen. */
.zurueck {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--rand);
    border-radius: 12px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}
.zurueck:hover, .zurueck:focus-visible { color: var(--text); border-color: var(--primaer); }

/* ── Text ──────────────────────────────────────────────────────────────── */

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 32px 20px 64px;
}

h1 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    text-wrap: balance;
}

.stand {
    color: var(--text-leise);
    font-size: 15px;
    margin: 0 0 32px;
}

h2 {
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 40px 0 8px;
    padding-top: 24px;
    border-top: 1px solid var(--rand);
    text-wrap: balance;
}

h3 {
    font-size: 17px;
    margin: 28px 0 4px;
    color: var(--primaer);
}

p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 24px; }
li { margin-bottom: 8px; }

address {
    font-style: normal;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 16px;
}

a { color: var(--primaer); }
a:hover { color: #ffc35c; }

strong { color: #fff; }
em { color: var(--text-leise); font-style: normal; }

/* Der Kasten „Kurz gesagt" — die Zusammenfassung vor dem Kleingedruckten. */
.merke {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--primaer);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 32px;
}
.merke p:last-child { margin-bottom: 0; }
.merke .kicker {
    color: var(--primaer);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Fuß ───────────────────────────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--rand);
    margin-top: 48px;
    padding: 24px 20px 40px;
    text-align: center;
    color: var(--text-leise);
    font-size: 15px;
}
footer a { margin: 0 10px; display: inline-block; min-height: 32px; }
footer [aria-current] { color: var(--text-leise); text-decoration: none; }

@media (max-width: 480px) {
    body { font-size: 16px; }
    h1 { font-size: 24px; }
    main { padding-top: 24px; }
}