/* Grundlagen: Zurücksetzen, Grundelemente, Seitenaufbau. */

/*
 * Die Erzählschrift für Überschriften und Rollennamen — lokal gehostet
 * (kein CDN: Datenschutz und Offline-Betrieb der PWA). Latin-Subset,
 * je ~18 KB. Lizenz: assets/schrift/OFL.txt.
 */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/schrift/fraunces-500.woff2") format("woff2");
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/schrift/fraunces-700.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` schlägt jede Layout-Angabe.
 *
 * Der Browser setzt für [hidden] zwar display:none, aber nur mit der Kraft
 * seiner eigenen Grundeinstellungen — jede Klasse mit eigenem display gewinnt
 * dagegen. Genau das ist beim Profilbild-Raster passiert: `.feld` bringt
 * display:flex mit, das Feld stand trotz hidden offen da. Der Fehler ist
 * lautlos, denn im Quelltext sieht alles richtig aus.
 */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--schrift);
    font-size: var(--f-normal);
    line-height: 1.55;
    color: var(--text);
    background: var(--grund);
    overflow-wrap: break-word;
    /* Sichere Bereiche auf Geräten mit Aussparung */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*
 * Der Werwolf im Nebelwald als Hintergrund.
 *
 * Er liegt in einer eigenen Ebene hinter allem und wird kräftig abgedunkelt:
 * Lesbarkeit geht vor Stimmung. Der Verlauf darüber ist unten am dichtesten,
 * weil dort die Karten stehen — oben darf der Mond durchscheinen.
 *
 * fixed sorgt dafür, dass das Bild beim Scrollen stehen bleibt, statt
 * mitzuwandern. Auf iOS wird background-attachment ignoriert, deshalb ein
 * eigenes Element mit position: fixed statt eines Hintergrundbildes am Body.
 */
.hintergrund {
    position: fixed;
    inset: 0;
    z-index: -2;
    /*
     * Der Rückfall steht IN der var()-Klammer und nicht als eigene
     * Zuweisung darüber.
     *
     * `--kulisse: …` hier im Regelblock hätte die Fassung aus
     * `kulisseSetzen()` dauerhaft geschlagen: Eine Variable, die am Element
     * selbst gesetzt ist, gewinnt gegen dieselbe Variable am Wurzelelement,
     * ganz gleich wann sie geschrieben wurde. Der Hintergrund wäre für immer
     * der der Erwachsenenfassung geblieben — genau der Fehler, der behoben
     * werden sollte.
     */
    /*
     * OHNE Bild-Rückfall (2026-08-30). Hier stand die Erwachsenen-Kulisse,
     * und der Browser holte sie, sobald er das CSS gelesen hatte — also
     * bevor überhaupt eine Welt gewählt war und noch bevor JavaScript lief.
     * Gemessen: 140 kB, angefordert nach 140 ms, sichtbar hinter der noch
     * offenen Erstwahl. Ohne Rückfall bleibt die Fläche leer, bis
     * kulisseSetzen() entweder die gewählte Welt einträgt oder mit
     * data-welt="offen" das Logo hinstellt (Regel weiter unten).
     */
    /*
     * Die Kulisse hängt an der HÖHE, nicht an der Breite (13.09.2026).
     *
     * `cover` rechnet mit der längeren Seite. Auf einem breiten, flachen
     * Fenster zog es das Bild auf die Breite und schnitt oben und unten
     * ab — auf einem 21:9-Schirm fehlte gut ein Drittel der Höhe.
     * `auto 100%` zeigt stattdessen das ganze Bild.
     *
     * Was links und rechts frei bleibt, bleibt Grund — die Ränder laufen
     * darauf zu. Der Verlauf darüber ist genau so breit wie die Kulisse
     * (Bildhöhe × Seitenverhältnis, siehe `--kulisse-seiten` in
     * core/bilder.js) und färbt ihr äußeres Fünftel in den Grund ein.
     * Daneben steht ohnehin nur er. Auf schmalen Geräten ist der Verlauf
     * breiter als der Schirm und fällt hinaus.
     */
    background-image:
        linear-gradient(90deg,
            var(--grund) 0%,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0) 80%,
            var(--grund) 100%),
        var(--kulisse);
    background-size: calc(100dvh * var(--kulisse-seiten, 1.7778)) 100%, auto 100%;
    background-position: center, center 30%;
    background-repeat: no-repeat, no-repeat;
    /* Gedämpft, damit daraus eine Kulisse wird und kein Blickfang. */
    opacity: .30;
    filter: saturate(.85);
    pointer-events: none;
}

/*
 * Vor der Weltwahl: das Logo statt einer Bilderwelt.
 *
 * `background-size` bewusst NICHT cover — ein Zeichen wird nicht
 * formatfüllend gezogen, es steht mittig und atmet. Etwas kräftiger als
 * die Kulissen (.30), weil ein einzelnes Zeichen auf dunklem Grund sonst
 * verschwindet; der Schleier in ::after liegt ohnehin darüber.
 * Warum überhaupt: siehe kulisseSetzen() in core/bilder.js.
 */
:root[data-welt="offen"] .hintergrund {
    background-image: url("../assets/logo/logo.png");
    background-size: min(58vmin, 24rem);
    background-position: center 30%;
    opacity: .16;
    filter: none;
}
:root[data-theme="light"][data-welt="offen"] .hintergrund {
    background-image: var(--wand), url("../assets/logo/logo.png");
    background-size: 40rem, min(58vmin, 24rem);
    background-position: 0 0, center 30%;
    background-repeat: repeat, no-repeat;
    opacity: .55;
}

.hintergrund::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(13, 15, 22, .35) 0%,
            rgba(13, 15, 22, .70) 45%,
            rgba(13, 15, 22, .92) 100%),
        radial-gradient(70rem 40rem at 50% -8rem, rgba(240, 163, 92, .10), transparent 65%);
}

/*
 * Im Hellen dieselbe Kulisse, aber aufgehellt — und auf Putz gemalt.
 *
 * Vorher stand hier das dunkle Bild mit Deckkraft 0,10 unter einem fast
 * weißen Schleier. Rechnerisch war das eine Kulisse, sichtbar war es nichts:
 * Der helle Modus hatte einen leeren Hintergrund. Jetzt liegt eine eigens
 * aufgehellte Fassung dahinter (`werkzeuge/hell-textur.py`, Helligkeit 37 →
 * 194), die auch tatsächlich zu sehen ist.
 *
 * Darüber die Lehmwand als `multiply`: Sie dunkelt das Bild leicht ab und
 * legt ihre Kellenstriche darauf. Der Wald wirkt dann nicht wie ein Foto
 * hinter dem Text, sondern wie ein verblasstes Bild auf einer verputzten
 * Wand — das gleiche Fachwerk, aus dem im Hellen auch die Knöpfe sind.
 *
 * Deckkraft 0,55 statt 0,30: Ein aufgehelltes Bild trägt viel weniger
 * Kontrast, also darf viel mehr davon durch, bevor es gegen die Schrift
 * arbeitet. Der Text steht ohnehin fast überall auf Karten.
 */
:root[data-theme="light"] .hintergrund {
    /* Auch hier an der Höhe, mit demselben Seitenverlauf — siehe
       .hintergrund. Die Lehmwand liegt als `multiply` über beidem und geht
       über die ganze Fläche: Sie ist der Putz, nicht das Bild. Bild und
       Verlauf mischen untereinander normal, sonst dunkelte sich die Mitte
       doppelt ab. */
    background-image:
        var(--wand),
        linear-gradient(90deg,
            var(--grund) 0%,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0) 80%,
            var(--grund) 100%),
        var(--kulisse-hell, none);
    background-size: 40rem, calc(100dvh * var(--kulisse-seiten, 1.7778)) 100%, auto 100%;
    background-position: 0 0, center, center 30%;
    background-repeat: repeat, no-repeat, no-repeat;
    background-blend-mode: multiply, normal, normal;
    opacity: .80;
    filter: none;
}
:root[data-theme="light"] .hintergrund::after {
    background: linear-gradient(180deg,
        rgba(244, 245, 249, .18) 0%,
        rgba(244, 245, 249, .42) 55%,
        rgba(244, 245, 249, .62) 100%);
}

h1, h2, h3, h4 {
    margin: 0 0 var(--s3);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -.015em;
}
/* Die großen Überschriften tragen die Erzählschrift — Fließtext und
   Bedienelemente bleiben beim ruhigen System-Stack. */
h1, h2 {
    font-family: var(--schrift-display);
    font-weight: 700;
    letter-spacing: normal;
}
h1 { font-size: var(--f-riesig); }
h2 { font-size: var(--f-titel); }
h3 { font-size: var(--f-gross); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--mond);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
@media (hover: hover) {
    a:hover { color: var(--mond-tief); }
}


img, svg { max-width: 100%; height: auto; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* Berührungen sofort melden, statt auf einen möglichen Doppeltipp-Zoom zu
   warten: Ohne diese Regel hält der Browser auf dem Handy jeden Tipp auf
   ein Bedienelement einen Wimpernschlag zurück — genau das „der erste
   Tipp reagiert nicht"-Gefühl. Zoomen der GESAMTSEITE (Kneifgeste) bleibt
   unberührt; nur der Doppeltipp auf Knöpfe verliert seine Wartezeit. */
button, a, select, summary, input, textarea, [role="button"] {
    touch-action: manipulation;
}

/* Sichtbarer Fokus — Tastatur- und Screenreader-Bedienung muss erkennbar sein. */
:focus-visible {
    outline: 2px solid var(--mond);
    outline-offset: 2px;
    border-radius: var(--r-klein);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--s2);
    padding: var(--s2) var(--s4);
    background: var(--flaeche-hoch);
    border-radius: var(--r-klein);
    z-index: 100;
}
.skip-link:focus { left: var(--s2); }

/* Nur für Screenreader */
.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- Seitenaufbau */

#app { min-height: 100svh; display: flex; flex-direction: column; }

.seite {
    flex: 1;
    width: 100%;
    max-width: var(--breite-inhalt);
    margin-inline: auto;
    padding: var(--s5) var(--s4) var(--s8);
}
.seite--schmal { max-width: var(--breite-schmal); }

/*
 * Sprungziele landeten unter der Kopfzeile (15.09.2026).
 *
 * `.kopf` klebt bei `top: 0`. Wer eine Sprungmarke anklickt (`#kinder` auf
 * den Fragenseiten, `#app` beim „Zum Inhalt springen"), scrollt das Ziel an
 * den oberen Rand des FENSTERS — und damit hinter den Kopf. Dasselbe tut
 * der Browser von sich aus, wenn er ein Element fokussiert, das außerhalb
 * liegt. `scroll-padding-top` hebt für JEDEN solchen Scroll die Grenze um
 * die Kopfhöhe an; auf gewöhnliches Scrollen mit dem Finger oder Rad hat es
 * keine Wirkung. Ein halber Schritt Luft obendrauf, damit das Ziel nicht an
 * der Kante klebt.
 *
 * Der Rückfallwert ist hier `0px` und NICHT `3.25rem` wie bei den übrigen
 * Regeln, die `--kopf-hoehe` benutzen. Der Unterschied hat einen Grund:
 * Jene setzen einen schwebenden Knopf, der den Kopf auf jeden Fall
 * freilassen muss — dort ist eine Schätzung besser als nichts. Hier gilt
 * das Gegenteil. Die Textseiten (Spielregeln, Fragen, Rollen) haben
 * überhaupt keine klebende Kopfzeile; mit `3.25rem` bekämen ihre
 * Sprungmarken 60 px Versatz, den nichts verdeckt. `--kopf-hoehe` wird nur
 * gesetzt, wo ein `.kopf` steht (ui/ansageknopf.js), und genau dort soll
 * der Versatz greifen.
 */
