/* ===================================================================
   DIE SEITE „UPDATES" — DAS MATERIAL

   Die größte Seite der Webseite: sechs Reiter, viereinhalbtausend
   Zeilen Markup, neun Stilblätter aus zwei Jahren. Sie wird nicht neu
   gebaut — ihr Aufbau stimmt, es ist die Oberfläche, die alt aussieht.

   ## Was hier passiert und was nicht

   Die alten Blätter unter `css/modules/updates-*.css` behalten ihre
   **Maße**: Raster, Abstände, Schriftgrößen, wann was umbricht. Das
   sind zweitausend Zeilen ausgemessene Arbeit, und keine davon ist
   falsch geworden.

   Was sie verloren haben, ist das **Material**: hundertvierundfünfzig
   feste Farbwerte, meist derselbe blaue Ton in zwölf Abstufungen. Sie
   tragen jetzt Namen statt Zahlen — nachzulesen in der Sicherung unter
   `99_Archiv/2026-08-06_updates-stile-vor-glas`. Fünf Bewegungen
   liefen endlos; die sind aus (Regel 21.1).

   Diese Datei gibt den Kästen ihren Grund. Die Kante dazu kommt aus
   `glas-seiten.css`, wo sie mit den Kästen aller anderen Seiten
   zusammensteht.

   ## Warum die Liste zweimal dasteht

   Einmal hier für den Grund, einmal dort für die Kante — dieselbe
   Aufteilung wie bei allen Seiten davor. Der Grund gehört zur Seite,
   die Kante gehört zum Glas. Wer das Licht ändert, fasst eine Datei an;
   wer eine Kachel anders füllt, die andere.

   ## Nachtrag, 06.08.2026

   Vier Stellen sind beim ersten Durchgang übrig geblieben: der
   aufgeklappte Fragekasten, der Hinweis im Kalender, der Punkt
   darunter und der Schließknopf der Fenster. Sie stehen unten, jede
   mit ihrem Grund.
   =================================================================== */

:root[data-thema] .updates-title {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    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] .updates-title.zeichen--zerfaellt {
    visibility: hidden;
}

:root[data-thema] .updates-subtitle {
    color: var(--k-text-leise);
}

:root[data-thema] .badge-new {
    color: var(--k-text);
}

:root[data-thema] .badge-fix {
    color: var(--k-text-leise);
}

:root[data-thema] .os-status,
:root[data-thema] .os-fact,
:root[data-thema] .os-step,
:root[data-thema] .os-sec__item,
:root[data-thema] .os-note,
:root[data-thema] .os-phase,
:root[data-thema] .updates-app-header,
:root[data-thema] .ad-block,
:root[data-thema] .vision-inner,
:root[data-thema] .vision-card,
:root[data-thema] .tele-card,
:root[data-thema] .spotlight-card,
:root[data-thema] .perf-stat,
:root[data-thema] .visual-box,
:root[data-thema] .em-stat,
:root[data-thema] .em-cat,
:root[data-thema] .em-galerie,
:root[data-thema] .em-galerie__suche,
:root[data-thema] .em-tile,
:root[data-thema] .em-hinweis,
:root[data-thema] .artikel-block,
:root[data-thema] .log-content,
:root[data-thema] .terminal-container,
:root[data-thema] .version-karte,
:root[data-thema] .engine-dashboard,
:root[data-thema] .engine-stat,
:root[data-thema] .wb-ziel,
:root[data-thema] .month-card {
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
}

:root[data-thema] .badge-new,
:root[data-thema] .badge-fix,
:root[data-thema] .badge-version,
:root[data-thema] .badge-pill-sm,
:root[data-thema] .ad-tag,
:root[data-thema] .module-chip,
:root[data-thema] .em-tab,
:root[data-thema] .year-btn,
:root[data-thema] .game-btn,
:root[data-thema] .vision-close,
:root[data-thema] .ca-keywords code {
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
    color: var(--k-text-leise);
}

:root[data-thema] .wb-balken {
    background: var(--k-vertieft);
    border-width: 1px;
    border-style: solid;
}

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

:root[data-thema] .vision-card:hover,
:root[data-thema] .tele-card:hover,
:root[data-thema] .em-cat:hover,
:root[data-thema] .version-karte:hover,
:root[data-thema] .os-fact:hover,
:root[data-thema] .module-chip:hover,
:root[data-thema] .em-tile:hover {
    border-top-color: var(--k-rand-hell);
    box-shadow: var(--k-glas-tiefe), 0 6px 18px -12px #000;
}

