/* ZERRER — Blutrot als Akzent, Rubik (lokal).
   Hell & Dunkel über umgeschaltete Tokens (System oder Profil-Umschalter);
   Container-Radius 14px, weiche mehrlagige Elevation, moderne Übergänge.
   Untere Leiste nur mobil; ab 768px Hamburger-Menü oben rechts. */

/* CI-Farbwelt (siehe docs/ci.md): Hauptfarbe + drei Signalfarben.
   Ampellogik: Rot = offen, Gelb = teilweise/Hinweis, Grün = erledigt. */
:root {
  color-scheme: light;
  /* Marke (CI): Blutrot als Akzent + Ampel-Signalfarben. Die „grungy hardcore
     skin" weiter unten überschreibt diese Basistokens pro Theme; sie sind hier
     nur der rote Fallback. */
  --primaer: #cc2418;
  --primaer-dunkel: #a81a10;
  --primaer-tief: #a81a10;
  --primaer-weich: #f3ded9;
  /* Kompetenzstufen-Rampe (Blau-Intensität, Einsteiger→Experte). KEINE Ampelfarben —
     Rot/Gelb/Grün bleiben dem Status vorbehalten; die Stufe kodiert nur Intensität. */
  --stufe-1-flaeche: #e4e0d6; --stufe-1-text: #6b655b;
  --stufe-2-flaeche: #c9c4b8; --stufe-2-text: #3d3931;
  --stufe-3-flaeche: #4a453d; --stufe-3-text: #ece8df;
  /* Pfad-Kachel-Hues (kühle, markennahe Palette; bewusst KEINE Ampelfarben). */
  --pf-blau: #1568ad; --pf-blau-weich: #e8f3fe;
  --pf-teal: #0e8a86; --pf-teal-weich: #d7f1ef;
  --pf-violett: #6b46c9; --pf-violett-weich: #ece7fb;
  --pf-indigo: #3b4bc0; --pf-indigo-weich: #e5e8fd;
  --pf-magenta: #b83c8f; --pf-magenta-weich: #f7e3f0;
  --pf-sky: #0f83c4; --pf-sky-weich: #dceffb;
  --pf-schiefer: #586577; --pf-schiefer-weich: #eaeef4;
  --signal-rot: #f4402a;
  --signal-rot-text: #c4180a;
  --signal-rot-weich: #fdece9;
  --signal-gruen: #24bd47;
  --signal-gruen-text: #14802f;
  --signal-gruen-weich: #e6f7ea;
  --signal-gelb: #f2d93b;
  --signal-gelb-text: #6f6104;
  --signal-gelb-weich: #fbf5d3;
  /* Flächen & Tinte — ruhige, leicht kühle Neutrale. */
  --hintergrund: #f2f6fc;
  --hintergrund-2: #eaf1fa;
  --flaeche: #ffffff;
  --flaeche-2: #f1f5fb;
  --tinte: #16202b;
  --tinte-2: #5a6675;
  /* #6b7686 statt #8a94a3: ~4,6:1 auf Weiß (AA für die kleinen Sekundär-Labels,
     die diesen Token tragen). Nur Hellmodus; der Dunkelwert bleibt. */
  --tinte-3: #6b7686;
  --linie: #e9eef6;
  --linie-stark: #dae3ee;
  /* Überschriften ruhen in Tinte; Blau wird Akzent (Links, Aktion, Aktiv-Zustand). */
  --ueberschrift: var(--tinte);
  /* Radien (CI weiterentwickelt: weicher, gestuft). */
  --radius: 14px;
  --radius-gross: 20px;
  --radius-klein: 9px;
  /* Kopf/Overlay. */
  --kopf-bg: rgba(242, 246, 252, 0.82);
  --overlay: rgba(18, 32, 46, 0.42);
  /* Elevation — weiche, mehrlagige Tiefe statt harter Rahmen. */
  --schatten-weich: 0 1px 2px rgba(20, 30, 45, 0.05);
  --schatten-karte: 0 1px 2px rgba(20, 30, 45, 0.04), 0 10px 26px -14px rgba(20, 30, 45, 0.12);
  --schatten-hover: 0 2px 6px rgba(20, 30, 45, 0.06), 0 20px 42px -18px rgba(56, 164, 241, 0.30);
  /* Einzelfall-Schatten, die nicht aus --schatten-weich/-karte/-hover fallen.
     Als Token, damit ein Thema sie geschlossen abschalten kann — sonst bliebe
     jeder davon beim Themenwechsel als fest verdrahteter Rest stehen. */
  --schatten-leiste: 0 -4px 16px rgba(31, 41, 51, 0.06);
  --schatten-schublade: -12px 0 40px rgba(31, 41, 51, 0.18);
  --schatten-dialog: 0 24px 60px rgba(22, 51, 74, 0.25);
  --schatten-ring: 0 0 0 1px rgba(0, 0, 0, 0.25);
  --filter-marke: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  --filter-medaille: drop-shadow(0 2px 3px rgba(31, 41, 51, 0.25));
  /* Kante der grossen Container. Im Dunkeln transparent (dort trennt der
     Versatz-Schatten), im Hellen die Tintenkante — und dort NUR an Elementen,
     die man anklicken kann: Eine Kante ist eine Klick-Zusage, kein Ornament.
     Die Breite liegt an ALLEN Containern an (auch den randlosen), damit das
     Setzen der Farbe im Hover keinen Layout-Sprung ausloest. */
  --karten-kante: transparent;
  --karten-kante-breite: 2px;
  /* Kante von Inhalts-Karten AUSSERHALB des .karte-Satzes (Pattern-Karte). Sie
     folgt derselben Regel — nur hat sie im Dunkeln eine eigene Farbe, deshalb
     ein eigenes Token statt --karten-kante. */
  --widget-kante: var(--linie-stark);
  /* Trennlinien INNERHALB eines Containers (Listen, Abschnittsfuesse) sind
     keine Raender — sie duerfen leichter sein als eine Kante, sonst zerschneidet
     jede Zeile die Karte. Im Dunkeln faellt das mit --linie zusammen. */
  --trennlinie: var(--linie);
  --uebergang: 200ms cubic-bezier(0.33, 1, 0.5, 1);
}

/* Dunkles Farbschema: folgt dem System; per Profil-Umschalter überschreibbar
   (data-theme="hell" erzwingt hell, "dunkel" erzwingt dunkel). Hauptfarbe & Ampel bleiben. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    color-scheme: dark;
    --primaer: #ff3b2e;
    --primaer-dunkel: #ff5b50;
    --primaer-tief: #ff3b2e;
    --primaer-weich: #2c1310;
    --stufe-1-flaeche: #23231f; --stufe-1-text: #a4a099;
    --stufe-2-flaeche: #3a3a34; --stufe-2-text: #cbc7bd;
    --stufe-3-flaeche: #86827a; --stufe-3-text: #0b0b0c;
    --pf-blau: #6fb8f0; --pf-blau-weich: #152c40;
    --pf-teal: #48c2ba; --pf-teal-weich: #0f2b2a;
    --pf-violett: #a98cf0; --pf-violett-weich: #221b3a;
    --pf-indigo: #8894f0; --pf-indigo-weich: #1a2044;
    --pf-magenta: #e58cc6; --pf-magenta-weich: #311a29;
    --pf-sky: #55b4e8; --pf-sky-weich: #0e2a3d;
    --pf-schiefer: #9fb0c4; --pf-schiefer-weich: #202a35;
    --signal-rot: #ff5a44; --signal-rot-text: #ff9a8c; --signal-rot-weich: #3a1a15;
    --signal-gruen: #33cf5a; --signal-gruen-text: #7fe39a; --signal-gruen-weich: #12301f;
    --signal-gelb: #f2d93b; --signal-gelb-text: #e2ce74; --signal-gelb-weich: #322f10;
    --hintergrund: #0f151c;
    --hintergrund-2: #131c26;
    --flaeche: #18232f;
    --flaeche-2: #1f2c3a;
    --tinte: #e8eef5;
    --tinte-2: #a2b2c4;
    --tinte-3: #7f8ea0;
    --linie: #273543;
    --linie-stark: #3a4b5e;
    --kopf-bg: rgba(15, 21, 28, 0.82);
    --overlay: rgba(6, 12, 18, 0.62);
    --schatten-weich: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
    --schatten-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 44px -18px rgba(56, 164, 241, 0.28);
  }
}
:root[data-theme='dunkel'] {
  color-scheme: dark;
  --primaer: #ff3b2e;
  --primaer-dunkel: #ff5b50;
  --primaer-tief: #ff3b2e;
  --primaer-weich: #2c1310;
  --stufe-1-flaeche: #23231f; --stufe-1-text: #a4a099;
  --stufe-2-flaeche: #3a3a34; --stufe-2-text: #cbc7bd;
  --stufe-3-flaeche: #86827a; --stufe-3-text: #0b0b0c;
  --pf-blau: #6fb8f0; --pf-blau-weich: #152c40;
  --pf-teal: #48c2ba; --pf-teal-weich: #0f2b2a;
  --pf-violett: #a98cf0; --pf-violett-weich: #221b3a;
  --pf-indigo: #8894f0; --pf-indigo-weich: #1a2044;
  --pf-magenta: #e58cc6; --pf-magenta-weich: #311a29;
  --pf-sky: #55b4e8; --pf-sky-weich: #0e2a3d;
  --pf-schiefer: #9fb0c4; --pf-schiefer-weich: #202a35;
  --signal-rot: #ff5a44; --signal-rot-text: #ff9a8c; --signal-rot-weich: #3a1a15;
  --signal-gruen: #33cf5a; --signal-gruen-text: #7fe39a; --signal-gruen-weich: #12301f;
  --signal-gelb: #f2d93b; --signal-gelb-text: #e2ce74; --signal-gelb-weich: #322f10;
  --hintergrund: #0f151c;
  --hintergrund-2: #131c26;
  --flaeche: #18232f;
  --flaeche-2: #1f2c3a;
  --tinte: #e8eef5;
  --tinte-2: #a2b2c4;
  --tinte-3: #7f8ea0;
  --linie: #273543;
  --linie-stark: #3a4b5e;
  --kopf-bg: rgba(15, 21, 28, 0.82);
  --overlay: rgba(6, 12, 18, 0.62);
  --schatten-weich: 0 1px 2px rgba(0, 0, 0, 0.4);
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.55);
  --schatten-hover: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 44px -18px rgba(56, 164, 241, 0.28);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinte);
  background-color: var(--hintergrund);
  /* Ganz hinten (NUR der Seitenrahmen, hinter dem Inhalt): kräftige,
     chaotische Kratzer + schweres analoges Korn. Textur/Mischung je Thema
     über --backdrop-* (Creme: dunkel/multiply, Dunkel: hell/normal). Der
     Inhalt sitzt auf einer eigenen, sauberen Fläche (main). */
  background-image: var(--backdrop-image);
  background-size: var(--backdrop-size);
  background-repeat: var(--backdrop-repeat);
  background-attachment: var(--backdrop-attachment);
  background-blend-mode: var(--backdrop-blend);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, figure {
  margin: 0 0 0.6rem;
}

h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: var(--ueberschrift); }
h2 { font-size: 1.3rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ueberschrift); }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.005em; color: var(--ueberschrift); }
h4 { font-size: 0.78rem; font-weight: 600; color: var(--tinte-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Icons sind immer farbig, nie schwarz — Default Hauptfarbe, Status in Signalfarben. */
.fa-solid { color: var(--primaer); }
.knopf .fa-solid, .hero .fa-solid, .menue-schliessen .fa-solid, .hamburger .fa-solid { color: inherit; }

a { color: var(--primaer-tief); }

code { font-size: 0.85em; word-break: break-all; }

/* ---------- Rahmen ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--kopf-bg);
  backdrop-filter: blur(10px);
  border-bottom: 0;
  padding: env(safe-area-inset-top) 1rem 0;
}

.kopf-innen {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.65rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

/* Wortmarke in Tinte, nicht in Rot: Das rote Plektrum daneben ist der Akzent —
   traegt der Schriftzug dieselbe Farbe, konkurrieren zwei rote Flaechen in der
   Kopfzeile miteinander und keine der beiden fuehrt. Schwarz auf Weiss bzw.
   Weiss auf Schwarz laesst dem Logo den Auftritt. */
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tinte);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marke-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  /* Unten Platz für die fixierte Bottom-Bar (nur mobil sichtbar) lassen, damit der
     letzte Container nicht dahinter verschwindet; ab Tablet ohne Bar überschrieben. */
  padding: 1.1rem 1rem calc(5rem + env(safe-area-inset-bottom));
  /* Inhalts-Fläche über --sheet-bg: Creme = saubere Papierfläche; Dunkel =
     dunkler Schleier, durch den der Flyer-Collage-Hintergrund gedimmt scheint.
     Text sitzt auf den dunklen Karten/Abschnitten (starker Kontrast). */
  background: var(--sheet-bg, var(--flaeche));
}

/* Einstiegs-Übergang: die Blöcke der Ansicht gleiten gestaffelt herein — nur
   bei Routenwechsel (app.js setzt .einstieg dann neu), nicht bei jeder Zustands-
   Neuzeichnung. prefers-reduced-motion schaltet es unten global ab. */
@keyframes ansicht-einstieg {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Der Genre-Landing-Block trägt einen eigenen Reinbox-/Scroll-Effekt und ist
   deshalb vom globalen Einstiegs-Stagger ausgenommen (sonst überschriebe der
   Stagger den Box-in-Zustand des Heros). */
#ansicht.einstieg > *:not(.genre-landing):not(.genre-landing-hero) {
  animation: ansicht-einstieg 400ms cubic-bezier(0.22, 0.9, 0.35, 1) both;
}
#ansicht.einstieg > :nth-child(2) { animation-delay: 45ms; }
#ansicht.einstieg > :nth-child(3) { animation-delay: 90ms; }
#ansicht.einstieg > :nth-child(4) { animation-delay: 135ms; }
#ansicht.einstieg > :nth-child(5) { animation-delay: 180ms; }
#ansicht.einstieg > :nth-child(n+6) { animation-delay: 220ms; }

/* ---------- Untere Leiste (nur mobil) ---------- */

.fussnav {
  position: fixed;
  inset: auto 0 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  box-shadow: var(--schatten-leiste);
  padding-bottom: env(safe-area-inset-bottom);
}

.fussnav a,
.fussnav-mehr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0 0.5rem;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--tinte-2);
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color var(--uebergang), transform var(--uebergang);
}

.fussnav a .fa-solid,
.fussnav-mehr .fa-solid { font-size: 1.15rem; }

.fussnav a.aktiv,
.fussnav-mehr.aktiv {
  color: var(--primaer-tief);
  font-weight: 600;
}

.fussnav a.aktiv .fa-solid,
.fussnav-mehr.aktiv .fa-solid { transform: translateY(-1px); color: var(--primaer-tief); }

body.im-onboarding .fussnav { display: none; }

/* ---------- Seiten-Footer (NUR Desktop ≥768px) ---------- */
/* Auf Mobil trägt die fixierte Bottom-Bar die Navigation — der Footer bleibt aus.
   Ab Tablet (Bar entfällt) erscheint er als ruhige Quick-Link-Zeile am Seitenende. */
.seiten-footer { display: none; }
body.im-onboarding .seiten-footer { display: none; }
@media (min-width: 768px) {
  .seiten-footer {
    display: block;
    border-top: 1px solid var(--linie);
    background: var(--kopf-bg, var(--flaeche));
    padding: 2rem 1.5rem 1.4rem;
    margin-top: 2rem;
  }
  .footer-innen {
    max-width: 44rem; margin: 0 auto;
    display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: flex-start;
  }
  .footer-marke { display: flex; flex-direction: column; gap: 0.2rem; margin-right: auto; }
  /* Dieselbe Wortmarke wie in der Kopfzeile — also auch dieselbe Tinte. */
  .footer-marke-name {
    font-family: var(--schrift-display, inherit); color: var(--tinte);
    font-size: 1.15rem; letter-spacing: 0.02em;
  }
  .footer-marke-claim { color: var(--tinte-2); font-size: 0.85rem; }
  .footer-spalte { display: flex; flex-direction: column; gap: 0.45rem; }
  .footer-titel {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tinte-2); font-weight: 700; margin-bottom: 0.15rem;
  }
  .footer-spalte a { color: var(--tinte); text-decoration: none; font-size: 0.9rem; }
  .footer-spalte a:hover, .footer-spalte a:focus-visible { color: var(--primaer-tief); text-decoration: underline; }
  .footer-schluss {
    max-width: 44rem; margin: 1.4rem auto 0; padding-top: 1rem;
    border-top: 1px solid var(--trennlinie); color: var(--tinte-2);
    font-size: 0.76rem; letter-spacing: 0.02em;
  }
}
body.im-onboarding main { padding-bottom: 2rem; }

/* ---------- Hamburger + Menü (Desktop) ---------- */

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: var(--radius);
  background: var(--primaer);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Kopf-Suchknopf: immer sichtbar — auch mobil, wo der Hamburger verborgen ist
   (die Suche ist von jeder Seite erreichbar). */
.kopf-suche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  color: var(--primaer);
  text-decoration: none;
  transition: background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
@media (hover: hover) {
  .kopf-suche:hover { background: var(--primaer-weich); box-shadow: var(--schatten-hover); transform: translateY(-1px); }
}

.menue {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.menue-schleier {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.menue-lade {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(21rem, 88vw);
  background: var(--flaeche);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--schatten-schublade);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform 380ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.menue.offen .menue-schleier { opacity: 1; }
.menue.offen .menue-lade { transform: translateX(0); }

.menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.menue-titel {
  font-weight: 700;
  color: var(--tinte-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

.menue-schliessen {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: var(--flaeche-2);
  color: var(--primaer-tief);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--uebergang), box-shadow var(--uebergang);
}

.menue-punkt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  color: var(--tinte);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.22, 0.9, 0.3, 1), background var(--uebergang), color var(--uebergang);
}

.menue-punkt .fa-solid {
  width: 1.5rem;
  text-align: center;
  color: var(--primaer);
}

/* Aktivitäts-Hauptpunkte (Lernen/Üben/Experimentieren/Songwriting): kräftiger
   als die abgesetzten Referenzpunkte darunter. */
.menue-haupt { font-weight: 700; font-size: 1.12rem; }

/* Gestaffeltes Hereingleiten der Menüpunkte. */
.menue.offen .menue-punkt { opacity: 1; transform: translateX(0); }
.menue.offen .menue-punkt:nth-of-type(1) { transition-delay: 60ms; }
.menue.offen .menue-punkt:nth-of-type(2) { transition-delay: 120ms; }
.menue.offen .menue-punkt:nth-of-type(3) { transition-delay: 180ms; }
.menue.offen .menue-punkt:nth-of-type(4) { transition-delay: 240ms; }
.menue.offen .menue-punkt:nth-of-type(5) { transition-delay: 300ms; }
.menue.offen .menue-punkt:nth-of-type(6) { transition-delay: 360ms; }
.menue.offen .menue-punkt:nth-of-type(7) { transition-delay: 420ms; }
.menue.offen .menue-punkt:nth-of-type(8) { transition-delay: 480ms; }

/* Trenner vor den Rechtstexten (Impressum/Datenschutz) im Menü. */
.menue-trenner {
  display: block;
  height: 1px;
  margin: 0.5rem 0.9rem;
  background: var(--trennlinie);
}

.menue-punkt.aktiv {
  background: var(--primaer-weich);
  color: var(--primaer-tief);
}

/* Themen-Steuerung (Darstellung) im Menü — segmentierter Umschalter. */
.menue-thema { padding: 0.4rem 0.9rem 0.7rem; }
.menue-thema-titel {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.menue-thema-optionen {
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.menue-thema-knopf {
  flex: 1;
  padding: 0.45rem 0.3rem;
  border: 0;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--tinte-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.menue-thema-knopf.aktiv {
  background: var(--flaeche);
  color: var(--primaer-tief);
  box-shadow: var(--schatten-weich);
}

/* Kleine Rechtstext-Links am Menüfuß (Impressum · Datenschutz). */
.menue-rechtliches {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem 0.2rem;
  border-top: 1px solid var(--trennlinie);
  color: var(--tinte-3);
  font-size: 0.82rem;
}
.menue-mini { color: var(--tinte-2); text-decoration: none; }
.menue-mini.aktiv { color: var(--primaer-tief); font-weight: 600; }

@media (hover: hover) {
  .menue-thema-knopf:not(.aktiv):hover { color: var(--primaer-tief); }
  .menue-mini:hover { color: var(--primaer-tief); text-decoration: underline; }
}

/* ---------- Grundbausteine ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  padding: 1.25rem;
  margin-bottom: 1.05rem;
  transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
}

.karte > :last-child { margin-bottom: 0; }

a.karte-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.karte-akzent { border-left: 3px solid var(--primaer); }

.karte-inaktiv { opacity: 0.55; }

/* Pfade als konsistentes Kachel-Raster (2-spaltig ab Tablet) statt schnöder Liste.
   Jede Kachel trägt eine farbige Icon-Medaille in ihrer Hue + dezenten Hue-Schimmer;
   die Fläche bleibt neutral (CI: Blau = Akzent, keine Flächenfarbe). Hue-Zuordnung
   über --pf/--pf-weich, die in beiden Themes automatisch kippen. */
.pfad-gitter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 1.05rem;
}
@media (min-width: 34rem) {
  .pfad-gitter { grid-template-columns: 1fr 1fr; }
}
/* Instrumente: schon auf Mobil zweispaltig; die Band-Kachel nimmt die ganze Reihe. */
.instr-gitter { grid-template-columns: 1fr 1fr; }
.instr-gitter .band-kachel { grid-column: 1 / -1; }
.pfad-kachel {
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
/* Kopf: Icon NEBEN der Überschrift (eine Zeile), Beschreibung darunter. */
.pfad-kachel-kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.pfad-kachel-kopf h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pfad-kachel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8.5rem;
  height: 8.5rem;
  background: radial-gradient(circle at top left, var(--pf-weich), transparent 72%);
  opacity: 0.75;
  pointer-events: none;
}
.pfad-medaille {
  position: relative;
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: var(--radius-klein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-weich);
  color: var(--pf);
  font-size: 1.2rem;
}
/* Medaillen-Icon trägt die Pfad-Hue, nicht das globale Akzentblau (.fa-solid). */
.pfad-medaille .fa-solid { color: inherit; }
.pfad-kachel-text {
  position: relative;
  flex: 1;
  min-width: 0;
}
.pfad-kachel-text > :last-child { margin-bottom: 0; }
.pfad-kachel-text h3 {
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pfad-kachel-chips { margin-top: 0.5rem; }
.pfad-kachel-ziel { margin-top: 0.35rem; }
/* CTA je Kachel: dezenter Button-Look in der Pfad-Hue, unten linksbündig. */
.pfad-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pf);
}
.pfad-cta .fa-solid { color: inherit; transition: transform var(--uebergang); }
@media (hover: hover) {
  a.pfad-kachel:hover .pfad-cta .fa-solid { transform: translateX(3px); }
}

/* Kompetenzpfad-Block im Profil ist ein Wiedereinstieg-Link (nicht nur Anzeige). */
.profil-kompetenz-link { margin: 0.2rem 0 0.4rem; }
.profil-kompetenz-link h3 { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.profil-kompetenz-link h3 .fa-arrow-right { font-size: 0.8em; margin-left: auto; transition: transform var(--uebergang); }
@media (hover: hover) {
  .profil-kompetenz-link:hover .fa-arrow-right { transform: translateX(3px); }
}
.pfad-kachel-ring {
  position: relative;
  flex: none;
  align-self: center;
}
.pfad-kachel--lead {
  grid-column: 1 / -1;
  align-items: center;
}
@media (hover: hover) {
  a.pfad-kachel:hover { border-color: var(--pf); }
}

.pf-blau { --pf: var(--pf-blau); --pf-weich: var(--pf-blau-weich); }
.pf-teal { --pf: var(--pf-teal); --pf-weich: var(--pf-teal-weich); }
.pf-violett { --pf: var(--pf-violett); --pf-weich: var(--pf-violett-weich); }
.pf-indigo { --pf: var(--pf-indigo); --pf-weich: var(--pf-indigo-weich); }
.pf-magenta { --pf: var(--pf-magenta); --pf-weich: var(--pf-magenta-weich); }
.pf-sky { --pf: var(--pf-sky); --pf-weich: var(--pf-sky-weich); }
.pf-schiefer { --pf: var(--pf-schiefer); --pf-weich: var(--pf-schiefer-weich); }

.leise { color: var(--tinte-2); font-size: 0.9rem; }

/* Nur für Screenreader (visuell versteckt) — Struktur-H1 der Startseite, aria-live-Ansagen. */
.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Programmatisch fokussierter Inhaltsanker bei Routenwechsel — kein sichtbarer Ring. */
#ansicht:focus { outline: none; }

/* Skip-Link: springt für Tastatur-Nutzer über Kopf + Navigation direkt zum
   Inhalt. Außerhalb des Viewports geparkt, gleitet bei Fokus herein. */
.zum-inhalt {
  position: absolute;
  left: 0.5rem;
  top: -3.5rem;
  z-index: 200;
  padding: 0.55rem 0.9rem;
  background: var(--flaeche);
  color: var(--primaer-tief);
  border: 1px solid var(--primaer);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--uebergang);
}
.zum-inhalt:focus { top: 0.5rem; }

.bestaetigung { color: var(--signal-gruen-text); font-weight: 600; }

.abschnitt-titel { margin: 1.3rem 0 0.6rem; }

.chip {
  display: inline-block;
  padding: 0.13rem 0.66rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--linie-stark);
  color: var(--tinte-2);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}
/* display: inline-block würde sonst das [hidden]-Attribut aushebeln (z. B. der
   Stopp-Knopf im Pattern-Werkzeug, der nur während der Wiedergabe erscheint). */
.chip[hidden] { display: none; }

/* Aktiver/ausgewählter Chip: satte Akzentfläche mit VOLLWEISSER Schrift (nicht
   das rote --primaer-tief) — klar erkennbarer Ausgewählt-Zustand, lesbar in
   beiden Themes. */
.chip-akzent { background: var(--primaer); color: #fff; border-color: var(--primaer); }

/* Signal-Badges (Ampellogik) — weiche Fläche, kräftige Schrift, farbige Kante. */
.chip-rot { background: var(--signal-rot-weich); color: var(--signal-rot-text); border: 1px solid var(--signal-rot); }
.chip-gruen { background: var(--signal-gruen-weich); color: var(--signal-gruen-text); border: 1px solid var(--signal-gruen); }

/* Baustein-Chips als Buttons: leicht blau hervorgehoben, Sprung direkt in den Baustein. */
.chip-baustein { background: var(--primaer-weich); color: var(--primaer-tief); border-color: transparent; }

/* Kompetenzstufen-Chips: Blau-Intensitätsrampe (Einsteiger hell → Experte tief).
   Bewusst KEINE Ampel-Signalfarben — Rot/Gelb/Grün bleiben dem Status vorbehalten. */
.chip-stufe { border-color: transparent; font-weight: 600; }
.chip-stufe-einsteiger { background: var(--stufe-1-flaeche); color: var(--stufe-1-text); }
.chip-stufe-fortgeschritten { background: var(--stufe-2-flaeche); color: var(--stufe-2-text); }
.chip-stufe-experte { background: var(--stufe-3-flaeche); color: var(--stufe-3-text); }
.chip-stufe-trainer { background: var(--flaeche-2); color: var(--tinte-2); border-color: var(--linie-stark); }

/* Chip-Links klickbar: kleiner Hover (nur Zeigergeräte; Lift nur ohne reduce-motion). */
a.chip { text-decoration: none; cursor: pointer; transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang); }
a.chip:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; }
@media (hover: hover) {
  a.chip:hover { box-shadow: var(--schatten-weich); }
  a.chip-baustein:hover { border-color: var(--primaer); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.chip:hover { transform: translateY(-1px); }
}

.chip-zeile { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.chip-trenner { color: var(--tinte-2); }

.banner-hinweis {
  background: var(--signal-gelb-weich);
  border-left: 3px solid var(--signal-gelb);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.banner-hinweis a { color: inherit; font-weight: 600; }

/* ---------- Knöpfe & Formulare ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  color: var(--tinte);
  transition: background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang), color var(--uebergang);
}

/* Füllung im Hellmodus auf --primaer-tief (#1568ad, ~5,8:1 mit Weiß) statt --primaer
   WCAG-AA-Kontrast für den meistgenutzten Button. Der Akzent
   bleibt für Links/Rahmen/Icons; der Dunkelmodus kippt unten zurück auf --primaer
   (dort trägt der Button ohnehin dunkle Schrift). */
.knopf-primaer { background: var(--primaer-tief); color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); }
.knopf-primaer:active { background: var(--primaer-dunkel); }
.knopf-sekundaer { border-color: var(--linie); background: var(--flaeche); }
.knopf-leise { color: var(--tinte-2); font-weight: 500; }
.knopf-gefahr { color: var(--signal-rot-text); border-color: var(--signal-rot); }
.knopf-erledigt { color: var(--signal-gruen-text); border-color: var(--signal-gruen); }
.knopf[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
/* Nicht verlinkter CTA (noch nicht gefüllter Platzhalter-Absprung). */
.knopf-inaktiv { opacity: 0.6; cursor: default; border-color: var(--linie); background: var(--flaeche-2); color: var(--tinte-2); }

.knopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.8rem;
}

select {
  font: inherit;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.4rem 0.55rem;
}

input[type='radio'], input[type='checkbox'] {
  accent-color: var(--primaer);
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin: 0.15rem 0 0;
}

/* ---------- Optionen (Onboarding, Profil, Zielwahl) ---------- */

.option-karte {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.85rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}

.option-karte:has(input:checked) {
  border-color: var(--primaer);
  background: var(--primaer-weich);
}

.option-inhalt { display: flex; flex-direction: column; gap: 0.2rem; }

.option-zeile {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.45rem 0.2rem;
  cursor: pointer;
}

.ziel-bereich {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.7rem;
  background: var(--flaeche);
}

.ziel-bereich legend {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tinte-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.3rem;
}

.ziel-dimension { margin-top: 1rem; }

/* Große Schirme: die Ziel-Checkboxen zweispaltig, damit die Liste nicht so lang wird.
   Die Legende (Bereichstitel) spannt beide Spalten. */
@media (min-width: 768px) {
  .ziel-bereich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.2rem;
    align-items: start;
  }
  .ziel-bereich legend { grid-column: 1 / -1; }
}

.onboarding-schritt { margin-top: 0.4rem; }
/* Die Frage ist die H1 jedes Schritts (genau eine H1 je Ansicht) — modest gehalten,
   damit sie nicht zu groß wirkt; der Willkommens-Vorspann (Schritt 1) steht als
   ruhiger Lead darüber. */
.onboarding h1 { font-size: 1.35rem; margin: 0.1rem 0 0.6rem; }
.onboarding-willkommen { font-weight: 600; color: var(--tinte); margin-bottom: 0.25rem; }

/* ---------- Stationslisten ---------- */

.stationsliste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.station {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  margin-bottom: 0.55rem;
  padding: 0.25rem 0.4rem;
  transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
}

.station-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.4rem;
  color: inherit;
  text-decoration: none;
}

