/* ═══════════════════════════════════════════════════════════════
   Startseite der Installation — toloro#2659
   Die Wurzel „/" jedes Hostnamens: drei Eingänge mit Erklärung.

   Regeln, die diese Datei einhält (D3/D4 aus dem Issue):
   · KEIN Build-Schritt, KEIN Framework — eine .css-Datei, fertig.
   · KEINE Fremdschrift von fremden Servern. Inter liegt seit
     toloro#1802 im eigenen Haus (static/desktop/fonts/); davor ging
     bei jedem Seitenaufruf die IP des Anwenders an Google. Fehlt die
     Datei, trägt der Systemschriftstapel die Seite vollständig.
   · Handy zuerst: eine Spalte, Kacheln ab 720px nebeneinander.
   · Hell und dunkel nach Systemeinstellung.
   · Sichtbarer Tastaturfokus auf jedem Ziel, Kontrast nach WCAG AA.

   Die Farbwerte sind die des Hauses aus desktop/css/tokens.css
   (Navy #15293F, Orange #E87A2A) — hier als eigener, kleiner Satz,
   weil tokens.css kein Dunkelbild kennt und mit Reset, Alpine-Regeln
   und Schriftbindung deutlich mehr mitbringt, als eine einzelne Seite
   ohne Anmeldung laden sollte.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hausschrift, aus dem eigenen Haus ───────────────────────── */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/desktop/fonts/inter-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/desktop/fonts/inter-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Farben: hell ist die Vorgabe ────────────────────────────── */
:root {
    color-scheme: light dark;

    --navy: #15293F;
    /* Das Toloro-Orange. Steht seit toloro#2765 NUR noch hier: Eine
       Hausfarbe je Hostname gibt es nicht mehr, die Seite ist neutral
       Toloro („Branding kommt später", Christian 17.09.2026). */
    --akzent: #E87A2A;

    --grund: #F8FAFC;
    --grund-tief: #EEF2F7;
    --flaeche: #FFFFFF;
    --schrift: #1E293B;
    /* 4,76:1 auf Weiß, 4,55:1 auf --grund — die Schranke aus
       tokens.css (#1805). Kein hellerer Ton in dieser Palette. */
    --schrift-leise: #64748B;
    --rand: #E2E8F0;
    --rand-wach: #CBD5E1;
    --schatten: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .07);
    --schatten-wach: 0 2px 4px rgba(15, 23, 42, .07), 0 20px 44px rgba(15, 23, 42, .13);
    /* Knopfschrift auf der Akzentfläche. Auf dem Toloro-Orange
       (#E87A2A, L = 0,285) bringt Navy 6,5:1, Weiß nur 2,8:1 — also
       Navy. Eine Installation mit sehr dunkler Hausfarbe kehrt das um;
       dafür gibt es --akzent-schrift als eigene Stellschraube. */
    --akzent-schrift: #15293F;

    --masse: 1120px;
    --rundung: 16px;
    --rundung-klein: 10px;
}

/* ── Farben: dunkel nach Systemeinstellung ───────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --grund: #0B1520;
        --grund-tief: #060D15;
        --flaeche: #15202D;
        --schrift: #E8EDF3;
        /* 7,1:1 auf --flaeche. Der helle Grund-Ton aus tokens.css
           (#64748B) bringt auf dunkler Fläche nur 2,9:1 und wäre hier
           genau der Fehler, den #1805 im Hellen behoben hat. */
        --schrift-leise: #9FB0C3;
        --rand: #243547;
        --rand-wach: #354a61;
        --schatten: 0 1px 2px rgba(0, 0, 0, .40), 0 12px 32px rgba(0, 0, 0, .45);
        --schatten-wach: 0 2px 4px rgba(0, 0, 0, .45), 0 20px 44px rgba(0, 0, 0, .55);
    }
}

/* ── Grundlage ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--schrift);
    background: var(--grund);
    /* Der ruhige Verlauf ist die ganze „Show": ein Hauch Hausfarbe oben,
       darunter der Grund. Fancy heißt hochwertig, nicht laut. */
    background-image:
            radial-gradient(1200px 520px at 50% -160px,
            color-mix(in srgb, var(--akzent) 16%, transparent), transparent 70%),
            radial-gradient(900px 420px at 88% -60px,
            color-mix(in srgb, var(--navy) 12%, transparent), transparent 72%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

/* Browser ohne color-mix bekommen keinen Verlauf — und das ist in
   Ordnung: Der Grund steht darunter, die Seite bleibt vollständig. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    body { background-image: none; }
}

.rahmen {
    max-width: var(--masse);
    margin: 0 auto;
    padding: 28px 20px calc(48px + env(safe-area-inset-bottom, 0px));
}

/* ── Sprungmarke für die Tastatur ────────────────────────────── */
.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: var(--flaeche);
    color: var(--schrift);
    border-radius: 0 0 var(--rundung-klein) 0;
    z-index: 10;
}

