/* GENERIERT aus build/client/*.css von build/client-bundle.mjs — nicht hier editieren. */
/* ---- build/client/00-bewegung.css ---- */


/* >>> wiki-bewegung (aus _shared/bewegung.css) */
/* Bewegung (Checkliste B5 + B2): aufklappbare Bereiche und Hell/Dunkel-Wechsel. Quelle: _shared/bewegung.css */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details:not(.langdd, [data-langdd], [data-ohne-bewegung])::details-content {
      block-size: 0; overflow-y: clip;
      transition: block-size .32s cubic-bezier(.2,.7,.2,1), content-visibility .32s allow-discrete;
    }
    details:not(.langdd, [data-langdd], [data-ohne-bewegung])[open]::details-content { block-size: auto; }
  }
}
html.thema-wechsel::view-transition-old(root),
html.thema-wechsel::view-transition-new(root) { animation-duration: .4s; animation-timing-function: ease; }
/* <<< wiki-bewegung */

/* ---- build/client/00-core.css ---- */
/* Mitmach-Bausteine (build/client/*.css) — wird hinter styles.css inline gebacken. Farben nur über
   die Theme-Variablen aus styles.css (--bg, --surface, --ink, --accent, --gold …), damit hell/dunkel stimmt. */
.lab { position: relative; }
.lab [hidden] { display: none !important; }

/* ---- build/client/05-kopf.css ---- */
/* Kopfzeile (s. 05-kopf.js). Mit acht Navigationspunkten war sie in --maxw (1180 px) randvoll; seit
   Zeitstrahl/Zitate/Glossar/News/Quellen im Menü „Entdecken“ stecken (25.09.2026), passt sie wieder in
   die Lesespalte — die Verbreiterung (+16rem) und die engeren Abstände bei 1181–1320 px sind
   zurückgebaut (gemessen: 6 Sprachen, 1181–1600 px, Unterzeile überall sichtbar). Geblieben: Pfeile
   werden nie gestaucht, und die Unterzeile weicht, falls sie doch einmal nicht passt. */
.menu-btn svg { flex: none; }
.nav--ohne-zeile .brand small { display: none; }

/* ---- build/client/06-schrift.css ---- */
/* Lange deutsche Wörter in großen Überschriften („Datenschutzerklärung“, „Gravitationslinseneffekt“)
   liefen auf 390 px 12–46 px über den Rand (gemessen 25.09.2026, live seit Längerem). Silbentrennung,
   und wo der Browser kein Wörterbuch hat, der Umbruch im Wort statt Überlauf. */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ---- build/client/fuss-himmel.css ---- */
/* Fußzeile „Sternenhimmel“ (25.09.2026, Vorbild immanuel-kant.info): Der Himmel der Startseite läuft
   hier weiter (fuss-himmel.js), oben Abschiedszitat mit Unterschrift, darunter alle 13 Kapitel in den
   drei Gruppen der Navigation und „Entdecken“. Folgt dem Theme wie die Startseite: hell = Sternkarte
   (dunkle Punkte auf Papier), dunkel = Nachthimmel. */
.site-footer.ae-fuss {
  position: relative; overflow: clip; isolation: isolate;
  padding-top: clamp(3.8rem, 9vw, 6.5rem);
  background:
    radial-gradient(60% 260px at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 100%),
    var(--bg-soft);
}
.ae-fuss__himmel {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Oben voller Himmel (Zitat), zu den Linkspalten hin ruhiger: die Abstufung zeichnet fuss-himmel.js
     in den Canvas. KEINE CSS-Maske — gemessen 25.09.: ohne GPU-Compositing halbierte die Maske allein
     die Bildrate beim Scrollen (1440 px: 33 statt 17 ms je Bild). Oben blendet ::after weich ein. */
}
.ae-fuss__himmel::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px;
  background: linear-gradient(to bottom, var(--bg-soft), color-mix(in srgb, var(--bg-soft) 0%, transparent));
}
.ae-fuss__himmel canvas, .ae-fuss__nah { position: absolute; left: 0; top: 0; width: 100%; display: block; will-change: transform; }
.ae-fuss__nah { height: 100%; }
@keyframes ae-fuss-weg { from { transform: translate3d(0, calc(-1 * var(--weg, 0px)), 0); } to { transform: translate3d(0, 0, 0); } }

/* wenige nahe Sterne, die funkeln (nur solange die Fußzeile im Bild ist) */
.ae-fuss__funkel { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; color: var(--gold); opacity: .55; }
.ae-fuss__funkel svg { width: 100%; height: 100%; display: block; }
.ae-fuss__funkel.is-blau { color: var(--accent); }
@keyframes ae-fuss-funkeln { from { opacity: .18; transform: scale(.7); } to { opacity: .9; transform: scale(1); } }
.ae-fuss.is-sichtbar .ae-fuss__funkel { animation: ae-fuss-funkeln var(--takt, 3s) ease-in-out var(--verz, 0s) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .ae-fuss.is-sichtbar .ae-fuss__funkel { animation: none; } }

.ae-fuss__in { position: relative; z-index: 1; }