.station-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primaer-weich);
  color: var(--primaer-tief);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.station-absolviert .station-nummer { background: var(--signal-gruen-weich); color: var(--signal-gruen-text); }

.station-mitte { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }

.station-titel { font-weight: 600; }

.station-icon { font-size: 0.9em; margin-right: 0.15rem; }
.baustein-icon { font-size: 0.85em; margin-right: 0.2rem; }

.station-hinweis { font-size: 0.8rem; color: var(--signal-gelb-text); }

.station-skip { margin: 0 0 0.3rem 2.85rem; min-height: 36px; padding: 0.2rem 0.5rem; font-size: 0.85rem; }

.status-punkt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--linie);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--uebergang), border-color var(--uebergang);
}
/* Form/Icon je Zustand zusätzlich zur Ampelfarbe — nicht allein farbabhängig (Farbfehlsicht). */
.status-punkt i { font-size: 8px; line-height: 1; }

.status-offen { border-color: var(--signal-rot); background: var(--signal-rot-weich); }
.status-teil { border-color: var(--signal-gelb); background: var(--signal-gelb); }
.status-teil i { color: #4d4300; }
.status-voll { border-color: var(--signal-gruen); background: var(--signal-gruen); }
.status-voll i { color: #0f3d1e; }

/* ---------- Fortschritt ---------- */

.fortschritt-zeile { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.7rem; }

.balken {
  height: 7px;
  border-radius: 999px;
  /* Die Spur muss sich vom Grund abheben, sonst ist bei 0 % gar kein Balken da.
     --flaeche-2 reicht dafuer nur im Dunkeln; hell braucht es einen eigenen Wert. */
  background: var(--balken-spur, var(--flaeche-2));
  overflow: hidden;
}

.balken-fuellung {
  height: 100%;
  border-radius: 999px;
  /* Blutrot-Rampe. Das zweite Stopp war #7cc6f7 — ein Hellblau aus der
     Crossminton-Palette des Forks, das in keinem ZERRER-Token mehr vorkommt. */
  background: linear-gradient(90deg, var(--primaer-tief), var(--primaer));
  transition: width 500ms cubic-bezier(0.22, 0.9, 0.35, 1);
}

/* ---------- Baustein-Ansicht ---------- */

.baustein .chip-zeile { margin-bottom: 1rem; }

.abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  padding: 1rem;
  margin-bottom: 0.9rem;
}

.abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.abschnitt-kopf h2 { margin: 0; }

.delta-hinweis {
  background: var(--primaer-weich);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}


.ue-block { margin-bottom: 0.9rem; }
.ue-block h4 { margin-bottom: 0.25rem; }
.ue-titel { margin-top: 0.2rem; }

.schrittliste { padding-left: 1.3rem; }
.schrittliste li { margin-bottom: 0.35rem; }

.einordnung dl { margin: 0.6rem 0 0; }
.einordnung dt { font-size: 0.78rem; color: var(--tinte-2); text-transform: uppercase; letter-spacing: 0.04em; }
.einordnung dd { margin: 0.1rem 0 0.6rem; }

details summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 32px;
}

details[open] summary { margin-bottom: 0.5rem; }

.baustein-fussnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
}

/* ---------- Trainer-Layer / Fehlerbilder ---------- */

.trainer-layer {
  border-left: 4px solid var(--primaer);
  background: var(--trainer-bg, linear-gradient(180deg, var(--primaer-weich) 0%, var(--flaeche) 60%));
}

.trainer-layer .abschnitt-kopf h2 { display: inline-flex; align-items: center; gap: 0.45rem; }

.fb-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 0.9rem 1rem;
  margin-top: 0.8rem;
}

.fb-karte > h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
  color: var(--signal-rot-text);
}

.fb-karte > h3 .fa-solid { color: var(--signal-rot); }

.fb-feld { margin-bottom: 0.7rem; }
.fb-feld h4 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.fb-feld p { margin: 0; }
.fb-karte .chip-zeile { margin-top: 0.6rem; }

/* ---------- Training ---------- */

.einheit-abschluss { text-align: center; padding: 2rem 1rem; }
.einheiten-zaehler { padding-left: 1.2rem; }

/* Kuratorischer Hinweis je Übung im Sitzungsdurchlauf — dezenter Akzent-Callout. */
.einheit-hinweis {
  background: var(--primaer-weich);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  margin: 0.6rem 0;
  font-size: 0.9rem;
}

/* ---------- Regeln (Referenz-Reiter) ---------- */

/* Quellenangabe: sichtbar, aber zurückhaltend — Herausgeber und Stand. */
.regeln-quelle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

/* Abschnitt = aufklappbares <details> mit H2-Titel und eigener Chevron-Marke
   (die FA-Chevrons liegen nicht im Subset — daher CSS-gezeichnet). */
.regel-abschnitt { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.regel-abschnitt > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0.3rem 0;
}
.regel-abschnitt > summary::-webkit-details-marker { display: none; }
.regel-abschnitt > summary::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--primaer);
  border-bottom: 2px solid var(--primaer);
  transform: rotate(-45deg);
  transition: transform var(--uebergang);
}
.regel-abschnitt[open] > summary::before { transform: rotate(45deg); }
.regel-abschnitt > summary h2 { margin: 0; }
.regel-einleitung { margin-top: 0; }

.regel-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: 0.9rem 1rem;
  margin-top: 0.8rem;
}

.regel-titel { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.regel-nummer {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primaer-tief);
  background: var(--primaer-weich);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

.regel-feld { margin-bottom: 0.6rem; }
.regel-feld:last-child { margin-bottom: 0; }
.regel-feld h4 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.regel-feld p { margin: 0; }

/* Erklärteil ("Was das bedeutet"): dezent abgesetzt, Glühbirne im Hinweis-Gelb. */
.regel-erklaerung {
  background: var(--flaeche-2);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}
.regel-erklaerung h4 .fa-lightbulb { color: var(--signal-gelb-text); }

.regel-verweise { margin: 0.7rem 0 0; font-size: 0.9rem; }
.regel-verweise-titel { color: var(--tinte-2); }
.regel-verweis { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.6rem; white-space: nowrap; }
.regel-verweis .fa-arrow-right { font-size: 0.75em; }

/* ---------- Profil ---------- */

.profil-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--trennlinie);
}

.profil-zeile p { margin: 0; }

/* Datensicherung (Backup/Restore) im Profil. */
.profil-backup { margin: 0.9rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--trennlinie); }
.profil-backup > p { margin: 0 0 0.2rem; }
.pf-backup-status { min-height: 1.2em; margin: 0.3rem 0 0; }

.profil-editor {
  border-top: 1px solid var(--trennlinie);
  padding-top: 0.7rem;
  margin-bottom: 0.5rem;
}

/* ---------- Überlagerung / Meilenstein ---------- */

.ueberlagerung {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--overlay);
  backdrop-filter: blur(5px);
  animation: schleier-einstieg 260ms ease both;
}

@keyframes schleier-einstieg {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes karte-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.meilenstein-karte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten-dialog);
  padding: 1.7rem 1.5rem;
  max-width: 22rem;
  text-align: center;
  animation: karte-pop 420ms cubic-bezier(0.22, 0.9, 0.3, 1.2) both;
}

.meilenstein-zeichen {
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}

.meilenstein-zeichen .fa-solid {
  color: var(--signal-gelb);
  filter: var(--filter-medaille);
}

/* ---------- Hover (nur Geräte mit Zeiger) ---------- */

@media (hover: hover) {
  /* Nur anklickbare Karten heben ab: Eine reine Inhalts-Karte, die auf Hover
     reagiert, verspricht eine Interaktion, die es nicht gibt. */
  a.karte-link:hover, button.karte:hover, .station:hover, .option-karte:hover {
    box-shadow: var(--schatten-hover);
    transform: translateY(-2px);
    border-color: var(--linie-stark);
  }
  .knopf:hover:not([disabled]) { box-shadow: var(--schatten-hover); }
  .knopf-primaer:hover:not([disabled]) { background: var(--primaer-dunkel); }
  .knopf-leise:hover { color: var(--primaer-tief); box-shadow: none; }
  .hamburger:hover { background: var(--primaer-dunkel); box-shadow: var(--schatten-hover); transform: translateY(-1px); }
  .menue-schliessen:hover { background: var(--primaer-weich); box-shadow: var(--schatten-hover); }
  .menue-punkt:hover { background: var(--primaer-weich); color: var(--primaer-tief); }
  .fussnav a:hover, .fussnav-mehr:hover { color: var(--primaer-tief); }
}

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
  .fussnav { display: none; }
  .hamburger { display: inline-flex; }
  main { padding: 1.6rem 1.5rem 1rem; }
  h1 { font-size: 1.7rem; }
}

/* ---------- Info-Reiter (Über / Mitmachen) ---------- */

.info-cta { margin: 0.9rem 0 0; flex-wrap: wrap; }

/* Haltungs-Statements (Über): Icon + Text je Zeile; die Regenbogenflagge farbig. */
.haltung-liste { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.haltung-liste li { display: flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.haltung-liste .fa-solid { width: 1.5rem; text-align: center; color: var(--primaer); font-size: 1.05rem; }
.pride-flag { display: inline-flex; flex: 0 0 auto; width: 1.5rem; justify-content: center; }
.pride-svg { border-radius: 2px; box-shadow: var(--schatten-ring); }

/* Noch nicht gefüllter Platzhalter — sichtbar gelassen, monospace als Signal. */
.info-platzhalter {
  display: block;
  margin-top: 0.35rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.8rem;
  color: var(--tinte-2);
  word-break: break-word;
}

/* GitHub-Logo (Inline-SVG) im „Über"-Reiter unter Lizenz/Credits. */
.github-logo { fill: currentColor; flex: none; vertical-align: -0.2em; margin-right: 0.15rem; }

/* ---------- Willkommen: Hero + Einstiegs-CTAs ---------- */

.hero {
  background: linear-gradient(135deg, var(--primaer) 0%, var(--primaer-tief) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--schatten-hover);
}

.hero h1 { color: #fff; font-size: 1.65rem; margin-bottom: 0.5rem; }
.hero p { color: rgba(255, 255, 255, 0.92); margin: 0; }

.hero-icons { display: flex; gap: 0.8rem; margin-bottom: 0.9rem; }

.hero-icons .fa-solid {
  font-size: 1.5rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 2.7rem;
  height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Marken-Hero (Layout des OG-Bilds): Speeder/Icon links, Text rechts. Ruhiger
   Panel-Look — dieselbe neutrale Karten-Elevation wie .karte (weiche Schatten,
   kein blauer Akzentbalken/Rahmen), eine durchgehende Tinte-Hierarchie im Text
   (kein zweiter Blauton neben der Überschrift). Nur Tokens → hell/dunkel
   automatisch. Groß auf Start/Willkommen, .klein auf den obersten Landingpages. */
.marke-hero {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.35rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-karte);
  background: linear-gradient(160deg, var(--hintergrund-2) 0%, var(--flaeche) 100%);
}
.marke-hero-bild {
  flex: none;
  width: 96px;
  height: 96px;
}
.marke-hero-icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-klein);
  background: var(--primaer-weich);
  color: var(--primaer-tief);
  font-size: 1.35rem;
}
.marke-hero-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.marke-hero-text h1 { margin: 0; font-size: 1.5rem; line-height: 1.1; color: var(--tinte); letter-spacing: -0.015em; }
.marke-hero-untertitel { margin: 0; font-weight: 600; color: var(--tinte-2); font-size: 1rem; }
.marke-hero-themen { margin: 0.1rem 0 0; color: var(--tinte-3); font-size: 0.86rem; }
/* Einstiegs-CTAs direkt unter dem Hero-Text (nur Startseite). */
.marke-hero-cta { margin-top: 0.95rem; }

.marke-hero.klein { gap: 0.9rem; padding: 0.95rem 1.1rem; }
.marke-hero.klein .marke-hero-text h1 { font-size: 1.25rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.marke-hero.klein .marke-hero-untertitel { font-weight: 500; font-size: 0.9rem; color: var(--tinte-2); }

/* Farbige Variante (Pfad-Landingpages): leichte Hue-Tönung + Icon in der Pfad-Hue,
   passend zur jeweiligen Startseiten-Kachel. Ohne .hue bleibt der Hero neutral. */
.marke-hero.klein.hue { background: var(--hue-kachel-bg, linear-gradient(160deg, var(--pf-weich) 0%, var(--flaeche) 78%)); }
.marke-hero.klein.hue .marke-hero-icon { background: var(--pf-weich); color: var(--pf); }
.marke-hero.klein.hue .marke-hero-icon .fa-solid { color: inherit; }
/* Baustein-Hero: der Titel ist die Hauptüberschrift der Seite, etwas größer. */
.baustein-hero .marke-hero-text h1 { font-size: 1.4rem; }
.willkommen-lead { margin: -0.5rem 0 1.1rem; }

@media (min-width: 40rem) {
  .marke-hero { gap: 1.6rem; padding: 1.6rem 1.7rem; }
  .marke-hero-bild { width: 120px; height: 120px; }
  .marke-hero-text h1 { font-size: 1.85rem; }
}

.cta-karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cta-symbol {
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: var(--radius);
  background: var(--primaer-weich);
  font-size: 1.45rem;
  flex-shrink: 0;
}

.cta-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.cta-text strong { font-size: 1.05rem; color: var(--ueberschrift); }

.cta-pfeil { font-size: 1.1rem; transition: transform var(--uebergang); }

@media (hover: hover) {
  .cta-karte:hover .cta-pfeil { transform: translateX(5px); }
  .cta-karte:hover { border-color: var(--primaer); }
}

/* ---------- Feinheiten ---------- */

:focus-visible {
  outline: 2px solid var(--primaer);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Feinschliff: Ziffern, Lesemaß, Ikon-Kachel, Ring, Leerzustand ---------- */

/* Tabellenziffern überall, wo Zahlen zählen (Fortschritt, Stationen, Plan) —
   gleiche Ziffernbreite, damit nichts springt. */
.fortschritt-zeile .leise,
.ring-text,
.station-nummer,
.stationszahl,
.plan-feld input,
.einheiten-zaehler {
  font-variant-numeric: tabular-nums;
}

/* Ruhiges Lesemaß für Fließtext in den Abschnitten (Erklär-/Übungs-/Reflexion).
   Auf schmalen Schirmen greift 100% ohnehin zuerst. */
.abschnitt > p,
.ue-block > p,
.delta-hinweis {
  max-width: 64ch;
}

/* Glossar-Auto-Verlinkung im Fließtext: dezent (gepunktete Akzent-Unterlinie),
   klar als Nachschlage-Link erkennbar, aber leiser als echte Aktions-Links. */
.glossar-link {
  color: inherit;
  text-decoration: underline dotted var(--primaer);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  cursor: help;
}
.glossar-link:hover,
.glossar-link:focus-visible {
  color: var(--primaer-tief);
  text-decoration-style: solid;
}

/* Stationszahl in der Baustein-Ansicht als dezentes Kapitälchen-Label. */
.stationszahl {
  display: inline-block;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* Baustein-Titel: das Icon wird eine ruhige, getönte Kachel statt nacktem Glyph. */
.baustein > h1 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.baustein-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  border-radius: var(--radius-klein);
  background: var(--primaer-weich);
  color: var(--primaer);
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Fortschritts-Ring (SVG-Donut). */
.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.ring svg {
  transform: rotate(-90deg); /* 0 % beginnt oben statt rechts */
}
.ring-spur { stroke: var(--flaeche-2); }
.ring-wert {
  stroke: var(--primaer);
  transition: stroke-dasharray 600ms cubic-bezier(0.22, 0.9, 0.35, 1);
}
.ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ueberschrift);
}
.ring-prozent { font-size: 0.62em; color: var(--tinte-2); margin-left: 0.06em; }

/* Profil-Gesamt: Ring neben der Kennzahl. */
.ring-zeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.ring-zeile .leise { margin: 0; }

/* Kompetenz-Karte auf der Startseite: Text links, Ring rechts. */
.karte-ring {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.karte-ring > div { min-width: 0; }
.karte-ring > div > :last-child { margin-bottom: 0; }

/* Leerer Zustand: zentriertes ruhiges Icon über dem Hinweis. */
.leer-zustand {
  text-align: center;
  padding: 1.8rem 1.25rem;
}
.leer-zustand > i {
  font-size: 1.6rem;
  color: var(--primaer);
  opacity: 0.7;
  margin-bottom: 0.5rem;
  display: block;
}
.leer-zustand > p { margin: 0; }
/* Aktiver Leer-Zustand: Ausweg-Knöpfe unter der Nachricht, zentriert. */
.leer-aktion { justify-content: center; margin-top: 1rem; }

/* ---------- Suche ---------- */
.such-form { margin: 0 0 1rem; }
.such-feld-zeile { position: relative; display: flex; align-items: center; }
.such-feld-icon { position: absolute; left: 0.85rem; color: var(--primaer); opacity: 0.75; pointer-events: none; }
.such-feld {
  width: 100%;
  padding: 0.72rem 0.9rem 0.72rem 2.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  box-shadow: var(--schatten-karte);
}
.such-feld::placeholder { color: var(--tinte-2); }
.such-feld:focus-visible { outline: 2px solid var(--primaer); outline-offset: 1px; border-color: var(--primaer); }

.such-start { text-align: center; }
.such-vorschlaege { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.8rem 0 0; }
.such-vorschlag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--primaer-weich);
  color: var(--primaer-tief);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--uebergang), color var(--uebergang);
}
@media (hover: hover) { .such-vorschlag:hover { background: var(--primaer); color: #fff; } }

.such-anzahl { margin: 0 0 0.75rem; }
.such-liste { display: flex; flex-direction: column; gap: 0.6rem; }
.such-treffer { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 0; }
.such-medaille {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-klein);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-weich);
  color: var(--pf);
}
.such-medaille .fa-solid { color: inherit; }
.such-treffer-text { flex: 1; min-width: 0; }
.such-treffer-text h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.such-meta { margin: 0 0 0.3rem; font-size: 0.8rem; }
.such-ausschnitt { margin: 0; font-size: 0.9rem; color: var(--tinte); }
.such-ausschnitt mark { background: var(--primaer-weich); color: var(--primaer-tief); padding: 0 0.12em; border-radius: 3px; }