html { scroll-padding-top: calc(var(--kopf-hoehe, 0px) + var(--s2)); }

.kopf {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rand);
    background: color-mix(in srgb, var(--grund) 88%, transparent);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.kopf__titel {
    font-family: var(--schrift-display);
    font-size: var(--f-normal);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--s2);
    /* Der Titel ist das Einzige, was nachgeben darf. `min-width: 0` hebt die
       Voreinstellung `auto` auf, mit der ein Flex-Kind sich weigert, unter
       seine Inhaltsbreite zu schrumpfen — genau daran schob sich „Rollen &
       Regeln" die Knöpfe aus dem Bild. */
    min-width: 0;
}

/* Die Knöpfe geben NICHT nach. Was man antippen soll, muss seine Größe
   behalten; ein zusammengedrückter Knopf ist schlimmer als ein gekürzter
   Titel. */
.kopf__rest {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex: none;
}

/*
 * Die Marke am Freundesknopf, aufgeschlüsselt: je wartender Art eine kleine
 * Marke mit Zeichen und Zahl (✉ Nachrichten, ➕ Anfragen, 📅 Termine).
 * Der Summenpunkt daneben ist fürs Handy bestimmt und bleibt hier
 * verborgen — im Schmalbild-Block weiter unten tauschen die beiden Hälften
 * die Rollen. Es sind immer beide im Baum; welche zu sehen ist, entscheidet
 * allein die Bildbreite.
 */
