/* ===================================================================
   DIE SEITE „ANGEFANGEN. NICHT FERTIG GEWORDEN."

   Die sechsunddreißigste Seite im neuen Aussehen. Was eingestellt
   wurde, und darunter — in einem eigenen Reiter — das vollständige
   Archiv des alten Guides.

   ## Die eine Bewegung, die schon vorher richtig war

   Die Karten der eingestellten Projekte stehen in GRAU (`grayscale(1)`,
   72 Prozent Deckung) und bekommen ihre Farbe zurück, wenn man
   hinzeigt. Darüber liegt eine feine Schraffur, die dabei verschwindet.

   Das ist die beste Bewegung der ganzen Webseite, und sie war schon da,
   bevor es das Punktebild gab. Sie sagt genau das Richtige: Diese
   Projekte sind verblasst, aber sie sind nicht weg — wer hinsieht,
   bekommt sie zurück.

   Sie bleibt unverändert. Was fällt, ist der blaue Rahmen, der beim
   Zeigen dazukam: Die einzige Karte, die weiterführt, bekommt den Ring
   aus Punkten, und der sagt dasselbe in der Sprache der Seite.

   ## Und der siebte Zitatbalken bleibt auch

   Im Archivteil steht ein grauer Balken vor einem Zitat. Er markiert
   dort etwas: den einzigen fremden Text auf der Seite. Alle anderen
   sind gefallen, weil sie an Absätzen standen, die ohnehin schon eine
   eigene Fläche hatten.
   =================================================================== */

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

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

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

:root[data-thema] .dc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.6rem;
    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: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

:root[data-thema] .dc-faded {
    background-image: linear-gradient(180deg,
            var(--k-text-still) 0%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

:root[data-thema] .dc-hero h1 .dc-faded.zeichen--zerfaellt,
:root[data-thema] .dc-hist__head h2.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .dc-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--k-text-leise);
    font-size: 1.12rem;
    line-height: 1.85;
}

:root[data-thema] .dc-note {
    position: relative;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    max-width: 760px;
    margin: 0 auto 4rem;
    padding: 1.4rem 1.6rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.98rem;
    line-height: 1.7;
}

:root[data-thema] .dc-note > i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    font-size: 1.15rem;
}

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

:root[data-thema] .dc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 3rem;
}

:root[data-thema] .dc-tab {
    position: relative;
    padding: 0.6rem 1.3rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .dc-tab:hover,
:root[data-thema] .dc-tab:focus-visible {
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .dc-tab.is-active {
    color: var(--k-text);
}

:root[data-thema] .dc-tab.is-active::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background-image: var(--k-verlauf);
    pointer-events: none;
}

:root[data-thema] .dc-panel[hidden] {
    display: none;
}

:root[data-thema] .dc-outro {
    position: relative;
    max-width: 640px;
    margin: 5rem auto 0;
    color: var(--k-text-still);
    font-size: 1rem;
    line-height: 1.85;
    text-align: center;
}

:root[data-thema] .dc-outro strong {
    color: var(--k-text-leise);
    font-weight: 600;
}

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

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

    :root[data-thema] .dc-note {
        margin-bottom: 3rem;
    }
}

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