/* Dunkelmodus-Tiefe: höher liegende Flächen tragen einen zarten oberen
   Lichtsaum (Elevation-Overlay) — sonst liest sich Tiefe im Dunkeln flach. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .karte,
  :root:not([data-theme='hell']) .abschnitt,
  :root:not([data-theme='hell']) .station {
    box-shadow: var(--schatten-karte), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }
}
:root[data-theme='dunkel'] .karte,
:root[data-theme='dunkel'] .abschnitt,
:root[data-theme='dunkel'] .station {
  box-shadow: var(--schatten-karte), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* ---------- Trainingsplan ---------- */

.plan-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.7rem;
  margin: 0.8rem 0;
}
.plan-feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--tinte-2); font-weight: 600; }
.plan-feld input, .plan-feld select {
  font: inherit; font-weight: 400; color: var(--tinte);
  padding: 0.5rem 0.6rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
}
.plan-uebersicht { margin-top: 1rem; }
.plan-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.plan-aktionen { margin: 0; }
.plan-woche { margin-top: 1.1rem; }
.plan-woche > h3 { color: var(--ueberschrift); border-bottom: 1px solid var(--trennlinie); padding-bottom: 0.3rem; margin-bottom: 0.3rem; }
.plan-session {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem 0.9rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--trennlinie);
}
.plan-session:last-child { border-bottom: 0; }
.plan-session-datum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primaer-tief); white-space: nowrap; font-size: 0.88rem; padding-top: 0.15rem; }
.plan-session-inhalt h4 { margin: 0 0 0.15rem; font-size: 1rem; }
.plan-session-link { display: inline-block; margin-top: 0.15rem; }
.plan-session-knoepfe { display: flex; gap: 0.3rem; }
.plan-session-knoepfe .knopf { padding: 0.4rem 0.55rem; }

/* ---------- Dunkelmodus-Feinschliff (was Tokens allein nicht abdecken) ---------- */
/* Der Primär-Button trägt im Dunkeln dunklen Text auf dem hellen Marken-Blau;
   der Willkommens-Hero behält einen tiefen Blauverlauf (weißer Text bleibt lesbar). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .knopf-primaer { color: #08151f; background: var(--primaer); }
  :root:not([data-theme='hell']) .hero { background: linear-gradient(135deg, #1c6fae 0%, #0e4a79 100%); }
}
:root[data-theme='dunkel'] .knopf-primaer { color: #08151f; background: var(--primaer); }
:root[data-theme='dunkel'] .hero { background: linear-gradient(135deg, #1c6fae 0%, #0e4a79 100%); }

/* Druckansicht = „Als PDF": nur der Plan, ohne Navigation, Formular und Knöpfe. */
@media print {
  .kopf, .fussnav, .menue,
  .plan-konfig, .plan-aktionen, .plan-session-knoepfe, .plan-session-link { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .karte { box-shadow: none; border: 1px solid #ccc; margin: 0 0 0.6rem; }
  .plan-session { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ============================================================================
   ZERRER — GRUNGY HARDCORE SKIN
   Überschreibt die Basistokens (Kaskade: später gewinnt). Düster, hart,
   zerkratzt: Concrete-Schwarz, Knochen-Weiss, Blutrot als Spot; harte Kanten,
   harte Versatz-Schatten (Siebdruck), Filmkorn-Overlay, fette Versalien.
   ============================================================================ */

/* Hell = Xerox-Flyer auf weissem Blatt.
   Hier stehen nur noch die Werte, die das helle Thema allein traegt: Rot-Rampe
   und die Ampel-Signalfarben. Flaechen, Tinte, Kanten, Schatten und die weichen
   Fuellungen setzt der Block „HELLES THEMA — weisses Blatt" am Dateiende — er
   muss spaeter stehen als die Bildebenen-Tokens weiter unten. Werte fuer Hell
   also NICHT hier ergaenzen, sonst gibt es zwei Wahrheiten. */
:root {
  --primaer: #cc2418;
  --primaer-dunkel: #a81a10;
  --primaer-tief: #a81a10;
  --signal-rot: #b23a26; --signal-rot-text: #9a2c19;
  --signal-gelb: #c79a12; --signal-gelb-text: #7d5f04;
  --signal-gruen: #4f7a1f; --signal-gruen-text: #3c5f15;
}

/* Dunkel = die Haupt-Identität: Concrete-Schwarz */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    --primaer: #ff3b2e;
    --primaer-dunkel: #ff5b50;
    --primaer-tief: #ff3b2e;
    --primaer-weich: #2c1310;
    --hintergrund: #0b0b0c;
    --hintergrund-2: #111112;
    --flaeche: #161617;
    --flaeche-2: #1e1e20;
    --tinte: #ece9e1;
    --tinte-2: #a4a099;
    --tinte-3: #77736b;
    --linie: #34343a;
    --linie-stark: #55555d;
    --ueberschrift: #ece9e1;
    --kopf-bg: rgba(11,11,12,0.9);
    --overlay: rgba(0,0,0,0.7);
    --signal-rot: #c2472f; --signal-rot-text: #e8836c; --signal-rot-weich: #2a1410;
    --signal-gelb: #d9ab24; --signal-gelb-text: #e6c568; --signal-gelb-weich: #2f2810;
    --signal-gruen: #7bbb2c; --signal-gruen-text: #a7dd6a; --signal-gruen-weich: #16260f;
  }
}
:root[data-theme='dunkel'] {
  --primaer: #ff3b2e;
  --primaer-dunkel: #ff5b50;
  --primaer-tief: #ff3b2e;
  --primaer-weich: #2c1310;
  --hintergrund: #0b0b0c;
  --hintergrund-2: #111112;
  --flaeche: #161617;
  --flaeche-2: #1e1e20;
  --tinte: #ece9e1;
  --tinte-2: #a4a099;
  --tinte-3: #77736b;
  --linie: #34343a;
  --linie-stark: #55555d;
  --ueberschrift: #ece9e1;
  --kopf-bg: rgba(11,11,12,0.9);
  --overlay: rgba(0,0,0,0.7);
  --signal-rot: #c2472f; --signal-rot-text: #e8836c; --signal-rot-weich: #2a1410;
  --signal-gelb: #d9ab24; --signal-gelb-text: #e6c568; --signal-gelb-weich: #2f2810;
  --signal-gruen: #7bbb2c; --signal-gruen-text: #a7dd6a; --signal-gruen-weich: #16260f;
}

/* Harte Kanten überall (Siebdruck statt weiche App) */
:root, :root[data-theme='dunkel'] {
  --radius: 2px; --radius-gross: 2px; --radius-klein: 1px;
  --schatten-weich: 3px 3px 0 rgba(0,0,0,0.55);
  --schatten-karte: 4px 4px 0 rgba(0,0,0,0.6);
  --schatten-hover: 6px 6px 0 var(--primaer);
  /* Der zusammengesetzte „Papier liegt auf"-Schatten (harter Versatz PLUS
     weicher Ambient) als EIN Token — nur so lässt er sich themenweise
     abschalten: `box-shadow: none, …` wäre ungültig, ein Null-Schatten
     (`0 0 0 0 transparent`) dagegen listen-tauglich und unsichtbar. */
  --schatten-plastisch: 4px 4px 0 rgba(0,0,0,0.6), 0 12px 26px -12px rgba(0,0,0,0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    --radius: 2px; --radius-gross: 2px; --radius-klein: 1px;
    --schatten-weich: 3px 3px 0 rgba(0,0,0,0.85);
    --schatten-karte: 4px 4px 0 rgba(0,0,0,0.8);
    --schatten-hover: 6px 6px 0 var(--primaer);
    --schatten-plastisch: 4px 4px 0 rgba(0,0,0,0.8), 0 12px 26px -12px rgba(0,0,0,0.7);
  }
}

/* (Filmkorn liegt jetzt im Hintergrund, nicht als Overlay über dem Inhalt.) */

/* Überschriften: Versalien — hardcore-Poster. Die konkrete Schrift (Special Elite
   für h1–h3) setzt der Display-Block weiter unten; hier bleibt nur, was für ALLE
   Überschriften gilt (Versalien, Laufweite). */
h1, h2, h3, .marke-text, .marke-hero-text h1, .abschnitt-titel {
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-weight: 700;
}
h1, .marke-hero-text h1 { letter-spacing: -0.01em; }
.marke-text { letter-spacing: 0.04em; }

/* Container als Zeitungsschnipsel: harte Kante + plastische Tiefe (harter
   Versatz-Schatten PLUS weicher Ambient-Schatten) + hell aufliegende Oberkante,
   damit das Papier „aufliegt". Die feine Körnung der Inhalts-Fläche (main) trägt
   den analogen Eindruck; die Kratzer liegen NUR im Hintergrund/Rahmen. */
.karte, .marke-hero, .pfad-kachel, .station, .baustein-hero, .abschnitt {
  border: var(--karten-kante-breite) solid transparent;
  box-shadow: var(--schatten-plastisch);
}
/* Sichtbar wird die Kante nur an Elementen, die auch etwas tun: Kachel-Links,
   Karten-Buttons und Stationszeilen (deren .station-link die ganze Zeile fuellt).
   Heros, Erklaerabschnitte und reine Inhalts-Karten bleiben randlos — sie tragen
   ihre Struktur ueber Ueberschrift und Abstand. Die Breite liegt oben schon
   (transparent) an, hier kommt nur die Farbe dazu: kein Layout-Sprung. */
a.karte-link, button.karte, .station { border-color: var(--karten-kante); }
/* Hover hebt dieselbe Kante auf Rot — ebenfalls nur, wo geklickt werden kann. */
a.karte-link:hover, button.karte:hover, .station:hover { border-color: var(--primaer); }
.karte-akzent { border-left: 4px solid var(--primaer); }

/* Leichte Schräglage (aufgeklebter Schnipsel) — bewusst minimal, wechselnd.
   Nur Karten/Kacheln, nicht die großen Textabschnitte/Heros (dort stört Kippen). */
.karte, .station, .pfad-kachel { transform: rotate(-0.3deg); }
.karte:nth-child(even), .station:nth-child(even), .pfad-kachel:nth-child(even) { transform: rotate(0.28deg); }
@media (prefers-reduced-motion: reduce) {
  .karte, .station, .pfad-kachel,
  .karte:nth-child(even), .station:nth-child(even), .pfad-kachel:nth-child(even) { transform: none; }
}

/* Knöpfe: hart, blockig, Versalien; Primär = Blutrot mit Tinten-Schrift (bold, AA) */
.knopf { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; border-width: 1.5px; }
.knopf-primaer { background: var(--primaer); color: #0b0b0c; border: 1.5px solid var(--primaer); box-shadow: var(--schatten-weich); }
:root[data-theme='dunkel'] .knopf-primaer,
.knopf-primaer { color: #0b0b0c; }
.knopf-sekundaer { border: 1.5px solid var(--linie-stark); background: transparent; }

/* Quittier-CTAs (Quittierung, [data-quittiere]): so groß wie Fließtext, ohne
   Versalien. OFFEN = Ghost-Look, transparent mit gestrichelter Kante; im Dunkel-
   Theme weiße Schrift. QUITTIERT = grün gefüllt, Kante durchgezogen (keine
   gestrichelte Linie mehr). */
.knopf[data-quittiere] {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 1rem;
}
.knopf-primaer[data-quittiere] {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}
:root[data-theme='dunkel'] .knopf-primaer[data-quittiere] {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .knopf-primaer[data-quittiere] {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
  }
}
.knopf-erledigt[data-quittiere] {
  background: var(--signal-gruen);
  border-style: solid;
  border-color: var(--signal-gruen);
  color: #0b0b0c;
  box-shadow: none;
}

/* Kopfzeile mit harter Unterkante */
.kopf { border-bottom: 0; }

/* Willkommens-Hero im Dunkel: Concrete-Schwarz,
   Blutrot nur als harte Kante — nicht als Fläche. Der weiße Hero-Text bleibt lesbar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .hero {
    background: linear-gradient(135deg, #1e1e20 0%, #0b0b0c 100%);
    border: 2px solid var(--primaer);
    box-shadow: var(--schatten-karte);
  }
}
:root[data-theme='dunkel'] .hero {
  background: linear-gradient(135deg, #1e1e20 0%, #0b0b0c 100%);
  border: 2px solid var(--primaer);
  box-shadow: var(--schatten-karte);
}

/* Aktive Navigation: roter Marker */
.fussnav a.aktiv, .fussnav-mehr.aktiv, .menue-punkt.aktiv { color: var(--primaer); }
.fussnav a.aktiv { box-shadow: inset 0 3px 0 var(--primaer); }

/* Chips/Stufen: eckig + Kante */
.chip { border-radius: 2px; border: 1px solid var(--linie-stark); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.72rem; }

/* Medaillen/Icons hart einrahmen (Stempel-Look) */
.pfad-medaille, .marke-hero-icon, .such-medaille { border-radius: 2px; border: 1.5px solid currentColor; }

/* ZERRER — Medaillen-Hues (hardcore, warm) */
:root {
  --pf-blau: #a81a10; --pf-blau-weich: #f0dcd7;
  --pf-teal: #5f6a72; --pf-teal-weich: #e2e0d8;
  --pf-violett: #9a3a22; --pf-violett-weich: #f0ddd5;
  --pf-indigo: #8a6a10; --pf-indigo-weich: #efe6cd;
  --pf-magenta: #cc2418; --pf-magenta-weich: #f3ded9;
  --pf-sky: #5a7a1f; --pf-sky-weich: #e4ecd6;
  --pf-schiefer: #55525a; --pf-schiefer-weich: #e3e0d8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    --pf-blau: #cbc6ba; --pf-blau-weich: #201f1f;
    --pf-teal: #9aa0a8; --pf-teal-weich: #1b1e22;
    --pf-violett: #e8836c; --pf-violett-weich: #251310;
    --pf-indigo: #e6c568; --pf-indigo-weich: #241f0c;
    --pf-magenta: #ff3b2e; --pf-magenta-weich: #261110;
    --pf-sky: #a7dd6a; --pf-sky-weich: #17240f;
    --pf-schiefer: #b3afa5; --pf-schiefer-weich: #201f22;
  }
}
:root[data-theme='dunkel'] {
  --pf-blau: #cbc6ba; --pf-blau-weich: #201f1f;
  --pf-teal: #9aa0a8; --pf-teal-weich: #1b1e22;
  --pf-violett: #e8836c; --pf-violett-weich: #251310;
  --pf-indigo: #e6c568; --pf-indigo-weich: #241f0c;
  --pf-magenta: #ff3b2e; --pf-magenta-weich: #261110;
  --pf-sky: #a7dd6a; --pf-sky-weich: #17240f;
  --pf-schiefer: #b3afa5; --pf-schiefer-weich: #201f22;
}

/* ZERRER — Display-Schrift Special Elite (Schreibmaschinen-Grunge) für die
   Überschriften h1–h3 und die Marke. Monospaced → Laufweite auf normal, kein
   negatives Tracking (sonst kleben die Glyphen). */
h1, h2, h3, .marke-text, .marke-hero-text h1, .abschnitt-titel {
  font-family: 'Special Elite', 'Courier New', 'Roboto', monospace;
  font-weight: 900;
  letter-spacing: 0;
}

/* Instrument-SVGs in den Icon-Medaillen skalieren + einfärben (currentColor). */
.dom-svg { width: 1.5rem; height: 1.5rem; display: block; }
.marke-hero-icon .dom-svg { width: 1.7rem; height: 1.7rem; }

/* Abstrakte Baustein-Grafiken (data/grafiken.json, inline via bausteinIcon):
   currentColor erbt die Kontextfarbe; Größen je Einsatzort. Die Grafiken sind
   quadratisch (viewBox 120) und ersetzen die FA-Baustein-Icons. */
svg.grafik-icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
svg.grafik-icon.baustein-icon { width: 2.1rem; height: 2.1rem; vertical-align: -0.5rem; }
.marke-hero-icon svg.grafik-icon { width: 2.1rem; height: 2.1rem; vertical-align: 0; }
.such-medaille svg.grafik-icon { width: 1.35rem; height: 1.35rem; vertical-align: 0; }
.fb-karte h3 svg.grafik-icon { width: 1.6em; height: 1.6em; vertical-align: -0.4em; }

/* Lehrgrafiken: breite Erklär-Schemata im Erklärteil (Tranche 4). */
.lehrgrafik { margin: 1.1rem 0 1.4rem; }
.lehrgrafik .lehrgrafik-svg { display: block; width: 100%; max-width: 460px; height: auto; color: var(--tinte); }
.lehrgrafik figcaption { font-size: 0.85rem; color: var(--tinte-2); margin-top: 0.4rem; max-width: 460px; }

/* Stimmungs-Werkzeug */
.chip-waehlbar { cursor: pointer; background: var(--flaeche); font: inherit; font-size: 0.72rem; }
/* Aktiver Auswahl-Chip: die Akzentfläche muss die neutrale .chip-waehlbar-Fläche
   schlagen (gleiche Spezifität, aber diese Regel kommt später) — sonst bliebe der
   Aktiv-Zustand nur an der Textfarbe erkennbar. */
.chip-waehlbar.chip-akzent { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.chip-waehlbar svg { width: 1em; height: 1em; vertical-align: -0.15em; }
.stimm-detail { margin-top: 1.2rem; }
.stimm-saiten { display: flex; flex-direction: column; gap: 0.35rem; margin: 1rem 0; max-width: 460px; }
.saite { display: flex; align-items: center; gap: 0.7rem; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 2px; padding: 0.45rem 0.7rem; cursor: pointer; color: var(--tinte); font: inherit; }
.saite:hover { border-color: var(--primaer, var(--tinte)); }
.saite-note { font-weight: 700; min-width: 2.6rem; text-align: left; }
.saite svg { flex: 1; height: 12px; }
.stimm-fakten { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0.8rem 0; }
.stimm-fakten dt { font-weight: 700; }
.stimm-fakten dd { margin: 0; }

/* Klang-Werkzeug (Intervalle & Akkorde zum Anhören) */
.klang-werkzeug { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linie-stark); }
.klang-werkzeug h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; }
.klang-knopf { gap: 0.35rem; }
.klang-knopf i { font-size: 0.72em; }
.klang-hinweis { margin-top: 0.9rem; min-height: 1.4em; }
/* Klang-Eintrag: Play-Chip mit darunterliegenden Genre-Verweisen (typische Genres). */
.klang-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.klang-genres { display: flex; flex-wrap: wrap; gap: 0.2rem; max-width: 12rem; }
.klang-genre {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
  padding: 0.05rem 0.35rem; border-radius: 999px; border: 1px solid var(--linie-stark);
  color: var(--tinte-3); background: var(--flaeche-2); text-decoration: none; white-space: nowrap;
}
.klang-genre:hover { color: var(--primaer); border-color: var(--primaer); }

/* Pattern-Werkzeug (Riffs als TAB & Drumpattern pro Genre) */
.pattern-liste { display: grid; gap: 1rem; margin: 1.2rem 0; }
/* Inhalts-Karte, kein Bedienelement: Die Kante laeuft ueber --karten-kante und
   verschwindet damit im hellen Thema wie bei .karte/.abschnitt. */
.pattern-karte { background: var(--flaeche); border: 1px solid var(--widget-kante); border-radius: var(--radius-klein); box-shadow: var(--schatten-karte); padding: 0.9rem 1rem 1.1rem; }
.pattern-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.pattern-kopf h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.pattern-kopf h3 svg { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.pattern-play { gap: 0.35rem; }
.pattern-play i { font-size: 0.72em; }
.pattern-meta { margin: 0.3rem 0 0.7rem; }
.pattern-raster { overflow-x: auto; padding-bottom: 0.2rem; }
.pattern-hinweis { margin: 0.8rem 0 0; }

.tab-raster, .drum-raster { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tab-raster th, .drum-raster th { text-align: right; padding: 0 0.6rem 0 0; font-weight: 700; font-size: 0.78rem; color: var(--tinte-2); white-space: nowrap; }
/* Zeilenkopf (Saite/Spur) bleibt beim horizontalen Scrollen des Rasters stehen. */
.tab-saite, .drum-spur { position: sticky; left: 0; z-index: 1; background: var(--flaeche); }
.tab-zelle { width: 1.55rem; height: 1.5rem; text-align: center; font-weight: 700; font-size: 0.82rem; border-bottom: 2px solid var(--linie-stark); color: var(--tinte); }
.tab-zelle.tab-treffer { color: var(--primaer-tief); }
.drum-spur { font-size: 0.72rem !important; }
.drum-zelle { width: 1.4rem; height: 1.4rem; text-align: center; border: 1px solid var(--linie); }
/* Symbol je Spur — Beat-Raster-Konvention: Hi-Hat ×, Snare ○ (hohl), Kick ●,
   China/Crash ◆. Klar unterscheidbare Glyphen statt formähnlicher Flächen. */
.drum-mark { display: inline-block; font-size: 0.95rem; line-height: 1; color: var(--primaer); }
.drum-an.drum-hihat .drum-mark { color: var(--tinte-2); }
.drum-an.drum-hihat .drum-mark::before { content: "\2715"; }
.drum-an.drum-snare .drum-mark::before { content: "\25CB"; }
.drum-an.drum-kick .drum-mark::before { content: "\25CF"; }
.drum-an.drum-crash .drum-mark::before { content: "\25C6"; }
/* Laufende Spalte: neutrale Fläche + Akzentrahmen statt Rot-auf-Rot (Kontrast). */
.tab-zelle.schritt-aktiv, .drum-zelle.schritt-aktiv { background: var(--flaeche-2); box-shadow: inset 0 0 0 2px var(--primaer); }

/* Pattern-Werkzeug: Steuerzeile (Tempo-Regler + Loop) */
.pattern-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin: 0.6rem 0 0.2rem; }
.pattern-tempo-feld { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--tinte-2); }
.pattern-tempo { accent-color: var(--primaer); max-width: 9rem; }
.pattern-tempo-wert { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.pattern-loop { gap: 0.35rem; }
.pattern-loop i { font-size: 0.8em; }

/* Könnens-Check (Referenzbereich, kein Fortschritt): Stufen-Selbsteinschätzung.
   Kategorien als Fieldsets, Posten als echte Checkboxen mit Pflicht/Empfehlung-Marke. */
.kc-zaehler { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0.25rem 0 0.75rem; }
.kc-gruppen { display: grid; gap: 1rem; }
.kc-gruppe {
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: var(--flaeche); padding: 0.85rem 1rem 1rem; margin: 0;
}
.kc-gruppe > legend {
  font-family: 'Roboto', system-ui, sans-serif; font-weight: 700;
  letter-spacing: 0.01em; font-size: 0.95rem; padding: 0 0.4rem; color: var(--ueberschrift);
}
.kc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.kc-posten {
  display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start;
  padding: 0.55rem 0.6rem; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche-2); transition: border-color var(--uebergang), background var(--uebergang);
}
.kc-posten input[type='checkbox'] {
  width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--signal-gruen); cursor: pointer;
}
.kc-posten label { display: grid; gap: 0.2rem; cursor: pointer; }
.kc-posten-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.kc-posten-titel { font-weight: 700; color: var(--tinte); }
.kc-posten-text { font-size: 0.86rem; }
.kc-posten.erledigt { border-color: var(--signal-gruen); background: var(--signal-gruen-weich); }
.kc-posten.erledigt .kc-posten-titel { color: var(--signal-gruen-text); }
.kc-marke {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap;
}
.kc-marke.kc-pflicht { background: var(--primaer-weich); color: var(--primaer); }
.kc-marke.kc-empfehlung { background: var(--flaeche); color: var(--tinte-3); border: 1px solid var(--linie-stark); }
.kc-fuss { margin-top: 1rem; }

/* === Werkzeuge (Audio-Werkzeuge) ============================================
   Referenzbereich wie Stimmungen/Patterns. Tokenbasiert — dunkel/hell folgen
   demselben Variablensatz. Signale nicht rein farblich (Zahl + Größe). */
.wz-karten { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin: 1rem 0; }
@media (min-width: 640px) { .wz-karten { grid-template-columns: 1fr 1fr; } }
.wz-karte {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1rem; border: 1px solid var(--linie-stark);
  border-radius: var(--radius); background: var(--flaeche);
  box-shadow: var(--schatten-karte); text-decoration: none; color: var(--tinte);
}
.wz-karte:hover { border-color: var(--primaer); }
.wz-karte-icon {
  flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-klein); background: var(--pf-teal-weich); color: var(--pf-teal);
  font-size: 1.15rem;
}
.wz-karte-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; }
.wz-karte-titel { font-weight: 700; }
.wz-karte-kurz { font-size: 0.86rem; }
.wz-karte-pfeil { color: var(--primaer); }
.wz-karte-geplant { opacity: 0.6; cursor: default; }
.wz-karte-marke { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }

