/* =====================================================================
   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;
}

/* Der direkte Weg: Hauptmarke mit wärmerem Abendlicht. */
[data-theme-kurs="direkter-weg"] {
  --sand: #ecc58f;
  --acc-rgb: 236, 197, 143;
  --acc-2: #f0a86b;
  --acc-2-rgb: 240, 168, 107;
}

/* Hintergrund auch am <html>, damit beim Überscrollen nichts Violettes durchblitzt */
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; }

/* ===== Der direkte Weg ===== */
.kc-art[data-art="direkter-weg"] {
  background: radial-gradient(ellipse 70% 30% at 50% 38%, rgba(240,168,107,0.45), transparent 70%), linear-gradient(180deg, #2a1f45 0%, #14102a 60%);
}
/* Steg in Perspektive, läuft auf den Horizont zu */
.kc-art[data-art="direkter-weg"]::after {
  content: ''; position: absolute; left: 0; right: 0; top: 38%; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(236,197,143,0.55) 0 2px, rgba(236,197,143,0.18) 2px 14px);
  clip-path: polygon(48% 0, 52% 0, 82% 100%, 18% 100%);
  -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%);
}
[data-theme-kurs="direkter-weg"] .kc-title { font-size: 34px; }
/* Streak als Stufen: jeder Tag eine Stufe höher */
[data-theme-kurs="direkter-weg"] .kc-days { align-items: end; }
[data-theme-kurs="direkter-weg"] .kc-days i { border-radius: 4px; }
[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(--serif); font-weight: 400; font-size: 64px; }

/* ---------- 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%; }
.pd-top .kc-art[data-art="direkter-weg"]::after { top: 30%; }
@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; }
.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 {
  --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; }
}

/* ---------- 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-nightrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-top: 1px solid rgba(230,211,179,0.12); color: var(--sk-text); text-decoration: none; }
.sk-nightrow .sk-mn { width: 22px; height: 22px; }
.sk-nightrow > svg { flex: none; width: 18px; height: 18px; color: var(--sk-sand); }
.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; } }
.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; }
}

/* ---------- 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; }
}