/* app.tracking.fireappx.com — die Weiche zur App.
 *
 * Eigenständig und ohne die Token der Anwendung: Diese Seite läuft unter
 * einer eigenen Domain, in einem eigenen Ordner, und soll auch dann noch
 * stehen, wenn an der Anwendung gerade gebaut wird. Eine gemeinsame
 * Datei wäre eine Abhängigkeit, die hier nichts einbringt.
 *
 * Hell und dunkel über prefers-color-scheme: Wer sie nachts im Fahrzeug
 * öffnet, bekommt keinen weißen Blitz.
 */

:root {
    --grund: #f4efe6;
    --flaeche: #fffaf3;
    --linie: #e3d6c8;
    --text: #241610;
    --leise: #6b5d54;
    --akzent: #b42318;
    --akzent-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0b0f17;
        --flaeche: #141a24;
        --linie: #26303f;
        --text: #eef2f7;
        --leise: #9aa7b8;
        --akzent: #e04b3a;
        --akzent-text: #10151d;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.weiche {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 1rem calc(3rem + env(safe-area-inset-bottom));
}

.marke {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--akzent);
    font-weight: 700;
}

h1 { margin: 0.2rem 0 0.5rem; font-size: 1.9rem; letter-spacing: -0.02em; }
h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }

.lead { margin: 0 0 2rem; color: var(--leise); }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 0.9rem;
    padding: 1.1rem 1.2rem;
    margin: 0 0 0.9rem;
}

/* Die erste Karte ist die Antwort auf die Frage, mit der jemand
 * hierherkommt. Sie bekommt deshalb die Kante in Alarmfarbe — dieselbe
 * Sprache wie im Lagebild, wo Rot die Führung markiert. */
.karte-erst { border-left: 4px solid var(--akzent); }

.karte p { margin: 0 0 0.9rem; }
.karte p:last-child { margin-bottom: 0; }

/* Mindestens 48 Bildpunkte hoch: Das hier wird mit Handschuhen
 * angetippt, im Stehen, oft im Regen. */
.knopf {
    display: block;
    min-height: 3rem;
    padding: 0.75rem 1.2rem;
    border-radius: 0.6rem;
    border: 1px solid var(--linie);
    background: transparent;
    color: var(--text);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}

.knopf-erst {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--akzent-text);
}

.knopf:hover, .knopf:focus-visible { border-color: var(--akzent); }

.klein { font-size: 0.86rem; color: var(--leise); margin-top: 0.75rem; }

.fuss {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
    font-size: 0.86rem;
    color: var(--leise);
    line-height: 2.2;
}

/* Auch die Fußzeile wird angetippt. */
.fuss a {
    color: var(--leise);
    display: inline-block;
    padding: 0.35rem 0;
    min-height: 1.6rem;
}

.fuss a:hover, .fuss a:focus-visible { color: var(--akzent); }