.wz-audio-tor {
  margin: 1rem 0; padding: 1rem; border: 1px dashed var(--linie-stark);
  border-radius: var(--radius); text-align: center;
}
.wz-metro-koerper { margin-top: 0.5rem; }
.wz-feld { margin: 0.85rem 0; }
.wz-feld label { display: inline-flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
.wz-feld input[type="number"] { width: 5.5rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-feld-reihe { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.wz-feld-titel { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.wz-bpm-zeile { display: flex; align-items: center; gap: 0.75rem; }
.wz-bpm-regler { flex: 1 1 12rem; }
.wz-unterteilung-gruppe { display: block; }

.wz-beat-anzeige {
  display: grid; place-items: center; position: relative;
  width: 7rem; height: 7rem; margin: 1rem auto 0.5rem;
}
.wz-beat-punkt {
  grid-area: 1 / 1; width: 5.5rem; height: 5.5rem; border-radius: 50%;
  border: 3px solid var(--linie-stark); background: var(--flaeche-2);
  transition: transform 90ms ease-out, background-color 90ms ease-out, border-color 90ms ease-out;
}
.wz-beat-punkt.an { transform: scale(1.08); background: var(--primaer-weich); border-color: var(--primaer); }
.wz-beat-punkt.an.eins { transform: scale(1.16); background: var(--primaer); border-color: var(--primaer); }
.wz-beat-zahl { grid-area: 1 / 1; z-index: 1; font-size: 2rem; font-weight: 800; color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { .wz-beat-punkt { transition: none; } }

.wz-metro-knoepfe { margin: 1rem 0; }
.wz-rampe, .wz-export { margin: 0.85rem 0; border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 0.4rem 0.75rem; }
.wz-rampe summary, .wz-export summary { cursor: pointer; font-weight: 600; }
.wz-metro-fuss { margin-top: 1rem; }
.werkzeug-anbindung .chip-zeile { margin-top: 0.5rem; }

/* === Stimmgerät ============================================================ */
.wz-tuner, .wz-tunings, .wz-drone { margin: 1.25rem 0; }
.wz-tuner-anzeige { text-align: center; margin-top: 0.75rem; }
.wz-tuner-note { font-size: 3.2rem; font-weight: 800; line-height: 1.1; color: var(--tinte); }
.wz-tuner-skala {
  position: relative; height: 1.5rem; margin: 0.6rem auto; max-width: 22rem;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche-2);
}
.wz-tuner-mitte { position: absolute; left: 50%; top: -0.2rem; bottom: -0.2rem; width: 2px; background: var(--tinte-3); transform: translateX(-50%); }
.wz-tuner-nadel {
  position: absolute; top: 50%; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--primaer); border: 2px solid var(--flaeche);
  transform: translate(-50%, -50%); transition: left 80ms linear;
}
.wz-tuner-cents { font-size: 1.1rem; font-weight: 700; color: var(--tinte-2); }
.wz-tuner-richtung { font-size: 1rem; font-weight: 700; color: var(--tinte-2); text-transform: uppercase; letter-spacing: 0.04em; }
.wz-tuner-richtung.passt { color: var(--signal-gruen-text); }
.wz-tuner-richtung.passt::before { content: "\2713\00a0"; }
.wz-saiten-zeile .wz-saite { min-width: 3rem; justify-content: center; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .wz-tuner-nadel { transition: none; } }

/* Eigene-Stimmung-Editor: je Saite eine Zeile — Zielton (zupfbar), Halbton ±,
   Cent-Feinstimmung. Umbrechend, damit auf Mobil nichts abgeschnitten wird. */
.wz-eigen { margin: 1.25rem 0; }
.wz-eigen-saiten { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.9rem 0; }
.wz-eigen-saite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--linie-stark); border-radius: 2px; background: var(--flaeche-2);
}
.wz-eigen-zupf { min-width: 6.5rem; justify-content: flex-start; font-weight: 700; }
.wz-eigen-label { font-variant-numeric: tabular-nums; }
.wz-eigen-halbton { display: inline-flex; gap: 0.3rem; }
.wz-eigen-cents-feld { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--tinte-2); flex: 1 1 12rem; }
.wz-eigen-cents { flex: 1 1 auto; min-width: 6rem; }
.wz-eigen-cents-wert { font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; font-weight: 700; }
.wz-eigen-speicherzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; margin: 0.6rem 0; }
.wz-eigen-name-feld { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--tinte-2); }
.wz-eigen-name { min-width: 12rem; }
.wz-eigen-liste-titel { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.wz-eigen-eintrag { display: inline-flex; align-items: center; gap: 0.15rem; }

/* === Pedalboard-Baukasten =================================================== */
.wz-pb-h { font-size: 1.05rem; margin: 1.1rem 0 0.4rem; }
.wz-pb-glyph { display: inline-flex; height: 1.5em; width: auto; vertical-align: -0.45em; color: var(--tinte); }
.wz-pb-glyph svg { height: 100%; width: auto; }
/* Abstrakte Geräte-Grafiken (js/geraete-grafik.js): monochrom, currentColor. */
.geraet-grafik { display: block; color: var(--tinte); }
.wz-pb-glyph-gross { display: inline-flex; height: 2.6em; width: auto; vertical-align: middle; margin-right: 0.35rem; }
.wz-pb-glyph-gross svg { height: 100%; width: auto; }
.wz-pb-katalog .pedal-grafik, .wz-pb-glied .pedal-grafik { color: currentColor; }
/* Amp-/Box-Rig-Diagramm (Werkzeug Amp & Box) */
.wz-ab-rig {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap;
  margin: 0.9rem 0 1.2rem; padding: 1rem 1.1rem;
  border: 1.5px solid var(--linie-stark); border-top-color: var(--kante-oben, #6a6a72);
  border-radius: 2px; background: var(--flaeche-2); box-shadow: var(--schatten-karte);
}
.wz-ab-rig .amp-grafik { width: 150px; height: auto; color: var(--tinte); }
.wz-ab-rig .box-grafik { width: 74px; height: auto; color: var(--tinte); }
.wz-ab-rig-box { display: inline-flex; gap: 0.4rem; }
.wz-ab-rig-pfeil { color: var(--primaer); font-size: 1.05rem; }
.wz-pb-kette-rahmen {
  display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche-2);
}
.wz-pb-anschluss {
  align-self: center; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--tinte-3); padding: 0.35rem 0.55rem; border: 1px dashed var(--linie-stark); border-radius: var(--radius-klein);
}
.wz-pb-kette { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; flex: 1 1 auto; align-items: center; }
.wz-pb-glied {
  display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.4rem;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); cursor: grab;
}
.wz-pb-glied.gewaehlt { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
.wz-pb-glied.zieht { opacity: 0.5; }
.wz-pb-glied-name { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; color: var(--tinte); font: inherit; cursor: pointer; padding: 0.15rem 0.25rem; }
.wz-pb-glied-knoepfe { display: inline-flex; gap: 0.1rem; }
.wz-pb-mini {
  min-width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center;
  background: var(--flaeche-2); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  color: var(--tinte-2); cursor: pointer; font-size: 0.9rem;
}
.wz-pb-mini:hover:not(:disabled) { border-color: var(--primaer); color: var(--primaer); }
.wz-pb-mini:disabled { opacity: 0.35; cursor: default; }
.wz-pb-leer { padding: 0.5rem; }
.wz-pb-check {
  margin: 0.85rem 0; padding: 0.6rem 0.85rem; border-left: 3px solid var(--signal-gelb); background: var(--signal-gelb-weich);
  border-radius: var(--radius-klein);
}
:root[data-theme='dunkel'] .wz-pb-check { background: color-mix(in srgb, var(--signal-gelb) 12%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='hell']) .wz-pb-check { background: color-mix(in srgb, var(--signal-gelb) 12%, transparent); } }
.wz-pb-check-titel { font-weight: 700; margin: 0 0 0.3rem; }
.wz-pb-check ul { margin: 0; padding-left: 1.1rem; }
.wz-pb-check-ok { margin: 0.6rem 0; color: var(--signal-gruen-text); }
.wz-pb-erklaerung { margin: 1rem 0; }
.wz-pb-teilen-feld { flex: 1 1 12rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font-family: monospace; }

/* === Amp-/Box-Baukasten ===================================================== */
.wz-ab-block { margin: 1.25rem 0; padding-top: 0.5rem; border-top: 1px solid var(--trennlinie); }
.wz-ab-block h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.wz-ab-erkl { margin: 0.3rem 0 0.7rem; }
.wz-ab-imp-feld { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.wz-ab-gesamt { font-weight: 700; margin: 0.6rem 0 0.2rem; }
.wz-ab-pruef { border-top-width: 2px; }
.wz-ab-hinweis {
  display: flex; flex-direction: column; gap: 0.2rem; margin: 0.55rem 0;
  padding: 0.65rem 0.85rem; border-radius: var(--radius-klein); border-left: 4px solid var(--linie-stark);
  background: var(--flaeche-2);
}
.wz-ab-hinweis-marke { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; }
.wz-ab-hinweis.stufe-ok { border-left-color: var(--signal-gruen); }
.wz-ab-hinweis.stufe-ok .wz-ab-hinweis-marke { color: var(--signal-gruen-text); }
.wz-ab-hinweis.stufe-info { border-left-color: var(--primaer); }
.wz-ab-hinweis.stufe-info .wz-ab-hinweis-marke { color: var(--primaer); }
.wz-ab-hinweis.stufe-warn { border-left-color: var(--signal-gelb); background: var(--signal-gelb-weich); }
.wz-ab-hinweis.stufe-warn .wz-ab-hinweis-marke { color: var(--signal-gelb-text); }
.wz-ab-hinweis.stufe-ernst { border-left-color: var(--signal-rot); background: var(--signal-rot-weich); border-left-width: 6px; }
.wz-ab-hinweis.stufe-ernst .wz-ab-hinweis-marke { color: var(--signal-rot-text); font-size: 0.9rem; }
:root[data-theme='dunkel'] .wz-ab-hinweis.stufe-warn { background: color-mix(in srgb, var(--signal-gelb) 12%, transparent); }
:root[data-theme='dunkel'] .wz-ab-hinweis.stufe-ernst { background: color-mix(in srgb, var(--signal-rot) 16%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) .wz-ab-hinweis.stufe-warn { background: color-mix(in srgb, var(--signal-gelb) 12%, transparent); }
  :root:not([data-theme='hell']) .wz-ab-hinweis.stufe-ernst { background: color-mix(in srgb, var(--signal-rot) 16%, transparent); }
}
.wz-ab-signalfluss { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.wz-ab-fakten dt { font-weight: 700; margin-top: 0.55rem; }
.wz-ab-fakten dd { margin: 0.1rem 0 0; }
.wz-ab-amp-watt, .wz-ab-box-watt { width: 6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }

/* === Song-Struktur-Baukasten =============================================== */
.wz-st-timeline { display: flex; gap: 2px; height: 2.2rem; margin: 0.5rem 0; border-radius: var(--radius-klein); overflow: hidden; }
.wz-st-seg { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.72rem; font-weight: 700; color: var(--flaeche); padding: 0 0.25rem; }
.wz-st-kurve { height: 42px; margin: 0.2rem 0 0.8rem; color: var(--primaer); }
.wz-st-kurve-svg { width: 100%; height: 100%; }
/* Intensitätsfarbe: 1 (ruhig) → 5 (brutal); nutzt Ampel-Token, gilt für Segment + Blockrand. */
.intens-1 { background: var(--pf-teal); }
.intens-2 { background: var(--pf-sky); }
.intens-3 { background: var(--primaer); }
.intens-4 { background: var(--signal-gelb-text); }
.intens-5 { background: var(--signal-rot); }
.wz-st-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.wz-st-block { border: 1px solid var(--linie-stark); border-left-width: 5px; border-radius: var(--radius-klein); padding: 0.6rem 0.75rem; background: var(--flaeche); }
.wz-st-block.intens-1 { border-left-color: var(--pf-teal); background: var(--flaeche); }
.wz-st-block.intens-2 { border-left-color: var(--pf-sky); }
.wz-st-block.intens-3 { border-left-color: var(--primaer); }
.wz-st-block.intens-4 { border-left-color: var(--signal-gelb-text); }
.wz-st-block.intens-5 { border-left-color: var(--signal-rot); }
.wz-st-block-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem; }
.wz-st-block-typ { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.wz-st-block-knoepfe { display: inline-flex; gap: 0.1rem; }
.wz-st-felder { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: flex-end; }
.wz-st-felder label { display: inline-flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; font-weight: 600; }
.wz-st-felder input[type="number"] { width: 4.2rem; padding: 0.3rem 0.4rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-st-felder select { padding: 0.3rem 0.4rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-st-notiz-feld { flex: 1 1 12rem; }
.wz-st-notiz-feld input { width: 100%; padding: 0.3rem 0.4rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-st-intens-gruppe { display: inline-flex; gap: 0.15rem; }
.wz-st-intens-knopf { width: 1.7rem; height: 1.7rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche-2); color: var(--tinte-2); cursor: pointer; font-weight: 700; }
.wz-st-intens-knopf.aktiv { background: var(--primaer); color: var(--flaeche); border-color: var(--primaer); }
.wz-st-bpm { width: 6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-st-text { font-family: monospace; font-size: 0.82rem; overflow-wrap: anywhere; }
.wz-metro-map { padding: 0.5rem 0.75rem; border-left: 3px solid var(--primaer); background: var(--primaer-weich); border-radius: var(--radius-klein); font-weight: 600; }
:root[data-theme='dunkel'] .wz-metro-map { background: color-mix(in srgb, var(--primaer) 14%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='hell']) .wz-metro-map { background: color-mix(in srgb, var(--primaer) 14%, transparent); } }

/* === Riff-Recorder ========================================================= */
.wz-rec-panel { margin: 1rem 0; padding: 1rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche-2); }
.wz-rec-knopf-zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.wz-rec-knopf.aufnahme { background: var(--signal-rot); border-color: var(--signal-rot); }
.wz-rec-anzeige { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.wz-rec-punkt { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--signal-rot); animation: wz-rec-blink 1s steps(2, start) infinite; }
@keyframes wz-rec-blink { 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .wz-rec-punkt { animation: none; } }
.wz-rec-dauer { font-variant-numeric: tabular-nums; }
.wz-rec-fehler { color: var(--signal-rot-text); min-height: 1.2em; }
.wz-rec-tempo-neu, .wz-rec-tempo { width: 6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }
.wz-rec-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.wz-rec-clip { border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); padding: 0.7rem 0.85rem; background: var(--flaeche); }
.wz-rec-clip-kopf { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; margin-bottom: 0.45rem; }
.wz-rec-name { flex: 1 1 auto; font-weight: 700; padding: 0.3rem 0.45rem; border: 1px solid transparent; border-radius: var(--radius-klein); background: transparent; color: var(--tinte); }
.wz-rec-name:hover, .wz-rec-name:focus { border-color: var(--linie-stark); background: var(--flaeche-2); }
.wz-rec-audio { width: 100%; margin: 0.35rem 0; }
.wz-rec-meta { margin: 0.4rem 0; }
.wz-rec-meta label { display: inline-flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; font-weight: 600; }
.wz-rec-notiz-feld { flex: 1 1 12rem; }
.wz-rec-notiz-feld input { width: 100%; padding: 0.35rem 0.45rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }

/* === Skizzen-Mehrspur-Rekorder ============================================= */
.wz-ms-liste { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.wz-ms-spur { border: 1px solid var(--linie-stark); border-left-width: 4px; border-left-color: var(--primaer); border-radius: var(--radius-klein); padding: 0.65rem 0.85rem; background: var(--flaeche); }
.wz-ms-spur-kopf { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; margin-bottom: 0.4rem; }
.wz-ms-name { flex: 1 1 auto; font-weight: 700; padding: 0.3rem 0.45rem; border: 1px solid transparent; border-radius: var(--radius-klein); background: transparent; color: var(--tinte); }
.wz-ms-name:hover, .wz-ms-name:focus { border-color: var(--linie-stark); background: var(--flaeche-2); }
.wz-ms-schalter { display: inline-flex; gap: 0.25rem; }
.wz-ms-mini { width: 1.9rem; height: 1.9rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche-2); color: var(--tinte-2); cursor: pointer; font-weight: 800; }
.wz-ms-mute.aktiv { background: var(--signal-gelb-text); color: var(--flaeche); border-color: var(--signal-gelb-text); }
.wz-ms-solo.aktiv { background: var(--primaer); color: var(--flaeche); border-color: var(--primaer); }
.wz-ms-audio { width: 100%; margin: 0.3rem 0; }
.wz-ms-pegel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.wz-ms-pegel-zeile label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; }
.wz-ms-knopf.aufnahme { background: var(--signal-rot); border-color: var(--signal-rot); }
.wz-ms-latenz, .wz-ms-bpm { width: 6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); }

/* === Gear-Explorer ========================================================= */
.wz-exp-buehne { margin: 0.75rem 0; padding: 1rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche-2); overflow-x: auto; }
.wz-exp-buehne svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; color: var(--tinte); }
.wz-exp-buehne .hotspot { cursor: pointer; }
.wz-exp-buehne .hotspot rect { fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 4 3; transition: stroke 90ms, fill 90ms; }
.wz-exp-buehne .hotspot:hover rect, .wz-exp-buehne .hotspot:focus-visible rect { stroke: var(--primaer); fill: color-mix(in srgb, var(--primaer) 10%, transparent); }
.wz-exp-buehne .hotspot:focus { outline: none; }
.wz-exp-buehne .hotspot.aktiv rect { stroke: var(--primaer); stroke-dasharray: none; stroke-width: 2; fill: color-mix(in srgb, var(--primaer) 14%, transparent); }
.wz-exp-panel-halter { margin: 0.5rem 0; }
.wz-exp-panel h3 { display: flex; align-items: center; gap: 0.5rem; }
.wz-exp-panel h3 svg { width: 1.4em; height: 1.4em; }
.wz-exp-panel-leer { padding: 0.75rem; }

/* Beispielsongs-Referenz (#/songs): Genre-Auswahl + gewürfelte Songliste.
   Monochrom über Tokens; Akzent nur als Kante/Aktiv-Zustand, keine Flächenfarbe. */
.song-genres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1.1rem; }
.song-chip { text-decoration: none; cursor: pointer; }
.song-chip:hover { border-color: var(--primaer); color: var(--tinte); }
.song-chip.aktiv { background: var(--primaer-weich); color: var(--primaer-tief); border-color: transparent; font-weight: 600; }
.song-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.song-kopf .abschnitt-titel { margin: 0; }
.song-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.song-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.8rem; background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-left: 3px solid var(--primaer);
  border-radius: var(--radius-klein);
}
.song-link { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; color: inherit; flex: 1 1 auto; min-width: 0; }
.song-link:hover .song-haupt { text-decoration: underline; }
.song-haupt { font-weight: 600; }
.song-substil { font-size: 0.78rem; }
.song-quelle {
  flex: 0 0 auto; align-self: center; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.02em; padding: 0.08rem 0.42rem; border: 1px solid var(--linie-stark);
  border-radius: 999px; color: var(--tinte-2); white-space: nowrap;
}
.song-fuss { margin-top: 1rem; }

/* Facetten-Filter der Suche (Trainings-Loop §3c). Chips über Tokens; aktiv =
   Akzent-Fläche. Zahl = Trefferzahl je Wert. */
.such-filter { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.4rem 0 1.1rem; }
.such-facette-gruppe { display: flex; flex-direction: column; gap: 0.35rem; }
.such-facette-titel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinte-2); }
.such-facette-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.such-facette-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.such-facette-chip:hover { border-color: var(--primaer); color: var(--tinte); }
.such-facette-chip.aktiv { background: var(--primaer-weich); color: var(--primaer-tief); border-color: transparent; font-weight: 600; }
.such-facette-zahl { font-size: 0.66rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.such-filter-reset { align-self: flex-start; }

/* Mastery-Status-Pill in der Trefferkarte. Signal doppelt kodiert: Form/Zeichen
   (○/◐/●) UND Farbe — nie nur Farbe (Zugänglichkeit). */
.such-status { font-size: 0.72rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.such-status.status-neu { color: var(--tinte-2); }
.such-status.status-in_arbeit { color: var(--primaer); }
.such-status.status-sitzt { color: var(--signal-gruen, var(--primaer)); }

/* Onboarding: Zielsound-Genre-Chips (Mehrfachauswahl, Toggle). */
.ob-genres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 1rem; }
.ob-genre-chip { cursor: pointer; }
.ob-genre-chip:hover { border-color: var(--primaer); color: var(--tinte); }
.ob-genre-chip.aktiv { background: var(--primaer-weich); color: var(--primaer-tief); border-color: transparent; font-weight: 600; }
.ob-ziel-hinweis { margin-top: 0.4rem; }

/* „Fortsetzen wo du warst": schmaler Streifen über die ganze Breite (keine
   Kachel). Akzent-Kante links, Titel des zuletzt geöffneten Bausteins. */
.heim-fortsetzen {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.9rem; margin: 0 0 1.2rem; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-left: 3px solid var(--primaer); border-radius: var(--radius-klein);
}
.heim-fortsetzen:hover { border-color: var(--primaer); }
.heim-fortsetzen-icon { color: var(--primaer); flex: 0 0 auto; }
.heim-fortsetzen-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.heim-fortsetzen-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinte-2); }
.heim-fortsetzen-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heim-fortsetzen-pfeil { color: var(--primaer); flex: 0 0 auto; }

/* --- Genre-Inszenierung (#/pfad/stil) --- */
/* Hub-Hero mit abstraktem Platzhalter-„Bild" (Klang-Spektrum, currentColor). */
.genre-hub-hero { display: flex; align-items: center; gap: 1rem; overflow: hidden; }
.genre-hub-hero .marke-hero-text { flex: 1 1 auto; min-width: 0; }
.genre-hero-bild { flex: 0 0 auto; width: min(44%, 210px); height: auto; color: var(--primaer); opacity: 0.85; }
@media (max-width: 520px) { .genre-hero-bild { display: none; } }

/* Hub-Karten mit Anreißer. */
.genre-karte h3 { margin: 0 0 0.3rem; }
.genre-karte-kurz { margin: 0; font-size: 0.9rem; line-height: 1.45; }

/* Detailseite: Einstieg, Einordnung, Verwandtschaft. */
.genre-inszenierung { margin: 0.2rem 0 0.6rem; }
.genre-abschnitt-titel { font-family: var(--schrift-display, inherit); font-size: 1.1rem; margin: 0 0 0.6rem; }
.genre-einordnung { margin-bottom: 1.4rem; }
.genre-ein-liste { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.genre-ein-zeile {
  display: grid; grid-template-columns: minmax(9rem, 28%) 1fr; gap: 0.5rem 0.9rem;
  padding: 0.5rem 0.7rem; background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-left: 3px solid var(--primaer);
  border-radius: var(--radius-klein);
}
.genre-ein-titel { margin: 0; font-weight: 600; color: var(--primaer-tief); font-size: 0.86rem; }
.genre-ein-text { margin: 0; font-size: 0.92rem; line-height: 1.45; }
@media (max-width: 480px) { .genre-ein-zeile { grid-template-columns: 1fr; gap: 0.2rem; } }

/* Abgenutzte Klischees: durchgestrichener Kreis (⊘) als nicht-farbliches Signal
   „nicht zwingend nötig" — die Aussage steht auch ohne die Akzentfarbe. */
.genre-klischees { margin-bottom: 1.4rem; }
.genre-klischees .leise { margin: 0 0 0.7rem; }
.genre-klischee-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.genre-klischee {
  position: relative; padding: 0.5rem 0.7rem 0.5rem 2rem;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein); font-size: 0.92rem; line-height: 1.45;
}
.genre-klischee::before {
  content: "\2298"; position: absolute; left: 0.65rem; top: 0.5rem;
  color: var(--primaer); font-weight: 700; font-size: 1.05rem; line-height: 1.3;
}

.genre-verwandt-inhalt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.genre-verwandt-svg { flex: 0 0 auto; width: 150px; height: auto; color: var(--primaer); }
.genre-verwandt-text { flex: 1 1 12rem; min-width: 0; }
.genre-verwandt-text .leise { margin: 0 0 0.5rem; }
.genre-verwandt-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.genre-verwandt-chip { text-decoration: none; }
.genre-verwandt-chip:hover { border-color: var(--primaer); color: var(--primaer-tief); }
.genre-bausteine-titel { margin-top: 1.5rem; }

