/* ===================================================================
   DIE STARTSEITE — DER EINSTIEG

   Der erste Abschnitt der Seite: zwei Zeilen Überschrift, ein Absatz,
   zwei Wege weiter, eine Ortszeile. Was er vorher hatte, war der
   Bauzustand von vor dem neuen Kopf:

   · **Zehn feste Farben** — `#94a3b8`, `#e2e8f0`, `#cbd5e1`, `#64748b`
     für die Schrift, `#3b82f6` und `#2563eb` für den Hauptknopf. Keine
     wusste, ob Tag oder Nacht ist.
   · **Ein flaches Blau** auf dem Hauptknopf, während überall sonst der
     Aerona-Verlauf steht.
   · **Ein Pulsen ohne Ende** (`glowPulse`, 4 Sekunden, `infinite`) auf
     dem hervorgehobenen Wort, dazu ein 80 Pixel weiter Schein hinter der
     Überschrift. Regel 21.1: Eine Bewegung, die nie aufhört, sagt nach
     zwei Sekunden nichts mehr. Genau dafür sind im Kopf schon der
     kreisende Lichtstrahl und drei pochende Kästen gewichen.
   · **Der zweite Knopf war ein Rahmen** mit einem Grauton darin und
     wurde beim Zeigen blau.

   ## Was hier NICHT steht

   Die beiden Knöpfe. Sie sind keine neuen Bauteile: Der Hauptknopf ist
   dasselbe Ding wie „Jetzt starten" oben in der Leiste, der zweite
   dieselbe Glasscheibe wie jede Mulde im Kopf. Beide stehen deshalb in
   `knopf-voll.css` und `glas.css` mit in den Listen — hier steht nur,
   was am Einstieg eigen ist: seine Maße.

   Das ist die Regel, an der diese Seite hängt: Sobald etwas ein zweites
   Mal vorkommt, wird es geteilt, nicht abgeschrieben.
   =================================================================== */

:root[data-thema] .hero {
    max-width: 1100px;
    min-height: 0;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    text-align: center;
    background: none;
    overflow: visible;
}

:root[data-thema] .hero h1 {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    font-size: clamp(2.1rem, 6.5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--k-text);

    text-shadow: none;
    animation: none;
    margin-bottom: 1.8rem;
}

:root[data-thema] .hero-akzent {
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: none;
    animation: none;
}

:root[data-thema] .hero-akzent.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .hero-text {
    max-width: 700px;
    margin: 0 auto 2.2rem;
    color: var(--k-text-leise);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.9;
    opacity: 1;
    animation: none;
}

:root[data-thema] .hero-text strong {
    display: block;
    margin-top: 0.9rem;
    color: var(--k-text);
    font-weight: 700;
}

:root[data-thema] .hero-wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

:root[data-thema] .hero-weg {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.7rem;
    border-radius: var(--k-rund-pille);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
}

:root[data-thema] .hero-weg:not(.hero-weg--haupt) {

    position: relative;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    color: var(--k-text-leise);
    transition: color var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .hero-weg > .fenster__ring {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .hero-weg:not(.hero-weg--haupt):hover,
:root[data-thema] .hero-weg:not(.hero-weg--haupt):focus-visible {
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .hero-weg--haupt {
    background: var(--k-verlauf-tief);
    border: 0;
    color: var(--k-auf-akzent);
}

:root[data-thema] .hero-ort {
    color: var(--k-text-still);
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

:root[data-thema] .hero h1 > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 1;
}