/*
 * Kopf, Fuß, Raster, Umbruchpunkte.
 *
 * Ein Umbruchpunkt, 700 px, und zwar derselbe, an dem das Wochengitter in Tagesblöcke kippt
 * (docs/02). Zwei Umbruchpunkte wären zwei Entwürfe, die auseinanderlaufen.
 *
 * Unterhalb davon steht die Zielleiste unten am Bildschirm — dort ist der Daumen. Darüber
 * wandert sie in die Kopfleiste, weil eine über 1200 px breite, unten festgeklebte Leiste
 * nichts als eine sehr lange Linie ist.
 *
 * Keine Farbwerte in dieser Datei: alles kommt aus den Tokens in app.css.
 */

body {
    min-height: 100vh;
    /* Platz für die unten festgeklebte Zielleiste, damit die letzte Karte nicht darunter
       verschwindet. Der Sicherheitsabstand ist der der Geräteunterkante (iPhone-Steg). */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* --- Sprungmarke ------------------------------------------------------------------------ */

.sprungmarke {
    position: absolute;
    left: var(--raum-3);
    top: calc(-1 * var(--raum-6) - var(--griff));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    min-height: var(--griff);
    padding: 0 var(--raum-4);
    border-radius: var(--rund-1);
    background: var(--akzent);
    color: var(--akzent-text);
    text-decoration: none;
    font-weight: 620;
}

.sprungmarke:focus {
    top: var(--raum-3);
}

/* --- Kopfleiste ------------------------------------------------------------------------- */

.kopfleiste {
    display: flex;
    align-items: center;
    gap: var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-erhoben);
    border-bottom: 1px solid var(--linie);
}

/* Ein Griff wie jeder andere: die Marke führt auf „Heute" und war das einzige Ziel dieser
   App unter 44 px (gemessen 25 px, docs/03). */
.marke {
    display: inline-flex;
    align-items: center;
    min-height: var(--griff);
    padding: 0 var(--raum-2);
    margin-left: calc(-1 * var(--raum-2));
    border-radius: var(--rund-1);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    text-decoration: none;
    margin-right: auto;
    transition: background-color var(--wechsel);
}

/* Die Seiten, die nicht täglich gebraucht werden: Ziele, Verlauf, Konto. */
.nebenleiste {
    display: flex;
    align-items: center;
    gap: var(--raum-1);
}

.nebenleiste a {
    display: inline-flex;
    align-items: center;
    min-height: var(--griff);
    padding: 0 var(--raum-2);
    border-radius: var(--rund-1);
    font-size: 15px;
    text-decoration: none;
    color: var(--text-leise);
    transition: background-color var(--wechsel), color var(--wechsel);
}

.nebenleiste a[aria-current="page"] {
    color: var(--text);
    font-weight: 660;
}

/* --- Zielleiste: die vier Bereiche, für die es die App gibt ----------------------------- */

.zielleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--flaeche-erhoben);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.zielleiste a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: var(--raum-2) var(--raum-1);
    font-size: 13px;
    text-decoration: none;
    color: var(--text-leise);
    transition: background-color var(--wechsel), color var(--wechsel);
}

.zielleiste .glyphe {
    font-size: 20px;
    line-height: 1;
}

.zielleiste a[aria-current="page"] {
    color: var(--akzent);
    font-weight: 660;
}

/* --- Inhalt ----------------------------------------------------------------------------- */

.inhalt {
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--raum-5) var(--raum-4) var(--raum-6);
}

/* Sieben Tagesspalten und eine Standspalte brauchen mehr als 34 rem. Nur die Wochenansicht
   nimmt das; am Handy ändert es nichts, weil dort das Gitter in Tagesblöcke kippt. */
.inhalt-weit {
    max-width: 62rem;
}

.seitenkopf {
    margin-bottom: var(--raum-4);
}

.seitenkopf .oberzeile {
    font-size: 15px;
    font-weight: 620;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-leise);
}

.seitenkopf .unterzeile {
    margin-top: var(--raum-1);
    font-size: 17px;
    color: var(--text-leise);
}

.abschnitt + .abschnitt {
    margin-top: var(--raum-6);
}

/* --- Ab 700 px: die Zielleiste zieht nach oben ------------------------------------------ */

@media (min-width: 700px) {
    body {
        padding-bottom: 0;
    }

    .kopfleiste {
        flex-wrap: wrap;
        justify-content: center;
        padding: var(--raum-3) var(--raum-5);
    }

    .zielleiste {
        position: static;
        display: flex;
        flex-basis: 100%;
        order: 3;
        justify-content: center;
        gap: var(--raum-2);
        border-top: 0;
        padding-bottom: 0;
    }

    .zielleiste a {
        flex-direction: row;
        gap: var(--raum-2);
        min-height: var(--griff);
        padding: 0 var(--raum-3);
        border-radius: var(--rund-1);
        font-size: 17px;
    }

    .zielleiste .glyphe {
        font-size: 17px;
    }

    .inhalt {
        padding-top: var(--raum-6);
    }
}

/* --- Berührung: Zeiger und Daumen -------------------------------------------------------- */

/*
 * Am Zeigergerät leuchtet auf, was unter dem Zeiger liegt; am Telefon nur, was gerade gedrückt
 * wird. Die Trennung über `(hover: hover)` ist keine Feinheit: ohne sie behält ein angetippter
 * Navigationspunkt seinen Hover-Zustand, bis irgendwo anders hingetippt wird, und die Leiste
 * zeigt dann zwei aktive Punkte — einen echten und einen klebenden.
 *
 * Beide Zustände tragen nie eine Aussage. Welcher Bereich offen ist, sagt weiterhin
 * `aria-current` und die Bedienfarbe darunter (docs/02).
 */
@media (hover: hover) {
    .marke:hover,
    .nebenleiste a:hover {
        background: var(--flaeche-beruehrt);
        color: var(--text);
    }

    .zielleiste a:hover {
        background: var(--akzent-flaeche);
        color: var(--text);
    }
}

.marke:active,
.nebenleiste a:active {
    background: var(--flaeche-beruehrt);
}

.zielleiste a:active {
    background: var(--akzent-flaeche);
}