/* ===================================================================
   DIE SEITE „NEU IN AERONA"

   Die sechsundzwanzigste Seite im neuen Aussehen. Vierzehn Meldungen
   an einem Strang, vier Filterknöpfe darüber, ein Schlusssatz.

   ## Hier fiel die erste ungefragte Endlosbewegung

   Der grüne Punkt im Stempel „Stand: …" pulsierte alle 2,4 Sekunden,
   und zwar **für immer** — `animation: … infinite`, ab dem Moment, in
   dem die Seite geladen war. Das ist es, was Regel 21.1 verbietet.

   Nachgezählt gibt es `infinite` noch an drei weiteren Stellen: der
   Hammer im Statusband, der Ring um einen Kopfknopf, der Rahmen um ein
   offenes Klappmenü. Alle drei laufen NUR, solange man hinzeigt oder
   das Menü offen ist — der Hammer bekommt seine Klasse vom Skript und
   verliert sie wieder. Sie antworten also, sie drängen sich nicht auf.

   Von allein liefen beim Umbau noch vier weitere, alle auf Seiten, die
   damals noch alt waren: das Paket-Zeichen im Store (`pulse-slow`), der
   schwebende Astronaut auf der Fehlerseite und im Office ein blinkender
   Textcursor samt zwei Schwebern. Alle vier sind inzwischen abgestellt.

   Was der Punkt sagen sollte, war „diese Seite lebt". Das stimmt sogar
   — nur sagt es der Stempel schon im Klartext, mit Datum. Ein Punkt,
   der daneben ewig weiterschlägt, sagt es nicht noch einmal; er sagt
   „sieh mich an", bis man wegsieht.

   Er bleibt als Punkt, ohne Uhr. Und weil er zu einer Angabe gehört
   und nicht zu einer Meldung, bekommt er dieselbe stille Behandlung
   wie der Stempel um ihn herum.

   ## Was einen Ring bekommt

   Nichts. Die vierzehn Verweise stehen am Fuß ihrer Meldung, mitten im
   Text — sie bekommen den Strich aus Punkten (`js/neuigkeiten-leben.js`),
   wie im Buch, in den Beiträgen und im großen Artikel.

   Die vier Filterknöpfe sind der Sonderfall: Sie führen nirgendwohin,
   sie stellen etwas um. Ihre Antwort steht in `neuigkeiten-teile.css`.
   =================================================================== */

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

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

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

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

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

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

:root[data-thema] .wn-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.85rem;
    font-weight: 600;
}

:root[data-thema] .wn-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-image: var(--k-verlauf);
}

:root[data-thema] .wn-feed {
    position: relative;
    padding-left: 2.2rem;
}

:root[data-thema] .wn-feed::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-image: linear-gradient(180deg,
            var(--k-verlauf-a) 0%,
            var(--k-verlauf-b) 45%,
            transparent 100%);
}

:root[data-thema] .wn-item {
    position: relative;
    padding: 0 0 2.6rem;
}

:root[data-thema] .wn-item:last-child {
    padding-bottom: 0;
}

:root[data-thema] .wn-item::before {
    content: "";
    position: absolute;
    left: -2.2rem;
    top: 0.45rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--k-vertieft-tief);
    box-shadow: 0 0 0 2px var(--k-rand-dicke);
    transition: box-shadow var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .wn-item.is-fresh::before {
    background: var(--k-vertieft-tief);
    box-shadow: 0 0 0 2px var(--k-rand-oben), var(--k-glas-tiefe-randlos);
}

:root[data-thema] .wn-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

:root[data-thema] .wn-date {
    color: var(--k-text-still);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

:root[data-thema] .wn-ago {
    color: var(--k-text-still);
    font-size: 0.8rem;
    opacity: 0.8;
}

:root[data-thema] .wn-item__title {
    margin-bottom: 0.55rem;
    color: var(--k-text);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.4;
}

:root[data-thema] .wn-item__desc {
    margin-bottom: 0.8rem;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.8;
}

:root[data-thema] .wn-empty {
    padding: 3rem 1rem;
    color: var(--k-text-still);
    font-size: 0.98rem;
    text-align: center;
}

:root[data-thema] .wn-outro {
    position: relative;
    margin-top: 4.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--k-rand-dicke);
    color: var(--k-text-still);
    font-size: 0.98rem;
    line-height: 1.8;
    text-align: center;
}

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

:root[data-thema] .wn-item .wn-pixel,
:root[data-thema] .wn-outro .wn-pixel {
    left: 0;
    top: 0;
}

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

    :root[data-thema] .wn-feed {
        padding-left: 1.7rem;
    }

    :root[data-thema] .wn-item::before {
        left: -1.7rem;
    }

    :root[data-thema] .wn-item__title {
        font-size: 1.15rem;
    }
}