/* ===================================================================
   DIE STARTSEITE — DIE ZAHLENREIHE

   Ein Abschnitt, eine große Zahl und vier kleine daneben. Er sagt, wie
   viel hier von einer Person gebaut worden ist.

   ## Was er vorher hatte

   · **Den falschen Verlauf.** Die große Zahl trug
     `#60a5fa → #3b82f6` — Blau nach Blau. Das ist nicht der
     Aerona-Verlauf, sondern ein Rest aus der Zeit davor. Aus zwei
     Metern Entfernung sah es aus wie eine einfarbige Zahl.
   · **Zwei flache Tönungen** für die Kästen, mit ringsum gleich hellem
     Rand.
   · **Vier feste Farben** für die Schrift.

   ## Warum hier NICHTS beim Zeigen passiert

   Die vier kleinen Kästen bekommen keinen Ring. Das ist Absicht und
   folgt derselben Regel wie bei den Bedingungen im Erklärfenster:
   **Worauf man zeigen kann, antwortet — was etwas aussagt, steht still.**
   Diese Kästen sind keine Ziele; man kann sie nicht anklicken. Ein Ring
   um sie herum würde behaupten, dort ginge es weiter.

   Die große Zahl baut sich einmal aus Punkten auf, wenn sie ins Bild
   kommt. Das ist die einzige Bewegung im ganzen Abschnitt, und sie sagt
   etwas: Diese Zahl ist zusammengesetzt.
   =================================================================== */

:root[data-thema] .gross-zahl {
    position: relative;
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
}

:root[data-thema] .gross-zahl__wert {
    font-size: clamp(2.4rem, 9vw, 5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

:root[data-thema] .gross-zahl__wert.zeichen--zerfaellt {
    visibility: hidden;
}

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

:root[data-thema] .gross-zahl__label {
    margin-top: 0.7rem;
    color: var(--k-text-leise);
    font-size: 0.95rem;
    font-weight: 600;
}

:root[data-thema] .zahl-teiler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}

:root[data-thema] .zahl-teil {
    padding: 1.1rem 1rem;
    text-align: center;
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    min-width: 0;
}

:root[data-thema] .zahl-teil strong {
    display: block;
    color: var(--k-text);
    font-size: clamp(1rem, 3vw, 1.3rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
}

:root[data-thema] .zahl-teil span {
    color: var(--k-text-still);
    font-size: 0.8rem;
    font-weight: 600;
}