/* ===================================================================
   DIE SEITE „ULTRA CHROME PIXEL GLASS"

   Die achtunddreißigste Seite — und die einzige, die nicht über Aerona
   spricht, sondern darüber, WIE Aerona aussieht.

   ## Warum sie sich selbst benutzt

   Es gibt keine Bildschirmfotos darauf. Jedes Beispiel ist das echte
   Bauteil: Die Glasprobe ist eine Scheibe mit denselben Marken wie
   jeder Kasten, der Ring am Knopf ist derselbe Ring, die Überschriften
   bauen sich aus Punkten auf, während man sie liest.

   Das ist keine Spielerei, sondern die einzige ehrliche Form. Ein Bild
   von einem Bauteil zeigt, wie es einmal aussah. Das Bauteil zeigt,
   wie es ist — und wenn sich morgen etwas ändert, ändert es sich hier
   mit. Eine Seite über eine Designsprache, die ihr eigenes Aussehen
   nachbaut, ist beim ersten Umbau eine Lüge.

   ## Der Name bleibt englisch

   „Ultra Chrome Pixel Glass". Alles andere auf dieser Webseite ist
   deutsch, und das bleibt so. Der Name einer Sprache ist aber ein
   Eigenname — man übersetzt ihn so wenig wie „Aerona".
   =================================================================== */

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

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

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

:root[data-thema] .ds-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] .ds-hero h1 {
    margin-bottom: 1.4rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(2.1rem, 5.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

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

:root[data-thema] .ds-unter {
    max-width: 70ch;
    margin-bottom: 2.2rem;
    color: var(--k-text-leise);
    font-size: 1.08rem;
    line-height: 1.85;
}

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

:root[data-thema] .ds-warnung {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 74ch;
    padding: 1.3rem 1.5rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    color: var(--k-text-leise);
    font-size: 0.97rem;
    line-height: 1.75;
    overflow: hidden;
}

:root[data-thema] .ds-warnung::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-image: linear-gradient(180deg,
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
    pointer-events: none;
}

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

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

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

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

:root[data-thema] .ds-block__titel {
    margin: 0 0 0.8rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--k-text);
}

:root[data-thema] .ds-block__unter {
    max-width: 70ch;
    margin: 0 0 2.2rem;
    color: var(--k-text-leise);
    font-size: 1rem;
    line-height: 1.8;
}

:root[data-thema] .ds-main code {
    padding: 2px 6px;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft-tief);
    color: var(--k-text);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.88em;
}

:root[data-thema] .ds-schluss {
    position: relative;
    max-width: 70ch;
    padding: 1.8rem 1.9rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
}

:root[data-thema] .ds-schluss p {
    margin: 0 0 1.1rem;
    color: var(--k-text-leise);
    font-size: 1.02rem;
    line-height: 1.8;
}

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

:root[data-thema] .ds-weiter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: var(--k-text-leise);
    font-size: 0.94rem;
    font-weight: 650;
    text-decoration: none;
    transition: gap var(--bew-ruhig) var(--bew-feder),
        color var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .ds-weiter:hover,
:root[data-thema] .ds-weiter:focus-visible {
    gap: 0.85rem;
    color: var(--k-text);
    outline: none;
}

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

:root[data-thema] .ds-main .ds-pixel {
    left: 0;
    top: 0;
}

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

    :root[data-thema] .ds-block {
        margin-bottom: 3.5rem;
    }
}