:root[data-thema] .faq-item.active {
    border-color: var(--k-glas-kante);
}

:root[data-thema] .faq-item.active::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;
    z-index: 1;
}

:root[data-thema] .event-tooltip {
    background: var(--k-menue);
    backdrop-filter: blur(12px) saturate(1.45);
    -webkit-backdrop-filter: blur(12px) saturate(1.45);
    border-width: 1px;
    border-style: solid;
    color: var(--k-text-leise);
}

:root[data-thema] .event-dot {
    background-color: transparent;
    background-image: var(--k-verlauf);
    box-shadow: none;
    opacity: 1;
}

:root[data-thema] .day-btn.planned-event .event-dot {
    background-image: var(--k-verlauf);
    box-shadow: none;
    opacity: 0.5;
}

:root[data-thema] .close-btn,
:root[data-thema] .vision-close {
    position: relative;
    background: var(--k-vertieft);
    z-index: 2;

    border-width: 1px;
    border-style: solid;
    color: var(--k-text-leise);
    transition: color var(--bew-ruhig) var(--bew-beides);
}

:root[data-thema] .close-btn:hover,
:root[data-thema] .close-btn:focus-visible,
:root[data-thema] .vision-close:hover,
:root[data-thema] .vision-close:focus-visible {
    background: var(--k-vertieft);
    color: var(--k-text);
    outline: none;
}

:root[data-thema] .log-entry::before {
    border-left-color: transparent;
    background-image: var(--k-verlauf);
}

:root[data-thema] .log-desc li {
    background: var(--k-vertieft);
    border-left-color: var(--k-rand-seite);
}

:root[data-thema] .log-desc li::before,
:root[data-thema] .log-desc li::marker {
    color: var(--k-text-still);
}

:root[data-thema] .log-content.expanded .log-desc>ul>li {
    border-left-color: transparent;
    border-image: var(--k-verlauf) 1;
}

:root[data-thema] .log-content.expanded .log-desc>ul>li::before {
    color: var(--k-text-leise);
}

:root[data-thema] .log-content .fas,
:root[data-thema] .log-content .far,
:root[data-thema] .log-content .fab {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: var(--k-text-still);
}

:root[data-thema] .badge {
    border-color: var(--k-glas-kante);
}

:root[data-thema] .collapse-indicator,
:root[data-thema] .collapse-indicator span {
    color: var(--k-text-still);
}

:root[data-thema] .version-gruppe > summary::before {
    background-color: transparent;
    background-image: var(--k-vertieft);
}

:root[data-thema] .log-content > .fenster__ring,
:root[data-thema] .version-gruppe > summary > .fenster__ring {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .log-content,
:root[data-thema] .version-gruppe > summary {
    position: relative;
}

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

:root[data-thema] .day-btn:not(.valid-day) {
    cursor: default;
}

:root[data-thema] .os-huelle {
    position: relative;
    border-radius: 12px;
}

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

:root[data-thema] .os-phase {
    overflow: visible;
}

:root[data-thema] .vision-btn {
    background: var(--k-verlauf-tief);
    color: var(--k-auf-akzent);
    border: 0;
    box-shadow:
        var(--k-schatten-eng),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -12px 18px -12px rgba(0, 0, 0, 0.45);
}

:root[data-thema] .vision-btn:hover,
:root[data-thema] .vision-btn:focus-visible {
    transform: translateY(-2px);
    outline: none;
    box-shadow:
        0 10px 26px var(--k-schein-verlauf),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -12px 18px -12px rgba(0, 0, 0, 0.45);
}

:root[data-thema] .vision-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -16px 22px -12px rgba(0, 0, 0, 0.5);
}

:root[data-thema] .vision-btn > .knopf-pixel {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    max-width: none;
    max-height: none;
    border-radius: inherit;
    z-index: 0;
}

:root[data-thema] .vision-btn {
    position: relative;
}

:root[data-thema] .vision-btn > span,
:root[data-thema] .vision-btn > i {
    position: relative;
    z-index: 1;
}

:root[data-thema] .vision-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    left: auto;
}

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

:root[data-thema] .close-btn > i.zeichen--zerfaellt::before,
:root[data-thema] .vision-close > i.zeichen--zerfaellt::before {
    visibility: hidden;
}