/*
 * MyTime – Impressum und Datenschutzerklärung.
 *
 * Zwei Textseiten. Sie brauchen kein Raster und keine Karten, sondern eine
 * Spalte, die sich lesen lässt: begrenzte Zeilenlänge, ruhige Abstände,
 * Überschriften, die man beim Überfliegen findet.
 *
 * Eigenes Stilblatt und nicht das der Anwendung – wie beim Kundenbericht.
 * Diese Seiten stehen vor der Anmeldung; was sie nicht laden, kann auch nicht
 * danebengehen.
 */

:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --border: #e2e5ea;
    --text: #1c2430;
    --text-muted: #6b7684;
    --accent: #2f6fd0;
    --warning: #b8860b;
    --warning-soft: #f8f0dc;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181f;
        --surface: #1b212b;
        --border: #2c3542;
        --text: #e6eaf0;
        --text-muted: #98a3b3;
        --accent: #5b9bf0;
        --warning: #e0b341;
        --warning-soft: #332914;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/*
 * Die Spalte.
 *
 * 68 Zeichen sind die Breite, bei der ein Auge die nächste Zeile noch findet.
 * Am Telefon zählt stattdessen der Rand.
 */
.seite {
    max-width: 44rem;
    margin: 0 auto;
    padding: 40px 20px 64px;
    background: var(--surface);
    min-height: 100vh;
}

@media (max-width: 560px) {
    .seite { padding: 24px 16px 48px; }
}

h1 {
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 4px;
}

h2 {
    font-size: 19px;
    line-height: 1.3;
    margin: 36px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

h3 {
    font-size: 16px;
    margin: 24px 0 6px;
}

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

ul, ol { padding-left: 22px; }

li { margin-bottom: 4px; }

.stand, .muted { color: var(--text-muted); }

.stand { margin-bottom: 28px; font-size: 14px; }

.muted { font-size: 14px; }

address {
    font-style: normal;
    margin-bottom: 14px;
}

/* Beschriftung über dem Wert, nicht daneben: Die Werte sind unterschiedlich
   lang, und eine zweispaltige Liste bräche am Telefon ohnehin um. */
dt {
    font-weight: 600;
    margin-top: 12px;
}

dd { margin: 2px 0 0; }

a { color: var(--accent); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--bg);
}

/*
 * Die fehlende Pflichtangabe.
 *
 * Sichtbar und nicht zu übersehen: Ein Impressum mit einer Lücke ist keines,
 * und wer die Anwendung betreibt, soll darüber stolpern, bevor es jemand
 * anderes tut.
 */
.luecke {
    margin: 0 0 28px;
    padding: 14px 16px;
    border: 1px solid var(--warning);
    border-radius: 8px;
    background: var(--warning-soft);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

.fuss {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.fuss nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}