/* ===================================================================
   „ULTRA CHROME PIXEL GLASS" — DIE GLASSCHAU

   Die Scheibe, ihre vier Kanten, und dieselbe Scheibe auf sechs
   verschiedenen Gründen.

   ## Warum sechs Gründe

   Glas kann man nicht auf einer Farbe beurteilen. Es lebt davon, was
   dahinter liegt: Auf Schwarz sieht fast jede Fläche brauchbar aus,
   auf einem Muster zeigt sich jede Kante, und im hellen Aussehen kippt
   die ganze Rechnung um.

   Deshalb steht der Kasten hier sechsmal — und zwar **derselbe**. Er
   holt seine Werte aus denselben Marken wie jeder Kasten der Webseite;
   verändert wird ausschließlich, was DAHINTER liegt. Wäre es sechsmal
   ein nachgebauter Kasten, sagte die Schau nichts über die Wirklichkeit
   aus.
   =================================================================== */

:root[data-thema] .ds-glasschau {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.4rem;
}

:root[data-thema] .ds-glasprobe {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 180px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
}

:root[data-thema] .ds-glasprobe__marke {
    color: var(--k-text-still);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:root[data-thema] .ds-kanten {
    margin: 0;
    padding: 0;
    list-style: none;
}

:root[data-thema] .ds-kanten li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--k-rand-dicke);
}

:root[data-thema] .ds-kanten li:last-child {
    border-bottom: 0;
}

:root[data-thema] .ds-kanten b {
    color: var(--k-text);
    font-size: 0.92rem;
    font-weight: 700;
}

:root[data-thema] .ds-kanten span {
    color: var(--k-text-leise);
    font-size: 0.92rem;
    line-height: 1.7;
}

:root[data-thema] .ds-kanten em {
    color: var(--k-text);
    font-style: normal;
    font-weight: 600;
}

:root[data-thema] .ds-erkenntnis {
    position: relative;
    max-width: 70ch;
    padding: 1.3rem 1.5rem;
    margin-bottom: 3rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
}

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

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

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

:root[data-thema] .ds-untertitel {
    margin: 0 0 0.7rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--k-text);
}

:root[data-thema] .ds-gruende {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

:root[data-thema] .ds-grund {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 170px;
    padding: 1.6rem;
    border-radius: var(--k-rund-gross);
    overflow: hidden;
}

:root[data-thema] .ds-grund--schwarz {
    background: var(--k-grund);
}

:root[data-thema] .ds-grund--schein {
    background: var(--k-grund);
    background-image: radial-gradient(circle at 30% 30%,
            var(--k-schein-leise) 0%, transparent 70%);
}

:root[data-thema] .ds-grund--verlauf {
    background-image: var(--k-verlauf);
}

:root[data-thema] .ds-grund--text {
    background: var(--k-grund);
    color: var(--k-text-leise);
    font-size: 0.8rem;
    line-height: 1.6;
}

:root[data-thema] .ds-grund--text::before {
    content: "Aerona wird von einem Menschen gebaut. Ein Betriebssystem, zehn Programme, eine Webseite in fünfundachtzig Sprachen. Das schafft eine Person allein nicht in einem Leben — also arbeitet hier ein Werkzeug mit.";
    position: absolute;
    inset: 0.9rem;
    color: var(--k-text-still);
    pointer-events: none;
}

:root[data-thema] .ds-grund--raster {
    background: var(--k-grund);
    background-image:
        repeating-linear-gradient(45deg,
            var(--k-rand-seite) 0 1px, transparent 1px 11px),
        repeating-linear-gradient(-45deg,
            var(--k-rand-dicke) 0 1px, transparent 1px 11px);
}

:root[data-thema] .ds-grund--hell {
    background: #eef2f8;
}

:root[data-thema] .ds-scheibe {
    box-shadow: var(--k-glas-tiefe);
    border-color: var(--k-glas-kante);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 1.1rem 1.2rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
}

:root[data-thema] .ds-scheibe span {
    color: var(--k-text);
    font-size: 0.95rem;
    font-weight: 700;
}

:root[data-thema] .ds-scheibe small {
    color: var(--k-text-still);
    font-size: 0.78rem;
}

:root[data-thema] .ds-scheibe--hell {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(15, 23, 42, 0.14)
        rgba(15, 23, 42, 0.09)
        rgba(15, 23, 42, 0.05)
        rgba(15, 23, 42, 0.09);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
        0 8px 24px -14px rgba(15, 23, 42, 0.35);
}

:root[data-thema] .ds-scheibe--hell span {
    color: #0a1424;
}

:root[data-thema] .ds-scheibe--hell small {
    color: #55657f;
}

:root[data-thema] .ds-fussnote {
    max-width: 70ch;
    margin: 1.3rem 0 0;
    color: var(--k-text-still);
    font-size: 0.9rem;
    line-height: 1.75;
}

@media (max-width: 820px) {
    :root[data-thema] .ds-glasschau {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}