/* --- Brand Alert (Referenzbereich, markierter Ausnahmebereich mit Modellnamen) --- */
/* Der Warnhinweis oben ist die tragende Rahmung — deutlich abgesetzt, akzentumrandet. */
.ba-hinweis {
  margin: 0 0 1.2rem; padding: 0.85rem 1rem;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-left: 4px solid var(--primaer); border-radius: var(--radius-klein);
  font-size: 0.92rem; line-height: 1.5;
}
.ba-intro { margin-bottom: 1.4rem; }
/* Kategorie-Filterleiste (wie Glossar): Chips zum Ein-/Ausblenden. */
.ba-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.6rem; }
.ba-kat-chip { cursor: pointer; }
.ba-kat-chip.aktiv { border-color: var(--primaer); color: var(--primaer-tief); background: color-mix(in srgb, var(--primaer) 10%, transparent); }
/* Mehr Luft zwischen den Kategorien; jede trägt ein Symbol neben dem Titel. */
.ba-gruppen { display: flex; flex-direction: column; gap: 3rem; }
.ba-kategorie-kopf {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linie-stark);
}
.ba-kategorie-icon {
  flex: 0 0 auto; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--primaer); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.ba-kategorie-icon svg, .ba-kategorie-icon .dom-svg { width: 1.3rem; height: 1.3rem; }
.ba-kategorie-titel {
  font-family: var(--schrift-display, inherit); font-size: 1.05rem; margin: 0;
}
.ba-kategorie-zahl { font-family: var(--schrift, inherit); font-size: 0.8rem; font-weight: 400; }
.ba-physik { margin: -0.3rem 0 0.7rem; font-size: 0.86rem; }
.ba-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ba-eintrag {
  padding: 0.8rem 0.9rem; background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.ba-eintrag-titel { margin: 0; font-size: 0.98rem; font-weight: 700; }
.ba-warum { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.ba-einordnung { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--tinte-2); }
/* Die bezahlbare Alternative ist GLEICHRANGIG (Rahmung §2): eigener, akzentuierter
   Block, nicht kleingedruckt — nur durch das Label als Alternative markiert. */
.ba-alternative {
  margin: 0.15rem 0 0; padding: 0.5rem 0.65rem; font-size: 0.9rem; line-height: 1.45;
  background: color-mix(in srgb, var(--primaer) 8%, transparent);
  border-left: 3px solid var(--primaer); border-radius: var(--radius-klein);
}
.ba-alternative-label { font-weight: 700; color: var(--primaer-tief); }

/* --- Powerchord-Griffe (Referenzbereich: Griffbild-Diagramme) --- */
.griffe-hinweis { margin: 0 0 1.4rem; max-width: 64ch; }
.griff-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.griff-karte { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; }
.griff-bild { flex: 0 0 auto; }
.griff-svg { width: 96px; height: auto; color: var(--tinte); display: block; }
.griff-svg line { stroke: var(--tinte-2); }
.griff-svg .griff-grundton { fill: var(--primaer); stroke: none; }
.griff-svg .griff-ton { fill: var(--tinte); stroke: none; }
.griff-svg .griff-x { fill: var(--tinte-2); font-size: 15px; font-weight: 700; }
.griff-svg .griff-r { fill: #fff; font-size: 11px; font-weight: 700; }
.griff-info { flex: 1 1 auto; min-width: 0; }
.griff-name { margin: 0 0 0.4rem; font-size: 1rem; }
.griff-chips { margin: 0 0 0.5rem; }
.griff-kurz { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--tinte-2); }

/* --- Szene-Glossar (Referenzbereich: durchsuchbar + kategorie-gefiltert) --- */
.glossar-hinweis { margin: 0 0 1rem; }
.glossar-intro { margin-bottom: 1.2rem; }
.glossar-steuerung { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.3rem; }
.glossar-suche {
  width: 100%; padding: 0.6rem 0.8rem; font-size: 0.95rem;
  background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
}
.glossar-suche:focus-visible { outline: 2px solid var(--primaer); outline-offset: 1px; }
.glossar-kats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.glossar-kat-chip { cursor: pointer; }
.glossar-kat-chip.aktiv { border-color: var(--primaer); color: var(--primaer-tief); background: color-mix(in srgb, var(--primaer) 10%, transparent); }
.glossar-gruppe { margin-bottom: 1.5rem; }
.glossar-kat-titel {
  font-family: var(--schrift-display, inherit); font-size: 1.05rem;
  margin: 0 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--linie-stark);
}
.glossar-liste { margin: 0; display: grid; gap: 0.6rem; }
.glossar-eintrag {
  padding: 0.7rem 0.85rem; background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-left: 3px solid var(--primaer);
  border-radius: var(--radius-klein);
}
.glossar-begriff { margin: 0 0 0.2rem; font-weight: 700; font-size: 0.98rem; }
.glossar-erklaerung { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.glossar-bezug { display: inline-block; margin-top: 0.35rem; font-size: 0.86rem; }
.glossar-leer { padding: 0.8rem 0; }

/* --- Mastery-Umschalter (§2a) auf der Baustein-Seite --- */
.mastery-toggle { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.2rem 0 1rem; }
.mastery-frage { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinte-2); }
.mastery-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mastery-knopf {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500;
  background: transparent; border: 1px solid var(--linie-stark); color: var(--tinte-2);
}
.mastery-knopf:hover { border-color: var(--primaer); color: var(--tinte); }
.mastery-knopf.aktiv { font-weight: 600; }
.mastery-knopf.status-neu.aktiv { background: var(--flaeche-2); color: var(--tinte); border-color: var(--linie-stark); }
.mastery-knopf.status-in_arbeit.aktiv { background: var(--primaer-weich); color: var(--primaer-tief); border-color: transparent; }
.mastery-knopf.status-sitzt.aktiv { background: var(--signal-gruen-weich, var(--primaer-weich)); color: var(--signal-gruen-text, var(--primaer-tief)); border-color: var(--signal-gruen, transparent); }

