/* ===================================================================
   DIE SEITE „KLARE HALTUNG"

   Die zehnte Seite im neuen Aussehen. Zwei Fälle, in denen Aerona
   bewusst nicht mitgeht, mit acht Begründungen — dazu drei Karten, was
   das für den Leser heißt, und ein Schlusswort mit Unterschrift.

   ## Die einzige Seite, die niemandem etwas anbietet

   Auf jeder anderen Seite steht, was es gibt oder geben wird. Hier
   steht, was es NICHT geben wird, und warum. Das ändert alles am
   Aussehen:

   · **Kein einziger Verweis im Inhalt** — nachgezählt null. Also kein
     Ring, kein Strich. Wer hierherkommt, soll lesen, nicht
     weiterklicken.
   · **Die Fälle sind keine Karten, sondern Absätze mit Gewicht.** Ein
     abgesetzter Kasten sagt „Randnotiz"; das hier ist der Hauptteil.
   · **Der Verlauf steht genau einmal**, auf dem Wort „Haltung" im
     Einstieg. Danach nie wieder. Eine Seite, die von Zurückhaltung
     handelt, kann sich schlecht selbst schmücken.

   ## Was hier an Farbe verschwindet

   Der Einleitungskasten war blau getönt, die drei Karten unten grün.
   Beides ist dieselbe alte Gewohnheit: Blau für „Hinweis", Grün für
   „das Gute". Und beides sagt hier etwas Falsches — die drei Karten
   sind keine Erfolgsmeldungen, sondern Folgen einer Absage.

   Und der Fall selbst trug links einen grauen Balken. Er bleibt als
   Gedanke, aber als Kante der Scheibe: Was ein Kasten sagt, sagt seine
   Form, nicht ein Streifen davor.
   =================================================================== */

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

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

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

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

:root[data-thema] .st-hero h1 .st-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] .st-accent.zeichen--zerfaellt,
:root[data-thema] .st-case h2.zeichen--zerfaellt,
:root[data-thema] .st-means h2.zeichen--zerfaellt {
    visibility: hidden;
}

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

:root[data-thema] .st-intro {
    position: relative;
    padding: 1.6rem 1.8rem;
    margin-bottom: 4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.85;
}

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

:root[data-thema] .st-case {
    position: relative;
    padding: 2.2rem 2rem;
    margin-bottom: 2rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
}

:root[data-thema] .st-case__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 10px;
    margin-bottom: 1.2rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:root[data-thema] .st-case h2 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: clamp(1.5rem, 3.5vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 0.9rem;
}

:root[data-thema] .st-case__lead {
    color: var(--k-text-leise);
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.8rem;
}

:root[data-thema] .st-means {
    position: relative;
    margin-top: 4rem;
}

:root[data-thema] .st-means h2 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 0.8rem;
}

:root[data-thema] .st-means > p {
    max-width: 540px;
    margin: 0 auto 2.5rem;
    color: var(--k-text-still);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
}

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

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

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

    :root[data-thema] .st-case {
        padding: 1.6rem 1.3rem;
    }

    :root[data-thema] .st-intro {
        padding: 1.3rem 1.3rem;
        margin-bottom: 2.8rem;
    }
}