/* ===================================================================
   DIE SEITE „WAS NOCH KOMMT"

   Die achte Seite im neuen Aussehen. Sieben Abschnitte, nach Nähe
   geordnet: oben, woran gerade gearbeitet wird, unten die Träumereien.

   ## Die Farben, die hier verschwinden

   Diese Seite hat den Farbton zur Aussage gemacht — konsequenter als
   jede andere. Die Stufenmarke lief von Grün (nah) über Blau (mittel)
   nach Grau (fern), das Reifezeichen der Ideen von Blau (Skizze) über
   Gelb (Idee) nach Violett (Träumerei), der Hardware-Kasten war
   violett, der Verschlüsselungskasten grün, der Hinweis oben orange.
   Sieben Bedeutungen, sieben Farben.

   Das liest sich schneller, als es aussieht. „Fern" ist nicht grau,
   „Träumerei" nicht violett — die Zuordnung muss man lernen, und dafür
   gibt es keine Legende. Was der Leser wirklich sieht, ist eine bunte
   Seite.

   Es bleibt bei der Abstufung, aber sie läuft über die **Helligkeit**:
   Was nah ist, steht kräftig da; was fern ist, tritt zurück. Das ist
   dieselbe Ordnung, nur muss man sie nicht lernen — sie liest sich
   von selbst. Dieselbe Entscheidung wie bei den Zustandszeichen auf
   „Alle Apps" und den Merkzeichen auf „Updates".

   ## Was einen Ring bekommt

   Die vier Kacheln am Schluss führen weiter — sie bekommen den Ring aus
   Punkten. Die vier Verweise im Fließtext („Die offenen Punkte") sind
   auch Ziele, aber keine Kästen: Sie bekommen den Strich aus Punkten,
   dasselbe wie ein Menüpunkt im Kopf.

   Alles andere ist Aussage und kommt an.
   =================================================================== */

:root[data-thema] .zu-main {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;

    padding-inline: 1.5rem;
    padding-bottom: 6rem;
}

:root[data-thema] .zu-hero {
    position: relative;
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--k-rand-seite);
}

:root[data-thema] .zu-label {
    display: inline-block;
    padding: 4px 11px;
    margin-bottom: 1.4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:root[data-thema] .zu-hero h1 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.9rem, 5.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    background-image: linear-gradient(var(--k-winkel),
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

:root[data-thema] .zu-hero h1.zeichen--zerfaellt,
:root[data-thema] .zu-titel.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .zu-unter {
    max-width: 720px;
    margin-bottom: 1.8rem;
    color: var(--k-text-leise);
    font-size: 1.05rem;
    line-height: 1.85;
}

:root[data-thema] .zu-block {
    position: relative;
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .zu-block:last-child {
    border-bottom: none;
}

:root[data-thema] .zu-stufe {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 0.9rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

:root[data-thema] .zu-stufe--nah {
    color: var(--k-text);
}

:root[data-thema] .zu-stufe--mittel {
    color: var(--k-text-leise);
}

:root[data-thema] .zu-stufe--fern {
    color: var(--k-text-still);
    opacity: 0.85;
}

:root[data-thema] .zu-titel {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: clamp(1.35rem, 3.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

:root[data-thema] .zu-text {
    max-width: 720px;
    margin-bottom: 1.1rem;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.9;
}

:root[data-thema] .zu-text--klein {
    color: var(--k-text-still);
    font-size: 0.92rem;
}

:root[data-thema] .zu-marken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
}

:root[data-thema] .zu-marken span {
    padding: 4px 11px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.8rem;
    font-weight: 600;
}

:root[data-thema] .zu-main .fenster__ring,
:root[data-thema] .zu-main .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .zu-block > .zu-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 1;
}