/* --- „Dein Können" (§5): Ringe je Instrument + Was als Nächstes --- */
.koennen-ringe { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0.6rem 0 1.2rem; }
.koennen-ring { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.koennen-ring-label { font-weight: 600; font-size: 0.85rem; }
.koennen-ring-zahl { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.koennen-naechste { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.koennen-naechst { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; margin: 0; }
.koennen-naechst-icon { flex: 0 0 auto; width: 1.4em; height: 1.4em; display: inline-flex; align-items: center; justify-content: center; color: var(--primaer); }
.koennen-naechst > span:not(.koennen-naechst-icon) { flex: 1 1 auto; min-width: 0; }
.koennen-naechst .fa-arrow-right { color: var(--primaer); flex: 0 0 auto; }

/* Geräte-Landing je Instrument: Liste der Ausrüstungs-Bausteine (wie „Was als Nächstes"). */
.geraete-liste { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.geraete-eintrag { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; margin: 0; }
.geraete-eintrag-icon { flex: 0 0 auto; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; color: var(--primaer); }
.geraete-eintrag-icon svg { width: 1.4em; height: 1.4em; }
.geraete-eintrag-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.geraete-eintrag .fa-arrow-right { color: var(--primaer); flex: 0 0 auto; }

/* --- Übe-Log (§2e) auf der Baustein-Seite --- */
.ube-log { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.ube-log-tempo { width: 6.5rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-klein); border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte); font-size: 0.9rem; }
.ube-log-bestaetigung { font-size: 0.85rem; }

/* --- Meilensteine (§5) --- */
.meilenstein-liste { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.meilenstein-eintrag { display: flex; align-items: center; gap: 0.6rem; }
.meilenstein-eintrag .fa-medal { color: var(--primaer); flex: 0 0 auto; }

/* --- Persönliche Bestwerte (§5) --- */
.bestwert-liste { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.bestwert-eintrag { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; border-bottom: 1px solid var(--linie-schwach, var(--linie-stark)); padding-bottom: 0.25rem; }
.bestwert-tempo { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--primaer-tief); white-space: nowrap; }

/* --- Übe-Kalender (§5): Heatmap, 10 Wochen × 7 Tage. Kein Streak. --- */
.ube-kalender { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; margin: 0.5rem 0; width: max-content; max-width: 100%; }
.kal-tag { width: 12px; height: 12px; border-radius: 2px; background: var(--flaeche-2); border: 1px solid var(--linie-stark); }
.kal-stufe-1 { background: color-mix(in srgb, var(--primaer) 30%, var(--flaeche-2)); border-color: transparent; }
.kal-stufe-2 { background: color-mix(in srgb, var(--primaer) 60%, var(--flaeche-2)); border-color: transparent; }
.kal-stufe-3 { background: var(--primaer); border-color: transparent; }
.kalender-legende { margin-top: 0.3rem; }

/* --- Gesundheits-Pausenhinweis im Metronom (§5) --- */
.wz-pausen-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.wz-pausen-hinweis .fa-heart-pulse { color: var(--primaer); margin-right: 0.4rem; }

/* --- Demonstrations-Ebene (§1): Raster/Tab + Playhead + Steuerung --- */
.demo { margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
.demo > h2 { margin: 0 0 0.8rem; font-size: 1.05rem; }
.demo > h2 .fa-play { color: var(--primaer); margin-right: 0.3rem; }
.demo-raster { overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.9rem; }
.demo-zeile { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.28rem; }
.demo-zeilen-label { flex: 0 0 auto; width: 5.2rem; text-align: right; font-size: 0.72rem; color: var(--tinte-2); white-space: nowrap; }
.demo-saite-label { font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-zellen { display: grid; gap: 2px; flex: 1 1 auto; min-width: 22rem; }
.demo-zelle {
  height: 20px; border: 1px solid var(--linie-stark); border-radius: 2px; background: var(--flaeche-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--tinte-2);
}
.demo-zelle.takt { border-left-width: 2px; border-left-color: var(--tinte-2); }
.demo-raster-pattern .demo-zelle.an { background: var(--primaer); border-color: transparent; }
.demo-tab-zelle.an { background: var(--primaer-weich); border-color: var(--primaer); color: var(--primaer-tief); font-weight: 600; }
.demo-tab-zelle.an.technik-palm_mute, .demo-tab-zelle.an.technik-chug, .demo-tab-zelle.an.technik-dead_note { border-style: dashed; }
.demo-zelle.playhead { outline: 2px solid var(--primaer); outline-offset: -1px; }

.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.demo-play.laeuft { background: var(--signal-rot, var(--primaer)); }
.demo-tempo-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.demo-tempo { width: 8rem; accent-color: var(--primaer); }
.demo-tempo-wert { font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-presets { display: inline-flex; align-items: center; gap: 0.3rem; }
.demo-presets-titel { font-size: 0.78rem; }
.demo-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; cursor: pointer; }
.demo-hoerbeispiel h2 { margin-top: 0; }

/* --- Grenzgänger-Werkzeuge: Gefühlslandkarte + Genre-Mix-Generator --- */
/* Beide monochrom über die Tinten-/Akzent-Tokens; die SVGs tragen keine harten
   Farben, sondern erben currentColor bzw. lesen die Tokens per Klasse. */

/* Gefühlslandkarte */
.lk-karte { position: relative; margin: 1rem 0 0.4rem; }
.lk-svg { display: block; width: 100%; height: auto; color: var(--tinte); }
.lk-achse { stroke: var(--linie-stark); stroke-width: 1.5; }
.lk-kreis { fill: var(--tinte-2); transition: fill 0.15s ease, r 0.15s ease; }
/* Namen sind normal verborgen (Punkte können sich überlagern) und erscheinen
   nur für den aktiven/berührten Punkt; die Legende hält alle Namen lesbar. */
.lk-name { fill: var(--primaer); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--flaeche); stroke-width: 3px; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.lk-punkt { cursor: pointer; outline: none; }
.lk-punkt:hover .lk-kreis,
.lk-punkt:focus-visible .lk-kreis,
.lk-punkt.aktiv .lk-kreis { fill: var(--primaer); r: 8; }
.lk-punkt:focus-visible .lk-kreis { stroke: var(--primaer); stroke-width: 2; }
.lk-punkt.aktiv .lk-name,
.lk-punkt:hover .lk-name,
.lk-punkt:focus-visible .lk-name { opacity: 1; }
.lk-legende { margin: 0.7rem 0 0.5rem; gap: 0.35rem; }
.lk-achse-x { display: block; text-align: center; font-size: 0.8rem; margin-top: 0.2rem; }
.lk-achse-y { display: block; font-size: 0.8rem; margin-bottom: 0.2rem; }
.lk-tags { min-height: 3.2rem; padding: 0.7rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); }
.lk-tags-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.lk-tag-zeile { margin: 0; }
.lk-tags-leer { margin: 0; }
.lk-fuss { margin-top: 0.9rem; }
.lk-hinweis { margin: 0.6rem 0 0.4rem; }
/* Verbesserte Achsen (Modus „Genre → Gefühl"): Endpunkte + Titel im SVG. */
.lk-ende { fill: var(--tinte-2); font-size: 9px; }
.lk-achstitel { fill: var(--tinte); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }

/* Blickrichtungs-Umschalter */
.lk-modus { margin: 0.8rem 0 0.6rem; gap: 0.4rem; }
.lk-modus-knopf { font-size: 0.82rem; }

/* Modus „Gefühl → Genre": bunte, fließende Felder (bewusst farbig — Ausnahme
   vom Monochrom-System). Der Canvas ist dekorativ; die Bedienung läuft über die
   Chips + das Ergebnisfeld darunter. */
.gf-canvas {
  display: block;
  width: 100%;
  height: 260px;
  margin: 0.4rem 0 0.5rem;
  border: 1.5px solid var(--linie-stark);
  border-top-color: var(--kante-oben, #6a6a72);
  border-radius: 2px;
  background: var(--hintergrund-2);
  box-shadow: var(--schatten-karte);
}
@media (min-width: 40rem) { .gf-canvas { height: 320px; } }
.gf-canvas-hinweis { margin: 0 0 0.9rem; font-size: 0.82rem; }
.gf-wolke { margin: 0.5rem 0 0.9rem; gap: 0.35rem; }
.gf-chip .gf-zahl, .gf-chip-inline .gf-zahl {
  display: inline-block; min-width: 1.1em; padding: 0 0.25em; margin-left: 0.15em;
  border-radius: 999px; background: var(--primaer); color: #0b0b0c; font-size: 0.7em; font-weight: 700; text-align: center;
}
.gf-ergebnis { min-height: 3.2rem; padding: 0.7rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); }
.gf-ergebnis-leer { margin: 0; }
.gf-genre-link { text-decoration: none; }
.gf-genre-liste { margin: 0.9rem 0 0.4rem; }
.gf-genre-liste summary { cursor: pointer; padding: 0.3rem 0; }
.gf-genre-liste .chip-zeile { margin-top: 0.5rem; gap: 0.35rem; }

/* Genre-Mix-Generator */
.gm-steuerung { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 1rem; margin: 0.9rem 0; }
.gm-modus { display: inline-flex; gap: 0.4rem; }
.gm-ziel-feld { display: flex; flex-direction: column; }
.gm-ziel-feld.gm-verborgen { display: none; }
.gm-ziel-select { padding: 0.4rem 0.55rem; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); color: var(--tinte); font: inherit; }
.gm-trio-feld { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.gm-ausgabe { margin: 0.6rem 0; }
.gm-leer { padding: 1.2rem 0; text-align: center; }
.gm-ergebnis { border: 1px solid var(--linie-stark); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--flaeche-2); box-shadow: var(--schatten-karte); }
.gm-paar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gm-genre { font-family: 'Special Elite', 'Courier New', 'Roboto', monospace; font-size: 1.5rem; letter-spacing: 0; text-transform: uppercase; line-height: 1.05; }
.gm-mal { color: var(--primaer); font-size: 1.3rem; font-weight: 700; }
.gm-trio { margin: 0.4rem 0 0; font-weight: 600; }
.gm-spannung-zeile { margin: 0.35rem 0 0.8rem; }
.gm-merkmale { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.gm-merkmal-titel { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.gm-linie { margin: 0.5rem 0; }
.gm-prompt { margin: 0.7rem 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--primaer); background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.02rem; }
.gm-bogen { margin: 0.3rem 0 0.7rem; }
.gm-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0.4rem 0; color: var(--tinte); }
.gm-punkt.blass circle { fill: var(--tinte-3); opacity: 0.4; }
.gm-punkt.aktiv circle { fill: var(--primaer); }
.gm-name { fill: var(--primaer); font-size: 10px; font-weight: 700; }
.gm-spannung { stroke: var(--primaer); stroke-width: 2; stroke-dasharray: 4 3; }
.gm-anbindung { margin-top: 0.6rem; }
.gm-ziel-block { margin: 0.8rem 0; }
.gm-kreativ-ziel[aria-pressed="true"] { background: var(--primaer-weich); color: var(--primaer-tief); }

/* Prominente Werkzeug-Anbindung (Grenzgänger-Kreativ-Werkzeuge in der Baustein-Ansicht) */
.werkzeug-prominent .wz-prominent-karten { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.wz-prominent-karte {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem; border: 1px solid var(--primaer); border-radius: var(--radius);
  background: var(--primaer-weich); color: var(--tinte); text-decoration: none;
  box-shadow: var(--schatten-karte); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wz-prominent-karte:hover, .wz-prominent-karte:focus-visible { transform: translateY(-1px); box-shadow: var(--schatten-hover); }
.wz-prominent-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius, 2px); background: var(--primaer-weich); color: var(--primaer); font-size: 1.1rem; }
.wz-prominent-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.wz-prominent-titel { font-weight: 700; }
.wz-prominent-kurz { font-size: 0.85rem; }
.wz-prominent-pfeil { margin-left: auto; flex: none; color: var(--primaer); }


/* === Hintergrund-Textur je Thema (nur der Rahmen/body trägt Kratzer+Korn) ===== */
:root, :root[data-theme='hell'] {
  --kante-oben: var(--linie-stark);
  --sheet-bg: var(--flaeche);
  --backdrop-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271000%27%20height%3D%271400%27%20viewBox%3D%270%200%201000%201400%27%20preserveAspectRatio%3D%27none%27%3E%3Cline%20x1%3D%22865.9%22%20y1%3D%22164.7%22%20x2%3D%22950.5%22%20y2%3D%221298.4%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.9%22%20opacity%3D%220.275%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22867.3%22%20y1%3D%22164.7%22%20x2%3D%22951.9%22%20y2%3D%221298.4%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.16%22%20opacity%3D%220.138%22%2F%3E%3Cline%20x1%3D%22933.9%22%20y1%3D%22601.3%22%20x2%3D%22927.4%22%20y2%3D%221043.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.78%22%20opacity%3D%220.084%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22159.6%22%20y1%3D%22240.8%22%20x2%3D%22602.8%22%20y2%3D%221373.9%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.1%22%20opacity%3D%220.293%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22161.0%22%20y1%3D%22240.8%22%20x2%3D%22604.2%22%20y2%3D%221373.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.24%22%20opacity%3D%220.146%22%2F%3E%3Cline%20x1%3D%22871.8%22%20y1%3D%22438.3%22%20x2%3D%22964.2%22%20y2%3D%22831.4%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.39%22%20opacity%3D%220.329%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22873.2%22%20y1%3D%22438.3%22%20x2%3D%22965.6%22%20y2%3D%22831.4%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.36%22%20opacity%3D%220.165%22%2F%3E%3Cline%20x1%3D%22841.4%22%20y1%3D%22339.6%22%20x2%3D%22724.6%22%20y2%3D%22803.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.61%22%20opacity%3D%220.071%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22471.9%22%20y1%3D%2241.7%22%20x2%3D%22806.1%22%20y2%3D%22822.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.23%22%20opacity%3D%220.303%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22473.3%22%20y1%3D%2241.7%22%20x2%3D%22807.5%22%20y2%3D%22822.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.29%22%20opacity%3D%220.151%22%2F%3E%3Cline%20x1%3D%22375.5%22%20y1%3D%22697.6%22%20x2%3D%22211.3%22%20y2%3D%221699.6%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.33%22%20opacity%3D%220.312%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22376.9%22%20y1%3D%22697.6%22%20x2%3D%22212.7%22%20y2%3D%221699.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.33%22%20opacity%3D%220.156%22%2F%3E%3Cline%20x1%3D%22578.1%22%20y1%3D%22584.9%22%20x2%3D%22501.6%22%20y2%3D%22955.2%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.65%22%20opacity%3D%220.447%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22579.5%22%20y1%3D%22584.9%22%20x2%3D%22503.0%22%20y2%3D%22955.2%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.86%22%20opacity%3D%220.224%22%2F%3E%3Cline%20x1%3D%22586.4%22%20y1%3D%22-81.8%22%20x2%3D%221198.1%22%20y2%3D%221365.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.11%22%20opacity%3D%220.293%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22587.8%22%20y1%3D%22-81.8%22%20x2%3D%221199.5%22%20y2%3D%221365.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.24%22%20opacity%3D%220.146%22%2F%3E%3Cline%20x1%3D%22607.1%22%20y1%3D%22538.6%22%20x2%3D%22517.3%22%20y2%3D%221841.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.47%22%20opacity%3D%220.324%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22608.5%22%20y1%3D%22538.6%22%20x2%3D%22518.7%22%20y2%3D%221841.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.39%22%20opacity%3D%220.162%22%2F%3E%3Cline%20x1%3D%22557.0%22%20y1%3D%22651.7%22%20x2%3D%221389.4%22%20y2%3D%222087.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.89%22%20opacity%3D%220.091%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22738.0%22%20y1%3D%22-258.7%22%20x2%3D%221176.7%22%20y2%3D%22710.3%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.14%22%20opacity%3D%220.111%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22235.5%22%20y1%3D%22455.2%22%20x2%3D%22315.6%22%20y2%3D%22784.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.05%22%20opacity%3D%220.104%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22742.6%22%20y1%3D%22292.7%22%20x2%3D%221163.6%22%20y2%3D%221180.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.33%22%20opacity%3D%220.125%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22666.3%22%20y1%3D%22591.1%22%20x2%3D%22727.3%22%20y2%3D%221994.7%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.18%22%20opacity%3D%220.114%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22821.2%22%20y1%3D%22464.2%22%20x2%3D%22583.2%22%20y2%3D%221387.8%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.17%22%20opacity%3D%220.298%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22822.6%22%20y1%3D%22464.2%22%20x2%3D%22584.6%22%20y2%3D%221387.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.27%22%20opacity%3D%220.149%22%2F%3E%3Cline%20x1%3D%2290.1%22%20y1%3D%2215.8%22%20x2%3D%22349.0%22%20y2%3D%221015.2%22%20stroke%3D%22%23141009%22%20stroke-width%3D%225.37%22%20opacity%3D%220.484%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2291.5%22%20y1%3D%2215.8%22%20x2%3D%22350.4%22%20y2%3D%221015.2%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%222.15%22%20opacity%3D%220.242%22%2F%3E%3Cline%20x1%3D%22449.2%22%20y1%3D%2260.3%22%20x2%3D%22571.2%22%20y2%3D%221687.6%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.85%22%20opacity%3D%220.433%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22450.6%22%20y1%3D%2260.3%22%20x2%3D%22572.6%22%20y2%3D%221687.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.14%22%20opacity%3D%220.216%22%2F%3E%3Cline%20x1%3D%2223.2%22%20y1%3D%22801.6%22%20x2%3D%22258.5%22%20y2%3D%221365.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.23%22%20opacity%3D%220.117%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22909.8%22%20y1%3D%22594.4%22%20x2%3D%221027.0%22%20y2%3D%22967.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.96%22%20opacity%3D%220.097%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22457.5%22%20y1%3D%22684.9%22%20x2%3D%221044.4%22%20y2%3D%221829.0%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.64%22%20opacity%3D%220.253%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22665.1%22%20y1%3D%22831.4%22%20x2%3D%22873.6%22%20y2%3D%221401.0%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.83%22%20opacity%3D%220.537%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22666.5%22%20y1%3D%22831.4%22%20x2%3D%22875.0%22%20y2%3D%221401.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.53%22%20opacity%3D%220.269%22%2F%3E%3Cline%20x1%3D%22508.2%22%20y1%3D%22-680.4%22%20x2%3D%22546.4%22%20y2%3D%22967.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.19%22%20opacity%3D%220.114%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-124.7%22%20y1%3D%22502.1%22%20x2%3D%22193.1%22%20y2%3D%221048.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.84%22%20opacity%3D%220.27%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-123.3%22%20y1%3D%22502.1%22%20x2%3D%22194.5%22%20y2%3D%221048.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.14%22%20opacity%3D%220.135%22%2F%3E%3Cline%20x1%3D%22181.7%22%20y1%3D%22-490.7%22%20x2%3D%22813.4%22%20y2%3D%22883.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.37%22%20opacity%3D%220.128%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22827.4%22%20y1%3D%22-218.5%22%20x2%3D%22792.6%22%20y2%3D%22312.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.81%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22736.5%22%20y1%3D%22-66.6%22%20x2%3D%22954.0%22%20y2%3D%22339.3%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.04%22%20opacity%3D%220.103%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22612.9%22%20y1%3D%22-280.8%22%20x2%3D%22606.1%22%20y2%3D%22284.1%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.42%22%20opacity%3D%220.319%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22614.3%22%20y1%3D%22-280.8%22%20x2%3D%22607.5%22%20y2%3D%22284.1%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.37%22%20opacity%3D%220.16%22%2F%3E%3Cline%20x1%3D%22163.9%22%20y1%3D%22782.9%22%20x2%3D%22375.0%22%20y2%3D%221587.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.85%22%20opacity%3D%220.089%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22231.8%22%20y1%3D%22314.3%22%20x2%3D%22656.1%22%20y2%3D%221756.3%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.52%22%20opacity%3D%220.562%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22233.2%22%20y1%3D%22314.3%22%20x2%3D%22657.5%22%20y2%3D%221756.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.41%22%20opacity%3D%220.281%22%2F%3E%3Cline%20x1%3D%22-153.0%22%20y1%3D%22592.9%22%20x2%3D%22364.2%22%20y2%3D%221888.1%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.49%22%20opacity%3D%220.535%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-151.6%22%20y1%3D%22592.9%22%20x2%3D%22365.6%22%20y2%3D%221888.1%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.00%22%20opacity%3D%220.268%22%2F%3E%3Cline%20x1%3D%22180.9%22%20y1%3D%22249.5%22%20x2%3D%22362.0%22%20y2%3D%221810.1%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.95%22%20opacity%3D%220.499%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22182.3%22%20y1%3D%22249.5%22%20x2%3D%22363.4%22%20y2%3D%221810.1%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.18%22%20opacity%3D%220.249%22%2F%3E%3Cline%20x1%3D%22207.7%22%20y1%3D%22-695.9%22%20x2%3D%22319.7%22%20y2%3D%22783.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.04%22%20opacity%3D%220.103%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22506.5%22%20y1%3D%22-638.2%22%20x2%3D%221121.3%22%20y2%3D%22656.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.29%22%20opacity%3D%220.355%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22507.9%22%20y1%3D%22-638.2%22%20x2%3D%221122.7%22%20y2%3D%22656.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.32%22%20opacity%3D%220.177%22%2F%3E%3Cline%20x1%3D%22575.5%22%20y1%3D%22219.1%22%20x2%3D%221027.3%22%20y2%3D%221359.8%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.42%22%20opacity%3D%220.319%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22576.9%22%20y1%3D%22219.1%22%20x2%3D%221028.7%22%20y2%3D%221359.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.37%22%20opacity%3D%220.16%22%2F%3E%3Cline%20x1%3D%22692.5%22%20y1%3D%22292.7%22%20x2%3D%22563.7%22%20y2%3D%22870.7%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.68%22%20opacity%3D%220.509%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22693.9%22%20y1%3D%22292.7%22%20x2%3D%22565.1%22%20y2%3D%22870.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.47%22%20opacity%3D%220.255%22%2F%3E%3Cline%20x1%3D%22486.0%22%20y1%3D%2283.7%22%20x2%3D%22781.5%22%20y2%3D%22715.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.48%22%20opacity%3D%220.324%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22487.4%22%20y1%3D%2283.7%22%20x2%3D%22782.9%22%20y2%3D%22715.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.99%22%20opacity%3D%220.162%22%2F%3E%3Cline%20x1%3D%2295.0%22%20y1%3D%2233.0%22%20x2%3D%22228.3%22%20y2%3D%221088.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.9%22%20opacity%3D%220.092%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2213.5%22%20y1%3D%22522.1%22%20x2%3D%222.2%22%20y2%3D%221528.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.57%22%20opacity%3D%220.481%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2214.9%22%20y1%3D%22522.1%22%20x2%3D%223.6%22%20y2%3D%221528.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.43%22%20opacity%3D%220.24%22%2F%3E%3Cline%20x1%3D%22858.2%22%20y1%3D%22-74.4%22%20x2%3D%22893.5%22%20y2%3D%221639.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.17%22%20opacity%3D%220.113%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22206.7%22%20y1%3D%22528.3%22%20x2%3D%22705.6%22%20y2%3D%222160.7%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.63%22%20opacity%3D%220.072%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22471.0%22%20y1%3D%22-637.1%22%20x2%3D%221083.2%22%20y2%3D%221023.7%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.1%22%20opacity%3D%220.107%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22352.3%22%20y1%3D%22465.9%22%20x2%3D%22-58.8%22%20y2%3D%222169.5%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.69%22%20opacity%3D%220.258%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22418.8%22%20y1%3D%22-361.4%22%20x2%3D%22878.8%22%20y2%3D%22547.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.4%22%20opacity%3D%220.13%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22546.8%22%20y1%3D%22-217.4%22%20x2%3D%22830.6%22%20y2%3D%221045.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.31%22%20opacity%3D%220.123%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22260.5%22%20y1%3D%22399.8%22%20x2%3D%22921.5%22%20y2%3D%221506.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.78%22%20opacity%3D%220.084%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22634.3%22%20y1%3D%22364.0%22%20x2%3D%22777.9%22%20y2%3D%22957.4%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.18%22%20opacity%3D%220.299%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22635.7%22%20y1%3D%22364.0%22%20x2%3D%22779.3%22%20y2%3D%22957.4%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.27%22%20opacity%3D%220.149%22%2F%3E%3Cline%20x1%3D%22382.8%22%20y1%3D%22647.1%22%20x2%3D%22332.9%22%20y2%3D%221120.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.16%22%20opacity%3D%220.112%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22938.4%22%20y1%3D%22183.2%22%20x2%3D%22989.5%22%20y2%3D%22657.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.72%22%20opacity%3D%220.079%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22480.3%22%20y1%3D%22-368.7%22%20x2%3D%22553.7%22%20y2%3D%22949.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.1%22%20opacity%3D%220.107%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22364.9%22%20y1%3D%221120.7%22%20x2%3D%22278.0%22%20y2%3D%221445.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.28%22%20opacity%3D%220.121%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22235.4%22%20y1%3D%22254.2%22%20x2%3D%22571.5%22%20y2%3D%221821.7%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.61%22%20opacity%3D%220.071%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-32.8%22%20y1%3D%22145.3%22%20x2%3D%22226.9%22%20y2%3D%221141.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.01%22%20opacity%3D%220.285%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-31.4%22%20y1%3D%22145.3%22%20x2%3D%22228.3%22%20y2%3D%221141.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.20%22%20opacity%3D%220.142%22%2F%3E%3Cline%20x1%3D%22-1.8%22%20y1%3D%22-80.2%22%20x2%3D%22662.9%22%20y2%3D%221534.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.74%22%20opacity%3D%220.081%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22434.6%22%20y1%3D%22-486.7%22%20x2%3D%22696.2%22%20y2%3D%22827.9%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.12%22%20opacity%3D%220.496%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22436.0%22%20y1%3D%22-486.7%22%20x2%3D%22697.6%22%20y2%3D%22827.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.65%22%20opacity%3D%220.248%22%2F%3E%3Cline%20x1%3D%22238.1%22%20y1%3D%221225.1%22%20x2%3D%22401.1%22%20y2%3D%221560.6%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.36%22%20opacity%3D%220.314%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22239.5%22%20y1%3D%221225.1%22%20x2%3D%22402.5%22%20y2%3D%221560.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.34%22%20opacity%3D%220.157%22%2F%3E%3Cline%20x1%3D%22683.7%22%20y1%3D%2216.1%22%20x2%3D%22557.0%22%20y2%3D%221412.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.49%22%20opacity%3D%220.326%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22685.1%22%20y1%3D%2216.1%22%20x2%3D%22558.4%22%20y2%3D%221412.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.40%22%20opacity%3D%220.163%22%2F%3E%3Cline%20x1%3D%22836.7%22%20y1%3D%22-473.4%22%20x2%3D%22883.3%22%20y2%3D%22539.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.05%22%20opacity%3D%220.103%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22369.6%22%20y1%3D%22-187.8%22%20x2%3D%22432.4%22%20y2%3D%22784.1%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.9%22%20opacity%3D%220.275%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22371.0%22%20y1%3D%22-187.8%22%20x2%3D%22433.8%22%20y2%3D%22784.1%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.16%22%20opacity%3D%220.138%22%2F%3E%3Cline%20x1%3D%22381.6%22%20y1%3D%22-604.0%22%20x2%3D%22601.6%22%20y2%3D%22792.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.74%22%20opacity%3D%220.361%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22383.0%22%20y1%3D%22-604.0%22%20x2%3D%22603.0%22%20y2%3D%22792.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.50%22%20opacity%3D%220.18%22%2F%3E%3Cline%20x1%3D%22690.0%22%20y1%3D%221127.3%22%20x2%3D%22568.3%22%20y2%3D%221642.9%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.68%22%20opacity%3D%220.325%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22691.4%22%20y1%3D%221127.3%22%20x2%3D%22569.7%22%20y2%3D%221642.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.47%22%20opacity%3D%220.163%22%2F%3E%3Cline%20x1%3D%22602.4%22%20y1%3D%2232.6%22%20x2%3D%221072.7%22%20y2%3D%221061.8%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.3%22%20opacity%3D%220.31%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22603.8%22%20y1%3D%2232.6%22%20x2%3D%221074.1%22%20y2%3D%221061.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.32%22%20opacity%3D%220.155%22%2F%3E%3Cline%20x1%3D%22793.8%22%20y1%3D%2258.9%22%20x2%3D%221089.1%22%20y2%3D%22939.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.81%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22851.8%22%20y1%3D%22-156.9%22%20x2%3D%221004.3%22%20y2%3D%221103.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.82%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22383.3%22%20y1%3D%22719.2%22%20x2%3D%221094.9%22%20y2%3D%221974.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.28%22%20opacity%3D%220.121%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22262.8%22%20y1%3D%22319.1%22%20x2%3D%22576.1%22%20y2%3D%221594.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.96%22%20opacity%3D%220.548%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22264.2%22%20y1%3D%22319.1%22%20x2%3D%22577.5%22%20y2%3D%221594.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.98%22%20opacity%3D%220.274%22%2F%3E%3Cline%20x1%3D%22622.0%22%20y1%3D%22931.2%22%20x2%3D%22788.6%22%20y2%3D%221810.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.76%22%20opacity%3D%220.556%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22623.4%22%20y1%3D%22931.2%22%20x2%3D%22790.0%22%20y2%3D%221810.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.10%22%20opacity%3D%220.278%22%2F%3E%3Cline%20x1%3D%22250.6%22%20y1%3D%2287.7%22%20x2%3D%22466.9%22%20y2%3D%22553.8%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.24%22%20opacity%3D%220.506%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22252.0%22%20y1%3D%2287.7%22%20x2%3D%22468.3%22%20y2%3D%22553.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.90%22%20opacity%3D%220.253%22%2F%3E%3Cline%20x1%3D%22211.7%22%20y1%3D%22-119.9%22%20x2%3D%22460.5%22%20y2%3D%22822.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.84%22%20opacity%3D%220.088%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2230.2%22%20y1%3D%22-382.5%22%20x2%3D%22161.5%22%20y2%3D%22894.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.37%22%20opacity%3D%220.128%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22780.8%22%20y1%3D%22-183.5%22%20x2%3D%22746.6%22%20y2%3D%22793.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.86%22%20opacity%3D%220.09%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22540.5%22%20y1%3D%22291.7%22%20x2%3D%22471.1%22%20y2%3D%22915.2%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.95%22%20opacity%3D%220.28%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22541.9%22%20y1%3D%22291.7%22%20x2%3D%22472.5%22%20y2%3D%22915.2%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.18%22%20opacity%3D%220.14%22%2F%3E%3Cline%20x1%3D%22947.6%22%20y1%3D%2250.4%22%20x2%3D%22957.1%22%20y2%3D%22376.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.92%22%20opacity%3D%220.094%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-69.9%22%20y1%3D%22510.9%22%20x2%3D%22102.9%22%20y2%3D%22955.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.62%22%20opacity%3D%220.071%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%221012.0%22%20y1%3D%22-286.0%22%20x2%3D%22780.6%22%20y2%3D%221397.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.38%22%20opacity%3D%220.128%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-118.1%22%20y1%3D%22541.1%22%20x2%3D%22149.1%22%20y2%3D%221653.9%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.37%22%20opacity%3D%220.529%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-116.7%22%20y1%3D%22541.1%22%20x2%3D%22150.5%22%20y2%3D%221653.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.95%22%20opacity%3D%220.265%22%2F%3E%3Cline%20x1%3D%22404.9%22%20y1%3D%22-113.4%22%20x2%3D%22583.7%22%20y2%3D%22565.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.81%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-56.5%22%20y1%3D%2259.3%22%20x2%3D%22264.6%22%20y2%3D%22674.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.34%22%20opacity%3D%220.125%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22167.8%22%20y1%3D%22-209.8%22%20x2%3D%2237.9%22%20y2%3D%221219.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.09%22%20opacity%3D%220.107%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22301.1%22%20y1%3D%22826.8%22%20x2%3D%22353.2%22%20y2%3D%221895.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.22%22%20opacity%3D%220.557%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22302.5%22%20y1%3D%22826.8%22%20x2%3D%22354.6%22%20y2%3D%221895.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.89%22%20opacity%3D%220.279%22%2F%3E%3Cline%20x1%3D%22568.3%22%20y1%3D%22437.1%22%20x2%3D%22627.5%22%20y2%3D%222178.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.83%22%20opacity%3D%220.088%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-207.8%22%20y1%3D%2221.5%22%20x2%3D%22428.1%22%20y2%3D%221329.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.62%22%20opacity%3D%220.072%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22894.5%22%20y1%3D%22602.4%22%20x2%3D%22926.5%22%20y2%3D%221303.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.26%22%20opacity%3D%220.12%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2226.8%22%20y1%3D%22502.2%22%20x2%3D%22233.6%22%20y2%3D%22932.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.38%22%20opacity%3D%220.129%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2295.5%22%20y1%3D%22-826.0%22%20x2%3D%22482.2%22%20y2%3D%22877.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.01%22%20opacity%3D%220.285%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2296.9%22%20y1%3D%22-826.0%22%20x2%3D%22483.6%22%20y2%3D%22877.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.20%22%20opacity%3D%220.142%22%2F%3E%3Cline%20x1%3D%22663.6%22%20y1%3D%22-374.6%22%20x2%3D%22843.0%22%20y2%3D%22380.4%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.42%22%20opacity%3D%220.32%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22665.0%22%20y1%3D%22-374.6%22%20x2%3D%22844.4%22%20y2%3D%22380.4%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.97%22%20opacity%3D%220.16%22%2F%3E%3Cline%20x1%3D%22399.6%22%20y1%3D%2257.5%22%20x2%3D%22176.0%22%20y2%3D%221533.6%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.9%22%20opacity%3D%220.276%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22401.0%22%20y1%3D%2257.5%22%20x2%3D%22177.4%22%20y2%3D%221533.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.16%22%20opacity%3D%220.138%22%2F%3E%3Cline%20x1%3D%22198.2%22%20y1%3D%2246.9%22%20x2%3D%22275.9%22%20y2%3D%22754.8%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.43%22%20opacity%3D%220.547%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22199.6%22%20y1%3D%2246.9%22%20x2%3D%22277.3%22%20y2%3D%22754.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.37%22%20opacity%3D%220.274%22%2F%3E%3Cline%20x1%3D%22260.9%22%20y1%3D%22598.1%22%20x2%3D%2240.4%22%20y2%3D%221555.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.78%22%20opacity%3D%220.084%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22934.6%22%20y1%3D%22678.0%22%20x2%3D%22824.6%22%20y2%3D%221164.0%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.01%22%20opacity%3D%220.285%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22936.0%22%20y1%3D%22678.0%22%20x2%3D%22826.0%22%20y2%3D%221164.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.20%22%20opacity%3D%220.142%22%2F%3E%3Cline%20x1%3D%22600.3%22%20y1%3D%2298.9%22%20x2%3D%22804.4%22%20y2%3D%221473.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.31%22%20opacity%3D%220.123%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2230.1%22%20y1%3D%2223.9%22%20x2%3D%22269.0%22%20y2%3D%221635.8%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.56%22%20opacity%3D%220.343%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2231.5%22%20y1%3D%2223.9%22%20x2%3D%22270.4%22%20y2%3D%221635.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.82%22%20opacity%3D%220.172%22%2F%3E%3Cline%20x1%3D%22808.7%22%20y1%3D%22576.9%22%20x2%3D%22949.1%22%20y2%3D%221065.4%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.23%22%20opacity%3D%220.304%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22810.1%22%20y1%3D%22576.9%22%20x2%3D%22950.5%22%20y2%3D%221065.4%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.29%22%20opacity%3D%220.152%22%2F%3E%3Cline%20x1%3D%22551.6%22%20y1%3D%22511.8%22%20x2%3D%22271.7%22%20y2%3D%221977.6%22%20stroke%3D%22%23141009%22%20stroke-width%3D%225.45%22%20opacity%3D%220.581%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22553.0%22%20y1%3D%22511.8%22%20x2%3D%22273.1%22%20y2%3D%221977.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%222.18%22%20opacity%3D%220.29%22%2F%3E%3Cline%20x1%3D%22685.0%22%20y1%3D%22-173.8%22%20x2%3D%22542.9%22%20y2%3D%221158.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.87%22%20opacity%3D%220.09%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22544.1%22%20y1%3D%22-430.2%22%20x2%3D%22370.3%22%20y2%3D%221011.6%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.86%22%20opacity%3D%220.272%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22545.5%22%20y1%3D%22-430.2%22%20x2%3D%22371.7%22%20y2%3D%221011.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.14%22%20opacity%3D%220.136%22%2F%3E%3Cline%20x1%3D%2269.2%22%20y1%3D%22725.3%22%20x2%3D%2254.3%22%20y2%3D%221588.6%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.98%22%20opacity%3D%220.282%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2270.6%22%20y1%3D%22725.3%22%20x2%3D%2255.7%22%20y2%3D%221588.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.19%22%20opacity%3D%220.141%22%2F%3E%3Cline%20x1%3D%22897.8%22%20y1%3D%22445.6%22%20x2%3D%22820.7%22%20y2%3D%22939.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.21%22%20opacity%3D%220.116%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22328.8%22%20y1%3D%22-141.7%22%20x2%3D%22377.1%22%20y2%3D%22791.0%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.25%22%20opacity%3D%220.305%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22330.2%22%20y1%3D%22-141.7%22%20x2%3D%22378.5%22%20y2%3D%22791.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.30%22%20opacity%3D%220.152%22%2F%3E%3Cline%20x1%3D%22613.0%22%20y1%3D%22547.7%22%20x2%3D%221119.5%22%20y2%3D%221871.5%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.14%22%20opacity%3D%220.296%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22614.4%22%20y1%3D%22547.7%22%20x2%3D%221120.9%22%20y2%3D%221871.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.26%22%20opacity%3D%220.148%22%2F%3E%3Cline%20x1%3D%22-91.1%22%20y1%3D%22162.1%22%20x2%3D%22381.8%22%20y2%3D%221229.3%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.14%22%20opacity%3D%220.11%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22280.0%22%20y1%3D%22-94.8%22%20x2%3D%22-125.8%22%20y2%3D%221654.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.01%22%20opacity%3D%220.101%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-112.5%22%20y1%3D%2213.7%22%20x2%3D%22424.2%22%20y2%3D%221546.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.6%22%20opacity%3D%220.25%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22159.9%22%20y1%3D%22343.0%22%20x2%3D%22648.1%22%20y2%3D%221356.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.97%22%20opacity%3D%220.097%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22524.6%22%20y1%3D%22-177.9%22%20x2%3D%22993.1%22%20y2%3D%22730.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.25%22%20opacity%3D%220.119%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22254.1%22%20y1%3D%22-435.8%22%20x2%3D%2274.5%22%20y2%3D%221024.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.06%22%20opacity%3D%220.104%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22314.5%22%20y1%3D%22-26.9%22%20x2%3D%22374.5%22%20y2%3D%22836.1%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.16%22%20opacity%3D%220.297%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22315.9%22%20y1%3D%22-26.9%22%20x2%3D%22375.9%22%20y2%3D%22836.1%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.26%22%20opacity%3D%220.148%22%2F%3E%3Cline%20x1%3D%22152.9%22%20y1%3D%22991.5%22%20x2%3D%22270.9%22%20y2%3D%221322.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.01%22%20opacity%3D%220.101%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22988.2%22%20y1%3D%22-65.7%22%20x2%3D%22973.3%22%20y2%3D%221399.0%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.88%22%20opacity%3D%220.274%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22989.6%22%20y1%3D%22-65.7%22%20x2%3D%22974.7%22%20y2%3D%221399.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.15%22%20opacity%3D%220.137%22%2F%3E%3Cline%20x1%3D%22871.8%22%20y1%3D%22782.7%22%20x2%3D%22672.6%22%20y2%3D%221710.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.0%22%20opacity%3D%220.1%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22375.5%22%20y1%3D%22168.4%22%20x2%3D%22605.5%22%20y2%3D%221314.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.84%22%20opacity%3D%220.088%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22167.3%22%20y1%3D%22962.2%22%20x2%3D%22468.2%22%20y2%3D%221557.9%22%20stroke%3D%22%23141009%22%20stroke-width%3D%225.34%22%20opacity%3D%220.36%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22168.7%22%20y1%3D%22962.2%22%20x2%3D%22469.6%22%20y2%3D%221557.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%222.14%22%20opacity%3D%220.18%22%2F%3E%3Cline%20x1%3D%2299.4%22%20y1%3D%22264.1%22%20x2%3D%22538.5%22%20y2%3D%221380.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.81%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22760.5%22%20y1%3D%22-70.7%22%20x2%3D%22870.1%22%20y2%3D%221618.0%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.06%22%20opacity%3D%220.483%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22761.9%22%20y1%3D%22-70.7%22%20x2%3D%22871.5%22%20y2%3D%221618.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.62%22%20opacity%3D%220.241%22%2F%3E%3Cline%20x1%3D%22936.4%22%20y1%3D%22660.7%22%20x2%3D%22628.7%22%20y2%3D%221854.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.15%22%20opacity%3D%220.297%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22937.8%22%20y1%3D%22660.7%22%20x2%3D%22630.1%22%20y2%3D%221854.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.26%22%20opacity%3D%220.148%22%2F%3E%3Cline%20x1%3D%22785.2%22%20y1%3D%22-266.1%22%20x2%3D%221010.6%22%20y2%3D%22594.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.83%22%20opacity%3D%220.088%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22285.8%22%20y1%3D%22618.8%22%20x2%3D%22553.7%22%20y2%3D%221416.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.1%22%20opacity%3D%220.292%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22287.2%22%20y1%3D%22618.8%22%20x2%3D%22555.1%22%20y2%3D%221416.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.24%22%20opacity%3D%220.146%22%2F%3E%3Cline%20x1%3D%22369.3%22%20y1%3D%2257.3%22%20x2%3D%22968.8%22%20y2%3D%221456.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.11%22%20opacity%3D%220.293%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22370.7%22%20y1%3D%2257.3%22%20x2%3D%22970.2%22%20y2%3D%221456.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.24%22%20opacity%3D%220.146%22%2F%3E%3Cline%20x1%3D%22945.0%22%20y1%3D%22517.5%22%20x2%3D%221029.5%22%20y2%3D%22819.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.64%22%20opacity%3D%220.253%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22135.3%22%20y1%3D%22249.6%22%20x2%3D%22570.5%22%20y2%3D%221656.8%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.08%22%20opacity%3D%220.291%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22136.7%22%20y1%3D%22249.6%22%20x2%3D%22571.9%22%20y2%3D%221656.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.23%22%20opacity%3D%220.145%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%221038.2%22%20x2%3D%224.8%22%20y2%3D%221635.4%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.1%22%20opacity%3D%220.108%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22762.8%22%20y1%3D%2282.7%22%20x2%3D%22650.3%22%20y2%3D%221009.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.92%22%20opacity%3D%220.277%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22764.2%22%20y1%3D%2282.7%22%20x2%3D%22651.7%22%20y2%3D%221009.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.17%22%20opacity%3D%220.139%22%2F%3E%3Cline%20x1%3D%22319.2%22%20y1%3D%22544.4%22%20x2%3D%22763.0%22%20y2%3D%221299.8%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.73%22%20opacity%3D%220.08%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22249.7%22%20y1%3D%221008.1%22%20x2%3D%22613.6%22%20y2%3D%221701.9%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.81%22%20opacity%3D%220.086%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%221028.3%22%20y1%3D%22163.8%22%20x2%3D%22936.7%22%20y2%3D%221952.5%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.47%22%20opacity%3D%220.537%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%221029.7%22%20y1%3D%22163.8%22%20x2%3D%22938.1%22%20y2%3D%221952.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%220.99%22%20opacity%3D%220.269%22%2F%3E%3Cline%20x1%3D%2217.7%22%20y1%3D%22373.2%22%20x2%3D%22-1.5%22%20y2%3D%22721.0%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.2%22%20opacity%3D%220.301%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2219.1%22%20y1%3D%22373.2%22%20x2%3D%22-0.1%22%20y2%3D%22721.0%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.28%22%20opacity%3D%220.15%22%2F%3E%3Cline%20x1%3D%22142.7%22%20y1%3D%22635.8%22%20x2%3D%22119.6%22%20y2%3D%221468.2%22%20stroke%3D%22%23141009%22%20stroke-width%3D%223.12%22%20opacity%3D%220.341%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22144.1%22%20y1%3D%22635.8%22%20x2%3D%22121.0%22%20y2%3D%221468.2%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.25%22%20opacity%3D%220.171%22%2F%3E%3Cline%20x1%3D%22727.2%22%20y1%3D%22824.0%22%20x2%3D%221031.8%22%20y2%3D%221529.9%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.0%22%20opacity%3D%220.284%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22728.6%22%20y1%3D%22824.0%22%20x2%3D%221033.2%22%20y2%3D%221529.9%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.20%22%20opacity%3D%220.142%22%2F%3E%3Cline%20x1%3D%22853.0%22%20y1%3D%221187.0%22%20x2%3D%22764.6%22%20y2%3D%221579.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.03%22%20opacity%3D%220.102%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22510.9%22%20y1%3D%22-336.7%22%20x2%3D%22760.1%22%20y2%3D%221131.8%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.41%22%20opacity%3D%220.423%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22512.3%22%20y1%3D%22-336.7%22%20x2%3D%22761.5%22%20y2%3D%221131.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.76%22%20opacity%3D%220.211%22%2F%3E%3Cline%20x1%3D%22100.0%22%20y1%3D%221092.6%22%20x2%3D%22157.4%22%20y2%3D%221664.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.26%22%20opacity%3D%220.306%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22101.4%22%20y1%3D%221092.6%22%20x2%3D%22158.8%22%20y2%3D%221664.3%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.30%22%20opacity%3D%220.153%22%2F%3E%3Cline%20x1%3D%22513.6%22%20y1%3D%22-576.0%22%20x2%3D%22836.9%22%20y2%3D%22983.8%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.14%22%20opacity%3D%220.296%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22515.0%22%20y1%3D%22-576.0%22%20x2%3D%22838.3%22%20y2%3D%22983.8%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.26%22%20opacity%3D%220.148%22%2F%3E%3Cline%20x1%3D%22726.2%22%20y1%3D%22513.9%22%20x2%3D%221040.8%22%20y2%3D%221556.3%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.62%22%20opacity%3D%220.252%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22751.9%22%20y1%3D%22279.8%22%20x2%3D%22673.4%22%20y2%3D%22842.5%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.82%22%20opacity%3D%220.268%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22753.3%22%20y1%3D%22279.8%22%20x2%3D%22674.8%22%20y2%3D%22842.5%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.13%22%20opacity%3D%220.134%22%2F%3E%3Cline%20x1%3D%22300.4%22%20y1%3D%22152.9%22%20x2%3D%22216.9%22%20y2%3D%221241.6%22%20stroke%3D%22%23141009%22%20stroke-width%3D%222.92%22%20opacity%3D%220.389%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22301.8%22%20y1%3D%22152.9%22%20x2%3D%22218.3%22%20y2%3D%221241.6%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.17%22%20opacity%3D%220.195%22%2F%3E%3Cline%20x1%3D%221032.3%22%20y1%3D%22125.0%22%20x2%3D%22915.9%22%20y2%3D%22794.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.33%22%20opacity%3D%220.125%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22132.7%22%20y1%3D%22-174.0%22%20x2%3D%22259.0%22%20y2%3D%22866.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.31%22%20opacity%3D%220.123%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22265.0%22%20y1%3D%22-380.6%22%20x2%3D%22770.0%22%20y2%3D%22707.6%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.3%22%20opacity%3D%220.122%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22603.1%22%20y1%3D%22-113.4%22%20x2%3D%221180.1%22%20y2%3D%221031.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.94%22%20opacity%3D%220.095%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22-250.8%22%20y1%3D%22808.7%22%20x2%3D%22444.2%22%20y2%3D%221974.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.06%22%20opacity%3D%220.105%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22678.1%22%20y1%3D%22-443.9%22%20x2%3D%22435.5%22%20y2%3D%221017.7%22%20stroke%3D%22%23141009%22%20stroke-width%3D%224.06%22%20opacity%3D%220.444%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22679.5%22%20y1%3D%22-443.9%22%20x2%3D%22436.9%22%20y2%3D%221017.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.62%22%20opacity%3D%220.222%22%2F%3E%3Cline%20x1%3D%221050.6%22%20y1%3D%22-676.7%22%20x2%3D%22837.0%22%20y2%3D%22751.5%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.65%22%20opacity%3D%220.074%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22338.2%22%20y1%3D%22-422.2%22%20x2%3D%221085.7%22%20y2%3D%22868.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.65%22%20opacity%3D%220.073%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22276.7%22%20y1%3D%22460.4%22%20x2%3D%22357.6%22%20y2%3D%22842.1%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%221.29%22%20opacity%3D%220.122%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22294.5%22%20y1%3D%22-203.0%22%20x2%3D%22358.1%22%20y2%3D%221305.0%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.97%22%20opacity%3D%220.098%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22104.7%22%20y1%3D%22-461.6%22%20x2%3D%22239.2%22%20y2%3D%22655.2%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.92%22%20opacity%3D%220.094%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22806.7%22%20y1%3D%22839.1%22%20x2%3D%22726.2%22%20y2%3D%221949.7%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%223.15%22%20opacity%3D%220.296%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22808.1%22%20y1%3D%22839.1%22%20x2%3D%22727.6%22%20y2%3D%221949.7%22%20stroke%3D%22%23fbf7ec%22%20stroke-width%3D%221.26%22%20opacity%3D%220.148%22%2F%3E%3Cline%20x1%3D%22995.4%22%20y1%3D%22-452.7%22%20x2%3D%22993.2%22%20y2%3D%22473.1%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.62%22%20opacity%3D%220.251%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22187.5%22%20y1%3D%22-510.0%22%20x2%3D%22748.9%22%20y2%3D%22978.5%22%20stroke%3D%22%232a2318%22%20stroke-width%3D%222.62%22%20opacity%3D%220.251%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2222.8%22%20y1%3D%22591.1%22%20x2%3D%22233.5%22%20y2%3D%221627.7%22%20stroke%3D%22%233a3326%22%20stroke-width%3D%220.93%22%20opacity%3D%220.095%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27170%27%20height%3D%27170%27%3E%3Cfilter%20id%3D%27hg%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.7%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200.9%200.9%200.9%200%20-0.5%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23hg%29%27%20opacity%3D%270.9%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cfilter%20id%3D%27sp%27%3E%3CfeTurbulence%20type%3D%27turbulence%27%20baseFrequency%3D%270.55%27%20numOctaves%3D%272%27%20seed%3D%279%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%201.1%201.1%201.1%200%20-1.15%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23sp%29%27%2F%3E%3C%2Fsvg%3E"), linear-gradient(180deg, var(--hintergrund) 0%, var(--hintergrund-2) 60%);
  --backdrop-size: 100% 100%, 170px 170px, 320px 320px, auto;
  --backdrop-repeat: no-repeat, repeat, repeat, no-repeat;
  --backdrop-attachment: fixed, fixed, fixed, fixed;
  --backdrop-blend: multiply, multiply, multiply, normal;
}
:root[data-theme='dunkel'] {
  --sheet-bg: var(--flaeche);
  --kante-oben: #6a6a72;
  --backdrop-image: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    --sheet-bg: var(--flaeche);
    --kante-oben: #6a6a72;
    --backdrop-image: none;
  }
}

/* ============================================================================
   Genre-Landing-Hero + Reinbox-Effekt + Scroll-Einblendungen
   Großer Hero je Genre mit genre-eigenem Motiv-Backdrop (js/genre-inszenierung.js
   genreMotivSvg). Der Hero „boxt sich rein" (Skalierung + clip-path-Blende +
   kurzer Rahmen-Blitz), die Abschnitte darunter blenden beim Hereinscrollen ein
   und wieder aus (.reveal ↔ .sichtbar/.raus, Beobachter in js/app.js). Alle
   Bewegung ist an .anim-reveal (html-Klasse, nur wenn Bewegung erlaubt) gebunden
   und wird zusätzlich von der globalen prefers-reduced-motion-Regel abgeschaltet.
   ============================================================================ */

.genre-landing-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.3rem;
  color: var(--pf, var(--primaer));
  background: linear-gradient(160deg, var(--pf-weich) 0%, var(--flaeche) 82%);
}
/* Motiv-Backdrop: genre-eigenes SVG, gedämpft hinter Scrim + Text. */
.genre-landing-bild {
  position: absolute;
  inset: -8% -3%;
  width: 106%;
  height: 116%;
  color: var(--pf, var(--primaer));
  opacity: 0.22;
  pointer-events: none;
}
/* Scrim: unten in die Fläche auslaufen lassen, damit der Titel satt sitzt. */
.genre-landing-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--flaeche) 2%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(130% 90% at 18% 118%, var(--flaeche) 0%, rgba(0, 0, 0, 0) 58%);
  opacity: 0.92;
}
.genre-landing-inhalt {
  position: relative;
  z-index: 1;
  border-left: 0;
  padding-left: 0.95rem;
}
/* Rückhalt hinter dem Hero-Text — dasselbe Mittel wie bei .bildkachel-inhalt,
   aus demselben Grund. Der flächige .genre-landing-scrim läuft erst ab 62 %
   Höhe an; Titel und Fließtext sitzen darin satt, die kleine Augenbraue steht
   als oberste Zeile aber darüber, mitten im Foto. Solange das Foto farbig und
   dunkel war, fiel das nicht auf; in Graustufen trifft die Hue-Augenbraue
   regelmäßig eine mittelgraue Zone und verschwindet. Dieser Verlauf klebt am
   Inhalt, wächst mit der Textlänge mit und lässt das Bild darüber frei.
   --hero-rueckhalt schaltet ihn je Thema: im Dunkeln trägt der Scrim allein. */
