/* ===================================================================
   DIE SEITE „SPIELE, DIE EINFACH NUR SPIELE SIND"

   Die einunddreißigste Seite im neuen Aussehen — und die VIERTE
   Schwester derselben Bauart. Bühne, nummerierte Abschnitte, Liste,
   Merksatz, Einwände, Verweise; dazu vier Spielgruppen, eine
   Namenstafel und zehn Bauregeln.

   Die vier Schwestern hatten vier eigene Seitenfarben, und alle vier
   waren aus einem anderen Grund falsch:

   · „Ja, hier arbeitet eine Maschine mit" — Türkis: die Erklärung
     fehlte, nur das Stilblatt kannte die Zuordnung
   · „Made in Germany ist kein Aufkleber" — Gold: die Bedeutung fehlte,
     es war die Stimmung eines Siegels
   · „Aerona wird nicht verkauft" — Grün: verständlich, aber Grün heißt
     „erledigt", und hier steht ein Versprechen
   · und hier: **Rosé** (`#fb7185`)

   ## Warum auch Rosé geht

   Rosé sagt „leicht, verspielt, harmlos" — und das ist auf dieser
   Seite nicht falsch, es ist nur nicht ihr Thema. Die Seite handelt
   davon, dass diese Spiele **keine Tricks haben**: kein Bezahlen, kein
   Sammeln, kein Zurückholen. Das ist kein leichtes Thema, sondern ein
   sehr ernstes, freundlich vorgetragen.

   Eine Farbe, die „harmlos" sagt, nimmt genau dem die Kraft. Am
   deutlichsten am Standkasten: Er sagt, was von den Spielen wirklich
   fertig ist — der nüchternste Satz der Seite, in Rosé gerahmt.

   ## Das Blatt, das es von Anfang an richtig machte

   Im Kopf von `spiele-2.css` steht:

       „Die Schwesterdateien liegen jeweils über der Grenze — das ist
        kein Vorbild, sondern eine offene Schuld. Diese Seite macht es
        von Anfang an richtig."

   Diese Haltung bleibt: drei Blätter, keines über dreihundert Zeilen.

   ## Was einen Ring bekommt

   Die drei Verweise am Schluss. Sonst nichts.
   =================================================================== */

:root[data-thema] .sp-main {
    position: relative;

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

:root[data-thema] .sp-bahn {
    max-width: 980px;
    margin: 0 auto;
    padding-inline: 1.5rem;
}

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

:root[data-thema] .sp-buehne::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 8%;
    z-index: 0;
    width: 420px;
    max-width: 70%;
    height: 320px;
    background: radial-gradient(circle,
            var(--k-schein-leise) 0%, transparent 68%);
    pointer-events: none;
}

:root[data-thema] .sp-buehne > * {
    position: relative;
    z-index: 1;
}

:root[data-thema] .sp-schild {
    display: inline-block;
    padding: 0.38rem 0.95rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    color: var(--k-text-still);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

:root[data-thema] .sp-titel {
    margin: 1.5rem 0 1.6rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.1rem, 5.2vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    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] .sp-titel.zeichen--zerfaellt,
:root[data-thema] .sp-kopf h2.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .sp-anriss {
    max-width: 68ch;
    margin-bottom: 1.1rem;
    color: var(--k-text-leise);
    font-size: 1.08rem;
    line-height: 1.75;
}

:root[data-thema] .sp-buehne-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 2.6rem;
    margin-top: 2.6rem;
}

:root[data-thema] .sp-zahl {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

:root[data-thema] .sp-zahl strong {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    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] .sp-zahl span {
    max-width: 22ch;
    color: var(--k-text-still);
    font-size: 0.87rem;
    line-height: 1.5;
}

:root[data-thema] .sp-abschnitt {
    position: relative;
    margin-bottom: 5.5rem;
}

:root[data-thema] .sp-kopf {
    margin-bottom: 2.4rem;
}

:root[data-thema] .sp-nummer {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--k-text-still);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

:root[data-thema] .sp-kopf h2 {
    margin: 0 0 0.9rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--k-text);
}

:root[data-thema] .sp-kopf-text,
:root[data-thema] .sp-text {
    max-width: 66ch;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.78;
}

:root[data-thema] .sp-text {
    margin-bottom: 1.3rem;
}

:root[data-thema] .sp-text em {
    color: var(--k-text-still);
    font-style: normal;
}

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

@media (max-width: 720px) {
    :root[data-thema] .sp-buehne-zahlen {
        gap: 1.6rem 2rem;
    }

    :root[data-thema] .sp-zahl strong {
        font-size: 1.9rem;
    }

    :root[data-thema] .sp-abschnitt {
        margin-bottom: 4rem;
    }
}