/* ===================================================================
   DIE SEITE „WAS NOCH IM KOPF STECKT"

   Die vierunddreißigste Seite im neuen Aussehen — und die längste:
   290 Ideen in dreizehn Gruppen, jede ein kleiner Kasten mit Titel,
   Text und oft einer Plattformmarke.

   ## Die sechste eigene Seitenfarbe — und die einzige, die schon
   ## woanders eine Bedeutung hatte

   Diese Seite war **bernsteinfarben** (`#fbbf24` / `#fcd34d`): Marke,
   Zahlen, das Zeichen im Hinweis, der Rahmen jeder Karte beim Zeigen.

   Türkis, Gold, Grün, Rosé, Himmelblau und Violett kamen alle von
   nirgendwo — sie hatten auf der übrigen Webseite keine Rolle. Bernstein
   hat eine, und zwar eine feste: Es ist die Farbe der WARNKÄSTEN. Sechs
   davon gab es, auf „Was noch kommt", „Herunterladen und Hilfe",
   „Datenschutz", der Office-Seite und den beiden Preisseiten.

   Also stand hier eine ganze Seite in der Farbe, die überall sonst
   „Achtung" heißt — für 290 Einfälle, von denen die meisten nie
   gebaut werden. Gemeint war die Glühbirne. Gelesen wurde die Warnung.

   Die sechs Warnkästen sind inzwischen alle neutral. Diese Seite ist
   die letzte Stelle mit dieser Farbe.

   ## Was einen Ring bekommt

   Die zwölf Gruppenverweise („alle ansehen"). Die 290 Karten nicht:
   Sie führen nirgendwohin. Sie bekamen beim Zeigen einen
   bernsteinfarbenen Rahmen — 290 Kästen, die auf Zeigen antworten,
   ohne dass man irgendwohin kommt. Das ist derselbe Fall wie die
   Werkzeugkarten im Office, nur sechsunddreißigmal so oft.
   =================================================================== */

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

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

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

:root[data-thema] .id-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] .id-hero h1 {
    margin-bottom: 1.1rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2rem, 5.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    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] .id-hero h1.zeichen--zerfaellt,
:root[data-thema] .id-kopf h2.zeichen--zerfaellt {
    visibility: hidden;
}

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

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

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

:root[data-thema] .id-zahl strong {
    display: block;
    margin-bottom: 0.4rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.2rem, 4vw, 1.7rem);
    font-weight: 800;
    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] .id-zahl span {
    color: var(--k-text-still);
    font-size: 0.8rem;
    font-weight: 600;
}

:root[data-thema] .id-hinweis {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem 1.4rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.93rem;
    line-height: 1.75;
}

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

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

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

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