/* ===================================================================
   DIE SEITE „DAS IST AERI" — ANSCHLUSS AN DAS HAUS

   Die siebenunddreißigste und letzte Seite. Und die einzige, bei der
   fast nichts zu tun war.

   ## Warum diese Seite anders behandelt wird

   Sie hat ein **eigenes Marken-System**: `--akzent`, `--grund`,
   `--flaeche`, `--rand`, `--text`, `--schatten`, `--rundung` — auf
   `.aeri-seite` gesetzt, mit einem gepflegten hellen Gegenstück
   daneben. Fünf Stilblätter, 1261 Zeilen, und keine einzige Farbe
   liegt lose darin herum.

   Das ist die am saubersten gebaute Seite der ganzen Webseite. Sie
   hatte nur einen Fehler: Es war ein **zweites** System neben dem des
   Hauses.

   Deshalb wird hier nichts umgeschrieben. Die Marken werden
   angeschlossen — zwanzig Zeilen statt tausendzweihunderteinundsechzig.
   Wer eine Seite mit Variablen baut, macht genau das möglich.

   ## Was Aeri selbst behält

   Alles. Die sechs Blätter in `css/aeri/aeri*.css` beschreiben das
   Tier: seinen Körper, sein Gesicht, seine siebzehn Launen. Darin
   stehen zweiunddreißig Bewegungen mit `infinite`, und sie bleiben
   ALLE.

   Aeri ist keine Fläche, die auf Zeigen antwortet — Aeri lebt. Ein
   Markentier, das stillsteht, ist ein Logo. Regel 21.1 verbietet
   Bewegung, die sich aufdrängt; ein atmendes Tier drängt sich nicht
   auf, es ist einfach da.

   ## Und die zweite Themenumschaltung

   Die Seite schaltet hell und dunkel über `.aeri-seite[data-thema]`,
   der Rest der Webseite über `:root[data-thema]`. Zwei Schalter für
   dieselbe Frage. Mit dem Anschluss unten fällt das weg: Die
   Hausmarken folgen der Wurzel, und die Seite folgt ihnen.
   =================================================================== */

:root[data-thema] .aeri-seite,
:root[data-thema] .aeri-seite[data-thema="hell"] {

    --akzent: var(--k-verlauf-a);
    --akzent-hell: var(--k-text);
    --akzent-tief: var(--k-verlauf-a);

    --grund: var(--k-grund);
    --grund-tief: var(--k-grund);
    --flaeche: var(--k-vertieft);
    --flaeche-stark: var(--k-vertieft);
    --rand: var(--k-rand-dicke);
    --rand-stark: var(--k-rand-seite);
    --text: var(--k-text);
    --text-leise: var(--k-text-leise);
    --schatten: var(--k-glas-tiefe);
    --schein: var(--k-schein-leise);

    --rundung: var(--k-rund-gross);
    --rundung-klein: var(--k-rund-mittel);
}

:root[data-thema] .schild,
:root[data-thema] .laune-neu {
    border-color: var(--k-rand-seite);
    background: var(--k-vertieft);
}

:root[data-thema] .buehne-text h1 span {
    background-image: linear-gradient(var(--k-winkel),
            var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
}

:root[data-thema] .aeri-noch-nicht {
    position: relative;
    border: 1px solid var(--k-rand-dicke);
    border-left: 0;
    background: var(--k-vertieft);
    overflow: hidden;
}

:root[data-thema] .aeri-noch-nicht::after {
    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] .aeri-noch-nicht-text > span {
    color: var(--k-text-leise);
}

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

:root[data-thema] .quelltext .q-tag,
:root[data-thema] .aeri-seite[data-thema="hell"] .quelltext .q-tag {
    color: var(--k-text-still);
}

:root[data-thema] .quelltext .q-attr,
:root[data-thema] .aeri-seite[data-thema="hell"] .quelltext .q-attr {
    color: var(--k-text-leise);
}

:root[data-thema] .quelltext .q-wert,
:root[data-thema] .aeri-seite[data-thema="hell"] .quelltext .q-wert {
    color: var(--k-text);
}

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

:root[data-thema] .laune:hover,
:root[data-thema] .laune[aria-pressed="true"] {
    border-color: var(--k-rand-oben);
    background-image: none;
}

:root[data-thema] .laune[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;

    border-radius: 0 0 var(--rundung) var(--rundung);
    background-image: var(--k-verlauf);
    pointer-events: none;
}

:root[data-thema] .zeile--nutzer .blase {
    background-image: var(--k-verlauf);
}

:root[data-thema] .hilfe-blase,
:root[data-thema] .hilfe-blase::before {
    border-color: var(--k-rand-seite);
}