/* Abschied: Zeichen, Zitat, Fundstelle, Unterschrift */
.ae-fuss__motto { margin: 0 auto; max-width: 44rem; text-align: center; }
.ae-fuss__zeichen { display: inline-block; width: 52px; height: 52px; margin-bottom: 1.1rem;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 45%, transparent)); }
.ae-fuss__zeichen svg { width: 100%; height: 100%; overflow: visible; }
.ae-fuss__zitat { margin: 0; padding: 0; border: 0; }
.ae-fuss__zitat p {
  margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 420; letter-spacing: -.01em;
  font-size: clamp(1.4rem, 3.4vw, 2.25rem); line-height: 1.22; color: var(--ink); text-wrap: balance;
}
.ae-fuss__quelle { font-size: .8rem; line-height: 1.5; }
.ae-fuss__quelle a, .ae-fuss__nachweis { color: var(--ink-soft); text-decoration-color: color-mix(in srgb, var(--ink-soft) 40%, transparent); }
.ae-fuss__quelle a:hover, .ae-fuss__nachweis:hover { color: var(--accent-ink); }
.ae-fuss__unterschrift {
  display: block; width: min(300px, 70vw); aspect-ratio: 960 / 144; margin: 1.6rem auto .35rem;
  background: var(--ink);
  -webkit-mask-image: url("/assets/img/einstein-signature.webp"); mask-image: url("/assets/img/einstein-signature.webp");
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.ae-fuss__nachweis { display: inline-block; font-size: .72rem; }

/* Linkspalten: Über die Seite + drei Kapitelgruppen + Entdecken */
.ae-fuss__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr); gap: 2.5rem;
  margin-top: clamp(2.8rem, 6vw, 4.2rem); padding-top: 2.4rem; border-top: 1px solid var(--line);
}
.ae-fuss__about .brand { margin-bottom: .9rem; }
.ae-fuss__about p { color: var(--ink-soft); font-size: .92rem; max-width: 34ch; }
.ae-fuss__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.ae-fuss__spalten h2 { font-family: var(--font-sans); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: .85rem; line-height: 1.3; }
.ae-fuss__spalten ul { list-style: none; padding: 0; margin: 0; }
.ae-fuss__spalten li { margin-bottom: .45rem; line-height: 1.4; }
.ae-fuss__spalten a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; }
.ae-fuss__spalten a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Sprachfassungen als Textlinks */
.ae-fuss__sprachen { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; margin: 2.4rem 0 1.4rem; font-size: .9rem; }
.ae-fuss__sprachen > span { color: var(--ink-faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.ae-fuss__sprachen a { color: var(--ink-soft); text-decoration: none; }
.ae-fuss__sprachen a:hover { color: var(--accent-ink); text-decoration: underline; }
.ae-fuss__sprachen a[aria-current] { color: var(--ink); font-weight: 600; }
.ae-fuss__note { max-width: 80ch; margin-top: .6rem; }
.ae-fuss__note a { color: inherit; }

@media (max-width: 1000px) { .ae-fuss__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 760px) {
  .ae-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.2rem; }
  .ae-fuss__spalten a { font-size: .92rem; }
}

/* ---- build/client/kopf-marke.css ---- */
/* Kopfzeile (25.09.2026): Zeichen „Einstein-Ring“ statt des blauen „E“-Kreises (Form in
   build/data/kopf-zeichen.mjs, Farben aus dem Theme), Kapitelname nach dem Scrollen (kopf-kapitel.js),
   „Lernen“ dezent hervorgehoben. */
.brand .brand-mark { width: 38px; height: 38px; background: none; box-shadow: none; border-radius: 0; color: inherit; }
.brand .brand-mark svg { width: 100%; height: 100%; overflow: visible; }

/* Unterzeile und Kapitelname liegen in derselben Rasterzelle und blenden über. Das Kapitelfeld ist
   0 breit und läuft sichtbar über (die Kopfzeile wird davon nicht breiter); ob der Text bis zur
   Navigation passt, misst kopf-kapitel.js vorher. */
.brand-zeilen { display: grid; }
.brand-zeilen > small { grid-area: 1 / 1; transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.brand small.brand-kapitel {
  width: 0; min-width: 0; overflow: visible; visibility: hidden; opacity: 0; transform: translateY(5px);
  text-transform: none; letter-spacing: .005em; font-size: .76rem; font-weight: 600; color: var(--accent-ink);
}
.nav--kapitel .brand > span, .nav--kapitel-mess .brand > span { overflow: visible; }
.nav--kapitel .brand small.brand-kapitel, .nav--kapitel-mess .brand small.brand-kapitel { display: block; }
.nav--kapitel .brand small.brand-kapitel { visibility: visible; opacity: 1; transform: none; }
.nav--kapitel .brand-zeilen > small:first-child { visibility: hidden; opacity: 0; transform: translateY(-5px); }
.nav--kapitel-mess .brand-zeilen > small { transition: none; }

/* „Lernen“: eigener Punkt neben den Menüs, mit dem Funkelstern aus dem Zeichen */
.nav-links .nav-lernen a { display: inline-flex; align-items: center; gap: .32rem; color: var(--accent-ink); font-weight: 600; }
.nav-lernen .funkel { width: 11px; height: 11px; flex: none; color: var(--gold); }
.nav-links .nav-lernen a:hover { color: var(--accent-ink); background: var(--accent-soft); }

/* ---- build/client/lernen.css ---- */
/* Lernplattform (lernen.js): Stand, Frage des Tages, Experimente-Verzeichnis, Lernreise, Wissenskarte.
   Farben nur über Theme-Variablen; Symbole als SVG (currentColor), keine Emoji. */

/* Sprungziele unter der festen Kopfzeile nicht verstecken */
/* +2.5rem: .reveal-Elemente sind beim Sprung noch um bis zu 24 px nach unten verschoben und rücken danach hoch */
[data-lern][id], .widget[id], [id^="station-"], #tagesfrage, #lernreise, #experimente, #karte, #quiz-wissen, #quiz-zitate { scroll-margin-top: calc(var(--header-h) + 2.5rem); }

/* ---------- Stand-Zeile (Lernseite) ---------- */
.lern-stand { margin-top: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .92rem; color: var(--ink-soft); }
.lern-stand__text { font-weight: 560; color: var(--ink); }
.lern-stand__reset { border: 0; background: none; padding: .3rem .1rem; min-height: 36px; color: var(--ink-faint); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.lern-stand__reset:hover { color: var(--danger); }
.lern-lokal { font-size: .82rem; color: var(--ink-faint); margin: .3rem 0 0; }

/* ---------- Frage des Tages ---------- */
.tag { position: relative; }
.tag__stage { min-height: 16rem; }
.tag__kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; font-size: .88rem; color: var(--ink-soft); }
.tag__serie { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 99px; background: var(--gold-soft); color: var(--ink); }
.tag__serie svg, .tag__serie-text svg { color: var(--gold); flex: none; }
.tag__serie b { font-weight: 700; }
.tag__danach { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; }
.tag__serie-text { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .93rem; color: var(--ink-soft); }
.tag__teilen { display: inline-flex; align-items: center; gap: .45rem; }
.tag__mehr { margin: 1rem 0 0; font-size: .93rem; }
.tag__mehr a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.tag .quiz__opt.is-gewaehlt, .et .quiz__opt.is-gewaehlt { border-color: var(--gold); background: var(--gold-soft); }
.tag .quiz__opt.is-gewaehlt .quiz__num, .et .quiz__opt.is-gewaehlt .quiz__num { border-color: var(--gold); color: var(--ink); }

/* ---------- Experimente-Verzeichnis ---------- */
.exp-gruppe { margin-top: 2rem; }
.exp-gruppe h3 { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 .8rem; }
.exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .exp-grid { grid-template-columns: 1fr; } }
.exp-karte { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: .2rem 1rem; align-content: start; padding: 1.1rem 1.15rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.exp-karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.exp-karte__ico { grid-row: span 3; color: var(--ink-soft); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); }
.exp-karte__ico svg { width: 40px; height: 40px; }
.exp-karte .i-akz { stroke: var(--accent); }
.exp-karte .i-gold { stroke: var(--gold); }
.exp-karte__t { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.exp-karte__s { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); margin: .15rem 0 0; }
.exp-karte__ort { font-size: .8rem; color: var(--ink-faint); margin-top: .45rem; }
.exp-karte__done { position: absolute; top: .7rem; right: .75rem; display: none; align-items: center; gap: .25rem; padding: .12rem .5rem .12rem .35rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: .74rem; font-weight: 650; }
.exp-karte.is-done { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.exp-karte.is-done .exp-karte__done { display: inline-flex; }
.exp-karte.is-done .exp-karte__ico { background: var(--accent-soft); }
.exp-karte.is-done .exp-karte__t { padding-right: 6.5rem; }

/* Startseite: vier Experimente als Anreißer */
.start-exp { margin-top: 1.4rem; }
.start-exp .exp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .start-exp .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .start-exp .exp-grid { grid-template-columns: 1fr; } }
.start-exp .exp-karte { grid-template-columns: 1fr; }
.start-exp .exp-karte__ico { grid-row: auto; margin-bottom: .35rem; }
.start-exp .exp-karte.is-done .exp-karte__t { padding-right: 0; }
.start-mit__zeile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: clamp(1.4rem, 3vw, 2rem); align-items: start; }
@media (max-width: 900px) { .start-mit__zeile { grid-template-columns: 1fr; } }
.start-mit__zeile .widget { margin: 0; }
.start-mit__alle { margin-top: 1.4rem; }

