/* ===================================================================
   DIE SEITE „WAS NACH AUSSEN GEHT"

   Die vierundzwanzigste Seite im neuen Aussehen. Alles, was im
   Werbe-Studio für den Auftritt nach außen entstanden ist: Bilder und
   Videos, chronologisch, mit Entstehungsdatum — zwölf Beiträge an einem
   Zeitstrang.

   Bewusst kein Nachbau eines sozialen Netzwerks: keine erfundenen
   Likes, keine Kommentare, keine Reichweitenzahlen. Was hier steht,
   ist nachprüfbar.

   ## Die vierte eigene Seitenfarbe — und die vierte, die geht

   Diese Seite war **Himmelblau** (`#38bdf8`), von der Marke über die
   Zahlen und den Hinweis bis zum Zeitstrang und jedem Punkt darauf.
   Das ist ein anderes Blau als die Hausfarbe (`#60a5fa`) — nah genug,
   um wie ein Versehen zu wirken, weit genug, um neben ihr falsch
   auszusehen.

   Und es sagte nichts. Anders als bei den drei Schwesterseiten gab es
   hier nicht einmal einen Gedanken dahinter, den man hätte prüfen
   können.

   ## Der Zeitstrang bleibt

   Er ist das einzige Bauteil dieser Seite, das seine Auszeichnung
   verdient: Er zeigt, dass die Beiträge eine Reihenfolge haben. Er
   bekommt deshalb den Verlauf, der nach unten ausläuft — je weiter
   zurück, desto blasser.

   ## Was einen Ring bekommt

   Die acht Ziele unter den Beiträgen („ansehen bei …"). Die Bilder
   selbst nicht: Sie öffnen die Großansicht auf derselben Seite und
   haben dafür ihre eigene Antwort (siehe `posts-gross.css`).
   =================================================================== */

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

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

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

:root[data-thema] .po-hero::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
    width: min(420px, 100%);
    height: 260px;
    background: radial-gradient(circle at 30% 40%,
            var(--k-schein-leise) 0%, transparent 70%);
    pointer-events: none;
}

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

:root[data-thema] .po-unter {
    max-width: 66ch;
    margin: 0 0 2rem;
    color: var(--k-text-leise);
    font-size: 1.06rem;
    line-height: 1.75;
}

:root[data-thema] .po-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
}

:root[data-thema] .po-zahl__wert {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    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] .po-zahl__text {
    margin-top: 0.4rem;
    color: var(--k-text-still);
    font-size: 0.82rem;
    line-height: 1.45;
}

:root[data-thema] .po-hinweis {
    position: relative;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 74ch;
    margin-top: 2.2rem;
    padding: 1.05rem 1.25rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.94rem;
    line-height: 1.65;
}

:root[data-thema] .po-hinweis > i {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

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

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

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

:root[data-thema] .po-block__titel {
    margin: 0 0 0.7rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--k-text);
}

:root[data-thema] .po-block__unter {
    max-width: 68ch;
    margin: 0 0 1.6rem;
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.7;
}

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

:root[data-thema] .po-strang::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background-image: linear-gradient(180deg,
            var(--k-verlauf-a) 0%,
            var(--k-verlauf-b) 45%,
            transparent 100%);
}

:root[data-thema] .po-tag {
    position: relative;
    margin-bottom: 2.6rem;
}

:root[data-thema] .po-tag::before {
    content: "";
    position: absolute;
    inset-inline-start: -2.2rem;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--k-vertieft-tief);
    box-shadow: 0 0 0 2px var(--k-rand-oben), var(--k-glas-tiefe-randlos);
}

:root[data-thema] .po-tag__datum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 1.3rem;
}

:root[data-thema] .po-tag__wann {
    color: var(--k-text);
    font-size: 1.02rem;
    font-weight: 750;
}

:root[data-thema] .po-tag__zahl {
    padding: 2px 8px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

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

    :root[data-thema] .po-strang {
        padding-left: 1.6rem;
    }

    :root[data-thema] .po-tag::before {
        inset-inline-start: -1.6rem;
        width: 13px;
        height: 13px;
    }

    :root[data-thema] .po-zahlen {
        gap: 1.4rem 2rem;
    }
}

:root[data-thema] .po-post .po-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
}