/* Doppelt benannt (.kopf__post .kopf__post-…), nicht aus Zierde: Die beiden
   Hälften tragen auch die Klasse .marke, und deren display steht in der
   SPÄTER geladenen components.css — bei gleicher Gewichtung gewänne sie. */
.kopf__post { display: inline-flex; gap: var(--s1); margin-left: var(--s1); }
.kopf__post .kopf__post-punkt { display: none; }

/*
 * Die Kopfzeile auf dem Handy — eigene Regeln, unabhängig vom Rest der Seite.
 *
 * Gemessen bei 375 px: Titel plus „🏆 Ehrenhalle", „👥 Freunde", „Regeln" und
 * „<Gesicht> <Name>" ergaben 597 px Inhalt. Da nichts umbrach und nichts
 * nachgab, lief alles nach rechts hinaus — der Profilknopf begann bei 436 px
 * und war damit vollständig unerreichbar, samt dem Menü dahinter.
 *
 * **Die Beschriftungen fallen weg, die Symbole bleiben.** Kein Umbruch auf
 * zwei Zeilen: Die Leiste klebt oben, und am Spieltisch ist jede Zeile Höhe
 * knapp. Kein Zusammendrücken: Ein Knopf unter 36 px trifft man nicht mehr
 * zuverlässig mit dem Daumen.
 *
 * „Regeln" behält seinen Text — es ist der einzige Knopf ohne eigenes Symbol,
 * und ein Wort ist besser als ein geliehenes Zeichen, das etwas anderes meint.
 */
