/* ===================================================================
   DIE SEITE „WARUM AERONA"

   Die fünfte Seite im neuen Aussehen. Fünf Sätze darüber, was heute
   weh tut, acht Zahlen darüber, was daraus geworden ist, zwei
   Plattformen, zwei Seiten einer Rechnung.

   Wie „Wie alles zusammenhängt" ist hier **nichts anklickbar** —
   nachgesehen: null Verweise im Inhalt. Also auch hier kein Ring. Die
   Seite erklärt, sie führt nicht weiter; was sie tut, ist ankommen.

   Zwei Sorten Zeichen, wie inzwischen üblich: Die zwei Plattformen
   tragen Emojis und bleiben, wie sie sind. Die fünf Sätze über den
   heutigen Zustand tragen Symbolschrift — sie nehmen den Verlauf an
   und bauen sich aus Punkten auf, sobald ihr Abschnitt im Bild steht.
   =================================================================== */

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

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

:root[data-thema] .wy-hero {
    position: relative;
    padding: 3.5rem 0 2.5rem;
    text-align: center;
}

:root[data-thema] .wy-hero h1 {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    line-height: 1.1;
    color: var(--k-text);
    margin-bottom: 1.4rem;
}

:root[data-thema] .wy-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] .wy-accent.zeichen--zerfaellt,
:root[data-thema] .wy-head h2.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .wy-hero p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--k-text-leise);
    font-size: clamp(1rem, 2.2vw, 1.08rem);
    line-height: 1.85;
}

:root[data-thema] .wy-block {
    position: relative;
    margin-bottom: 3rem;
}

:root[data-thema] .wy-head {
    text-align: center;
    margin-bottom: 1.4rem;
}

:root[data-thema] .wy-head h2 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--k-text);
    margin-bottom: 0.5rem;
}

:root[data-thema] .wy-head p {
    color: var(--k-text-still);
    font-size: 0.92rem;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
}

:root[data-thema] .wy-pain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
}

:root[data-thema] .wy-pain__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
}

:root[data-thema] .wy-pain__item > i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    font-size: 0.92rem;
}

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

:root[data-thema] .wy-pain__item strong {
    display: block;
    color: var(--k-text);
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
}

:root[data-thema] .wy-pain__item p {
    color: var(--k-text-leise);
    font-size: 0.88rem;
    line-height: 1.7;
}

:root[data-thema] .wy-outro {
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.8;
}

:root[data-thema] .wy-outro strong {
    color: var(--k-text);
}

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