/* ---------- Etappen-Karte (Lernseite) ---------- */
.et-karte { display: grid; grid-template-columns: 1fr; gap: 1.1rem; justify-items: start; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-soft), var(--gold-soft)); border: 1px solid var(--line); }
.et-karte .et-karte__kicker { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); margin: 0 0 .3rem; }
.et-karte h3 { margin: 0 0 .4rem; }
.et-karte p { margin: 0; color: var(--ink-soft); }
.et-karte__bar { height: 6px; margin-top: .9rem; border-radius: 99px; background: color-mix(in srgb, var(--surface) 70%, transparent); overflow: hidden; max-width: 360px; }
.et-karte__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: inherit; transition: width .4s ease; }
.et-karte__n { font-size: .85rem; color: var(--ink-soft); margin-top: .35rem !important; }

/* ---------- Lernreise: Stationen ---------- */
.et-station { padding-block: clamp(2rem, 5vw, 3.2rem); border-top: 1px solid var(--line); }
.et-station__nr { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 0 0 .4rem; }
.et-station__nr svg { display: none; color: var(--accent); }
.et-station.is-fertig .et-station__nr svg { display: inline-block; }
.et-station__intro { color: var(--ink-soft); }
.et__vorher { margin-block: 1.2rem 0; }
.et__vorher.widget { margin-block: 1.2rem 0; }
.et__aufgabe { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm); background: var(--gold-soft); border-left: 3px solid var(--gold); }
.et__aufgabe p { margin: 0; }
.et__aufgabe p + p { margin-top: .4rem; }
.et__zeigen { margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; }
.et__nachfrage { margin-top: 1.2rem; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.et__weiter { margin: 1.2rem 0 0; }
.et__weiter .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* Schleier: Experiment gesperrt, bis getippt wurde (nur mit JS, die Klasse setzt lernen.js) */
.lern-schleier { position: relative; }
.lern-schleier__hinweis { display: none; }
.lern-schleier.is-zu > .widget { filter: blur(9px) saturate(.5); opacity: .45; pointer-events: none; user-select: none; }
.lern-schleier.is-zu .lern-schleier__hinweis { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.lern-schleier__box { max-width: 26rem; padding: 1rem 1.3rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); }
.lern-schleier__box b { display: flex; align-items: center; justify-content: center; gap: .45rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.lern-schleier__box b svg { color: var(--gold); }
.lern-schleier__box span { display: block; margin-top: .3rem; font-size: .92rem; color: var(--ink-soft); }

.et-abschluss { margin-top: 1rem; text-align: center; }
.et-abschluss h2 { margin-bottom: .5rem; }
.et-abschluss__begriffe { list-style: none; padding: 0; margin: 1rem 0 1.3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.et-abschluss__begriffe li { padding: .35rem .8rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: .92rem; }
.et-abschluss .btn-row { justify-content: center; }
.et-neu { border: 0; background: none; margin-top: 1rem; color: var(--ink-faint); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.et-neu:hover { color: var(--ink); }

/* ---------- Wissenskarte: Begriffsnetz im Kartenmodus ---------- */
.netz--karte .netz__k:not(.is-gelernt) circle { fill: var(--surface-2); stroke: color-mix(in srgb, var(--g) 55%, var(--line-strong)); stroke-width: 1.6; stroke-dasharray: 2.5 2.5; }
.netz--karte .netz__k:not(.is-gelernt) text { fill: var(--ink-faint); }
.netz--karte .netz__k.is-gelernt circle { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--g) 70%, transparent)); }
.netz--karte .netz__kanten line { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
.netz__karte-stat { margin: .2rem 0 .8rem; font-weight: 650; color: var(--ink); }
.netz__info-wege { display: block; margin-top: .35rem; }
.netz__info-wege a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .exp-karte, .et-karte__bar span { transition: none; }
}

/* Menüpunkt „Lernen“ auch auf den Etappenseiten hervorheben (layout.mjs setzt dort aria-current="true") */
.nav-links a[aria-current="true"] { color: var(--accent-ink); background: var(--accent-soft); }

/* Glossar-Detailseite: „Selbst ausprobieren“ (seit 2026-10-08) — Lesespalte, daher flexible Spalten */
.gloss-exp { margin: 2.4rem 0 2rem; }
.gloss-exp h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.gloss-exp .exp-grid { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
/* Glossar-Detailseite: Kopf und Text hatten 170 px Abstand (Kopf-Polster + Abschnitts-Polster + Bildrand) */
.gloss-detail { padding-top: 0; }
.gloss-detail .read > :first-child { margin-top: 0; }

/* ---------- Kreuzworträtsel (Baustein von crosswordcreator.org, build/vendor/kreuzwort-*.js) ----------
   Das Element malt Block, Rahmen und Gitter selbst; hier nur die Farben der Site über die CSS-Variablen des Bausteins.
   Alle Variablen setzen (Hell UND Dunkel): sonst mischt sich ein Grundwert der anderen Palette ein. Die Site-Tokens
   wechseln mit data-theme am <html>, die var()-Verweise lösen deshalb am selben Element richtig auf. */
:root {
  --kw-ink: var(--ink); --kw-paper: var(--surface-2); --kw-accent: var(--accent-ink); --kw-on-accent: #fff;
  --kw-line: var(--line-strong); --kw-tile: var(--surface); --kw-marker: color-mix(in srgb, var(--gold) 38%, var(--surface));
  --kw-ok: #138a5a; --kw-fehler: var(--danger); --kw-radius: var(--radius-lg);
}
[data-theme="dark"] { --kw-on-accent: var(--bg); --kw-ok: #3ccf91; }
#kreuzwort { scroll-margin-top: calc(var(--header-h) + 2.5rem); }
/* Hüller: bleibt .widget (gen-audio schneidet so den Ersatzinhalt beim Vorlesen heraus), trägt aber selbst nichts;
   Schatten und Rundung sitzen am Element (display:block). */
.widget.lern-kw { padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; margin-block: 0; }
.lern-kw kreuzwort-raetsel { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lern-kw__stufe { margin: 2rem 0 .6rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; }
.kr__embed { margin-top: 1.25rem; padding: .75rem 1rem; border: 1px solid var(--line-strong, rgba(128,128,128,.3)); border-radius: 8px; font-size: .9rem; }
.kr__embed summary { cursor: pointer; font-weight: 600; user-select: none; }
.kr__embed-body { margin-top: .75rem; display: grid; gap: .6rem; }
.kr__embed-help { margin: 0; opacity: .85; }
.kr__embed-code { width: 100%; box-sizing: border-box; padding: .6rem .75rem; border: 1px solid var(--line-strong, rgba(128,128,128,.35)); border-radius: 6px; background: rgba(0,0,0,.04); color: inherit; font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.kr__embed-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- build/client/mitlesen.css ---- */
/* Mitlesen beim Vorlesen (Niels 27.09.2026): gesprochener Satz dezent, gesprochenes Wort kräftiger.
   Markiert von /assets/js/mitlesen.js (Kopie von ~/projects/tools/tts/read-aloud/mitlesen.js) über die CSS Custom
   Highlight API — nur Hinterlegung, keine Textfarbe. Farbe = --accent der Seite (hell #2f5fd0, dunkel #7aa2ff). */
::highlight(mitlesen-satz) {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
::highlight(mitlesen-wort) {
  background-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (forced-colors: active) {
  ::highlight(mitlesen-satz) {
    background-color: transparent;
    color: CanvasText;
    text-decoration: underline;
  }
  ::highlight(mitlesen-wort) {
    background-color: Mark;
    color: MarkText;
  }
}

/* ---- build/client/netz-begriffe.css ---- */
/* Begriffsnetz (Glossar-Listenseite, build/netz-layout.mjs + netz-begriffe.js).
   Gruppenfarben nur aus Theme-Variablen: Relativität = Akzent, Gravitation & Kosmos = Akzent/Rot gemischt,
   Quanten = Gold, Leben & Werk = Rot. */
.netz-sec .netz-lead { max-width: 72ch; color: var(--ink-soft); }
.netz { --g-rel: var(--accent); --g-kosmos: color-mix(in oklab, var(--accent) 50%, var(--danger)); --g-quant: var(--gold); --g-werk: var(--danger); }
.netz [data-g="rel"] { --g: var(--g-rel); }
.netz [data-g="kosmos"] { --g: var(--g-kosmos); }
.netz [data-g="quant"] { --g: var(--g-quant); }
.netz [data-g="werk"] { --g: var(--g-werk); }

.netz__legende { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: 0 0 .8rem; padding: 0; font-size: .9rem; color: var(--ink-soft); }
.netz__legende li { display: inline-flex; align-items: center; gap: .45rem; }
.netz__dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--g); flex: none; }

.netz__svg { display: block; width: 100%; height: auto; margin-inline: auto; overflow: visible; }
.netz__svg--breit { max-width: 980px; }
.netz__svg--schmal { display: none; max-width: 440px; }
@media (max-width: 959px) {
  .netz.widget { padding-inline: .9rem; }
  .netz__svg--breit { display: none; }
  .netz__svg--schmal { display: block; }
}
@media (max-width: 360px) { .netz.widget { padding-inline: .5rem; } }
.netz__kanten line { stroke: color-mix(in srgb, var(--ink) 24%, transparent); stroke-width: 1.1; transition: opacity .2s, stroke .2s; }
.netz__k { cursor: pointer; }
.netz__k circle { fill: var(--g); stroke: var(--surface); stroke-width: 2; transition: opacity .2s; }
.netz__k text { font: 600 var(--fs, 13px) var(--font-sans); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; transition: opacity .2s; }
.netz__k:hover text { fill: var(--accent-ink); }
.netz__k:focus { outline: none; }
.netz__k:focus-visible circle { stroke: var(--ink); stroke-width: 3; }
.netz__k:focus-visible text { text-decoration: underline; }
.netz.is-aktiv .netz__kanten line { opacity: .12; }
.netz.is-aktiv .netz__kanten line.is-an { opacity: 1; stroke: var(--accent); stroke-width: 2.2; }
.netz.is-aktiv .netz__k { opacity: .28; }
.netz.is-aktiv .netz__k.is-an { opacity: 1; }
.netz.is-aktiv .netz__k.is-mitte circle { stroke: var(--ink); stroke-width: 2.5; }

.netz__info { min-height: 3.2em; margin: .8rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.netz__info-t { color: var(--ink); }
.netz__info-t::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--g); margin-right: .4em; vertical-align: .02em; }
.netz__info-n { display: block; margin-top: .25rem; }
.netz__info-open { display: inline-block; margin-top: .35rem; font-weight: 600; }

.netz__liste { margin-top: 1rem; }
.netz__liste summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.netz__liste summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.netz__liste ul { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .45rem; font-size: .93rem; }
.netz__liste li { line-height: 1.5; }
.netz__liste .netz__dot { margin-right: .45rem; vertical-align: .02em; }
.netz__keine { color: var(--ink-faint); font-style: italic; }
.netz__stat { margin: .8rem 0 0; font-size: .85rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .netz__kanten line, .netz__k circle, .netz__k text, .netz__k { transition: none; }
}

/* ---- build/client/p1-bento.css ---- */
/* Paket P1: magnetischer Bento-Hover (p1-bento.js). Sechs Pastelltöne, je Kachel einer (p1-ton-0 … 5),
   dazu die kräftige Variante für Symbol und Link der aktiven Kachel. Hell und dunkel. */
:root {
  --p1-t0: #e8e2f6; --p1-k0: #5b43a0;
  --p1-t1: #f6ecd2; --p1-k1: #8a5d00;
  --p1-t2: #dcefe3; --p1-k2: #1d6a43;
  --p1-t3: #f7dfe5; --p1-k3: #a3304f;
  --p1-t4: #dbecf3; --p1-k4: #0b5f80;
  --p1-t5: #f8e4d6; --p1-k5: #a3470f;
}
[data-theme="dark"] {
  --p1-t0: #2a2342; --p1-k0: #c3b2f5;
  --p1-t1: #332a14; --p1-k1: #ecc76b;
  --p1-t2: #17322a; --p1-k2: #8fdcb2;
  --p1-t3: #3a1f28; --p1-k3: #f3a3b8;
  --p1-t4: #142f3b; --p1-k4: #8fd0ec;
  --p1-t5: #38251a; --p1-k5: #f2b38a;
}
.p1-ton-0 { --p1-ton: var(--p1-t0); --p1-kraeftig: var(--p1-k0); }
.p1-ton-1 { --p1-ton: var(--p1-t1); --p1-kraeftig: var(--p1-k1); }
.p1-ton-2 { --p1-ton: var(--p1-t2); --p1-kraeftig: var(--p1-k2); }
.p1-ton-3 { --p1-ton: var(--p1-t3); --p1-kraeftig: var(--p1-k3); }
.p1-ton-4 { --p1-ton: var(--p1-t4); --p1-kraeftig: var(--p1-k4); }
.p1-ton-5 { --p1-ton: var(--p1-t5); --p1-kraeftig: var(--p1-k5); }

.p1-bento-flaeche { display: none; }
@media (hover: hover) and (pointer: fine) {
  .p1-bento { position: relative; isolation: isolate; }
  .p1-bento-flaeche {
    display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0;
    transition: transform .45s cubic-bezier(.22,.8,.24,1), width .45s cubic-bezier(.22,.8,.24,1), height .45s cubic-bezier(.22,.8,.24,1), opacity .25s ease, background-color .45s ease;
  }
  .p1-bento--an > .p1-bento-flaeche { opacity: 1; }
  .p1-bento--sprung > .p1-bento-flaeche { transition: opacity .25s ease; }
  /* Kacheln leicht durchscheinend, damit man die Fläche auch unterwegs gleiten sieht; die aktive ganz offen */
  .p1-bento [data-p1-bento-item] { background-color: color-mix(in srgb, var(--surface) 72%, transparent); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; }
  .p1-bento [data-p1-bento-item]:hover { transform: none; }
  .p1-bento.p1-bento--an [data-p1-bento-item].p1-bento-aktiv { background-color: transparent; border-color: transparent; box-shadow: none; }
  .p1-bento [data-p1-bento-item].p1-bento-aktiv .p1-ico,
  .p1-bento [data-p1-bento-item].p1-bento-aktiv .exp-karte__ico,
  .p1-bento [data-p1-bento-item].p1-bento-aktiv .p1-mehr { color: var(--p1-kraeftig); }
}
@media (prefers-reduced-motion: reduce) { .p1-bento-flaeche { transition: opacity .15s, background-color .15s !important; } }

/* Strich-Symbole, die sich zeichnen (pathLength=1): beim Hereinscrollen (.reveal.in) und bei jedem Überfahren */
[data-p1-zeichnen] :is(path, circle, rect, ellipse, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal:not(.in) [data-p1-zeichnen] :is(path, circle, rect, ellipse, line, polyline) { stroke-dashoffset: 1; }
.reveal.in [data-p1-zeichnen] :is(path, circle, rect, ellipse, line, polyline) { animation: p1-zeichnen 1.1s cubic-bezier(.22,.8,.24,1) .15s both; }
/* Neu zeichnen beim Überfahren: eigener Name, damit die Animation auch nach dem Hereinscrollen neu startet */
[data-p1-zeichnen].is-zeichnen :is(path, circle, rect, ellipse, line, polyline),
.reveal.in [data-p1-zeichnen].is-zeichnen :is(path, circle, rect, ellipse, line, polyline) { animation: p1-zeichnen-neu .9s cubic-bezier(.22,.8,.24,1) both; }
.reveal.in [data-p1-zeichnen] > :nth-child(2), [data-p1-zeichnen].is-zeichnen > :nth-child(2) { animation-delay: .12s; }
.reveal.in [data-p1-zeichnen] > :nth-child(n+3), [data-p1-zeichnen].is-zeichnen > :nth-child(n+3) { animation-delay: .24s; }
@keyframes p1-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes p1-zeichnen-neu { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { [data-p1-zeichnen] :is(path, circle, rect, ellipse, line, polyline) { animation: none !important; stroke-dashoffset: 0 !important; } }

/* ---- build/client/p6-start.css ---- */
/* Paket P6 (Gedankenlabor): der Teil, der auf jeder Seite da ist — Strichzeichnungen der Fundstücke, Kuriositätenkabinett,
   Kompass-Knopf, Meldung „Fundstück entdeckt“, Rahmen der Detektiv-Lupe. Dialog, Sternkarte, Schublade und Lupen-Oberfläche
   stehen in build/client/p6-lazy/overlay.css und kommen erst beim Öffnen. Farben nur aus Theme-Variablen (hell und dunkel). */

/* ---------- Zeichnungen (120 × 120): ein Strichstil für alle zwölf; Klassen wirken auch in <use> ---------- */
.a-k, .a-f, .a-g, .a-gf { stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a-k  { fill: none; stroke: var(--ink); }
.a-f  { fill: var(--surface); stroke: var(--ink); }
.a-g  { fill: none; stroke: var(--gold); }
.a-gf { fill: var(--gold-soft); stroke: var(--gold); }
.a-i  { fill: var(--ink); stroke: none; }
.p6-art { display: block; width: min(100%, 148px); height: auto; transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s, opacity .35s; }
.p6-art--gross { width: min(100%, 176px); }

/* ---------- Kompass-Knopf in der Kopfzeile ---------- */
.kompass-knopf { position: relative; }
.kompass-knopf svg { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.kompass-knopf:hover svg, .kompass-knopf:focus-visible svg { transform: rotate(50deg); }
.kompass-knopf:active { scale: .97; }
.kompass-knopf.is-laedt { opacity: .6; }
.kompass-knopf.has-neu::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- Kuriositätenkabinett ---------- */
.p6-vitrinen__hinweis { margin-top: .9rem; max-width: 62ch; }
.p6-vitrinen__stand { margin: 0 0 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.p6-vitrinen__stand::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.p6-vitrinen__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.1rem; }
.p6-vitrinen__fuss { margin-top: 1.4rem; max-width: 62ch; }
.p6-fund { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.p6-fund__vitrine { position: relative; display: grid; place-items: center; padding: 1.5rem 1rem; min-height: 11.5rem; background: radial-gradient(70% 80% at 50% 35%, var(--bg-elevated), var(--surface-2)); border-bottom: 1px solid var(--line); overflow: hidden; }
/* Glas der Vitrine: schräger Lichtstreifen, wandert beim Überfahren (nur Zeiger-Geräte) */
/* Streifen per background-position statt verschobener Fläche (einfacher zu zeichnen). Hinweis: die Chromium-Abstürze, die ich
   dabei zunächst diesem Streifen zuschrieb, kamen von der vollen /tmp-Quote der Box, nicht vom CSS. */
.p6-fund__vitrine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .34) 47%, transparent 56%) no-repeat; background-size: 300% 100%; background-position: 100% 0; transition: background-position .9s cubic-bezier(.2,.7,.2,1); }
[data-theme="dark"] .p6-fund__vitrine::after { background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .1) 47%, transparent 56%); }
@media (hover: hover) { .p6-fund:hover .p6-fund__vitrine::after { background-position: 0 0; } }
.p6-fund__etikett { display: grid; padding: 1rem 1.15rem 1.25rem; flex: 1; }
.p6-fund__zu, .p6-fund__auf { grid-area: 1 / 1; min-width: 0; transition: opacity .3s ease, visibility 0s; }
.p6-fund__zu h3, .p6-fund__auf h3 { margin: .1rem 0 .5rem; font-size: 1.15rem; }
.p6-fund__zu p, .p6-fund__auf p { margin: 0 0 .55rem; font-size: .95rem; color: var(--ink-soft); }
.p6-fund__nr { font-size: .75rem !important; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint) !important; font-variant-numeric: tabular-nums; }
.p6-fund__auf { visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
.p6-fund.is-offen .p6-fund__auf { visibility: visible; opacity: 1; transition: opacity .35s ease .08s, visibility 0s; }
.p6-fund.is-offen .p6-fund__zu { visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.p6-fund:not(.is-offen) .p6-art { filter: brightness(0); opacity: .2; }
[data-theme="dark"] .p6-fund:not(.is-offen) .p6-art { filter: brightness(0) invert(1); opacity: .16; }
.p6-fund.is-offen .p6-art { animation: p6-auf .55s cubic-bezier(.2,.7,.2,1) both; }
@media (hover: hover) { .p6-fund.is-offen:hover .p6-art { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--gold) 38%, transparent)); } }
.p6-fund.is-ernst.is-offen:hover .p6-art { transform: none; filter: none; }
@keyframes p6-auf { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.p6-fund__quellen { font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }
.p6-fund__quellen b { font-weight: 600; }
.p6-fund .p6-quellen, .p6-fund .p6-orte, .p6k .p6-quellen, .p6k .p6-orte { list-style: none; margin: .2rem 0 0; padding: 0; }
.p6-fund .p6-quellen li, .p6-fund .p6-orte li, .p6k .p6-quellen li, .p6k .p6-orte li { margin: .15rem 0; font-size: .88rem; overflow-wrap: anywhere; }
.p6-oder { color: var(--ink-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.p6-fund .p6-orte a, .p6k .p6-orte a { display: inline-block; padding-block: .2rem; }

/* ---------- Meldung „Fundstück entdeckt“ ---------- */
/* Seit 06.11.2026 unten rechts über dem Nach-oben-Knopf (46 px): oben verdeckte die Meldung auf dem Handy die Seitenüberschrift. */
.p6-toast { position: fixed; z-index: 80; bottom: calc(1.1rem + 46px + .6rem + env(safe-area-inset-bottom, 0px)); right: 1.1rem; width: min(360px, calc(100vw - 2.2rem)); visibility: hidden; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .28s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; }
.p6-toast.is-an { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.p6-toast__in { display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .75rem; background: var(--bg-elevated); border: 1px solid var(--line-strong); border-left: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.p6-toast.is-ernst .p6-toast__in { border-left-color: var(--ink-faint); }
.p6-toast__ico { display: grid; place-items: center; flex: none; color: var(--gold); }
.p6-toast.is-ernst .p6-toast__ico { color: var(--ink-soft); }
.p6-toast.is-an:not(.is-ernst) .p6-toast__ico svg { animation: p6-funkel .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes p6-funkel { 0% { transform: scale(.2) rotate(-90deg); opacity: 0; } 60% { transform: scale(1.3) rotate(8deg); opacity: 1; } 100% { transform: none; } }
.p6-toast__t { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.p6-toast__t strong { font-size: .82rem; }
.p6-toast__t span { font-size: .82rem; line-height: 1.3; color: var(--ink-soft); overflow-wrap: anywhere; }
.p6-toast__an, .p6-toast__zu { min-height: 44px; border: 0; background: transparent; color: var(--accent-ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); transition: background .15s, scale .15s; }
.p6-toast__an { padding: 0 .7rem; }
.p6-toast__zu { width: 44px; color: var(--ink-faint); display: grid; place-items: center; }
.p6-toast__an:hover, .p6-toast__zu:hover { background: var(--surface-2); }
.p6-toast__an:active, .p6-toast__zu:active { scale: .97; }
@media (max-width: 520px) { .p6-toast { right: 1rem; left: 1rem; width: auto; } }

/* ---------- Rahmen der Detektiv-Lupe (Bild bleibt, wie es war; Oberfläche kommt beim ersten Nähern) ---------- */
.p6-lupe { display: block; position: relative; border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) {
  .p6-toast, .p6-toast.is-an { transform: none; transition: opacity .15s ease, visibility 0s; }
  .p6-toast.is-an:not(.is-ernst) .p6-toast__ico svg, .p6-fund.is-offen .p6-art { animation: none; }
  .p6-fund__vitrine::after { transition: none; }
  .kompass-knopf svg, .p6-art { transition: none; }
  .p6-fund__zu, .p6-fund__auf { transition: opacity .15s ease, visibility 0s !important; }
}

/* ---- build/client/ra-knopf.css ---- */
/* Vorlese-Knopf (Niels 25.09.2026): Pille unter Überschrift + Einleitung in der Textspalte (build/audio.mjs
   mitVorleseKnopf). Zustand setzt main.js (Read-aloud-IIFE, sync) als data-ra-zustand: ruhe | weiter | spielt.
   „KI-Stimme“ steht nur im Text des Zustands „spielt“ (die anderen Texte sind per hidden aus). */
.ra-knopf-zeile { margin: 1.15rem 0 0; }
.ra-knopf { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%;
  padding: .32rem .95rem .32rem .34rem; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2;
  color: var(--ink); background: var(--surface); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 999px;
  transition: border-color .15s ease, background-color .15s ease; }
.ra-knopf:hover { border-color: var(--accent); }
.ra-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ra-knopf__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--bg); }
.ra-knopf__play { margin-left: 2px; }   /* Dreieck optisch mittig */
.ra-knopf__pause { display: none; }
.ra-knopf__text { overflow: hidden; text-overflow: ellipsis; }
.ra-knopf__text[hidden] { display: none; }
.ra-knopf[data-ra-zustand="spielt"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.ra-knopf[data-ra-zustand="spielt"] .ra-knopf__play { display: none; }
.ra-knopf[data-ra-zustand="spielt"] .ra-knopf__pause { display: block; }
.ra-knopf-zeile noscript audio { display: block; width: 100%; max-width: 460px; height: 38px; margin-top: .6rem; }
@media print { .ra-knopf-zeile { display: none; } }

/* Player-Balken unten: Titelzeile mit „KI-Stimme“ dahinter — nur während der Wiedergabe (main.js sync). */
.ra-bar__zeile { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ra-bar__zeile .ra-bar__label { flex: 0 1 auto; }
.ra-bar__ki { flex: 0 0 auto; font-size: .72rem; line-height: 1; color: var(--ink-faint); white-space: nowrap; }
.ra-bar__ki[hidden] { display: none; }
/* Handy: Titel ist dort aus, die Zeile trägt nur den Hinweis — Platz bleibt reserviert, damit der Balken
   bei Play/Pause nicht in der Höhe springt. */
@media (max-width: 560px) { .ra-bar__ki[hidden] { display: inline; visibility: hidden; } }