@media (max-width: 34rem) {
    .kopf { gap: var(--s2); padding-inline: var(--s3); }

    /* Aus dem Flex-Behälter wird ein Block: Nur so greift die Auslassung.
       In einem Flex-Behälter hat der Text keinen eigenen Kasten, an dem
       `text-overflow` ansetzen könnte. */
    .kopf__titel {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kopf__rest { gap: var(--s1); }
    .kopf__rest .knopf--klein { padding-inline: var(--s2); }

    .kopf__wort { display: none; }

    /*
     * Ohne Beschriftung wird aus der Marke ein Punkt AUF dem Symbol.
     *
     * Daneben stehen kann sie hier nicht: Die Leiste ist auf 375 Punkten
     * schon voll, und eine Marke neben dem Zeichen schöbe den nächsten Knopf
     * aus dem Bild — genau der Grund, aus dem die Wörter weichen mussten.
     * Oben rechts aufgesetzt kostet sie keine Breite und ist die Form, die
     * von jeder Nachrichten-App her gelesen wird.
     *
     * Deshalb tauschen hier die beiden Hälften der Marke: Die
     * Aufschlüsselung (✉ ➕ 📅) verschwindet, der Summenpunkt erscheint.
     */
    #kopf-freunde { position: relative; overflow: visible; }
    .kopf__post {
        position: absolute;
        top: -.25rem;
        right: -.25rem;
        margin: 0;
        gap: 0;
    }
    .kopf__post .kopf__post-art { display: none; }
    .kopf__post .kopf__post-punkt {
        display: inline-flex;
        min-width: 1.15rem;
        height: 1.15rem;
        padding: 0 .2rem;
        justify-content: center;
        align-items: center;
        font-size: .68rem;
        line-height: 1;
        /* Ein Ring in der Farbe der Leiste trennt den Punkt vom Symbol
           darunter — sonst verschwimmen beide zu einem Fleck. */
        border: 2px solid var(--grund);
    }
}

/* Der eigene Avatar im Profil-Knopf der Kopfzeile — klein und rund. */
.kopf__sinnbild {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex: none;
}

/* --------------------------------------------------------------- Ladeschirm */

.ladeschirm {
    flex: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--s4);
    min-height: 100svh;
    color: var(--text-leise);
    text-align: center;
    padding: var(--s4);
}

