/* =====================================================================
   Kurs-Themes für die Hypnobreath®-App (übernommen aus _konzepte/kurse-app/themes.css, 05.10.2026)
   Wird NACH app.css geladen (index.html, sw.js SHELL_FILES). Aktiv, sobald <body> oder eine
   Cover-Kachel data-theme-kurs="<theme>" trägt (app.js: applyTheme, coverHtml). Ohne Attribut
   ändert sich nichts, die Ausbildung hat kein Theme. Theme-Name = Feld "theme" in api/app-courses.json.

   Aufbau
   1. Gemeinsame Zusatz-Tokens (Defaults = Hauptmarke)
   2. Token-Overrides je Kurs
   3. Brücken: Stellen in app.css mit fest verdrahtetem Sand-RGBA
   4. Neue Bausteine: .kc-cover, .kc-session, .kc-streak, .kc-plan
   5. Kurs-spezifische Gestaltung der Bausteine

   Schriften lädt app.js (THEME_FONTS), sobald ein Theme gebraucht wird:
   Anton, Barlow Condensed, Barlow, Cormorant Garamond, Cinzel
   Nach Änderungen: _konzepte/kurse-app/baue-design-vorschau.py bettet die Konzept-Fassung ein,
   diese Datei hier ist die, die die App lädt.
   ===================================================================== */

/* ---------- 1. Zusatz-Tokens, Default = Hauptmarke ---------- */
:root {
  --acc-rgb: 233, 199, 154;          /* Akzent als RGB-Tripel für rgba() */
  --acc-2: #b79cff;                  /* Zweitakzent (Verläufe) */
  --acc-2-rgb: 183, 156, 255;
  --hl-case: none;                   /* text-transform der Headlines */
  --hl-track: -0.02em;               /* letter-spacing der Headlines */
  --hl-weight: 400;
  --r-card: 18px;                    /* Radius Karten */
  --r-btn: 999px;                    /* Radius Play-Button */
}
/* Abgeleitete Tokens. Stehen zusätzlich am Theme-Element, weil var() dort neu
   aufgelöst werden muss. Am :root allein würde der Sand der Hauptmarke vererbt. */
:root, [data-theme-kurs] {
  --num-font: var(--font-headline);  /* Schrift für Kennzahlen */
  --player-acc: var(--sand);         /* Play-Button */
  --player-ink: var(--sand-ink);
  --streak-on: var(--sand);
  --streak-off: rgba(var(--acc-rgb), 0.16);
}

/* ---------- 2. Token-Overrides je Kurs ---------- */

/* Inner Winner Zone: Athleten-Look. Schwarz, Weiß, ein Signal-Akzent. */
[data-theme-kurs="inner-winner"] {
  --bg: #0a0a0a;
  --bg-2: #151515;
  --deep: #000000;
  --violet: #1f1f1f;
  --card: #141414;
  --line: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: #9b9b9b;
  --sand: #d4ff3a;                   /* Signal: Volt */
  --sand-ink: #0a0a0a;
  --lilac: #ffffff;
  --ok: #d4ff3a;
  --acc-rgb: 212, 255, 58;
  --acc-2: #ffffff;
  --acc-2-rgb: 255, 255, 255;
  --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --serif: 'Anton', Impact, sans-serif;
  --num-font: 'Anton', Impact, sans-serif;
  --hl-case: uppercase;
  --hl-track: 0.01em;
  --r-card: 6px;
  --r-btn: 4px;
  --streak-off: #262626;
}

/* Chakrenreise: warm, ruhig, Leitfarbe wechselt mit dem Chakra der Woche. */
[data-theme-kurs="chakrenreise"] {
  --ch-1: #e8524a;  /* Wurzel. 1 und 6 etwas heller: als Schrift auf Nachtviolett und unter dunkler Schrift mind. 4,5:1 */
  --ch-2: #f08a3a;  /* Sakral */
  --ch-3: #f2c94c;  /* Solarplexus */
  --ch-4: #5dbb7a;  /* Herz */
  --ch-5: #4fa6dc;  /* Hals */
  --ch-6: #767ce2;  /* Stirn */
  --ch-7: #a86ddb;  /* Krone */
  --chakra: var(--ch-4);             /* aktuelle Woche, per data-chakra umgeschaltet */
  --bg: #1a1120;
  --bg-2: #24182b;
  --deep: #120b17;
  --violet: #2e1d36;
  --card: rgba(255, 236, 214, 0.05);
  --line: rgba(255, 236, 214, 0.12);
  --text: #f6ede2;
  --muted: #c4b3a8;
  --sand: var(--chakra);
  --sand-ink: #1a1120;
  --acc-2: #f2c94c;
  --font-headline: 'Manrope', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --hl-track: 0;
  --hl-weight: 500;
  --r-card: 20px;
  --streak-off: rgba(255, 236, 214, 0.1);
}
/* Chakra je Woche/Modul: data-chakra="1".."7" an Kursseite, Modul oder Session */
[data-theme-kurs="chakrenreise"] [data-chakra="1"], [data-theme-kurs="chakrenreise"][data-chakra="1"] { --chakra: var(--ch-1); --acc-rgb: 232, 82, 74; }
[data-theme-kurs="chakrenreise"] [data-chakra="2"], [data-theme-kurs="chakrenreise"][data-chakra="2"] { --chakra: var(--ch-2); --acc-rgb: 240, 138, 58; }
[data-theme-kurs="chakrenreise"] [data-chakra="3"], [data-theme-kurs="chakrenreise"][data-chakra="3"] { --chakra: var(--ch-3); --acc-rgb: 242, 201, 76; }
[data-theme-kurs="chakrenreise"] [data-chakra="4"], [data-theme-kurs="chakrenreise"][data-chakra="4"] { --chakra: var(--ch-4); --acc-rgb: 93, 187, 122; }
[data-theme-kurs="chakrenreise"] [data-chakra="5"], [data-theme-kurs="chakrenreise"][data-chakra="5"] { --chakra: var(--ch-5); --acc-rgb: 79, 166, 220; }
[data-theme-kurs="chakrenreise"] [data-chakra="6"], [data-theme-kurs="chakrenreise"][data-chakra="6"] { --chakra: var(--ch-6); --acc-rgb: 118, 124, 226; }
[data-theme-kurs="chakrenreise"] [data-chakra="7"], [data-theme-kurs="chakrenreise"][data-chakra="7"] { --chakra: var(--ch-7); --acc-rgb: 168, 109, 219; }
[data-theme-kurs="chakrenreise"] [data-chakra] { --sand: var(--chakra); --player-acc: var(--chakra); --streak-on: var(--chakra); }

/* Manifestation Mastery: Kosmos (v155), Nachtschwarz und Warmgold. --mm-* nur für den Kosmos-Look (Abschnitt 11). */
[data-theme-kurs="manifestation"] {
  --bg: #05040a;
  --bg-2: #0e0c14;
  --deep: #05040a;
  --violet: #1a1622;
  --card: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.08);
  --text: #f2ecdf;
  --muted: #8d8799;
  --sand: #e8c27a;
  --sand-ink: #05040a;
  --lilac: #cfc6b4;
  --ok: #f3dc9c;
  --acc-rgb: 232, 194, 122;
  --acc-2: #a77b34;
  --acc-2-rgb: 167, 123, 52;
  --font-headline: 'Manrope', system-ui, sans-serif;
  --serif: 'Cinzel', 'Times New Roman', serif;
  --hl-case: none;
  --hl-track: 0.04em;
  --hl-weight: 500;
  --r-card: 18px;
  --player-acc: linear-gradient(135deg, #fff1cf, #e8c27a 55%, #a77b34);
  --streak-off: rgba(255, 255, 255, 0.14);
  --streak-on: #e8c27a;
  --mm-bg: #05040a; --mm-text: #f2ecdf; --mm-text2: #cfc6b4; --mm-muted: #8d8799; --mm-gold: #e8c27a; --mm-gold-hi: #f3dc9c;
  --mm-gold-lo: #a77b34; --mm-cream: #fff1cf; --mm-glass: rgba(255, 255, 255, 0.06); --mm-glass-line: rgba(255, 255, 255, 0.08);
  --mm-orb-play: radial-gradient(circle at 40% 35%, #fff1cf, #e8c27a 55%, #a77b34);
}

/* Schlafkurs: Hauptmarke, eine Stufe dunkler und stiller. Mondlicht statt Sand. */
[data-theme-kurs="schlafkurs"] {
  --bg: #0f0c21;
  --bg-2: #171331;
  --deep: #0a0818;
  --sand: #e6d3b3;                   /* Sand, kühler, Mondlicht */
  --acc-rgb: 230, 211, 179;
  --acc-2: #8e9bd8;
  --acc-2-rgb: 142, 155, 216;
  --muted: #a9a2c0;
}

/* Essentials: die Hauptmarke pur. */
[data-theme-kurs="essentials"] {
  --acc-2: #b79cff;
}

/* Zwischendurch (v264): Hauptmarke mit kühlem Atemgrün als Zweitakzent. */
[data-theme-kurs="zwischendurch"] {
  --acc-2: #8fd3c7;
  --acc-2-rgb: 143, 211, 199;
}

/* Der direkte Weg „Der Steg“ (v271, wie die Verkaufsseite /der-direkte-weg seit 19.10.2026):
   Sonnenaufgang am Steg. Düne als Grund, Morgen-Orange als Akzent, Apricot als Zweitakzent,
   Barlow Condensed in Versalien für Überschriften und Zahlen. */
[data-theme-kurs="direkter-weg"] {
  --bg: #1C1714;
  --bg-2: #241D18;
  --deep: #15110F;
  --violet: #2A221C;
  --card: rgba(247, 221, 179, 0.05);
  --line: rgba(247, 221, 179, 0.13);
  --text: #F7EBD6;
  --muted: #CDBCA4;
  --sand: #EFA56C;                   /* Morgen-Orange, Knöpfe tragen Düne */
  --sand-ink: #1E1612;
  --lilac: #F4C590;
  --ok: #F4C590;
  --acc-rgb: 239, 165, 108;
  --acc-2: #F4C590;
  --acc-2-rgb: 244, 197, 144;
  --font-headline: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --serif: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --num-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --hl-case: uppercase;
  --hl-track: 0.01em;
  --hl-weight: 700;
  --r-card: 20px;
  --streak-off: rgba(247, 221, 179, 0.09);
  --streak-on: #EFA56C;
}
html:has(body[data-theme-kurs="direkter-weg"]) { background: #1C1714; }

/* Hypnobreath®-Host „Atelier“ (v187): das einzige helle Theme. Leinen, Waldgrün, Salbei, Fraunces und Figtree.
   Lila bleibt der Ausbildung. Seiten-Regeln für host-*-Seiten und die Brücken für fest verdrahtete
   Dunkel-Farben in app.css stehen in Abschnitt 12 (unten). Der Live-Modus bleibt dunkel (Waldgrün). */
[data-theme-kurs="host"] {
  --bg: #F3EFE8;
  --bg-2: #FBF9F5;
  --deep: #EAE4DA;
  --violet: #FBF9F5;
  --card: rgba(29, 35, 32, 0.035);
  --line: rgba(29, 35, 32, 0.12);
  --text: #1D2320;
  --muted: #4F554F;
  --sand: #26413A;                   /* Akzent Waldgrün, Knöpfe tragen Leinen */
  --sand-ink: #F3EFE8;
  --lilac: #26413A;
  --ok: #2F6B4F;
  --acc-rgb: 38, 65, 58;
  --acc-2: #9DB5A6;
  --acc-2-rgb: 157, 181, 166;
  --sage: #DCE5DE;
  --linen-ink: #F3EFE8;
  --forest: #1C2E28;
  --font-headline: 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --hl-weight: 400;
  --hl-track: -0.02em;
  --r-card: 24px;
  --bg-deep: #ECE6DC;
  --bg-raised: #FBF9F5;
  --lav: #4D6B5F;
  --shadow-card: 0 1px 2px rgba(29, 35, 32, 0.04), 0 24px 60px -30px rgba(29, 35, 32, 0.25);
  --shadow-sand: 0 12px 28px -12px rgba(38, 65, 58, 0.6);
  --streak-off: #E6E0D6;
  color-scheme: light;
}

/* Hintergrund auch am <html>, damit beim Überscrollen nichts Violettes durchblitzt */
html:has(body[data-theme-kurs="host"]) { background: #F3EFE8; }
html:has(body[data-theme-kurs="inner-winner"]) { background: #0a0a0a; }
html:has(body[data-theme-kurs="chakrenreise"]) { background: #1a1120; }
html:has(body[data-theme-kurs="manifestation"]) { background: #05040a; }
html:has(body[data-theme-kurs="schlafkurs"]) { background: #0f0c21; }

/* ---------- 3. Brücken zu app.css (fest verdrahtetes Sand-RGBA) ---------- */
[data-theme-kurs] .hello h1,
[data-theme-kurs] .course-head h1,
[data-theme-kurs] .lesson-title,
[data-theme-kurs] .next-title,
[data-theme-kurs] .module-title,
[data-theme-kurs] .stage-title,
[data-theme-kurs] .cel-card h2,
[data-theme-kurs] .kc-done h2 { text-transform: var(--hl-case); letter-spacing: var(--hl-track); }
[data-theme-kurs] .hello h1,
[data-theme-kurs] .course-head h1,
[data-theme-kurs] .lesson-title { font-weight: var(--hl-weight); }

[data-theme-kurs] .glow { background: radial-gradient(circle 280px at calc(100% - 60px) 90px, rgba(var(--acc-2-rgb), 0.18), rgba(var(--acc-rgb), 0.06) 60%, transparent); }
[data-theme-kurs] .next-card {
  background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.2), rgba(var(--acc-2-rgb), 0.12));
  border-color: rgba(var(--acc-rgb), 0.35); border-radius: var(--r-card);
}
[data-theme-kurs] .stats { background: rgba(var(--acc-rgb), 0.04); border-radius: var(--r-card); }
[data-theme-kurs] .stat-ico { background: rgba(var(--acc-rgb), 0.12); }
[data-theme-kurs] .stat-txt b { font-family: var(--num-font); }
[data-theme-kurs] .week-bars i { background: var(--streak-off); }
[data-theme-kurs] .week-bars i.is-on { background: var(--streak-on); }
[data-theme-kurs] .stage.is-current .stage-dot { box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.15); }
[data-theme-kurs] .item, [data-theme-kurs] .tile, [data-theme-kurs] .c-card { border-radius: calc(var(--r-card) - 4px); }
/* Lektionsseiten und Kursübersicht der Sessions-Kurse (app.css: .ss-*, .sl-*) */
[data-theme-kurs] .ss-card, [data-theme-kurs] .sl-hero { border-radius: var(--r-card); }
[data-theme-kurs] .ss-tile, [data-theme-kurs] .ss-var, [data-theme-kurs] .sl-mini { border-radius: calc(var(--r-card) - 6px); }
[data-theme-kurs] .ss-card-title, [data-theme-kurs] .ss-tile-title, [data-theme-kurs] .sl-nav b { text-transform: var(--hl-case); letter-spacing: var(--hl-track); }
[data-theme-kurs] .ss-tile-kick, [data-theme-kurs] .sl-tab.is-on { color: var(--sand); }
[data-theme-kurs] .sl-tab.is-on { border-bottom-color: var(--sand); }
[data-theme-kurs] .sl-tabs { background: var(--bg); }
@media (max-width: 1023px) { [data-theme-kurs] .sl-hero { border-radius: 0; } }
[data-theme-kurs] .file-ico, [data-theme-kurs] .b-num { background: rgba(var(--acc-rgb), 0.12); }
[data-theme-kurs] .badge.is-on { border-color: rgba(var(--acc-rgb), 0.4); }
[data-theme-kurs] .cel-icon { box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0.14); }
/* .ctl.play trägt sein Play-/Pause-Symbol als background-image (app.css): nur die Farbe tauschen,
   sonst verschwindet das Symbol. Verläufe (--player-acc) gehen deshalb nur an .next-play. */
[data-theme-kurs] .ctl.play { background-color: var(--sand); border-radius: var(--r-btn); }
[data-theme-kurs] .next-play { background: var(--player-acc); border-radius: var(--r-btn); color: var(--player-ink); }
[data-theme-kurs] .seek { accent-color: var(--sand); }

/* ---------- 4. Neue Bausteine ---------- */

/* 4a Cover-Kachel. Markup:
   <a class="kc-cover"><span class="kc-art" aria-hidden="true"></span>
     <span class="kc-kicker">7 Wochen</span><span class="kc-title">Chakrenreise</span>
     <span class="kc-meta">21 Sessions</span></a>
   Die Gestaltung kommt komplett aus CSS, die Thumbnails tragen eingebrannte Schrift.
   Das Motiv hängt am eigenen Attribut data-art="<theme>" (app.js setzt es überall, wo .kc-art entsteht),
   nicht am Theme eines Vorfahren: sonst gewinnt im Kurs-Umschalter oder im Player bei zwei Themes übereinander
   die Regel, die zufällig weiter unten steht. Die Farben (--sand, --ch-1 …) erbt das Motiv vom nächsten Theme. */
.kc-cover {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: 16px; border-radius: var(--r-card); color: var(--text); text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--line); container-type: inline-size;
}
.kc-cover--wide { aspect-ratio: 16 / 10; }
.kc-art { position: absolute; inset: 0; z-index: -1; }
.kc-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); font-weight: 500; }
.kc-title { font-family: var(--serif); font-size: 30px; line-height: 1; margin-top: 6px; text-transform: var(--hl-case); letter-spacing: var(--hl-track); font-weight: var(--hl-weight); }
.kc-meta { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* 4b Session-Karte. Markup:
   <article class="kc-session" data-chakra="4">
     <span class="kc-s-num">04</span>
     <span class="kc-s-body"><span class="kc-s-kicker">…</span><span class="kc-s-title">…</span><span class="kc-s-meta">…</span></span>
     <button class="kc-s-play" aria-label="Abspielen"></button>
     <span class="kc-s-bar"><i style="width:40%"></i></span></article> */
.kc-session {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; gap: 14px; align-items: center;
  padding: 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line);
}
.kc-s-num { width: 52px; height: 52px; border-radius: calc(var(--r-card) - 6px); display: grid; place-items: center;
  font-family: var(--num-font); font-weight: 800; font-size: 20px; color: var(--sand); background: rgba(var(--acc-rgb), 0.1); }
.kc-s-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-s-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); }
.kc-s-title { font-family: var(--font-headline); font-weight: 700; font-size: 16px; line-height: 1.25; text-transform: var(--hl-case); letter-spacing: var(--hl-track); }
.kc-s-meta { font-size: 13px; color: var(--muted); }
.kc-s-play { width: 48px; height: 48px; border-radius: var(--r-btn); background: var(--player-acc); color: var(--player-ink); display: grid; place-items: center; }
.kc-s-play svg { width: 18px; height: 18px; margin-left: 2px; }
.kc-s-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--streak-off); overflow: hidden; }
.kc-s-bar i { display: block; height: 100%; background: var(--sand); border-radius: inherit; }

/* 4c Streak-Widget. Markup:
   <section class="kc-streak"><div class="kc-st-head"><b class="kc-st-num">5</b><span class="kc-st-label">Tage am Stück</span></div>
     <ol class="kc-days"><li class="is-on"><i></i><span>Mo</span></li>…<li class="is-today">…</li></ol>
     <p class="kc-st-note">…</p></section>  (7 <li>, ältester Tag links) */
