/* ===================================================================
   DIE SEITE „SICHERHEIT"

   Die neunte Seite im neuen Aussehen. Dreizehn Punkte: zehn abgestellt,
   drei offen. Dazu drei Kennzahlen und ein Hinweis, warum die offenen
   offen stehen dürfen.

   ## Die schwerste Farbentscheidung bisher

   Grün für „behoben", Bernstein für „offen" — hier hat die Farbe zum
   ersten Mal ein Argument auf ihrer Seite. Bei einer Sicherheitsseite
   ist der Unterschied nicht Geschmack, sondern die Aussage selbst.

   Sie fällt trotzdem weg, und zwar aus dem Grund, den die Seite in
   ihrem eigenen Text nennt: **Die offenen Punkte sollen genauso
   prominent sein wie die behobenen.** Grün und Bernstein tun das
   Gegenteil. Bernstein ist die Farbe der Warnung; sie macht aus drei
   ehrlich hingeschriebenen Sätzen einen Alarm, und aus zehn behobenen
   ein Häkchen zum Abnicken. Genau die Wertung, die diese Seite nicht
   will.

   Was den Unterschied trägt, ist stärker als eine Farbe:

   · **Die Abschnitte trennen sie ohnehin.** Zehn stehen unter „Was wir
     abgestellt haben", drei unter „Was noch offen ist". Kein Punkt
     steht je in gemischter Gesellschaft — nachgezählt, nicht vermutet.
   · **Das Zeichen sagt es.** Schild gegen Warndreieck.
   · **Der Satz sagt es.** Bei den offenen steht dabei, was geplant ist.

   Die Farbe war die vierte Stimme im Chor, und die einzige, die etwas
   anderes sagte als die drei davor.

   ## Was sich bewegt

   Kein einziger Verweis im Inhalt — nachgezählt null. Also kein Ring
   auf dieser Seite. Die Überschriften kommen an, die dreizehn Zeichen
   bauen sich auf, sonst nichts. Für eine Seite, die Ruhe ausstrahlen
   soll, ist das die richtige Menge.
   =================================================================== */

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

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

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

:root[data-thema] .sec-label {
    display: inline-block;
    padding: 4px 11px;
    margin-bottom: 1.4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:root[data-thema] .sec-hero h1 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.9rem, 5.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    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] .sec-hero h1.zeichen--zerfaellt,
:root[data-thema] .sec-block__titel.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .sec-unter {
    max-width: 740px;
    margin-bottom: 2.2rem;
    color: var(--k-text-leise);
    font-size: 1.05rem;
    line-height: 1.85;
}

:root[data-thema] .sec-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
}

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

:root[data-thema] .sec-zahl strong {
    display: block;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: var(--k-text);
}

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

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

:root[data-thema] .sec-block__titel {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--k-text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.9rem;
}

:root[data-thema] .sec-block__text {
    max-width: 740px;
    margin-bottom: 1.4rem;
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.8;
}

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

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