/* ===================================================================
   DREI KLEINE SEITEN: ZAHLEN, ZEITSTRAHL, ARBEITSWEISE

   Die Seiten elf, zwölf und dreizehn im neuen Aussehen — und sie
   kommen zusammen, weil sie sich schon vorher ein Stilblatt geteilt
   haben. Das war eine gute Entscheidung und bleibt eine: Drei Seiten,
   die aus demselben Einstieg, einer Liste und einem Schlusshinweis
   bestehen, brauchen keine drei fast gleichen Dateien.

   · `numbers.html`  — acht Kennzahlen, die hochzählen
   · `timeline.html` — zehn Schritte an einem Strang
   · `rules.html`    — neun Sätze über die Arbeitsweise

   ## Was hier an Farbe verschwindet

   Die Zahlen liefen in einem Verlauf von **Blau nach Grün** — der
   einzigen Stelle der ganzen Webseite mit dieser Mischung. Grün heißt
   dort nichts; es ist keine Erfolgsmeldung, sondern nur eine Zahl. Sie
   bekommen den Verlauf, den alles trägt.

   Der Strang des Zeitstrahls lief von Grau nach Blau, die großen
   Schritte hatten einen blauen Schein. Beides bleibt der Sache nach —
   die Richtung und der Unterschied groß/klein —, nur trägt es jetzt
   der Verlauf und die Helligkeit statt eines zweiten Farbtons.

   Und die neun Regeln wurden beim Darüberfahren blau. Das war doppelt
   falsch: erstens die Farbe, zweitens überhaupt eine Antwort. **Eine
   Regel ist kein Ziel.** Sie führt nirgendwohin, und was auf Zeigen
   reagiert, behauptet, dass es das täte.
   =================================================================== */

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

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

:root[data-thema] .ex-hero {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
}

:root[data-thema] .ex-hero h1 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--k-text);
    margin-bottom: 1.2rem;
}

:root[data-thema] .ex-hero h1 .ex-accent {
    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] .ex-accent.zeichen--zerfaellt,
:root[data-thema] .ex-section-title.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .ex-hero p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--k-text-leise);
    font-size: 1.08rem;
    line-height: 1.85;
}

:root[data-thema] .ex-section-title {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 3.5rem 0 1.2rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .ex-note {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem 1.4rem;
    margin-top: 2.5rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.93rem;
    line-height: 1.8;
}

:root[data-thema] .ex-note > i {
    flex-shrink: 0;
    margin-top: 0.25rem;
    font-size: 1rem;
}

:root[data-thema] .ex-note > i::before {
    background-image: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-thema] .ex-note a {
    position: relative;
    color: var(--k-text);
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--k-rand-seite);
}

:root[data-thema] .ex-note.hat-pixelstrich a {
    border-bottom-color: transparent;
}

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

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

@media (max-width: 768px) {
    :root[data-thema] .ex-main {
        padding-inline: 1.1rem;
        padding-bottom: 4rem;
    }
}