/*
 * Das Zeichen der Wolfrunde — Wölfe im Ring.
 *
 * Hier stand bis zum 2026-08-03 `.mond`: ein Kreis aus einem CSS-Farbverlauf.
 * Der ist ersetzt, und mit ihm sein Leuchten. Wichtig dabei:
 *
 * **`filter: drop-shadow` und NICHT `box-shadow`.** Das Zeichen ist ein
 * freigestelltes PNG mit durchsichtiger Mitte. `box-shadow` legt den Schein um
 * den KASTEN — das ergäbe ein leuchtendes Quadrat hinter einem Ring.
 * `drop-shadow` folgt dem Alphakanal und legt ihn um die Wölfe.
 */
.logo {
    display: block;
    object-fit: contain;
    flex: none;
}

.logo--gross {
    /* Die drei Werte spielen zusammen: Auf dem Handy gibt `32vw` die Größe
       vor, auf großen Schirmen deckelt `13.5rem`, und `8.5rem` verhindert,
       dass es auf sehr schmalen Geräten zum Abzeichen schrumpft. */
    width: clamp(8.5rem, 32vw, 13.5rem);
    height: auto;
    filter: drop-shadow(0 0 26px rgba(240, 163, 92, .28));
    animation: logo-atmen 3.2s ease-in-out infinite;
}
@keyframes logo-atmen {
    0%, 100% { transform: scale(1);    opacity: .92; }
    50%      { transform: scale(1.04); opacity: 1; }
}

/* In der Kopfzeile. Klein genug, dass daneben noch der Titel steht — und mit
   einem Hauch Schein, damit es sich vom dunklen Grund abhebt. */
.logo--klein {
    width: 1.75rem;
    height: 1.75rem;
    filter: drop-shadow(0 0 6px rgba(240, 163, 92, .3));
}

@media (prefers-reduced-motion: reduce) {
    .logo--gross { animation: none; opacity: 1; }
}

.hinweis {
    max-width: 30rem;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--rand);
    border-radius: var(--r-mittel);
    background: var(--flaeche);
    color: var(--text);
}

/* ------------------------------------------------------------------ Raster */

