/* ===================================================================
   DIE STARTSEITE — DIE NEUN BAUSTEINE

   Neun Karten: AetherOS, die Apps, die Sprache, das Wörterbuch und die
   übrigen. Jede führt auf die Seite, die den Baustein ausführlich zeigt.

   Sie sind **dasselbe Objekt wie die Plattformkacheln** in den Fenstern
   des Kopfes: eine Scheibe mit einer Fassung, einem Zeichen darin, einer
   Überschrift, einem Absatz und einer Angabe unten. Deshalb steht hier
   nur, was an ihnen eigen ist — ihre Maße und ihr Aufbau. Grund, Kanten,
   Schatten und der Ring aus Punkten kommen aus `glas.css` und
   `js/pixelring.js`, wo dieselbe Scheibe schon zehnmal beschrieben ist.

   ## Was sie vorher hatten

   · **Eine flache Tönung** (`rgba(255,255,255,0.025)`) und einen Rand,
     der ringsum gleich hell war. Das ist die Fassung, von der wir heute
     festgestellt haben, dass sie wie ein helleres Rechteck aussieht und
     nicht wie eine Scheibe.
   · **Blau statt Verlauf**: Die Fassung des Zeichens war
     `rgba(59,130,246,0.13)`, das Zeichen `#93c5fd`, die Zahl unten
     ebenfalls. Drei Blautöne, die nichts mit dem Aerona-Verlauf zu tun
     hatten.
   · **Ein blauer Rand und ein Anheben beim Zeigen** — dieselbe Antwort,
     die jede Seite gibt.
   · **Vier feste Farben** für die Schrift, keine kannte die Tageszeit.

   ## Was sich am Verhalten ändert

   Beim Zeigen läuft der Ring aus Punkten um die Karte, und das Zeichen
   in der Fassung baut sich aus Punkten neu auf — genau wie an den
   Plattformkacheln. Der Unterschied zu den Bedingungen im Erklärfenster
   ist Absicht: Eine Kachel ist etwas, worauf man zeigt, und ihr Zeichen
   antwortet. Eine Bedingung ist eine Aussage.
   =================================================================== */

:root[data-thema] .bento-section {
    position: relative;
    padding: 6rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg,
            transparent 0,
            var(--k-feld) 140px,
            var(--k-feld) calc(100% - 140px),
            transparent 100%);
    overflow: visible;
}

:root[data-thema] .bento-section::before {
    background-image: radial-gradient(circle at 2px 2px,
            var(--k-feld) 1px, transparent 0);
    background-size: 40px 40px;
    mask: linear-gradient(180deg,
            transparent 0, #000 140px,
            #000 calc(100% - 140px), transparent 100%);
    -webkit-mask: linear-gradient(180deg,
            transparent 0, #000 140px,
            #000 calc(100% - 140px), transparent 100%);
}

:root[data-thema] .bento-section .section-title {
    color: var(--k-text);
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 0.9rem;
}

:root[data-thema] .bento-section .section-subtitle {
    max-width: 760px;
    margin: 0 auto;
    color: var(--k-text-leise);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.8;
}

:root[data-thema] .bau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 3rem auto 0;
    text-align: left;
}

:root[data-thema] .bau-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.7rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--k-rund-gross);
    background: var(--k-vertieft);
    text-decoration: none;
    min-width: 0;
    overflow: visible;
    transition: transform var(--bew-schnell) var(--bew-beides);
}

:root[data-thema] .bau-karte:hover,
:root[data-thema] .bau-karte:focus-visible {
    transform: none;
    outline: none;
}

:root[data-thema] .bau-karte > .fenster__ring {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .bau-karte__kopf {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

:root[data-thema] .bau-karte__kopf i {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    font-size: 1.05rem;
    transition: none;
}

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

:root[data-thema] .bau-karte__kopf i.zeichen--zerfaellt::before {
    visibility: hidden;
}

:root[data-thema] .bau-karte > .fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .bau-karte__kopf h3 {
    color: var(--k-text);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
}

:root[data-thema] .bau-karte p {
    color: var(--k-text-leise);
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    flex-grow: 1;
}

:root[data-thema] .bau-karte__zahl {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 0;
    background-image: linear-gradient(90deg,
            transparent, var(--k-vertieft-kante) 22%,
            var(--k-vertieft-kante) 78%, transparent);
    background-size: 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    color: var(--k-text);
}

@media (max-width: 760px) {

    :root[data-thema] .bau-grid {
        grid-template-columns: 1fr;
        margin-top: 2.2rem;
    }

    :root[data-thema] .bau-karte {
        padding: 1.3rem 1.4rem;
    }
}