.kc-streak { padding: 16px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.kc-st-head { display: flex; align-items: baseline; gap: 10px; }
/* lining-nums: Cormorant hat Mediävalziffern, dort liest sich die 1 als I und die 0 als o */
.kc-st-num { font-family: var(--num-font); font-size: 64px; line-height: 0.95; color: var(--sand); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; }
.kc-st-label { font-size: 14px; color: var(--text); }
.kc-days { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kc-days li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.kc-days i { display: block; width: 100%; height: 28px; border-radius: 8px; background: var(--streak-off); }
.kc-days li.is-on i { background: var(--streak-on); }
.kc-days li.is-today i { outline: 2px solid var(--sand); outline-offset: 2px; }
.kc-days li.is-today span { color: var(--text); font-weight: 600; }
/* Zusammenhängende Tage verschmelzen zu einer Pille (Duolingo). Nur bei Blöcken (app.js: .is-join),
   die Formen der anderen Kurse (Kreise, Sterne, Monde, Stufen) bleiben einzeln. */
.kc-days.is-join li.join-l i { margin-left: -6px; width: calc(100% + 6px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.kc-days.is-join li.is-on:has(+ li.join-l) i { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kc-st-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* 4d Fortschritt als Plan (Wochen x Sessions). Markup:
   <div class="kc-plan"><div class="kc-plan-row"><span>W1</span><i class="is-on"></i>…</div>…</div> */
.kc-plan { display: grid; gap: 6px; }
.kc-plan-row { display: grid; grid-template-columns: 34px repeat(var(--cols, 5), 1fr); gap: 4px; align-items: center; }
.kc-plan-row span { font-family: var(--num-font); font-size: 13px; color: var(--muted); }
.kc-plan-row i { height: 14px; border-radius: 3px; background: var(--streak-off); }
.kc-plan-row i.is-on { background: var(--sand); }
.kc-plan-row i.is-now { background: transparent; outline: 2px solid var(--sand); outline-offset: -2px; }

/* ---------- 5. Kurs-spezifische Gestaltung ---------- */

/* ===== Inner Winner Zone ===== */
:is([data-theme-kurs="inner-winner"] .kc-cover, .kc-cover[data-theme-kurs="inner-winner"]) { background: #000; border-color: #222; }
.kc-art[data-art="inner-winner"] {
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9)),
    linear-gradient(102deg, transparent 0 58%, var(--sand) 58% 61%, transparent 61% 64%, rgba(212,255,58,0.35) 64% 65%, transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 22px),
    #000;
}
.kc-art[data-art="inner-winner"]::after {
  content: 'ZONE'; position: absolute; right: -8px; top: 6px; font-family: 'Anton', sans-serif; font-size: 120px; line-height: 0.85;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.18); letter-spacing: -0.01em;
}
[data-theme-kurs="inner-winner"] .kc-kicker { color: var(--sand); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; }
[data-theme-kurs="inner-winner"] .kc-title { font-size: 40px; line-height: 0.92; }
[data-theme-kurs="inner-winner"] .kc-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }

[data-theme-kurs="inner-winner"] .kc-session { grid-template-columns: 58px minmax(0, 1fr) 48px; background: #111; border-color: #222; }
[data-theme-kurs="inner-winner"] .kc-s-num { background: none; width: auto; height: auto; font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: 0.9; color: #fff; justify-items: start; }
[data-theme-kurs="inner-winner"] .kc-s-kicker { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; }
[data-theme-kurs="inner-winner"] .kc-s-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; line-height: 1; }
[data-theme-kurs="inner-winner"] .kc-s-meta { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #bdbdbd; }
[data-theme-kurs="inner-winner"] .kc-s-bar { height: 6px; border-radius: 0; background: repeating-linear-gradient(90deg, #2a2a2a 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
[data-theme-kurs="inner-winner"] .kc-s-bar i { border-radius: 0; }

[data-theme-kurs="inner-winner"] .kc-streak { background: #111; border-color: #222; }
[data-theme-kurs="inner-winner"] .kc-st-num { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 96px; line-height: 0.85; color: #fff; }
[data-theme-kurs="inner-winner"] .kc-st-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); }
[data-theme-kurs="inner-winner"] .kc-days i { height: 44px; border-radius: 2px; }
[data-theme-kurs="inner-winner"] .kc-days li { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
[data-theme-kurs="inner-winner"] .kc-days li.is-today i { outline-color: #fff; }
/* Volt nur für heute, erledigte Tage in Weiß (WHOOP, mobbin-referenzen.md 8.6) */
[data-theme-kurs="inner-winner"] .kc-days li.is-on i { background: #fff; }
[data-theme-kurs="inner-winner"] .kc-days li.is-on.is-today i { background: var(--sand); }
[data-theme-kurs="inner-winner"] .kc-done .kc-st-num { font-size: 128px; }
[data-theme-kurs="inner-winner"] .ms-track li.is-on i { background: #fff; border-color: #fff; }
[data-theme-kurs="inner-winner"] .hm-grid i { border-radius: 1px; background: rgba(255,255,255,0.06); }
[data-theme-kurs="inner-winner"] .hm-grid i.l1, [data-theme-kurs="inner-winner"] .hm-legend i.l1 { background: rgba(255,255,255,0.38); }
[data-theme-kurs="inner-winner"] .hm-grid i.l2, [data-theme-kurs="inner-winner"] .hm-legend i.l2 { background: rgba(255,255,255,0.55); }
[data-theme-kurs="inner-winner"] .hm-grid i.l3, [data-theme-kurs="inner-winner"] .hm-legend i.l3 { background: #fff; }
[data-theme-kurs="inner-winner"] .hm-grid i.is-today { outline-color: var(--sand); }
[data-theme-kurs="inner-winner"] .st-stats dd { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 24px; }

/* ===== Chakrenreise ===== */
:is([data-theme-kurs="chakrenreise"] .kc-cover, .kc-cover[data-theme-kurs="chakrenreise"]) { border-color: rgba(255,236,214,0.12); }
.kc-art[data-art="chakrenreise"] {
  background:
    radial-gradient(circle at 50% 24%, rgba(168,109,219,0.35), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(226,72,61,0.3), transparent 38%),
    linear-gradient(180deg, #24152e, #1a1120 60%, #140c18);
}
/* Sieben Punkte als Säule, Krone oben, Wurzel unten */
.kc-art[data-art="chakrenreise"]::before {
  content: ''; position: absolute; left: 50%; top: 10%; height: 56%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--ch-7), var(--ch-6), var(--ch-5), var(--ch-4), var(--ch-3), var(--ch-2), var(--ch-1)); opacity: 0.55;
}
.kc-art[data-art="chakrenreise"]::after {
  content: ''; position: absolute; left: 50%; top: 10%; width: 14px; height: 56%; margin-left: -7px;
  background:
    radial-gradient(circle 6px at 50% 6px, var(--ch-7) 92%, transparent),
    radial-gradient(circle 6px at 50% calc(6px + (100% - 12px) / 6), var(--ch-6) 92%, transparent),
    radial-gradient(circle 6px at 50% calc(6px + (100% - 12px) / 3), var(--ch-5) 92%, transparent),
    radial-gradient(circle 6px at 50% 50%, var(--ch-4) 92%, transparent),
    radial-gradient(circle 6px at 50% calc(100% - 6px - (100% - 12px) / 3), var(--ch-3) 92%, transparent),
    radial-gradient(circle 6px at 50% calc(100% - 6px - (100% - 12px) / 6), var(--ch-2) 92%, transparent),
    radial-gradient(circle 6px at 50% calc(100% - 6px), var(--ch-1) 92%, transparent);
  filter: drop-shadow(0 0 6px rgba(255,236,214,0.45));
}
[data-theme-kurs="chakrenreise"] .kc-title { font-style: italic; font-size: 36px; }
[data-theme-kurs="chakrenreise"] .kc-kicker { color: #f2c94c; }

[data-theme-kurs="chakrenreise"] .kc-session { border-left: 3px solid var(--chakra); }
[data-theme-kurs="chakrenreise"] .kc-s-num {
  border-radius: 50%; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; color: #1a1120;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--chakra);
  box-shadow: 0 0 18px rgba(var(--acc-rgb), 0.45);
}
[data-theme-kurs="chakrenreise"] .kc-s-kicker { color: var(--chakra); }
[data-theme-kurs="chakrenreise"] .kc-s-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 21px; }
[data-theme-kurs="chakrenreise"] .kc-s-play { border-radius: 50%; }

/* Streak: jeder Tag leuchtet in der nächsten Chakrafarbe, von der Wurzel zur Krone */
[data-theme-kurs="chakrenreise"] .kc-st-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 64px; color: var(--text); }
[data-theme-kurs="chakrenreise"] .kc-days i { width: 30px; height: 30px; border-radius: 50%; }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(1).is-on i { background: var(--ch-1); box-shadow: 0 0 12px var(--ch-1); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(2).is-on i { background: var(--ch-2); box-shadow: 0 0 12px var(--ch-2); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(3).is-on i { background: var(--ch-3); box-shadow: 0 0 12px var(--ch-3); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(4).is-on i { background: var(--ch-4); box-shadow: 0 0 12px var(--ch-4); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(5).is-on i { background: var(--ch-5); box-shadow: 0 0 12px var(--ch-5); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(6).is-on i { background: var(--ch-6); box-shadow: 0 0 12px var(--ch-6); }
[data-theme-kurs="chakrenreise"] .kc-days li:nth-child(7).is-on i { background: var(--ch-7); box-shadow: 0 0 12px var(--ch-7); }
[data-theme-kurs="chakrenreise"] .kc-days li.is-today i { outline-color: var(--text); }

/* ===== Manifestation Mastery ===== */
:is([data-theme-kurs="manifestation"] .kc-cover, .kc-cover[data-theme-kurs="manifestation"]) { border-color: rgba(232,194,122,0.3); }
.kc-art[data-art="manifestation"] {
  background:
    radial-gradient(circle at 50% 36%, #fff 0 2px, rgba(255,236,190,0.95) 4px, rgba(232,194,122,0.55) 14px, rgba(167,123,52,0.25) 40%, transparent 62%),
    radial-gradient(1px 1px at 12% 18%, #fff 99%, transparent), radial-gradient(1px 1px at 82% 12%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 70% 64%, #fff 99%, transparent), radial-gradient(1px 1px at 22% 58%, #fffc 99%, transparent),
    radial-gradient(1px 1px at 90% 44%, #fffa 99%, transparent), radial-gradient(1.5px 1.5px at 38% 8%, #fff 99%, transparent),
    radial-gradient(1px 1px at 8% 82%, #fff9 99%, transparent), radial-gradient(1px 1px at 60% 22%, #fffb 99%, transparent),
    radial-gradient(ellipse at 50% 120%, #1a1622, #05040a 70%);
}
/* Big Bang: Strahlen aus dem Zentrum */
.kc-art[data-art="manifestation"]::after {
  content: ''; position: absolute; left: 50%; top: 36%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(243,220,156,0.22) 0 1.2deg, transparent 1.2deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 32%); mask: radial-gradient(circle, #000 4%, transparent 32%);
}
[data-theme-kurs="manifestation"] .kc-title { font-size: min(28px, 8.4cqi); line-height: 1.1; background: linear-gradient(180deg, #fff1cf, #e8c27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme-kurs="manifestation"] .kc-kicker { color: #cfc6b4; }

[data-theme-kurs="manifestation"] .kc-session { background: linear-gradient(135deg, rgba(26,22,34,0.6), rgba(232,194,122,0.05)); }
[data-theme-kurs="manifestation"] .kc-s-num {
  border-radius: 50%; color: var(--sand-ink); font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px;
  background: radial-gradient(circle at 50% 50%, #fff6d8, #e8c27a 55%, #a77b34);
  box-shadow: 0 0 0 4px rgba(232,194,122,0.12), 0 0 22px rgba(232,194,122,0.35);
}
[data-theme-kurs="manifestation"] .kc-s-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; }
[data-theme-kurs="manifestation"] .kc-s-play { border-radius: 50%; }
[data-theme-kurs="manifestation"] .kc-s-bar i { background: linear-gradient(90deg, #a77b34, #f3dc9c); }

/* Streak als Sternbild: Punkte auf unterschiedlicher Höhe, Linie als SVG im Markup (.kc-constellation) */
[data-theme-kurs="manifestation"] .kc-streak { background: radial-gradient(ellipse at 50% 0%, rgba(26,22,34,0.6), transparent 70%), var(--card); }
[data-theme-kurs="manifestation"] .kc-st-num { font-family: 'Cinzel', serif; font-weight: 700; font-size: 60px; background: linear-gradient(180deg, #fff1cf, #e8c27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme-kurs="manifestation"] .kc-days { position: relative; height: 78px; align-items: start; }
[data-theme-kurs="manifestation"] .kc-days i { width: 10px; height: 10px; border-radius: 50%; background: var(--streak-off); }
[data-theme-kurs="manifestation"] .kc-days li.is-on i { background: #fff3cf; box-shadow: 0 0 0 3px rgba(232,194,122,0.25), 0 0 14px #e8c27a; }
[data-theme-kurs="manifestation"] .kc-days li.is-today i { outline: 1px solid var(--sand); outline-offset: 4px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(1) { margin-top: 30px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(2) { margin-top: 10px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(3) { margin-top: 24px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(4) { margin-top: 2px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(5) { margin-top: 18px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(6) { margin-top: 6px; }
[data-theme-kurs="manifestation"] .kc-days li:nth-of-type(7) { margin-top: 28px; }
.kc-constellation { position: absolute; left: 0; top: 0; width: 100%; height: 50px; pointer-events: none; overflow: visible; }
.kc-constellation polyline { fill: none; stroke: rgba(232,194,122,0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ===== Schlafkurs ===== */
.kc-art[data-art="schlafkurs"] {
  background:
    radial-gradient(1px 1px at 18% 20%, #fff9 99%, transparent), radial-gradient(1px 1px at 76% 30%, #fff8 99%, transparent),
    radial-gradient(1px 1px at 40% 12%, #fff7 99%, transparent), radial-gradient(1px 1px at 88% 58%, #fff6 99%, transparent),
    linear-gradient(180deg, #1a1538 0%, #0f0c21 70%, #0a0818);
}
/* Mondsichel */
.kc-art[data-art="schlafkurs"]::after {
  content: ''; position: absolute; right: 20%; top: 14%; width: 56px; height: 56px; border-radius: 50%;
  box-shadow: inset -12px 6px 0 0 #e6d3b3; filter: drop-shadow(0 0 14px rgba(230,211,179,0.4)); transform: rotate(-12deg);
}
[data-theme-kurs="schlafkurs"] .kc-title { font-size: 38px; }
[data-theme-kurs="schlafkurs"] .kc-s-num { border-radius: 50%; font-family: var(--serif); font-weight: 400; font-size: 24px; }
/* Streak als Mondphasen: jede Nacht füllt den Mond ein Stück mehr */
[data-theme-kurs="schlafkurs"] .kc-days i { width: 30px; height: 30px; border-radius: 50%; background: rgba(230,211,179,0.1); }
[data-theme-kurs="schlafkurs"] .kc-days li.is-on i { background: rgba(230,211,179,0.12); box-shadow: inset -9px 0 0 0 #e6d3b3; }
[data-theme-kurs="schlafkurs"] .kc-days li.is-on:nth-child(n+3) i { box-shadow: inset -15px 0 0 0 #e6d3b3; }
[data-theme-kurs="schlafkurs"] .kc-days li.is-on:nth-child(n+5) i { box-shadow: inset -30px 0 0 0 #e6d3b3; filter: drop-shadow(0 0 6px rgba(230,211,179,0.5)); }
[data-theme-kurs="schlafkurs"] .kc-st-num { font-family: var(--serif); font-weight: 400; font-size: 64px; }

/* ===== Essentials ===== */
.kc-art[data-art="essentials"] {
  background: radial-gradient(circle at 50% 36%, rgba(183,156,255,0.28), transparent 50%), linear-gradient(180deg, #1d1738, #14102a);
}
/* Ring in Sand, offen wie der Ouroboros */
.kc-art[data-art="essentials"]::after {
  content: ''; position: absolute; left: 50%; top: 32%; height: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 18deg, #E9C79A 18deg 342deg, transparent 342deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%); mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%);
}
[data-theme-kurs="essentials"] .kc-title { font-size: 36px; }

/* ===== Zwischendurch ===== */
.kc-art[data-art="zwischendurch"] {
  background: radial-gradient(circle at 50% 36%, rgba(143,211,199,0.22), transparent 52%), linear-gradient(180deg, #17203a, #14102a);
}
/* Atem-Quadrat aus dem Box-Breathing, ein Lichtpunkt sitzt auf der Ecke */
.kc-art[data-art="zwischendurch"]::before {
  content: ''; position: absolute; left: 50%; top: 34%; height: 34%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 2px solid #E9C79A; border-radius: 22%; opacity: 0.9;
}
.kc-art[data-art="zwischendurch"]::after {
  content: ''; position: absolute; left: 50%; top: 34%; height: 7%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(calc(-50% - 230%), calc(-50% - 230%)); background: #8fd3c7; box-shadow: 0 0 14px 4px rgba(143,211,199,0.55);
}
[data-theme-kurs="zwischendurch"] .kc-title { font-size: 34px; }

/* ===== Hypnobreath®-Host (Atelier, v187) ===== */
.kc-art[data-art="host"] { background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(157,181,166,0.45), transparent 70%), linear-gradient(180deg, #F3EFE8 0%, #E6E0D6 100%); }
/* Bogenfenster in Waldgrün wie im Kuppelraum, darin der offene Ring aus dem Logo */
.kc-art[data-art="host"]::before {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 46%; height: 74%; transform: translateX(-50%);
  border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #26413A, #1C2E28);
}
.kc-art[data-art="host"]::after {
  content: ''; position: absolute; left: 50%; top: 56%; height: 28%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 18deg, #F3EFE8 18deg 342deg, transparent 342deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%); mask: radial-gradient(circle, transparent 62%, #000 63% 70%, transparent 71%);
}

/* ===== Der direkte Weg „Der Steg“ (v271) =====
   Motiv wie der Hero der Verkaufsseite: Himmel in harten Streifen, Sonne halb über dem Horizont, Meer,
   Dünen links und rechts (::before) und der Steg mit Planken auf den Fluchtpunkt zu (::after).
   Horizont bei 62 %. Die Sonne misst 15 % der Breite des nächsten Containers (.kc-cover, Daumen im Umschalter, Szene
   auf dem Start). Breite flache Flächen setzen --dw-sun selbst, sonst wird sie zu groß. */
.kc-art[data-art="direkter-weg"] {
  background:
    linear-gradient(180deg, transparent 62%, #23414A 62%),
    radial-gradient(circle var(--dw-sun, 15cqw) at 50% 62%, #FFF4DE 98%, transparent 100%),
    linear-gradient(180deg, #F7DDB3 0 25%, #F4C590 25% 39%, #EFA56C 39% 51%, #E8854F 51% 62%, #23414A 62%);
}
.kc-thumb:has(> .kc-art[data-art="direkter-weg"]), .nc-art:has(> .kc-art[data-art="direkter-weg"]) { container-type: size; }
.kc-art[data-art="direkter-weg"]::before {
  content: ''; position: absolute; inset: 0; background: #1C1714;
  clip-path: polygon(0 57%, 22% 59%, 40% 62.5%, 47% 68%, 53% 68%, 60% 62.5%, 78% 59%, 100% 57.5%, 100% 100%, 0 100%);
}
.kc-art[data-art="direkter-weg"]::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, #A06C45 0 9px, #5E3C28 9px 11px);
  clip-path: polygon(49.4% 62%, 50.6% 62%, 82% 100%, 18% 100%);
}
/* Schrift auf dem Motiv: unten liegt die Düne, dort steht sie hell. Ein dunkler Boden unter der Schrift. */
:is([data-theme-kurs="direkter-weg"] .kc-cover, .kc-cover[data-theme-kurs="direkter-weg"]) { background: #1C1714; border-color: rgba(247, 221, 179, 0.16); }
:is([data-theme-kurs="direkter-weg"] .kc-cover, .kc-cover[data-theme-kurs="direkter-weg"])::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1;
  background: linear-gradient(180deg, rgba(28, 23, 20, 0), rgba(28, 23, 20, 0.92) 55%);
}
[data-theme-kurs="direkter-weg"] .kc-title { font-size: 34px; font-weight: 700; line-height: 0.95; }
[data-theme-kurs="direkter-weg"] .kc-kicker { color: #F4C590; font-weight: 600; }
/* Streak als Stufen: jeder Tag eine Planke höher */
[data-theme-kurs="direkter-weg"] .kc-days { align-items: end; }
[data-theme-kurs="direkter-weg"] .kc-days i { border-radius: 3px; }
[data-theme-kurs="direkter-weg"] .kc-days li.is-on i { background: repeating-linear-gradient(180deg, #EFA56C 0 7px, #C9824C 7px 9px); }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(1) i { height: 10px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(2) i { height: 16px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(3) i { height: 22px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(4) i { height: 28px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(5) i { height: 34px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(6) i { height: 40px; }
[data-theme-kurs="direkter-weg"] .kc-days li:nth-child(7) i { height: 46px; }
[data-theme-kurs="direkter-weg"] .kc-st-num { font-family: var(--num-font); font-weight: 700; font-size: 72px; }
/* Eigener Start (v272, app.js dwHeroHtml): Steg-Szene mit Begrüßung im Himmel, darunter Zeile und Wegmarken */
.dws-hero { margin: 4px 0 26px; }
.dws-scene { position: relative; isolation: isolate; overflow: hidden; height: 250px; border-radius: var(--r-card); container-type: size; }
.dws-scene .kc-art { --dw-sun: min(15cqw, 24cqh); }
.dws-hello { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 0; }
.dws-date { font: 600 12px/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #7A2E10; }
.dws-hello h1 { margin: 0; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 46px; line-height: 0.92; color: #1E1612; }
.dws-under { display: flex; flex-direction: column; gap: 14px; padding: 18px 2px 0; }
.dws-line { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.dws-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 6px; }
.dws-step button { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0 0;
  background: none; border: 0; color: var(--muted); font: 600 12px/1 var(--font-body); cursor: pointer; }
.dws-step i { display: block; width: 100%; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #EFA56C var(--p), rgba(247, 221, 179, 0.1) var(--p)); }
.dws-step.is-done span { color: #F4C590; }
.dws-step.is-now i { outline: 2px solid #EFA56C; outline-offset: 2px; }
.dws-step.is-now span { color: var(--text); }
@media (min-width: 1024px) {
  .dws-scene { height: 320px; }
  .dws-hello { padding: 30px 34px 0; }
  .dws-hello h1 { font-size: 68px; }
  .dws-under { padding: 20px 4px 0; }
}
/* Reiter Meditationen (v273, app.js dwMedHtml): flache Steg-Szene als Kopf, je Woche eine Planke mit Zeilen */
.dwmed { padding-bottom: 24px; }
.dwmed-top { margin: 4px 0 22px; }
.dwmed-top .dws-line { margin: 16px 2px 0; color: var(--muted); }
.dws-scene.dwmed-scene { height: 190px; }
.dwmed-scene .dws-hello h1 { font-size: 42px; }
.dwmed-wk { margin-top: 18px; border-top: 5px solid #5E3C28; }
.dwmed-wk h2 { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 16px 0 8px; font-family: var(--font-headline);
  font-weight: 700; font-size: 22px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); }
.dwmed-wk h2 span { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: #EFA56C; white-space: nowrap; }
.dwmed-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 12px; align-items: center; min-height: 64px;
  padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.dwmed-row:last-child { border-bottom: 0; }
.dwmed-n { font-family: var(--font-headline); font-weight: 700; font-size: 26px; line-height: 1; color: #4A3A30; }
.dwmed-row.is-heard .dwmed-n { color: #F4C590; }
.dwmed-b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dwmed-b b { font-family: var(--font-headline); font-weight: 700; font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); }
.dwmed-b small { font-size: 13px; color: var(--muted); }
.dwmed-play { width: 44px; height: 44px; justify-self: end; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: #EFA56C; color: #1E1612; }
.dwmed-play svg { width: 16px; height: 16px; margin-left: 2px; }
.dwmed-row:hover .dwmed-b b { color: #F4C590; }
@media (min-width: 1024px) {
  .dws-scene.dwmed-scene { height: 230px; }
  .dwmed-scene .dws-hello h1 { font-size: 60px; }
  .dwmed-wk { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 28px; }
  .dwmed-wk h2 { flex-direction: column; gap: 6px; padding-top: 18px; }
  .dwmed-list { padding-top: 6px; }
}
/* Wochen als Planken (v272, app.js sessionModulesHtml): große Nummer, Fortschritt als Linie, dicke Bohle als Trenner */
[data-theme-kurs="direkter-weg"] .module.dwm { border-top: 5px solid #5E3C28; }
[data-theme-kurs="direkter-weg"] .module.dwm:last-of-type { border-bottom: 5px solid #5E3C28; }
[data-theme-kurs="direkter-weg"] .module.dwm > summary { position: relative; gap: 14px; padding-top: 18px; padding-bottom: 22px; }
[data-theme-kurs="direkter-weg"] .module.dwm.is-now > summary { background: linear-gradient(90deg, rgba(239, 165, 108, 0.1), transparent 70%); }
.dwm-n { flex: 0 0 52px; font-family: var(--font-headline); font-weight: 700; font-size: 40px; line-height: 0.9; color: #4A3A30; text-align: left; }
.dwm-n.is-now { color: #EFA56C; }
.dwm.is-done .dwm-n { color: #F4C590; }
[data-theme-kurs="direkter-weg"] .dwm .module-title { font-size: 21px; line-height: 1.05; }
.dwm-bar { position: absolute; left: 66px; right: 30px; bottom: 9px; height: 3px; border-radius: 3px; background: rgba(247, 221, 179, 0.1); overflow: hidden; }
.dwm-bar b { display: block; height: 100%; background: #EFA56C; border-radius: inherit; }
@media (min-width: 1024px) { [data-theme-kurs="direkter-weg"] .dwm .module-title { font-size: 24px; } .dwm-n { flex-basis: 64px; font-size: 48px; } .dwm-bar { left: 78px; } }
[data-theme-kurs="direkter-weg"] .glow { background: radial-gradient(ellipse 110% 340px at 50% -60px, rgba(239, 165, 108, 0.16), transparent 72%); }
[data-theme-kurs="direkter-weg"] .next-card { background: linear-gradient(160deg, rgba(239, 165, 108, 0.16), rgba(35, 65, 74, 0.35)); }

/* ---------- 6. Feinschliff nach den Mobbin-Referenzen (mobbin-referenzen.md, Abschnitt 8) ---------- */

/* Inner Winner: im Player ist die Restzeit die Hauptzahl (Strava live), Motiv etwas flacher */
[data-theme-kurs="inner-winner"] .pf-big { display: block; margin: 18px 0 0; font-family: 'Anton', Impact, sans-serif; font-size: 72px; line-height: 0.9;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
[data-theme-kurs="inner-winner"] .pf-big::after { content: 'Restzeit'; display: block; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
[data-theme-kurs="inner-winner"] .pf-art { height: 248px; }
[data-theme-kurs="inner-winner"] .pf-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
[data-theme-kurs="inner-winner"] .pf-done { border-radius: 4px; }
[data-theme-kurs="inner-winner"] .pd-feel-b, [data-theme-kurs="inner-winner"] .pd-stats { border-radius: 4px; }

/* Manifestation: Cinzel nur für Kurstitel und große Überschriften. Session- und Modulnamen bleiben ruhig. */
[data-theme-kurs="manifestation"] .module-title,
[data-theme-kurs="manifestation"] .next-title,
[data-theme-kurs="manifestation"] .item-title { text-transform: none; letter-spacing: -0.01em; }
[data-theme-kurs="manifestation"] .glow { background: radial-gradient(ellipse 120% 360px at 50% -40px, rgba(243,220,156,0.12), transparent 70%); }

/* Chakrenreise: das Chakra der Woche als weiches Licht oben (Calm Sleep), eine Farbe pro Screen */
[data-theme-kurs="chakrenreise"] .glow { background: radial-gradient(ellipse 110% 380px at 50% -60px, rgba(var(--acc-rgb), 0.16), transparent 75%); }
[data-theme-kurs="chakrenreise"] .pf-title, [data-theme-kurs="chakrenreise"] .next-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0; }
[data-theme-kurs="chakrenreise"] .next-title { font-size: 23px; }

/* Schlafkurs: Player noch stiller, Mondlicht statt Glow-Ring */
[data-theme-kurs="schlafkurs"] .pfull .ctl.play, .pfull[data-theme-kurs="schlafkurs"] .ctl.play { box-shadow: 0 0 0 10px rgba(230,211,179,0.05), 0 0 40px -6px rgba(230,211,179,0.35); }

/* Motive in breiten Flächen (Kurs-Hero, Abschluss): Säule und Ring rücken nach rechts, die Schrift bleibt frei */
.nc-art .kc-art[data-art="chakrenreise"]::before, .nc-art .kc-art[data-art="chakrenreise"]::after { left: 80%; top: 12%; height: 76%; }
.nc-art .kc-art[data-art="essentials"]::after { left: 78%; top: 52%; height: 62%; }
.pd-top .kc-art[data-art="chakrenreise"]::before, .pd-top .kc-art[data-art="chakrenreise"]::after { left: 88%; top: 16%; height: 70%; }
@media (max-width: 1023px) { [data-theme-kurs="manifestation"] .hello h1 { font-size: 34px; line-height: 1.1; } }
/* Cinzel in Versalien ist breit: „MANIFESTATION“ passt bei 2.6rem nicht in 358 px und schiebt die Seite seitlich */
@media (max-width: 1023px) { [data-theme-kurs="manifestation"] .course-head h1 { font-size: min(34px, 8.6vw); line-height: 1.1; } }
.pd-top .kc-art[data-art="essentials"]::after { left: 80%; top: 44%; height: 52%; }
/* Chakrenreise: nur das Modul der aktuellen Woche zeigt seine Farbe am Pfeil, die anderen bleiben ruhig */
[data-theme-kurs="chakrenreise"] .module.has-dot:not(:has(.is-now)) summary::after { border-color: var(--muted); }

/* ---------- 7. Chakrenreise-Screens (Design-Handoff 2a mobil, 3a Desktop; _konzepte/kurse-app/designs-umsetzung.md) ----------
   Start (.cr-dash), Reise als Lichtsäule (.cr-reise), Chakra-Seite (.cr-chakra), großer Player im Chakra-Farbfeld
   (.pfull.is-cr). Die Klassen .cr-* entstehen nur in app.js crDashHtml/crReiseHtml/crChakraHtml, also nur in der
   Chakrenreise. Farben über --chakra/--acc-rgb (data-chakra), Säulen-Verlauf aus --ch-1..7. */
@keyframes crBreathe { 0%, 100% { transform: scale(.84); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.cr {
  --cr-ink: #1a1120; --cr-gold: #f2c94c; --cr-line: rgba(255,236,214,0.12); --cr-line-2: rgba(255,236,214,0.08); --cr-card: rgba(255,236,214,0.05);
  --cr-serif: 'Cormorant Garamond', Georgia, serif; --cr-sans: 'Manrope', system-ui, sans-serif;
  --cr-pillar: linear-gradient(180deg, var(--ch-7), var(--ch-6), var(--ch-5), var(--ch-4), var(--ch-3), var(--ch-2), var(--ch-1));
  font-family: 'Work Sans', system-ui, sans-serif; color: var(--text);
}
.cr a { color: inherit; }
.cr .cr-desk, .cr .cr-desk-i { display: none; }
.cr-gold { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-gold); }
.cr-node { position: relative; display: block; flex: none; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--chakra); background: var(--chakra); }
.cr-node.is-next { background: transparent; }
.cr-node.is-now { width: 26px; height: 26px; box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.18), 0 0 26px var(--chakra); }
.cr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--chakra); }
.cr-dot.is-on { background: var(--chakra); }
.cr-side-k { margin: 0; font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cr-card { padding: 20px; border-radius: 20px; background: var(--cr-card); border: 1px solid var(--cr-line); }
.cr-card-title { font-family: var(--cr-sans); font-weight: 700; font-size: 15px; }

/* Zeilen: Theorie, Vertiefung, Module vor und nach den Wochen */
.cr-lis { display: flex; flex-direction: column; gap: 6px; }
.cr-li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: 14px; background: rgba(255,236,214,0.04); text-decoration: none; }
.cr-li-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.cr-li-m { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-li-m svg { width: 13px; height: 13px; }
.cr-li.is-off { opacity: 0.55; }
.cr-card .cr-li { min-height: 36px; padding: 6px 0; background: none; }
.cr-all { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: 13px; color: var(--chakra) !important; text-decoration: none; }
.cr-all svg { width: 14px; height: 14px; }

/* Start */
.cr-dash, .cr-dash-main, .cr-dash-side { display: flex; flex-direction: column; gap: 22px; }
.cr-dash { margin-top: 10px; }
.cr-hello { display: flex; flex-direction: column; gap: 4px; }
.cr-kick { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chakra); }
.cr-hello h1 { margin: 0; font-family: var(--cr-serif); font-weight: 500; font-size: 42px; line-height: 1.05; letter-spacing: 0; text-transform: none; }
.cr-hello .presence { margin-top: 6px; }
.cr-first { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--cr-card); border: 1px solid var(--cr-line); text-decoration: none; }
.cr-first-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-first-t b { font-family: var(--cr-sans); font-weight: 700; font-size: 15px; }
.cr-first-t > span:last-child { font-size: 12.5px; color: var(--muted); }
.cr-first > svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.cr-hero { position: relative; height: 320px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(var(--acc-rgb), 0.35);
  background: radial-gradient(circle at 80% 50%, rgba(var(--acc-rgb), 0.45), transparent 50%), radial-gradient(circle at 80% 8%, rgba(168,109,219,0.2), transparent 30%), linear-gradient(180deg, #24152e, #1a1120 70%); }
.cr-hero-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cr-hero-link:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.cr-col { position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 30px; }
.cr-col::before { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: var(--cr-pillar); opacity: 0.45; }
.cr-hero .cr-col { right: 44px; top: 26px; bottom: 26px; }
.cr-hero-in { position: absolute; z-index: 2; left: 20px; right: 110px; top: 20px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cr-hero-mid { display: flex; flex-direction: column; gap: 6px; }
.cr-wk { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
.cr-hero-name { font-family: var(--cr-serif); font-weight: 600; font-size: 36px; line-height: 1; }
.cr-hero-theme { font-family: var(--cr-serif); font-style: italic; font-size: 19px; line-height: 1.2; color: var(--muted); }
.cr-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cr-play { pointer-events: auto; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--chakra); color: var(--cr-ink); box-shadow: 0 0 28px rgba(var(--acc-rgb), 0.6); }
/* Dreieck wie im Design: 14 × 18 px mobil, 15 × 20 px Desktop (das Icon füllt nur die Hälfte seiner Fläche) */
.cr-play svg { width: 28px; height: 28px; margin-left: 1px; }
.cr-play.is-playing svg { width: 22px; height: 22px; margin-left: 0; }
.cr-play:focus-visible, .cr-tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cr-start-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-start-t b { font-family: var(--cr-sans); font-weight: 700; font-size: 14px; }
.cr-start-t span { font-size: 12.5px; line-height: 1.35; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cr-path, .cr-about { display: none; }
.cr-streak { margin: 0; padding: 16px; border-radius: 20px; background: var(--cr-card); border: 1px solid var(--cr-line); }
.cr-streak .kc-st-num { font-family: var(--cr-serif); font-weight: 600; font-size: 52px; line-height: 0.9; color: var(--text); font-variant-numeric: lining-nums; }
.cr-streak .kc-st-label { font-size: 14px; }
.cr-streak .kc-days i { width: 28px; height: 28px; }
.cr-streak .kc-st-note { margin-top: 10px; }
.cr-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.cr-more > summary::-webkit-details-marker { display: none; }
.cr-more > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 2px; transition: transform .2s; }
.cr-more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.cr-week { display: flex; flex-direction: column; gap: 10px; }
.cr-about-t p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cr-allc { align-self: flex-start; }


/* Reise: Lichtsäule, Krone oben, Wurzel unten */
html:has(.cr-reise), body:has(.cr-reise) { background: #140c18; }
body:has(.cr-reise) .glow { display: none; }
.cr-reise::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 8%, rgba(168,109,219,0.22), transparent 40%), radial-gradient(circle at 50% 100%, rgba(232,82,74,0.2), transparent 45%); }
.cr-reise { padding-top: 14px; }
.cr-reise .cr-gold { letter-spacing: 0.16em; }
.cr-reise-main { display: flex; flex-direction: column; min-width: 0; }
.cr-h1 { margin: 6px 0 0; font-family: var(--cr-serif); font-weight: 500; font-style: italic; font-size: 38px; line-height: 1.05; letter-spacing: 0; text-transform: none; }
.cr-meta { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cr-mods { border-radius: 16px; border: 1px solid var(--cr-line-2); background: rgba(255,236,214,0.03); }
.cr-reise-main > .cr-mods { margin-top: 18px; }
.cr-mods > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; }
.cr-mods > summary::-webkit-details-marker { display: none; }
.cr-mods > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.cr-mods[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.cr-mods-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-mods-t b { font-family: var(--cr-sans); font-weight: 700; font-size: 14.5px; }
.cr-mods-t span { font-size: 12px; color: var(--muted); }
.cr-mod { padding: 0 8px 10px; }
.cr-mod h3 { margin: 4px 6px 8px; font-family: var(--cr-sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cr-pillar { position: relative; list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; }
.cr-pillar::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--cr-pillar); opacity: 0.45; }
.cr-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 0; text-decoration: none; }
.cr-row.is-now { padding: 14px 0; }
.cr-row.is-next { opacity: 0.6; }
.cr-row-dot { width: 44px; height: 44px; display: grid; place-items: center; }
.cr-pillar .cr-node { width: 20px; height: 20px; }
.cr-pillar .cr-node.is-now { width: 30px; height: 30px; }
.cr-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-row-k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
.cr-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-row-n { font-family: var(--cr-serif); font-weight: 600; font-size: 21px; line-height: 1.1; transition: color .15s; }
.cr-row.is-now .cr-row-n { font-size: 28px; }
.cr-row-th { font-size: 12.5px; color: var(--muted); }
.cr-row-s { font-size: 12px; color: var(--muted); text-align: right; }
.cr-row:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 12px; }
.cr-after { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.cr-preview { display: none; }
.cr-orb { position: relative; display: block; width: 120px; height: 120px; margin: 17px auto 5px; }
.cr-orb i { position: absolute; border-radius: 50%; animation: crBreathe 10s ease-in-out infinite; will-change: transform; }
.cr-orb i:first-child { inset: -30%; background: radial-gradient(circle, rgba(var(--acc-rgb), 0.35), transparent 65%); }
.cr-orb i:last-child { inset: 0; background: radial-gradient(circle at 38% 32%, #fff6ea 0, var(--chakra) 34%, rgba(var(--acc-rgb), 0.5) 62%, rgba(var(--acc-rgb), 0) 72%); }
.cr-btn { display: grid; place-items: center; height: 52px; border-radius: 999px; background: var(--chakra); color: var(--cr-ink) !important; font-family: var(--cr-sans); font-weight: 700; font-size: 15px; text-decoration: none; }

/* Chakra-Seite */
.cr-ch-hero { position: relative; height: 330px; margin: 0 -16px; overflow: hidden;
  background: radial-gradient(circle at 78% 46%, rgba(var(--acc-rgb), 0.5), transparent 52%), linear-gradient(180deg, #24182b, #1a1120); }
.cr-rings { position: absolute; display: grid; place-items: center; }
.cr-rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.18); animation: crBreathe 10s ease-in-out infinite; will-change: transform; }
.cr-rings i:nth-child(1) { width: 100%; height: 100%; }
.cr-rings i:nth-child(2) { width: 78%; height: 78%; border-color: rgba(var(--acc-rgb), 0.32); animation-delay: .6s; }
.cr-rings i:nth-child(3) { width: 56%; height: 56%; border-color: rgba(var(--acc-rgb), 0.46); animation-delay: 1.2s; }
.cr-rings i:nth-child(4) { width: 34%; height: 34%; border-color: rgba(var(--acc-rgb), 0.6); animation-delay: 1.8s; background: radial-gradient(circle, rgba(var(--acc-rgb), 0.5), transparent 70%); }
.cr-ch-hero .cr-rings { right: -70px; top: 40px; width: 260px; height: 260px; }
.cr-back { position: absolute; z-index: 1; left: 14px; top: 10px; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; font-size: 13px; color: var(--muted) !important; text-decoration: none; }
.cr-back svg { width: 16px; height: 16px; }
.cr-ch-title { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.cr-roman { font-family: var(--cr-serif); font-weight: 600; font-size: 64px; line-height: 0.8; color: var(--chakra); }
.cr-ch-title h1 { margin: 8px 0 0; font-family: var(--cr-serif); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: 0; text-transform: none; }
.cr-ch-meta { font-size: 13px; color: var(--muted); }
.cr-ch-body { padding-top: 18px; display: flex; flex-direction: column; gap: 24px; }
.cr-ch-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-tabs { display: flex; gap: 20px; border-bottom: 1px solid rgba(255,236,214,0.1); }
.cr-tab { margin-bottom: -1px; padding: 6px 0 10px; border-bottom: 2px solid transparent; font-family: var(--cr-sans); font-weight: 600; font-size: 14px; color: var(--muted); }
.cr-tab.is-on { font-weight: 700; color: var(--chakra); border-bottom-color: var(--chakra); }
.cr-meds { display: flex; flex-direction: column; gap: 12px; }
/* Meditation der Woche: Karte mit Play, Dauer, Fassung, Begleitung (Design-Fassung 06.10.) */
.cr-mcard { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 22px; border: 1px solid rgba(var(--acc-rgb), 0.35);
  background: radial-gradient(circle at 100% 0%, rgba(var(--acc-rgb), 0.28), transparent 55%), rgba(255,236,214,0.04); }
.cr-mc-head { display: flex; align-items: center; gap: 14px; }
.cr-mc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-mc-k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
.cr-mc-n { font-family: var(--cr-serif); font-weight: 600; font-size: 26px; line-height: 1.05; }
.cr-mc-m { font-size: 13px; line-height: 1.4; color: var(--muted); }
.cr-mc-st { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.cr-mc-st.is-done { color: var(--chakra); }
.cr-mc-st svg { width: 13px; height: 13px; }
.cr-mplay { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--chakra); color: var(--cr-ink); box-shadow: 0 0 28px rgba(var(--acc-rgb), 0.55); }
.cr-mplay svg { width: 30px; height: 30px; margin-left: 1px; }
.cr-mplay.is-playing svg { width: 22px; height: 22px; margin-left: 0; }
.cr-mplay.is-off { background: rgba(255,236,214,0.08); color: var(--muted); box-shadow: none; }
.cr-seg-row { display: flex; flex-direction: column; gap: 8px; }
.cr-seg-l { font-size: 12px; color: var(--muted); }
.cr-seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 99px; background: rgba(255,236,214,0.06); border: 1px solid rgba(255,236,214,0.1); }
.cr-seg-b { min-width: 0; height: 40px; padding: 0 6px; border-radius: 99px; font-family: var(--cr-sans); font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
.cr-seg-b.is-on { background: var(--chakra); color: var(--cr-ink); }
/* Nur „Dauer“ trägt die volle Chakra-Farbe; „Fassung“ (nicht im Design) und „Begleitung“ sind die ruhige Zweitwahl */
.cr-seg.is-guide .cr-seg-b, .cr-seg.is-fas .cr-seg-b { height: 36px; font-weight: 600; font-size: 13px; color: var(--muted); }
.cr-seg.is-guide .cr-seg-b.is-on, .cr-seg.is-fas .cr-seg-b.is-on { background: rgba(255,236,214,0.14); color: var(--text); }
.cr-alt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,236,214,0.1); text-align: left; text-decoration: none; transition: border-color .15s, background .15s; }
.cr-alt.is-on { border-color: rgba(var(--acc-rgb), 0.5); background: rgba(var(--acc-rgb), 0.1); }
.cr-alt.is-off { opacity: 0.55; }
.cr-alt-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--chakra); }
.cr-alt-dot.is-on { background: var(--chakra); }
.cr-alt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cr-alt-t b { font-family: var(--cr-sans); font-weight: 700; font-size: 14px; }
.cr-alt-t span { font-size: 12px; color: var(--muted); }
.cr-alt > svg, .cr-alt-i svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.cr-alt-i { flex: none; display: grid; place-items: center; }
.cr-alt-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--acc-rgb), 0.5); color: var(--chakra); }
.cr-alt-play::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.cr-alt-play svg { width: 15px; height: 15px; margin-left: 2px; }
.cr-alt-play.is-playing svg { margin-left: 0; }
.cr-alt.is-on .cr-alt-play { background: var(--chakra); color: var(--cr-ink); }
.cr-mplay:focus-visible, .cr-seg-b:focus-visible, .cr-alt:focus-visible, .cr-alt-play:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cr-lesson-link, .cr-lesson-link:visited { color: var(--text, #f4ede4); }
.cr-lesson-link { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 48px; padding: 12px 14px; border-radius: 14px; background: rgba(255,236,214,0.04); font-size: 14px; text-decoration: none; }
.cr-lesson-link span { flex: 1; }
.cr-lesson-link svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.cr-panel .pv-parts { margin-top: 14px; }
.cr-weeknav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.cr-wn { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--cr-line-2); text-decoration: none; }
.cr-wn span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
.cr-wn b { font-family: var(--cr-serif); font-weight: 600; font-size: 19px; }
.cr-wn.is-next { grid-column: 2; text-align: right; }

/* Lektionsseite: Licht im Chakra der Woche statt Thumbnail mit eingebrannter Schrift */
.cr-pic { background: radial-gradient(circle at 74% 50%, rgba(var(--acc-rgb), 0.5), transparent 52%), linear-gradient(180deg, #24182b, #1a1120); }
.cr-pic .cr-rings { right: 6%; top: 8%; height: 84%; aspect-ratio: 1; }

@media (hover: hover) and (pointer: fine) {
  .cr-li:not(.is-off):hover, .cr-lesson-link:hover { background: rgba(var(--acc-rgb), 0.1); }
  .cr-card .cr-li:not(.is-off):hover { background: none; color: var(--chakra); }
  .cr-row:not(.is-off):hover .cr-row-n, .cr-step:hover b { color: var(--chakra); }
  .cr-alt:not(.is-off):not(.is-on):hover { border-color: rgba(var(--acc-rgb), 0.35); }
  .cr-seg-b:not(.is-on):hover { background: rgba(255,236,214,0.06); }
  .cr-mplay:not(.is-off):hover { filter: brightness(1.06); }
  .cr-mods > summary:hover, .cr-wn:hover, .cr-first:hover { border-color: rgba(var(--acc-rgb), 0.35); }
  .cr-btn:hover, .cr-play:hover { filter: brightness(1.06); }
}

@media (min-width: 1024px) {
  .cr .cr-desk { display: inline; }
  .cr .cr-desk-i { display: inline; }
  .cr .cr-mob { display: none; }
  main:has(> .cr) { max-width: 1192px; }
  /* Licht oben über die ganze Fläche rechts der Seitenleiste wie im Design (sonst Kante bei 900 px Breite) */
  body.is-app[data-theme-kurs="chakrenreise"] .glow { left: var(--side); width: auto; max-width: none;
    background: radial-gradient(ellipse 70% 420px at 60% -80px, rgba(var(--acc-rgb), 0.18), transparent 75%); }
  .cr-gold { font-size: 12px; }
  /* Start: Inhalt max. 1080, Raster 1fr / 340 */
  .cr-dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; max-width: 1080px; margin: 4px auto 0; align-items: start; }
  .cr-dash-main { gap: 24px; }
  .cr-dash-side { gap: 18px; padding-top: 104px; }
  .cr-hello { gap: 6px; }
  .cr-kick { font-size: 12px; }
  .cr-hello h1 { font-size: 60px; line-height: 1; }
  .cr-hero { height: 280px; border-radius: 24px;
    background: radial-gradient(circle at 84% 50%, rgba(var(--acc-rgb), 0.45), transparent 42%), radial-gradient(circle at 84% 6%, rgba(168,109,219,0.2), transparent 26%), linear-gradient(180deg, #24152e, #1a1120 70%); }
  .cr-hero .cr-col { right: 80px; }
  .cr-hero-in { left: 32px; right: 200px; top: 28px; bottom: 28px; }
  .cr-hero-name { font-size: 48px; }
  .cr-hero-theme { font-size: 22px; }
  .cr-start { gap: 14px; }
  .cr-play { width: 56px; height: 56px; }
  .cr-play svg { width: 30px; height: 30px; }
  .cr-play.is-playing svg { width: 22px; height: 22px; }
  .cr-start-t b { font-size: 15px; }
  .cr-start-t span { font-size: 13px; }
  .cr-path { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
  .cr-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .cr-card-head b { font-family: var(--cr-sans); font-weight: 700; font-size: 16px; }
  .cr-card-head span { font-size: 13px; color: var(--muted); }
  .cr-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cr-steps::before { content: ''; position: absolute; left: 7%; right: 7%; top: 21px; height: 2px; opacity: 0.45;
    background: linear-gradient(90deg, var(--ch-1), var(--ch-2), var(--ch-3), var(--ch-4), var(--ch-5), var(--ch-6), var(--ch-7)); }
  .cr-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; border-radius: 12px; }
  .cr-step.is-next { opacity: 0.6; }
  .cr-step-dot { width: 44px; height: 44px; display: grid; place-items: center; }
  .cr-step b { font-family: var(--cr-serif); font-weight: 600; font-size: 18px; transition: color .15s; }
  .cr-step > span:last-child { margin-top: -6px; font-size: 11.5px; color: var(--muted); }
  .cr-step:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
  .cr-streak { padding: 20px; }
  .cr-streak .kc-days i { width: 26px; height: 26px; }
  .cr-about { display: flex; flex-direction: column; gap: 8px; background: none; }
  .cr-week { padding: 20px; }

  /* Reise: Raster 1fr / 420, rechts die Vorschau der aktuellen Woche */
  .cr-reise::before { left: var(--side);
    background: radial-gradient(circle at 30% 0%, rgba(168,109,219,0.2), transparent 35%), radial-gradient(circle at 30% 100%, rgba(232,82,74,0.18), transparent 40%); }
  .cr-reise { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; max-width: 1080px; margin: 4px auto 0; padding-top: 0; align-items: start; }
  .cr-h1 { margin-top: 8px; font-size: 52px; line-height: 1; }
  .cr-meta { margin-top: 10px; font-size: 14px; }
  .cr-pillar { margin-top: 26px; }
  .cr-row { gap: 18px; }
  .cr-row-k { display: none; }
  .cr-row-l { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .cr-row-th { font-size: 13px; }
  .cr-row-s { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
  .cr-preview { position: sticky; top: 40px; align-self: start; margin-top: 40px; padding: 32px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
    background: radial-gradient(circle at 50% 28%, rgba(var(--acc-rgb), 0.32), transparent 60%), rgba(255,236,214,0.04); border: 1px solid rgba(var(--acc-rgb), 0.35); }
  .cr-preview-k { margin-top: 26px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chakra); }
  .cr-preview-n { margin-top: 6px; font-family: var(--cr-serif); font-weight: 500; font-size: 40px; line-height: 1; }
  .cr-preview p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
  .cr-preview .cr-btn { align-self: stretch; margin-top: 22px; }

  /* Chakra-Seite: Hero randlos über die ganze Inhaltsfläche, darunter eine ruhige Spalte (seit 07.10. ohne Seitenspalte) */
  .cr-ch-hero { height: 340px; margin: -44px -56px 0;
    background: radial-gradient(circle at 80% 50%, rgba(var(--acc-rgb), 0.5), transparent 42%), linear-gradient(180deg, #24182b, #1a1120); }
  .cr-ch-hero .cr-rings { right: 120px; top: 10px; width: 320px; height: 320px; }
  .cr-back { left: 56px; top: 30px; font-size: 14px; }
  .cr-ch-title { left: 64px; bottom: 40px; gap: 6px; }
  .cr-roman { font-size: 88px; }
  .cr-ch-title h1 { margin-top: 12px; font-size: 60px; }
  .cr-ch-meta { font-size: 15px; }
  .cr-ch-body { display: block; max-width: 760px; padding: 28px 8px 0; }
  .cr-tabs { gap: 28px; }
  .cr-tab { padding-bottom: 12px; font-size: 15px; }
  .cr-meds { max-width: 560px; }
  .cr-mcard { gap: 20px; padding: 24px; }
  .cr-mc-n { font-size: 34px; }
  .cr-mplay { width: 64px; height: 64px; }
  .cr-lesson-link { max-width: 560px; }
  .cr-weeknav { margin: 36px 8px 0; }
}

/* Schmaler Desktop (1024 bis 1279 px): neben der Seitenleiste bleiben nur rund 650 px. Die Raster 1fr / 340,
   1fr / 420 und 1fr / 320 ließen der Hauptspalte 170 bis 280 px, Hero und Meditationskarte brachen dann mitten im
   Wort um. Deshalb hier einspaltig, die rechte Spalte rutscht unter den Inhalt. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cr-dash, .cr-reise { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
  .cr-dash-side { padding-top: 0; }
  .cr-preview { position: static; margin-top: 8px; }
}

/* Chakra-Seite seit 07.10.: Reiter Meditationen, Theorie, Kommentare (ohne Seitenspalte, ohne Wochen) */
.cr-mc-done .done-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 99px; font-size: 14px; }
/* Ruhige Zweitaktion neben Play (wie im Schlafkurs): umrandet, abgehakt in Chakra-Farbe */
.cr-mc-done .done-btn:not(.is-done) { background: rgba(255,236,214,0.04); color: var(--text); border: 1px solid rgba(var(--acc-rgb), 0.35); box-shadow: none; }
.cr-mc-done .done-btn:not(.is-done) svg { color: var(--chakra); }
.cr-mc-done .done-btn.is-done { border-color: var(--chakra); color: var(--chakra); }
.cr-th-sec { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 20px; border-bottom: 1px solid var(--cr-line-2); }
.cr-th-sec:last-child { border-bottom: 0; }
.cr-th-k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chakra); }
.cr-th-h { margin: 0; font-family: var(--cr-serif); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.cr-th-text p, .cr-th-sec > p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.cr-th-sec > p.cr-th-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cr-th-sec .lt-bar { margin: 0; }
.cr-comments { padding-top: 12px; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cr-cm { padding-top: 14px; }
.cr-cm-l { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chakra); overflow-wrap: anywhere; }
.cr-tab .n { font-weight: 600; }
.cr-seven .cr-chli { gap: 12px; }
.cr-seven .cr-node { width: 12px; height: 12px; }
.cr-seven .cr-node.is-now { width: 12px; height: 12px; box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.2); }
.cr-seven .cr-chli { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
.cr-seven .cr-li-t { font-family: var(--cr-serif); font-weight: 600; font-size: 18px; }
.cr-seven .cr-li-m { grid-column: 2; white-space: normal; }
.sl-crcm { margin-top: 18px; }
#p-rate[hidden] { display: none !important; }
@media (min-width: 1024px) { .cr-seven { display: none; } }

/* Figur mit den sieben Chakren (Start, v159 nach dem Entwurf vom 08.10. 1a/2a): ohne Karte, ohne Session-Liste.
   Handy: Figur, Sanskrit am aktiven Punkt, darunter Text mit Pfeilen und breitem Knopf. 760 bis 1279 px: Figur | Text.
   Ab 1280 px: Namensliste | Figur | Text. Wechsel ohne Neuaufbau (crFigSet): Licht blendet über (opacity), Punkt wächst
   (scale), Text gleitet ein. Alles nur transform/opacity, still bei prefers-reduced-motion. */
@keyframes crFigPulse { 0% { transform: translate(-50%,-50%) scale(.6); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; } }
@keyframes crFigBreathe { 0%,100% { transform: translate(-50%,-50%) scale(.9); opacity: .7; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } }
@keyframes crFigIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cr-fig { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cr-fig-list { display: none; }
.cr-fig-box { position: relative; width: 264px; height: 352px; margin: 0 auto; }
.cr-fig-body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 22px rgba(var(--acc-rgb), 0.16)); }
.cr-fig-auras { position: absolute; inset: 0; pointer-events: none; }
.cr-fig-aura { position: absolute; left: 50%; width: 250px; height: 250px; border-radius: 50%; opacity: 0; transform: translate(-50%,-50%) scale(.8);
  background: radial-gradient(circle, rgba(var(--acc-rgb), 0.42) 0%, rgba(var(--acc-rgb), 0.14) 30%, transparent 64%); transition: opacity .8s ease, transform .8s ease; }
.cr-fig-aura.is-on { opacity: 1; transform: translate(-50%,-50%) scale(1); animation: crFigBreathe 7s ease-in-out infinite; }
.cr-fd { position: absolute; left: 50%; z-index: 2; width: 64px; height: 26px; transform: translate(-50%,-50%); display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.cr-fd i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--chakra); transform: scale(.5); box-shadow: 0 0 14px rgba(var(--acc-rgb), 0.9); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.cr-fd.is-on i { transform: scale(1); background: radial-gradient(circle at 35% 30%, #fff, var(--chakra) 48%); box-shadow: 0 0 0 5px rgba(var(--acc-rgb), 0.2), 0 0 26px 6px rgba(var(--acc-rgb), 0.75); }
.cr-fd.is-on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--chakra); transform: translate(-50%,-50%); animation: crFigPulse 2.8s ease-out infinite; pointer-events: none; }
.cr-fd:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-radius: 13px; }
.cr-fd-l { position: absolute; left: calc(50% + 20px); top: 50%; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--chakra) 55%, #fff); text-shadow: 0 0 6px rgba(18,11,23,0.9), 0 0 12px rgba(18,11,23,0.7);
  opacity: 0; transform: translate(-6px, -50%); transition: opacity .4s, transform .4s; pointer-events: none; }
.cr-fd.is-on .cr-fd-l { opacity: 1; transform: translate(0, -50%); }
.cr-fig-info { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-width: 0; padding: 4px 0 0; }
.cr-fig-txt { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; }
.cr-fig-txt.is-in { animation: crFigIn .5s cubic-bezier(.2,.8,.2,1); }
.cr-fig-k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--chakra) 70%, #fff); white-space: nowrap; }
.cr-fig-n { margin: 8px 0 0; padding-right: 104px; font-family: var(--cr-serif); font-weight: 500; font-size: clamp(30px, 10.4vw, 44px); line-height: 1; letter-spacing: 0; text-transform: none; }
.cr-fig-mean { margin: 10px 0 0; font-family: var(--cr-serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.35; color: #e4d8d4; text-wrap: pretty; }
.cr-fig-d { display: none; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.cr-fig-nav { position: absolute; right: 0; top: 18px; display: flex; gap: 8px; }
.cr-fig-nav button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,236,214,0.14); background: rgba(255,236,214,0.04); color: var(--text); }
.cr-fig-nav button svg { width: 16px; height: 16px; transform: rotate(90deg); }
.cr-fig-nav button + button svg { transform: rotate(-90deg); }
.cr-fig-nav button:focus-visible, .cr-fn:focus-visible, .cr-fig-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cr-fig-btn { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; margin-top: 18px; padding: 0 28px; font-size: 16px;
  box-shadow: 0 10px 30px rgba(var(--acc-rgb), 0.35); transition: transform .2s; }
.cr-fig-btn svg { width: 18px; height: 18px; }
.cr-fig-cnt { flex: 1 1 100%; margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .cr-fig-nav button:hover { background: rgba(255,236,214,0.08); }
  .cr-fig-btn:hover { transform: translateY(-1px); }
  .cr-fn:not(.is-on):hover b { color: var(--text); }
}
@media (min-width: 760px) {
  .cr-fig { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: center; }
  .cr-fig-box { width: 300px; height: 400px; }
  .cr-fd { width: 40px; height: 30px; }
  .cr-fig-aura { width: 300px; height: 300px; }
  .cr-fig-info { padding: 0; max-width: 440px; }
  .cr-fig-n { padding-right: 0; margin-top: 12px; font-size: clamp(40px, 5.6vw, 52px); }
  .cr-fig-mean { margin-top: 14px; font-size: 23px; }
  .cr-fig-d { display: block; }
  .cr-fig-nav { position: static; order: 3; margin-top: 30px; }
  .cr-fig-btn { flex: none; order: 2; height: 54px; margin-top: 30px; padding: 0 22px; }
  .cr-fig-nav { margin-left: 2px; }
  .cr-fig-cnt { order: 4; margin-top: 14px; text-align: left; }
}
@media (min-width: 1280px) {
  .cr-fig { grid-template-columns: 190px 320px minmax(0, 1fr); gap: 28px; }
  .cr-fig-list { display: flex; flex-direction: column; }
  .cr-fn { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0 6px 16px; border: 0; border-left: 2px solid rgba(255,236,214,0.06); background: none; text-align: left; cursor: pointer; }
  .cr-fn.is-on { border-left-color: rgba(var(--acc-rgb), 0.7); }
  .cr-fn i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--chakra); opacity: .55; transition: opacity .3s; }
  .cr-fn.is-on i { opacity: 1; }
  .cr-fn span { display: flex; flex-direction: column; transform-origin: left center; transform: scale(.75); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .cr-fn.is-on span { transform: none; }
  .cr-fn b { font-family: var(--cr-serif); font-weight: 500; font-size: 26px; line-height: 1.1; color: #9d8d93; }
  .cr-fn.is-on b { color: var(--text); }
  .cr-fn small { margin-top: 3px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #8a7a80; }
  .cr-fig-box { width: 320px; height: 427px; }
  .cr-fd-l { display: none; }
  .cr-fig-n { font-size: 56px; }
  .cr-fig-mean { font-size: 24px; }
  .cr-fig-btn { padding: 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-fig-aura, .cr-fig-aura.is-on, .cr-fd.is-on::after, .cr-fig-txt.is-in { animation: none; }
  .cr-fig-aura, .cr-fd i, .cr-fd-l, .cr-fn, .cr-fn i, .cr-fn span, .cr-fn b, .cr-fig-btn { transition: none; }
}

/* Start v149: Begrüßung, Figur, darunter Lauf und Community nebeneinander (ab 900 px) */
.cr-dash.cr-dash3 { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; margin: 10px auto 0; }
.cr-dash-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cr-comm { min-width: 0; }
.cr-comm:empty { display: none; }
.cr-comm .sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cr-comm .sec-head h2 { margin: 0; font-family: var(--cr-sans); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; }
@media (min-width: 900px) { .cr-dash-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Theorie der Chakrenreise (#crtheorie, v159, Entwurf 08.10. 1c/2b): eine ruhige Liste von Kapiteln, eingeklappt.
   Kapitel = <details class="crt-ch"> mit Cover, Nummer, Titel, Meta, Ring x/y. Rechts am Desktop „Weitermachen“ und
   der Gesamtfortschritt (.crt-side), mobil beides oben. Bewegung nur über transform/opacity. */
@keyframes crtIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cr-theorie { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1000px; margin: 10px auto 0; padding-bottom: 20px; }
.crt-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.crt-side { display: none; }
.crt-head { display: flex; flex-direction: column; gap: 0; }
.cr-theorie .cr-h1 { font-style: normal; font-size: 46px; line-height: 1; }
.crt-head .cr-meta { max-width: 470px; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.crt-total { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; margin-top: 18px; }
.crt-total-n { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.crt-total-n b { font-weight: 500; color: var(--text); }
.crt-bar { display: block; flex: 1; height: 3px; border-radius: 3px; background: rgba(255,236,214,0.08); overflow: hidden; }
.crt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--chakra); }
.crt-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 14px; align-items: center;
  padding: 18px; border-radius: 22px; background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.2), rgba(var(--acc-rgb), 0.05) 70%); border: 1px solid rgba(var(--acc-rgb), 0.25); }
.crt-next-k { grid-column: 1; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--chakra) 62%, #fff); }
.crt-next-t { grid-column: 1; margin-top: 6px; font-family: var(--cr-serif); font-weight: 500; font-size: 22px; line-height: 1.15; text-wrap: pretty; }
.crt-next-m { grid-column: 1; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.crt-next-go { grid-column: 2; grid-row: 1 / 4; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--chakra); color: var(--cr-ink) !important;
  text-decoration: none; box-shadow: 0 8px 22px rgba(var(--acc-rgb), 0.4); }
.crt-next-go svg { width: 18px; height: 18px; margin-left: 3px; }
.crt-next-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crt-chs { display: flex; flex-direction: column; border-top: 1px solid rgba(255,236,214,0.07); }
.crt-ch { border-bottom: 1px solid rgba(255,236,214,0.07); }
.crt-ch-s { list-style: none; cursor: pointer; display: grid; grid-template-columns: 72px minmax(0, 1fr) 38px 16px; align-items: center; gap: 14px; padding: 16px 4px; border-radius: 14px; }
.crt-ch-s::-webkit-details-marker { display: none; }
.crt-ch-s:focus-visible { outline: 2px solid var(--chakra); outline-offset: 2px; }
.crt-ch-img { width: 72px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: rgba(var(--acc-rgb), 0.16); }
.crt-ch-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.crt-ch-t { display: flex; flex-direction: column; min-width: 0; }
.crt-ch-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--chakra) 70%, #fff); }
.crt-ch-t b { margin-top: 3px; font-family: var(--cr-serif); font-weight: 500; font-size: 21px; line-height: 1.15; text-wrap: pretty; }
.crt-ch-m { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.crt-ring { position: relative; width: 38px; height: 38px; }
.crt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.crt-ring circle { fill: none; stroke: rgba(255,236,214,0.1); stroke-width: 2; }
.crt-ring circle.is-on { stroke: var(--chakra); stroke-linecap: round; }
.crt-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.crt-chev { display: grid; place-items: center; color: var(--muted); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.crt-chev svg { width: 16px; height: 16px; transform: rotate(90deg); }
.crt-ch[open] > .crt-ch-s .crt-chev { transform: rotate(180deg); }
.crt-eps { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; }
.crt-ch[open] .crt-li, .crt-ch[open] .crt-gh { animation: crtIn .35s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 25ms); }
.crt-gh { padding: 14px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crt-li { display: flex; align-items: center; gap: 6px; }
.crt-ep { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 52px; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.crt-ep.is-off { opacity: 0.55; }
.crt-ep-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--muted); border: 1px solid rgba(255,236,214,0.14); font-variant-numeric: lining-nums tabular-nums; }
.crt-ep.is-done .crt-ep-n { border-color: var(--chakra); background: var(--chakra); color: var(--cr-ink); }
.crt-ep-n svg { width: 14px; height: 14px; }
.crt-ep-t { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.crt-ep.is-done .crt-ep-t { color: var(--muted); }
.crt-ep-m { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.crt-play { flex: none; width: 44px; height: 44px; margin-right: 4px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--acc-rgb), 0.5); color: var(--chakra); }
.crt-play svg { width: 14px; height: 14px; margin-left: 2px; }
.crt-play.is-playing { background: var(--chakra); color: var(--cr-ink); }
.crt-play.is-playing svg { margin-left: 0; }
.crt-sec { display: flex; flex-direction: column; gap: 12px; }
.crt-sec-h { margin: 8px 0 0; font-family: var(--cr-serif); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.crt-with { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; text-align: left; color: var(--text);
  background: linear-gradient(135deg, rgba(242,201,76,0.10), rgba(255,236,214,0.02)); border: 1px solid rgba(242,201,76,0.24); }
.crt-with .cr-mk-k { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-gold); }
.crt-with b { font-family: var(--cr-serif); font-weight: 600; font-size: 26px; line-height: 1; }
.crt-with .et { font-size: 13px; line-height: 1.6; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .crt-ep:not(.is-off):hover, .crt-ch-s:hover { background: rgba(255,236,214,0.035); }
  .crt-ch-s:hover .crt-ch-img img { opacity: 1; }
  .crt-with:hover { border-color: rgba(242,201,76,0.4); }
  .crt-next-go:hover { transform: scale(1.05); }
}
.crt-next-go { transition: transform .2s; }
@media (max-width: 399px) {
  .crt-ch-s { grid-template-columns: 56px minmax(0, 1fr) 34px 14px; gap: 10px; }
  .crt-ch-img { width: 56px; border-radius: 8px; }
  .crt-ch-t b { font-size: 19px; overflow-wrap: anywhere; hyphens: auto; }
  .crt-ring { width: 34px; height: 34px; }
}
@media (max-width: 1023px) { .cr-extras .cr-alt-play { width: 44px; height: 44px; } }
@media (min-width: 600px) {
  .crt-ch-s { grid-template-columns: 112px minmax(0, 1fr) 42px 16px; gap: 18px; padding: 20px 8px; }
  .crt-ch-img { width: 112px; border-radius: 12px; }
  .crt-ch-t b { font-size: 26px; }
  .crt-ch-m { font-size: 13px; }
  .crt-ring { width: 42px; height: 42px; }
  .crt-eps { padding-left: 130px; }
  .crt-gh { padding-left: 8px; }
}
@media (min-width: 1024px) {
  .cr-theorie .cr-h1 { font-size: 60px; }
}
/* Rechte Spalte erst ab 1280 px: daneben sitzt die Seitenleiste (264 px), bei 1024 blieben der Liste nur 376 px */
@media (min-width: 1280px) {
  .cr-theorie { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
  .crt-head .crt-total, .crt-next-mob { display: none; }
  .crt-side { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
  .crt-side .crt-next { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .crt-side .crt-next-t { font-size: 26px; margin-top: 10px; }
  .crt-side .crt-next-go { grid-column: 1; grid-row: auto; justify-self: start; width: auto; height: 46px; margin-top: 18px; padding: 0 22px; gap: 10px; display: inline-flex; align-items: center;
    border-radius: 999px; font-weight: 600; font-size: 14.5px; }
  .crt-side .crt-next-go svg { margin-left: 0; width: 14px; height: 14px; }
  .crt-side .crt-next-go span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .crt-side .crt-total { flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 20px 22px; border-radius: 22px; background: rgba(255,236,214,0.035); border: 1px solid rgba(255,236,214,0.07); }
  .crt-side .crt-total-n { font-size: 13px; }
  .crt-side .crt-total-n b { font-family: var(--cr-serif); font-size: 40px; line-height: 1; margin-right: 6px; font-variant-numeric: lining-nums; }
  .crt-side .crt-bar { flex: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cr-theorie { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-ch[open] .crt-li, .crt-ch[open] .crt-gh { animation: none; }
  .crt-chev, .crt-next-go { transition: none; }
}

/* Chakra-Seite v159 (Entwurf 08.10. 1b): ruhiger Kopf mit Licht oben rechts, Reiter, Sessions als Liste mit Stufe und
   Längen, gewählte Fassung aufgeklappt (Offline, Abhaken), Kacheln zu Theorie und Kommentaren. */
.cr-hd { position: relative; margin: -8px -16px 0; padding: 0 22px 6px; overflow: hidden; }
.cr-hd-glow { position: absolute; top: -130px; right: -120px; width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--acc-rgb), 0.5) 0%, rgba(var(--acc-rgb), 0.12) 40%, transparent 64%); animation: crBreathe 14s ease-in-out infinite; }
.cr-hd-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.cr-hd-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding: 0 8px; font-size: 13.5px; color: var(--muted) !important; text-decoration: none; }
.cr-hd-back svg { width: 18px; height: 18px; }
.cr-hd-back:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-radius: 10px; }
.cr-hd-pos { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: lining-nums; }
.cr-hd-t { position: relative; display: flex; flex-direction: column; margin-top: 30px; }
.cr-hd-k { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--chakra) 62%, #fff); text-shadow: 0 0 10px rgba(18,11,23,0.7); }
.cr-hd h1 { margin: 10px 0 0; font-family: var(--cr-serif); font-weight: 500; font-size: 50px; line-height: 1; letter-spacing: 0; text-transform: none; }
.cr-hd-theme { margin: 8px 0 0; font-family: var(--cr-serif); font-style: italic; font-size: 22px; line-height: 1.3; color: #e4d8d4; }
.cr-hd-d { margin: 12px 0 0; max-width: 560px; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.cr-chakra .cr-ch-body { padding-top: 22px; }
.cr-chakra .cr-tabs { gap: 24px; border-bottom-color: rgba(255,236,214,0.07); }
.cr-chakra .cr-tab { min-height: 44px; padding: 10px 0; font-weight: 500; }
.cr-chakra .cr-tab.is-on { font-weight: 600; color: var(--text); }
.cr-chakra .cr-meds { gap: 0; padding-top: 6px; }
.cr-filters { display: flex; flex-direction: column; gap: 14px; }
.cr-lvl { display: flex; padding: 4px; border-radius: 999px; background: rgba(255,236,214,0.05); border: 1px solid rgba(255,236,214,0.07); }
.cr-lvl-b { flex: 1; min-width: 0; height: 40px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: #c7b9bd; }
.cr-lvl-b.is-on { background: #f3ebe6; color: var(--cr-ink); }
.cr-durs { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-dur-b { height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,236,214,0.12); font-weight: 500; font-size: 13px; color: #b8a9ae; white-space: nowrap; font-variant-numeric: lining-nums; }
.cr-dur-b.is-on { border-color: rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.16); color: var(--text); }
.cr-lvl-b:focus-visible, .cr-dur-b:focus-visible, .cr-rs-main:focus-visible, .cr-rs-play:focus-visible, .cr-tile:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cr-lvl-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cr-list { margin-top: 16px; }
.cr-list.is-in { animation: crtIn .35s cubic-bezier(.2,.8,.2,1); }
.cr-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,236,214,0.07); }
.cr-rs { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 8px; border-bottom: 1px solid rgba(255,236,214,0.07); }
.cr-rs.is-on { border-radius: 16px; border-bottom-color: transparent; background: linear-gradient(100deg, rgba(var(--acc-rgb), 0.12), rgba(var(--acc-rgb), 0.02) 75%); }
.cr-rs.is-off { opacity: 0.55; }
.cr-rs-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,236,214,0.16); color: var(--chakra); transition: transform .2s; }
.cr-rs-play svg { width: 14px; height: 14px; margin-left: 2px; }
.cr-rs-play.is-playing { border-color: var(--chakra); background: var(--chakra); color: var(--cr-ink); }
.cr-rs-play.is-playing svg { margin-left: 0; }
.cr-rs.is-on .cr-rs-play { border-color: var(--chakra); }
.cr-rs-play.is-off { color: var(--muted); }
.cr-rs-main { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 48px; padding: 4px 0; text-align: left; color: var(--text); }
.cr-rs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-rs-t b { font-weight: 500; font-size: 15.5px; line-height: 1.3; }
.cr-rs-t span { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #a8989e; }
.cr-rs-t span svg { flex: none; width: 13px; height: 13px; color: var(--chakra); }
.cr-rs-min { flex: none; font-weight: 500; font-size: 13px; color: #a8989e; font-variant-numeric: lining-nums tabular-nums; }
.cr-rs-min small { margin-left: 3px; font-size: 12px; }
.cr-rs-more { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0 4px; animation: crtIn .35s cubic-bezier(.2,.8,.2,1); }
.cr-rs-more .cr-mc-done { margin: 0; }
.cr-rs-more .cr-mc-done .done-btn { width: auto; height: 44px; padding: 0 18px; }
.cr-rs-more .off-pill { min-height: 44px; }
.cr-rows-none { margin: 0; padding: 22px 0; font-size: 14px; color: var(--muted); }
.cr-extras { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.cr-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 18px; text-align: left; color: var(--text); background: rgba(255,236,214,0.04); border: 1px solid rgba(255,236,214,0.07); }
.cr-tile b { font-family: var(--cr-serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
.cr-tile span { font-size: 12.5px; color: #a8989e; }
.cr-tiles:only-child, .cr-tiles .cr-tile:only-child { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) {
  .cr-rs-main:hover .cr-rs-t b { color: #fff; }
  .cr-rs-play:not(.is-off):hover { transform: scale(1.06); }
  .cr-dur-b:not(.is-on):hover, .cr-lvl-b:not(.is-on):hover { color: var(--text); }
  .cr-tile:hover { border-color: rgba(var(--acc-rgb), 0.4); }
}
@media (max-width: 1023px) {
  .cr-lvl-b, .cr-dur-b { height: 44px; }
}
@media (min-width: 1024px) {
  .cr-hd { margin: -44px -56px 0; padding: 30px 64px 8px; }
  .cr-hd-glow { top: -160px; right: 4%; width: 560px; height: 560px; }
  .cr-hd-t { margin-top: 40px; }
  .cr-hd h1 { font-size: 64px; }
  .cr-hd-theme { font-size: 26px; }
  .cr-chakra .cr-ch-body { max-width: 680px; padding: 26px 8px 0; }
  .cr-chakra .cr-weeknav { max-width: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-hd-glow, .cr-list.is-in, .cr-rs-more { animation: none; }
  .cr-lvl-b, .cr-rs-play, .cr-tile { transition: none; }
}

/* Großer Player: Vollbild im Chakra-Farbfeld, atmendes Lichtfeld im oberen Drittel */
.pfull.is-cr { background: var(--chakra); }
.pfull.is-cr::before { position: fixed; inset: 0; left: 0; top: 0; width: auto; height: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 30%, rgba(26,17,32,0.62) 56%, #1a1120 84%); }
.pfull.is-cr::after { content: ''; position: fixed; left: 50%; top: min(300px, 36vh); width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,250,240,0.75) 0, rgba(255,250,240,0.2) 22%, transparent 55%); animation: crBreathe 12s ease-in-out infinite; will-change: transform; }
.pfull.is-cr .pf-in { z-index: 1; max-width: 520px; padding: var(--safe-top) 26px calc(36px + var(--safe-bottom)); color: #f6ede2; }
.pfull.is-cr .pf-head { margin-top: 6px; color: #1a1120; }
.pfull.is-cr .pf-x { color: #1a1120; }
.pfull.is-cr .pf-kicker { color: #1a1120; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; }
.pfull.is-cr .pf-art { display: none; }
.pfull.is-cr .pf-pre { margin-top: auto; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chakra); }
.pfull.is-cr .pf-title { margin: 4px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1; color: #f6ede2; text-transform: none; letter-spacing: 0; }
.pfull.is-cr .pf-pre[hidden] + .pf-title { margin-top: auto; }
.pfull.is-cr .pf-sub { margin-top: 4px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 20px; color: var(--muted); }
.pfull.is-cr .pf-seek { margin-top: 26px; }
.pfull.is-cr .pf-seek .seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #f6ede2 var(--v, 0%), rgba(255,236,214,0.18) var(--v, 0%)); }
.pfull.is-cr .pf-seek .seek::-moz-range-track { height: 3px; background: linear-gradient(90deg, #f6ede2 var(--v, 0%), rgba(255,236,214,0.18) var(--v, 0%)); }
.pfull.is-cr .pf-seek .seek::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -5px; background: #f6ede2; box-shadow: none; }
.pfull.is-cr .pf-seek .seek::-moz-range-thumb { width: 13px; height: 13px; background: #f6ede2; }
.pfull.is-cr .pf-times { margin-top: 2px; font-size: 12px; }
.pfull.is-cr .pf-ctls { margin-top: 18px; }
.pfull.is-cr .ctl.play { justify-self: center; width: 72px; height: 72px; background-color: #f6ede2; background-size: 22px; box-shadow: none; }
.pfull.is-cr [data-pf="back"] svg, .pfull.is-cr [data-pf="fwd"] svg { display: none; }
.pfull.is-cr [data-pf="back"]::before, .pfull.is-cr [data-pf="fwd"]::before { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--muted); }
.pfull.is-cr [data-pf="back"]::before { content: '−15'; }
.pfull.is-cr [data-pf="fwd"]::before { content: '+15'; }
.pfull.is-cr .pf-pill { border-color: rgba(255,236,214,0.2); color: var(--muted); }
.pfull.is-cr .pf-done.is-done { background: var(--chakra); border-color: var(--chakra); color: #1a1120; }
.pfull.is-cr .pf-vol { margin-top: 16px; color: var(--muted); }
.pfull.is-cr .pf-acts { margin-top: 16px; padding-top: 0; grid-template-columns: 1fr; }
.pfull.is-cr .pf-act { height: 44px; border-color: rgba(255,236,214,0.14); background: rgba(255,236,214,0.04); color: #f6ede2; font-weight: 600; }
@media (min-width: 1024px) {
  .pfull.is-cr::before { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 30%, rgba(26,17,32,0.6) 70%, #1a1120 100%); }
  .pfull.is-cr::after { width: 760px; height: 760px; margin: -380px 0 0 -380px; top: 320px; }
  .pfull.is-cr .pf-in { max-width: none; min-height: 100%; padding: 30px 64px 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto auto auto auto; column-gap: 48px; align-items: end; }
  .pfull.is-cr .pf-head { grid-column: 1 / -1; grid-row: 1; align-self: start; margin: 0 -10px; }
  .pfull.is-cr .pf-kicker { font-size: 12px; letter-spacing: 0.16em; }
  .pfull.is-cr .pf-pre { grid-column: 1; grid-row: 3; font-size: 12px; }
  .pfull.is-cr .pf-title { grid-column: 1; grid-row: 4; margin-top: 6px; font-size: 64px; }
  .pfull.is-cr .pf-pre[hidden] + .pf-title { margin-top: 6px; }
  .pfull.is-cr .pf-sub { grid-column: 1; grid-row: 5; margin-top: 6px; font-size: 26px; }
  .pfull.is-cr[data-theme-kurs] .pf-ctls { grid-column: 2; grid-row: 3 / span 3; display: flex; align-items: center; gap: 32px; margin: 0; }
  .pfull.is-cr .ctl.play { width: 84px; height: 84px; background-size: 26px; }
  .pfull.is-cr .pf-seek { grid-column: 1 / -1; grid-row: 6; margin-top: 32px; }
  .pfull.is-cr .pf-times { font-size: 13px; margin-top: 4px; }
  .pfull.is-cr .pf-vol { grid-column: 1; grid-row: 7; max-width: 360px; margin-top: 18px; }
  .pfull.is-cr .pf-acts { grid-column: 2; grid-row: 7; margin-top: 18px; min-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-rings i, .cr-orb i, .pfull.is-cr::after { animation: none; }
  .cr-seg-b, .cr-alt, .cr-row-n, .cr-mods > summary::after, .cr-more > summary::after { transition: none; }
}

/* ---------- 8. Inner-Winner-Screens (Design-Handoff „Inner Winner Zone App“; _konzepte/kurse-app/designs-umsetzung.md) ----------
   Start als Dashboard (.iw-dash, Claude Design 06.10. Screen 02), Übersicht mit Filter (.iw-lib, Screen 03), Lauf (.iw-lauf),
   großer Player mit Fortschrittsrahmen (.pfull.is-iw), Anmeldung (.login.is-iw). Die Klassen entstehen nur in app.js
   iwDashHtml/iwLibHtml/iwLaufHtml/iwPaintPlayer/iwLogin, also nur in der Inner Winner Zone. Weichgezeichnete Hintergründe sind
   vorab gerechnete 64-px-Bilder (covers/inner-winner/blur/), kein CSS-Filter. */
.iw, .pfull.is-iw, .login.is-iw {
  --iw-v: #d4ff3a; --iw-v3: rgba(212,255,58,0.3); --iw-v6: rgba(212,255,58,0.6); --iw-line: rgba(255,255,255,0.1);
  --iw-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --iw-body: 'Barlow', system-ui, sans-serif; --iw-mono: 'JetBrains Mono', ui-monospace, monospace;
}
.iw { font-family: var(--iw-body); color: #fff; }
.iw a { color: inherit; text-decoration: none; }
.iw-kick, .iw-label { font: 600 11px/1.3 var(--iw-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--iw-v); }
.iw-label { color: rgba(255,255,255,0.5); }
.iw-title { margin: 0; font: italic 900 62px/0.84 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: #fff; overflow-wrap: normal; hyphens: manual; }
.iw-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; background: var(--iw-v); color: #000 !important;
  font: italic 900 19px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.02em; }
.iw-go svg { width: 15px; height: 15px; flex: none; }
.iw-ghost { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.2);
  font: italic 900 16px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }

/* Bausteine der Bühne am Desktop (Abschnitt 9): Beschreibung, Fassungen als Zeile, Knöpfe */
.iw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-desc { margin: 0; font: 500 14px/1.4 var(--iw-body); color: rgba(255,255,255,0.72); text-wrap: pretty; }
.iw-fass { display: flex; flex-wrap: wrap; align-items: center; margin: -8px 0 -6px -6px; }
.iw-f:not(:last-of-type)::before { content: '·'; order: 2; margin-left: 8px; color: rgba(255,255,255,0.35); }
.iw-f { display: inline-flex; align-items: center; min-height: 34px; padding: 0 6px; font: 600 11px/1 var(--iw-mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.55); white-space: nowrap; }
.iw-f.is-on { color: var(--iw-v); }
.iw-f.is-today::after { content: '✓'; margin-left: 4px; color: var(--iw-v); }
.iw-f.is-solo { padding-left: 6px; }
.iw-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 4px; }
.iw-go.is-playing { background: #fff; }
/* Bühne am Desktop (v138): Texte zum Lesen („Lesen“ als Link), Gesperrtes ohne Knopf, Auszug aus dem Text höchstens vier Zeilen */
a.iw-go { text-decoration: none; }
.iw-go.is-off { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6) !important; cursor: default; }
.iw-desc.is-ex { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }

/* Schwarz wie im Design, ohne den violetten Schein der Hauptmarke */
body[data-theme-kurs="inner-winner"] .glow { display: none; }

/* Start (mobil): Dashboard. Begrüßung mit Streak-Pille, Weiter-Karte, Feuer und Eis als zwei Welten, Lektionen-Fortschritt.
   Farben aus dem Design: Feuer #ff6a2b, Eis #8fd3ff, Lektionen und alles andere Volt. */
.iw-dash, .iw-lib { --iw-fire: #ff6a2b; --iw-ice: #8fd3ff; }
.iw-dash { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto; padding: 6px 4px 28px; }
.iw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.iw-date { display: block; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.iw-hello h1 { margin: 2px 0 0; font: italic 900 28px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: #fff; }
.iw-pill { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--iw-v); color: #000 !important; font: italic 900 15px/1 var(--iw-cond); text-transform: uppercase; }
.iw-dash .iw-date { letter-spacing: 0.14em; }
.iw-dash .iw-hello h1 { font-size: 34px; }
.iw-dash .inst-card { margin: 0; border-radius: 14px; border-color: rgba(212,255,58,0.4); background: #111; }
.iw-dash .presence { color: rgba(255,255,255,0.6); }
.iw-contw { display: flex; flex-direction: column; gap: 14px; }
.iw-contw > .iw-label { font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.iw-cont { --iw-acc: var(--iw-v); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 18px; background: #141414; border: 1px solid rgba(255,255,255,0.1); }
.iw-cont.is-feuer { --iw-acc: var(--iw-fire); }
.iw-cont.is-eis { --iw-acc: var(--iw-ice); }
.iw-cont-bg { position: absolute; inset: 0; background: #141414 center / cover no-repeat; opacity: 0.5; transform: scale(1.3); }
.iw-cont-bg.is-raw { inset: -40px; transform: none; filter: blur(30px); }
.iw-cont::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; }
.iw-cont-top, .iw-cont-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.iw-cont-img { flex: none; width: 136px; height: 76px; border-radius: 10px; overflow: hidden; background: #1f1f1f; box-shadow: 0 12px 24px -8px rgba(0,0,0,0.7); }
.iw-cont-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-cont-t { flex: 1; min-width: 0; }
.iw-cont-k { display: block; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--iw-acc); }
.iw-cont-t b { display: block; margin-top: 6px; font: italic 900 24px/0.92 var(--iw-cond); text-transform: uppercase; color: #fff; }
.iw-cont-p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.iw-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); overflow: hidden; }
.iw-bar i { display: block; height: 100%; background: var(--iw-acc); }
.iw-cont-rest { font: 600 11px/1.3 var(--iw-mono); text-transform: uppercase; color: rgba(255,255,255,0.65); }
.iw-cont-go { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--iw-v); color: #000; }
.iw-cont-go svg { width: 18px; height: 18px; }
.iw-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.iw-world { --w-c: var(--iw-v); position: relative; overflow: hidden; box-sizing: border-box; height: 206px; padding: 14px; border-radius: 18px; background: #0d0d0d; border: 1px solid;
  display: flex; flex-direction: column; justify-content: space-between; }
.iw-world::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.iw-world.is-feuer { --w-c: var(--iw-fire); border-color: rgba(255,106,43,0.4); }
.iw-world.is-feuer::before { background: radial-gradient(circle at 25% 115%, rgba(255,106,43,0.55), rgba(255,106,43,0) 65%); }
.iw-world.is-eis { --w-c: var(--iw-ice); border-color: rgba(143,211,255,0.4); }
.iw-world.is-eis::before { background: radial-gradient(circle at 75% 115%, rgba(143,211,255,0.55), rgba(143,211,255,0) 65%); }
.iw-world-k { position: relative; display: flex; justify-content: space-between; gap: 6px; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-c); }
.iw-world-k span:last-child { font-size: 14px; line-height: 1; }
.iw-world-b { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.iw-world-b b { font: italic 900 60px/0.8 var(--iw-cond); text-transform: uppercase; color: var(--w-c); }
.iw-world-b span { font: 500 12px/1.3 var(--iw-body); color: rgba(255,255,255,0.75); }
.iw-lcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #111; border: 1px solid rgba(255,255,255,0.07); }
.iw-lcard-h { display: flex; justify-content: space-between; gap: 12px; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.iw-lcard-all { color: #fff; white-space: nowrap; }
.iw-lcard-t { font: italic 900 20px/1 var(--iw-cond); text-transform: uppercase; color: #fff; }
.iw-segs { display: flex; gap: 4px; }
.iw-segs.is-many { gap: 3px; }
.iw-segs i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); }
.iw-segs i.is-done { background: var(--iw-v); }
.iw-segs i.is-next { background: #fff; }
.iw-dash .iw-ghost { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .iw-world:hover, .iw-lcard:hover { border-color: rgba(255,255,255,0.35); }
  .iw-world.is-feuer:hover { border-color: var(--iw-fire); }
  .iw-world.is-eis:hover { border-color: var(--iw-ice); }
}

/* Übersicht (#uebersicht): Kopf mit Filter-Farbe, Filter klebt unter der Kopfzeile, Abschnitte Lektionen, Feuer, Eis, Mehr */
.iw-lib { --acc: var(--iw-v); --glow: rgba(212,255,58,0.14); position: relative; display: flex; flex-direction: column; gap: 18px; padding: 6px 4px 28px; }
.iw-lib[data-f="feuer"] { --acc: var(--iw-fire); --glow: rgba(255,106,43,0.35); }
.iw-lib[data-f="eis"] { --acc: var(--iw-ice); --glow: rgba(143,211,255,0.3); }
.iw-lib::before { content: ''; position: absolute; z-index: -1; left: -16px; right: -16px; top: -120px; height: 440px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, var(--glow), rgba(0,0,0,0) 62%); }
.iw-lib-h .iw-label { font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.iw-lib-t { margin: 10px 0 0; font: italic 900 88px/0.8 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: var(--acc); }
.iw-lib-c { margin: 8px 0 0; font: 700 16px/1.15 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.06em; color: #fff; }
.iw-filter-w { position: sticky; top: max(var(--top-h, 0px), var(--safe-top, 0px)); z-index: 3; margin: 0 -20px; padding: 8px 20px; background: rgba(0,0,0,0.92); }
.iw-filter { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #151515; }
.iw-ftab { flex: 1; min-width: 0; height: 38px; border-radius: 999px; font: italic 900 14px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.65); }
.iw-ftab.is-on { background: var(--acc); color: #000; }
.iw-sec { --acc2: var(--iw-v); display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.iw-sec.is-feuer { --acc2: var(--iw-fire); }
.iw-sec.is-eis { --acc2: var(--iw-ice); }
.iw-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.iw-sec-h .iw-kick { font-size: 10px; letter-spacing: 0.14em; color: var(--acc2); }
.iw-sec-h h2 { margin: 4px 0 0; font: italic 900 40px/0.85 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: #fff; }
.iw-sec.is-feuer h2, .iw-sec.is-eis h2 { color: var(--acc2); }
.iw-sec-n { flex: none; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-lrows { list-style: none; margin: -2px 0 0; padding: 0; border-top: 1px solid var(--iw-line); }
.iw-lr { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--iw-line); color: #fff; }
.iw-lr-n { flex: none; box-sizing: border-box; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,0.2);
  font: italic 900 15px/1 var(--iw-cond); color: rgba(255,255,255,0.5); }
.iw-lr-n svg { width: 16px; height: 16px; }
.iw-lr.is-done .iw-lr-n { background: var(--iw-v); border-color: var(--iw-v); color: #000; }
.iw-lr.is-next .iw-lr-n { border-color: #fff; color: #fff; }
.iw-lr-t { flex: 1; min-width: 0; }
.iw-lr-t b { display: block; font: italic 900 19px/1 var(--iw-cond); text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.iw-lr.is-done .iw-lr-t b { color: rgba(255,255,255,0.55); }
.iw-lr-t span { display: block; margin-top: 5px; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-lr-s { flex: none; max-width: 34%; text-align: right; font: italic 900 13px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.04em; color: var(--iw-v); }
.iw-lr.is-done .iw-lr-s, .iw-lr.is-off .iw-lr-s { color: rgba(255,255,255,0.4); }
.iw-lr.is-off { opacity: 0.55; }
.iw-lr > svg { flex: none; width: 16px; height: 16px; color: var(--iw-v); }
.iw-lr.is-plain .iw-lr-t b { font-size: 17px; }
.iw-lall { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: -6px; font: 600 10px/1 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.iw-lall svg { width: 14px; height: 14px; color: var(--iw-v); }
.iw-sub { margin: 6px 0 -4px; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-ltiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
.iw-lt { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; text-align: left; color: #fff; }
.iw-lt-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1a1a1a; }
.iw-lt-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-lt-play { position: absolute; right: 6px; bottom: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acc2); color: #000; }
.iw-lt-play svg { width: 11px; height: 11px; }
.iw-lt-t { font: italic 900 17px/0.95 var(--iw-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.iw-lt-d { display: flex; align-items: center; gap: 4px; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-lt-d svg { width: 12px; height: 12px; color: var(--acc2); }
.iw-lib .iw-ghost { margin-top: 6px; }
.iw-dash a:focus-visible, .iw-dash button:focus-visible, .iw-lib a:focus-visible, .iw-lib button:focus-visible { outline: 2px solid var(--iw-v); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .iw-lt:hover .iw-lt-img { box-shadow: 0 0 0 2px var(--acc2); }
  .iw-lr:not(.is-off):hover .iw-lr-t b { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .iw-ftab:not(.is-on):hover { color: #fff; }
}

/* Wochenreihe (Lauf, Seitenleiste) */
.iw-week { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.iw-week li { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.iw-week i { display: block; box-sizing: border-box; width: 100%; height: 34px; border-radius: 6px; background: #161616; border: 1.5px solid rgba(255,255,255,0.06); }
.iw-week li.is-on i { background: var(--iw-v); border-color: var(--iw-v); }
.iw-week li.is-today i { border-color: #fff; }
.iw-lauf .iw-week i { height: 37px; }
.iw-week span { font: 800 11px/1 var(--iw-cond); text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* Lauf */
.iw-lauf { display: flex; flex-direction: column; gap: 18px; padding: 6px 4px 28px; }
.iw-lauf-a, .iw-lauf-b { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.iw-big { display: flex; align-items: flex-end; gap: 12px; margin-top: -8px; }
.iw-big-n { font: italic 900 180px/0.78 var(--iw-cond); letter-spacing: -0.03em; color: var(--iw-v); }
.iw-big-l { font: italic 900 24px/1 var(--iw-cond); text-transform: uppercase; padding-bottom: 10px; }
.iw-lauf.is-new .iw-big-n { color: #fff; }
.iw-note { margin: -6px 0 0; font: 500 13px/1.45 var(--iw-body); color: rgba(255,255,255,0.7); }
.iw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 12px 0; border-top: 1px solid var(--iw-line); border-bottom: 1px solid var(--iw-line); }
.iw-stats dt { font: 600 9px var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-stats dd { margin: 4px 0 0; font: italic 900 30px/1 var(--iw-cond); }
.iw-stats small { font-size: 16px; }
.iw-miles ol { position: relative; list-style: none; margin: 0; padding: 0 4px; display: flex; justify-content: space-between; }
.iw-miles ol::before, .iw-miles ol::after { content: ''; position: absolute; left: 20px; top: 15px; height: 2px; }
.iw-miles ol::before { right: 20px; background: rgba(255,255,255,0.12); }
.iw-miles ol::after { width: calc((100% - 40px) * var(--f, 0)); background: var(--iw-v); }
.iw-miles li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.iw-miles i { box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #000; border: 2px solid rgba(255,255,255,0.2); color: #000; }
.iw-miles i svg { width: 15px; height: 15px; }
.iw-miles li.is-on i { background: var(--iw-v); border-color: var(--iw-v); }
.iw-miles li.is-next i { border-color: #fff; }
.iw-miles span { font: italic 900 15px/1 var(--iw-cond); color: rgba(255,255,255,0.4); }
.iw-miles li.is-on span { color: var(--iw-v); }
.iw-miles li.is-next span { color: #fff; }
.iw-next { margin: -6px 0 0; font: 500 13px/1.45 var(--iw-body); color: rgba(255,255,255,0.7); }
.iw-next b { color: var(--iw-v); font-weight: 700; }
.iw-heat { display: flex; flex-direction: column; gap: 8px; }
.iw-heat-head { display: flex; justify-content: space-between; gap: 12px; font: 600 9px var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iw-heat-grid { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.iw-heat-grid i { border-radius: 3px; background: #191919; }
.iw-heat-grid i.l1 { background: var(--iw-v3); }
.iw-heat-grid i.l2 { background: var(--iw-v6); }
.iw-heat-grid i.l3 { background: var(--iw-v); }
.iw-heat-grid i.is-future { background: #0b0b0b; }
.iw-heat-grid i.is-today { box-shadow: inset 0 0 0 1.5px #fff; }

/* Tab-Leiste im Inner-Winner-Look: Versalien, kursiv, ohne Symbole (Design 02 bis 05). Start · Übersicht · Lauf ·
   Community · Downloads: Community und Downloads bleiben Tabs, Profil liegt oben am Avatar. */
@media (max-width: 1023px) {
  [data-theme-kurs="inner-winner"] .tabs { padding-top: 10px; background: #000; border-top: 1px solid rgba(255,255,255,0.08); }
  [data-theme-kurs="inner-winner"] .tab { min-height: 44px; padding: 0; font: italic 900 13px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
  [data-theme-kurs="inner-winner"] .tab .tab-ico { display: none; }
  [data-theme-kurs="inner-winner"] .tab.is-on, [data-theme-kurs="inner-winner"] .tab.is-home { color: var(--sand); font-weight: 900; }
}
/* Fünf Reiter bei 360 px: „Community“ und „Downloads“ stießen aneinander */
@media (max-width: 380px) {
  [data-theme-kurs="inner-winner"] .tab { font-size: 12px; letter-spacing: 0.02em; }
}

/* Großer Player: Cover im Fortschrittsrahmen, darunter der Stapel aus Titel, Satz, Fassungen, Fortschritt, Steuerung */
.pfull.is-iw { background: #000; }
.pfull.is-iw::before { position: fixed; inset: -30px; left: -30px; top: -30px; width: auto; height: auto; background: var(--iw-bg) center / cover no-repeat; opacity: 0.55; }
.pfull.is-iw::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.95) 80%); }
.pfull.is-iw .pf-in { z-index: 1; max-width: 440px; box-sizing: border-box; padding: var(--safe-top) 20px calc(24px + var(--safe-bottom)); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr repeat(6, auto); column-gap: 12px; }
.pfull.is-iw .pf-in > * { grid-column: 1 / -1; min-width: 0; }
.pfull.is-iw .pf-head { grid-row: 1; height: 56px; }
.pfull.is-iw .pf-kicker { font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.7); }
.pfull.is-iw .pf-art, .pfull.is-iw .pf-big, .pfull.is-iw .pf-pre { display: none; }
.pf-frame { grid-row: 2; position: relative; box-sizing: border-box; margin-top: 12px; height: clamp(120px, 24vh, 202px); border-radius: 20px; padding: 5px;
  background: conic-gradient(from 0deg, #d4ff3a calc(var(--pp, 0) * 360deg), rgba(255,255,255,0.12) 0); box-shadow: 0 0 50px rgba(212,255,58,0.18); }
.pf-frame[hidden] { display: none; }
.pf-frame-img { display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: 15px; border: 4px solid #000; background: #111 center / cover no-repeat; }
.pfull.is-iw .pf-title { grid-row: 4; margin: 0; padding-top: 18px; font: italic 900 52px/0.86 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: #fff; }
.pfull.is-iw .pf-sub { grid-row: 5; margin-top: 14px; font: 500 13px/1.4 var(--iw-body); color: rgba(255,255,255,0.6); }
.pf-chips { grid-row: 6; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pf-chips[hidden] { display: none; }
.pf-chip { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 9px 14px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff;
  font: 800 14px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.pf-chip small { font: 500 11px/1 'Barlow', system-ui, sans-serif; text-transform: inherit; letter-spacing: inherit; opacity: 0.7; }
.pf-chip.is-on { background: #d4ff3a; border-color: #d4ff3a; color: #000; }
/* Fassungen mobil als Raster mit zwei Spalten, Minuten rechtsbündig (Design 06.10., Screen 04) */
@media (max-width: 1023px) {
  .pfull.is-iw .pf-chips:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pfull.is-iw .pf-chip { justify-content: space-between; white-space: nowrap; }
}
.pfull.is-iw .pf-seek { grid-row: 7; margin-top: 14px; }
.pfull.is-iw .pf-seek .seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #d4ff3a var(--v, 0%), rgba(255,255,255,0.14) var(--v, 0%)); }
.pfull.is-iw .pf-seek .seek::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #d4ff3a var(--v, 0%), rgba(255,255,255,0.14) var(--v, 0%)); }
.pfull.is-iw .pf-seek .seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; background: #d4ff3a; box-shadow: none; }
.pfull.is-iw .pf-seek .seek::-moz-range-thumb { width: 12px; height: 12px; background: #d4ff3a; }
.pfull.is-iw .pf-times { margin-top: 2px; font: 600 11px var(--iw-mono); color: rgba(255,255,255,0.55); }
.pfull.is-iw .pf-ctls { grid-row: 8; margin-top: 10px; }
.pfull.is-iw:not(.no-left) .pf-ctls::after { content: ''; width: 52px; flex: none; }
.pfull.is-iw .ctl.play { justify-self: center; width: 76px; height: 76px; border-radius: 50%; background-color: #d4ff3a; background-size: 24px; box-shadow: none; }
.pfull.is-iw [data-pf="back"] svg, .pfull.is-iw [data-pf="fwd"] svg { display: none; }
.pfull.is-iw [data-pf="back"]::before, .pfull.is-iw [data-pf="fwd"]::before { font: 700 15px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; color: rgba(255,255,255,0.7); }
.pfull.is-iw [data-pf="back"]::before { content: '−15'; }
.pfull.is-iw [data-pf="fwd"]::before { content: '+15'; }
.pfull.is-iw .pf-done { border-radius: 999px; border-color: rgba(255,255,255,0.2); color: #fff; }
.pfull.is-iw .pf-done.is-done { background: #d4ff3a; border-color: #d4ff3a; color: #000; }
.pfull.is-iw .pf-vol { grid-row: 9; grid-column: 1; margin-top: 12px; color: rgba(255,255,255,0.55); }
.pfull.is-iw .pf-acts { grid-row: 9; grid-column: 2; margin-top: 12px; padding-top: 0; display: flex; }
.pfull.is-iw .pf-act { height: 40px; padding: 0 16px; border-radius: 999px; border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #fff;
  font: italic 900 14px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
/* Kennenlernkurs-Kostprobe im Inner-Winner-Player (v210): zwei Knöpfe (Erledigt, Zur Lektion) passen am Handy nicht neben
   die Lautstärke, sie bekommen eine eigene Zeile darunter (Klasse is-acts2 aus app.js paintFullPlayer) */
@media (max-width: 1023px) {
  .pfull.is-iw.is-acts2 .pf-vol { grid-column: 1 / -1; }
  .pfull.is-iw.is-acts2 .pf-acts { grid-row: 10; grid-column: 1 / -1; gap: 8px; }
  .pfull.is-iw.is-acts2 .pf-act { flex: 1 1 0; }
}
.pf-dlb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.pf-dlb svg { width: 20px; height: 20px; }
.pf-dlb.is-done { color: #d4ff3a; }
.pf-dlb small { font: 600 11px 'JetBrains Mono', monospace; color: #d4ff3a; }

/* Anmeldung im Inner-Winner-Look (nur mit Kurs-Kontext, app.js loginKurs): Cover groß, darunter E-Mail und Code */
html:has(body.is-iwlogin) { background: #000; }
body.is-iwlogin { background: #000; }
body.is-iwlogin .top, body.is-iwlogin .glow { display: none; }
.iwl { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 0; overflow: hidden; pointer-events: none; color: #fff; }
.iwl[hidden] { display: none; }
.iwl-bg { position: absolute; inset: 0; background: #000 url(covers/inner-winner/blur/5.jpg) 50% 20% / cover no-repeat; opacity: 0.55; transform: scale(1.12); }
.iwl-cover, .iwl-top { position: absolute; left: 50%; width: min(400px, calc(100% - 40px)); transform: translateX(-50%); }
.iwl-cover { top: calc(var(--safe-top) + 52px); height: 180px; border-radius: 14px; background: #111 url(covers/inner-winner/hd/5.jpg) center / cover no-repeat; box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7); }
.iwl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 48%, #000 70%); }
.iwl-top { top: calc(var(--safe-top) + 14px); display: flex; align-items: center; justify-content: space-between; font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.iwl-live { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.14em; color: #d4ff3a; }
.iwl-live i { width: 8px; height: 8px; border-radius: 50%; background: #d4ff3a; box-shadow: 0 0 8px #d4ff3a; }
body.is-iwlogin .login.is-iw { position: relative; display: flex; flex-direction: column; justify-content: flex-end; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; color: #fff; }
.login.is-iw .login-art { display: none; }
body.is-iwlogin .login.is-iw .login-body { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 440px; margin: 0 auto; padding: calc(var(--safe-top) + 250px) 20px calc(34px + var(--safe-bottom)); }
.login.is-iw h1 { margin: 0 0 18px; font: italic 900 76px/0.82 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0; color: #fff; }
.login.is-iw #f-mail > p:first-child, .login.is-iw .steps { display: none; }
.login.is-iw label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login.is-iw p { font: 500 13px/1.45 'Barlow', system-ui, sans-serif; color: rgba(255,255,255,0.6); margin: 0 0 12px; }
.login.is-iw p strong { color: #fff; }
.login.is-iw .field svg { display: none; }
.login.is-iw input, .login.is-iw .field input { height: 52px; margin: 0 0 12px; padding: 0 16px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.14);
  color: #fff; font: 500 15px 'Barlow', system-ui, sans-serif; }
.login.is-iw input::placeholder { color: rgba(255,255,255,0.4); }
.login.is-iw input:focus { border-color: rgba(212,255,58,0.6); }
.login.is-iw input.is-bad { border-color: #ff7a59; }
.login.is-iw #i-code { font: 600 20px 'Barlow', system-ui, sans-serif; letter-spacing: 0.3em; }
.login.is-iw #i-code::placeholder { font-size: 15px; letter-spacing: 0; }
.login.is-iw .btn { height: 54px; margin-top: 4px; border-radius: 999px; background: #d4ff3a; color: #000; box-shadow: none; font: italic 900 20px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.login.is-iw .btn svg { display: none; }
.login.is-iw .btn.is-ok { background: #fff; opacity: 1; }
.login.is-iw .login-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.login.is-iw .link { display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0; font: 500 13px 'Barlow', system-ui, sans-serif; color: rgba(255,255,255,0.6); text-decoration: none; text-align: left; }
.login.is-iw #b-nozugang { color: #fff; text-align: right; }
.login.is-iw #b-have-code, .login.is-iw #b-resend { margin-top: 0; }
.login.is-iw #f-code .link { display: inline-flex; align-items: center; margin-right: 16px; }
.login.is-iw #b-resend { margin-top: 10px; }
.login.is-iw p.login-hint { margin: 6px 0 0; text-align: left; font-size: 12px; color: rgba(255,255,255,0.45); }
.login.is-iw .login-err { margin: -2px 0 12px !important; color: #ff7a59 !important; font: 600 13px/1.4 'Barlow', system-ui, sans-serif; text-align: left; }
.login.is-iw .inst-card { background: rgba(255,255,255,0.06); border-color: rgba(212,255,58,0.35); }
.login.is-iw .inst-card strong { font-family: 'Barlow', system-ui, sans-serif; font-weight: 700; }
.login.is-iw .inst-step { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.login.is-iw .inst-n { background: #d4ff3a; color: #000; font: italic 900 15px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.login.is-iw .inst-ico { background: rgba(255,255,255,0.07); }
.login.is-iw .inst-text { font-family: 'Barlow', system-ui, sans-serif; font-weight: 500; }
.login.is-iw .inst-text strong { color: #d4ff3a; font-weight: 600; }
@media (max-width: 1023px) and (max-height: 700px) {
  .iwl-cover { height: 130px; }
  body.is-iwlogin .login.is-iw .login-body { padding-top: calc(var(--safe-top) + 196px); }
  .login.is-iw h1 { font-size: 60px; }
}

/* ---------- 9. Inner Winner Desktop (Handoff „Inner Winner Zone Desktop“, 1440 × 900; _konzepte/kurse-app/designs-umsetzung.md) ----------
   Ab 1024 px: Seitenleiste im Kurs-Look, Start als Bühne (app.js iwStageHtml statt Feed), Player mit Cover links und
   Steuerung rechts, Lauf mit Meilenstein-Leiter und 26 Wochen Heatmap, Anmeldung zweispaltig. Mobil bleibt alles wie oben;
   die Desktop-Bausteine im gemeinsamen Markup sind dort ausgeblendet. */
.iw-sstreak, .iw-big-x, .iw-ladder, .iw-hd, .iw-heat-grid i.is-old, .pf-dlt, .pf-kno, .pf-next, .iwl-h, .iwl-kick, .iwl-hd { display: none; }

@media (min-width: 1024px) {
  /* Seitenleiste: Logo als Schriftzug, Kurs-Umschalter mit Volt-Punkt, Reiter ohne Symbole. Breite bleibt 264 px wie in
     allen Kursen (sonst springt sie beim Kurswechsel). Die Suche sitzt auf dem Start oben rechts (Handoff). */
  body.is-app[data-theme-kurs="inner-winner"]::before { background: #050505; border-right-color: rgba(255,255,255,0.07); }
  /* Kopf und Reiter ohne eigene Fläche (app.css färbt sie für Kurs-Themes, das zeichnete zwei Kästen in die Leiste) */
  body.is-app[data-theme-kurs="inner-winner"] .top, body.is-app[data-theme-kurs="inner-winner"] .tabs { background: none; border-top: 0; }
  body.is-app[data-theme-kurs="inner-winner"] .brand-ico { display: none; }
  body.is-app[data-theme-kurs="inner-winner"] .brand, body.is-app[data-theme-kurs="inner-winner"] .brand-name { font: italic 900 22px/1 var(--iw-cond, 'Barlow Condensed'), 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0; color: #fff; }
  body.is-app[data-theme-kurs="inner-winner"] .brand .acc { color: inherit; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch { height: 44px; gap: 10px; margin-top: 16px; padding: 0 12px; border: 1px solid rgba(212,255,58,0.35); border-radius: 12px; background: none; color: #fff;
    font: 800 15px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch .ks-name { font: inherit; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch .ks-img { display: none; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d4ff3a; box-shadow: 0 0 10px #d4ff3a; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch.has-dot::after { top: 4px; left: 18px; }
  body.is-app[data-theme-kurs="inner-winner"] .kurs-switch:hover { border-color: rgba(212,255,58,0.7); }
  body.is-app[data-theme-kurs="inner-winner"] .lupe { display: none; }
  body.is-app[data-theme-kurs="inner-winner"] .tabs { top: 96px; padding: 0 18px; }
  body.is-app.has-kurs-switch[data-theme-kurs="inner-winner"] .tabs { top: 154px; }
  body.is-app[data-theme-kurs="inner-winner"] .tab { height: 42px; padding: 0 12px; border-radius: 10px; color: rgba(255,255,255,0.6);
    font: italic 900 17px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
  body.is-app[data-theme-kurs="inner-winner"] .tab .tab-ico { display: none; }
  body.is-app[data-theme-kurs="inner-winner"] .tab.is-on { background: rgba(212,255,58,0.12); color: #d4ff3a; font-weight: 900; }
  body.is-app[data-theme-kurs="inner-winner"] .tab.is-home:not(.is-on) { color: rgba(255,255,255,0.6); font-weight: 900; }
  body.is-app[data-theme-kurs="inner-winner"] .tab:not(.is-on):hover { background: rgba(255,255,255,0.05); color: #fff; }
  body.is-app[data-theme-kurs="inner-winner"] .foot { color: rgba(255,255,255,0.45); }
  .iw-sstreak { display: flex; align-items: center; gap: 12px; margin: 0 -10px 16px; padding: 14px; border-radius: 14px; background: #111; color: #fff !important; text-decoration: none !important; word-break: normal; }
  .iw-sstreak b { font: italic 900 40px/0.8 'Barlow Condensed', 'Arial Narrow', sans-serif; color: #d4ff3a; }
  .iw-sstreak span { font: 800 12px/1.15 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
  .iw-sstreak:hover b { text-shadow: 0 0 18px rgba(212,255,58,0.5); }

  /* Start als Bühne: oben Begrüßung und Suche, in der Mitte die gewählte Session, unten die Reihe.
     Hintergrund = Cover der gewählten Session, vorab weichgezeichnet (64 px), über die ganze Fläche rechts der Leiste. */
  body.is-iwfeed .glow, body[data-theme-kurs="inner-winner"] .glow { display: none; }
  body.is-app.is-iwfeed { padding-bottom: 0; }
  body.is-app.is-iwfeed:has(#player:not([hidden])) { padding-bottom: 88px; }
  main[data-view="start:"]:has(.iw-stage) { max-width: none; margin: 0; padding: 0; }
  .iw-stage { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; max-width: 1640px; margin: 0 auto; display: flex; flex-direction: column; padding: 36px 56px 40px; }
  body:has(#player:not([hidden])) .iw-stage { min-height: calc(100dvh - 88px); }
  .iw-st-bg { position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; z-index: -1; background: #000 center / cover no-repeat; opacity: 0.55; transform: scale(1.12); }
  .iw-st-bg.is-raw { transform: none; inset: -80px -80px -80px calc(var(--side) - 80px); filter: blur(50px) saturate(1.1); }
  .iw-stage::after { content: ''; position: fixed; left: var(--side); right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55) 50%, #000 78%); }
  .iw-st-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .iw-stage .iw-date { font-size: 11px; }
  .iw-stage .iw-hello h1 { margin-top: 4px; font-size: 40px; }
  .iw-stage .iw-hello .presence { margin-top: 8px; color: rgba(255,255,255,0.6); }
  .iw-search { flex: none; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 300px; height: 44px; padding: 0 18px; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); font: 500 14px/1 var(--iw-body); color: rgba(255,255,255,0.5) !important; }
  .iw-search svg { width: 16px; height: 16px; flex: none; }
  .iw-search:hover { border-color: rgba(212,255,58,0.5); color: #fff !important; }
  .iw-hero { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 620fr) minmax(300px, 420fr); gap: 48px; align-items: center; margin: 34px 0 32px; }
  .iw-hero-cover { display: block; aspect-ratio: 620 / 349; max-height: calc(100dvh - 470px); border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8); }
  body:has(#player:not([hidden])) .iw-hero-cover { max-height: calc(100dvh - 558px); }
  .iw-hero-cover img, .iw-hero-cover .iw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
  .iw-hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .iw-stage .iw-kick { font-size: 12px; }
  .iw-title-d { font-size: clamp(56px, calc((100dvh - 560px) * 0.3), 96px); line-height: 0.82; }
  body:has(#player:not([hidden])) .iw-title-d { font-size: clamp(56px, calc((100dvh - 648px) * 0.3), 96px); }
  .iw-stage .iw-desc { max-width: 440px; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,0.75); }
  .iw-stage .iw-f { font-size: 12px; }
  .iw-stage .iw-f:hover { color: #fff; }
  .iw-stage .iw-f.is-on { color: var(--iw-v); }
  .iw-stage .iw-acts { gap: 12px; margin-top: 6px; }
  .iw-stage .iw-go { height: 56px; padding: 0 30px; font-size: 21px; }
  .iw-stage .iw-go:hover { box-shadow: 0 0 30px rgba(212,255,58,0.35); }
  .iw-off { display: inline-flex; align-items: center; gap: 8px; height: 56px; box-sizing: border-box; padding: 0 24px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.3); color: #fff;
    font: italic 900 18px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.02em; }
  .iw-off svg { width: 18px; height: 18px; flex: none; }
  .iw-off small { display: none; }
  .iw-off .pf-dlt { display: inline; }
  .iw-off:hover { border-color: #fff; }
  .iw-off.is-done { border-color: rgba(212,255,58,0.6); color: var(--iw-v); }
  .iw-stage .iw-f { min-height: 28px; }
  /* Weg zur Lektion (Text, Kommentare): als Pille auf dem Cover, das Cover selbst ist der Link */
  .iw-hero-cover { position: relative; }
  .iw-cover-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.14); font: 600 10px/1 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); transition: border-color .15s, color .15s; }
  .iw-cover-tag svg { width: 14px; height: 14px; flex: none; }
  .iw-hero-cover:hover .iw-cover-tag, .iw-hero-cover:focus-visible .iw-cover-tag { border-color: var(--iw-v); color: #fff; }
  .iw-hero-cover:focus-visible { outline: 2px solid var(--iw-v); outline-offset: 3px; }
  .iw-row { flex: none; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .iw-row-head { display: flex; align-items: center; gap: 16px; }
  .iw-row-h { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font: italic 900 24px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0; color: #fff; }
  .iw-rowtab { min-height: 32px; padding: 0; font: inherit; text-transform: inherit; color: rgba(255,255,255,0.35); transition: color .15s; }
  .iw-rowtab:hover { color: rgba(255,255,255,0.75); }
  .iw-rowtab.is-on { color: #fff; box-shadow: inset 0 -3px 0 var(--iw-v); }
  .iw-row-n { flex: none; font: 600 11px/1 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .iw-row-nav { display: none; gap: 6px; }
  .iw-row.is-over .iw-row-nav { display: flex; }
  .iw-row-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.4); color: #fff; font: 700 18px/1 var(--iw-body); }
  .iw-row-nav button:hover:not(:disabled) { border-color: var(--iw-v); color: var(--iw-v); }
  .iw-row-nav button:disabled { opacity: 0.3; cursor: default; }
  .iw-tiles { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(156px, calc((100% - (var(--n, 5) - 1) * 16px) / var(--n, 5)), 216px);
    gap: 16px; margin: -6px; padding: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding: 6px; scrollbar-width: none; }
  .iw-tiles::-webkit-scrollbar { display: none; }
  .iw-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0; text-align: left; color: #fff !important; text-decoration: none; opacity: 0.6; scroll-snap-align: start; transition: opacity .2s; }
  .iw-tile.is-on, .iw-tile.is-mod, .iw-tile:hover, .iw-tile:focus-visible { opacity: 1; }
  .iw-tile:focus-visible { outline: none; }
  .iw-tile-img { display: block; aspect-ratio: 216 / 130; border-radius: 12px; overflow: hidden; background: #111; outline: 2px solid transparent; outline-offset: 3px; }
  .iw-tile.is-on .iw-tile-img { outline-color: var(--iw-v); }
  .iw-tile:focus-visible .iw-tile-img { outline-color: #fff; }
  .iw-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .iw-tile-k { font: 600 10px/1.2 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--iw-v); }
  /* Höchstens zwei Zeilen: lange Modulnamen („Kooperationen, Coaching & Vorträge“) schoben die Reihe sonst unter den Mini-Player */
  .iw-tile-t { font: italic 900 20px/0.95 var(--iw-cond); text-transform: uppercase; overflow-wrap: break-word;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-bottom: 1px; }
  .iw-row .pv-parts { margin: 8px 0 0; }
  .iw-row .iw-ghost { align-self: flex-start; padding: 0 24px; }
  /* „Alle Kurse ansehen“ als letzte Karte der Reihe „Mehr“ */
  .iw-tile.is-all .iw-tile-img { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1.5px dashed rgba(255,255,255,0.25); box-sizing: border-box; }
  .iw-tile.is-all .iw-tile-img svg { width: 28px; height: 28px; color: var(--iw-v); }
  .iw-tile.is-all:hover .iw-tile-img, .iw-tile.is-all:focus-visible .iw-tile-img { border-color: var(--iw-v); }
  /* Schmaler Desktop (1024 bis 1279 px, Inhalt 650 bis 900 px breit): Cover und Text je eine Hälfte, Knöpfe kompakter */
  @media (max-width: 1279px) {
    .iw-stage { padding: 32px 40px 32px; }
    .iw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
    .iw-search { width: 240px; }
    .iw-stage .iw-go { padding: 0 22px; font-size: 19px; }
    .iw-off { padding: 0 18px; font-size: 17px; }
    .iw-stage .iw-desc { font-size: 15px; }
  }
  /* Niedrige Fenster (1024 × 768, 1280 × 800): Bühne enger, damit die Reihe auch mit offenem Mini-Player ohne Scrollen passt */
  @media (max-height: 820px) {
    .iw-stage { padding-top: 24px; padding-bottom: 20px; }
    .iw-hero { margin: 20px 0; }
  }
  /* Mini-Player unter 1280 px: app.css gibt Titel und Lautstärke je bis 320 px, die Spur in der Mitte blieb bei 1024 px
     fast ohne Breite (Regler über der Zeit). Mitte mindestens 260 px, Lautstärke schmaler, ohne Prozentangabe. */
  @media (max-width: 1279px) {
    body.is-app[data-theme-kurs="inner-winner"] .player { grid-template-columns: minmax(0, 1fr) minmax(260px, 1.4fr) auto; gap: 20px; }
    body.is-app[data-theme-kurs="inner-winner"] .p-vol .vol { width: 72px; }
    body.is-app[data-theme-kurs="inner-winner"] .p-vol .vol-pct { display: none; }
  }

  /* Niedrige Fenster mit Mini-Player (z. B. 1024 × 768): Beschreibung höchstens zwei Zeilen. Lange Titel verkleinert iwFit(). */
  @media (max-height: 820px) {
    body:has(#player:not([hidden])) .iw-stage .iw-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  }

  /* Player: ganzes Fenster ohne Leiste. Cover im Fortschrittsrahmen links, rechts Titel, Fassungen und Steuerung,
     unter dem Cover „Als Nächstes“. Lautstärke und „Zur Lektion“ bleiben unter der Steuerung. */
  .pfull.is-iw::after { background: radial-gradient(ellipse at 35% 45%, rgba(0,0,0,0.2), rgba(0,0,0,0.85) 75%); }
  .pfull.is-iw .pf-in { max-width: 1680px; min-height: 100%; padding: 32px 72px 56px 96px;
    grid-template-columns: minmax(0, 760fr) minmax(340px, 448fr); grid-template-rows: auto auto auto auto auto auto auto auto 1fr auto; column-gap: 64px; }
  /* v144 (Fabian 07.10.): Fassungen und Steuerung gehören zusammen. Rechts alles direkt untereinander (Zeilen 2 bis 8),
     der freie Platz liegt in Zeile 9 unter allem. Das Cover reicht bis in diese Zeile, damit seine Höhe dort landet
     und nicht als Lücke zwischen Fassungen und Fortschritt. „Als Nächstes“ steht in Zeile 10 unter dem Cover. */
  .pfull.is-iw .pf-in > * { grid-column: 2; }
  .pfull.is-iw .pf-head { grid-column: 1 / -1; grid-row: 1; height: 42px; margin: 0 -24px 56px -48px; }
  .pfull.is-iw .pf-x, .pfull.is-iw .pf-dlb { width: auto; height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 999px; background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.12); color: #fff; font: italic 900 16px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.02em; }
  .pfull.is-iw .pf-x:hover, .pfull.is-iw .pf-dlb:hover { border-color: rgba(255,255,255,0.4); }
  .pfull.is-iw .pf-x svg { display: none; }
  .pfull.is-iw .pf-x::after { content: '← ' attr(data-iwl); }
  .pfull.is-iw .pf-dl { width: auto; }
  .pfull.is-iw .pf-dlb svg { width: 16px; height: 16px; }
  .pfull.is-iw .pf-dlb small { display: none; }
  .pfull.is-iw .pf-dlb .pf-dlt { display: inline; }
  .pfull.is-iw .pf-dlb.is-done { color: #d4ff3a; border-color: rgba(212,255,58,0.45); }
  .pfull.is-iw .pf-kicker { font-size: 11px; letter-spacing: 0.16em; }
  .pfull.is-iw .pf-kno { display: inline; }
  .pf-frame { grid-column: 1 !important; grid-row: 2 / 10; align-self: start; width: min(100%, calc((100dvh - 330px) * 1.727)); height: auto; aspect-ratio: 760 / 440; margin: 0;
    border-radius: 26px; padding: 6px; box-shadow: 0 0 90px rgba(212,255,58,0.18); }
  .pf-frame-img { border-radius: 20px; border-width: 5px; }
  .pfull.is-iw .pf-title { grid-row: 2; padding-top: 0; font-size: 88px; line-height: 0.84; }
  .pfull.is-iw .pf-sub { grid-row: 3; margin-top: 18px; font-size: 16px; line-height: 1.45; color: rgba(255,255,255,0.65); }
  .pf-chips { grid-row: 4; margin-top: 24px; gap: 8px; }
  .pf-chips::before { content: 'Fassung'; flex: 0 0 100%; margin-bottom: 2px; font: 600 10px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .pf-chip { min-height: 40px; padding: 11px 16px 10px; font-size: 15px; }
  .pf-chip small { font-size: 12px; }
  .pf-chip:not(.is-on):hover { border-color: rgba(255,255,255,0.4); }
  .pfull.is-iw .pf-seek { grid-row: 5; margin-top: 28px; }
  .pfull.is-iw .pf-seek .seek::-webkit-slider-runnable-track { height: 4px; }
  .pfull.is-iw .pf-seek .seek::-moz-range-track { height: 4px; }
  .pfull.is-iw .pf-seek .seek::-webkit-slider-thumb { margin-top: -4px; }
  .pfull.is-iw .pf-times { margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.6); }
  .pfull.is-iw .pf-ctls { grid-row: 6; margin-top: 18px; display: flex; justify-content: flex-start; align-items: center; gap: 36px; }
  .pfull.is-iw .pf-ctls::after { display: none; }
  .pfull.is-iw .pf-ctls .ctl:not(.play) { width: 44px; height: 44px; }
  .pfull.is-iw .ctl.play { width: 92px; height: 92px; background-size: 28px; }
  .pfull.is-iw [data-pf="back"]::before, .pfull.is-iw [data-pf="fwd"]::before { font-size: 18px; color: rgba(255,255,255,0.75); }
  .pfull.is-iw .pf-vol { grid-row: 7; grid-column: 2; margin-top: 18px; }
  .pfull.is-iw .pf-acts { grid-row: 8; grid-column: 2; justify-self: start; margin-top: 12px; }
  .pfull.is-iw .pf-next:not([hidden]) { grid-column: 1 !important; grid-row: 10; align-self: end; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .pf-next-l { font: 600 10px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
  .pf-next-row { display: flex; gap: 12px; }
  .pf-nt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); color: #fff; text-align: left; }
  .pf-nt:hover { border-color: rgba(212,255,58,0.5); }
  .pf-nt-img { flex: none; width: 72px; height: 44px; border-radius: 8px; background: #111 center / cover no-repeat; }
  @media (max-width: 1279px) {
    .pfull.is-iw .pf-in { padding: 28px 48px 40px 56px; column-gap: 48px; }
    .pfull.is-iw .pf-head { margin: 0 -24px 40px -32px; }
    .pf-nt-img { display: none; }
    .pf-nt { padding: 10px 12px; }
  }
  .pf-nt b { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: italic 900 16px/0.95 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; }

  /* Lauf: links Streak, Woche und Zahlen, rechts die Meilenstein-Leiter, darunter die Heatmap über 26 Wochen */
  .iw-lauf { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: repeat(5, auto) 1fr auto; gap: 0 40px; align-items: start; padding: 0 0 40px; }
  .iw-lauf-a, .iw-lauf-b { display: contents; }
  .iw-lauf-a > .iw-label { grid-column: 1; grid-row: 1; }
  .iw-lauf .iw-big { grid-column: 1; grid-row: 2; margin-top: 32px; gap: 18px; }
  .iw-lauf .iw-week { grid-column: 1; grid-row: 3; margin-top: 28px; gap: 8px; }
  .iw-lauf .iw-note { grid-column: 1; grid-row: 4; margin-top: 12px; font-size: 14px; }
  .iw-lauf .iw-go-s { grid-column: 1; grid-row: 5; justify-self: start; margin-top: 14px; }
  .iw-lauf .iw-stats { grid-column: 1; grid-row: 6; margin-top: 20px; padding: 16px 0; }
  .iw-lauf .iw-ladder { grid-column: 2; grid-row: 1 / 7; }
  .iw-lauf .iw-heat { grid-column: 1 / -1; grid-row: 7; margin-top: 44px; gap: 10px; }
  .iw-lauf .iw-miles, .iw-lauf .iw-next, .iw-lauf .iw-big-l { display: none; }
  .iw-big-n { font-size: 260px; line-height: 0.76; }
  .iw-big-x { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
  .iw-big-x > b { font: italic 900 44px/0.9 var(--iw-cond); text-transform: uppercase; color: #fff; }
  .iw-big-x > span { font: 500 15px/1.4 var(--iw-body); color: rgba(255,255,255,0.7); }
  .iw-big-x > span b { color: var(--iw-v); font-weight: 700; }
  .iw-lauf .iw-week i { height: 44px; border-radius: 8px; }
  .iw-lauf .iw-week span { font-size: 12px; }
  .iw-lauf .iw-stats dt { font-size: 10px; }
  .iw-lauf .iw-stats dd { font-size: 44px; }
  .iw-lauf .iw-stats small { font-size: 22px; }
  .iw-ladder { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: #0c0c0c; border: 1px solid rgba(255,255,255,0.07); }
  .iw-ladder .iw-label { margin-bottom: 14px; font-size: 10px; letter-spacing: 0.14em; }
  .iw-ladder ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .iw-ladder li { display: flex; align-items: center; gap: 14px; box-sizing: border-box; height: 56px; padding: 0 16px; border-radius: 14px; background: #0d0d0d; border: 1.5px solid #1c1c1c; color: rgba(255,255,255,0.35); }
  .iw-ladder li.is-on { background: rgba(212,255,58,0.08); border-color: rgba(212,255,58,0.3); color: var(--iw-v); }
  .iw-ladder li.is-next { background: var(--iw-v); border-color: var(--iw-v); color: #000; }
  .iw-ladder b { flex: none; width: 56px; font: italic 900 32px/1 var(--iw-cond); }
  .iw-ladder span { flex: 1; min-width: 0; font: 800 14px/1.1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.08em; }
  .iw-ladder i { flex: none; width: 18px; height: 18px; }
  .iw-ladder i svg { display: block; width: 18px; height: 18px; }
  .iw-lauf .iw-big { flex-wrap: wrap; }
  @media (max-width: 1279px) {
    .iw-lauf { grid-template-columns: minmax(0, 1fr) 248px; column-gap: 28px; }
    .iw-big-n { font-size: 170px; }
    .iw-big-x > b { font-size: 30px; }
    .iw-big-x > span { font-size: 14px; }
    .iw-ladder { padding: 18px; }
    .iw-ladder li { height: 48px; gap: 10px; padding: 0 12px; }
    .iw-ladder b { width: 42px; font-size: 26px; }
    .iw-ladder span { font-size: 12px; letter-spacing: 0.06em; }
    .iw-lauf .iw-stats dd { font-size: 34px; }
    .iw-lauf .iw-stats small { font-size: 18px; }
  }
  .iw-heat-head { font-size: 10px; }
  .iw-heat-grid { grid-template-rows: repeat(7, 16px); gap: 5px; }
  .iw-heat-grid i.is-old { display: block; }
  .iw-hm { display: none; }
  .iw-hd { display: inline; }

  /* Anmeldung: links Cover und „Inner Winner Zone.“ groß, rechts das schwarze Formular (520 px) */
  body.is-iwlogin { --iwl-w: clamp(440px, 40vw, 520px); }
  .iwl { position: fixed; left: 0; right: var(--iwl-w); top: 0; bottom: 0; height: auto; }
  .iwl-bg { inset: -40px; opacity: 0.6; transform: none; background-position: center; }
  .iwl-shade { background: linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55) 70%, #000); }
  .iwl-top { left: 56px; top: 40px; width: auto; transform: none; justify-content: flex-start; gap: 10px; font-size: 11px; }
  .iwl-top::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #d4ff3a; box-shadow: 0 0 10px #d4ff3a; }
  .iwl-live { gap: 0; color: #fff; letter-spacing: 0.16em; }
  .iwl-live i { display: none; }
  .iwl-live::before { content: '·'; margin-right: 10px; }
  .iwl-cover { left: 56px; right: 56px; width: auto; transform: none; top: 140px; height: clamp(180px, calc(100dvh - 480px), 560px); aspect-ratio: auto; border-radius: 18px; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8); }
  .iwl-h { display: block; position: absolute; left: 56px; right: 56px; bottom: 56px; font: italic 900 132px/0.8 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-size: min(132px, calc((100vw - var(--iwl-w) - 112px) * 0.188)); text-transform: uppercase; letter-spacing: -0.01em; }
  body.is-app.is-iwlogin, body.is-iwlogin { padding-bottom: 0; }
  body.is-iwlogin .login.is-iw { min-height: 100vh; min-height: 100dvh; }
  body.is-iwlogin .login.is-iw .login-body { box-sizing: border-box; width: var(--iwl-w); max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0 0 0 auto; padding: 40px clamp(48px, 4.5vw, 64px);
    display: flex; flex-direction: column; justify-content: center; background: #000; border-left: 1px solid rgba(255,255,255,0.08); }
  .login.is-iw .iwl-kick { display: block; margin-bottom: 14px; font: 600 11px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: #d4ff3a; }
  .login.is-iw h1, body:not(.is-app) .login.is-iw h1 { margin-bottom: 28px; font-size: 56px; line-height: 0.86; }
  .login.is-iw .iwl-hm { display: none; }
  .login.is-iw .iwl-hd { display: inline; }
  .login.is-iw input, .login.is-iw .field input { height: 56px; margin-bottom: 14px; padding: 0 18px; font-size: 16px; }
  .login.is-iw .btn { height: 58px; margin-top: 6px; font-size: 22px; }
  .login.is-iw .login-err { font-size: 14px; }
  .login.is-iw p { font-size: 14px; }
  .login.is-iw .link { font-size: 14px; }
  .login.is-iw .link:hover, .login.is-iw #b-nozugang:hover { color: #d4ff3a; }
}

/* Übersicht am Desktop (Reiter „Übersicht“ in der Seitenleiste): breite Raster statt zwei Spalten, Filter klebt oben */
@media (min-width: 1024px) {
  .iw-lib { gap: 22px; padding: 0 0 48px; }
  .iw-lib::before { left: -56px; right: -56px; top: -44px; height: 560px; }
  .iw-lib-t { font-size: 120px; }
  .iw-lib-c { font-size: 20px; }
  .iw-filter-w { top: 0; margin: 0 -56px; padding: 10px 56px; background: rgba(10,10,10,0.92); }
  .iw-filter { max-width: 560px; }
  .iw-sec { margin-top: 18px; gap: 16px; }
  .iw-sec-h h2 { font-size: 52px; }
  .iw-lrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .iw-ltiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 18px; }
  .iw-lt-t { font-size: 21px; }
  .iw-lib .iw-ghost { align-self: flex-start; padding: 0 28px; }
}

/* ---------- 10. Schlafkurs-Screens (Design „Schlafkurs App.dc.html“; _konzepte/kurse-app/designs-umsetzung.md) ----------
   Schlaf-Check (.skc), Start (.sk-start), Session-Detail (.sl.is-sk .sk-det), Nacht-Modus (.sk-night, body.is-sknight),
   Player mit Atem-Mond (.pfull.is-sk). Die Klassen entstehen nur in app.js (sk*-Funktionen), also nur im Schlafkurs mit
   Meditationen. Atmen nur über transform/opacity, prefers-reduced-motion stellt alles still. */
.sk, .skc, .sk-det, .sk-night, .pfull.is-sk, .pfull.is-skloop {
  --sk-sand: #e6d3b3; --sk-ink: #1a1330; --sk-text: #f1ecf8; --sk-mute: #a9a2c0; --sk-dim: #7f7896; --sk-lav: 142, 155, 216;
  --sk-card: rgba(230,211,179,0.05); --sk-line: rgba(230,211,179,0.14);
}
.sk-kick { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-sand); font-weight: 500; }
.sk-label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-mute); }
.sk-card { display: block; padding: 16px; border-radius: 18px; background: var(--sk-card); border: 1px solid var(--sk-line); color: var(--sk-text); text-decoration: none; }
.sk-ct { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; }
.sk-cta { width: 100%; min-height: 54px; padding: 15px; border-radius: 12px; background: var(--sk-sand); color: var(--sk-ink); font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, background .3s, color .3s; }
.sk-cta svg { width: 16px; height: 16px; }
.sk-cta:active { transform: scale(.98); }
.sk-cta:disabled { background: rgba(230,211,179,0.12); color: var(--sk-dim); cursor: default; transform: none; }
/* Mond als Kreis mit Sichel: --mn = Breite der beleuchteten Seite (0 leer, 30 voll bei 30 px) */
.sk-mn { display: block; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(230,211,179,0.1); box-shadow: inset calc(-1 * var(--mn, 0px)) 0 0 0 var(--sk-sand, #e6d3b3); transition: box-shadow .8s ease; }
.sk-mn.is-s { width: 18px; height: 18px; background: rgba(230,211,179,0.14); }
.sk-mn.is-cres { width: 22px; height: 22px; background: none; box-shadow: inset calc(-1 * var(--mn, 7px)) 3px 0 0 var(--sk-sand, #e6d3b3); transform: rotate(-12deg); }
.sk-mn.is-dim { width: 30px; height: 30px; box-shadow: inset -9px 4px 0 0 rgba(230,211,179,0.7); filter: drop-shadow(0 0 10px rgba(230,211,179,0.25)); }
/* Sternenhimmel mit Mondsichel (Bild der Meditationen, Hero, Empfehlung) */
.sk-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(1px 1px at 18% 20%, #fff9 99%, transparent), radial-gradient(1px 1px at 76% 30%, #fff8 99%, transparent),
    radial-gradient(1px 1px at 40% 12%, #fff7 99%, transparent), radial-gradient(1px 1px at 88% 58%, #fff6 99%, transparent),
    radial-gradient(1.5px 1.5px at 62% 44%, #fff8 99%, transparent), radial-gradient(1px 1px at 8% 64%, #fff6 99%, transparent),
    radial-gradient(1px 1px at 30% 40%, #fff5 99%, transparent), radial-gradient(ellipse 80% 60% at 75% 20%, rgba(142,155,216,0.18), transparent 70%),
    linear-gradient(180deg, #1a1538 0%, #0f0c21 70%, #0a0818); }
.sk-cres { position: absolute; right: 16%; top: 16%; width: 66px; height: 66px; border-radius: 50%; box-shadow: inset -15px 7px 0 0 #e6d3b3;
  filter: drop-shadow(0 0 18px rgba(230,211,179,0.45)); transform: rotate(-12deg); }
.sk-sky.is-l .sk-cres { right: auto; left: 14%; }
.sk-orb { display: block; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f6ecda, #e6d3b3 50%, #b9a587);
  transform: scale(.62); transition: transform var(--skd, .4s) ease-in-out, box-shadow .4s; }
.sk-orb[data-ph="in"] { transform: scale(1); box-shadow: 0 0 18px rgba(230,211,179,0.45); }
.sk-orb[data-ph="out"] { transform: scale(.5); box-shadow: 0 0 18px rgba(230,211,179,0.45); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sk-chip { min-height: 38px; padding: 8px 11px; border-radius: 999px; font-size: 13px; border: 1px solid var(--sk-line); color: #d9d3e6; transition: all .2s; }
.sk-chip.is-on { background: rgba(230,211,179,0.12); color: var(--sk-sand); border-color: var(--sk-sand); font-weight: 500; }
.sk-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--sk-mute); }

/* Schlaf-Check */
.skc { min-height: calc(100dvh - 84px - var(--safe-top) - var(--safe-bottom)); display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding: 4px 8px 24px; color: var(--sk-text); }
.skc-body { flex: 1; display: flex; flex-direction: column; }
.skc-nav { display: flex; align-items: center; gap: 14px; height: 44px; margin-bottom: 18px; }
.skc-back { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(230,211,179,0.06); border: 1px solid var(--sk-line); color: var(--sk-sand); }
.skc-back svg { width: 18px; height: 18px; }
.skc-bars { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.skc-bars i { display: block; height: 4px; border-radius: 4px; background: rgba(230,211,179,0.14); transition: background .4s; }
.skc-bars i.is-on { background: var(--sk-sand); }
.skc-n { width: 32px; text-align: right; font-size: 12px; color: var(--sk-mute); }
.skc-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 24px 0; }
.skc-logo { position: relative; width: 132px; height: 132px; margin-bottom: 12px; background: radial-gradient(circle, rgba(230,211,179,0.22), transparent 68%); border-radius: 50%; }
.skc-logo img { position: absolute; inset: 18px; width: 96px; height: 96px; object-fit: contain; }
.skc h1 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; color: var(--sk-text); text-wrap: balance; }
.skc-h1 { font-size: 50px; line-height: 1; }
.skc-h2 { font-size: 38px; line-height: 1.05; margin: 8px 0 8px !important; }
.skc-h3 { font-size: 42px; line-height: 1; margin: 8px 0 20px !important; }
.skc-p { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: var(--sk-mute); text-wrap: pretty; }
.skc-hero .skc-p { margin: 0; font-size: 16px; line-height: 1.55; }
.skc-skip { margin-top: 14px; align-self: center; min-height: 44px; font-size: 14px; color: var(--sk-mute); text-decoration: underline; }
.skc-opts { display: flex; flex-direction: column; gap: 10px; }
.skc-opt { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: 16px; background: var(--sk-card); border: 1px solid var(--sk-line); color: var(--sk-text); transition: all .2s; }
.skc-opt:hover { border-color: rgba(230,211,179,0.4); }
.skc-opt.is-on { background: rgba(230,211,179,0.12); border-color: var(--sk-sand); }
.skc-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(230,211,179,0.08); }
.skc-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.skc-tx b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; }
.skc-tx span { font-size: 13px; color: var(--sk-mute); }
.skc-rh { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; padding: 12px 16px 12px 12px; }
.skc-orb { width: 64px; height: 64px; border-radius: 12px; background: rgba(10,8,24,0.6); display: grid; place-items: center; overflow: hidden; }
.skc-r { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 15px; color: var(--sk-text); }
.skc-opt.is-on .skc-r { color: var(--sk-sand); }
.skc-live { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(142,155,216,0.08); font-size: 13px; line-height: 1.5; color: #c9c3dc; }
.skc-fill { flex: 1; min-height: 24px; }
.skc-beds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skc-bed { min-height: 52px; border-radius: 12px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 16px; background: var(--sk-card); color: var(--sk-text); border: 1px solid var(--sk-line); transition: all .2s; }
.skc-bed.is-on { background: var(--sk-sand); color: var(--sk-ink); border-color: var(--sk-sand); }
.skc-rem { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--sk-card); border: 1px solid var(--sk-line); text-align: left; color: var(--sk-text); }
.sk-sw { flex: none; width: 50px; height: 30px; border-radius: 99px; padding: 3px; background: rgba(230,211,179,0.14); display: flex; justify-content: flex-start; transition: background .25s; }
.sk-sw i { width: 24px; height: 24px; border-radius: 50%; background: var(--sk-mute); }
.sk-sw.is-on { background: var(--sk-sand); justify-content: flex-end; }
.sk-sw.is-on i { background: var(--sk-ink); }
.skc-rec { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(230,211,179,0.2); background: #171331; padding-top: 150px; isolation: isolate; }
.skc-rec .sk-sky { height: 150px; bottom: auto; }
.skc-rec .sk-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, #171331); }
.skc-rec .sk-cres { right: 20%; top: 22%; width: 58px; height: 58px; box-shadow: inset -13px 6px 0 0 #e6d3b3; }
.skc-rec-b { position: relative; padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.skc-rec-b b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.skc-rec-b > span { font-size: 14px; color: var(--sk-mute); }
.skc-rec-b p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #d9d3e6; text-wrap: pretty; }
.skc-note { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(142,155,216,0.08); font-size: 13px; line-height: 1.45; color: #c9c3dc; }

/* Start */
.sk-hello { display: flex; flex-direction: column; gap: 6px; margin: 14px 4px 20px; }
.sk-date { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-mute); }
.sk-hello h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: var(--sk-text); }
.sk-hello .presence { margin-top: 6px; }
.sk-grid, .sk-main, .sk-side { display: flex; flex-direction: column; gap: 14px; }
.sk-side { margin-top: 14px; }
.sk-desk-only { display: none; }
.sk-desk-hide { display: flex; flex-direction: column; gap: 14px; }
.sk-feel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sk-feel-b { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; border-radius: 12px; border: 1px solid var(--sk-line); color: var(--sk-mute); font-size: 12px; transition: all .2s; }
.sk-feel-b .sk-mn { width: 26px; height: 26px; background: rgba(230,211,179,0.12); }
.sk-feel-b.is-on { background: rgba(230,211,179,0.12); border-color: var(--sk-sand); color: var(--sk-sand); }
.sk-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(230,211,179,0.22); color: var(--sk-text); text-decoration: none; isolation: isolate; }
.sk-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(15,12,33,0.05) 0%, rgba(15,12,33,0.55) 50%, rgba(15,12,33,0.95)); }
.sk-hero-in { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 14px; padding: 18px; }
.sk-hero-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sk-hero-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.01em; line-height: 1.2; }
.sk-hero-t > span:last-child { font-size: 13px; color: #d9d3e6; }
.sk-hero-play { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--sk-sand); color: var(--sk-ink); display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(230,211,179,0.08), 0 0 34px -6px rgba(230,211,179,0.5); transition: transform .12s; }
.sk-hero-play svg { width: 20px; height: 20px; margin-left: 3px; }
.sk-hero:active .sk-hero-play { transform: scale(.94); }
.sk-hero-go { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(230,211,179,0.3); color: var(--sk-sand); display: grid; place-items: center; }
.sk-hero-go svg { width: 18px; height: 18px; }
.sk-st-head { display: flex; align-items: baseline; gap: 10px; }
.sk-st-head b { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 0.9; color: var(--sk-sand); font-variant-numeric: lining-nums; }
.sk-st-head span { font-size: 14px; }
.sk-moons { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sk-moons li { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--sk-mute); }
.sk-moons li.is-today { color: var(--sk-text); font-weight: 600; }
.sk-moons li.is-today .sk-mn { outline: 2px solid var(--sk-sand); outline-offset: 3px; }
.sk-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--sk-mute); }
.sk-more { margin-top: 12px; border-top: 1px solid var(--sk-line); }
.sk-more summary { min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--sk-mute); cursor: pointer; list-style: none; }
.sk-more summary::-webkit-details-marker { display: none; }
.sk-more summary::after { content: ''; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid var(--sk-sand); border-bottom: 1.5px solid var(--sk-sand); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sk-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.sk-more .st-stats { margin-top: 4px; }
.sk-nightcard { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(142,155,216,0.14), rgba(230,211,179,0.04)); border-color: rgba(142,155,216,0.24); }
.sk-nightcard:hover { border-color: rgba(142,155,216,0.5); }
.sk-nightcard .sk-mn { width: 44px; height: 44px; border-radius: 50%; background: rgba(10,8,24,0.6); box-shadow: none; transform: none; position: relative; }
.sk-nightcard .sk-mn::after { content: ''; position: absolute; left: 11px; top: 11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -7px 3px 0 0 #e6d3b3; transform: rotate(-12deg); }
.sk-nc-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sk-nc-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; }
.sk-nc-t span { font-size: 13px; color: var(--sk-mute); }
.sk-nightcard > svg { width: 18px; height: 18px; color: var(--sk-sand); }
.sk-list { margin-top: 16px; }
.sk-h2 { margin: 0 0 8px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--sk-text); }
.sk-mod { border-top: 1px solid rgba(230,211,179,0.12); }
.sk-mod:last-of-type { border-bottom: 0; }
.sk-mod summary { min-height: 52px; }
.sk-mod-b { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--sk-card); border: 1px solid rgba(230,211,179,0.1); color: var(--sk-text); text-decoration: none; }
.sk-row:hover { border-color: rgba(230,211,179,0.3); }
.sk-row.is-off { opacity: .6; }
.sk-row-img { position: relative; flex: none; width: 56px; height: 42px; border-radius: 8px; overflow: hidden; }
.sk-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-row-img .sk-cres { width: 18px; height: 18px; box-shadow: inset -4px 2px 0 0 #e6d3b3; top: 8px; right: 10px; }
.sk-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-row-t .sk-kick { font-size: 10px; letter-spacing: 0.1em; }
.sk-row-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.25; }
.sk-row-ok { flex: none; width: 24px; height: 24px; color: var(--sk-sand); }
.sk-med { border-radius: 18px; overflow: hidden; background: var(--sk-card); border: 1px solid rgba(230,211,179,0.12); }
.sk-med-top { position: relative; display: block; padding-top: 96px; color: var(--sk-text); text-decoration: none; isolation: isolate; }
.sk-med-top .sk-sky { height: 96px; bottom: auto; }
.sk-med-top .sk-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(23,19,49,0.9)); }
.sk-med-top .sk-cres { width: 40px; height: 40px; box-shadow: inset -9px 4px 0 0 #e6d3b3; top: 18%; right: 20%; }
.sk-med-top .sk-sky.is-l .sk-cres { right: auto; left: 14%; }
.sk-med-t { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 0; }
.sk-med-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 16px; }
.sk-med-t span { font-size: 12px; color: var(--sk-mute); }
.sk-vars { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 14px; }
.sk-var { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 7px 11px; border-radius: 9px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px;
  background: rgba(230,211,179,0.06); color: var(--sk-text); border: 1px solid var(--sk-line); text-decoration: none; }
.sk-var:hover { border-color: var(--sk-sand); }
.sk-var.is-on { background: var(--sk-sand); color: var(--sk-ink); border-color: var(--sk-sand); }
.sk-var.is-on svg { color: var(--sk-ink); }
.sk-var svg { width: 14px; height: 14px; color: var(--sk-sand); }
.sk-var.is-off { opacity: .5; }
.sk-about .pv-desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--sk-mute); }

/* Session-Detail (Lektionsseite einer Meditation) */
.sl.is-sk .sl-crumb { position: relative; z-index: 2; }
/* Himmel reicht hinter den Krümel (der Krümel ist der Zurück-Weg, im Design der runde Knopf auf dem Bild) */
.sk-det { position: relative; margin: -48px -16px 0; padding: 270px 20px 0; isolation: isolate; color: var(--sk-text); }
.sk-det > .sk-sky { height: 330px; bottom: auto; z-index: -1; }
.sk-det > .sk-sky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,33,0.3) 0%, transparent 30%, rgba(15,12,33,0.6) 70%, #0f0c21); }
.sk-det > .sk-sky .sk-cres { width: 96px; height: 96px; box-shadow: inset -22px 10px 0 0 #e6d3b3; top: 26%; right: 22%; }
.sk-det > .sk-sky.is-l .sk-cres { right: auto; left: 14%; }
.sk-det-head { display: flex; flex-direction: column; }
.sk-det-head .sk-kick { letter-spacing: 0.08em; }
.sl.is-sk .sk-det-h { margin: 8px 0 6px; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.sk-det-meta { font-size: 14px; color: var(--sk-mute); }
.sk-det-sec { margin-top: 22px; }
.sk-seg { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; margin-top: 8px; padding: 4px; border-radius: 14px; background: var(--sk-card); border: 1px solid rgba(230,211,179,0.12); }
.sk-seg-b { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #d9d3e6; transition: all .25s; }
.sk-seg-b svg { width: 14px; height: 14px; }
.sk-seg-b.is-on { background: var(--sk-sand); color: var(--sk-ink); }
.sk-seg-b.is-off { opacity: .5; }
.sk-breath { margin-top: 10px; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(142,155,216,0.07); }
.sk-breath-o { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,8,24,0.55); }
.sk-breath-o .sk-orb { width: 34px; height: 34px; }
.sk-breath-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-breath-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14px; min-height: 1.2em; }
.sk-breath-t span { font-size: 13px; line-height: 1.45; color: #c9c3dc; text-wrap: pretty; }
.sk-go { margin-top: 24px; }
.sl.is-sk .sl-done { margin-top: 18px; }
@media (min-width: 1024px) {
  .sk-det { margin: 0; padding: 220px 28px 4px; border-radius: 22px; overflow: hidden; }
  .sl.is-sk .sl-crumb { margin-bottom: 14px; }
  .sk-det > .sk-sky { border-radius: 22px 22px 0 0; }
  .sk-go { max-width: 360px; }
}

/* Nacht-Modus: nichts Helles, ohne Tab-Leiste, Kopfzeile gedämpft */
body.is-sknight { background: radial-gradient(ellipse 90% 340px at 50% 0%, rgba(142,155,216,0.08), transparent 80%) no-repeat, #07061a; }
html:has(body.is-sknight) { background: #07061a; }
body.is-sknight .top { opacity: .45; }
body.is-sknight .glow { display: none; }
@media (max-width: 1023px) { body.is-sknight .tabs { display: none; } body.is-sknight { padding-bottom: calc(24px + var(--safe-bottom)); } }
/* Schlaf-Check als eigener Ablauf wie im Design: ohne Tab-Leiste, der Knopf steht unten. Die Kopfzeile bleibt (Kurs, Profil). */
@media (max-width: 1023px) {
  body:has(.skc) .tabs { display: none; }
  body:has(.skc), body:has(.skc):has(#player:not([hidden])) { padding-bottom: calc(24px + var(--safe-bottom)); }
  body:has(.skc) .player { bottom: calc(14px + var(--safe-bottom)); }
  body:has(.skc):has(#player:not([hidden])) .skc { padding-bottom: 96px; }
  /* Fußzeile ist hier leer, hielt aber 50 px Platz frei (Check und Nacht-Modus scrollten deshalb ein Stück) */
  body:has(.skc) .foot, body:has(.sk-night) .foot { display: none; }
}
/* Tab-Leiste mobil wie im Design: schwebende Pille mit Rand, Text ohne Symbole, Punkt über dem aktiven Reiter */
@media (max-width: 1023px) {
  body[data-theme-kurs="schlafkurs"] { --nav-h: 70px; }
  body[data-theme-kurs="schlafkurs"] .tabs { left: 12px; right: 12px; bottom: calc(8px + var(--safe-bottom) * 0.5); height: 62px; padding: 0; align-items: center; border-radius: 24px;
    background: #171331; border: 1px solid rgba(230,211,179,0.12); }
  body[data-theme-kurs="schlafkurs"] .tab { height: 100%; gap: 5px; padding: 0; font-size: 11px; color: #a9a2c0; font-weight: 400; }
  body[data-theme-kurs="schlafkurs"] .tab .tab-ico { display: none; }
  body[data-theme-kurs="schlafkurs"] .tab::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
  body[data-theme-kurs="schlafkurs"] .tab.is-on, body[data-theme-kurs="schlafkurs"] .tab.is-home { color: #e6d3b3; font-weight: 600; }
  body[data-theme-kurs="schlafkurs"] .tab.is-on::before { background: #e6d3b3; }
  body[data-theme-kurs="schlafkurs"] .tab-dot { top: 8px; }
  body[data-theme-kurs="schlafkurs"] .player { left: 12px; right: 12px; }
}
@media (min-width: 1024px) {
  /* Kopf der Seitenleiste ohne eigene Fläche (app.css färbt ihn für Kurs-Themes, das zeichnete einen helleren Kasten) */
  body.is-app[data-theme-kurs="schlafkurs"] .top { background: none; }
  /* Der Schein oben (800 px hoch, absolut) machte Seiten unter 800 px Fensterhöhe scrollbar */
  body[data-theme-kurs="schlafkurs"] .glow { max-height: 100dvh; }
}
/* Niedrige Fenster am Desktop (1024 × 768): Willkommen des Schlaf-Checks ohne Scrollen */
@media (min-width: 1024px) and (max-height: 820px) {
  .skc-hero { gap: 14px; padding: 8px 0; }
  .skc-logo { width: 104px; height: 104px; margin-bottom: 4px; }
  .skc-logo img { inset: 14px; width: 76px; height: 76px; }
}
/* Mini-Player unter 1280 px: Fortschrittsspur behält Breite (app.css gibt Titel und Lautstärke je bis 320 px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.is-app[data-theme-kurs="schlafkurs"] .player { grid-template-columns: minmax(0, 1fr) minmax(260px, 1.4fr) auto; gap: 20px; }
  body.is-app[data-theme-kurs="schlafkurs"] .p-vol .vol { width: 72px; }
  body.is-app[data-theme-kurs="schlafkurs"] .p-vol .vol-pct { display: none; }
}
.sk-night { min-height: calc(100dvh - 84px - var(--safe-top) - var(--safe-bottom)); display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding: 8px 8px 24px; }
.sk-n-top { display: flex; justify-content: space-between; align-items: center; }
.sk-n-off { min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--sk-dim); }
.sk-n-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 0; }
.sk-n-clock { font-family: var(--serif); font-size: 104px; line-height: 0.9; color: rgba(230,211,179,0.6); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.sk-night h1.sk-n-h { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.08; color: #d9d3e6; letter-spacing: -0.01em; }
.sk-n-p { margin: 0; font-size: 15px; line-height: 1.6; color: #8d86a6; text-wrap: pretty; }
.sk-n-bot { display: flex; flex-direction: column; gap: 10px; }
.sk-nplay { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: rgba(230,211,179,0.13); border: 1px solid rgba(230,211,179,0.22); text-align: left; transition: transform .12s; }
.sk-nplay:active { transform: scale(.98); }
.sk-nplay-i { flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(230,211,179,0.75); color: #07061a; display: grid; place-items: center; }
.sk-nplay-i svg { width: 18px; height: 18px; margin-left: 3px; }
.sk-nplay-t { display: flex; flex-direction: column; gap: 3px; }
.sk-nplay-t b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 17px; color: var(--sk-sand); }
.sk-nplay-t span { font-size: 13px; color: var(--sk-mute); }

/* Player mit Atem-Mond */
.pf-sk, .pf-skhint, .pf-sksleep, .pf-skveil { display: none; }
.pfull.is-sk { background: radial-gradient(ellipse 100% 60% at 50% 42%, rgba(142,155,216,0.12), transparent 70%), #0a0818; }
.pfull.is-sk::before { display: none; }
.pfull.is-sk .pf-in { max-width: 480px; padding: var(--safe-top) 24px calc(28px + var(--safe-bottom)); color: var(--sk-text); }
.pfull.is-sk .pf-art, .pfull.is-sk .pf-big { display: none; }
.pfull.is-sk .pf-head { order: 0; margin-top: 6px; }
.pfull.is-sk .pf-kicker { color: var(--sk-mute); font-size: 11px; letter-spacing: 0.14em; }
.pfull.is-sk .pf-x { width: 42px; height: 42px; margin-left: 10px; border-radius: 50%; color: var(--sk-sand); background: rgba(230,211,179,0.07); border: 1px solid rgba(230,211,179,0.14); }
.pfull.is-sk .pf-x svg { width: 20px; height: 20px; }
.pfull.is-sk .pf-title { order: 1; margin: 6px 0 0; text-align: center; font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.pfull.is-sk .pf-sub { order: 2; margin-top: 2px; text-align: center; font-size: 13px; color: var(--sk-mute); }
.pfull.is-sk .pf-sk:not([hidden]) { order: 3; flex: 1; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.pf-sk-o { --o: min(320px, 34dvh); position: relative; width: var(--o); height: var(--o); display: grid; place-items: center; transform: scale(.78); transition: transform var(--skd, .8s) ease-in-out, opacity 2s; }
.pf-sk[data-ph="in"] .pf-sk-o { transform: scale(1); }
.pf-sk[data-ph="out"] .pf-sk-o { transform: scale(.6); }
.pf-sk-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(230,211,179,0.12); }
.pf-sk-moon { width: calc(var(--o) * 0.69); height: calc(var(--o) * 0.69); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f6ecda, #e6d3b3 48%, #b9a587 92%); box-shadow: 0 0 90px 10px rgba(230,211,179,0.28); transition: opacity 2s; }
.pf-skphase { min-height: 36px; font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--sk-text); transition: opacity 2s; font-variant-numeric: tabular-nums; }
.pfull.is-sk .pf-seek { order: 4; margin-top: 18px; }
.pfull.is-sk .pf-seek .seek::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #e6d3b3 var(--v, 0%), rgba(230,211,179,0.14) var(--v, 0%)); }
.pfull.is-sk .pf-seek .seek::-moz-range-track { height: 4px; background: rgba(230,211,179,0.14); }
.pfull.is-sk .pf-seek .seek::-moz-range-progress { height: 4px; background: #e6d3b3; }
.pfull.is-sk .pf-times { font-size: 12px; color: var(--sk-mute); }
.pfull.is-sk .pf-ctls { order: 5; margin-top: 14px; }
.pfull.is-sk [data-pf="back"], .pfull.is-sk [data-pf="fwd"] { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(230,211,179,0.2); justify-self: center; }
.pfull.is-sk [data-pf="back"] svg, .pfull.is-sk [data-pf="fwd"] svg { display: none; }
.pfull.is-sk [data-pf="back"]::before, .pfull.is-sk [data-pf="fwd"]::before { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: #d9d3e6; }
.pfull.is-sk [data-pf="back"]::before { content: '−15'; }
.pfull.is-sk [data-pf="fwd"]::before { content: '+15'; }
.pfull.is-sk .ctl.play { justify-self: center; width: 76px; height: 76px; background-color: #e6d3b3; background-size: 24px; box-shadow: 0 0 0 10px rgba(230,211,179,0.05), 0 0 40px -6px rgba(230,211,179,0.35); }
.pfull.is-sk .pf-pill { border-color: rgba(230,211,179,0.2); color: var(--sk-mute); }
.pfull.is-sk .pf-skhint:not([hidden]) { order: 6; display: block; margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--sk-dim); }
.pfull.is-sk .pf-sksleep:not([hidden]) { order: 7; display: block; margin-top: 18px; }
.pfull.is-sk .pf-sksleep .sk-chips { justify-content: flex-start; }
.pfull.is-sk .pf-vol { order: 8; margin-top: 16px; color: var(--sk-mute); }
.pfull.is-sk .pf-acts { order: 9; margin-top: 16px; padding-top: 0; grid-template-columns: 1fr; }
.pfull.is-sk .pf-act { height: 44px; border-color: rgba(230,211,179,0.14); background: rgba(230,211,179,0.04); color: var(--sk-text); }
.pfull.is-sk .pf-next { order: 10; }
/* Gedimmt nach ein paar Atemzügen: Bedienung aus, Mond leiser, Schleier. Jede Berührung holt alles zurück (app.js skWake). */
.pfull.is-sk .pf-skveil { display: block; position: fixed; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity 2.5s; }
.pfull.is-sk .pf-in > :not(.pf-sk) { transition: opacity 1.2s; }
.pfull.is-sk.is-night .pf-skveil { opacity: .2; }
.pfull.is-sk.is-night .pf-sk-moon { opacity: .7; }
.pfull.is-sk.is-dim .pf-skveil { opacity: .45; }
.pfull.is-sk.is-dim .pf-in > :not(.pf-sk) { opacity: 0; pointer-events: none; }
.pfull.is-sk.is-dim .pf-sk-moon { opacity: .55; }
.pfull.is-sk.is-dim .pf-skphase { opacity: .35; }
.pfull.is-sk .pf-in { z-index: 1; }
@media (min-width: 1024px) {
  .pfull.is-sk .pf-in { max-width: 560px; padding: 24px 32px 40px; }
  .pfull.is-sk .pf-title { font-size: 20px; }
}
@media (max-height: 700px) {
  .pfull.is-sk .pf-sksleep .sk-label { display: none; }
  .pfull.is-sk .pf-skhint:not([hidden]) { margin-top: 8px; }
}

/* Desktop: Start mit Seitenspalte (Lauf, Nacht, Über den Kurs), Check und Nacht mittig */
@media (min-width: 1024px) {
  .sk-hello { margin: 0 4px 28px; }
  .sk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .sk-side { margin-top: 0; }
  .sk-desk-only { display: flex; flex-direction: column; gap: 14px; }
  .sk-desk-hide { display: none; }
  .sk-hero { min-height: 280px; }
  .sk-mod-b:has(.sk-med) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .skc, .sk-night { min-height: calc(100dvh - 164px); padding-top: 24px; }
}
@media (max-width: 380px) {
  .skc-h1 { font-size: 42px; }
  .skc-h2 { font-size: 32px; }
  .skc-h3 { font-size: 34px; }
  .sk-hello h1 { font-size: 38px; }
  .sk-n-clock { font-size: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-orb, .pf-sk-o, .pf-sk-moon, .pf-skphase, .sk-mn, .pfull.is-sk .pf-skveil, .pfull.is-sk .pf-in > :not(.pf-sk) { transition: none !important; }
  .sk-orb[data-ph] { transform: scale(.8); }
  .pf-sk[data-ph] .pf-sk-o { transform: scale(.85); }
}
/* Detail: „Session starten“ ist der Hauptknopf, Abhaken steht als ruhiger Umriss darunter */
.sl.is-sk .done-btn:not(.is-done) { background: rgba(230,211,179,0.04); color: #f1ecf8; border: 1px solid rgba(230,211,179,0.22); box-shadow: none; }
.sl.is-sk .done-btn:not(.is-done) svg { color: #e6d3b3; }
/* Nacht-Modus mit laufender Session: Mini-Player unten statt über der (ausgeblendeten) Tab-Leiste, gedämpft */
@media (max-width: 1023px) {
  body.is-sknight .player { bottom: calc(14px + var(--safe-bottom)); opacity: .75; }
  body.is-sknight:has(#player:not([hidden])) { padding-bottom: calc(24px + var(--safe-bottom)); }
  body.is-sknight:has(#player:not([hidden])) .sk-night { padding-bottom: 96px; }
}
/* Warme Nacht (12.10.2026, Wunsch aus /schlaftest): während des Nacht-Modus kein Blauanteil. app.js (skWarmSync) setzt
   html.is-warmnight, solange body.is-sknight steht oder der aus dem Nacht-Modus gestartete Player offen ist (.pfull.is-night),
   und nimmt es wieder weg („Zum Kurs“, Player zu, Session zu Ende, nächster Render nach 5 Uhr). Nur Farben: die Tokens der
   App und des Schlafkurses werden überschrieben, dazu die Stellen mit fest verdrahtetem Mondlicht-Sand (230,211,179),
   Lavendel (142,155,216) und hellem Text (#d9d3e6). Bernstein #c9a06a auf fast Schwarz #0b0806, nichts Weißes, keine hellen Flächen. */
html.is-warmnight, html.is-warmnight:has(body) { background: #0b0806; }   /* :has(body) hebt die Spezifität über html:has(body.is-sknight) (#07061a, Zeile 2083), sonst bleibt der Überscroll-Rand blau */
html.is-warmnight body, html.is-warmnight [data-theme-kurs] {   /* auch der Player trägt data-theme-kurs (paintFullPlayer) */
  --bg: #0b0806; --bg-2: #150e08; --deep: #080503; --bg-deep: #080503; --bg-raised: #1a120a;
  --text: #d8b98c; --muted: #9c7d55; --sand: #c9a06a; --acc-rgb: 201, 160, 106; --sand-ink: #0b0806;
  --acc-2: #a67c45; --acc-2-rgb: 166, 124, 69; --lilac: #c9a06a; --lav: #c9a06a; --ok: #b8905c; --violet: #1a120a;
  --card: rgba(201,160,106,0.05); --line: rgba(201,160,106,0.16); --line-strong: rgba(201,160,106,0.3);
}
html.is-warmnight .sk, html.is-warmnight .skc, html.is-warmnight .sk-det, html.is-warmnight .sk-night, html.is-warmnight .pfull.is-sk, html.is-warmnight .pfull.is-skloop {
  --sk-sand: #c9a06a; --sk-ink: #0b0806; --sk-text: #d8b98c; --sk-mute: #9c7d55; --sk-dim: #705839; --sk-lav: 166, 124, 69;
  --sk-card: rgba(201,160,106,0.06); --sk-line: rgba(201,160,106,0.16);
}
html.is-warmnight body.is-sknight { background: radial-gradient(ellipse 90% 340px at 50% 0%, rgba(201,160,106,0.06), transparent 80%) no-repeat, #0b0806; }
/* Bilder, die im Nacht-Modus sichtbar sein können (Marke, Mini-Player-Cover, Kurs-Cover, Demo-Leiste), warm und dunkel */
html.is-warmnight .brand-ico, html.is-warmnight .player-cover, html.is-warmnight main img, html.is-warmnight .pfull img { filter: sepia(1) saturate(.9) brightness(.45); }
/* Start im Nacht-Modus: Mondsichel, Satz, „Zurück in den Schlaf“ als dunkler Knopf mit Bernstein-Rand */
html.is-warmnight .sk-night h1.sk-n-h { color: #d8b98c; }
html.is-warmnight .sk-n-p { color: #9c7d55; }
html.is-warmnight .sk-n-mid .sk-mn.is-dim { box-shadow: inset -10px 4px 0 0 rgba(201,160,106,0.85); filter: drop-shadow(0 0 10px rgba(201,160,106,0.25)); }
html.is-warmnight .sk-nplay { background: rgba(201,160,106,0.07); border-color: rgba(201,160,106,0.4); }
html.is-warmnight .sk-nplay-i { background: rgba(201,160,106,0.14); color: #c9a06a; box-shadow: inset 0 0 0 1px rgba(201,160,106,0.5); }
html.is-warmnight .sk-chip { color: #c9a06a; }
html.is-warmnight .sk-chip.is-on { background: rgba(201,160,106,0.12); }
html.is-warmnight .demo-bar { color: var(--text); }
/* Player aus dem Nacht-Modus: Mond, Ring, Seek, Knöpfe */
html.is-warmnight .pfull.is-sk { background: radial-gradient(ellipse 100% 60% at 50% 42%, rgba(201,160,106,0.07), transparent 70%), #0b0806; }
html.is-warmnight .pfull.is-sk .pf-x { background: rgba(201,160,106,0.07); border-color: rgba(201,160,106,0.3); }
html.is-warmnight .pf-sk-ring { border-color: rgba(201,160,106,0.16); }
html.is-warmnight .pf-sk-moon { background: radial-gradient(circle at 38% 34%, #d9b07c, #b8905c 48%, #74583a 92%); box-shadow: 0 0 90px 10px rgba(201,160,106,0.18); }
html.is-warmnight .pfull.is-sk .pf-seek .seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, #c9a06a var(--v, 0%), rgba(201,160,106,0.16) var(--v, 0%)); }
html.is-warmnight .pfull.is-sk .pf-seek .seek::-moz-range-track { background: rgba(201,160,106,0.16); }
html.is-warmnight .pfull.is-sk .pf-seek .seek::-moz-range-progress { background: #c9a06a; }
html.is-warmnight .pfull.is-sk [data-pf="back"], html.is-warmnight .pfull.is-sk [data-pf="fwd"] { border-color: rgba(201,160,106,0.35); }
html.is-warmnight .pfull.is-sk [data-pf="back"]::before, html.is-warmnight .pfull.is-sk [data-pf="fwd"]::before { color: #c9a06a; }
html.is-warmnight .pfull.is-sk .pf-pill { border-color: rgba(201,160,106,0.35); }
html.is-warmnight .pfull.is-sk .pf-act { border-color: rgba(201,160,106,0.3); background: rgba(201,160,106,0.04); }
html.is-warmnight .pfull.is-sk.is-dim .pf-sk::after { color: #705839; }
/* Play/Pause (groß und Mini-Player): dunkler Knopf mit Bernstein-Rand, Symbol in Bernstein statt dunkel auf Sand */
html.is-warmnight .ctl.play { background-color: #1a120a; box-shadow: inset 0 0 0 1.5px rgba(201,160,106,0.7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 2l12 7-12 7z' fill='%23c9a06a'/%3E%3C/svg%3E"); }
html.is-warmnight .ctl.play.is-playing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 2h3.5v14H4zM10.5 2H14v14h-3.5z' fill='%23c9a06a'/%3E%3C/svg%3E"); }
html.is-warmnight .pfull.is-sk .ctl.play { background-color: #1a120a; box-shadow: inset 0 0 0 1.5px rgba(201,160,106,0.7), 0 0 0 10px rgba(201,160,106,0.04); }

/* ---------- v131: zurückgeholte Funktionen (funktions-inventur.md), Kurs-Looks ---------- */
/* Chakrenreise: Offline-Knopf auf der Meditationskarte, „Über den Kurs“ auch mobil, Kurs Essentials als Karte */
.cr-mc-off { display: flex; }
.cr-mc-off .off-pill { min-height: 38px; border-color: rgba(255,236,214,0.18); font-family: var(--cr-sans); font-weight: 600; font-size: 13px; color: var(--muted); }
.cr-mc-off .off-pill:hover { border-color: rgba(var(--acc-rgb), 0.55); color: var(--text); background: none; }
.cr-mc-off .off-pill.is-done { color: var(--chakra); border-color: rgba(var(--acc-rgb), 0.45); }
.cr-about { display: flex; flex-direction: column; gap: 8px; }
.cr .with-card { border-radius: 16px; background: var(--cr-card); border-color: var(--cr-line); }
.cr .with-k { color: var(--cr-gold); }
.cr .with-t b { font-family: var(--cr-sans); }
.cr-reise .with-card { margin-top: 12px; }
.cr-dash-side .with-card, .dash-side .with-card { margin-top: 0; }

/* Inner Winner Zone: „Über den Kurs“, Fassungen auf der Weiter-Karte, Reihen am Desktop als Segmente, Lupe nur außerhalb des Starts */
.iw-about { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: #111; border: 1px solid rgba(255,255,255,0.07); }
.iw-about .iw-label { font: 600 11px/1 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.iw-about-t p { margin: 0 0 8px; font: 500 14px/1.55 var(--iw-body); color: rgba(255,255,255,0.72); }
.iw-about-t p:last-child { margin-bottom: 0; }
.iw-cont-fass { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.iw-cont-fass .iw-f { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.75); cursor: pointer; }
.iw-cont-fass .iw-f::before { display: none; }
.iw-cont-fass .iw-f.is-on { border-color: var(--iw-acc); color: var(--iw-acc); background: rgba(0,0,0,0.55); }
.iw-cont-fass .iw-f:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 1024px) {
  body.is-app[data-theme-kurs="inner-winner"] .lupe { display: flex; }
  body.is-app[data-theme-kurs="inner-winner"].on-start .lupe { display: none; }
  body.is-app[data-theme-kurs="inner-winner"] .lupe:hover, body.is-app[data-theme-kurs="inner-winner"] .lupe.is-on { border-color: rgba(212,255,58,0.5); color: #fff; }
  .iw-row-head { flex-wrap: wrap; row-gap: 10px; }
  .iw-row-h { flex: none; font-size: 22px; }
  .iw-rowtabs { flex: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: #151515; border: 1px solid rgba(255,255,255,0.08); }
  .iw-row-n { margin-left: auto; }
  .iw-rowtab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    font: italic 900 16px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.7); box-shadow: none; transition: background .15s, color .15s; }
  .iw-rowtab:hover { color: #fff; background: rgba(255,255,255,0.07); }
  .iw-rowtab.is-on, .iw-rowtab.is-on:hover { background: var(--iw-v); color: #000; box-shadow: none; }
  .iw-rowtab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .iw-rowtab-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center;
    font: 600 11px/1 var(--iw-mono); font-style: normal; letter-spacing: 0; background: rgba(255,255,255,0.1); color: inherit; }
  .iw-rowtab.is-on .iw-rowtab-n { background: rgba(0,0,0,0.16); }
  .iw-stage .iw-about { margin-top: 18px; max-width: 760px; }
  /* Vier Reiter seit v138 (Mehr, Theorie, Feuer, Eis): unter 1280 px ohne den Kursnamen davor (steht in der Leiste),
     sonst rutschen Zähler und Pfeile in eine zweite Zeile */
  @media (max-width: 1279px) {
    .iw-row-h { display: none; }
    .iw-rowtab { padding: 0 13px; }
  }
}

/* Schlafkurs: „Für unterwegs speichern“ unter „Session starten“ (nachts offline hören) */
.sk-dl { margin-top: 12px; }
.sk-dl .item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(230,211,179,0.04); border: 1px solid rgba(230,211,179,0.14); }
.sk-dl .dl-text { flex: 1; min-width: 0; font-size: 14px; color: var(--sk-text, #f1ecf8); }

/* ---------- Schlafkurs vereinfacht (v134, Design „Schlafkurs Screens.dc.html“, Screens 05 bis 09) ----------
   Eine Hauptkarte mit Kursbild, Lauf als Zeile, Module als ruhige Zeilen. Session-Detail mit Kursbild, Atemrhythmus und einem
   Knopf. Nacht-Modus ohne große Uhr. Was vorher da war, bleibt erreichbar (aufklappbar oder als Zeile). */
.sk-cover { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0f0c21; }
.sk-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 20%; display: block; }
.sk-start .sk-hello { margin: 18px 4px 20px; }
.sk-start .sk-hello h1 { font-size: 42px; }
.sk-hero { min-height: 260px; border-color: rgba(230,211,179,0.14); border-radius: 22px; }
.sk-hero::after { background: linear-gradient(180deg, transparent 22%, rgba(15,12,33,0.78) 58%, rgba(15,12,33,0.97)); pointer-events: none; }
.sk-hero-in { align-items: flex-end; }
.sk-hero-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sk-hero:has(.sk-hero-link) .sk-hero-in { z-index: 3; pointer-events: none; }
.sk-hero-play { pointer-events: auto; }
.sk-hero-play:active { transform: scale(.94); }
.sk-hero-link:focus-visible { outline: 2px solid var(--sk-sand); outline-offset: -2px; }
/* Lauf als Zeile: „4 Nächte am Stück“ links, Monde der Woche rechts. Tippen klappt Hinweis, Rekord und Verlauf auf. */
.sk-streak { margin-top: 8px; color: var(--sk-text); }
.sk-st-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
.sk-st-line::-webkit-details-marker { display: none; }
.sk-st-line .sk-st-head { display: block; font-size: 14px; color: var(--sk-mute); white-space: nowrap; }
.sk-st-line .sk-st-head b { font: inherit; font-size: 14px; color: var(--sk-mute); line-height: inherit; }
.sk-st-line .sk-st-head span { font-size: 14px; }
.sk-st-line .sk-moons { margin: 0; display: flex; gap: 8px; }
.sk-st-line .sk-moons li > span { display: none; }
.sk-st-line .sk-mn { width: 18px; height: 18px; background: rgba(230,211,179,0.12); box-shadow: inset calc(-0.6 * var(--mn, 0px)) 0 0 0 var(--sk-sand, #e6d3b3); }
.sk-st-line .sk-moons li.is-today .sk-mn { outline-width: 1.5px; outline-offset: 2px; }
.sk-streak[open] .sk-st-line { border-bottom: 1px solid var(--sk-line); }
.sk-streak .sk-more { margin-top: 0; padding: 4px 0 8px; border-top: 0; }
.sk-streak .sk-more .sk-note { margin-top: 10px; }
/* Module und „Nachts wach?“ als Zeilen mit Trennlinie */
.sk-start .sk-list { margin-top: 18px; }
.sk-start .sk-mod summary .module-title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--sk-text); }
.sk-start .sk-mod summary .module-count { font-size: 13px; color: var(--sk-mute); }
.sk-about { padding-top: 16px; border-top: 1px solid rgba(230,211,179,0.12); color: var(--sk-text); }
.sk-start .sk-feel { margin-top: 4px; }
/* Session-Detail: Kursbild oben, darunter Titel, Atemrhythmus, ein Satz, ein Knopf */
.sk-det > .sk-cover { height: 330px; bottom: auto; }
.sk-det > .sk-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,12,33,0.35), transparent 30%, #0f0c21); }
.sk-det-sec .sk-label { margin-top: 6px; }
.sk-det-note { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--sk-mute); text-wrap: pretty; }
.sk-go { margin-top: 28px; }
.sk-opt { margin-top: 14px; border-top: 1px solid rgba(230,211,179,0.12); }
.sk-opt summary { min-height: 48px; display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--sk-mute); cursor: pointer; list-style: none; }
.sk-opt summary::-webkit-details-marker { display: none; }
.sk-opt summary span { color: var(--sk-text); }
.sk-opt summary::after { content: ''; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid var(--sk-sand); border-bottom: 1.5px solid var(--sk-sand); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sk-opt[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.sk-opt .sk-chips { margin-top: 0; }
.sk-opt .sk-hint { margin-bottom: 8px; }
/* Nacht-Modus ohne Uhr: Mondsichel über dem Satz, „Zum Kurs“ oben rechts */
.sk-n-top { justify-content: flex-end; }
.sk-n-mid { gap: 16px; }
.sk-n-mid .sk-mn.is-dim { width: 34px; height: 34px; box-shadow: inset -10px 4px 0 0 rgba(230,211,179,0.7); transform: rotate(-12deg); }
.sk-night h1.sk-n-h { font-size: 40px; line-height: 1.05; }
/* Player gedimmt (Screen 08): Hinweis unten */
.pfull.is-sk.is-dim .pf-sk::after { content: 'Tippen zum Aufwecken'; position: fixed; left: 0; right: 0; bottom: calc(48px + var(--safe-bottom, 0px)); text-align: center; font-size: 13px; color: #5f5978; }
@media (min-width: 1024px) {
  .sk-start .sk-hello h1 { font-size: 46px; }
  .sk-hero { min-height: 300px; }
  .sk-det > .sk-cover { height: 300px; border-radius: 22px 22px 0 0; }
}
@media (max-width: 380px) { .sk-start .sk-hello h1 { font-size: 36px; } .sk-night h1.sk-n-h { font-size: 34px; } }

/* ---------- Schlafkurs-Ausbau (09.10.2026): Willkommen, Erinnerung, Morgen-Check-in, „Deine Nächte“, 14 Nächte, Bonus, Loop ----------
   Nacht #0f0c21, Mondlicht #e6d3b3, Lavendel #8e9bd8. Ruhig: Karten wie .sk-card, keine grauen Flächen, mobil zuerst. */
.sk-slot { display: contents; }
.sk-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-top-row .sk-mn { width: 22px; height: 22px; }
.sk-x { flex: none; width: 36px; height: 36px; margin: -8px -8px -8px 0; border-radius: 50%; display: grid; place-items: center; color: var(--sk-mute); }
.sk-x svg { width: 18px; height: 18px; }
.sk-x:hover { color: var(--sk-sand); }
.sk-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(230,211,179,0.4); color: var(--sk-sand); font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; }
.sk-ghost:hover { border-color: var(--sk-sand); }
.sk-wel { background: linear-gradient(150deg, rgba(142,155,216,0.16), rgba(230,211,179,0.05) 70%); border-color: rgba(142,155,216,0.3); }
.sk-wel-h { display: block; margin: 8px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; color: var(--sk-text); text-wrap: balance; }
.sk-wel-p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #d9d3e6; text-wrap: pretty; }
.sk-wel-p b { color: var(--sk-sand); font-weight: 600; }
.sk-wel-on { display: flex; align-items: center; gap: 8px; color: var(--sk-sand); }
.sk-wel-on svg { flex: none; width: 16px; height: 16px; }
.sk-wel-go { margin-top: 14px; min-height: 50px; }
.sk-rc .sk-chips { margin-top: 12px; }
/* Morgen-Check-in */
.sk-ci-q { margin-top: 14px; }
.sk-ci-l { display: block; font-size: 13px; line-height: 1.4; color: #d9d3e6; }
.sk-ci-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sk-ci-opts.is-moons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sk-ci-moon { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 10px 0 8px; border-radius: 12px; border: 1px solid var(--sk-line); color: var(--sk-mute); font-size: 12px; transition: all .2s; }
.sk-ci-moon .sk-mn { width: 24px; height: 24px; background: rgba(230,211,179,0.12); box-shadow: inset calc(-0.8 * var(--mn, 0px)) 0 0 0 var(--sk-sand, #e6d3b3); }
.sk-ci-moon.is-on { background: rgba(230,211,179,0.12); border-color: var(--sk-sand); color: var(--sk-sand); }
.sk-ci-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--sk-dim); }
.sk-ci-save { margin-top: 16px; min-height: 48px; }
.sk-ci-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-ci-edit { flex: none; min-height: 36px; padding: 0 4px; font-size: 13px; color: var(--sk-mute); text-decoration: underline; text-underline-offset: 3px; }
.sk-ci-sum { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--sk-mute); }
.sk-ci-tip { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid rgba(142,155,216,0.6); font-size: 14px; line-height: 1.55; color: var(--sk-text); text-wrap: pretty; }
.sk-ci-vid { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(142,155,216,0.1); color: var(--sk-text); font-size: 14px; text-decoration: none; }
.sk-ci-vid > span { flex: 1; min-width: 0; }
.sk-ci-vid svg { flex: none; width: 16px; height: 16px; color: var(--sk-sand); }
/* Deine Nächte (aufklappbar wie der Lauf) */
.sk-ng { color: var(--sk-text); border-top: 1px solid rgba(230,211,179,0.12); }
.sk-ng-line-s { display: block; padding: 8px 0; cursor: pointer; list-style: none; }
.sk-ng-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.sk-ng-line-s::-webkit-details-marker { display: none; }
.sk-ng-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-ng-h > span { font-size: 13px; color: var(--sk-mute); }
.sk-ng-chev { flex: none; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid var(--sk-sand); border-bottom: 1.5px solid var(--sk-sand); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sk-ng[open] .sk-ng-chev { transform: translateY(2px) rotate(-135deg); }
.sk-ng-big { display: block; margin: 10px 0 2px; padding: 12px 14px; border-radius: 14px; background: rgba(230,211,179,0.08); font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--sk-sand); text-wrap: pretty; }
.sk-ng-more { padding: 4px 0 12px; }
.sk-ng-svg { display: block; width: 100%; height: 96px; margin-top: 8px; overflow: visible; }
.sk-ng-grid { stroke: rgba(230,211,179,0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-ng-ax { font-size: 9px; fill: var(--sk-dim); text-anchor: end; }
.sk-ng-line { fill: none; stroke: var(--sk-sand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sk-ng-dot { fill: #0f0c21; stroke: var(--sk-sand); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sk-ng-rl { margin-top: 14px; }
.sk-ng-moons { list-style: none; margin: 8px 0 0; padding: 0 2px; display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); justify-items: center; }
.sk-ng-moons li { min-width: 0; }
/* Schmale Handys (320 bis 359 px): Lauf-Zeile mit kleineren Monden, sonst scrollt die Seite quer (Prüfung 09.10.2026) */
@media (max-width: 359px) {
  .sk-st-line .sk-moons { gap: 4px; }
  .sk-st-line .sk-mn { width: 14px; height: 14px; }
}
.sk-ng-moons .sk-mn { width: 14px; height: 14px; background: rgba(142,155,216,0.18); box-shadow: inset calc(-0.47 * var(--mn, 0px)) 0 0 0 #8e9bd8; }
.sk-ng-stats { border-top-color: var(--sk-line); }
.sk-ng-stats dt { color: var(--sk-mute); }
.sk-ng-stats dd { color: var(--sk-text); }
.sk-ng-stats div + div { border-left-color: var(--sk-line); }
/* 14 Nächte geschafft */
.sk-14 { background: radial-gradient(ellipse 90% 80% at 0% 0%, rgba(230,211,179,0.12), transparent 70%), var(--sk-card); border-color: rgba(230,211,179,0.28); }
.sk-14 .sk-top-row { justify-content: flex-start; }
.sk-14 .sk-x { margin-left: auto; }
.sk-14-h { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--sk-text); }
.sk-14-p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #d9d3e6; text-wrap: pretty; }
/* Bonus-Lektionen und Frequenzmusik im Player */
.sk-bonus { margin-top: 16px; color: var(--sk-text); }
.sk-bonus-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--sk-mute); text-wrap: pretty; }
.sk-after-l { margin-top: 14px; }
.pfull.is-skloop .pf-sksleep:not([hidden]) { order: 7; display: block; margin-top: 18px; color: var(--sk-text); }
.pfull.is-skloop .pf-sksleep .sk-chips { justify-content: flex-start; }
@media (max-height: 700px) { .pfull.is-sk .pf-sksleep .sk-label.sk-after-l { display: block; margin-top: 10px; } }
.sk-st-line::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: -4px; border-right: 1.5px solid var(--sk-mute); border-bottom: 1.5px solid var(--sk-mute); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.sk-streak[open] .sk-st-line::after { transform: translateY(2px) rotate(-135deg); }

/* Inner Winner Desktop: Seit v131 steht die Lupe auf allen Seiten außer dem Start in der Leiste. Die Reiter begannen aber
   weiter bei 96 bzw. 154 px und lagen unter der Lupe (v135). Abstand nachgezogen. */
@media (min-width: 1024px) {
  body.is-app[data-theme-kurs="inner-winner"]:not(.on-start) .tabs { top: 130px; }
  body.is-app.has-kurs-switch[data-theme-kurs="inner-winner"]:not(.on-start) .tabs { top: 200px; }
}

/* ---------- Inner Winner: Theorie-Seite und Reihen (v144, Entwurf designs-neu/inner-winner/theorie-uebersicht.dc.html) ----------
   Karten je Abschnitt mit Thumbnail und Folgen, „Zum Lesen“ als Artikel-Karten. Mobil einspaltig, ab 1024 px zwei Spalten. */
.iwt { gap: 28px; }
.iwt .iw-lib-c { font: 500 16px/1.4 var(--iw-body); text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.7); }
.iwt-sec { display: flex; flex-direction: column; gap: 16px; }
.iwt-sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--iw-line); }
.iwt-sec-h > div:first-child { min-width: 0; }
.iwt-sec-h .iw-kick { font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--iw-v); }
.iwt-sec-h h2 { margin: 6px 0 0; font: italic 900 34px/0.9 var(--iw-cond); text-transform: uppercase; color: #fff; }
.iwt-prog { flex: none; display: flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--iw-body); color: rgba(255,255,255,0.65); }
.iwt-bar { display: block; width: 72px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.iwt-bar i { display: block; height: 100%; background: var(--iw-v); border-radius: inherit; }
.iwt-cnt { flex: none; font: 500 12px/1.2 var(--iw-body); color: rgba(255,255,255,0.55); }
.iwt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.iwt-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #121212; border: 1px solid rgba(255,255,255,0.08); }
.iwt-card-h { display: flex; flex-direction: column; color: #fff !important; text-decoration: none; }
.iwt-card-img { display: block; aspect-ratio: 16 / 9; background: #1c1c1c; overflow: hidden; }
.iwt-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
a.iwt-card-h:hover .iwt-card-img img { transform: scale(1.03); }
.iwt-card-k { margin: 16px 18px 0; font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.iwt-card-t { margin: 6px 18px 0; font: 600 18px/1.3 var(--iw-body); color: #fff; overflow-wrap: anywhere; }
a.iwt-card-h:hover .iwt-card-t { color: var(--iw-v); }
.iwt-eps { list-style: none; margin: 10px 0 0; padding: 0 8px 10px; }
.iwt-ep { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 10px; border-radius: 10px; color: rgba(255,255,255,0.88) !important; text-decoration: none; }
a.iwt-ep:hover { background: rgba(255,255,255,0.05); }
.iwt-ep-n { flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.22);
  font: 600 10px/1 var(--iw-mono); color: rgba(255,255,255,0.7); }
.iwt-ep-n svg { width: 14px; height: 14px; }
.iwt-ep.is-done .iwt-ep-n { background: var(--iw-v); border-color: var(--iw-v); color: #000; }
.iwt-ep.is-done .iwt-ep-t { color: rgba(255,255,255,0.55); }
.iwt-ep-t { flex: 1; min-width: 0; font: 500 15px/1.35 var(--iw-body); overflow-wrap: anywhere; }
.iwt-ep-m { flex: none; font: 500 12px/1 var(--iw-body); color: rgba(255,255,255,0.5); }
.iwt-ep.is-off { opacity: 0.5; }
.iwt-arts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.iwt-art { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 12px; background: #121212; border: 1px solid rgba(255,255,255,0.08);
  color: #fff !important; text-decoration: none; }
a.iwt-art:hover { border-color: rgba(212,255,58,0.45); }
.iwt-art-img { flex: none; width: 76px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #1c1c1c; }
.iwt-art-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iwt-art-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.iwt-art-t b { font: 500 15px/1.35 var(--iw-body); color: #fff; overflow-wrap: anywhere; }
.iwt-art-t span { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1.2 var(--iw-body); color: rgba(255,255,255,0.5); }
.iwt-art-t span svg { width: 13px; height: 13px; color: var(--iw-v); }
.iwt-arr { flex: none; font: 600 18px/1 var(--iw-body); color: var(--iw-v); }
.iwt-art.is-off { opacity: 0.55; }
.iwt-arts.is-intro .iwt-art-img { width: 120px; }
.iwt-arts.is-intro .iwt-art-t b { font-size: 17px; }
/* Reihe als Zeile in Listen und Übersichtsseite einer Reihe */
.iw-lr-n.is-ser { border-style: dashed; color: var(--iw-v); }
.iw-lr-n.is-ser svg { width: 16px; height: 16px; }
.iw-ser { gap: 22px; }
.iw-ser > .lesson-crumb { align-self: flex-start; }
.iw-ser-h { display: flex; flex-direction: column; gap: 16px; }
.iw-ser-img { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #1c1c1c; }
.iw-ser-img img, .iw-ser-img .iw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-ser .iw-lib-t { font-size: 54px; line-height: 0.88; }
.iw-ser-d { margin: 12px 0 0; font: 500 15px/1.5 var(--iw-body); color: rgba(255,255,255,0.72); }
.iw-ser-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.iw-ser-go { text-decoration: none; }
.iw-ser-n { font: 600 10px/1.3 var(--iw-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
@media (min-width: 1024px) {
  .iwt { gap: 44px; padding-bottom: 56px; }
  .iwt-sec-h h2 { font-size: 40px; }
  .iwt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .iwt-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .iwt-arts.is-intro { grid-template-columns: minmax(0, 1fr); max-width: calc(50% - 6px); }
  .iwt-bar { width: 120px; }
  .iw-ser-h { flex-direction: row; align-items: center; gap: 40px; }
  .iw-ser-img { flex: 0 0 min(46%, 560px); }
  .iw-ser-t { flex: 1; min-width: 0; }
  .iw-ser .iw-lib-t { font-size: 72px; }
  .iw-ser .iw-lrows { max-width: 900px; }
}
/* v146: Sprung aus der Start-Karte „Atemtraining“ zum Abschnitt, nicht unter die Kopfleiste */
.iwt-sec { scroll-margin-top: 84px; }

/* ---------- Inner Winner mobil: Start als Bühne (v153, Desktop-Entscheidungen vom 07.10. aufs Handy) ----------
   Gleiches Markup wie am Desktop (app.js iwStageHtml): Begrüßung mit Tracking-Pille, oben die Karte (beim Öffnen „Willkommen
   zur Inner Winner Zone“), darunter die Reiter Mehr · Theorie · Feuer · Eis als Segmente und die Karten zum Wischen.
   Antippen holt eine Karte nach oben (app.js iwFeature scrollt dann zur Bühne). Nur bis 1023 px, der Desktop bleibt wie er ist. */
@media (max-width: 1023px) {
  .iw-stage { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; padding: 6px 4px 28px; }
  .iw-stage .iw-st-bg { position: absolute; z-index: -1; left: -16px; right: -16px; top: -90px; height: 520px; pointer-events: none;
    background: #000 center / cover no-repeat; opacity: 0.4; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
  .iw-stage .iw-st-bg.is-raw { filter: blur(40px); }
  .iw-st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .iw-st-head .iw-search { display: none; }
  .iw-stage .iw-hello { min-width: 0; }
  .iw-stage .iw-hello h1 { font-size: 34px; }
  .iw-stage .iw-hello .presence { margin-top: 6px; color: rgba(255,255,255,0.6); }
  .iw-stage .iw-pill { min-height: 36px; }
  .iw-hero { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--top-h, 60px) + 8px); }
  .iw-hero-cover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 24px 48px -18px rgba(0,0,0,0.8); }
  .iw-hero-cover img, .iw-hero-cover .iw-noimg { display: block; width: 100%; height: 100%; object-fit: cover; }
  .iw-cover-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
    background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.14); font: 600 9px/1 var(--iw-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
  .iw-cover-tag svg { width: 13px; height: 13px; flex: none; }
  .iw-hero-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .iw-stage .iw-kick { font-size: 10px; letter-spacing: 0.14em; }
  .iw-title-d { font-size: 48px; line-height: 0.86; }
  .iw-stage .iw-desc { font-size: 15px; line-height: 1.5; }
  /* Fassungen als Pillen zum Antippen (wie die Weiter-Karte bis v152) */
  .iw-stage .iw-fass { gap: 8px; margin: 2px 0 0; }
  .iw-stage .iw-f { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.75); }
  .iw-stage .iw-f::before { display: none; }
  .iw-stage .iw-f.is-on { border-color: var(--iw-v); color: var(--iw-v); }
  .iw-stage .iw-f.is-solo { border: 0; background: none; padding: 0; min-height: 0; }
  .iw-stage .iw-acts { gap: 10px; margin-top: 2px; }
  .iw-stage .iw-go { height: 52px; }
  .iw-stage .iw-off { display: inline-flex; align-items: center; gap: 8px; height: 52px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff; font: italic 900 16px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.02em; }
  .iw-stage .iw-off svg { width: 17px; height: 17px; flex: none; }
  .iw-stage .iw-off small { display: none; }
  .iw-stage .iw-off .pf-dlt { display: inline; }
  .iw-stage .iw-off.is-done { border-color: rgba(212,255,58,0.6); color: var(--iw-v); }
  /* Reihe: Segmente wie die Filter der Meditationen, Karten zum Wischen bis an den Rand */
  .iw-row { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; min-width: 0; }
  .iw-row-head { display: flex; flex-direction: column; gap: 10px; }
  .iw-row-h, .iw-row-n, .iw-row-nav { display: none; }
  .iw-rowtabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #151515; }
  .iw-rowtab { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 40px; border-radius: 999px;
    font: italic 900 15px/1 var(--iw-cond); text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.65); }
  .iw-rowtab-n { font: 600 9px/1 var(--iw-mono); letter-spacing: 0.06em; font-style: normal; opacity: 0.6; }
  .iw-rowtab.is-on { background: var(--iw-v); color: #000; }
  .iw-rowtab:focus-visible, .iw-tile:focus-visible .iw-tile-img, .iw-hero-cover:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .iw-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 12px; margin: 0 -20px; padding: 4px 20px 6px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .iw-tiles::-webkit-scrollbar { display: none; }
  .iw-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0; text-align: left; color: #fff !important; opacity: 0.7; scroll-snap-align: start; }
  .iw-tile.is-on { opacity: 1; }
  .iw-tile-img { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #151515; outline: 2px solid transparent; outline-offset: 2px; }
  .iw-tile.is-on .iw-tile-img { outline-color: var(--iw-v); }
  .iw-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .iw-tile-k { font: 600 9px/1.25 var(--iw-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--iw-v); }
  .iw-tile-t { font: italic 900 17px/0.95 var(--iw-cond); text-transform: uppercase; overflow-wrap: break-word;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-bottom: 1px; }
  .iw-row .iw-about { margin-top: 6px; }
  .iw-row .pv-parts { margin: 4px 0 0; }
}
@media (max-width: 380px) {
  .iw-rowtab { font-size: 14px; }
  .iw-title-d { font-size: 42px; }
}
/* v153: Inner Winner am Handy ohne Reiter „Downloads“ (sechs passen bei 360 px nicht), der Weg steht im Profil (.set-mob) */
@media (max-width: 1023px) { .tab.is-mobhide { display: none !important; } }
@media (min-width: 1024px) { .set.set-mob { display: none; } }
/* v153 Nachtrag: Tippflächen der Chakrenreise am Handy. Die Segmente schneiden ihre ::after-Fläche selbst ab (Ellipse),
   deshalb werden die Knöpfe 44 px hoch und der Rahmen innen schmaler (Dauer: Gesamthöhe gleich, Fassung 4 px höher). */
@media (max-width: 1023px) {
  .cr-seg { padding: 2px; }
  .cr-seg-b, .cr-seg.is-guide .cr-seg-b, .cr-seg.is-fas .cr-seg-b { height: 44px; }
  .cr-more > summary { min-height: 44px; }
}

/* ---------- Schlafkurs „Finde deine Session“ (09.10.2026, v183): Kennenlern-Liste, Deine Session, Merker ---------- */
.sk-plan-p { margin: -4px 0 0; font-size: 14px; line-height: 1.5; color: #d9d3e6; text-wrap: pretty; }
.sk-find { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-find a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(230,211,179,0.12);
  background: rgba(230,211,179,0.04); color: var(--sk-text); text-decoration: none; }
.sk-find a:hover { border-color: rgba(230,211,179,0.4); }
.sk-find-ok { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(230,211,179,0.35);
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--sk-mute); }
.sk-find-ok svg { width: 15px; height: 15px; }
.sk-find-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-find-t b { font-weight: 600; font-size: 14px; }
.sk-find-t span { font-size: 12.5px; color: var(--sk-mute); }
.sk-find li.is-done .sk-find-ok { background: rgba(230,211,179,0.16); border-color: rgba(230,211,179,0.4); color: var(--sk-sand); }
.sk-find li.is-now a { border-color: var(--sk-sand); background: rgba(230,211,179,0.09); }
.sk-find li.is-now .sk-find-ok:not(:has(svg)) { background: var(--sk-sand); border-color: var(--sk-sand); color: var(--sk-ink); }
.sk-mine { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--sk-sand); background: rgba(230,211,179,0.08);
  color: var(--sk-text); text-decoration: none; }
.sk-mine b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; }
.sk-mine span { font-size: 13px; color: var(--sk-mute); }
.sk-plan-fav { display: inline-flex; align-items: center; gap: 5px; color: var(--sk-sand) !important; }
.sk-plan-fav svg { width: 14px; height: 14px; }
.sk-plan-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sk-plan-link { min-height: 44px; padding: 0; background: none; border: 0; color: var(--sk-sand); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sk-fav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(230,211,179,0.35);
  background: none; color: var(--sk-text); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; }
.sk-fav svg { width: 16px; height: 16px; flex: none; color: var(--sk-sand); }
.sk-fav:hover { border-color: var(--sk-sand); }
.sk-fav.is-on { border-color: var(--sk-sand); background: rgba(230,211,179,0.12); color: var(--sk-sand); }
.sk-fav:focus-visible, .sk-plan-link:focus-visible, .sk-find a:focus-visible, .sk-mine:focus-visible { outline: 2px solid var(--sk-sand); outline-offset: 2px; }
.sk-det .sk-fav { margin-top: 12px; }
.pfull.is-sk .pf-sksleep .sk-fav { margin-bottom: 14px; }

/* ---------- 11. Manifestation Mastery: Kosmos (v155, Entwurf manifestation/design-kosmos/mm-kosmos.dc.html) ----------
   Start als Bühne mit drei Portalen (app.js mmStartHtml), Kursinhalt (mmInhaltHtml), Lektion im Kosmos-Look, Portal-Player
   (.pfull.is-mm, mmPaintPlayer). Die Klassen .mm-* und .pf-mm* entstehen nur in den mm*-Funktionen von app.js, alles
   andere hängt an [data-theme-kurs="manifestation"], body.is-mmstage oder .pfull.is-mm. Andere Kurse bleiben unberührt.
   Farben als --mm-* aus dem Token-Block (Abschnitt 2). D = ab 1024 px (Entwurf 3a), M = bis 1023 px (Entwurf 3b). */
@keyframes mmBreathe { 0%, 100% { transform: scale(.9); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes mmSpin { to { transform: rotate(360deg); } }

.mm { color: var(--mm-text); }
main[data-view="start:"]:has(.mm-start),
main[data-view^="mminhalt:"]:has(.mm-inhalt),
main[data-view^="course:"]:has(.mm-inhalt) { max-width: none; margin: 0; padding: 0; }
body.is-mmstage .glow { display: none; }
.mm-start { position: relative; overflow-x: clip; }
.mm .mm-d { display: inline; }
.mm .mm-m { display: none; }

/* ----- Bühne ----- */
.mm-stage { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; min-height: clamp(560px, calc(100dvh - 300px), 660px);
  padding: 28px 48px 64px 56px; background: var(--mm-bg); }
.mm-st-bg { position: absolute; inset: -40px; z-index: -2; background: var(--mm-bg) center / cover no-repeat; transform: scale(1.2);
  filter: blur(18px) saturate(1.3) brightness(.8); pointer-events: none; }
.mm-st-bg.is-blur { filter: blur(10px) saturate(1.3) brightness(.8); }
.mm-st-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #05040a 8%, rgba(5,4,10,.75) 42%, rgba(5,4,10,.2) 75%), linear-gradient(0deg, #05040a, transparent 40%); }
.mm-st-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.mm-hello { min-width: 0; }
.mm-hi-w { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.3; color: var(--mm-text2); }
.mm-hello .presence { margin-top: 6px; font-size: 12px; color: var(--mm-text2); }
.mm-st-streak { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--mm-text2); }
.mm-st-streak i { width: 8px; height: 8px; border-radius: 50%; background: var(--mm-gold); box-shadow: 0 0 10px #e8c27a; }
.mm-st-streak:hover { color: var(--mm-text); }
/* Textblock im Fluss unten (margin-top: auto): wächst die Bühne, statt die Begrüßung zu überdecken */
.mm-st-text { position: relative; margin-top: auto; padding-top: 36px; width: min(720px, 100% - 380px); display: flex; flex-direction: column; gap: 18px; }
.mm-kick { font: 600 11px/1.3 'Work Sans', system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-gold); }
.mm-st-title { margin: 0; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(44px, 5vw, 72px); line-height: 1;
  letter-spacing: .06em; text-wrap: balance; text-transform: none; color: var(--mm-text); }
.mm-st-desc { margin: 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--mm-text2); }
.mm-st-quote { margin: 0; max-width: 480px; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.35; color: var(--mm-gold); }
.mm-st-acts { display: flex; align-items: center; flex-wrap: nowrap; gap: 16px; margin-top: 8px; }
.mm-st-acts .mm-go { order: -1; }
.mm-go { flex: none; position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #05040a;
  background: radial-gradient(circle at 40% 35%, #fff1cf, #e8c27a 55%, #a77b34);
  box-shadow: 0 0 0 10px rgba(232,194,122,.12), 0 0 50px rgba(232,194,122,.5); transition: transform .12s; }
.mm-go svg { width: 24px; height: 24px; }
.mm-go:active { transform: scale(.95); }
.mm-go:focus-visible { outline: 2px solid var(--mm-text); outline-offset: 4px; }
.mm-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-seg { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--mm-glass); border: 1px solid var(--mm-glass-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mm-seg-b { min-height: 40px; padding: 9px 13px; border-radius: 11px; font-size: 13px; color: var(--mm-text2); white-space: nowrap; transition: background .15s, color .15s; }
.mm-seg-b:hover { color: var(--mm-text); }
.mm-seg-b.is-on { background: #f2ecdf; color: #05040a; font-weight: 600; }
.mm-seg-b:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.mm-stage .off-pill { min-height: 44px; border-color: var(--mm-glass-line); background: var(--mm-glass); color: var(--mm-text);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mm-stage .off-pill.is-done { color: var(--mm-gold); }

/* Portal-Auswahl */
.mm-portals { display: flex; }
.mm-portals.is-mob { display: none; }
.mm-portals.is-desk { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 30px; }
.mm-portal { display: flex; flex-direction: row-reverse; align-items: center; gap: 18px; text-align: right; color: var(--mm-text); transition: opacity .15s; }
.mm-ring { position: relative; flex: none; display: block; width: 108px; height: 108px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.mm-ring.is-on { border-color: transparent; box-shadow: 0 0 30px rgba(232,194,122,.45); }
.mm-ring img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; object-fit: cover; display: block; }
.mm-ring-c { position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232,194,122,0), #f3dc9c, rgba(232,194,122,0) 45%, rgba(232,194,122,.6) 70%, rgba(232,194,122,0));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: mmSpin 7s linear infinite; }
.mm-portal-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-portal-t b { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 15px; letter-spacing: .08em; }
.mm-portal-t small { font-size: 12px; color: var(--mm-text2); }
.mm-portal:not(.is-on) .mm-ring img { opacity: .82; }
.mm-portal:hover .mm-ring:not(.is-on) { border-color: rgba(255,255,255,.3); }
.mm-portal:focus-visible { outline: none; }
.mm-portal:focus-visible .mm-ring { outline: 2px solid var(--mm-gold); outline-offset: 4px; }

/* ----- Nächster Schritt und Lauf ----- */
.mm-next-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin: 0 56px; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mm-next { display: flex; align-items: center; gap: 20px; min-width: 0; cursor: pointer; border-radius: 14px; }
.mm-next:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 4px; }
.mm-next-img { flex: none; display: block; width: 120px; height: 68px; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.mm-next-img img, .mm-next-img .ss-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-next-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mm-next-k { font: 600 11px/1.3 'Work Sans', system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--mm-gold); }
.mm-next-t { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: .04em; overflow-wrap: break-word; }
.mm-next-s { font-size: 13px; color: var(--mm-muted); }
.mm-next-go { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(232,194,122,.5); font-size: 14px; color: var(--mm-text); transition: background .15s; }
.mm-next-go svg { width: 13px; height: 13px; color: var(--mm-gold); }
.mm-next-go:hover { background: rgba(232,194,122,.12); }
.mm-next-go:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.mm-lauf { display: grid; max-width: 460px; grid-template-columns: auto auto; grid-template-areas: "head week" "note note"; align-items: center; gap: 8px 28px; scroll-margin-top: 24px; }
.mm-lauf-head { grid-area: head; display: flex; align-items: baseline; gap: 10px; }
.mm-lauf-n { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 32px; line-height: 1;
  background: linear-gradient(180deg, #fff1cf, #e8c27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mm-lauf-l { font-size: 13px; color: var(--mm-text2); }
.mm-week { grid-area: week; display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mm-week li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mm-week i { display: block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mm-week li.is-on i { background: #e8c27a; box-shadow: 0 0 12px 3px rgba(232,194,122,.6); }
.mm-week li.is-today:not(.is-on) i { background: none; border: 1.5px solid #e8c27a; }
.mm-week span { font-size: 11px; color: var(--mm-muted); }
.mm-lauf-note { grid-area: note; margin: 0; font-size: 13px; color: var(--mm-muted); text-align: right; text-wrap: balance; }
.mm-more { margin: 0 56px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mm-more > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 13px; color: var(--mm-text2); list-style: none; }
.mm-more > summary::-webkit-details-marker { display: none; }
.mm-more > summary::after { content: ''; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid var(--mm-gold); border-bottom: 1.5px solid var(--mm-gold); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.mm-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.mm-more > summary:hover { color: var(--mm-text); }
.mm-more[open] { padding-bottom: 24px; }
.mm-more .st-stats { margin-top: 6px; }

/* ----- Kursinhalt (kompakt auf dem Start, Seite #kursinhalt) ----- */
.mm-content { padding: 44px 56px 140px; }
.mm-ct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.mm-ct-head h2 { margin: 0; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 30px; letter-spacing: .08em; text-transform: none; color: var(--mm-text); }
.mm-ct-head a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--mm-muted); text-decoration: none; }
.mm-ct-head a:hover { color: var(--mm-text); }
.mm-mods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mm-mod { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; min-height: 132px; padding: 18px; border-radius: 18px; text-align: left;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--mm-text); transition: border-color .15s, background .15s; }
.mm-mod:hover { border-color: rgba(255,255,255,.2); }
.mm-mod.is-on { border-color: rgba(232,194,122,.5); background: rgba(232,194,122,.08); }
.mm-mod:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.mm-mod-n { font-family: 'Cinzel', 'Times New Roman', serif; font-size: 20px; line-height: 1; color: var(--mm-muted); }
.mm-mod.is-on .mm-mod-n { color: var(--mm-gold); }
.mm-mod-t { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.mm-mod-bar { display: block; height: 2px; margin-top: auto; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.mm-mod-bar i { display: block; height: 100%; background: var(--mm-gold); }
.mm-mod-c { font-size: 12px; color: var(--mm-muted); }
.mm-mod-c:first-of-type:last-child, .mm-mod-t + .mm-mod-c { margin-top: auto; }
.mm-mod-body { margin-top: 24px; }
.mm-empty { margin: 0; font-size: 14px; color: var(--mm-muted); }
.mm-empty + .mm-ls-row, .mm-empty + .mm-ls-grid { margin-top: 20px; }
.mm-ls-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.mm-ls-row::-webkit-scrollbar { display: none; }
.mm-ls-row .mm-ls { flex: none; width: 240px; }
.mm-ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.mm-ls { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--mm-text); text-decoration: none; }
.mm-ls-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.mm-ls-img > img, .mm-ls-img > .ss-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-ls:hover .mm-ls-img, .mm-ls:focus-visible .mm-ls-img { outline: 1px solid rgba(232,194,122,.6); outline-offset: 2px; }
.mm-ls:focus-visible { outline: none; }
.mm-ls.is-playing .mm-ls-img { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.mm-ls.is-off { opacity: .55; }
.mm-ls-done { position: absolute; top: 10px; right: 10px; padding: 4px 9px; border-radius: 999px; background: #e8c27a; color: #05040a; font-size: 11px; font-weight: 600; line-height: 1.2; }
.mm-ls-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm-ls-k { font: 600 11px/1.3 'Work Sans', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-gold); }
.mm-ls-t { font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; }
.mm-ls-dot { display: none; }

/* Kursinhalt-Seite: Kopf mit atmender Sonne, Meditationen als Karten */
.mm-inhalt { position: relative; overflow-x: clip; }
.mm-ih-head { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 56px 56px 24px; }
.mm-ih-k { position: relative; z-index: 1; font: 600 11px/1.3 'Work Sans', system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--mm-gold); }
.mm-ih-h { position: relative; z-index: 1; margin: 0; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: .06em; text-transform: none; color: var(--mm-text); }
.mm-sun { position: absolute; right: 40px; top: -90px; width: 380px; height: 380px; pointer-events: none; }
.mm-sun i { position: absolute; display: block; border-radius: 50%; }
.mm-sun-h { inset: 0; background: radial-gradient(circle, rgba(255,214,140,.55) 0%, rgba(255,214,140,.18) 40%, transparent 70%); animation: mmBreathe 9s ease-in-out infinite; }
.mm-sun-c { left: 32%; top: 32%; width: 36%; height: 36%; opacity: .9; background: radial-gradient(circle at 45% 40%, #fffaf0, #f9dfa6 55%, #efbc69);
  box-shadow: 0 0 80px 30px rgba(249,213,140,.55); animation: mmBreathe 9s ease-in-out infinite; }
.mm-content.is-page { position: relative; padding: 8px 56px 140px; }
.mm-medcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mm-medc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-medc-img { display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.mm-medc-img img, .mm-medc-img .ss-pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-medc-img:hover { outline: 1px solid rgba(232,194,122,.6); outline-offset: 2px; }
.mm-medc-t { display: flex; align-items: center; min-height: 44px; margin-top: 2px; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: .06em; color: var(--mm-text); text-decoration: none; }
.mm-medc-t:hover { color: var(--mm-gold); }
.mm-medc-s { font-size: 13px; color: var(--mm-muted); }
.mm-medc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--mm-glass-line); background: var(--mm-glass); color: var(--mm-text2); text-decoration: none; }
.mm-chip svg { width: 13px; height: 13px; color: var(--mm-gold); }
.mm-chip:hover { border-color: rgba(232,194,122,.5); color: var(--mm-text); }
.mm-chip.is-done { border-color: rgba(232,194,122,.35); }
.mm-chip.is-off { opacity: .5; }
.mm-inhalt .pv-parts, .mm-inhalt .with-card, .mm-start .pv-parts { margin-left: 56px; margin-right: 56px; }

/* Fokus einheitlich in Gold für alle Bedienelemente des Kosmos-Looks */
.mm :is(a, button, summary, [tabindex="0"]):focus-visible, .mm-st-streak:focus-visible, .mm-ct-head a:focus-visible, .mm-more > summary:focus-visible,
.mm-chip:focus-visible, .mm-medc-t:focus-visible, .mm-ls:focus-visible .mm-ls-img, body[data-theme-kurs="manifestation"] .sl-crumb:focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.mm-ls:focus-visible, .mm-portal:focus-visible { outline: none; }

/* 1024 bis 1279 px: Portale nur als Kreise, Module in zwei Reihen */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mm-portals.is-desk .mm-portal-t { display: none; }
  .mm-portals.is-desk .mm-ring { width: 88px; height: 88px; }
  .mm-portals.is-desk { right: 48px; gap: 24px; }
  .mm-st-text { width: min(720px, 100% - 200px); }
  .mm-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Bis 1365 px: nächster Schritt und Lauf untereinander, sonst wird der Titel zu schmal (bei 1024 px 0 px breit) */
@media (min-width: 1024px) and (max-width: 1365px) {
  .mm-next-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mm-lauf { justify-self: start; }
  .mm-lauf-note { text-align: left; }
}
/* Bis 1439 px: Offline als runder Knopf (Wort nur für Screenreader), damit die Aktionszeile in eine Zeile passt */
@media (min-width: 1024px) and (max-width: 1439px) {
  .mm-st-acts .off-pill { width: 44px; padding: 0; justify-content: center; }
  .mm-st-acts .off-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ----- Handy (bis 1023 px, Entwurf 3b) ----- */
@media (max-width: 1023px) {
  .mm .mm-d { display: none; }
  .mm .mm-m { display: inline; }
  .mm-kick-d { display: none; }
  .mm-stage { min-height: max(500px, min(600px, calc(100svh - 190px))); padding: 16px 20px 20px; }
  .mm-st-bg { transform: scale(1.3); filter: blur(16px) saturate(1.3) brightness(.8); }
  .mm-st-bg.is-blur { filter: blur(10px) saturate(1.3) brightness(.8); }
  .mm-st-shade { background: linear-gradient(180deg, rgba(5,4,10,.55), rgba(5,4,10,.1) 30%, rgba(5,4,10,.85) 70%, #05040a); }
  .mm-st-head { gap: 12px; }
  .mm-hi-w { font-size: 15px; line-height: 1.35; }
  .mm-hi { display: block; font-size: 20px; }
  .mm-hi-q { display: block; }
  .mm-st-streak { font-size: 12.5px; padding: 0; }
  .mm-st-streak i { width: 7px; height: 7px; }
  .mm-st-text { width: auto; padding-top: 28px; gap: 12px; }
  .mm-kick { font-size: 10px; }
  .mm-st-title { font-size: 38px; line-height: 1.05; letter-spacing: .05em; }
  .mm-st-desc { font-size: 14.5px; line-height: 1.5; }
  .mm-st-quote { display: none; }
  .mm-st-acts { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
  .mm-st-acts .mm-go { order: 0; }
  .mm-seg { gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.07); }
  .mm-seg-b { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; border-radius: 10px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  .mm-go { width: auto; height: auto; min-height: 54px; border-radius: 999px; grid-auto-flow: column; gap: 10px; justify-content: center;
    background: radial-gradient(circle at 30% 30%, #fff1cf, #e8c27a 60%, #a77b34); box-shadow: 0 0 40px rgba(232,194,122,.35);
    font: 700 15px/1 'Manrope', system-ui, sans-serif; }
  .mm-go svg { width: 16px; height: 16px; }
  .mm-go-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .mm-offw { align-self: center; }
  .mm-offw:empty { display: none; }
  .mm-portals.is-desk { display: none; }
  .mm-portals.is-mob { display: flex; justify-content: center; gap: 26px; padding: 8px 20px 4px; }
  .mm-portal { flex-direction: column; gap: 8px; min-width: 76px; min-height: 96px; text-align: center; }
  .mm-ring { width: 76px; height: 76px; }
  .mm-portal-t b { font-size: 10.5px; letter-spacing: .06em; color: var(--mm-text2); }
  .mm-portal.is-on .mm-portal-t b { color: var(--mm-text); }

  .mm-next-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 20px 0; padding: 0; border: 0; }
  .mm-next { gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
  .mm-next-img { width: 84px; height: 47px; border-radius: 9px; }
  .mm-next-k { font-size: 9.5px; letter-spacing: .22em; }
  .mm-next-t { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.3; letter-spacing: 0; }
  .mm-next-s { font-size: 12px; }
  .mm-next-go { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .mm-next-go span { display: none; }
  .mm-lauf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "week" "note"; gap: 12px; padding: 16px 16px 6px; border-radius: 18px 18px 0 0;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-bottom: 0; scroll-margin-top: calc(var(--top-h, 64px) + 12px); }
  .mm-week { justify-content: space-between; gap: 0; }
  .mm-lauf-note { text-align: left; }
  .mm-more { margin: 0 20px; padding: 0 16px; border-radius: 0 0 18px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-top: 0; }
  .mm-more[open] { padding-bottom: 16px; }

  .mm-content { padding: 30px 20px 190px; }
  .mm-ct-head { margin-bottom: 14px; }
  .mm-ct-head h2 { font-size: 22px; }
  .mm-ct-head a { font-size: 12px; }
  .mm-mods { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mm-mods::-webkit-scrollbar { display: none; }
  .mm-mod { flex: none; flex-direction: row; align-items: center; gap: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13px;
    border-color: rgba(255,255,255,.1); background: none; white-space: nowrap; }
  .mm-mod.is-on { border-color: rgba(232,194,122,.6); background: rgba(232,194,122,.12); }
  .mm-mod-n { font-size: 13px; margin-right: 6px; color: var(--mm-gold); }
  .mm-mod-t { font-size: 13px; font-weight: 600; overflow-wrap: normal; hyphens: none; }
  .mm-mod-bar, .mm-mod-c { display: none; }
  .mm-mod-body { margin-top: 16px; }
  .mm-empty { font-size: 13px; }
  .mm-ls-row, .mm-ls-grid { display: flex; flex-direction: column; gap: 0; overflow: visible; padding: 0; }
  .mm-ls-row .mm-ls, .mm-ls-grid .mm-ls { width: auto; }
  .mm-ls { display: grid; grid-template-columns: 96px minmax(0, 1fr) 10px; align-items: center; gap: 12px; padding: 7px 0; }
  .mm-ls-img { width: 96px; height: 54px; aspect-ratio: auto; border-radius: 10px; }
  .mm-ls-done { display: none; }
  .mm-ls-b { gap: 3px; }
  .mm-ls-k { font-size: 9.5px; }
  .mm-ls-t { font-size: 14px; }
  .mm-ls-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: #e8c27a; box-shadow: 0 0 8px 2px rgba(232,194,122,.55); }
  .mm-ih-head { padding: 28px 20px 16px; }
  .mm-sun { width: 220px; height: 220px; right: -70px; top: -70px; }
  .mm-ih-k, .mm-ih-h { max-width: calc(100% - 120px); }
  .mm-content.is-page { padding: 4px 20px 190px; }
  .mm-medcs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mm-medc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .mm-chip { justify-content: center; }
  .mm-inhalt .pv-parts, .mm-inhalt .with-card, .mm-start .pv-parts { margin-left: 20px; margin-right: 20px; }
  .mm-start > .inst-card { margin: 16px 20px 0; }
}
/* Schmal (bis 420 px): bei vier Fassungen nur „kurz 3“ ohne Minuten, die stehen im Player und in der Lektion */
@media (max-width: 420px) {
  .mm-seg:has(> :nth-child(4)) .mm-seg-min { display: none; }
}
@media (max-width: 380px) {
  .mm-portals.is-mob { gap: 16px; }
  .mm-st-title { font-size: 34px; }
}

/* ----- Leiste, Kopf, Mini-Player ----- */
@media (min-width: 1024px) {
  body.is-app[data-theme-kurs="manifestation"]::before { background: #05040a; border-right: 1px solid rgba(255,255,255,.06); }
  body.is-app[data-theme-kurs="manifestation"] .top, body.is-app[data-theme-kurs="manifestation"] .tabs { background: none; border-top: 0; }
  body.is-app[data-theme-kurs="manifestation"] .brand-name { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 18px; letter-spacing: .06em; }
  body.is-app[data-theme-kurs="manifestation"] .kurs-switch { height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 500; color: var(--mm-text); }
  body.is-app[data-theme-kurs="manifestation"] .lupe { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: var(--mm-muted); }
  body.is-app[data-theme-kurs="manifestation"] .lupe:hover, body.is-app[data-theme-kurs="manifestation"] .lupe.is-on { border-color: rgba(232,194,122,.5); color: var(--mm-text); }
  body.is-app[data-theme-kurs="manifestation"] .tab { height: 44px; border-radius: 14px; font-size: 15px; color: #8d8799; }
  body.is-app[data-theme-kurs="manifestation"] .tab.is-on { background: rgba(232,194,122,.12); color: #e8c27a; font-weight: 600; }
  body.is-app[data-theme-kurs="manifestation"] .tab.is-home:not(.is-on) { color: #8d8799; font-weight: 400; }
  body.is-app[data-theme-kurs="manifestation"] .tab:not(.is-on):hover { background: rgba(255,255,255,.05); color: #f2ecdf; }
  body.is-app[data-theme-kurs="manifestation"] .foot { color: var(--mm-muted); }
  body.is-app[data-theme-kurs="manifestation"] .player { background: rgba(14,12,20,.96); border-top: 1px solid rgba(255,255,255,.06); }
  body.is-app[data-theme-kurs="manifestation"] .player .p-art { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #1a1622; }
  body.is-app[data-theme-kurs="manifestation"] .player #p-title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 14.5px; }
  body.is-app[data-theme-kurs="manifestation"] .player #p-sub { font-size: 12.5px; color: var(--mm-muted); }
  body.is-app[data-theme-kurs="manifestation"] .player .ctl.play { width: 46px; height: 46px; background-color: #f2ecdf; box-shadow: none; }
  body.is-app[data-theme-kurs="manifestation"] .player .seek { accent-color: #e8c27a; }
  body.is-app[data-theme-kurs="manifestation"] .player .p-seek { font-size: 12px; color: var(--mm-muted); }
  body.is-app.is-mmstage { padding-bottom: 0; }
  body.is-app[data-theme-kurs="manifestation"] .glow { display: none; }
  body.is-app.is-mmstage:has(#player:not([hidden])) .mm-content { padding-bottom: 130px; }
}
@media (max-width: 1023px) {
  body[data-theme-kurs="manifestation"] .tabs { background: #05040a; border-top: 1px solid rgba(255,255,255,.06); }
  body[data-theme-kurs="manifestation"] .tab { font-size: 11px; color: #8d8799; }
  body[data-theme-kurs="manifestation"] .tab.is-on, body[data-theme-kurs="manifestation"] .tab.is-home { background: none; color: #e8c27a; font-weight: 600; }
  body[data-theme-kurs="manifestation"] .top { background: #05040a; }
  body.is-mmstage[data-theme-kurs="manifestation"] .top { background: rgba(5,4,10,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  body[data-theme-kurs="manifestation"] .player { left: 10px; right: 10px; border-radius: 18px; padding: 0 8px; background: rgba(26,22,34,.94); border: 1px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  body[data-theme-kurs="manifestation"] .player .p-art { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #1a1622; }
  body[data-theme-kurs="manifestation"] .player .player-title { font-size: 13.5px; }
  body[data-theme-kurs="manifestation"] .player .player-sub { font-size: 11.5px; color: var(--mm-muted); }
  body[data-theme-kurs="manifestation"] .player .ctl.play { width: 44px; height: 44px; background-color: #f2ecdf; box-shadow: none; }
  body.is-mmstage { padding-bottom: 0; }
}
body[data-theme-kurs="manifestation"] .player .p-line span { background: linear-gradient(90deg, #a77b34, #f3dc9c); }

/* ----- Lektionsseite im Kosmos-Look (sessionLessonHtml, nur Look; der Krümel kommt aus mmCrumbHtml) ----- */
body[data-theme-kurs="manifestation"] .sl-crumb { min-height: 44px; font-size: 13px; color: var(--mm-muted); }
body[data-theme-kurs="manifestation"] .sl-crumb svg { color: var(--mm-gold); }
body[data-theme-kurs="manifestation"] .sl-crumb:hover { color: var(--mm-text); }
body[data-theme-kurs="manifestation"] .sl-hero { border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
body[data-theme-kurs="manifestation"] .sl-art .art-play { width: 76px; height: 76px; border-radius: 50%; background-color: #e8c27a; background-size: 24px;
  box-shadow: 0 0 0 10px rgba(232,194,122,.12), 0 0 50px rgba(232,194,122,.5); }
body[data-theme-kurs="manifestation"] .lesson-title { font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: .04em; text-transform: none; }
body[data-theme-kurs="manifestation"] .lesson-meta { font-size: 13px; color: var(--mm-muted); }
body[data-theme-kurs="manifestation"] .sl-var { border-radius: 11px; border: 1px solid var(--mm-glass-line); background: var(--mm-glass); color: var(--mm-text2); }
body[data-theme-kurs="manifestation"] .sl-var.is-on { background: #f2ecdf; border-color: #f2ecdf; color: #05040a; font-weight: 600; }
body[data-theme-kurs="manifestation"] .sl-prac { border-radius: 999px; border: 1px solid rgba(232,194,122,.5); }
body[data-theme-kurs="manifestation"] .sl-prac.is-done { background: rgba(232,194,122,.14); border-color: rgba(232,194,122,.6); color: #e8c27a; }
body[data-theme-kurs="manifestation"] .sl-tabs { background: #05040a; }
body[data-theme-kurs="manifestation"] .sl-tab.is-on { color: #e8c27a; border-bottom: 2px solid #e8c27a; }
body[data-theme-kurs="manifestation"] .lesson-text { font-size: 17px; line-height: 1.7; color: var(--mm-text2); }
body[data-theme-kurs="manifestation"] .lesson-text a { color: var(--mm-gold); }
body[data-theme-kurs="manifestation"] .lesson-text :is(h2, h3) { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; color: var(--mm-text); }
body[data-theme-kurs="manifestation"] .comments .c-card { border-radius: 14px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body[data-theme-kurs="manifestation"] .comments .c-author { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; }
body[data-theme-kurs="manifestation"] .comments .c-time { color: var(--mm-muted); }
body[data-theme-kurs="manifestation"] .comments :is(textarea, input[type="text"]) { background: #0e0c14; border-color: rgba(255,255,255,.12); color: var(--mm-text); }
body[data-theme-kurs="manifestation"] .comments :is(textarea, input[type="text"]):focus { border-color: #e8c27a; outline: none; }
body[data-theme-kurs="manifestation"] .sl-nav { border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
body[data-theme-kurs="manifestation"] .sl-nav-t > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #e8c27a; }
@media (max-width: 1023px) {
  body[data-theme-kurs="manifestation"] .sl-art .art-play { width: 64px; height: 64px; background-size: 22px; }
  body[data-theme-kurs="manifestation"] .lesson-title { font-size: min(30px, 7.6vw); }
  body[data-theme-kurs="manifestation"] .lesson-text { font-size: 16px; line-height: 1.65; }
  body[data-theme-kurs="manifestation"] .sl-var { min-height: 44px; }
  body[data-theme-kurs="manifestation"] .sl-crumb { display: inline-flex; align-items: center; }
}

/* ----- Großer Player: Portal-Look (.pfull.is-mm). Trägt den Look der Session, auch wenn ein anderer Kurs offen ist. ----- */
.pf-mm, .pf-mmline { display: none; }
.pfull.is-mm { background: #05040a; color: #f2ecdf; }
.pfull.is-mm::before { content: ''; position: fixed; inset: -80px; left: -80px; top: -80px; width: auto; height: auto; z-index: 0; pointer-events: none;
  background: var(--mm-pbg, none) center / cover no-repeat; filter: blur(44px) saturate(1.5) brightness(.5); }
.pfull.is-mm.has-mmblur::before { filter: blur(12px) saturate(1.5) brightness(.5); }
.pfull.is-mm::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, rgba(5,4,10,0), #05040a 78%); }
.pfull.is-mm .pf-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  max-width: none; min-height: 100dvh; box-sizing: border-box; padding: 80px 32px 32px; text-align: center; }
.pfull.is-mm .pf-in > * { grid-column: auto; grid-row: auto; margin-left: 0; margin-right: 0; }
.pfull.is-mm .pf-head { display: contents; }
.pfull.is-mm .pf-x { position: absolute; top: 28px; left: 32px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; min-height: 44px; padding: 0 16px 0 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f2ecdf; }
.pfull.is-mm .pf-x svg { width: 18px; height: 18px; }
.pfull.is-mm .pf-x[data-mml]::after { content: attr(data-mml); font-size: 13px; }
.pfull.is-mm .pf-dl { position: absolute; top: 28px; right: 32px; z-index: 2; width: 44px; height: 44px; }
.pfull.is-mm .pf-dl:empty { display: none; }
.pfull.is-mm .pf-dlb { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f2ecdf; }
.pfull.is-mm .pf-dlb svg { width: 18px; height: 18px; }
.pfull.is-mm .pf-dlb.is-done, .pfull.is-mm .pf-dlb small { color: #e8c27a; }
.pfull.is-mm .pf-kicker { order: 1; margin: 0; font: 600 11px/1.3 'Work Sans', system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #e8c27a; }
.pfull.is-mm .pf-art, .pfull.is-mm .pf-frame, .pfull.is-mm .pf-sk, .pfull.is-mm .pf-pre, .pfull.is-mm .pf-next { display: none; }
.pfull.is-mm .pf-mm:not([hidden]) { --mm-orb: clamp(200px, calc(100dvh - 600px), 360px); order: 2; position: relative; display: block; flex: none; width: var(--mm-orb); height: var(--mm-orb); }
.pf-mm > i, .pf-mm > span { position: absolute; display: block; border-radius: 50%; }
.pf-mm-halo { inset: -25%; background: radial-gradient(circle, rgba(232,194,122,.35), rgba(232,194,122,0) 65%); animation: mmBreathe 8s ease-in-out infinite; }
.pf-mm-ring { inset: 0; background: conic-gradient(from 0deg, rgba(232,194,122,0), #f3dc9c, rgba(232,194,122,0) 40%, rgba(232,194,122,.7) 70%, rgba(232,194,122,0));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: mmSpin 10s linear infinite; }
.pf-mm-line { inset: 14px; border: 1px solid rgba(232,194,122,.2); }
.pf-mm-img { inset: 22px; background: #1a1622 center / cover no-repeat; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); animation: mmBreathe 8s ease-in-out infinite; }
.pfull.is-mm:not(.is-playing) .pf-mm > * { animation-play-state: paused; }
.pfull.is-mm .pf-title { order: 3; margin: 0; max-width: 760px; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: .06em; text-transform: none; color: #f2ecdf; }
.pfull.is-mm .pf-sub { order: 4; margin: 0; font-size: 14px; color: #cfc6b4; }
.pfull.is-mm .pf-chips:not([hidden]) { order: 5; display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 5px; border-radius: 16px; background: var(--mm-glass); border: 1px solid var(--mm-glass-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pfull.is-mm .pf-chips::before { content: none; display: none; }
.pfull.is-mm .pf-chip { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 40px; padding: 10px 14px; border: 0; border-radius: 11px; background: none;
  font: 500 13px/1.2 'Work Sans', system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: #cfc6b4; white-space: nowrap; }
.pfull.is-mm .pf-chip small { font: 400 11px/1 'Work Sans', system-ui, sans-serif; opacity: .75; }
.pfull.is-mm .pf-chip.is-on { background: #f2ecdf; color: #05040a; font-weight: 600; }
.pfull.is-mm .pf-chip:focus-visible { outline: 2px solid #e8c27a; outline-offset: 2px; }
.pfull.is-mm .pf-big { order: 6; display: block; font-family: 'Cinzel', 'Times New Roman', serif; font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #f3dc9c; }
.pfull.is-mm .pf-big::before { content: '−'; }
.pfull.is-mm .pf-big:empty::before { content: none; }
.pfull.is-mm .pf-seek { order: 7; width: min(520px, 100%); margin: 0; }
.pfull.is-mm .pf-seek .seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #a77b34, #f3dc9c var(--v, 0%), rgba(255,255,255,.14) var(--v, 0%)); }
.pfull.is-mm .pf-seek .seek::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, #a77b34, #f3dc9c var(--v, 0%), rgba(255,255,255,.14) var(--v, 0%)); }
.pfull.is-mm .pf-seek .seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4.5px; background: #f3dc9c; box-shadow: none; }
.pfull.is-mm .pf-seek .seek::-moz-range-thumb { width: 12px; height: 12px; background: #f3dc9c; }
.pfull.is-mm .pf-times { margin-top: 2px; font-size: 12px; color: #8d8799; }
.pfull.is-mm:not(:has(.p-sos:not([hidden]))) .pf-ctls { order: 8; display: grid; grid-template-columns: 52px 48px 84px 48px 52px; gap: 0 28px; justify-content: center; align-items: center; margin: 4px 0 0; }
.pfull.is-mm:has(.p-sos:not([hidden])) .pf-ctls { order: 8; display: flex; gap: 18px; justify-content: center; align-items: center; margin: 4px 0 0; }
.pfull.is-mm .pf-ctls > #pf-talk { display: none; }
.pfull.is-mm .ctl { width: 48px; height: 48px; color: #cfc6b4; }
.pfull.is-mm .ctl svg { width: 28px; height: 28px; }
.pfull.is-mm .ctl.play { width: 84px; height: 84px; border-radius: 50%; background-color: #e8c27a; background-size: 26px; box-shadow: 0 0 0 10px rgba(232,194,122,.12), 0 0 60px rgba(232,194,122,.5); }
.pfull.is-mm .pf-pill { border-color: rgba(255,255,255,.14); color: #cfc6b4; }
.pfull.is-mm .pf-done { width: 48px; height: 48px; justify-self: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f2ecdf; }
.pfull.is-mm .pf-done.is-done { background: rgba(232,194,122,.14); border-color: rgba(232,194,122,.6); color: #e8c27a; }
.pfull.is-mm .pf-mmline:not([hidden]) { order: 9; display: block; margin: 4px 0 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 20px; color: #cfc6b4; }
.pfull.is-mm .pf-acts { order: 10; display: flex; justify-content: center; margin: 0; padding: 0; }
.pfull.is-mm .pf-acts:empty { display: none; }
.pfull.is-mm .pf-act { min-height: 44px; height: auto; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(232,194,122,.5); background: none; color: #f2ecdf; font-size: 14px; font-weight: 500; }
.pfull.is-mm .pf-act:hover { background: rgba(232,194,122,.12); }
.pfull.is-mm .pf-n { background: #e8c27a; color: #05040a; }
.pfull.is-mm .pf-vol { order: 11; width: min(320px, 100%); margin: 0; color: #8d8799; }
.pfull.is-mm .pf-vol .vol { accent-color: #e8c27a; }
.pfull.is-mm .pf-skhint, .pfull.is-mm .pf-sksleep { order: 12; }
/* Niedrige Fenster am Desktop (bis 960 px Höhe): enger, damit auch die Lautstärke ohne Scrollen sichtbar ist */
@media (min-width: 1024px) and (max-height: 960px) {
  .pfull.is-mm .pf-in { gap: 10px; padding-top: 72px; padding-bottom: 20px; }
  .pfull.is-mm .pf-mm:not([hidden]) { --mm-orb: clamp(160px, calc(100dvh - 660px), 360px); }
  .pfull.is-mm .pf-title { font-size: 34px; }
  .pfull.is-mm .pf-big { font-size: 46px; }
  .pfull.is-mm .ctl.play { width: 76px; height: 76px; }
  .pfull.is-mm:not(:has(.p-sos:not([hidden]))) .pf-ctls { grid-template-columns: 52px 48px 76px 48px 52px; }
  .pfull.is-mm .pf-mmline:not([hidden]) { margin: 0; font-size: 18px; }
}
@media (max-width: 1023px) {
  .pfull.is-mm .pf-in { gap: 12px; padding: calc(64px + var(--safe-top, 0px)) 24px calc(24px + var(--safe-bottom)); }
  .pfull.is-mm .pf-x { top: calc(14px + var(--safe-top, 0px)); left: 18px; }
  .pfull.is-mm .pf-dl { top: calc(14px + var(--safe-top, 0px)); right: 18px; }
  .pfull.is-mm .pf-kicker { font-size: 10px; }
  .pfull.is-mm .pf-mm:not([hidden]) { --mm-orb: clamp(160px, calc(100dvh - 600px), 250px); }
  .pfull.is-mm .pf-title { font-size: 26px; }
  .pfull.is-mm .pf-sub { font-size: 13px; }
  .pfull.is-mm .pf-chips:not([hidden]) { width: 100%; padding: 4px; gap: 4px; border-radius: 14px; }
  .pfull.is-mm .pf-chip { flex: 1; min-width: 0; min-height: 44px; padding: 0 4px; align-items: center; flex-direction: column; justify-content: center; gap: 2px; font-size: 12.5px; }
  .pfull.is-mm .pf-big { font-size: 44px; }
  .pfull.is-mm .pf-seek { width: 100%; }
  .pfull.is-mm:not(:has(.p-sos:not([hidden]))) .pf-ctls { grid-template-columns: 48px 48px 76px 48px 48px; gap: 0 18px; }
  .pfull.is-mm .ctl.play { width: 76px; height: 76px; background-size: 24px; }
  .pfull.is-mm .pf-mmline:not([hidden]) { font-size: 18px; }
  .pfull.is-mm .pf-vol { width: 100%; }
}

/* Bewegung nur, wo sie etwas sagt. Reduzierte Bewegung: alles steht still, nichts gleitet. */
@media (prefers-reduced-motion: reduce) {
  .mm-ring-c, .pf-mm > *, .mm-sun, .mm-sun > * { animation: none; }
  .mm-seg-b, .mm-mod, .mm-portal, .mm-go, .mm-next-go, .mm-more > summary::after { transition: none; }
}

/* ---------- Schlafkurs-Start Variante B (v178, Design „Schlafkurs Startseite“) ----------
   Begrüßung mit Schlaftyp und Nacht, „Heute Nacht“ und der 14-Nächte-Plan nebeneinander, „Nachts wach?“ als Zeile,
   darunter die Module als Tabs (Meditationen zuerst). „Über den Kurs“ steht unten statt in einer Seitenspalte. */
.sk-start.is-b { display: flex; flex-direction: column; gap: 16px; }
.sk-start.is-b .sk-hello { margin: 18px 4px 4px; }
.sk-sub { margin: 4px 0 0; font-size: 15px; color: var(--sk-mute); }
.sk-sub b { color: var(--sk-sand); font-weight: 600; }
.sk-start.is-b .sk-slot:empty { display: none; }
.sk-duo { display: flex; flex-direction: column; gap: 16px; }
.sk-start.is-b .sk-hero { min-height: 280px; }
.sk-plan { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 22px; background: #1d1738; border: 1px solid var(--sk-line); color: var(--sk-text); }
.sk-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sk-plan-top span { font-size: 13px; color: var(--sk-mute); white-space: nowrap; }
.sk-pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.sk-pgrid li { aspect-ratio: 1; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(230,211,179,0.05); border: 1px solid rgba(230,211,179,0.12); color: var(--sk-mute); }
.sk-pgrid li span { font-size: 9px; letter-spacing: 0.04em; opacity: .8; }
.sk-pgrid li b { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; }
.sk-pgrid li.is-done { background: rgba(230,211,179,0.16); border-color: rgba(230,211,179,0.32); color: var(--sk-text); }
.sk-pgrid li.is-now { background: var(--sk-sand); border-color: var(--sk-sand); color: var(--sk-ink); }
.sk-plan-rem { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: auto; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(230,211,179,0.4); background: none; color: var(--sk-sand); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; }
.sk-plan-rem:hover { border-color: var(--sk-sand); }
.sk-plan-rem:disabled { opacity: .5; cursor: default; }
.sk-plan-rem svg { width: 17px; height: 17px; flex: none; }
.sk-plan-on { display: flex; align-items: center; gap: 8px; margin: auto 0 0; font-size: 14px; color: var(--sk-mute); }
.sk-plan-on svg { width: 16px; height: 16px; flex: none; color: var(--sk-sand); }
.sk-plan .sk-hint { margin: auto 0 0; }
.sk-plan.is-week { gap: 6px; }
.sk-plan.is-week .sk-streak { margin-top: 0; }
.sk-tabs-wrap { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; scroll-margin-top: 16px; }
/* Seit 10.10.2026 auch auf dem Handy umbrechen statt seitlich scrollen: Schlaftipps und Bonus gingen rechts außerhalb unter */
.sk-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--sk-line); }
.sk-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(230,211,179,0.2);
  background: none; color: var(--sk-text); font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.sk-tab:hover { border-color: rgba(230,211,179,0.5); }
.sk-tab.is-on { background: var(--sk-sand); border-color: var(--sk-sand); color: var(--sk-ink); }
.sk-tab-n { font-weight: 400; opacity: .65; }
.sk-tab-n:empty { display: none; }
.sk-tab:focus-visible { outline: 2px solid var(--sk-sand); outline-offset: 2px; }
.sk-tp { display: flex; flex-direction: column; gap: 10px; }
.sk-tp[hidden] { display: none; }
.sk-tp .sk-row { padding: 12px; border-radius: 16px; }
.sk-tp .sk-row-img { width: 84px; height: 54px; border-radius: 10px; }
.sk-tp .sk-row-t b { font-size: 15px; }
.sk-tp .sk-note { margin: 0; }
.sk-foot { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
@media (min-width: 760px) {
  .sk-tp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .sk-start.is-b { max-width: 1100px; gap: 20px; }
  .sk-start.is-b .sk-hello { margin: 0 4px 8px; }
  .sk-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 20px; align-items: stretch; }
  .sk-duo > .sk-slot { display: flex; }
  .sk-duo > .sk-slot > .sk-plan { flex: 1; padding: 24px; border-radius: 26px; }
  .sk-start.is-b .sk-hero { min-height: 340px; border-radius: 26px; }
  .sk-start.is-b .sk-hero-t b { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: 0; }
  .sk-start.is-b .sk-hero-in { padding: 28px; }
  .sk-start.is-b .sk-hero-play { width: 68px; height: 68px; }
  .sk-start.is-b .sk-hero-play svg { width: 24px; height: 24px; }
  .sk-foot { flex-direction: row; gap: 28px; }
  .sk-foot > * { flex: 1; }
}
.sk-plan .sk-streak { margin-top: -4px; border-top: 1px solid var(--sk-line); }


/* ---------- 12. Hypnobreath®-Host „Atelier“ (v187; Entwurf Artifact „Host-Bereich Redesign“) ----------
   Hell im ganzen Kurs host. Erst Brücken für fest verdrahtete Dunkel-Farben aus app.css, dann die host-Seiten (.h-*). */
[data-theme-kurs="host"] .k-ruhig { --k: #8FAE9C; } [data-theme-kurs="host"] .k-rhythmus { --k: #D6B279; }
[data-theme-kurs="host"] .k-verbunden { --k: #E8956F; } [data-theme-kurs="host"] .k-schnell { --k: #D46A55; }
[data-theme-kurs="host"] .k-pause { --k: #7FA9B3; } [data-theme-kurs="host"] .k-aus { --k: #6F8B7E; } [data-theme-kurs="host"] .k-ende { --k: #B9B2A6; }

/* 12a. Seiten des Kurses host (.h-*). Überschriften groß in Fraunces, letztes Wort kursiv (hostEm in app.js). */
[data-theme-kurs="host"] .h { gap: 56px; max-width: 1180px; font-family: var(--font-body); }
[data-theme-kurs="host"] .h em { font-style: italic; color: var(--sand); }
[data-theme-kurs="host"] .h-kick { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--muted); }
[data-theme-kurs="host"] .h-h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(52px, 8.5vw, 128px); line-height: .9; letter-spacing: -0.045em; }
[data-theme-kurs="host"] .h-head > div:first-child { gap: 18px; }
[data-theme-kurs="host"] .h-lic { border: 0; background: var(--sage); color: var(--sand); font-size: 13px; font-weight: 600; padding: 9px 16px; }
[data-theme-kurs="host"] .h-btn { min-height: 46px; padding: 12px 22px; background: var(--sand); border-color: var(--sand); color: var(--linen-ink); font-size: 15px; }
[data-theme-kurs="host"] .h-btn.is-ghost { background: none; color: var(--text); border-color: rgba(29,35,32,.22); }
[data-theme-kurs="host"] .h-btn.is-big { min-height: 56px; padding: 16px 28px; font-size: 16px; }
[data-theme-kurs="host"] .h-btn:hover { filter: brightness(1.08); }
[data-theme-kurs="host"] .h-btn.is-ghost:hover { background: rgba(29,35,32,.05); filter: none; }

/* Start: Begrüßung mit Foto im Bogen */
.h-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.h-hero-t { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.h-hero-img { aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; background: var(--deep); }
.h-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; display: block; }
@media (max-width: 899px) { .h-hero { grid-template-columns: 1fr; gap: 28px; } .h-hero-img { order: -1; max-width: 260px; width: 58%; justify-self: center; } }
[data-theme-kurs="host"] .h-hero .h-head { margin: 0; }
[data-theme-kurs="host"] .h-hero .h-head > div:first-child { gap: 22px; }
[data-theme-kurs="host"] .h-hero .h-h1 { font-size: clamp(60px, 9vw, 150px); }

/* Live-Veranstaltungen (Karte auf dem Start und Kopf der Seite) */
[data-theme-kurs="host"] .hev-card-in { gap: 18px; padding: 28px 0 0; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--line); }
[data-theme-kurs="host"] .hev-card.is-page .hev-card-in { padding: clamp(28px, 4vw, 56px); border-radius: 40px; background: var(--bg-2); border: 0; }
[data-theme-kurs="host"] .hev-num { gap: 6px 18px; }
[data-theme-kurs="host"] .hev-num b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(72px, 10vw, 150px); line-height: .78; letter-spacing: -0.04em; color: var(--sand); }
[data-theme-kurs="host"] .hev-num span { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 350; }
[data-theme-kurs="host"] .hev-ms { max-width: 520px; }
[data-theme-kurs="host"] .hev-ms::before { background: var(--line); top: 8px; height: 1px; }
[data-theme-kurs="host"] .hev-ms li { font-size: 14px; color: var(--muted); font-family: var(--serif); }
[data-theme-kurs="host"] .hev-ms i { width: 17px; height: 17px; background: var(--bg); border: 1.5px solid rgba(29,35,32,.3); }
[data-theme-kurs="host"] .hev-card.is-page .hev-ms i { background: var(--bg-2); }
[data-theme-kurs="host"] .hev-ms li.is-on i, [data-theme-kurs="host"] .hev-card.is-page .hev-ms li.is-on i { background: var(--sand); border-color: var(--sand); }
[data-theme-kurs="host"] .hev-ms li.is-next i { border-color: var(--sand); box-shadow: 0 0 0 6px var(--sage); }
[data-theme-kurs="host"] .hev-ms li.is-on, [data-theme-kurs="host"] .hev-ms li.is-next { color: var(--sand); font-weight: 500; }
[data-theme-kurs="host"] .hev-line { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
[data-theme-kurs="host"] .hev-last, [data-theme-kurs="host"] .hev-empty { color: var(--muted); }
[data-theme-kurs="host"] .hev-err { color: #A4452F; }
[data-theme-kurs="host"] .hev-item, [data-theme-kurs="host"] .hev-form { padding: clamp(22px, 3vw, 40px); border-radius: 32px; background: var(--bg-2); border: 0; }
[data-theme-kurs="host"] .hev-item h2, [data-theme-kurs="host"] .hev-form h2 { font-family: var(--serif); font-weight: 350; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; }
[data-theme-kurs="host"] .hev-note { color: var(--text); }
[data-theme-kurs="host"] .hev-form input, [data-theme-kurs="host"] .hev-form textarea { background: var(--bg); border-color: var(--line); color: var(--text); border-radius: 16px; }

/* Bühne „Heute spielen“: dunkle Insel auf der hellen Seite */
.h-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 40px; background: var(--forest, #1C2E28); color: #F3EFE8; }
.h-stage-t { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.h-stage .h-kick { color: #B9CBBF; }
.h-stage h2 { margin: 0; font-family: var(--serif); font-weight: 330; font-size: clamp(44px, 5.5vw, 76px); line-height: .95; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.h-stage-meta { margin-top: -10px; font-size: 15px; color: #B9CBBF; }
.h-stage-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.h-mode { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(243,239,232,.16); color: #F3EFE8; text-decoration: none; }
.h-mode b { font-size: 16px; font-weight: 600; }
.h-mode span { font-size: 13px; color: #B9CBBF; }
.h-mode:hover { background: rgba(243,239,232,.06); }
.h-mode.is-on { background: #F3EFE8; border-color: #F3EFE8; color: #1C2E28; }
.h-mode.is-on span { color: #4F554F; }
.h-stage-lines { margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: rgba(243,239,232,.5); }
.h-stage-lines span:nth-child(2) { color: #F3EFE8; }
.h-stage-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.h-stage-play { display: inline-flex; align-items: center; gap: 16px; color: #F3EFE8; text-decoration: none; font-size: 17px; font-weight: 600; }
.h-stage-play > span { width: 80px; height: 80px; border-radius: 50%; background: #F3EFE8; color: #1C2E28; display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(243,239,232,.08); }
.h-stage-play svg { width: 24px; height: 24px; margin-left: 3px; }
.h-stage-other { color: #DCE5DE; font-size: 15px; text-underline-offset: 5px; }
.h-stage-m { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.h-stage-img { display: block; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #0F1A16; }
.h-stage-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-stage-bar { display: flex; gap: 3px; height: 30px; }
.h-stage-bar i { min-width: 3px; border-radius: 6px; background: var(--k, #B9CBBF); }
.h-stage-bar .k-pause { background: none; border: 1px solid rgba(243,239,232,.35); }
.h-stage .k-ruhig { --k: #B9CBBF; } .h-stage .k-rhythmus { --k: #E2C48F; } .h-stage .k-verbunden { --k: #EFA27F; } .h-stage .k-schnell { --k: #E5826C; }
.h-stage .k-aus { --k: #8FA79A; } .h-stage .k-ende { --k: #6E8579; }
.h-stage-legend { font-size: 13px; color: #B9CBBF; }
@media (max-width: 899px) { .h-stage { grid-template-columns: 1fr; border-radius: 32px; } .h-stage-m { order: -1; } }

/* Weitermachen und Kacheln */
[data-theme-kurs="host"] .h-top { gap: 20px; }
[data-theme-kurs="host"] .h-cont { min-height: 300px; border-radius: 32px; }
[data-theme-kurs="host"] .h-cont-sh { background: linear-gradient(180deg, rgba(28,46,40,0) 20%, rgba(28,46,40,.88) 100%); }
[data-theme-kurs="host"] .h-cont-in { color: #F3EFE8; }
[data-theme-kurs="host"] .h-cont .h-kick { color: #DCE5DE; }
[data-theme-kurs="host"] .h-cont-t b { font-family: var(--serif); font-weight: 350; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; }
[data-theme-kurs="host"] .h-cont-t > span:last-child { color: rgba(243,239,232,.8); }
[data-theme-kurs="host"] .h-play { background: #F3EFE8; color: #1C2E28; width: 64px; height: 64px; }
[data-theme-kurs="host"] .h-quicks { gap: 12px; }
[data-theme-kurs="host"] .h-quick { padding: 22px 26px; border-radius: 24px; background: var(--bg-2); border: 0; gap: 6px; }
[data-theme-kurs="host"] .h-quick:hover { background: #fff; }
[data-theme-kurs="host"] .h-quick b { font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }
[data-theme-kurs="host"] .h-quick span { color: var(--muted); }

/* Abschnitte, Reihen, Chips, Zeilen */
[data-theme-kurs="host"] .h-sec { gap: 24px; }
[data-theme-kurs="host"] .h-sec-h h2 { font-family: var(--serif); font-weight: 330; font-size: clamp(36px, 4.5vw, 64px); line-height: .95; letter-spacing: -0.03em; }
[data-theme-kurs="host"] .h-sec-h > span { color: var(--muted); }
[data-theme-kurs="host"] .h-sec-h > a, [data-theme-kurs="host"] .h-more, [data-theme-kurs="host"] .h-link { color: var(--sand); font-weight: 600; }
[data-theme-kurs="host"] .h-series { grid-template-columns: repeat(auto-fill, minmax(min(240px, 44vw), 1fr)); gap: 24px; }
[data-theme-kurs="host"] .h-ser { border-radius: 0; background: none; border: 0; gap: 14px; }
[data-theme-kurs="host"] .h-ser:hover { background: none; }
[data-theme-kurs="host"] .h-ser img { aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: var(--shadow-card); }
[data-theme-kurs="host"] .h-ser > span { padding: 0 2px; }
[data-theme-kurs="host"] .h-ser b { font-family: var(--serif); font-weight: 400; font-size: 22px; }
[data-theme-kurs="host"] .h-ser > span > span { color: var(--muted); }
[data-theme-kurs="host"] .h-chip { padding: 11px 18px; border: 0; background: var(--bg-2); color: var(--muted); }
[data-theme-kurs="host"] .h-chip:hover { color: var(--text); }
[data-theme-kurs="host"] .h-chip.is-on { background: var(--text); color: var(--bg); }
[data-theme-kurs="host"] .h-rows { border: 0; border-radius: 28px; background: var(--bg-2); }
[data-theme-kurs="host"] .h-rows > li + li { border-top: 1px solid var(--line); }
[data-theme-kurs="host"] .h-row { padding: 18px 24px; }
[data-theme-kurs="host"] a.h-row:hover, [data-theme-kurs="host"] .h-lrow:hover { background: rgba(29,35,32,.03); }
[data-theme-kurs="host"] .h-n { font-family: var(--serif); font-style: italic; font-size: 18px; color: rgba(38,65,58,.55); width: 34px; }
[data-theme-kurs="host"] .h-row-t { font-size: 17px; }
[data-theme-kurs="host"] .h-row-s, [data-theme-kurs="host"] .h-dur { color: var(--muted); font-family: inherit; }
[data-theme-kurs="host"] .h-row-s.is-ok { color: var(--ok); font-weight: 600; }
[data-theme-kurs="host"] .h-rows > li.h-subhead { background: var(--sage); padding: 18px 24px 12px; }
[data-theme-kurs="host"] .h-subhead b { color: var(--sand); }
[data-theme-kurs="host"] .h-subhead span, [data-theme-kurs="host"] .h-mk-intro { color: var(--muted); }

/* Marketing-Block auf dem Start */
.h-mkb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.h-mkb-t { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.h-mkb h2 { margin: 0; font-family: var(--serif); font-weight: 330; font-size: clamp(44px, 6vw, 88px); line-height: .92; letter-spacing: -0.035em; }
.h-mkb p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.h-mkb-img { aspect-ratio: 4 / 5; border-radius: 28px 28px 999px 999px; overflow: hidden; background: var(--deep); }
.h-mkb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) { .h-mkb { grid-template-columns: 1fr; } .h-mkb-img { max-width: 360px; width: 80%; justify-self: center; } }

/* Bibliothek, Session, Kästen */
[data-theme-kurs="host"] .h-grp { gap: 24px 48px; }
[data-theme-kurs="host"] .h-grp-a img { aspect-ratio: 16 / 9; border-radius: 20px; }
[data-theme-kurs="host"] .h-grp-a h2 { font-family: var(--serif); font-weight: 350; font-size: 34px; letter-spacing: -0.02em; }
[data-theme-kurs="host"] .h-grp-a span { color: var(--muted); }
@media (min-width: 641px) { [data-theme-kurs="host"] .h-grp-a { flex: 0 0 240px; } }
[data-theme-kurs="host"] .h-sess-img { aspect-ratio: 16 / 9; max-width: 560px; flex-basis: 360px; border-radius: 28px; box-shadow: var(--shadow-card); }
[data-theme-kurs="host"] .h-sess .h-sess-h { font-family: var(--serif); font-weight: 330; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: -0.03em; }
[data-theme-kurs="host"] .h-tags span { background: var(--sage); color: var(--sand); }
[data-theme-kurs="host"] .h-box { padding: 28px 30px; border-radius: 28px; background: var(--bg-2); border: 0; }
[data-theme-kurs="host"] .h-box h2 { font-family: var(--serif); font-weight: 350; font-size: 30px; }
[data-theme-kurs="host"] .h-mini li + li { border-top-color: var(--line); }
[data-theme-kurs="host"] .h-mini a > span:first-of-type > span { color: var(--muted); }

/* Anleiten lernen */
[data-theme-kurs="host"] .h-prog { width: min(320px, 100%); padding: 22px 24px; border-radius: 24px; background: var(--sage); color: var(--sand); }
[data-theme-kurs="host"] .h-prog b { font-family: var(--serif); font-size: 22px; font-weight: 400; }
[data-theme-kurs="host"] .h-learn { gap: 0; }
[data-theme-kurs="host"] .h-learn > .h-head { margin-bottom: 56px; }
[data-theme-kurs="host"] .h-mod { border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow: visible; }
[data-theme-kurs="host"] .h-mod:last-child { border-bottom: 1px solid var(--line); }
[data-theme-kurs="host"] .h-mod + .h-mod { margin-top: 0; }
[data-theme-kurs="host"] .h-mod summary { gap: 24px; padding: 26px 8px; }
[data-theme-kurs="host"] .h-mod summary .h-n { width: auto; min-width: 1.5em; font-size: clamp(44px, 6vw, 80px); line-height: .8; color: var(--sand); }
[data-theme-kurs="host"] .h-mod:not([open]) summary .h-n { color: #9DB5A6; }
[data-theme-kurs="host"] .h-mod summary .module-title { font-family: var(--serif); font-weight: 350; font-size: clamp(24px, 3.2vw, 40px); letter-spacing: -0.02em; }
[data-theme-kurs="host"] .h-mod summary .module-count { color: var(--muted); margin-right: 30px; white-space: nowrap; }
[data-theme-kurs="host"] .h-mod .h-rows { border: 0; border-radius: 28px; margin: 0 0 28px; }

/* Marketing-Seite */
[data-theme-kurs="host"] .h-tabs { gap: 6px; border: 0; margin: 0; padding: 4px; border-radius: 999px; background: var(--bg-2); align-self: flex-start; }
[data-theme-kurs="host"] .h-tab { padding: 11px 18px; margin: 0; border: 0; border-radius: 999px; color: var(--muted); }
[data-theme-kurs="host"] .h-tab.is-on { background: var(--text); color: var(--bg); }
[data-theme-kurs="host"] .h-tpl { padding: 16px 18px; border-radius: 18px; border: 0; background: var(--bg-2); }
[data-theme-kurs="host"] .h-tpl.is-on { background: var(--sage); }
[data-theme-kurs="host"] .h-tpl span { font-family: inherit; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--sand); }
[data-theme-kurs="host"] .h-paper { padding: clamp(22px, 3vw, 44px); border-radius: 32px; background: var(--bg-2); border: 0; }
[data-theme-kurs="host"] .h-paper h2 { font-family: var(--serif); font-weight: 350; font-size: 36px; letter-spacing: -0.02em; }
[data-theme-kurs="host"] .h-paper-h, [data-theme-kurs="host"] .h-guide-h p, [data-theme-kurs="host"] .h-dl-t span, [data-theme-kurs="host"] .h-dl-ico { color: var(--muted); }
[data-theme-kurs="host"] .h-dl { border-radius: 20px; background: var(--bg); border: 0; }
[data-theme-kurs="host"] .h-dl-pv { background: var(--deep); border-radius: 14px; }
[data-theme-kurs="host"] .h-dl.is-png .h-dl-pv { background-color: #2B3330; background-image: linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.07) 75%), linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.07) 75%); }
[data-theme-kurs="host"] .h-dls h3 { color: var(--sand); }
[data-theme-kurs="host"] .h-guide-h img { box-shadow: var(--shadow-card); }

/* Live-Modus: bleibt dunkel, Waldgrün statt Nachtviolett, Karaoke groß in Fraunces */
[data-theme-kurs="host"] .h-live { background: radial-gradient(ellipse 70% 60% at 50% 45%, #1E322B 0%, #14211D 70%); color: #F3EFE8; --text: #F3EFE8; --muted: #9FB3A8; --sand: #F3EFE8; --sand-ink: #14211D; --line: rgba(243,239,232,.12); }
[data-theme-kurs="host"] .h-live .k-ruhig { --k: #B9CBBF; } [data-theme-kurs="host"] .h-live .k-rhythmus { --k: #E2C48F; } [data-theme-kurs="host"] .h-live .k-verbunden { --k: #EFA27F; }
[data-theme-kurs="host"] .h-live .k-schnell { --k: #E5826C; } [data-theme-kurs="host"] .h-live .k-pause { --k: #8FC2CC; } [data-theme-kurs="host"] .h-live .k-aus { --k: #8FA79A; } [data-theme-kurs="host"] .h-live .k-ende { --k: #6E8579; }
[data-theme-kurs="host"] .h-live-bg { opacity: .14; }
[data-theme-kurs="host"] .h-live-top, [data-theme-kurs="host"] .h-live-x, [data-theme-kurs="host"] .h-live-foot { color: #B9CBBF; }
[data-theme-kurs="host"] .h-live-st { color: #DCE5DE; }
[data-theme-kurs="host"] .h-live .h-kick { color: #B9CBBF; }
[data-theme-kurs="host"] .h-live-h, [data-theme-kurs="host"] .h-klive-h { font-family: var(--serif); font-weight: 320; letter-spacing: -0.025em; }
[data-theme-kurs="host"] .h-live-time { font-family: var(--serif); font-weight: 300; color: #F3EFE8; }
[data-theme-kurs="host"] .h-live-bar { background: rgba(243,239,232,.14); }
[data-theme-kurs="host"] .h-live-bar i { background: #F3EFE8; }
[data-theme-kurs="host"] .h-live-b { border-color: rgba(243,239,232,.2); color: #F3EFE8; font-family: var(--font-body); font-weight: 500; }
[data-theme-kurs="host"] .h-live-play { background: #F3EFE8; color: #14211D; box-shadow: 0 0 0 14px rgba(243,239,232,.06); }
[data-theme-kurs="host"] .h-klive-ctl { background: rgba(20,33,29,.94); border-top-color: rgba(243,239,232,.08); }
[data-theme-kurs="host"] .h-klive .h-live-time { font-family: var(--font-body); color: #DCE5DE; }
[data-theme-kurs="host"] .h-klive .cue-bar { background: rgba(243,239,232,.05); border-color: rgba(243,239,232,.1); }
[data-theme-kurs="host"] .h-klive .cue-head { background: #F3EFE8; }
[data-theme-kurs="host"] .h-ktext { font-family: var(--serif); }
body[data-theme-kurs="host"].is-hlive::before { display: none; }
[data-theme-kurs="host"] .h-ktext .kar-l { color: rgba(243,239,232,.55); }
[data-theme-kurs="host"] .h-ktext .kar-l.is-near { color: rgba(243,239,232,.8); }
[data-theme-kurs="host"] .h-ktext .kar-l.is-now { color: #F3EFE8; font-weight: 400; font-size: 1.12em; transform: none; }
[data-theme-kurs="host"] .h-ktext .kar .kar-h { background: rgba(243,239,232,.1); color: #DCE5DE; font-family: var(--font-body); }

/* 12b. Rahmen der App im Kurs host: Seitenleiste und Leisten warmweiß, keine grauen Flächen */
body[data-theme-kurs="host"] .tabs { background: var(--bg-2); border-color: var(--line); }
[data-theme-kurs="host"] .kurs-switch, [data-theme-kurs="host"] .lupe { background: var(--bg); }
[data-theme-kurs="host"] .glow { display: none; }
[data-theme-kurs="host"] .side-card { background: var(--bg-2); border-color: transparent; border-radius: 28px; }
[data-theme-kurs="host"] .h-side .sec-title { font-family: var(--serif); font-weight: 400; }
[data-theme-kurs="host"] .h-top .h-quicks:only-child { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); grid-auto-rows: auto; }
[data-theme-kurs="host"] .h-hero .h-h1 { font-size: clamp(56px, 7.4vw, 118px); }
.h-stage-bar .k-pause { border-color: rgba(243,239,232,.45); }
@media (min-width: 1024px) {
  body[data-theme-kurs="host"].is-app::before { background: var(--bg-2); border-right-color: var(--line); }
  body[data-theme-kurs="host"].is-app .tabs, body[data-theme-kurs="host"].is-app .top { background: none; }
  [data-theme-kurs="host"].is-app .tab.is-on { background: var(--text); color: var(--bg); }
  [data-theme-kurs="host"].is-app .tab:not(.is-on):hover { background: rgba(29,35,32,.05); }
  [data-theme-kurs="host"].is-app .lupe { background: var(--bg); border-color: var(--line); }
  [data-theme-kurs="host"].is-app .player { background: var(--bg-2); border-top-color: var(--line); }
}

/* 12c. Brücken: fest verdrahtete Dunkel-Farben aus app.css, die im hellen Host sonst durchschlagen */
[data-theme-kurs="host"] .lesson-text { color: var(--text); }
[data-theme-kurs="host"] .next-card { background: var(--bg-2); border-color: transparent; box-shadow: var(--shadow-card); }
[data-theme-kurs="host"] .nc-art { background: linear-gradient(135deg, var(--sage) 0%, var(--bg-2) 80%); }
[data-theme-kurs="host"] .lesson-art { background: linear-gradient(160deg, var(--sage) 0%, var(--bg-2) 80%); }
[data-theme-kurs="host"] .player { background: var(--bg-2); border-color: var(--line); box-shadow: 0 18px 40px -18px rgba(29,35,32,.35); }
[data-theme-kurs="host"] .cue-bar { background: rgba(251,249,245,.94); box-shadow: 0 10px 28px rgba(29,35,32,.12); }
[data-theme-kurs="host"] .cue-head { background: var(--text); box-shadow: none; }
[data-theme-kurs="host"] .c-reply.is-trainer { background: var(--sage); }
[data-theme-kurs="host"] .c-prompt span:last-child, [data-theme-kurs="host"] .c-answer { background: var(--bg-2); }
[data-theme-kurs="host"] .c-compose-dock { background: rgba(243,239,232,.96); }
[data-theme-kurs="host"] .c-card, [data-theme-kurs="host"] .c-composer { background: var(--bg-2); border-color: transparent; }
[data-theme-kurs="host"] .c-intro { background: var(--sage); border-color: transparent; }
[data-theme-kurs="host"] .c-cat-lektion, [data-theme-kurs="host"] .c-cat-austausch { background: rgba(29,35,32,.06); }
[data-theme-kurs="host"] .prac-done, [data-theme-kurs="host"] .kal-sheet, [data-theme-kurs="host"] .inst-sheet { background: var(--bg-2); color: var(--text); }
[data-theme-kurs="host"] input, [data-theme-kurs="host"] textarea, [data-theme-kurs="host"] select { color-scheme: light; }

/* Großer Player im Host: dunkel wie der Live-Modus (Waldgrün), Bedienung in Leinen */
.pfull[data-theme-kurs="host"] { --bg: #14211D; --bg-2: #1C2E28; --deep: #14211D; --violet: #1C2E28; --text: #F3EFE8; --muted: #B9CBBF;
  --sand: #F3EFE8; --sand-ink: #14211D; --acc-rgb: 243, 239, 232; --line: rgba(243,239,232,.14); --card: rgba(243,239,232,.05); color-scheme: dark;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #1E322B 0%, #14211D 70%); color: var(--text); }
.pfull[data-theme-kurs="host"]::before { display: none; }
.pfull[data-theme-kurs="host"] .pf-art { background: #1C2E28; }
.pfull[data-theme-kurs="host"] .k-ruhig { --k: #B9CBBF; } .pfull[data-theme-kurs="host"] .k-rhythmus { --k: #E2C48F; } .pfull[data-theme-kurs="host"] .k-verbunden { --k: #EFA27F; }
.pfull[data-theme-kurs="host"] .k-pause { --k: #8FC2CC; } .pfull[data-theme-kurs="host"] .k-aus { --k: #8FA79A; }
[data-theme-kurs="host"] .celebrate, [data-theme-kurs="host"] .inst-overlay, [data-theme-kurs="host"] .kal-ov { background: rgba(20, 33, 29, 0.55); }
[data-theme-kurs="host"] .brand-ico, [data-theme-kurs="host"] .splash img { filter: grayscale(1) brightness(.42) sepia(.35) hue-rotate(95deg) saturate(1.6); }

/* =====================================================================
   13. Kennenlernkurs „Abend“ (v217, Fabian 15.10.2026)
   Entwurf: Claude Design „Kennenlernkurs App Redesign“, Artboards A2. Layout wie bisher (Seitenleiste links),
   warmes Dunkel statt Nachtviolett, Überschriften in Manrope statt Instrument Serif, Sand als einziger Akzent.
   Nur im Kurs kennenlernkurs (api/app-courses.json "theme": "abend"). Die Ausbildung (Look 1a) bleibt lila.
   ===================================================================== */
[data-theme-kurs="abend"] {
  --bg: #16130F;
  --bg-2: #1B1813;
  --deep: #13100D;
  --violet: #221D17;
  --card: #221D17;
  --line: rgba(243, 236, 226, 0.10);
  --text: #F3ECE2;
  --muted: #A99C8C;
  --sand: #E9C79A;
  --sand-ink: #16130F;
  --lilac: #E9C79A;
  --acc-rgb: 233, 199, 154;
  --acc-2: #C99A5B;
  --acc-2-rgb: 201, 154, 91;
  --serif: 'Manrope', system-ui, sans-serif;   /* keine Serifen mehr im Kennenlernkurs */
  --bg-deep: #13100D;
  --bg-raised: #221D17;
  --lav: #D6CBBD;
  --streak-off: #3A3127;
}
html:has(body[data-theme-kurs="abend"]) { background: #16130F; }
body[data-theme-kurs="abend"] .glow { display: none; }
[data-theme-kurs="abend"] .d1 { --d1-body: #D6CBBD; --d1-mute: #A99C8C; --d1-card: #221D17; --d1-line: #31291F; --d1-line2: #31291F; --d1-hero: #221D17; }

/* Überschriften: Manrope fett statt Serif dünn */
[data-theme-kurs="abend"] :is(.d1 h1, .d1-les .lesson-title, .kk-subh h2, .kk-bridge h2, .kk-sec-head h2, .kk-studie h2, .kk-promo h2, .tg-head h2, .xhero h1, .x-after-t, .h-h1) {
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
[data-theme-kurs="abend"] :is(.b-num, .tg-num, .x-stats span) { font-weight: 700; }
[data-theme-kurs="abend"] .d1-start h1 { font-size: 52px; }
@media (max-width: 599px) { [data-theme-kurs="abend"] .d1 h1 { font-size: 36px; } }

/* Lila Reste aus dem Look 1a (fest verdrahtet in app.css) */
[data-theme-kurs="abend"] .d1-hero { border-color: #31291F; }
[data-theme-kurs="abend"] .d1-bars i { background: #3A3127; }
[data-theme-kurs="abend"] .d1-card.is-dashed { border-color: #4A3F33; }
[data-theme-kurs="abend"] .d1-st { border-color: #31291F; }
[data-theme-kurs="abend"] .kk-l-pic { background-color: #2A231B; }
[data-theme-kurs="abend"] :is(.kk-st-pic i, .kk-l-pic i) { background: rgba(22, 19, 15, 0.85); }
[data-theme-kurs="abend"] .kk-art-shade { background: linear-gradient(180deg, rgba(22, 19, 15, 0) 40%, rgba(22, 19, 15, 0.5)); }
[data-theme-kurs="abend"] .kk-art .art-play { background-color: rgba(22, 19, 15, 0.8); }
[data-theme-kurs="abend"] .kk-seg-btn.is-on small { color: #3B2C1C; }
body.is-kk[data-theme-kurs="abend"] .tab { color: #A99C8C; }
body.is-kk[data-theme-kurs="abend"] .tab.is-on, body.is-kk[data-theme-kurs="abend"] .tab.is-home { color: var(--sand); }
@media (min-width: 1024px) {
  body.is-kk[data-theme-kurs="abend"] .tab { color: #D6CBBD; }
  body.is-kk[data-theme-kurs="abend"] .tab.is-on { background: var(--sand); color: var(--sand-ink); }
  body.is-kk[data-theme-kurs="abend"] .tab:not(.is-on):hover { background: #262019; color: #FFFFFF; }
  body.is-kk[data-theme-kurs="abend"] .foot { color: #A99C8C; }
  body[data-theme-kurs="abend"].is-app::before { background: #1B1813; border-right-color: #2A241C; }
}

/* Start: „Weiter, wo du warst“ mit großem Bild links, Inhalte als Bildkacheln */
@media (min-width: 600px) {
  [data-theme-kurs="abend"] .kk-start .d1-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; }
  [data-theme-kurs="abend"] .kk-start .d1-hero-img { order: 0; border-radius: 0; min-height: 280px; aspect-ratio: auto; }
  [data-theme-kurs="abend"] .kk-start .d1-hero-txt { padding: 32px 36px; justify-content: center; }
  [data-theme-kurs="abend"] .kk-start .d1-hero h2 { font-size: 30px; letter-spacing: -0.03em; }
}
[data-theme-kurs="abend"] .kk-way { gap: 14px; margin-top: 18px; }
[data-theme-kurs="abend"] .kk-way-head .d1-kick { font-size: 22px; letter-spacing: -0.02em; text-transform: none; color: var(--text); }
[data-theme-kurs="abend"] .kk-sts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { [data-theme-kurs="abend"] .kk-sts { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } }
[data-theme-kurs="abend"] .d1-st.kk-st { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid #31291F; border-radius: 18px; background: #221D17; }
[data-theme-kurs="abend"] .d1-st.kk-st:last-child { border-bottom: 1px solid #31291F; }
[data-theme-kurs="abend"] .kk-st-pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
[data-theme-kurs="abend"] .kk-st .d1-st-txt { padding: 14px 16px 16px; }
[data-theme-kurs="abend"] .kk-st .d1-st-txt b { font-size: 17px; }
[data-theme-kurs="abend"] .d1-st.kk-here { border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
[data-theme-kurs="abend"] .kk-st-pic i { width: 28px; height: 28px; right: 8px; bottom: 8px; }

/* Wirkung: drei Ebenen nebeneinander (app.js kkLevelHtml) */
.kk-lvls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .kk-lvls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.kk-lvl { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px; border-radius: 22px; background: var(--d1-card); border: 1px solid var(--d1-line); }
.kk-lvl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kk-lvl-head h3 { margin: 0; font: 700 24px var(--font-headline); letter-spacing: -0.02em; }
.kk-lvl-head span { font-size: 14px; color: var(--d1-mute); }
.kk-lvl .kk-topics { margin: 0; padding: 0; flex-wrap: wrap; gap: 6px; overflow: visible; }
.kk-lvl .kk-topic { min-height: 36px; padding: 0 12px; font-size: 14px; color: var(--d1-body); border: 1px solid #3A3127; }
.kk-lvl .kk-topic.is-on { background: var(--sand); color: var(--sand-ink); border: 1px solid var(--sand); }
.kk-lvl .kk-quote { flex: 1; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; gap: 12px; }
.kk-lvl .kk-quote blockquote { font: 600 19px/1.45 var(--font-headline); letter-spacing: -0.01em; color: var(--text); }
.kk-lvl .kk-pager { padding-top: 14px; border-top: 1px solid var(--d1-line); }
.kk-lvl .kk-pos { margin: 0; }
.kk-lvl .kk-pg-btn { width: 44px; height: 44px; }

/* Wirkung: Kennzahlen als Leiste, Studie als Sandblock, Trustpilot in drei Spalten */
[data-theme-kurs="abend"] .kk-stats > div { background: #1E1914; border-color: #31291F; }
[data-theme-kurs="abend"] .kk-stats b { font-size: 36px; }
[data-theme-kurs="abend"] .kk-studie { background: var(--sand); color: var(--sand-ink); border: 0; padding: 32px 26px; border-radius: 26px; }
[data-theme-kurs="abend"] .kk-studie .d1-kick { color: #6B4614; }
[data-theme-kurs="abend"] .kk-studie p { color: #3B2C1C; }
[data-theme-kurs="abend"] .kk-werte li { background: rgba(22, 19, 15, 0.08); font-weight: 700; font-size: 17px; }
[data-theme-kurs="abend"] .kk-werte svg { color: var(--sand-ink); }
[data-theme-kurs="abend"] .kk-studie .d1-btn { background: var(--sand-ink); color: var(--text); border-color: var(--sand-ink); align-self: flex-start; }
@media (min-width: 900px) {
  [data-theme-kurs="abend"] .kk-studie { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 40px; row-gap: 14px; padding: 44px; }
  [data-theme-kurs="abend"] .kk-studie > * { grid-column: 1; }
  [data-theme-kurs="abend"] .kk-studie .kk-werte { grid-column: 2; grid-row: 1 / span 4; align-self: center; gap: 12px; }
  [data-theme-kurs="abend"] .kk-werte li { flex-direction: column; align-items: flex-start; padding: 20px; border-radius: 18px; }
  [data-theme-kurs="abend"] .kk-werte svg { width: 26px; height: 26px; }
}
[data-theme-kurs="abend"] .kk-tp { background: #221D17; border-color: #31291F; }
[data-theme-kurs="abend"] .kk-ava { background: #3A3127; color: var(--sand); }
@media (min-width: 1100px) { [data-theme-kurs="abend"] .kk-tps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } }

/* Brücke zur Ausbildung bzw. zum Gespräch: Bild links, Text rechts */
[data-theme-kurs="abend"] .kk-bridge { border-color: #31291F; background: #221D17; }
@media (min-width: 900px) {
  [data-theme-kurs="abend"] .kk-bridge { flex-direction: row; }
  [data-theme-kurs="abend"] .kk-bridge-img { flex: 1 1 38%; aspect-ratio: auto; min-height: 300px; }
  [data-theme-kurs="abend"] .kk-bridge-txt { flex: 1 1 62%; justify-content: center; padding: 36px 40px; }
  [data-theme-kurs="abend"] .kk-bridge .d1-btn { align-self: flex-start; }
}

/* Ausbildung: großes Bild oben, Hörproben in zwei Spalten, Fahrplan in vier Karten (app.js kkAusHtml) */
.kk-aus-hero { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--d1-card); border: 1px solid var(--d1-line); }
.kk-aus-hero-img { aspect-ratio: 16 / 10; background: var(--bg-2) 70% 30% / cover; }
.kk-aus-hero-txt { padding: 22px 20px 24px; gap: 14px; }
.kk-aus-hero-txt h1 { font-size: 32px; }
.kk-aus-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (min-width: 900px) {
  .kk-aus-hero { min-height: 540px; justify-content: flex-end; border: 0; }
  .kk-aus-hero-img { position: absolute; inset: 0; aspect-ratio: auto; }
  .kk-aus-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 86%, transparent) 45%, transparent 78%); }
  .kk-aus-hero-txt { position: relative; z-index: 1; max-width: 600px; padding: 48px; }
  .kk-aus-hero-txt h1 { font-size: 38px; }
}
@media (min-width: 900px) {
  .kk-aus-probe .kk-ls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kk-aus-probe .kk-ls > li { margin: 0; }
  .kk-aus .kk-road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border: 0; }
  .kk-aus .kk-road li { padding: 22px; border-radius: 20px; background: var(--d1-card); border: 1px solid var(--d1-line); border-top: 3px solid var(--sand); gap: 10px; }
  .kk-aus .kk-road li::before { display: none; }
  .kk-aus .kk-road p { font-size: 15px; }
}
.kk-road-n { display: none; font: 700 34px/1 var(--font-headline); color: var(--sand); }
@media (min-width: 900px) { .kk-aus .kk-road-n { display: block; } }
@media (min-width: 1024px) {
  body.is-kk[data-theme-kurs="abend"].is-app .tabs { background: none; }
  /* leere rechte Spalte (Teilnehmer ohne Admin-Karte): Inhalt nutzt die volle Breite wie im Entwurf */
  [data-theme-kurs="abend"] .kk .d1-cols:has(> .d1-aside:empty) { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
  [data-theme-kurs="abend"] .kk-page .d1-cols { grid-template-columns: minmax(0, 1fr); max-width: 1080px; }
}
@media (min-width: 1024px) { body.is-kk[data-theme-kurs="abend"].is-app .top { background: none; } }
@media (min-width: 900px) { [data-theme-kurs="abend"] .kk-studie .d1-btn { justify-self: start; } }
[data-theme-kurs="abend"] .av { background: #3A3127; color: var(--sand); }
[data-theme-kurs="abend"] :is(.inst-overlay, .celebrate, .kal-ov) { background: rgba(10, 8, 6, 0.6); }
/* v220: Lektion im Kennenlernkurs: rechte Spalte (Üben/Erledigt, Kurs-Karte) beginnt auf Höhe des Players, nicht neben dem Titel */
@media (min-width: 1200px) { [data-theme-kurs="abend"] .d1-les .lesson-side { grid-row: 2; margin-top: 0; } }
[data-theme-kurs="abend"] .kk-promo { border-color: #31291F; }
[data-theme-kurs="abend"] .kk-promo .d1-btn { align-self: stretch; }
/* v222: Wirkung beginnt direkt mit den drei Ebenen */
.kk-acc { color: var(--sand); }
.kk-erf-top { margin-top: 0; gap: 22px; }
.kk-erf-top h1 { font-size: 34px; }
@media (min-width: 600px) { .kk-erf-top h1 { font-size: 46px; } }
/* v223: Kurs-Karte in der Lektion mit Kurs-Motiv statt Cover mit Titel */
.kk-promo-art { --kz: 0.32; }
@media (min-width: 1200px) { .kk-les .kk-promo-art { --kz: 0.9; } }
.kk-promo-cr { display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, #2a1a33, #140d18 72%); }
.kk-crfig { position: relative; display: block; height: 88%; aspect-ratio: 3 / 4; }
.kk-crfig::before { content: ''; position: absolute; left: 50%; top: var(--gy, 50%); width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, transparent) 45%, transparent), transparent); }
.kk-crfig svg { position: relative; display: block; width: 100%; height: 100%; }
.kk-crfig i { position: absolute; left: 50%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); opacity: .75; }
.kk-crfig i.is-on { width: 10%; opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 18px 4px var(--c); }
@media (min-width: 1200px) { .kk-les .kk-promo-art { --kz: 1.4; } }
.kk-promo-art .kc-art[data-art="inner-winner"]::after { display: none; }
/* v225: Dein Üben auf dem Start des Kennenlernkurses */
.kk-track { gap: 14px; padding: 20px 22px; }
.kk-track-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.kk-track-note { font-size: 15px; color: var(--d1-mute); }
.kk-track .kc-days { margin-top: 2px; }
[data-theme-kurs="abend"] .kk-prac-stats div { background: #1B1813; }
@media (min-width: 900px) {
  .kk-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-items: center; }
  .kk-track-head { grid-column: 1 / -1; }
}

/* ---------- Schlafkurs-Start aufgeräumt (v260, Fabian 19.10.2026) ----------
   Wal ohne Schrift oben im Bild, Titel und Play darunter auf ruhiger Fläche (kein Verlauf über dem Bild).
   Module als Liste mit eigener Seite (#schlaf/<modul>), Teilen zugeklappt. */
.sk-hero.is-wal { min-height: 0; justify-content: flex-start; background: #171331; border: 1px solid var(--sk-line); }
.sk-hero.is-wal::after { display: none; }
.sk-start.is-b .sk-hero.is-wal { min-height: 0; }
.sk-wal { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #0f0c21; }
.sk-wal img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }
.sk-hero.is-wal .sk-hero-in { align-items: center; padding: 18px 18px 20px 20px; }
.sk-hero.is-wal .sk-hero-t b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.08; letter-spacing: -0.01em; }
.sk-hero.is-wal .sk-hero-t > span:last-child { font-size: 14px; color: var(--sk-mute); }
.sk-hero.is-wal .sk-hero-play { width: 60px; height: 60px; }
.sk-mods { display: flex; flex-direction: column; margin-top: 12px; }
.sk-mods .sk-label { margin: 0 4px 6px; }
.sk-mrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--sk-line); color: var(--sk-text); text-decoration: none; cursor: pointer; list-style: none; }
.sk-mrow::-webkit-details-marker { display: none; }
.sk-mrow:hover b { color: var(--sk-sand); }
.sk-mrow > svg { width: 16px; height: 16px; flex: none; color: var(--sk-mute); }
.sk-mrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-mrow-t b { font-weight: 500; font-size: 17px; }
.sk-mrow-t span { font-size: 14px; color: var(--sk-mute); }
.sk-mrow-n { font-size: 14px; color: var(--sk-mute); }
.sk-invd { border: 1px solid var(--sk-line); border-radius: 18px; padding: 4px 14px; }
.sk-invd > .sk-mrow { border-bottom: 0; min-height: 64px; }
.sk-invd[open] > .sk-mrow > svg { transform: rotate(90deg); }
.sk-invd .sk-inv { padding-bottom: 12px; }
.sk-modpage { display: flex; flex-direction: column; gap: 14px; color: var(--sk-text); padding-top: 8px; }
.sk-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; color: var(--sk-sand); text-decoration: none; font-size: 15px; }
.sk-back svg { width: 18px; height: 18px; }
.sk-mod-h { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; }
/* v260b: rechte Spalte (Desktop) bzw. darunter (Handy): Nachtfrage, Woche, Nächte, 14 Nächte */
.sk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sk-side .sk-slot:empty { display: none; }
@media (min-width: 1024px) {
  .sk-start.is-clean { max-width: 1180px; gap: 28px; }
  .sk-start.is-clean .sk-duo { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
  .sk-start.is-clean .sk-side { gap: 20px; }
  .sk-start.is-clean .sk-side .sk-plan { padding: 22px; border-radius: 20px; }
  .sk-start.is-clean .sk-hero.is-wal { border-radius: 24px; }
  .sk-start.is-clean .sk-hero.is-wal .sk-wal { aspect-ratio: auto; height: 400px; }
  .sk-start.is-clean .sk-hero.is-wal .sk-hero-in { padding: 22px 26px 26px 28px; }
  .sk-start.is-clean .sk-hero.is-wal .sk-hero-t b { font-size: 36px; line-height: 1.05; }
  .sk-start.is-clean .sk-hero.is-wal .sk-hero-play { width: 72px; height: 72px; }
  .sk-start.is-clean .sk-ci { padding: 20px 22px; }
  .sk-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
  .sk-mods .sk-label { grid-column: 1 / -1; margin: 0 4px; }
  .sk-mods .sk-mrow { min-height: 64px; padding: 0 18px; border: 1px solid var(--sk-line); border-radius: 16px; }
  .sk-mods .sk-mrow:hover { border-color: rgba(230,211,179,0.4); }
  .sk-invd { max-width: 560px; }
  .sk-modpage { max-width: 1100px; }
  .sk-modpage .sk-tp.is-med { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sk-modpage .sk-tp:not(.is-med) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
/* v262: Session-Detail mit Wal als ganzem Bild oben (kein Anschnitt unter der Kopfleiste, kein Verlauf) */
.sk-det.is-wal { margin: 0; padding: 8px 0 0; }
.sk-det-img { display: block; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; background: #171331; border: 1px solid var(--sk-line); margin-bottom: 22px; }
.sk-det-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 35%; }
@media (min-width: 1024px) {
  .sk-det.is-wal { margin: 0; padding: 0 0 4px; border-radius: 0; overflow: visible; }
  .sk-det.is-wal .sk-det-img { aspect-ratio: auto; height: 340px; }
}

/* ---------- Session-Seite im Schlafkurs (v263, Entwurf „Session-Seite“) ----------
   Kleines Wal-Bild, Titel mit Wolke (Speichern) und Herz (Merken), ein Knopf der sich wandelt, Einstellungen in einem Block,
   Zurück/Weiter als Textzeilen. */
.sk-det.is-wal .sk-det-img { aspect-ratio: auto; height: 180px; margin-bottom: 20px; }
.sk-det-head { flex-direction: row; align-items: flex-start; gap: 12px; }
.sk-det-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl.is-sk .sk-det-tt .sk-det-h { margin: 0 0 6px; font-size: 40px; line-height: 1.02; }
.sk-icons.item { all: unset; display: flex; gap: 8px; flex: none; margin-top: 4px; }
.sk-icons .dl { width: 48px; height: 48px; border-color: rgba(230,211,179,0.3); color: var(--sk-sand); background: none; cursor: pointer; }
.sk-icons .dl svg { width: 24px; height: 24px; }
.sk-icons .dl.is-done { background: var(--sk-sand); border-color: var(--sk-sand); color: var(--sk-ink); }
.sk-icons .dl .ring { width: 50px; height: 50px; }
.sk-fav.is-icon { width: 48px; height: 48px; min-height: 0; padding: 0; margin: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(230,211,179,0.3); background: none; color: var(--sk-sand); cursor: pointer; }
.sk-fav.is-icon svg { width: 22px; height: 22px; }
.sk-fav.is-icon.is-on { background: rgba(230,211,179,0.14); }
.sk-fav.is-icon.is-on svg path { fill: var(--sk-sand); }
.sk-go-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; }
.sk-go-wrap .sk-go { width: 100%; margin-top: 0; }
.sk-go.is-done { background: none; color: var(--sk-sand); border: 1px solid var(--sk-sand); }
.sk-go-link { min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--sk-sand); font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sk-go-hint { margin: 8px 0 0; font-size: 14px; color: var(--sk-mute); }
.sk-opts { margin-top: 14px; border: 1px solid var(--sk-line); border-radius: 18px; padding: 0 16px; }
.sk-opts .sk-opt { border-top: 0; border-bottom: 1px solid rgba(230,211,179,0.10); margin: 0; }
.sk-opts .sk-opt:last-child { border-bottom: 0; }
.sl-nav.is-txt { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 4px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--sk-line); text-align: left; }
.sl-nav.is-txt.is-next { text-align: right; justify-content: flex-end; }
.sl-nav.is-txt > svg { width: 16px; height: 16px; flex: none; color: var(--sk-mute); }
.sl.is-sk .sl-navs:has(.is-txt) { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--sk-line); }
.sl.is-sk .sl-navs:has(.is-txt) > span:empty { display: none; }
.sl.is-sk .sl-nav.is-txt .sl-nav-t { flex: 1; min-width: 0; }
.sl.is-sk .sl-nav.is-txt.is-next .sl-nav-t { text-align: left; }
@media (min-width: 1024px) {
  .sk-det.is-wal .sk-det-img { height: 260px; }
  .sl.is-sk .sl-navs:has(.is-txt) { flex-direction: row; }
  .sl.is-sk .sl-navs:has(.is-txt) > * { flex: 1; }
}
.sk-opts .sk-opt summary { min-height: 56px; font-size: 16px; color: var(--sk-text); }
.sk-opts .sk-opt summary span { margin-left: auto; color: var(--sk-mute); }