.sprung:focus {
    left: 0;
}

/* ── Kopf ────────────────────────────────────────────────────── */
.kopf {
    text-align: center;
    padding: 12px 0 30px;
}

/* Das Toloro-Produktlogo (toloro#2765). Es ist hochkant — Zeichen,
   Wortmarke, Claim übereinander —, deshalb bemisst es sich an der Höhe
   und nicht an der Breite. */
.kopf img.logo {
    max-height: clamp(88px, 15vw, 120px);
    max-width: min(240px, 62vw);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Hell UND dunkel lesbar (Auflage aus toloro#2765). Die Wortmarke „tol"
   und der Claim sind Navy (#15293F) auf durchsichtigem Grund — auf dem
   dunklen Grund dieser Seite wäre davon die Hälfte nicht mehr zu sehen.
   Kein Filter (der fräße das Orange mit) und keine zweite Bilddatei
   (eine Marke, zwei Dateien, irgendwann zwei Stände): das Logo bekommt
   im Dunkeln seine eigene helle Fläche, in derselben Form wie die
   Kacheln darunter. */
@media (prefers-color-scheme: dark) {
    .kopf img.logo {
        background: #FFFFFF;
        border-radius: var(--rundung);
        padding: 12px 18px;
        box-shadow: var(--schatten);
    }
}

.kopf h1 {
    margin: 18px 0 0;
    font-size: clamp(1.6rem, 5.2vw, 2.5rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
}

.kopf p.unterzeile {
    margin: 10px auto 0;
    max-width: 44rem;
    color: var(--schrift-leise);
    font-size: 1.02rem;
}

/* ── Die drei Eingänge ───────────────────────────────────────── */
.eingaenge {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 720px) {
    .eingaenge { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.kachel {
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--rundung);
    padding: 24px 22px 22px;
    box-shadow: var(--schatten);
    /* Der Streifen oben in der Hausfarbe: das einzige Stück Dekoration. */
    background-image: linear-gradient(var(--akzent), var(--akzent));
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: top left;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Die Kachel hebt sich, wenn die Maus oder die Tastatur auf ihrem Ziel
   steht — :focus-within, damit Tastaturbedienung dasselbe sieht. */
.kachel:hover,
.kachel:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--schatten-wach);
    border-color: var(--rand-wach);
}

.kachel.ohne-ziel {
    background-image: linear-gradient(var(--rand-wach), var(--rand-wach));
}

.kachel h2 {
    margin: 4px 0 0;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.kachel .fuer-wen {
    margin: 6px 0 0;
    font-size: .88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--schrift-leise);
}

.kachel .text {
    margin: 14px 0 0;
    color: var(--schrift);
}

.kachel .hinweis {
    margin: 12px 0 0;
    font-size: .9rem;
    color: var(--schrift-leise);
}

/* Der Knopf steht immer unten, damit die drei Kacheln eine Linie halten. */
.kachel .knopf-zeile { margin-top: auto; padding-top: 20px; }

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--rundung-klein);
    background: var(--akzent);
    color: var(--akzent-schrift);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: filter .15s ease, transform .15s ease;
}

.knopf:hover { filter: brightness(.94); }
.knopf:active { transform: translateY(1px); }
.knopf .pfeil { transition: transform .15s ease; }
.knopf:hover .pfeil { transform: translateX(3px); }

/* ── Fuß ─────────────────────────────────────────────────────── */
.fuss {
    margin-top: 34px;
    text-align: center;
    color: var(--schrift-leise);
    font-size: .92rem;
}

.fuss a { color: inherit; }

.fuss p { margin: 4px 0; }

/* ── Tastaturfokus: ein Ring, überall sichtbar ───────────────── */
:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Sanfte Bewegung beim Laden (D4) ─────────────────────────── */
@keyframes auftauchen {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .kopf,
    .kachel,
    .fuss {
        /* `backwards` und NICHT `both`: Mit `both` bliebe der Endrahmen
           (transform: none) nach dem Lauf stehen und schlüge jede spätere
           Regel — die Kachel könnte sich beim Überfahren nicht mehr heben,
           weil eine Animation gegen eine gewöhnliche Deklaration gewinnt.
           `backwards` deckt nur die Verzögerung ab; danach gilt wieder der
           gewöhnliche Zustand, und der ist derselbe. */
        animation: auftauchen .5s cubic-bezier(.22, .61, .36, 1) backwards;
    }

    .kachel:nth-child(1) { animation-delay: .06s; }
    .kachel:nth-child(2) { animation-delay: .12s; }
    .kachel:nth-child(3) { animation-delay: .18s; }
    .fuss { animation-delay: .24s; }
}