.genre-landing-inhalt::before {
  content: '';
  position: absolute;
  /* Seitlich weit ueber den Hero hinaus, damit die Kante des Rueckhalts nicht
     als heller Kasten im Foto steht — der Hero hat overflow:hidden und schneidet
     sie sauber ab. Vertikal dagegen eng am Text: Oben genau so viel Vorlauf, dass
     die Augenbraue nicht im Ausblendbereich sitzt.
     vw statt %: Ein Prozentwert bezieht sich auf den Inhaltsblock (~310 px), was
     auf schmalen Schirmen reichte, auf dem Desktop-Hero aber nicht — dort stand
     die Kante wieder als Kasten im Bild. */
  inset: -1.35rem -100vw -1rem -100vw;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-rueckhalt, none);
  opacity: 0.92;
}
.genre-landing-augenbraue {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pf, var(--primaer));
}
.genre-landing-symbol {
  display: inline-flex;
  vertical-align: -0.18em;
}
.genre-landing-symbol svg {
  width: 1.15em;
  height: 1.15em;
}
.genre-landing-hero h1 {
  margin: 0;
  line-height: 1.02;
  color: var(--tinte);
  font-size: clamp(1.9rem, 7vw, 3rem);
}
.genre-landing-kurz {
  margin: 0.55rem 0 0;
  max-width: 44ch;
  color: var(--tinte-2);
  font-size: 0.98rem;
  line-height: 1.4;
}
@media (min-width: 40rem) {
  .genre-landing-hero { min-height: 250px; padding: 2rem 2.1rem; }
}

/* Startseiten-Hero: inszeniert wie die Landingpages (Motiv + Reinbox), aber mit
   Marken-Logo, Themenzeile und den Einstiegs-CTAs. Inhalt stapelt sauber — auch
   auf schmalen Mobil-Breiten, wo der alte Logo-links/Text-rechts-Hero drängte. */
/* Der Startseiten-Hero fuellt den Schirm. Abgezogen wird, was ueber ihm steht:
   die klebende Kopfzeile plus das obere Innenmass von main (mobil ~80 px, ab
   Tablet ~92 px). svh statt vh, weil vh auf Mobilgeraeten die einklappbare
   Browserleiste mitrechnet und der Hero beim Scrollen sonst springt; die
   vh-Zeile davor ist der Rueckfall fuer Browser ohne svh. Bewusst ein paar
   Pixel zu kurz statt zu lang: So lugt die naechste Ueberschrift knapp herein
   und zeigt, dass es weitergeht. */
.startseite-hero {
  align-items: flex-start;
  /* Abzug mobil: Kopfzeile + oberes Innenmass von main (~5 rem) UND die fixierte
     untere Leiste (~3.7 rem inkl. Safe Area) — die liegt ueber dem Inhalt, ohne
     Abzug verschwaenden die CTA-Knoepfe dahinter. */
  min-height: calc(100vh - 9rem - env(safe-area-inset-bottom));
  min-height: calc(100svh - 9rem - env(safe-area-inset-bottom));
}
/* Der Scrim laeuft sonst prozentual mit: Auf 300 px Hoehe deckte er das untere
   Drittel, auf voller Schirmhoehe waere das die halbe Seite in Weiss. Feste
   Pixelmasse halten den Textrueckhalt unten, wo der Text steht, und lassen das
   Foto darueber frei. */
.startseite-hero .genre-landing-scrim {
  background:
    linear-gradient(to top, var(--flaeche) 40px, rgba(0, 0, 0, 0) 360px),
    radial-gradient(120% 260px at 18% 100%, var(--flaeche) 0%, rgba(0, 0, 0, 0) 70%);
}
.startseite-hero .genre-landing-inhalt { align-self: flex-end; }
/* Logo NEBEN dem Schriftzug, nicht darüber: zusammen sind sie eine Marke, keine
   zwei gestapelten Elemente. Baseline-Ausrichtung über align-items:center; das
   Logo skaliert mit der Überschrift (em), damit es auf jeder Breite passt. */
.startseite-hero-marke {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.startseite-hero-mark {
  flex: none;
  width: 0.9em;
  height: 0.9em;
  filter: var(--filter-marke);
}
.startseite-hero-themen {
  margin: 0.5rem 0 0;
  color: var(--tinte-2);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.startseite-hero .marke-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.startseite-hero .marke-hero-cta .knopf { flex: 0 0 auto; }
@media (min-width: 40rem) {
  .startseite-hero-themen { font-size: 1rem; }
}
/* Ab Tablet faellt die untere Leiste weg (siehe .fussnav), der Abzug schrumpft
   auf Kopfzeile + Innenmass. */
@media (min-width: 768px) {
  .startseite-hero {
    min-height: calc(100vh - 6.5rem);
    min-height: calc(100svh - 6.5rem);
  }
}

/* „Reinboxen" (etwas kräftig): der Hero fährt leicht überskaliert über eine
   clip-path-Blende herein, setzt sich mit kurzem Rücksprung und rotem
   Rahmen-Blitz. Inhalt zieht mit leichter Verzögerung nach. */
@keyframes genre-boxin {
  0%   { opacity: 0; transform: scale(1.09); clip-path: inset(15% 17% 15% 17%); }
  55%  { opacity: 1; transform: scale(0.984); clip-path: inset(0); }
  78%  { transform: scale(1.007); }
  100% { transform: scale(1); clip-path: inset(0); }
}
@keyframes genre-boxin-inhalt {
  0%   { opacity: 0; transform: translateY(16px); }
  45%  { opacity: 0; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes genre-rahmenblitz {
  0%, 40% { box-shadow: var(--schatten-plastisch), inset 0 0 0 0 var(--pf, var(--primaer)); }
  56%     { box-shadow: var(--schatten-plastisch), inset 0 0 0 3.5px var(--pf, var(--primaer)); }
  100%    { box-shadow: var(--schatten-plastisch), inset 0 0 0 0 var(--pf, var(--primaer)); }
}
.anim-reveal .genre-landing-hero {
  animation: genre-boxin 660ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
             genre-rahmenblitz 660ms ease-out both;
}
.anim-reveal .genre-landing-inhalt {
  animation: genre-boxin-inhalt 740ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Scroll-Einblendungen: Abschnitte kommen gedämpft/versetzt herein und blenden
   beim Verlassen wieder ab (düster). Nur aktiv, wenn Bewegung erlaubt ist
   (.anim-reveal) — ohne die Klasse bleibt alles sofort sichtbar. */
.anim-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: brightness(0.45) saturate(0.8);
  transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 520ms ease;
  will-change: opacity, transform, filter;
}
.anim-reveal .reveal.sichtbar {
  opacity: 1;
  transform: none;
  filter: none;
}
.anim-reveal .reveal.raus {
  opacity: 0.18;
  transform: translateY(-10px);
  filter: brightness(0.4) saturate(0.75);
}

/* ---- Instrument-Landing (#/instrument, #/instrument/<domaene>) ---- */
.instr-hero .marke-hero-icon .dom-svg { width: 2rem; height: 2rem; }
.instr-abschnitt { margin-bottom: 1.1rem; }
.instr-stufe-titel { margin: 1rem 0 0.5rem; }
.instr-stufe-titel:first-child { margin-top: 0.2rem; }
.instr-wz-chip { text-decoration: none; }
.instr-wz-chip .fa-solid { font-size: 0.85em; margin-right: 0.15rem; }
.instr-fuss { margin-top: 1.2rem; }
.instr-kachel .pfad-medaille .dom-svg { width: 1.6rem; height: 1.6rem; }

/* Genres-Hub: unten „featured" (Songs + Gefühlslandkarte) — bewusst anderer
   Stil als die Genre-Karten: breite Zeilen-Kacheln mit Icon + Akzentkante. */
.genre-featured-titel { margin-top: 1.6rem; }
.genre-featured { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin: 0.2rem 0 1rem; }
@media (min-width: 34rem) { .genre-featured { grid-template-columns: 1fr 1fr; } }
.genre-featured-karte {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem;
  border: 1.5px solid var(--linie-stark); border-left: 4px solid var(--primaer);
  border-radius: 2px; background: var(--flaeche-2); color: var(--tinte);
  text-decoration: none; box-shadow: var(--schatten-karte);
}
@media (hover: hover) { .genre-featured-karte:hover { border-color: var(--primaer); } }
.genre-featured-icon {
  flex: none; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 2px; background: var(--primaer-weich); color: var(--primaer); font-size: 1.15rem;
}
.genre-featured-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.genre-featured-pfeil { color: var(--primaer); flex: none; }

/* Instrument-Seite: In-Page-Reiter (Theorie · Praxis · Tools · Prüfung · Geräte
   · [Stimmung/Patterns]). Umbrechend statt waagerecht scrollbar — so sind ALLE
   Reiter auf einen Blick sichtbar (auch mobil), keiner versteckt sich hinter
   einem Scroll-Rand. */
.instr-reiter {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 0.2rem 0 1rem; padding-bottom: 0.35rem;
}
.instr-reiter-knopf { flex: none; white-space: nowrap; }
.instr-reiter-knopf .fa-solid { font-size: 0.85em; margin-right: 0.1rem; }
.instr-tab-inhalt { margin-top: 0.2rem; }
.instr-tab-inhalt > .instr-stufe-titel:first-child { margin-top: 0.2rem; }

/* ============================================================================
   Experimentieren-Bereich (Impuls-Karten-Deck)
   Referenzbereich; „ausprobiert" ist rein informativ (kein Zähler, §5).
   ============================================================================ */
.exp-ziehbereich { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.4rem; }
.exp-gezogen { margin-top: 0.3rem; }
.exp-karte { display: flex; flex-direction: column; gap: 0.7rem; border-left: 5px solid var(--primaer); }
.exp-karte-kopf { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.exp-karte-titel { margin: 0; font-size: 1.35rem; line-height: 1.1; color: var(--tinte); }
.exp-karte-impuls { margin: 0; color: var(--tinte-2); font-size: 1.02rem; line-height: 1.5; max-width: 54ch; }
.exp-karte-aktionen { margin: 0.2rem 0 0; flex-wrap: wrap; }
.exp-karte-merker { margin: 0; }
.exp-aufwand { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.exp-aufwand-kurz { color: var(--signal-gruen-text); }
.exp-aufwand-mittel { color: var(--signal-gelb-text); }
.exp-aufwand-lang { color: var(--signal-rot-text); }
.exp-stoebern { margin: 0 0 1.4rem; }
.exp-stoeber-gruppen { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.4rem; }
.exp-stoeber-liste { list-style: none; margin: 0.3rem 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.exp-stoeber-titel { display: inline-flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; background: none; border: 0; padding: 0.35rem 0.2rem; color: var(--primaer-tief); font: inherit; cursor: pointer; border-radius: var(--radius-klein); }
.exp-stoeber-titel:hover { background: var(--primaer-weich); }
.exp-haltung { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1.4rem; }
.exp-haltung-karte { display: flex; align-items: center; gap: 0.7rem; }
.exp-haltung-karte .grafik-icon, .exp-haltung-karte .fa-solid { width: 1.7rem; height: 1.7rem; flex: none; color: var(--primaer); }
@media (min-width: 40rem) { .exp-haltung { grid-template-columns: repeat(3, 1fr); } }


/* Powerchord-/Klang-Werkzeug: Griffe/Intervalle/Akkorde/Skalen als ordentliches
   Raster statt chaotischem Flow-Wrap (jeder Eintrag eine ausgerichtete Zelle). */
.klang-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.7rem 0.9rem;
  align-items: start;
  margin: 0 0 0.4rem;
}
.klang-gitter .klang-genres { max-width: none; }

/* Heros über die volle Breite: Hintergrund randlos, Inhalt bleibt auf Spaltenbreite
   eingerückt (kein horizontaler Overflow dank overflow-x am body). */
.marke-hero, .genre-landing-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  padding-left: max(1.35rem, calc(50vw - 22rem));
  padding-right: max(1.35rem, calc(50vw - 22rem));
}

/* Quittier-Buttons („Als gelesen/erledigt/mitgenommen abhaken") kleiner setzen. */
.knopf[data-quittiere] { font-size: 0.74rem; letter-spacing: 0.02em; padding: 0.45rem 0.7rem; }

/* Theme-Umschalter im Menü ist ein <button> — an das <a>-Aussehen der Menüpunkte
   angleichen (voller Button-Reset). */
button.menue-punkt { width: 100%; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }

/* CC-Lizenzlink in der Footer-Schlusszeile. */
.footer-schluss a { color: var(--primaer); text-decoration: none; }
.footer-schluss a:hover, .footer-schluss a:focus-visible { text-decoration: underline; }


/* ===== Hintergrund DUNKEL: reines Schwarz, ohne Grain-Textur.
   Das Gegenstück für Hell steht im Themenblock ganz am Dateiende — es muss
   später stehen als die Bildebenen-Tokens weiter unten. ===== */
body { background-image: none; }
:root, :root[data-theme='hell'] { --flaeche-2: #f4f4f4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='hell']) {
    --hintergrund: #000000; --flaeche-2: #0d0d0d; --sheet-bg: #000000; --backdrop-image: none;
  }
}
:root[data-theme='dunkel'] {
  --hintergrund: #000000; --flaeche-2: #0d0d0d; --sheet-bg: #000000; --backdrop-image: none;
}

/* Genre-Übersicht als Raster statt Liste. */
.genre-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; margin: 0 0 1.4rem; }
.genre-gitter .genre-karte { margin: 0; }

/* ---------- Merken / Merkliste ---------- */

/* Aktionszeile unter dem Baustein-Hero (Merken-Knopf). */
.baustein-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.merken-knopf.gemerkt { color: var(--primaer); border-color: var(--primaer); }

/* Voraussetzungs-Hinweis am Seitenende — ruhig, ohne Signalfarbe (sperrt nie). */
.voraussetzung-hinweis { margin: 1rem 0 0.4rem; font-size: 0.9rem; }
.voraussetzung-hinweis a { color: var(--primaer); font-weight: 600; }

/* Merkliste im Profil. */
.merk-liste { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.merk-eintrag { display: flex; align-items: center; gap: 0.5rem; }
.merk-link { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--linie); border-radius: var(--radius); color: inherit; text-decoration: none; }
.merk-link:hover { border-color: var(--primaer); }
.merk-icon { display: inline-flex; width: 1.4rem; height: 1.4rem; flex: none; color: var(--primaer); }
.merk-icon svg { width: 100%; height: 100%; }
.merk-entfernen { flex: none; padding: 0.3rem 0.5rem; }

/* ---------- Griffe: Kategorie-Gruppen ---------- */
.griff-gruppe { margin: 0 0 1.6rem; }
.griff-gruppe-titel { margin: 0 0 0.7rem; }

/* ---------- Tunings: Genre-Filter der Klang-Referenz ---------- */
.klang-filter-label { margin: 0.8rem 0 0.3rem; }
.klang-stilfilter { margin: 0 0 1rem; }

/* ============================================================================
   Bildebene + Kachel-Muster der Startseite (Rhythmus C — „alles mit Bild")
   ----------------------------------------------------------------------------
   Vorbereitet und verglichen in mockups/startseite-muster.html. Das Bild liegt
   IMMER ganz hinten: Bild → Motiv-SVG → Scrim → Text. Die Reihenfolge im DOM ist
   die Schichtung, deshalb setzen die Ansichten bildEbene() vor motivSvg().

   Die Bilder sind reine Zutat: Fehlt images/bg/bilder.json, liefert bildEbene()
   nichts und alles sieht aus wie zuvor.
   ========================================================================= */

/* Die drei Stellschrauben der Bildebene — bewusst an EINER Stelle, damit sich
   die Wirkung ohne Suche nachjustieren lässt. Vergleichen lassen sie sich live
   in mockups/startseite-muster.html (Regler „Weichzeichnung/Deckkraft/Sättigung").
     --bild-weich       Weichzeichnung im Hero; Kacheln bekommen davon --blur-faktor
     --bild-deckkraft   wie deutlich das Foto durchkommt
     --bild-saettigung  1 = Originalfarben, 0 = Graustufen
   Weg dahin, zur Erinnerung: „Nebel" (18px/.35/.4) war als reine Textur hinter
   EINEM grossen Hero gedacht und ueber zehn Kacheln verteilt nicht mehr zu sehen.
   Danach 5px/.62/.95 — sichtbar, aber immer noch weichgezeichnet. Jetzt scharf:
   Die Fotos sollen als Fotos lesbar sein, nicht als Textur. */
:root {
  --bild-weich: 0px;
  --bild-deckkraft: 0.8;
  --bild-saettigung: 1;
  /* Ueberzoom gab es nur, weil der Blur sonst die hellen Bildraender in die
     Kante zieht. Ohne Weichzeichnung entfaellt der Grund — es bleibt ein Hauch,
     damit an den Kanten keine Subpixel-Blitzer stehen. Wer --bild-weich wieder
     hochdreht, sollte auch hier auf etwa 1.18 zurueck. */
  --bild-zoom: 1.02;
}

/* Bildebene": stark weichgezeichnet, entsättigt, heruntergeregelt. Es
   bleibt Struktur und Tiefe, kein erkennbarer Gegenstand; der Text bleibt damit
   über JEDEM Bild gleich gut lesbar.

   Das Bild selbst setzt js/hintergrundbilder.js inline als `background-image` —
   nicht über eine Custom Property: Ein relatives url() in einer Custom Property
   wird gegen DIESES Stylesheet aufgelöst (also gegen css/) statt gegen das
   Dokument und liefe ins Leere. */
.genre-landing-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(calc(var(--bild-weich) * var(--blur-faktor, 1))) saturate(var(--bild-saettigung));
  opacity: var(--bild-deckkraft);
  transform: scale(var(--bild-zoom));
}

/* Motiv zurücknehmen, WO ein Foto liegt. Hinter der alten Weichzeichnung trat
   das Motiv-SVG von selbst zurück; über einem scharfen Foto kreuzen sich zwei
   Zeichnungen und das Bild wird unruhig. Der Geschwister-Selektor greift nur,
   wenn tatsächlich eine Bildebene da ist — ohne Foto bleibt das Motiv wie bisher
   der Träger der Fläche. */
.genre-landing-bg ~ .genre-landing-bild { opacity: 0.1; }

/* Weichzeichnung an die Elementhöhe koppeln. 18 px wirken auf 300 px Hero-Höhe
   richtig, lassen aber eine 170 px hohe Kachel zu einem Farbfleck zusammenfallen. */
.bildkachel { --blur-faktor: 0.68; }

/* ---------- Bild-Kachel: der Hero-Aufbau im Container-Maßstab ----------
   Die Layout-Regeln hängen bewusst an `a.karte-link` statt nur an der Kachel-
   Klasse: `a.karte-link { display: block }` weiter oben ist spezifischer als
   eine einzelne Klasse und würde das Flex-Layout sonst still aushebeln. */
a.karte-link.bildkachel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 170px;
  padding: 0.95rem 1.05rem;
  background: linear-gradient(160deg, var(--pf-weich) 0%, var(--flaeche) 82%);
}
/* Der Hue-Radialfleck von .pfad-kachel liegt über dem Bild und trübt es —
   auf der Bild-Kachel trägt der Verlauf oben schon dieselbe Aufgabe. */
.bildkachel::before { content: none; }

/* Scrim — die eine Stelle, an der die Kachel NICHT wie der Hero funktioniert.
   Der Hero-Scrim (.genre-landing-scrim) läuft erst ab 62 % Höhe an; bei 300 px
   liegt unter dem Text dadurch noch reichlich Dichte. Auf Kachelhöhe stünde
   derselbe Text fast im Bild — im hellen Theme kippt die Lesbarkeit dann weg
   (helles Foto + helle Fläche + Hue-Augenbraue = nichts mehr zu sehen). Der
   Kachel-Scrim zieht die untere Zone deshalb entschieden auf die Fläche zurück. */
.bildkachel-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--flaeche) 8%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(120% 100% at 8% 118%, var(--flaeche) 0%, rgba(0, 0, 0, 0) 55%);
  opacity: 0.8;
}