.stapel   { display: flex; flex-direction: column; gap: var(--s4); }
.stapel--eng { gap: var(--s2); }
.reihe    { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.reihe--ende { justify-content: flex-end; }
.reihe--mitte { justify-content: center; }
.abstand-oben { margin-top: var(--s5); }

.raster {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Höchstens vier Karten nebeneinander, dann eine neue Reihe (Startseite,
   08.09.). Alle Karten einer Reihe gleich hoch — das Raster streckt sie.
   Unter 64rem drei, unter 48rem zwei, unter 32rem eine Spalte. */
.raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { .raster--vier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .raster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 32rem) { .raster--vier { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- Seiteninfo */

/* Der Text über das Spiel unterhalb der Anwendung (index.php). #app füllt
   die volle Bildschirmhöhe, dieser Abschnitt liegt also unter dem Falz —
   sichtbar für alle, die scrollen, und für Suchmaschinen. */
.seiteninfo {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--s6) var(--s5) 0;
}
.seiteninfo h1 {
    font-family: var(--schrift-display);
    font-size: var(--f-gross);
    line-height: 1.3;
}
.seiteninfo h2 {
    margin-top: var(--s6);
    font-size: var(--f-gross);
}
.seiteninfo p,
.seiteninfo li,
.seiteninfo dd {
    color: var(--text-leise);
    line-height: 1.6;
}
.seiteninfo strong { color: var(--text); }
.seiteninfo a { color: var(--text); }
.seiteninfo ul { padding-left: 1.2rem; }
.seiteninfo li { margin-bottom: var(--s2); }
.seiteninfo-vorspann { font-size: var(--f-gross); color: var(--text); }
.seiteninfo-faq dt {
    margin-top: var(--s4);
    font-weight: 600;
}
.seiteninfo-faq dd { margin: var(--s2) 0 0; }

/* Beim allerersten Besuch zieht der Abschnitt unter die vier Kacheln der
   Bilderwelt-Wahl um (bildstil.js). Die Wahl zentriert ihren Inhalt —
   Fließtext liest sich linksbündig, und ein Strich trennt ihn von der
   eigentlichen Frage darüber. */
.bildwahl .seiteninfo {
    text-align: left;
    margin-top: var(--s6);
    border-top: 1px solid var(--rand);
}

/* --------------------------------------------------------------- Impressum */

.impressum {
    position: relative;
    padding: var(--s6) var(--s5) var(--s5);
    text-align: center;
    font-size: var(--f-klein);
}
/* Fingerbreite (11.09.2026): Lighthouse mobil meldete „Touch targets do not
 * have sufficient size or spacing" für genau diese Zeile — vier kleine Links
 * dicht nebeneinander, in der Ring-Fußzeile noch eine Schriftgröße kleiner.
 * `inline-block` plus senkrechtes Polster macht aus jedem Link ein Ziel von
 * mindestens 24 Pixeln Höhe, ohne die Zeile auseinanderzureißen. */
.impressum a {
    color: var(--text-still);
    display: inline-block;
    padding: var(--s2) 0;
    margin: 0 var(--s3);
}
@media (hover: hover) {
    .impressum a:hover { color: var(--text-leise); }
}

/*
 * Die KI-Zeile im Seitenfuß (14.09.2026).
 *
 * Eigene Zeile unter der Linkreihe, nicht als sechster Link dazwischen: Sie
 * ist eine Auskunft, keine Navigation. Kleiner und leiser als die Links,
 * ohne deren Fingerbreiten-Polster — sie ist kein Ziel, das man trifft,
 * sondern eines, das man liest.
 */
.impressum__ki {
    margin: 0;
    font-size: .78em;
    font-style: italic;
    color: var(--text-still);
}
/* Ohne Unterstreichung (Elmar 14.09.2026): Kursiv UND unterstrichen ist zu
   viel Auszeichnung für eine Nebenbemerkung, und in der Zeile über den
   unterstrichenen Links sah sie aus wie ein sechster Menüpunkt. Anklickbar
   bleibt sie — sie führt zur Herkunft der Inhalte. */
.impressum__ki a { padding: 0; margin: 0; color: inherit; text-decoration: none; }
@media (hover: hover) {
    .impressum__ki a:hover { text-decoration: underline; }
}

/*
 * Der KI-Hinweis an der Wahl selbst — Stimmen, Bilderwelten, Tor.
 *
 * Klein, kursiv, rechtsbündig unter das, worauf er sich bezieht (Wunsch
 * Elmar 14.09.2026). Rechtsbündig, weil er eine Fußnote ist und keine
 * Überschrift: Er soll da sein, wenn man ihn sucht, und nicht mitsprechen,
 * während man wählt. Art. 50 des EU-KI-Gesetzes verlangt für Werke
 * ausdrücklich eine Offenlegung, die den Genuss nicht beeinträchtigt.
 */
.ki-hinweis {
    display: block;
    margin: var(--s2) 0 0;
    text-align: right;
    font-size: .78em;
    font-style: italic;
    color: var(--text-still);
}
/* Mehrteilig: je Medium eine Zeile, wo mehr als eines zu sehen ist (die
   Sprecherwahl zeigt Stimmen UND Bilder). Untereinander statt durch einen
   Punkt getrennt — zwei kurze Zeilen liest man, eine lange überfliegt man. */
.ki-hinweis > span { display: block; }