/* ===================================================================
   DIE SEITE „AERONA WIRD NICHT VERKAUFT"

   Die einundzwanzigste Seite im neuen Aussehen — und die dritte
   Schwester derselben Bauart. Alle drei haben Bühne, nummerierte
   Abschnitte, eine Liste, den Ablauf mit Verbindungslinie, Einwände,
   Fazit und drei Verweise. Und alle drei hatten eine eigene Farbe für
   die ganze Seite:

   · „Ja, hier arbeitet eine Maschine mit" — Türkis
   · „Made in Germany ist kein Aufkleber" — Gold
   · und hier: **Grün**

   ## Warum auch dieses Grün geht

   Bei Türkis fehlte die Erklärung, bei Gold die Bedeutung. Grün hatte
   beides — es stand für die Zusage: was bleibt, was nicht verkauft
   wird. Das ist nachvollziehbar.

   Es hat nur einen Haken, und der steht auf dieser Seite selbst: Grün
   heißt auf jeder Webseite „erledigt". Hier ist aber nichts erledigt.
   „Aerona wird nicht verkauft" ist ein **Versprechen für die Zukunft**,
   kein abgehakter Punkt. Ein grüner Kasten macht daraus eine
   Bestätigung, die niemand geben kann.

   Am deutlichsten sieht man es an einer Stelle, an der das alte Blatt
   selbst schon zurückgerudert ist. Der Ablauf „wie ein Verkauf
   abliefe" trug bewusst KEIN Grün, und der Kommentar dazu lautete:

       „Grau, nicht grün: Dieser Ablauf ist das, was nicht passieren
        soll — ihn in der Farbe der Zusage zu zeigen, verwirrte."

   Genau das gilt für die ganze Seite. Sie beschreibt überwiegend, was
   nicht passieren soll.

   ## Was einen Ring bekommt

   Die drei Verweise am Schluss — Unternehmen, Werbung, Herkunft. Sonst
   nichts.
   =================================================================== */

:root[data-thema] .bl-main {
    position: relative;

    padding-bottom: 6rem;
    overflow-x: clip;
}

:root[data-thema] .bl-bahn {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

:root[data-thema] .bl-buehne::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 8%;
    width: 420px;
    max-width: 70%;
    height: 320px;
    background: radial-gradient(circle,
            var(--k-schein-leise) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

:root[data-thema] .bl-buehne > * {
    position: relative;
    z-index: 1;
}

:root[data-thema] .bl-schild {
    display: inline-block;
    padding: 0.38rem 0.95rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

:root[data-thema] .bl-titel {
    margin: 1.5rem 0 1.6rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.1rem, 5.2vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    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] .bl-titel.zeichen--zerfaellt,
:root[data-thema] .bl-kopf h2.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .bl-anriss {
    max-width: 68ch;
    margin-bottom: 1.1rem;
    color: var(--k-text-leise);
    font-size: 1.08rem;
    line-height: 1.75;
}

:root[data-thema] .bl-buehne-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 2.6rem;
    margin-top: 2.6rem;
}

:root[data-thema] .bl-zahl {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

:root[data-thema] .bl-zahl strong {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    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] .bl-zahl span {
    max-width: 22ch;
    color: var(--k-text-still);
    font-size: 0.87rem;
    line-height: 1.5;
}

:root[data-thema] .bl-abschnitt {
    position: relative;
    margin-bottom: 5.5rem;
}

:root[data-thema] .bl-kopf {
    margin-bottom: 2.4rem;
}

:root[data-thema] .bl-nummer {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--k-text-still);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

:root[data-thema] .bl-kopf h2 {
    margin: 0 0 0.9rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--k-text);
}

:root[data-thema] .bl-kopf-text,
:root[data-thema] .bl-text {
    max-width: 66ch;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.78;
}

:root[data-thema] .bl-text {
    margin-bottom: 1.3rem;
}

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

@media (max-width: 720px) {
    :root[data-thema] .bl-buehne-zahlen {
        gap: 1.6rem 2rem;
    }

    :root[data-thema] .bl-zahl strong {
        font-size: 1.9rem;
    }

    :root[data-thema] .bl-abschnitt {
        margin-bottom: 4rem;
    }
}