.bildkachel-inhalt { position: relative; z-index: 1; }
/* Rückhalt direkt hinter dem Text — nicht über die ganze Kachel.
   Ein flächiger Scrim, der stark genug für die kleine Augenbraue ist, deckt das
   halbe Bild zu; und wie weit er reichen müsste, hängt an der Textlänge, die je
   Kachel schwankt. Dieser Verlauf klebt stattdessen am Inhalt selbst: Er wächst
   mit dem Text mit, lässt das Bild darüber frei und sichert die Lesbarkeit auch
   dort, wo ein helles Foto und eine helle Hue-Augenbraue zusammentreffen. */
.bildkachel-inhalt::before {
  content: '';
  position: absolute;
  /* Oben bewusst weit über den Inhalt hinaus: Die Augenbraue ist die oberste
     Zeile des Blocks und säße sonst mitten im Ausblendbereich — klein, in der
     Hue-Farbe und über einem hellen Foto ist sie dann nicht mehr zu lesen. */
  inset: -1.5rem -1.05rem -1rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, var(--flaeche) 84%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
}
.bildkachel-augenbraue {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pf, var(--primaer));
}
.bildkachel-augenbraue svg { width: 1.05em; height: 1.05em; }
.bildkachel-augenbraue .fa-solid { color: inherit; }
.bildkachel-titel {
  margin: 0;
  line-height: 1.05;
  color: var(--tinte);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.bildkachel-text {
  margin: 0.35rem 0 0;
  max-width: 40ch;
  color: var(--tinte-2);
  font-size: 0.84rem;
  line-height: 1.4;
}
.bildkachel .pfad-cta { margin-top: 0.5rem; }

/* ---------- Werkzeug-Kachel: flach, nur Icon ----------
   Bewusst OHNE Bild und ohne Motiv. Werkzeuge werden bedient und
   wiedergefunden — ein Hintergrund macht das Icon nur schwerer erkennbar. */
a.karte-link.werkzeugkachel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 0;
  padding: 0.8rem 0.9rem;
}
.werkzeugkachel::before { content: none; }
.werkzeugkachel .pfad-medaille { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
.werkzeugkachel h3 { margin: 0; font-size: 0.95rem; }
.werkzeugkachel p {
  margin: 0.1rem 0 0;
  font-size: 0.76rem;
  /* Die Beschreibungen sind ganze Sätze (dieselben Labels wie auf den
     Hub-Seiten) — in der kompakten Kachel auf zwei Zeilen kürzen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Verweis-Zeile: alles, was woanders hinführt ---------- */
a.karte-link.verweiszeile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  min-height: 0;
  padding: 0.7rem 0.9rem;
}
.verweiszeile::before { content: none; }
.verweiszeile h3 { margin: 0; font-size: 0.95rem; }
.verweiszeile > .fa-solid:first-child { color: var(--pf, var(--primaer)); }
.verweiszeile-pfeil { margin-left: auto; color: var(--pf, var(--primaer)); }

/* ---------- Raster ----------
   Bild-Kacheln stehen schon auf dem Handy zweispaltig (wie .instr-gitter) — eine
   Spalte machte die Startseite endlos und das Muster unsichtbar. */
.bild-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.4rem; }
.bild-gitter .voll-breit { grid-column: 1 / -1; }
/* Lernwege mobil einspaltig. Die vier Instrumente tragen je ein Wort und gehen
   als 2x2 glatt auf; die Lernwege heissen „Kontext & Community" oder
   „Individueller Weg" und brechen in einer halben Spalte auf drei Zeilen um.
   Ganze Breite gibt jedem Weg eine lesbare Zeile — und die Reihenfolge, in der
   sie gelesen werden sollen. Ab Tablet ist Platz fuer zwei Spalten. */
.lernwege-gitter { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .lernwege-gitter { grid-template-columns: 1fr 1fr; }
}
/* Werkzeuge: fest zwei Spalten. auto-fill erzeugte auf dem Desktop vier sehr
   schmale Kacheln (von der Beschreibung blieb „Audio-Werkzeuge,…"), drei Spalten
   ließen die vierte Kachel als Waise in einer eigenen Reihe stehen. Zwei Spalten
   gehen bei vier Werkzeugen glatt auf und lassen dem Text Platz. */
.werkzeug-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.verweis-liste { display: grid; gap: 0.45rem; margin-bottom: 0.4rem; }

@media (max-width: 30rem) {
  .bildkachel { min-height: 138px; padding: 0.75rem 0.8rem; }
  .bildkachel-titel { font-size: 1.12rem; }
  .bild-gitter { gap: 0.6rem; }
}

/* ---------- Footer: Haltungs-Zeile ----------
   Dieselben Statements wie auf der Über-Seite, hier auf jeder Seite sichtbar —
   die Aussage ist Teil der Marke, nicht eine Unterseite. Der GitHub-Verweis
   steht bewusst daneben: „Quelltext offen" ist eine Haltung, kein Feature.
   Die Texte setzt beschrifteRahmen() aus den Labels. */
.footer-haltung {
  /* Der Footer selbst erscheint erst ab Tablet (.seiten-footer) — die Zeile
     folgt demselben Breakpoint, sonst stünde sie mobil ohne Footer da. */
  display: none;
  max-width: 44rem;
  margin: 0.9rem auto 0;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  align-items: center;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--trennlinie);
  font-size: 0.8rem;
  color: var(--tinte-2);
}
.footer-haltung-eintrag { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-haltung-eintrag .fa-solid,
.footer-haltung-eintrag .fa-brands { color: var(--primaer); }
a.footer-quelltext { color: var(--tinte); text-decoration: none; }
a.footer-quelltext:hover, a.footer-quelltext:focus-visible { color: var(--primaer-tief); text-decoration: underline; }
@media (min-width: 768px) {
  .footer-haltung { display: flex; }
}

/* ---------- Baustein: Merken kompakt, Aktionen rechts ---------- */
/* „Merken" ist eine Nebenhandlung — sie stand als breiter Knopf links über dem
   Erklärteil und wog dort schwerer als das Lesen selbst. */
.baustein-aktionen { justify-content: flex-end; }
.knopf-klein { font-size: 0.78rem; padding: 0.35rem 0.6rem; letter-spacing: 0.02em; }

/* Stufen-Anker: die Könnensstufe als Link in den passenden Kompetenzpfad. */
a.stufen-anker { text-decoration: none; }
a.stufen-anker:hover, a.stufen-anker:focus-visible { border-color: var(--primaer); color: var(--primaer); }

/* ---------- Schwebende Seiten-Aktionen (Baustein) ----------
   Merken, Merkliste, Teilen bleiben beim Scrollen erreichbar. Merken will man
   oft erst, wenn man unten angekommen ist — dafür wieder hochzuscrollen ist die
   Art Reibung, die niemand auf sich nimmt.
   Mobil sitzt die untere Leiste im Weg, deshalb liegt die Spalte dort höher. */
.seiten-aktionen {
  position: fixed;
  right: 0.7rem;
  bottom: 5.2rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.seiten-aktion {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border: 1.5px solid var(--linie-stark, var(--linie));
  border-radius: 2px;
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schatten-plastisch);
  transition: border-color var(--uebergang), color var(--uebergang);
}
.seiten-aktion:hover, .seiten-aktion:focus-visible { border-color: var(--primaer); color: var(--primaer); }
.seiten-aktion .fa-solid { color: var(--primaer); }
.seiten-aktion.aktiv { border-color: var(--primaer); color: var(--primaer); }
/* Auf schmalen Schirmen nur die Symbole — die Spalte soll den Text nicht zudecken. */
@media (max-width: 30rem) {
  .seiten-aktion-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .seiten-aktion { padding: 0.55rem; }
}
@media (min-width: 768px) {
  .seiten-aktionen { bottom: 1.6rem; }
}
@media print {
  .seiten-aktionen { display: none; }
}

/* Nicht-gefunden-Karte: Überschrift bewusst klein — sie soll die Seite
   strukturieren, nicht den Fehlschlag zelebrieren. */
.nicht-gefunden-titel { font-size: 1.15rem; margin: 0.2rem 0 0.4rem; }

/* =========================================================================
   HELLES THEMA — weisses Blatt
   =========================================================================
   Das helle Thema ist kein aufgehelltes dunkles Thema, sondern ein eigener
   Zustand: reines Weiss als einzige Flaeche, keine Schatten, Fotos in
   Graustufen. Getragen wird die Struktur von der harten Tintenkante —
   Xerox-Flyer statt App-Karte.

   Scoping: Hell greift bei explizit gewaehltem `data-theme='hell'` UND bei
   'auto' (kein data-theme) auf einem hellen System. Beide Selektoren schliessen
   Dunkel aus, deshalb braucht es keine Ruecknahme fuer das dunkle Thema — das
   ist der Grund fuer die Doppelung des Token-Blocks (dieselbe Konvention wie
   beim dunklen Thema weiter oben).

   Der Block steht bewusst am Dateiende: Er muss die frueheren
   `:root`-Definitionen ueberschreiben (u. a. --bild-saettigung).

   Ausschliesslich Tokens — keine Komponentenregel. Wer hier etwas nicht
   abschalten kann, macht den betreffenden Wert oben zum Token, statt hier eine
   Regel mit beiden Hell-Selektoren nachzuziehen.
   ========================================================================= */

:root[data-theme='hell'] {
  /* Grundflaechen: reines Weiss, nichts dahinter. */
  --hintergrund: #ffffff;
  --hintergrund-2: #ffffff;
  --flaeche: #ffffff;
  --sheet-bg: #ffffff;
  --kopf-bg: rgba(255, 255, 255, 0.94);
  --backdrop-image: none;
  --hue-kachel-bg: #ffffff;
  --trainer-bg: #ffffff;

  /* Keine Schatten — alle Ebenen. Der zusammengesetzte Schatten wird zum
     Null-Schatten statt zu `none`, damit die Rahmenblitz-Animation ihre
     Schattenliste behaelt (`box-shadow: none, inset …` waere ungueltig). */
  --schatten-weich: none;
  --schatten-karte: none;
  --schatten-hover: none;
  --schatten-leiste: none;
  --schatten-schublade: none;
  --schatten-dialog: none;
  --schatten-ring: none;
  --filter-marke: none;
  --filter-medaille: none;
  --schatten-plastisch: 0 0 0 0 transparent;

  /* Was im Dunkeln der Versatz-Schatten leistet — Container voneinander
     trennen —, leistet hier die Tintenkante. Sie erscheint NUR an anklickbaren
     Elementen (Regel bei .karte/.marke-hero/…): Auf weissem Grund ist eine Kante
     die einzige Klick-Zusage, die noch bleibt — an einem Hero oder einem
     Erklaerabschnitt waere sie ein leeres Versprechen. 1px statt 2px: Ohne
     Schatten daneben traegt die duennere Linie genug und rahmt die Seite nicht
     ein. Trennlinien innerhalb der Container liegen deutlich leichter, sonst
     zerschneidet jede Listenzeile die Karte. */
  --karten-kante: var(--linie);
  --karten-kante-breite: 1px;
  --trennlinie: #dcdcdc;

  /* Rueckhalt hinter dem Hero-Text. Im Dunkeln nicht noetig: dort ist das Foto
     dunkel und der Text hell, der flaechige Scrim reicht. Hell braucht es ihn,
     weil die kleine Hue-Augenbraue ueber der Scrim-Kante im Graustufen-Foto
     sitzt und dort regelmaessig auf Mittelgrau trifft. */
  --hero-rueckhalt: linear-gradient(to top, #ffffff 82%, rgba(255, 255, 255, 0) 100%);

  /* Spur des Fortschrittsbalkens: --flaeche-2 (#f4f4f4) auf Weiss ist 1.06:1 —
     bei 0 % waere gar kein Balken zu sehen. */
  --balken-spur: #e3e3e3;

  /* Inhalts-Karten ausserhalb des .karte-Satzes: randlos wie alles Nicht-Klickbare. */
  --widget-kante: transparent;

  /* Hero-Fotos in Graustufen. */
  --bild-saettigung: 0;

  /* Tinte neutral statt warm: Ohne Creme-Papier wirkt ein braunstichiges Grau
     auf reinem Weiss schmutzig. */
  --tinte: #111111;
  --tinte-2: #4a4a4a;
  --tinte-3: #6a6a6a;
  --linie: #111111;
  --linie-stark: #111111;
  --ueberschrift: #111111;
  --overlay: rgba(17, 17, 17, 0.55);

  /* Die weichen Akzentfuellungen (Chips, Medaillen, Ampel-Zustaende) trugen
     denselben Creme-Stich. Sie bleiben — sie sind Zustandsanzeige, keine
     Flaeche —, hellen aber von Weiss aus auf statt von Knochenpapier. */
  --primaer-weich: #fdeceb;
  --signal-rot-weich: #fdeceb;
  --signal-gelb-weich: #fdf3d6;
  --signal-gruen-weich: #e8f4dc;

  /* Kompetenzstufen-Rampe: neutrale Graustufen (hell -> tief), bewusst ohne
     Ampelfarben — die bleiben dem Status vorbehalten. */
  --stufe-1-flaeche: #ededed; --stufe-1-text: #4a4a4a;
  --stufe-2-flaeche: #cfcfcf; --stufe-2-text: #2b2b2b;
  --stufe-3-flaeche: #3d3d3d; --stufe-3-text: #f5f5f5;

  /* Medaillen-Hues: gleiche Farbwerte, nur die weiche Fuellung von Weiss aus. */
  --pf-blau-weich: #fbe7e4;
  --pf-teal-weich: #ececef;
  --pf-violett-weich: #fbe8e1;
  --pf-indigo-weich: #fbf1d8;
  --pf-magenta-weich: #fdeceb;
  --pf-sky-weich: #eaf3dc;
  --pf-schiefer-weich: #ededef;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dunkel']) {
    /* Grundflaechen: reines Weiss, nichts dahinter. */
    --hintergrund: #ffffff;
    --hintergrund-2: #ffffff;
    --flaeche: #ffffff;
    --sheet-bg: #ffffff;
    --kopf-bg: rgba(255, 255, 255, 0.94);
    --backdrop-image: none;
    --hue-kachel-bg: #ffffff;
    --trainer-bg: #ffffff;

    /* Keine Schatten — alle Ebenen. Der zusammengesetzte Schatten wird zum
       Null-Schatten statt zu `none`, damit die Rahmenblitz-Animation ihre
       Schattenliste behaelt (`box-shadow: none, inset …` waere ungueltig). */
    --schatten-weich: none;
    --schatten-karte: none;
    --schatten-hover: none;
    --schatten-leiste: none;
    --schatten-schublade: none;
    --schatten-dialog: none;
    --schatten-ring: none;
    --filter-marke: none;
    --filter-medaille: none;
    --schatten-plastisch: 0 0 0 0 transparent;

    /* Was im Dunkeln der Versatz-Schatten leistet — Container voneinander
       trennen —, leistet hier die Tintenkante. Sie erscheint NUR an anklickbaren
       Elementen (Regel bei .karte/.marke-hero/…): Auf weissem Grund ist eine Kante
       die einzige Klick-Zusage, die noch bleibt — an einem Hero oder einem
       Erklaerabschnitt waere sie ein leeres Versprechen. 1px statt 2px: Ohne
       Schatten daneben traegt die duennere Linie genug und rahmt die Seite nicht
       ein. Trennlinien innerhalb der Container liegen deutlich leichter, sonst
       zerschneidet jede Listenzeile die Karte. */
    --karten-kante: var(--linie);
    --karten-kante-breite: 1px;
    --trennlinie: #dcdcdc;

    /* Rueckhalt hinter dem Hero-Text. Im Dunkeln nicht noetig: dort ist das Foto
       dunkel und der Text hell, der flaechige Scrim reicht. Hell braucht es ihn,
       weil die kleine Hue-Augenbraue ueber der Scrim-Kante im Graustufen-Foto
       sitzt und dort regelmaessig auf Mittelgrau trifft. */
    --hero-rueckhalt: linear-gradient(to top, #ffffff 82%, rgba(255, 255, 255, 0) 100%);

    /* Spur des Fortschrittsbalkens: --flaeche-2 (#f4f4f4) auf Weiss ist 1.06:1 —
       bei 0 % waere gar kein Balken zu sehen. */
    --balken-spur: #e3e3e3;

    /* Inhalts-Karten ausserhalb des .karte-Satzes: randlos wie alles Nicht-Klickbare. */
    --widget-kante: transparent;

    /* Hero-Fotos in Graustufen. */
    --bild-saettigung: 0;

    /* Tinte neutral statt warm: Ohne Creme-Papier wirkt ein braunstichiges Grau
       auf reinem Weiss schmutzig. */
    --tinte: #111111;
    --tinte-2: #4a4a4a;
    --tinte-3: #6a6a6a;
    --linie: #111111;
    --linie-stark: #111111;
    --ueberschrift: #111111;
    --overlay: rgba(17, 17, 17, 0.55);

    /* Die weichen Akzentfuellungen (Chips, Medaillen, Ampel-Zustaende) trugen
       denselben Creme-Stich. Sie bleiben — sie sind Zustandsanzeige, keine
       Flaeche —, hellen aber von Weiss aus auf statt von Knochenpapier. */
    --primaer-weich: #fdeceb;
    --signal-rot-weich: #fdeceb;
    --signal-gelb-weich: #fdf3d6;
    --signal-gruen-weich: #e8f4dc;

    /* Kompetenzstufen-Rampe: neutrale Graustufen (hell -> tief), bewusst ohne
       Ampelfarben — die bleiben dem Status vorbehalten. */
    --stufe-1-flaeche: #ededed; --stufe-1-text: #4a4a4a;
    --stufe-2-flaeche: #cfcfcf; --stufe-2-text: #2b2b2b;
    --stufe-3-flaeche: #3d3d3d; --stufe-3-text: #f5f5f5;

    /* Medaillen-Hues: gleiche Farbwerte, nur die weiche Fuellung von Weiss aus. */
    --pf-blau-weich: #fbe7e4;
    --pf-teal-weich: #ececef;
    --pf-violett-weich: #fbe8e1;
    --pf-indigo-weich: #fbf1d8;
    --pf-magenta-weich: #fdeceb;
    --pf-sky-weich: #eaf3dc;
    --pf-schiefer-weich: #ededef;
  }
}