:root {
  --bg: #14102a;
  --bg-2: #1d1738;
  --card: rgba(var(--acc-rgb), 0.05);
  --line: rgba(var(--acc-rgb), 0.14);
  --text: #f1ecf8;
  --muted: #b9b0cc;
  --sand: #E9C79A;
  --acc-rgb: 233, 199, 154;   /* Akzent als RGB-Tripel für rgba(var(--acc-rgb), x), Kurs-Themes tauschen ihn (themes.css) */
  --sand-ink: #1a1330;
  --font-headline: 'Manrope', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  padding-bottom: calc(96px + var(--safe-bottom));
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 16px 10px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
}
.brand { flex: 1; font-family: var(--font-headline); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.acc { color: var(--sand); }
.net {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--sand-ink); background: var(--sand); padding: 4px 10px; border-radius: 99px; font-weight: 500;
}

.share-ico {
  display: inline-block; width: 14px; height: 17px; vertical-align: -3px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none' stroke='%23E9C79A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1v10M3.5 4.5 7 1l3.5 3.5M4 7.5H2v9.5h10V7.5h-2'/%3E%3C/svg%3E");
}

.tabs { display: flex; gap: 8px; padding: 4px 16px 14px; }
.tab {
  padding: 8px 14px; border-radius: 99px; font-size: 0.9rem; font-weight: 500;
  border: 1px solid var(--line); color: var(--muted);
}
.tab.is-on { background: var(--sand); color: var(--sand-ink); border-color: var(--sand); }

main { padding: 0 16px; max-width: 640px; margin: 0 auto; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; align-items: center;
  padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
}
.item.is-playing { border-color: var(--sand); }
.cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--bg-2); display: block; }
.item-text { min-width: 0; cursor: pointer; }
.item-title { font-family: var(--font-headline); font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { color: var(--muted); font-size: 0.85rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-state { font-size: 0.75rem; margin-top: 5px; color: var(--sand); min-height: 1em; }

.dl {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; position: relative;
}
.dl svg { width: 20px; height: 20px; }
.dl.is-done { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.dl .ring { position: absolute; inset: -1px; width: 46px; height: 46px; transform: rotate(-90deg); }
.dl .ring circle { fill: none; stroke: var(--sand); stroke-width: 2.5; stroke-linecap: round; }

.empty, .storage { color: var(--muted); font-size: 0.95rem; line-height: 1.6; text-align: center; padding: 24px 8px 0; }
.storage { font-size: 0.8rem; padding-top: 16px; }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(104px + var(--safe-bottom)); z-index: 20;
  background: var(--sand); color: var(--sand-ink); padding: 12px 14px; border-radius: 12px;
  font-size: 0.9rem; line-height: 1.45; max-width: 560px; margin: 0 auto;
}

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: 0 12px calc(10px + var(--safe-bottom));
}
.seek { width: 100%; margin: 0; height: 22px; accent-color: var(--sand); display: block; }
.player-row { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.player-cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg); }
.player-meta { flex: 1; min-width: 0; }
.player-title { font-family: var(--font-headline); font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-time { color: var(--muted); font-size: 0.8rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ctl { min-width: 40px; height: 44px; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ctl.play {
  width: 48px; height: 48px; border-radius: 50%; background: var(--sand);
  background-repeat: no-repeat; background-position: center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 2l12 7-12 7z' fill='%231a1330'/%3E%3C/svg%3E");
}
.ctl.play.is-playing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 2h3.5v14H4zM10.5 2H14v14h-3.5z' fill='%231a1330'/%3E%3C/svg%3E");
}

/* Zurück */
.back {
  width: 36px; height: 36px; margin-left: -8px; margin-right: 4px;
  background: no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23E9C79A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4 7 11l7 7'/%3E%3C/svg%3E");
}

/* Anmeldung */
.login { padding: 24px 16px; max-width: 440px; margin: 0 auto; }
.login h1 { font-family: var(--font-headline); font-weight: 800; font-size: 2rem; letter-spacing: -0.03em; margin: 12px 0 8px; }
.login p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.login p strong { color: var(--text); font-weight: 500; word-break: break-all; }
.login input {
  width: 100%; font: inherit; font-size: 1.1rem; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; outline: none;
}
.login input:focus { border-color: var(--sand); }
#i-code { letter-spacing: 0.3em; text-align: center; font-size: 1.4rem; }
.btn {
  width: 100%; padding: 15px; border-radius: 12px; background: var(--sand); color: var(--sand-ink);
  font-family: var(--font-headline); font-weight: 700; font-size: 1rem;
}
.btn:disabled { opacity: 0.6; }
.link { display: block; margin: 16px auto 0; color: var(--sand); font-size: 0.9rem; text-decoration: underline; }
.login-err { color: var(--sand) !important; margin-top: 16px !important; }

/* Kurse */
.courses { display: grid; gap: 12px; }
.course {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left;
  padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); width: 100%;
}
.course img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; background: var(--bg-2); display: block; }
.course-title { font-family: var(--font-headline); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.course-sub { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.course-head { margin: 4px 0 18px; }
.course-head h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; margin: 0; }
.course-head p { color: var(--muted); margin: 6px 0 0; font-size: 0.9rem; }
.sec-title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand);
  margin: 22px 0 10px; font-weight: 500;
}
.sec-title:first-child { margin-top: 0; }
.foot { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 28px 16px 8px; line-height: 1.7; }
.foot button { color: var(--sand); text-decoration: underline; font-size: 0.8rem; }
.dl.is-na { opacity: 0.35; cursor: default; }

/* Video */
.video-wrap {
  position: fixed; inset: 0; z-index: 30; background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--safe-top) 0 var(--safe-bottom);
}
.video-wrap video { width: 100%; max-height: 100%; }
.video-x {
  position: absolute; top: calc(10px + var(--safe-top)); right: 12px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(20,16,42,0.8); color: var(--text); font-size: 1.5rem; line-height: 1;
}

/* Module */
.module { border-top: 1px solid var(--line); }
.module:last-of-type { border-bottom: 1px solid var(--line); }
.module summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 16px 28px 16px 0; position: relative;
}
.module summary::-webkit-details-marker { display: none; }
.module summary::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(45deg); transition: transform .2s;
}
.module[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.module-title { flex: 1; font-family: var(--font-headline); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.module-count { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.module .list { margin-bottom: 14px; }
.module .sec-title:first-of-type { margin-top: 0; }
.item.is-pending { opacity: 0.5; }


/* ---------- Lernen ---------- */
:root { --lilac: #b79cff; --ok: #9fd8b0; }
.hello { margin: 4px 0 18px; }
.hello h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.03em; margin: 0; }
.hello p { color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

.next-card {
  display: block; width: 100%; text-align: left; position: relative;
  padding: 18px 76px 18px 18px; border-radius: 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.22), rgba(183,156,255,0.14));
  border: 1px solid rgba(var(--acc-rgb), 0.35);
}
.next-card.is-done { padding-right: 18px; }
.next-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); font-weight: 500; }
.next-title { font-family: var(--font-headline); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; margin-top: 6px; line-height: 1.25; }
.next-sub { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.next-play {
  position: absolute; right: 18px; top: 50%; margin-top: -24px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--sand); color: var(--sand-ink); display: grid; place-items: center;
}
.next-play svg { width: 18px; height: 18px; margin-left: 2px; }

.stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.stat:first-child { flex-direction: row; gap: 10px; text-align: left; }
.stat-num { font-family: var(--font-headline); font-weight: 800; font-size: 1.6rem; display: flex; align-items: center; gap: 4px; }
.stat-num small { font-size: 0.95rem; color: var(--muted); font-weight: 700; }
.stat-num svg { width: 20px; height: 20px; color: var(--muted); }
.stat-num.is-hot svg { color: #f5a97f; }
.stat-label { color: var(--muted); font-size: 0.75rem; line-height: 1.3; }

.ring-wrap { position: relative; flex: none; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 6; }
.ring-fg { fill: none; stroke: var(--sand); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s; }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-headline); font-weight: 800; font-size: 0.95rem; }

.bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bar span { display: block; height: 100%; background: var(--sand); border-radius: 6px; transition: width .6s; }

.chip {
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: 0.85rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.chip svg { width: 12px; height: 12px; }
.chip.is-on { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); font-weight: 500; }
.goal-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; margin: 2px 0 6px; }
.goal-row .chip { padding: 4px 10px; }
.goal-card { background: var(--card); border: 1px solid var(--sand); border-radius: 16px; padding: 16px; margin-bottom: 6px; }
.goal-card strong { font-family: var(--font-headline); font-size: 1.05rem; }
.goal-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 6px 0 12px; }
.goal-opts { display: flex; gap: 8px; }
.goal-opts .chip { flex: 1; justify-content: center; padding: 10px 0; font-size: 1rem; }

.path { list-style: none; margin: 0 0 16px; padding: 0; }
.stage button { display: flex; gap: 14px; width: 100%; text-align: left; padding: 0 0 18px; position: relative; }
.stage:not(:last-child) button::before {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line);
}
.stage.is-done:not(:last-child) button::before { background: var(--sand); }
.stage-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center; font-family: var(--font-headline); font-weight: 800; font-size: 0.9rem; color: var(--muted);
}
.stage-dot svg { width: 16px; height: 16px; }
.stage.is-done .stage-dot { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.stage.is-current .stage-dot { border-color: var(--sand); color: var(--sand); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.15); }
.stage-body { flex: 1; min-width: 0; display: block; }
.stage-title { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 1.02rem; margin-top: 5px; }
.stage-goal { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin-top: 3px; }
.stage-count { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 6px; }
.stage .bar { margin-top: 8px; height: 4px; }
.stage.is-current .stage-title { color: var(--sand); }

.btn-ghost { background: none; border: 1px solid var(--sand); color: var(--sand); margin: 4px 0 14px; }
.btn svg { width: 14px; height: 14px; vertical-align: -1px; margin-right: 4px; }
.task-teaser {
  display: block; text-decoration: none; color: inherit; padding: 14px 16px; border-radius: 14px;
  border: 1px dashed rgba(var(--acc-rgb), 0.45); margin-bottom: 18px;
}
.tt-kicker { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); }
.tt-title { display: block; margin-top: 5px; font-weight: 500; line-height: 1.4; }

/* Kursansicht */
.course-head .bar { margin-top: 12px; }
.search {
  width: 100%; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; margin: 0 0 16px; outline: none; -webkit-appearance: none;
}
.search:focus { border-color: var(--sand); }
.stage-head {
  font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; margin: 26px 0 6px; scroll-margin-top: 70px;
}
.stage-head span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); margin-bottom: 2px; }
.stage-head:first-of-type { margin-top: 6px; }
.module.is-done .module-count { color: var(--ok); }
.item.is-lesson { grid-template-columns: 36px minmax(0, 1fr) 44px; }
.check {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.check svg { width: 16px; height: 16px; }
.item.is-checked .check { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.item.is-checked .item-title { color: var(--muted); }
.is-lesson .item-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }

/* Lektion */
.lesson-crumb { color: var(--sand); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
.lesson-title { font-family: var(--font-headline); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; margin: 6px 0 4px; }
.lesson-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; }
.lesson-media { margin: 0 -16px 8px; }
.lesson-media video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; }
.lesson-media > .btn { width: calc(100% - 32px); margin: 0 16px; }
.lesson-offline, .lesson-soon {
  margin: 0 16px; padding: 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); line-height: 1.5; font-size: 0.92rem;
}
.lesson-soon { margin: 0 0 8px; }
.media-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 0; flex-wrap: wrap; }
.speed { display: flex; gap: 6px; }
.speed .chip { padding: 4px 9px; font-size: 0.8rem; }
.media-dl .item { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; }
.dl-text { color: var(--muted); font-size: 0.8rem; }
.media-dl .dl { width: 36px; height: 36px; }
.media-dl .dl svg { width: 16px; height: 16px; }
.media-dl .dl .ring { width: 38px; height: 38px; }
.lesson-text { line-height: 1.7; font-size: 1rem; margin: 16px 0 4px; }
.lesson-text a { color: var(--sand); }
.lesson-text p { margin: 0 0 12px; }
.lesson-text h3 { font-size: 1.05rem; font-weight: 600; margin: 24px 0 10px; }
.fs-ctl { display: flex; align-items: center; gap: 8px; margin: 16px 0 -4px; color: var(--muted); font-size: 0.85rem; }
.fs-ctl span { margin-right: 4px; }
.fs-ctl .chip { min-width: 44px; justify-content: center; font-size: 0.95rem; }
.lesson-text details { border: 1px solid var(--line); border-radius: 14px; margin: 16px 0; padding: 0 16px; }
.lesson-text summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; }
.lesson-text summary::-webkit-details-marker { display: none; }
.lesson-text summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(-45deg); transition: transform .2s; flex: none; }
.lesson-text details[open] > summary::before { transform: rotate(45deg); }
.lesson-text details[open] { padding-bottom: 6px; }
/* Phasen im Skript farbig, damit man beim Vorlesen sieht, wo man ist */
.lesson-text .phase { display: inline-block; background: var(--sand); color: var(--sand-ink); border-radius: 8px; padding: 4px 12px; font-size: 0.95em; margin: 22px 0 10px; }
.lesson-img { display: block; margin: 16px 0 4px; }
.lesson-img img { display: block; width: 100%; height: auto; border-radius: 12px; }
.lesson-text ul, .lesson-text ol { margin: 0 0 14px; padding-left: 22px; }
.lesson-text li { margin: 0 0 6px; }
.lesson-text h3 { font-family: var(--font-headline); font-weight: 700; font-size: 17px; margin: 20px 0 8px; }
.lesson-text strong { color: var(--text); font-weight: 600; }
.lesson-text a { word-break: break-word; }

.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
}
.file-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--acc-rgb), 0.12); color: var(--sand); display: grid; place-items: center; }
.file-ico svg { width: 18px; height: 18px; }
.file-name { flex: 1; min-width: 0; font-size: 0.92rem; line-height: 1.35; }
.file-kind { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.notes {
  width: 100%; font: inherit; font-size: 0.95rem; line-height: 1.55; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; resize: vertical; outline: none;
}
.notes:focus { border-color: var(--sand); }
.notes-state { color: var(--muted); font-size: 0.75rem; min-height: 1.2em; margin-top: 4px; }

.done-btn {
  width: 100%; margin: 18px 0 6px; padding: 15px; border-radius: 12px; font-family: var(--font-headline); font-weight: 700;
  background: var(--sand); color: var(--sand-ink); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.done-btn svg { width: 18px; height: 18px; }
.done-btn.is-done { background: none; border: 1px solid var(--ok); color: var(--ok); }

.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 8px; }
.nav-btn { text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 0.85rem; line-height: 1.35; }
.nav-btn b { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nav-btn span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); margin-bottom: 3px; }
.nav-btn.is-next { text-align: right; }

/* Praxis und Erfolge */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.task-box {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--sand); margin-top: 1px;
  display: grid; place-items: center; color: var(--sand-ink);
}
.task-box svg { width: 16px; height: 16px; }
.task.is-done .task-box { background: var(--sand); }
.task.is-done .task-title { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(185,176,204,0.5); }
.task-body { flex: 1; min-width: 0; }
.task-title { line-height: 1.45; }
.task-link { color: var(--sand); font-size: 0.8rem; margin-top: 5px; text-align: left; text-decoration: underline; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge { padding: 14px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; opacity: 0.55; }
.badge.is-on { opacity: 1; border-color: rgba(var(--acc-rgb), 0.4); }
.badge-ico { width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); }
.badge.is-on .badge-ico { background: var(--sand); color: var(--sand-ink); }
.badge-ico svg { width: 22px; height: 22px; }
.badge-title { font-family: var(--font-headline); font-weight: 700; font-size: 0.88rem; }
.badge-text { color: var(--muted); font-size: 0.75rem; line-height: 1.4; margin-top: 4px; }
/* Kurs-Erfolge (v152): offene mit Fortschritt „3 von 7“ */
.erf-prog { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.72rem; color: var(--muted); }
.erf-bar { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.erf-bar i { display: block; height: 100%; background: var(--sand); border-radius: inherit; }
.erf-grid .badge.is-on[data-chakra] { border-color: var(--sand); }
.erf-label { margin-top: 12px; }
.set-sub { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* Feier */
.celebrate {
  position: fixed; inset: 0; z-index: 40; background: rgba(12, 9, 26, 0.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden;
}
.cel-card {
  position: relative; max-width: 360px; width: 100%; text-align: center; padding: 28px 22px 22px; border-radius: 22px;
  background: var(--bg-2); border: 1px solid rgba(var(--acc-rgb), 0.4); animation: cel-pop .45s cubic-bezier(.2,1.4,.4,1);
}
.cel-icon { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0.14); }
.cel-icon svg { width: 38px; height: 38px; }
.cel-card h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.cel-card p { color: var(--muted); line-height: 1.55; margin: 0 0 20px; }
.cel-burst { position: absolute; inset: 0; pointer-events: none; }
.cel-burst i { position: absolute; top: -20px; border-radius: 2px; animation-name: cel-fall; animation-timing-function: cubic-bezier(.3,.6,.6,1); animation-fill-mode: forwards; }
@keyframes cel-fall { to { top: 105%; transform: rotate(540deg) translateX(40px); opacity: 0.6; } }
@keyframes cel-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cel-burst { display: none; } .cel-card { animation: none; } }

.ctl.rate { min-width: 36px; font-size: 0.8rem; color: var(--sand); }
@media (max-width: 380px) { .stat-txt span { font-size: 11px; } }

/* ---------- Community ---------- */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; position: relative; }
.tabs { gap: 6px; }
.tab { padding: 8px 12px; font-size: 0.86rem; }
.tab-dot {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: #f5a97f; color: var(--sand-ink); font-size: 0.7rem; font-weight: 700; vertical-align: 1px;
}
.btn-small { width: auto; padding: 10px 16px; font-size: 0.9rem; display: inline-block; text-decoration: none; text-align: center; }
a.btn { display: block; text-align: center; text-decoration: none; }
.remind-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 40px 16px 16px; margin-bottom: 14px; }
.remind-card strong { font-family: var(--font-headline); font-size: 1.02rem; }
.remind-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 6px 0 12px; }
.remind-x { position: absolute; top: 8px; right: 10px; font-size: 1.3rem; color: var(--muted); padding: 4px 8px; }

.c-filters { display: flex; gap: 6px; overflow-x: auto; margin: 16px -16px 14px; padding: 0 16px; scrollbar-width: none; }
.c-filters::-webkit-scrollbar { display: none; }
.c-filters .chip { white-space: nowrap; }
#c-list, #l-questions { display: grid; gap: 10px; }
#l-questions { margin-bottom: 10px; }
.c-card { display: block; text-decoration: none; color: inherit; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.c-card.is-pinned { border-color: rgba(var(--acc-rgb), 0.45); }
.c-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.c-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 99px; background: rgba(var(--acc-rgb), 0.14); color: var(--sand); }
.c-cat-erfolg { background: rgba(159,216,176,0.15); color: var(--ok); }
.c-cat-skript { background: rgba(183,156,255,0.16); color: var(--lilac); }
.c-cat-austausch { background: rgba(241,236,248,0.1); color: var(--text); }
.c-pin, .c-answered { font-size: 0.72rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.c-pin svg { width: 12px; height: 12px; }
.c-answered { color: var(--ok); }
.c-title { font-family: var(--font-headline); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.c-excerpt { color: var(--muted); font-size: 0.88rem; line-height: 1.45; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8rem; }
.c-author { font-weight: 500; }
.c-trainer { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--sand); color: var(--sand-ink); padding: 2px 6px; border-radius: 99px; margin-left: 2px; vertical-align: 1px; }
.c-trainer.is-step { background: transparent; color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
/* Erfolgs-Label (v152): höchster Erfolg der Person in diesem Kurs, kleiner und ruhiger als Gründer/Trainer */
.c-erfolg { display: inline-block; max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: -2px;
  font-size: 0.68rem; font-weight: 600; line-height: 1.5; color: var(--sand); padding: 0 7px; border-radius: 99px; margin-left: 4px;
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.08); }
.c-row-head .c-erfolg { flex: 0 1 auto; min-width: 0; }
.c-time { color: var(--muted); }
.c-stats { margin-left: auto; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.c-stats svg { width: 14px; height: 14px; margin-left: 6px; }
.c-none { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 6px; }

.c-post .c-foot { margin-top: 2px; }
.c-body { line-height: 1.65; margin-top: 10px; overflow-wrap: anywhere; }
.c-body a { color: var(--sand); }
/* Verweis auf einen anderen Beitrag ([Titel](#frage/ID), siehe richText) */
.c-body a.c-ref { display: inline; padding: 1px 7px; border-radius: 6px; background: rgba(var(--acc-rgb), 0.12); text-decoration: none; font-weight: 500; }
.c-body a.c-ref::before { content: "\2197\00a0"; opacity: 0.8; }
.ref-pick { position: fixed; z-index: 90; max-height: 300px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 6px; }
.ref-head { font-size: 0.75rem; color: var(--muted); padding: 6px 8px 4px; }
.ref-item { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px; color: var(--text); font: inherit; cursor: pointer; }
.ref-item b { font-weight: 500; font-size: 0.9rem; }
.ref-item span { font-size: 0.75rem; color: var(--muted); }
.ref-item.is-on, .ref-item:hover { background: rgba(var(--acc-rgb), 0.1); }
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 0 2px 2px; }
.emo { background: none; border: 0; border-radius: 8px; font-size: 1.45rem; line-height: 1; padding: 8px 0; cursor: pointer; }
.emo.is-on, .emo:hover { background: rgba(var(--acc-rgb), 0.12); }
.ref-none { font-size: 0.85rem; color: var(--muted); padding: 8px; margin: 0; }
.c-refhint { font-size: 0.8rem; color: var(--muted); margin: -4px 0 0; }
.c-body-main { font-size: 1rem; margin-top: 14px; }
.c-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.c-act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 99px; font-size: 0.8rem; color: var(--muted); border: 1px solid transparent; }
.c-act svg { width: 15px; height: 15px; }
.c-act.is-on { color: var(--sand); border-color: rgba(var(--acc-rgb), 0.35); }
.c-act.is-on svg path { fill: currentColor; }
.c-replies { display: grid; gap: 10px; }
.c-reply { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.c-reply.is-trainer { border-color: rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.07); }
.c-reply .c-foot { margin-top: 0; }
.c-compose { margin-top: 16px; display: grid; gap: 10px; }
.c-hint { color: var(--muted); font-size: 0.78rem; margin: 0; min-height: 1em; }
.c-edit { display: grid; gap: 8px; }
.c-edit-title, .c-form input, .set-name input {
  width: 100%; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; outline: none;
}
.c-edit-title:focus, .c-form input:focus, .set-name input:focus { border-color: var(--sand); }
.c-edit-row { display: flex; gap: 8px; align-items: center; }
.c-form { display: grid; gap: 14px; }
.c-form label, .set-label { display: grid; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.c-cats { display: flex; flex-wrap: wrap; gap: 6px; }

/* Einstellungen */
.set { margin-bottom: 8px; }
.set-text { color: var(--muted); line-height: 1.55; font-size: 0.9rem; margin: 0 0 12px; }
.set-on { color: var(--text); display: flex; gap: 8px; align-items: flex-start; }
.set-on svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.set-btns, .set-hours { display: flex; flex-wrap: wrap; gap: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; line-height: 1.45; font-size: 0.92rem; }
.set-row input { width: 22px; height: 22px; accent-color: var(--sand); flex: none; }
.set-name { display: flex; gap: 8px; }
/* Profil (v138): Gruppen mit Luft und feiner Linie dazwischen statt eng untereinander */
.prof .set { margin: 0; padding: 26px 0; border-top: 1px solid var(--line); }
.prof .set:first-child { padding-top: 4px; border-top: 0; }
.prof .set:last-child { padding-bottom: 8px; }
.prof .set > .sec-title { margin-top: 0; margin-bottom: 14px; }
.prof .set-hours { margin-top: 4px; }
.prof .set-label { margin-top: 18px; }
/* Community-Benachrichtigungen zugeklappt: Zeile mit Zusammenfassung, Pfeil dreht beim Aufklappen */
.set-fold { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.set-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; font-size: 0.95rem; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s; }
.set-fold[open] > summary svg { transform: rotate(90deg); }
.set-fold-t { display: flex; flex-direction: column; gap: 2px; }
.set-fold-sum { color: var(--muted); font-size: 0.82rem; }
.set-fold[open] > summary { border-bottom: 1px solid var(--line); }
.set-fold .set-row + .set-row, .set-fold #set-pushnew .set-row { border-top: 1px solid var(--line); }
.set-fold > .set-row:first-of-type { border-top: 0; }
/* Impressum und Datenschutz: Linkfarbe des Looks statt Browser-Blau, auch besucht */
/* Ruhig wie in der Leiste und auf der Anmeldeseite: Grau des Looks, Unterstrich in der Akzentfarbe, beim Zeigen Akzent */
.set-legal .legal a, .set-legal .legal a:visited { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), 0.5); text-underline-offset: 3px; }
.set-legal .legal a:hover, .set-legal .legal a:focus-visible { color: var(--sand); text-decoration-color: currentColor; }
.foot a { color: var(--sand); }

/* ---------- Kommentare ---------- */
.comments { margin: 18px 0 6px; }
.cm-compose { display: grid; gap: 8px; margin-bottom: 14px; }
.cm-compose .btn-small, .cm-reply-box .btn-small { justify-self: end; }
.cm { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; }
.cm.is-trainer { border-color: rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.07); }
.cm .c-foot { margin-top: 0; }
.cm .c-body { margin-top: 6px; font-size: 0.95rem; }
.cm-replies { margin: 8px 0 0 12px; padding-left: 12px; border-left: 2px solid var(--line); }
.cm-replies .cm { background: none; border: 0; padding: 8px 0 4px; margin: 0; }
.cm-reply-box { display: grid; gap: 8px; }
.cm-reply-box:not(:empty) { margin-top: 10px; }

/* ---------- Termine ---------- */
.ev-list { display: grid; gap: 10px; margin-bottom: 4px; }
.ev { display: flex; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; }
.ev-list .ev { margin-bottom: 0; }
.ev-date {
  flex: none; width: 52px; text-align: center; border-radius: 10px; padding: 6px 0; background: rgba(var(--acc-rgb), 0.12);
  color: var(--sand); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-start;
}
.ev-date span { display: block; font-family: var(--font-headline); font-weight: 800; font-size: 1.4rem; letter-spacing: 0; color: var(--text); line-height: 1.15; }
.ev-body { flex: 1; min-width: 0; }
.ev-title { font-family: var(--font-headline); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-when { color: var(--muted); font-size: 0.85rem; margin-top: 3px; line-height: 1.4; }
.ev-info { color: var(--muted); font-size: 0.82rem; margin-top: 8px; line-height: 1.5; }
.ev-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ev-more { margin-top: 8px; font-size: 0.85rem; line-height: 1.55; }
.ev-more > summary { cursor: pointer; list-style: none; color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ev-more > summary::-webkit-details-marker { display: none; }
.ev-more > summary::after { content: '+'; font-weight: 400; }
.ev-more[open] > summary::after { content: '\2212'; }
.ev-more-in { color: var(--muted); }
.ev-more-in p { margin: 8px 0 0; }
.ev-acts a { text-decoration: none; }
.ev-soon { font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 99px; background: #f5a97f; color: var(--sand-ink); }
.ev-trainercall .ev-date { background: rgba(183,156,255,0.16); color: var(--lilac); }
.ev-lerngruppe .ev-date { background: rgba(159,216,176,0.15); color: var(--ok); }
.ev-stimme .ev-date { background: rgba(245,169,127,0.16); color: #f5a97f; }
.ev-sub { margin: 18px 0 8px; padding: 16px; border-radius: 16px; border: 1px dashed rgba(var(--acc-rgb), 0.45); }
.ev-sub strong { font-family: var(--font-headline); }
.ev-sub p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 6px 0 0; }
.ev-inline { margin-top: 10px; }

/* ---------- Praxis/Theorie, Glocke, Start-Community ---------- */
.head-count { color: var(--muted); font-size: 0.8rem; margin-top: 8px !important; }
.stage-head p { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--muted); margin: 4px 0 8px; line-height: 1.45; }
.stage-tasks { margin: 6px 0 22px; padding: 14px; border-radius: 14px; border: 1px dashed rgba(var(--acc-rgb), 0.45); }
.stage-tasks-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); margin-bottom: 10px; }
.stat-label a.stat-link { color: var(--sand); text-decoration: none; display: inline-block; margin-top: 4px; }
.badges-box { margin-top: 10px; }
.badges-box .badges { margin-bottom: 14px; }

.bell { position: relative; width: 38px; height: 38px; display: grid; place-items: center; color: var(--text); margin-right: -6px; }
.bell svg { width: 22px; height: 22px; }
.bell-dot {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #f5a97f; color: var(--sand-ink); font-size: 0.65rem; font-weight: 700; display: grid; place-items: center;
}
.net { margin-right: 8px; }
.lupe { margin-right: 0; }
.lupe.is-on { color: var(--sand); }
.hits { display: grid; gap: 8px; margin-bottom: 8px; }
.hit { display: block; text-decoration: none; color: inherit; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.hit:active { border-color: var(--sand); }
.hit-kicker { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sand); margin-bottom: 3px; }
.hit-title { display: block; font-weight: 500; line-height: 1.35; }
.hit-text { display: block; font-size: 0.85rem; opacity: 0.7; margin-top: 3px; line-height: 1.4; }
.hits-ev { display: block; text-decoration: none; color: inherit; }
.empty a { color: var(--sand); }
.hint { font-size: 0.9rem; opacity: 0.75; margin: 0 0 4px; }
.start-posts { display: grid; gap: 8px; }
.sp-post { display: block; text-decoration: none; color: inherit; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); position: relative; }
.sp-post.is-new { border-color: rgba(245,169,127,0.5); }
.sp-post.is-new::after { content: ''; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #f5a97f; }
.sp-title { display: block; font-weight: 500; line-height: 1.35; padding-right: 16px; }
.sp-meta { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 4px; }
.notif { display: grid; gap: 3px; text-decoration: none; color: inherit; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 8px; }
.notif.is-new { border-color: rgba(245,169,127,0.5); background: rgba(245,169,127,0.06); }
.notif-title { font-weight: 500; line-height: 1.35; }
.notif-body { color: var(--muted); font-size: 0.85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { color: var(--muted); font-size: 0.72rem; }
.n-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.notif-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.notif-row .notif { flex: 1; min-width: 0; margin-bottom: 0; }
.notif-row.is-done .notif { opacity: 0.55; }
.notif-check { flex: none; width: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.notif-check svg { width: 18px; height: 18px; opacity: 0.35; }
.notif-check.is-on { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.notif-check.is-on svg { opacity: 1; }
.notif-check:disabled { cursor: default; }
.notif-time .ms-state { margin: 0; padding: 1px 8px; }

/* ---------- Kacheln (Praxis, Theorie) ---------- */
.tiles { display: grid; gap: 14px; margin-bottom: 16px; }
@media (min-width: 560px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tile { display: block; text-decoration: none; color: inherit; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.tile.is-done { border-color: rgba(159,216,176,0.4); }
.tile-img { aspect-ratio: 16 / 9; background: var(--bg-2) center / cover no-repeat; position: relative; }
.tile-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,42,0) 55%, rgba(20,16,42,0.55)); }
.tile-done { position: absolute; z-index: 1; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; padding: 4px 10px; border-radius: 99px; background: var(--ok); color: var(--sand-ink); }
.tile-done svg { width: 12px; height: 12px; }
.tile-body { padding: 14px 16px 16px; }
.tile-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); font-weight: 500; }
.tile-title { font-family: var(--font-headline); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 4px; }
.tile-text { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin-top: 5px; }
.tile .bar { margin-top: 12px; height: 5px; }
.tile-count { color: var(--muted); font-size: 0.75rem; margin-top: 6px; }

.detail-hero { margin: -4px -16px 0; aspect-ratio: 16 / 8; background: var(--bg-2) center / cover no-repeat; position: relative; display: flex; align-items: flex-end; }
.detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,42,0.1) 30%, var(--bg)); }
.detail-hero-in { position: relative; padding: 0 16px 6px; }
.detail-hero h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.03em; margin: 2px 0 0; }
.detail-goal { color: var(--muted); line-height: 1.55; margin: 10px 0 4px; }
a.nav-btn { text-decoration: none; color: inherit; }

/* ---------- Werkzeuge ---------- */
.tools { display: grid; gap: 10px; margin: 6px 0 16px; }
.tool { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.tool.is-big { background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.2), rgba(183,156,255,0.12)); border-color: rgba(var(--acc-rgb), 0.4); margin-bottom: 14px; }
.tool-ico { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; }
.tool-ico svg { width: 20px; height: 20px; }
.tool-body { display: block; min-width: 0; }
.tool-title { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 1rem; }
.tool-text { display: block; color: var(--muted); font-size: 0.85rem; line-height: 1.45; margin-top: 3px; }
.tool-head h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.3rem; margin: 0 0 10px; }
.tool-frame { display: block; width: calc(100% + 32px); margin: 0 -16px; border: 0; background: #0b0b0f; height: calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom)); min-height: 480px; }
body.is-tool { padding-bottom: 0; }
body.is-tool .foot { display: none; }
body.is-tool main { max-width: none; }

/* ---------- Admin ---------- */
.adm-people { display: grid; gap: 8px; }
.adm-person { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.adm-name { font-weight: 500; }
.adm-mail { color: var(--muted); font-size: 0.78rem; margin-top: 2px; word-break: break-all; }
.adm-meta { color: var(--muted); font-size: 0.8rem; margin-top: 6px; line-height: 1.5; }
.adm-place { color: var(--muted); font-weight: 400; font-size: 0.85em; }
.adm-warn { color: #f5a97f; }
.adm-person .bar { margin-top: 8px; height: 4px; }
.adm-lessons { display: grid; gap: 4px; }
.adm-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 80px 28px; gap: 10px; align-items: center; text-decoration: none; color: inherit; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.adm-l-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-l-bar { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.adm-l-bar span { display: block; height: 100%; background: var(--sand); }
.adm-l-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Meilensteine, KI-Hilfe ---------- */
.tile-ms { display: flex; gap: 14px; padding: 16px; border: 1.5px dashed rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.06); }
.tile-ms .tile-body { padding: 0; display: block; }
.tile-ms .tile-title, .tile-ms .tile-text, .tile-ms .tile-kicker { display: block; }
.tile-ms.is-done { border-style: solid; border-color: rgba(159,216,176,0.5); background: rgba(159,216,176,0.06); }
.tile-ms.is-revise { border-color: #f5a97f; }
.ms-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; }
.ms-ico svg { width: 22px; height: 22px; }
.is-done > .ms-ico, .ms-head.is-done .ms-ico { background: var(--ok); }
.ms-state { display: inline-block; margin-top: 10px; font-size: 0.72rem; font-weight: 500; padding: 3px 10px; border-radius: 99px; background: var(--line); color: var(--text); }
.ms-open { background: rgba(183,156,255,0.18); color: var(--lilac); }
.ms-revise { background: rgba(245,169,127,0.18); color: #f5a97f; }
.ms-ok { background: rgba(159,216,176,0.18); color: var(--ok); }
.ms-head { text-align: center; padding: 8px 0 14px; }
.ms-head .ms-ico { width: 64px; height: 64px; margin: 0 auto 12px; }
.ms-head .ms-ico svg { width: 30px; height: 30px; }
.ms-head h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: 4px 0 8px; }
.ms-head p { color: var(--muted); line-height: 1.55; margin: 0; }
.ms-box { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); line-height: 1.55; margin: 10px 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.ms-box svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.ms-box.is-ok { border-color: rgba(159,216,176,0.5); color: var(--ok); }
.ms-box.is-revise { border-color: #f5a97f; display: block; }
.ms-box.is-revise strong { display: block; color: #f5a97f; margin-bottom: 4px; }
.ms-file { display: block; text-align: center; padding: 16px; border-radius: 12px; border: 1.5px dashed rgba(var(--acc-rgb), 0.5); color: var(--sand); cursor: pointer; }
.ms-file input { display: block; margin: 10px auto 0; max-width: 100%; color: var(--muted); font-size: 0.85rem; }
.ms-picked { color: var(--muted); font-size: 0.85rem; min-height: 1em; }
.ms-sub { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; display: grid; gap: 8px; }
.ms-sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ms-sub-head .ms-state { margin: 0 0 0 auto; }
.ms-sub-text { color: var(--muted); font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
.ms-sub-fb { font-size: 0.88rem; line-height: 1.5; }
.adm-sub audio { width: 100%; }
.adm-text summary { cursor: pointer; color: var(--sand); font-size: 0.88rem; }
.adm-done { margin-top: 1.25rem; }
.adm-done > summary { cursor: pointer; color: var(--sand); font-size: 0.92rem; padding: 0.4rem 0; }
.stage.is-ms .stage-dot { border-style: dashed; border-color: var(--sand); color: var(--sand); }
.stage.is-ms .stage-dot svg { width: 16px; height: 16px; }
.stage.is-ms.is-done .stage-dot { color: var(--sand-ink); }
.tool.is-ki { margin: 0 0 14px; background: linear-gradient(135deg, rgba(183,156,255,0.2), rgba(var(--acc-rgb), 0.12)); border-color: rgba(183,156,255,0.4); }
.tool.is-ki .tool-ico { background: var(--lilac); }

/* ---------- App installieren ---------- */
.inst-card { position: relative; padding: 16px; border-radius: 16px; margin-bottom: 14px; border: 1px solid rgba(var(--acc-rgb), 0.5);
  background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.18), rgba(183,156,255,0.1)); }
.inst-card strong { font-family: var(--font-headline); font-size: 1.02rem; }
.inst-card p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 5px 0 12px; }
.inst-card-row { display: flex; gap: 12px; align-items: flex-start; padding-right: 20px; }
.inst-card-row img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.inst-card.is-login { margin: 0 0 22px; }
.inst-card.is-login p { margin-bottom: 8px; }
.inst-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(12, 9, 26, 0.8); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.inst-sheet { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--bg-2); border-radius: 22px 22px 0 0; border: 1px solid var(--line);
  padding: 26px 20px calc(20px + var(--safe-bottom)); animation: inst-up .35s ease-out; }
@keyframes inst-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.inst-close { position: absolute; top: 10px; right: 12px; font-size: 1.6rem; color: var(--muted); padding: 4px 10px; }
.inst-icon { text-align: center; }
.inst-icon img { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.inst-sheet h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; text-align: center; margin: 14px 0 12px; line-height: 1.25; }
.inst-why { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.inst-why li { color: var(--muted); font-size: 0.9rem; padding-left: 22px; position: relative; line-height: 1.45; }
.inst-why li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.inst-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.inst-step { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.inst-n { width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.inst-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--acc-rgb), 0.12); color: #4da3ff; display: grid; place-items: center; font-size: 1.1rem; }
.inst-ico svg { width: 22px; height: 22px; }
.inst-ico b { color: var(--text); letter-spacing: 1px; }
.inst-text { font-size: 0.92rem; line-height: 1.45; }
.inst-text strong { color: var(--sand); font-weight: 500; }
.inst-lead { color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.inst-or { color: var(--muted); font-size: 0.85rem; text-align: center; margin: 12px 0 8px; }
.inst-later { display: block; margin: 16px auto 0; color: var(--muted); text-decoration: underline; font-size: 0.9rem; }

/* ---------- Videos von Fabian, Countdown, Hörproben ---------- */
.fv { margin: 0 0 14px; }
.fv-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sand); margin-bottom: 8px; }
.fv video, .cel-video video { display: block; width: 100%; max-height: 70vh; border-radius: 14px; background: #000; }
.cel-video { margin: 0 0 14px; }
.countdown { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 11px 14px; border-radius: 12px;
  background: rgba(183,156,255,0.12); border: 1px solid rgba(183,156,255,0.35); margin-bottom: 14px; font-size: 0.9rem; line-height: 1.4; }
.cd-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 0 rgba(183,156,255,0.6); animation: cd-pulse 2s infinite; }
@keyframes cd-pulse { 70% { box-shadow: 0 0 0 8px rgba(183,156,255,0); } 100% { box-shadow: 0 0 0 0 rgba(183,156,255,0); } }
@media (prefers-reduced-motion: reduce) { .cd-dot { animation: none; } }
#countdown { flex: 1; }
.cd-go { color: var(--lilac); font-size: 0.8rem; }
.tool.is-sc { margin: 0 0 16px; }
.tool.is-sc .tool-ico { background: var(--ok); }
.sc { padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; display: grid; gap: 10px; }
.sc-head { display: flex; gap: 12px; align-items: center; }
.sc-title { font-family: var(--font-headline); font-weight: 700; }
.sc-by { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.sc-desc { margin: 10px 0 12px; line-height: 1.55; white-space: pre-line; }
.adm-sc { margin: 8px 0; }
.sc audio { width: 100%; }
/* Erfolgsseite nach der Zertifizierung (Meilenstein m-mp3) */
.ok-hero { position: relative; text-align: center; padding: 12px 0 18px; overflow: hidden; }
.ok-hero .ms-ico { width: 72px; height: 72px; margin: 0 auto 12px; box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0.14); }
.ok-hero .ms-ico svg { width: 34px; height: 34px; }
.ok-hero h1 { font-family: var(--font-headline); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; margin: 4px 0 8px; text-wrap: balance; }
.ok-hero p { color: var(--muted); line-height: 1.55; margin: 0 auto; max-width: 34em; }
.ok-h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.1rem; margin: 22px 0 10px; }
.ok-steps { display: grid; gap: 12px; margin-bottom: 24px; }
.ok-steps .tool.is-big { margin-bottom: 0; }
.ok-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--ok); font-size: 0.88rem; }
.ok-act svg { width: 16px; height: 16px; }
.ok-act a { color: var(--sand); }
.ok-act .btn { margin: 0; }
.ok-share { display: block; }
.ok-share > summary { list-style: none; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.ok-share > summary::-webkit-details-marker { display: none; }
.ok-share[open] > summary { margin-bottom: 12px; }
.ok-share .sc-share { margin: 0; }
.sc-share { padding: 16px; border-radius: 14px; border: 1px dashed rgba(var(--acc-rgb), 0.5); margin: 4px 0 16px; display: grid; gap: 10px; }
.sc-share p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin: 0; }
.sc-share #sc-title { width: 100%; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }



/* =====================================================================
   Redesign September 2026 (Vorlage: Claude Design „Hypnobreath Design
   Improvements“). Serifen-Überschriften, Ouroboros, Leiste unten am Handy,
   Seitenleiste am Desktop. Überschreibt die älteren Regeln weiter oben.
   ===================================================================== */
:root {
  --serif: 'Instrument Serif', Georgia, serif;
  --deep: #100c22;
  --violet: #2b2159;
  --nav-h: 64px;
  --side: 264px;
}
body { position: relative; padding-bottom: calc(var(--nav-h) + 28px + var(--safe-bottom)); }
body:has(#player:not([hidden])) { padding-bottom: calc(var(--nav-h) + 100px + var(--safe-bottom)); }
body.is-pfull { overflow: hidden; }
main, .login, .top { position: relative; z-index: 1; }
.glow {
  position: absolute; top: 0; right: 0; width: 100%; max-width: 900px; height: 560px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle 280px at calc(100% - 60px) 90px, rgba(124,92,214,0.22), rgba(var(--acc-rgb), 0.06) 60%, rgba(20,16,42,0));
}

/* Bewegung mit dem Ouroboros */
@property --hb-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hbSpin { to { transform: rotate(360deg); } }
@keyframes hbSpinRev { from { transform: rotate(180deg); } to { transform: rotate(-180deg); } }
@keyframes hbOrbit { 0%, 100% { transform: scale(.84); } 40% { transform: scale(1.1); } }
@keyframes hbBreathe { 0%, 100% { transform: scale(.9); opacity: .75; } 40% { transform: scale(1.05); opacity: 1; } }
@keyframes hbRipple { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes hbDrawOnce { from { --hb-a: 0deg; } to { --hb-a: 360deg; } }
@keyframes hbPopOnce { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hbTwinkle { 0%, 30% { transform: scale(0); opacity: 0; } 45% { transform: scale(1.2); opacity: 1; } 70% { transform: scale(.8); opacity: .8; } 90%, 100% { transform: scale(0); opacity: 0; } }
@keyframes hbBar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes hbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hb-orbit { position: relative; width: 236px; height: 236px; animation: hbOrbit 10s ease-in-out infinite; }
.hb-orbit .hb-spin { position: absolute; inset: 0; width: 100%; height: 100%; animation: hbSpin 24s linear infinite; }
.hb-orbit .hb-echo { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; opacity: .2; animation: hbSpinRev 48s linear infinite; }
.hb-glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168,182,236,0.34), rgba(124,92,214,0.10) 55%, rgba(168,182,236,0)); }
.hb-ripple { position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(168,182,236,0.5); opacity: 0; }
.is-playing .hb-ripple { animation: hbRipple 6s ease-out infinite; }
.is-playing .hb-ripple.hb-d2 { animation-delay: 2s; }
.hb-breathe { animation: hbBreathe 10s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hb-orbit, .hb-orbit .hb-spin, .hb-orbit .hb-echo, .hb-breathe, .is-playing .hb-ripple, .cd-dot, .p-bars i, .hb-tw { animation: none !important; }
}

/* Startanimation */
.splash { position: fixed; inset: 0; z-index: 60; background: var(--deep); display: grid; place-items: center; transition: opacity .5s ease; }
.splash.is-out { opacity: 0; }
.splash img { width: 150px; height: 150px;
  -webkit-mask-image: conic-gradient(from 25deg, #000 var(--hb-a), transparent 0); mask-image: conic-gradient(from 25deg, #000 var(--hb-a), transparent 0);
  animation: hbDrawOnce 1.3s cubic-bezier(.55,.1,.35,1) forwards; }

/* Überschriften in Serif */
.hello h1, .course-head h1, .lesson-title, .detail-hero h1, .login h1, .ms-head h1, .pf-title, .tool-head h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em;
}
.course-head h1 { font-size: 2.6rem; line-height: 1.02; }
.detail-hero h1 { font-size: 2.6rem; line-height: 1; }
.ms-head h1 { font-size: 2.2rem; }
.tool-head h1 { font-size: 2rem; }
.kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; margin: 0 0 14px; }
.sec-intro { color: var(--muted); padding: 0 4px; margin: -6px 0 14px; line-height: 1.55; }
.sec-head h2 { margin: 0; font-family: var(--font-headline); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.sec-head a { font-size: 14px; color: var(--sand); text-decoration: none; white-space: nowrap; }
.head-count a { color: var(--sand); text-decoration: none; }
.tools-top { margin: 0 0 32px; }
.areas-sec { margin: 0; }
.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.area { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.04); text-decoration: none; color: inherit; }
.area-img { display: block; height: 92px; background: var(--bg-2) center / cover no-repeat; position: relative; }
.area-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,42,0) 40%, rgba(20,16,42,0.6)); }
.area-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.area-title { font-family: var(--font-headline); font-weight: 700; font-size: 17px; }
.area-count { font-size: 12px; color: var(--muted); }
.area .bar { margin-top: 8px; height: 4px; }
.tiles-2 { margin-bottom: 28px; }
@media (min-width: 1024px) { .area-img { height: 120px; } .tiles-2 { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) { .area { transition: border-color .15s, transform .2s; } .area:hover { transform: translateY(-2px); border-color: rgba(var(--acc-rgb), 0.45); } }
.tools-top .tool { background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.12), rgba(183,156,255,0.08)); border-color: rgba(var(--acc-rgb), 0.3); }
.dash + .sec-head { margin-top: 40px; }

/* Kopf (Handy) */
.top { background: rgba(20,16,42,0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: calc(10px + var(--safe-top)) 10px 6px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.brand-ico { display: none; width: 30px; height: 30px; }
body:not(.is-app) .top { justify-content: center; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body:not(.is-app) .brand { flex: none; }
.bell, .lupe { width: 44px; height: 44px; margin: 0; }
.bell svg, .lupe svg { width: 21px; height: 21px; }
.bell-dot { background: var(--sand); top: 6px; right: 5px; }

/* Leiste unten (Handy) */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0; padding: 6px 8px calc(8px + var(--safe-bottom)); overflow: visible;
  background: #100c22; border-top: 1px solid rgba(var(--acc-rgb), 0.12);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 0 2px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 400;
}
.tab.is-on, .tab.is-home { background: none; color: var(--sand); font-weight: 600; }
.tab.tab-desk { display: none; }
.tab-ico { display: block; width: 23px; height: 23px; }
.tab-dot { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; font-size: 0.62rem; background: var(--sand); }

/* Start */
.hello { display: flex; flex-direction: column; margin: 14px 4px 28px; }
.hello-in { display: flex; flex-direction: column; gap: 10px; }
.hello h1 { font-size: 46px; line-height: 1; margin: 0; }
.hello p { margin: 0; font-size: 16px; line-height: 1.55; }
.countdown {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 40px; margin: 16px 0 0; padding: 0 6px 0 14px;
  border-radius: 20px; border: 1px solid rgba(var(--acc-rgb), 0.22); background: rgba(var(--acc-rgb), 0.06); color: var(--text); font-size: 14px; line-height: 1.3;
  max-width: 100%; min-height: 40px; height: auto; padding-top: 5px; padding-bottom: 5px;
}
.cd-dot { flex: none; }
.cd-go { flex: none; }
#countdown { flex: 0 1 auto; min-width: 0; }
.lupe-text { display: none; }
.cd-dot { width: 8px; height: 8px; background: var(--sand); box-shadow: none; animation: hbPulse 2.4s ease-in-out infinite; }
.cd-go { padding: 6px 12px; border-radius: 14px; background: rgba(var(--acc-rgb), 0.14); color: var(--sand); font-weight: 500; font-size: 13px; }

/* Präsenz „gerade in der App“ (presenceHtml in app.js): kleine Versalienzeile mit pulsierendem Punkt im Kurs-Header.
   Grün als einziges „live“-Signal der App, gedämpft, damit es neben der Kursfarbe nicht schreit. */
.presence { --live: 126, 214, 160; display: flex; align-items: center; gap: 9px; margin: 2px 0 0; min-height: 18px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.presence[hidden] { display: none; }
.course-head .presence { margin-top: 10px; }
.pres-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--live)); box-shadow: 0 0 6px rgba(var(--live), 0.55); }
.pres-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--live), 0.55); animation: presPing 2.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes presPing { 0% { transform: scale(1); opacity: 0.9; } 75%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pres-dot::after { animation: none; opacity: 0; } }

.dash-main, .dash-side { display: flex; flex-direction: column; gap: 28px; }
.dash-side { margin-top: 28px; }
.dash-main > *, .dash-side > * { margin: 0 !important; }
.dash .goal-row { margin-top: -14px !important; }

.next-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left; overflow: hidden; position: relative;
  border-radius: 22px; border: 1px solid rgba(var(--acc-rgb), 0.18); background: #1d1738; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.8);
}
.nc-art { position: relative; display: block; height: 168px; overflow: hidden; background: linear-gradient(135deg, var(--violet) 0%, #1d1738 70%); }
.nc-glow { position: absolute; right: -60px; top: -56px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(168,182,236,0.28), rgba(168,182,236,0)); }
.nc-art img { position: absolute; right: 18px; top: 14px; width: 140px; height: 140px; }
.nc-art .nc-kicker { position: absolute; left: 20px; top: 18px; }
.nc-kicker { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand); }
.nc-kicker-desk { display: none; }
.nc-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.next-card.is-done .nc-body { padding: 22px 20px; gap: 6px; }
.next-card.is-done .nc-kicker-desk { display: block; }
.nc-row { display: flex; align-items: flex-end; gap: 14px; }
.nc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.next-title { display: block; margin: 0; font-family: var(--font-headline); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.next-sub { display: block; margin: 0; font-size: 14px; color: var(--muted); }
.next-play { position: static; flex: none; width: 56px; height: 56px; margin: 0; border-radius: 50%; box-shadow: 0 10px 26px -8px rgba(var(--acc-rgb), 0.6); }
.next-play svg { width: 22px; height: 22px; }
.nc-foot { display: flex; align-items: center; gap: 16px; }
.nc-foot:not(:has(.bar)) { display: none; }
.nc-foot .bar { flex: 1; margin: 0; height: 4px; }
.nc-cta { display: none; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 20px; background: rgba(var(--acc-rgb), 0.04); }
.stat, .stat:first-child {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
  padding: 16px 8px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit;
}
.stat + .stat { border-left: 1px solid var(--line); }
button.stat { cursor: pointer; }
.stat-txt { display: flex; flex-direction: column; gap: 2px; }
.stat-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.stat-txt span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.stat-txt a { color: var(--sand); text-decoration: none; }
.stat-long { display: none; }
.stat-ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(var(--acc-rgb), 0.12); color: var(--sand); display: grid; place-items: center; }
.stat-ico svg { width: 22px; height: 22px; }
.week-bars { height: 48px; display: flex; align-items: center; gap: 5px; }
.week-bars i { width: 10px; height: 34px; border-radius: 5px; background: rgba(var(--acc-rgb), 0.18); }
.week-bars i.is-on { background: var(--sand); }
.oprog { position: relative; flex: none; display: grid; place-items: center; }
.stat .oprog { width: 48px !important; height: 48px !important; }
.oprog img { position: absolute; inset: 0; width: 100%; height: 100%; }
.op-bg { opacity: .14; }
.op-fg { -webkit-mask-image: conic-gradient(from 25deg, #000 var(--p), transparent 0); mask-image: conic-gradient(from 25deg, #000 var(--p), transparent 0); }
.op-label { position: relative; font-family: var(--font-headline); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

.psteps { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 10px; }
.pstep {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; text-decoration: none; color: inherit;
}
.pstep.is-cur { padding: 14px; background: rgba(var(--acc-rgb), 0.07); border-color: rgba(var(--acc-rgb), 0.30); }
.pstep .bar { grid-column: 2 / -1; margin: 12px 0 0; height: 4px; }
.ps-dot { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.22); display: grid; place-items: center; font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: var(--muted); }
.ps-dot svg { width: 16px; height: 16px; }
.ps-dot.is-done { border: 0; background: rgba(var(--acc-rgb), 0.16); color: var(--sand); }
.ps-dot.is-cur { border: 2px solid var(--sand); }
.ps-dot.is-cur i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); }
.ps-dot.is-ms { border: 1px dashed rgba(var(--acc-rgb), 0.4); color: var(--sand); }
.ps-dot.is-ms svg { width: 15px; height: 15px; }
.ps-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-kicker { font-size: 12px; color: var(--muted); }
.pstep.is-cur .ps-kicker { color: var(--sand); }
.ps-title { font-family: var(--font-headline); font-weight: 600; font-size: 16px; }
.pstep.is-done .ps-title { color: var(--muted); }
.pstep.is-cur .ps-title { font-weight: 700; }
.ps-count { font-size: 13px; font-variant-numeric: tabular-nums; }

.tool.is-ki {
  align-items: center; gap: 14px; padding: 18px; border-radius: 20px;
  background: linear-gradient(120deg, rgba(124,92,214,0.22), rgba(var(--acc-rgb), 0.08)); border-color: rgba(var(--acc-rgb), 0.18);
}
.tool.is-ki .tool-ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(20,16,42,0.6); color: var(--sand); }
.tool.is-ki .tool-ico svg { width: 24px; height: 24px; }
.tool.is-ki .tool-body { flex: 1; }
.tool.is-ki .tool-text { font-size: 14px; }
.tool-cta { display: none; }
.tool-chev { flex: none; width: 18px; height: 18px; color: var(--sand); }

.side-card:empty { display: none; }
.side-card .sec-head { padding: 0; }
.side-card .sec-title { font-family: var(--font-headline); font-weight: 700; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 0 0 12px; }
.dash .ev { align-items: center; padding: 14px; border-radius: 18px; background: rgba(var(--acc-rgb), 0.04); border-color: var(--line); }
.dash .ev-date { width: 56px; height: 60px; padding: 0; border-radius: 14px; align-self: center; display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 1px;
  background: var(--sand); color: var(--sand-ink); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; }
.dash .ev-date span { color: var(--sand-ink); font-size: 22px; line-height: 1; }
.dash .ev-title { font-size: 16px; }
.c-new { color: var(--muted); font-size: 0.85rem; margin: 0 0 10px; }

/* Mini-Player (Handy: schwebend über der Leiste) */
.player {
  position: fixed; left: 10px; right: 10px; bottom: calc(var(--nav-h) + 12px + var(--safe-bottom)); z-index: 11;
  height: 64px; padding: 0 8px 0 10px; display: flex; align-items: center; gap: 12px; overflow: hidden;
  border-radius: 18px; background: #251e48; border: 1px solid rgba(var(--acc-rgb), 0.16); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.8);
}
.p-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; padding: 0; }
.p-art { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--violet); display: grid; place-items: center; }
.player-cover { width: 34px; height: 34px; border-radius: 0; background: none; object-fit: contain; }
.player-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player-title { display: block; font-size: 15px; }
.player-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; }
#p-sub { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-bars { display: none; align-items: center; gap: 2px; height: 12px; }
.player.is-playing .p-bars { display: inline-flex; }
.p-bars i { width: 2px; height: 12px; border-radius: 1px; background: var(--sand); animation: hbBar 1.6s ease-in-out infinite; }
.p-bars i:nth-child(2) { animation-delay: .2s; } .p-bars i:nth-child(3) { animation-delay: .4s; } .p-bars i:nth-child(4) { animation-delay: .6s; }
.p-ctls { display: flex; align-items: center; gap: 18px; }
#back15, #fwd15, .p-seek, .p-right { display: none; }
.player .ctl.play { width: 44px; height: 44px; }
.ctl svg { width: 24px; height: 24px; }
.p-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.p-line span { display: block; width: 0; height: 100%; background: var(--sand); }

/* Großer Player */
.pfull { position: fixed; inset: 0; z-index: 35; background: var(--deep); overflow-y: auto; overflow-x: hidden; }
.pfull::before { content: ''; position: absolute; left: -120px; top: 40px; width: 630px; height: 560px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124,92,214,0.28), rgba(var(--acc-rgb), 0.07) 60%, rgba(16,12,34,0)); }
.pf-in { position: relative; max-width: 440px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding: var(--safe-top) 24px calc(30px + var(--safe-bottom)); }
.pf-head { height: 64px; display: flex; align-items: center; justify-content: space-between; margin: 0 -10px; }
.pf-x { width: 44px; height: 44px; display: grid; place-items: center; }
.pf-x svg { width: 24px; height: 24px; }
.pf-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: center; }
.pf-dl { width: 44px; }
.pf-art { position: relative; margin-top: 18px; height: 342px; flex: none; border-radius: 28px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--violet) 0%, #1a1433 75%); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); }
.pf-title { font-size: 34px; line-height: 1.08; margin: 28px 0 8px; }
.pf-sub { font-size: 15px; color: var(--muted); }
.pf-seek { margin-top: 24px; }
.pf-seek .seek { width: 100%; }
.pf-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-ctls { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.pf-pill { width: 52px; height: 44px; border-radius: 22px; border: 1px solid rgba(var(--acc-rgb), 0.22); display: grid; place-items: center;
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pf-pill svg { width: 20px; height: 20px; }
.pfull .ctl { width: 56px; height: 56px; color: var(--text); }
.pfull .ctl svg { width: 30px; height: 30px; }
.pfull .ctl.play { width: 80px; height: 80px; background-size: 26px; box-shadow: 0 16px 40px -12px rgba(var(--acc-rgb), 0.65); }
.pf-acts { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-acts:empty { display: none; }
.pf-act { height: 50px; border-radius: 14px; border: 1px solid rgba(var(--acc-rgb), 0.14); display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-headline); font-weight: 600; font-size: 15px; }
.pf-act:first-child { border-color: rgba(var(--acc-rgb), 0.30); background: rgba(var(--acc-rgb), 0.06); font-weight: 700; }
.pf-act svg { width: 16px; height: 16px; }
.pf-act.is-done { color: var(--ok); border-color: rgba(159,216,176,0.4); background: none; }
.pf-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(var(--acc-rgb), 0.16); color: var(--sand); font-size: 12px; display: inline-grid; place-items: center; }
.seek { accent-color: var(--sand); }

/* Anmeldung */
.login { max-width: 440px; min-height: calc(100dvh - 70px - var(--safe-top)); margin: 0 auto; padding: 0 24px calc(34px + var(--safe-bottom)); display: flex; flex-direction: column; }
.login-art { position: relative; flex: 1; min-height: 290px; display: grid; place-items: center; }
.login-art > * { grid-area: 1 / 1; }
.login-ring { width: 236px; height: 236px; border-radius: 50%; border: 1px solid rgba(168,182,236,0.55); animation: hbRipple 6s ease-out infinite; }
.login-art .hb-orbit { width: 224px; height: 224px; }
.login h1 { font-size: 52px; line-height: 1; margin: 0 0 10px; }
.login p { font-size: 16px; line-height: 1.6; margin: 0 0 18px; }
.steps { display: flex; align-items: center; gap: 6px; margin: 0 0 20px; }
.steps span { width: 28px; height: 4px; border-radius: 2px; background: rgba(var(--acc-rgb), 0.18); }
.steps span.is-on { background: var(--sand); }
.steps em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 4px; }
.login label { display: block; font-size: 14px; font-weight: 500; margin: 0 0 8px; }
.field { position: relative; }
.field svg { position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; color: var(--sand); pointer-events: none; }
.login input { height: 56px; padding: 0 16px; font-size: 17px; border-radius: 14px; background: rgba(var(--acc-rgb), 0.06); border-color: rgba(var(--acc-rgb), 0.22); }
.field input { padding-left: 48px; }
.login .btn { height: 56px; padding: 0; border-radius: 14px; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 30px -10px rgba(var(--acc-rgb), 0.55); }
.login .btn svg { width: 18px; height: 18px; }
#b-have-code, #b-resend { margin-top: 14px; }
#b-resend + #b-other { margin-top: 8px; }
.login p.login-hint { text-align: center; font-size: 13px; line-height: 1.55; margin: 16px 0 0; }

/* Lektion */
.lesson-crumb { color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0; }
.lesson-crumb.is-link { display: inline-flex; align-items: center; gap: 4px; color: var(--sand); text-decoration: none; font-size: 14px; margin-left: -4px; }
.lesson-crumb.is-link svg { width: 16px; height: 16px; flex: none; }
.lesson-crumb.is-link:hover { color: var(--text); }
.lesson-title { font-size: 34px; line-height: 1.05; margin: 8px 0 6px; }
.lesson-meta { font-size: 14px; }
.lesson-grid { display: flex; flex-direction: column; }
.lesson-main, .lesson-side { display: contents; }
.o1 { order: 1; } .o2 { order: 2; } .o3 { order: 3; } .o4 { order: 4; } .o5 { order: 5; }
.o6 { order: 6; } .o7 { order: 7; } .o8 { order: 8; }
.desk-only { display: none; }
.lesson-art { position: relative; height: 320px; margin: 0 16px; border-radius: 28px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--violet) 0%, #17122f 80%); border: 1px solid var(--line); }
.lesson-art .hb-orbit { width: 190px; height: 190px; }
.art-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; box-shadow: 0 16px 40px -12px rgba(var(--acc-rgb), 0.6); }
.done-btn { height: 54px; padding: 0; border-radius: 16px; font-size: 16px; }
.lesson-nav { gap: 14px; }
.nav-btn { padding: 16px 20px; border-radius: 16px; border-color: var(--line); }
.nav-btn span { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
.nav-btn b { font-family: var(--font-headline); font-weight: 600; font-size: 15px; }
.nav-btn.is-next { border-color: rgba(var(--acc-rgb), 0.30); background: rgba(var(--acc-rgb), 0.06); }
.nav-btn.is-next span { color: var(--sand); }
.mod-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mod-l { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 8px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--text); }
.mod-l.is-done { color: var(--muted); }
.mod-l.is-cur { background: rgba(var(--acc-rgb), 0.08); font-weight: 600; }
.mod-l.is-pending { opacity: 0.45; cursor: default; }
.mod-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.25); display: grid; place-items: center; color: var(--sand); }
.mod-dot svg { width: 12px; height: 12px; }
.mod-l.is-done .mod-dot { border: 0; background: rgba(var(--acc-rgb), 0.16); }
.mod-l.is-cur .mod-dot { border: 2px solid var(--sand); }
.mod-l.is-cur .mod-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.mod-t { flex: 1; min-width: 0; }
.mod-min { flex: none; font-size: 12px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Feier: Ouroboros mit Abzeichen, ringsum funkelt es */
.cel-icon { position: relative; width: 132px; height: 132px; margin: 0 auto 14px; background: none; box-shadow: none; display: grid; place-items: center; }
.cel-ouro { position: absolute; inset: 0; width: 100%; height: 100%; }
.cel-badge { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; }
.cel-badge svg { width: 22px; height: 22px; }
.cel-icon .hb-pop { animation: hbPopOnce .6s cubic-bezier(.2,1.4,.4,1) both; }
.cel-icon .cel-badge.hb-pop { animation-delay: .25s; }
.cel-icon.is-photo { width: 200px; height: 250px; margin-bottom: 18px; }
.cel-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 6px rgba(var(--acc-rgb), 0.18), 0 14px 34px rgba(0, 0, 0, 0.45); }
.cel-icon.is-photo .cel-badge { position: absolute; right: -10px; bottom: -10px; box-shadow: 0 0 0 4px var(--bg-2); }
.hb-tw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); animation: hbTwinkle 2.4s ease-out .3s infinite; }
.hb-tw { left: -8px; top: 20px; }
.hb-tw2 { left: auto; right: -6px; top: 30px; width: 6px; height: 6px; background: #F6E3C6; animation-delay: .45s; }
.hb-tw3 { left: auto; right: -2px; top: auto; bottom: 14px; width: 9px; height: 9px; background: #A8B6EC; animation-delay: .6s; }
.hb-tw4 { left: -4px; top: auto; bottom: 20px; width: 6px; height: 6px; animation-delay: .75s; }

.toast { bottom: calc(var(--nav-h) + 92px + var(--safe-bottom)); }
body.is-tool { padding-bottom: calc(var(--nav-h) + var(--safe-bottom)); }
.tool-frame { height: calc(100dvh - 130px - var(--nav-h) - var(--safe-top) - var(--safe-bottom)); }

/* Maus: Karten reagieren beim Drüberfahren */
@media (hover: hover) and (pointer: fine) {
  .item, .tile, .hit, .c-card, .tool, .course, .sp-post, .notif, .file, .nav-btn, .next-card, .mod-l, .ev, .stage button, .pstep, .stat {
    transition: border-color .15s, background-color .15s, transform .2s;
  }
  .item:hover, .hit:hover, .c-card:hover, .tool:hover, .course:hover, .sp-post:hover, .notif:hover, .file:hover, .nav-btn:hover, .pstep:not(.is-cur):hover { border-color: rgba(var(--acc-rgb), 0.45); }
  .tile:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb), 0.45); }
  .next-card:hover { transform: translateY(-2px); border-color: rgba(var(--acc-rgb), 0.4); }
  .mod-l:not(.is-cur):not(.is-pending):hover { background: rgba(var(--acc-rgb), 0.06); }
  .module summary:hover .module-title, .stage button:hover .stage-title { color: var(--sand); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  html { font-size: 17px; }
  body.is-app { padding-left: var(--side); padding-bottom: 120px; }
  body.is-app:has(#player:not([hidden])) { padding-bottom: 130px; }
  body.is-app::before { content: ''; position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 4; background: var(--deep); border-right: 1px solid rgba(var(--acc-rgb), 0.10); }
  .glow { background: radial-gradient(circle 420px at calc(100% - 120px) 100px, rgba(124,92,214,0.20), rgba(var(--acc-rgb), 0.05) 60%, rgba(20,16,42,0)); height: 800px; }

  /* Seitenleiste */
  body.is-app .top { position: fixed; left: 0; top: 0; width: var(--side); z-index: 6; flex-wrap: wrap; padding: 28px 18px 10px 28px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.is-app .brand { font-size: 19px; }
  body.is-app .brand-ico { display: block; }
  body.is-app .back { display: none; }
  body.is-app .lupe {
    order: 10; flex: 0 0 100%; width: auto; height: 44px; margin: 22px 0 0 -10px; padding: 0 14px; display: flex; justify-content: flex-start; gap: 10px;
    border-radius: 12px; border: 1px solid rgba(var(--acc-rgb), 0.16); background: rgba(var(--acc-rgb), 0.04); color: var(--muted); text-decoration: none;
  }
  body.is-app .lupe svg { width: 16px; height: 16px; }
  body.is-app .lupe-text { display: inline; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.is-app .lupe:hover, body.is-app .lupe.is-on { border-color: rgba(var(--acc-rgb), 0.5); color: var(--text); }
  body.is-app .tabs {
    display: flex; flex-direction: column; gap: 4px; position: fixed; left: 0; right: auto; top: 160px; bottom: auto; width: var(--side);
    padding: 0 18px; background: none; border: 0; z-index: 5;
  }
  body.is-app .tab { flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; color: var(--text); }
  body.is-app .tab.tab-desk { display: flex; }
  body.is-app .tab.tab-mob { display: none; }
  body.is-app .tab.is-on { background: rgba(var(--acc-rgb), 0.12); color: var(--sand); font-weight: 600; }
  body.is-app .tab.is-home:not(.is-on) { color: var(--text); font-weight: 400; }
  body.is-app .tab:not(.is-on):hover { background: rgba(var(--acc-rgb), 0.06); }
  body.is-app .tab-ico { width: 18px; height: 18px; }
  body.is-app .tab-dot { position: static; margin-left: auto; }
  body.is-app .foot { position: fixed; left: 0; bottom: 0; width: var(--side); z-index: 5; text-align: left; padding: 16px 28px 24px; font-size: 13px; line-height: 1.6; word-break: break-all; }
  body.is-app:has(#player:not([hidden])) .foot { bottom: 88px; }
  body.is-app .foot:empty { display: none; }

  /* Player als Leiste unten */
  body.is-app .player {
    left: var(--side); right: 0; bottom: 0; height: 88px; padding: 0 32px; border-radius: 0; border: 0; border-top: 1px solid rgba(var(--acc-rgb), 0.14);
    background: #1d1738; box-shadow: none; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px); gap: 24px;
  }
  .p-art { width: 52px; height: 52px; border-radius: 12px; }
  .player-cover { width: 40px; height: 40px; }
  #p-sub { display: block; }
  .p-time { display: none; }
  .p-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  #back15, #fwd15 { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); }
  .player .ctl.play { width: 48px; height: 48px; }
  .p-seek { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .p-seek .seek { flex: 1; height: 16px; }
  .p-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  .ctl.rate { height: 36px; min-width: 0; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(var(--acc-rgb), 0.22); color: var(--text); font-family: var(--font-headline); font-weight: 700; font-size: 13px; display: block; }
  .p-expand { width: 40px; height: 40px; min-width: 0; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.22); display: grid; place-items: center; color: var(--text); }
  .p-expand svg { width: 16px; height: 16px; }
  .p-line { display: none; }
  .toast { left: calc(var(--side) + 24px); bottom: 110px; }
  .pf-art { height: 380px; }

  /* Inhalt */
  main { max-width: 1180px; padding: 44px 56px 0; }
  main[data-view^="course:"], main[data-view^="thread:"], main[data-view^="compose:"], main[data-view^="settings:"], main[data-view^="notifs:"],
  main[data-view^="events:"], main[data-view^="offline:"], main[data-view^="search:"], main[data-view^="community:"], main[data-view^="showcase:"],
  main[data-view^="admin:"], main[data-view^="path:"] { max-width: 920px; }
  .course-head { margin: 0 0 28px; }
  .course-head h1 { font-size: 3.2rem; }
  .course-head > p:first-of-type { font-size: 1rem; max-width: 62ch; line-height: 1.55; }
  .sec-title { margin-top: 30px; }
  .sec-head h2 { font-size: 21px; }

  .hello { flex-direction: row; align-items: flex-end; gap: 24px; margin: 0 0 32px; }
  .hello-in { flex: 1; }
  .hello h1 { font-size: 64px; }
  .hello p { font-size: 17px; }
  .countdown { height: 44px; margin: 0 0 6px; padding: 0 6px 0 16px; border-radius: 22px; align-self: flex-end; flex: none; }
  .cd-go { padding: 7px 14px; border-radius: 16px; }

  .next-card { flex-direction: row; height: 280px; border-radius: 26px; background: linear-gradient(120deg, #1d1738 0%, var(--violet) 100%); box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9); }
  .nc-art { position: absolute; inset: 0; height: auto; background: none; }
  .nc-glow { right: -40px; top: -40px; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(168,182,236,0.30), rgba(168,182,236,0)); }
  .nc-art img { right: 44px; top: 30px; width: 220px; height: 220px; }
  .nc-art .nc-kicker { display: none; }
  .nc-kicker-desk { display: block; }
  .nc-body { position: relative; width: 64%; padding: 36px 40px; justify-content: flex-end; gap: 12px; }
  .next-card.is-done { height: auto; }
  .next-card.is-done .nc-body { width: 100%; padding: 32px 40px; }
  .next-title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
  .next-sub { font-size: 15px; }
  .next-play { display: none; }
  .nc-foot, .nc-foot:not(:has(.bar)) { display: flex; margin-top: 10px; }
  .nc-cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border-radius: 26px; background: var(--sand); color: var(--sand-ink);
    font-family: var(--font-headline); font-weight: 700; font-size: 16px; box-shadow: 0 12px 30px -10px rgba(var(--acc-rgb), 0.6); }
  .nc-cta svg { width: 16px; height: 16px; }
  .nc-foot .bar { flex: none; width: 200px; }

  .stats { gap: 16px; border: 0; border-radius: 0; background: none; }
  .stat, .stat:first-child { flex-direction: row; align-items: center; gap: 16px; text-align: left; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.04); }
  .stat + .stat { border-left: 1px solid var(--line); }
  .stat .oprog { width: 56px !important; height: 56px !important; }
  .stat-ico { width: 56px; height: 56px; flex: none; }
  .week-bars { height: 56px; gap: 6px; } .week-bars i { width: 12px; height: 40px; border-radius: 6px; }
  .stat-txt b { font-size: 17px; }
  .stat-txt span { font-size: 13px; }
  .stat-long { display: inline; }

  .side-card { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.03); }
  .side-card .sec-head h2 { font-size: 17px; }
  .side-card .sec-head a { font-size: 13px; }
  .side-card .ev { padding: 0; border: 0; background: none; }
  .ev-list { gap: 14px; }
  .dash-side .tool.is-ki { flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 22px; background: linear-gradient(140deg, rgba(124,92,214,0.26), rgba(var(--acc-rgb), 0.08)); }
  .dash-side .tool.is-ki .tool-title { font-size: 18px; margin-top: 2px; }
  .dash-side .tool-cta { display: block; margin-top: 12px; color: var(--sand); font-size: 14px; font-weight: 500; }
  .dash-side .tool-chev { display: none; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .tiles .tile-ms { flex-direction: column; justify-content: center; padding: 22px; }
  .tools { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 21 / 7; max-height: 340px; }
  .detail-hero-in { padding: 0 32px 26px; }
  .detail-hero h1 { font-size: 3.4rem; }
  .detail-goal { font-size: 1.05rem; margin-top: 18px; }
  .c-filters { margin: 20px 0 16px; padding: 0; flex-wrap: wrap; }

  .lesson-head { margin-bottom: 24px; }
  .lesson-title { font-size: 52px; line-height: 1.02; margin: 10px 0 10px; }
  .lesson-media { margin: 0 0 8px; }
  .lesson-media video { border-radius: 24px; }
  .lesson-art { margin: 0; height: 440px; }
  .lesson-art .hb-orbit { width: 230px; height: 230px; }
  .art-play { width: 68px; height: 68px; }
  .lesson-offline { margin: 0; }
  .media-row { padding: 12px 0 0; }
  .lesson-text { font-size: 1.02rem; max-width: 680px; color: #d9d2e6; }

  .tool-frame { width: 100%; margin: 0; border-radius: 14px; height: calc(100vh - 150px); }
  body.is-tool { padding-bottom: 0; }
  body.is-tool main { padding-bottom: 24px; }
  .inst-overlay { align-items: center; }
  .inst-sheet { border-radius: 22px; }

  .login { min-height: calc(100vh - 80px); }
  .login-art { min-height: 340px; }
}

@media (min-width: 1200px) {
  .dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
  .dash-side { margin-top: 0; gap: 20px; }
  .dash-side .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pstep, .pstep.is-cur { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; height: 100%; border-radius: 18px; border: 1px solid rgba(var(--acc-rgb), 0.12); }
  .pstep.is-cur { border-color: rgba(var(--acc-rgb), 0.36); }
  .pstep.is-ms { border-style: dashed; border-color: rgba(var(--acc-rgb), 0.30); }
  .pstep .bar { width: 100%; margin: 0; }
  .ps-count { display: none; }
  .ps-text { gap: 12px; }

  .lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
  .lesson-main { display: flex; flex-direction: column; gap: 24px; }
  .lesson-side { display: flex; flex-direction: column; gap: 18px; }
  .lesson-main > *, .lesson-side > * { margin: 0 !important; }
  .lesson-main > *, .lesson-side > * { order: 0; }
  .desk-only { display: block; }
  .lesson-side .file { background: rgba(var(--acc-rgb), 0.05); border: 0; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Etappe und Theorie-Bereich (Entwurf „Praxis · Etappe“, „Theorie · Hypnose-Wissen“) ---------- */
.stg, .tg { display: flex; flex-direction: column; gap: 22px; }
.xhero { position: relative; height: 330px; margin: 0 -16px; overflow: hidden; }
.tg .xhero { height: 300px; }
.xhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xhero::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,42,0.55) 0%, rgba(20,16,42,0) 28%, rgba(20,16,42,0.2) 50%, var(--bg) 100%); }
.xh-pill { position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 14px; background: rgba(16,12,34,0.55); }
.xh-in { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.xh-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand); text-decoration: none; }
.xhero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; }
.xh-text, .xh-meta { display: none; }
.x-goal { margin: 0 4px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.x-prog { margin: 0 4px; }
.x-prog .bar { margin: 0; height: 6px; }
.x-prog-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.x-prog-row strong { color: var(--text); font-weight: 600; }
.x-next { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; border-radius: 20px;
  background: linear-gradient(120deg, var(--violet), #1d1738); border: 1px solid rgba(var(--acc-rgb), 0.28); box-shadow: 0 20px 50px -30px rgba(0,0,0,0.9); }
.x-next-play { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; }
.x-next-play svg { width: 20px; height: 20px; }
.x-next-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.x-next-txt .kicker { letter-spacing: 0.14em; }
.x-next-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 16px; line-height: 1.3; }
.x-next-txt > span:last-child:not(.kicker) { font-size: 13px; color: var(--muted); }
.x-h2 { margin: 0 4px; font-family: var(--font-headline); font-weight: 700; font-size: 19px; }
.bereiche { display: flex; flex-direction: column; gap: 12px; }
.bereich { border-radius: 20px; background: rgba(var(--acc-rgb), 0.04); border: 1px solid rgba(var(--acc-rgb), 0.14); overflow: hidden; }
.bereich[open] { border-color: rgba(var(--acc-rgb), 0.18); }
.bereich summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; }
.bereich summary::-webkit-details-marker { display: none; }
.b-num { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--acc-rgb), 0.08); color: var(--sand); display: grid; place-items: center; font-family: var(--serif); font-size: 24px; }
.bereich[open] .b-num { background: rgba(var(--acc-rgb), 0.12); }
.b-num svg { width: 20px; height: 20px; }
.b-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.b-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 16px; }
.b-txt span { font-size: 13px; color: var(--muted); }
.bereich.is-done .b-txt span { color: var(--ok); }
.b-chev { flex: none; width: 9px; height: 9px; margin: 0 8px 4px 0; border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(45deg); transition: transform .2s; }
.bereich[open] .b-chev { transform: rotate(-135deg); margin-bottom: -4px; }
.b-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.b-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border-radius: 14px; text-align: left; color: var(--text); }
.b-row.is-done { color: var(--muted); }
.b-row.is-next { background: rgba(var(--acc-rgb), 0.08); }
.b-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.28); display: grid; place-items: center; color: var(--sand); }
.b-dot svg { width: 12px; height: 12px; }
.b-row.is-done .b-dot { border: 0; background: rgba(var(--acc-rgb), 0.16); }
.b-row.is-next .b-dot { border: 2px solid var(--sand); }
.b-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-row-txt b { font-weight: 400; font-size: 15px; line-height: 1.35; }
.b-row.is-next .b-row-txt b { font-weight: 600; }
.b-row-txt span { font-size: 12px; color: var(--muted); }
.b-soon { margin: 0 16px 16px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(var(--acc-rgb), 0.22); display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.b-soon svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--sand); }
.b-soon b { color: var(--text); font-weight: 400; }
.x-after { position: relative; height: 120px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; color: var(--text); }
.x-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-after::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(16,12,34,0.92) 0%, rgba(16,12,34,0.55) 70%, rgba(16,12,34,0.3) 100%); }
.x-after.no-img { background: linear-gradient(120deg, var(--violet), #1d1738); border: 1px dashed rgba(var(--acc-rgb), 0.3); }
.x-after.no-img::before { display: none; }
.x-after-txt { position: relative; z-index: 2; flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.x-after-txt .kicker { letter-spacing: 0.14em; }
.x-after-t { font-family: var(--serif); font-size: 30px; line-height: 1; }
.x-after svg { position: relative; z-index: 2; align-self: center; width: 20px; height: 20px; margin-right: 18px; color: var(--sand); flex: none; }
.x-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 18px; background: rgba(var(--acc-rgb), 0.04); }
.x-stats > div { padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.x-stats > div + div { border-left: 1px solid var(--line); }
.x-stats span { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--sand); }

.tg-grid { display: flex; flex-direction: column; gap: 22px; }
.tg-list { display: flex; flex-direction: column; gap: 12px; }
.tg-card { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-radius: 20px; background: rgba(var(--acc-rgb), 0.04); border: 1px solid rgba(var(--acc-rgb), 0.14); text-decoration: none; color: var(--text); }
.tg-card.is-next { background: linear-gradient(120deg, var(--violet), #1d1738); border-color: rgba(var(--acc-rgb), 0.28); }
.tg-num { flex: none; width: 40px; font-family: var(--serif); font-size: 40px; line-height: 1; color: rgba(var(--acc-rgb), 0.6); }
.tg-card.is-next .tg-num { color: var(--sand); }
.tg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tg-kick { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.tg-card.is-done .tg-kick { color: var(--ok); }
.tg-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.25; }
.tg-txt > span:last-child { font-size: 13px; color: var(--muted); }
.tg-card > svg, .tg-nexttheme > svg { flex: none; width: 18px; height: 18px; color: var(--sand); }
.tg-theme { display: flex; flex-direction: column; gap: 22px; }
.tg:not(.is-theme) .tg-theme { display: none; }
.tg.is-theme > .xhero, .tg.is-theme > .x-goal, .tg.is-theme > .x-stats, .tg.is-theme .tg-list, .tg.is-theme > .x-after { display: none; }
.tg-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; height: 44px; margin: 0 0 -10px -6px; font-size: 15px; color: var(--text); text-decoration: none; }
.tg-back svg { width: 20px; height: 20px; }
.tg-head { display: flex; flex-direction: column; gap: 18px; }
.tg-head-txt { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.tg-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1.02; }
.tg-meta { font-size: 14px; color: var(--muted); }
.tg-acts { display: flex; gap: 10px; }
.tg-start { flex: 1; height: 52px; border-radius: 16px; background: var(--sand); color: var(--sand-ink); font-family: var(--font-headline); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 30px -10px rgba(var(--acc-rgb), 0.55); }
.tg-start svg { width: 16px; height: 16px; }
.tg-ki { flex: none; width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(var(--acc-rgb), 0.22); color: var(--sand); display: grid; place-items: center; }
.tg-ki svg { width: 22px; height: 22px; }
.series { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ser { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 18px; border-radius: 20px; text-align: left; color: var(--text);
  background: rgba(var(--acc-rgb), 0.03); border: 1px solid rgba(var(--acc-rgb), 0.12); }
button.ser, .ser.is-soon { flex-direction: row; align-items: flex-start; }
.ser.is-next { background: rgba(var(--acc-rgb), 0.05); border-color: rgba(var(--acc-rgb), 0.18); }
.ser.is-soon { opacity: 0.6; }
.ser.is-click { cursor: pointer; }
.ser-head { display: flex; gap: 14px; align-items: flex-start; }
.ser-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--acc-rgb), 0.3); color: var(--sand); display: grid; place-items: center; }
.ser-ico svg { width: 18px; height: 18px; }
.ser.is-next .ser-ico { border: 0; background: var(--sand); color: var(--sand-ink); }
.ser.is-done .ser-ico { border: 0; background: rgba(var(--acc-rgb), 0.16); }
.ser-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ser-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.3; }
.ser-txt span { font-size: 13px; color: var(--muted); }
.ser-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.part { height: 56px; border-radius: 12px; border: 1px solid rgba(var(--acc-rgb), 0.22); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.part b { font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 4px; }
.part b svg { width: 12px; height: 12px; color: var(--sand); }
.part span { font-size: 11px; color: var(--muted); }
.part.is-done { border: 0; background: rgba(var(--acc-rgb), 0.16); }
.part.is-done b, .part.is-next b { font-weight: 600; }
.part.is-next { border: 1.5px solid var(--sand); }
.part.is-next span { color: var(--sand); }
.part.is-soon { border-style: dashed; color: var(--muted); }
.tg-nexttheme { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; border: 1px dashed rgba(var(--acc-rgb), 0.28); text-decoration: none; color: var(--text); }
.tg-nexttheme > span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tg-nexttheme .kicker { letter-spacing: 0.14em; }
.tg-nexttheme b { font-family: var(--font-headline); font-weight: 700; font-size: 16px; }
.tg-nexttheme > span > span:last-child { font-size: 13px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .b-row:hover:not(.is-next), .tg-card:hover:not(.is-sel), .ser:hover, .part:hover, .x-after:hover, .tg-nexttheme:hover { border-color: rgba(var(--acc-rgb), 0.45); }
  .b-row:hover:not(.is-next) { background: rgba(var(--acc-rgb), 0.05); }
}

@media (min-width: 1024px) {
  .stg, .tg { gap: 26px; }
  .xhero, .tg .xhero { height: 300px; margin: -44px -56px 0; }
  .xhero img { left: auto; right: 0; width: min(760px, 62%); height: 100%; }
  .xhero::before { background: linear-gradient(180deg, rgba(20,16,42,0) 55%, var(--bg) 100%), linear-gradient(90deg, var(--bg) 0%, var(--bg) 32%, rgba(20,16,42,0.6) 58%, rgba(20,16,42,0.15) 100%); }
  .xh-pill { left: 56px; top: 36px; transform: none; }
  .xh-in { left: 56px; right: auto; bottom: 34px; width: min(620px, 60%); gap: 12px; }
  .xhero h1 { font-size: 72px; line-height: 0.95; }
  .xh-text { display: block; margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); }
  .xh-meta { display: block; font-size: 14px; color: var(--text); }
  .stg .x-goal, .tg .x-goal, .tg .x-stats { display: none; }
  .stg > :not(.xhero) { max-width: 860px; }

  .tg.is-theme > .xhero { display: block; }
  .tg.is-theme > .x-after { display: flex; }
  .tg.is-theme .tg-list, .tg:not(.is-theme) .tg-theme { display: flex; }
  .tg-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: start; }
  .tg-list { gap: 8px; }
  .tg-list .x-h2, .tg-back { display: none; }
  .tg-card { padding: 16px 18px; border-radius: 16px; background: none; border-color: rgba(var(--acc-rgb), 0.12); }
  .tg-card.is-next { background: none; border-color: rgba(var(--acc-rgb), 0.12); }
  .tg-card.is-sel { background: linear-gradient(120deg, var(--violet), #1d1738); border-color: rgba(var(--acc-rgb), 0.34); }
  .tg-card .tg-num { width: 36px; font-size: 32px; color: rgba(var(--acc-rgb), 0.6); }
  .tg-card.is-sel .tg-num { color: var(--sand); }
  .tg-txt b { font-size: 15px; }
  .tg-txt > span:last-child { font-size: 12px; }
  .tg-card > svg { opacity: 0; }
  .tg-card.is-sel > svg { opacity: 1; }
  .tg-head { flex-direction: row; align-items: flex-end; gap: 24px; }
  .tg-head-txt { flex: 1; padding: 0; gap: 8px; }
  .tg-head h2 { font-size: 40px; line-height: 1.05; }
  .tg-start { flex: none; padding: 0 24px 0 20px; border-radius: 26px; }
  .tg-ki { border-radius: 50%; }
  .ser, button.ser { flex-direction: row; align-items: center; gap: 20px; padding: 20px 22px; }
  .ser-head { flex: 1; align-items: center; gap: 20px; }
  .ser-ico { width: 48px; height: 48px; }
  .ser-parts { display: flex; gap: 8px; }
  .part { width: 72px; height: 52px; }
  .tg-nexttheme { display: none; }
  .tg > .x-after { max-width: 860px; }
}

/* ---------- Community (Redesign) ---------- */
.av { --s: 32px; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center;
  background: hsl(var(--h) 45% 32%); color: hsl(var(--h) 70% 88%); font-family: var(--font-headline); font-weight: 700;
  font-size: calc(var(--s) * 0.38); letter-spacing: 0.02em; }
.av.is-trainer { background: var(--sand); color: var(--sand-ink); box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 0.25); }
.c-foot { gap: 10px; }
.c-foot .av { --s: 30px; }
.c-author { font-weight: 600; }
.c-trainer { margin-left: 4px; }
.c-prompt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--muted);
  background: rgba(var(--acc-rgb), 0.05); border: 1px solid rgba(var(--acc-rgb), 0.18); margin-bottom: 14px; font-size: 16px; }
.c-prompt span:last-child { flex: 1; padding: 10px 14px; border-radius: 12px; background: rgba(20,16,42,0.5); }
.c-intro { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 18px; margin-bottom: 14px;
  background: linear-gradient(120deg, var(--violet), #1d1738); border: 1px solid rgba(var(--acc-rgb), 0.28); color: var(--text); }
.c-intro > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); }
.c-intro > span { display: flex; flex-direction: column; gap: 3px; }
.c-intro b { font-family: var(--font-headline); font-weight: 700; font-size: 16px; }
.c-intro > span > span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.lesson-main .c-intro { margin: 0; }
.c-open { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; margin-bottom: 12px;
  border: 1px dashed rgba(var(--acc-rgb), 0.4); color: var(--text); font-size: 14px; line-height: 1.4; }
.c-open-n { flex: none; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 16px; background: var(--sand); color: var(--sand-ink);
  display: grid; place-items: center; font-family: var(--font-headline); font-weight: 800; }
.c-sec { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: var(--muted); margin: 18px 4px 10px; }
.c-sec:first-child { margin-top: 0; }
#c-list { gap: 12px; }
.c-card { position: relative; padding: 16px 18px; border-radius: 20px; background: rgba(var(--acc-rgb), 0.04); border-color: rgba(var(--acc-rgb), 0.14); }
.c-card.is-new { border-color: rgba(var(--acc-rgb), 0.4); }
.c-card.is-new::after { content: ''; position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.c-foot-top { margin: 2px 0 10px; }
.c-card.is-new .c-meta { padding-right: 18px; }
.c-title { font-size: 17px; }
.c-cat-vorstellung { background: rgba(159,216,176,0.15); color: var(--ok); }
.c-cat-hoerprobe { background: rgba(183,156,255,0.16); color: var(--lilac); }
.c-cat-lektion { background: rgba(241,236,248,0.1); color: var(--text); }
.c-lesson { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.c-card-vorstellung { border-color: rgba(159,216,176,0.3); }
.c-answer { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(20,16,42,0.45); font-size: 14px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-answer b { color: var(--text); font-weight: 600; }
.c-answer.is-trainer { border-left: 2px solid var(--sand); }
.c-card .c-foot:last-child { margin-top: 10px; }
.cel-share { width: 100%; margin: 10px 0 0; }
@media (min-width: 1024px) {
  .c-prompt { padding: 16px 18px; }
  #c-list { display: grid; gap: 12px; }
}

/* ---------- Community nach Briefing (Abschnitt 8) ---------- */
:root { --bg-deep: #100c22; --bg-raised: #2b2159; --lav: #A8B6EC; --line-strong: rgba(var(--acc-rgb), 0.30); --font-display: var(--serif);
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --shadow-card: 0 24px 60px -30px rgba(0,0,0,0.8); --shadow-sand: 0 10px 30px -10px rgba(var(--acc-rgb), 0.55); }
@keyframes hbLoad { to { transform: rotate(360deg); } }
.hb-loading { width: 28px; height: 28px; display: block; margin: 0 auto 10px; opacity: .8; animation: hbLoad 2.4s cubic-bezier(.6,.1,.4,.9) infinite; }
@media (prefers-reduced-motion: reduce) { .hb-loading { animation: none; } }
.c-composer { border-radius: 18px; background: rgba(var(--acc-rgb), 0.05); border: 1px solid rgba(var(--acc-rgb), 0.18); padding: 14px 16px; margin-bottom: 14px; }
.c-composer .c-prompt { padding: 0; border: 0; background: none; margin: 0; }
.c-quicks { display: flex; gap: 8px; margin-top: 12px; padding-left: 54px; }
.c-quick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--line); color: var(--text); font-size: 13px; }
.c-quick svg { width: 15px; height: 15px; color: var(--sand); }
.c-link { color: var(--sand); font-size: 14px; }
.c-help { margin: 0 0 16px; }
.c-helprow { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.c-helprow::-webkit-scrollbar { display: none; }
.c-helpcard { flex: none; width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--text);
  border: 1.5px dashed rgba(168,182,236,0.55); background: rgba(168,182,236,0.05); }
.c-helpcard b { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-help-who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.c-help-go { margin-top: auto; font-size: 13px; color: var(--lav); font-weight: 500; }
.c-side { display: none; }
.c-leadlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c-lead { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.c-lead-rank { width: 18px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-lead:nth-child(-n+3) .c-lead-rank { color: var(--sand); font-weight: 700; }
.c-lead-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-lead-n { font-variant-numeric: tabular-nums; }
.c-lead.is-me .c-lead-name { color: var(--sand); }
.c-lead-me { color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; }
.c-lead-head { margin-top: 26px; }
.c-leadlist.is-rising .c-lead-rank { color: var(--sand); font-weight: 400; }
.c-cat-frage { background: rgba(168,182,236,0.16); color: var(--lav); }
.c-cat-erfolg { background: var(--sand); color: var(--sand-ink); }
.c-card-erfolg { background: linear-gradient(135deg, rgba(var(--acc-rgb), 0.12), rgba(var(--acc-rgb), 0.04)); border-color: rgba(var(--acc-rgb), 0.3); }
.c-card { display: block; }
.c-cardlink { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.c-cardlink:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.c-like { position: relative; z-index: 2; }
@media (max-width: 1023px) { body:has(#player:not([hidden])) .c-compose-dock { bottom: calc(var(--nav-h) + 84px + var(--safe-bottom)); } }
.c-foot-end { justify-content: flex-start; gap: 14px; }
.c-foot-end .c-stats { margin-left: 0; }
.c-like { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.c-like svg { width: 15px; height: 15px; }
.c-like.is-on { color: var(--sand); border-color: rgba(var(--acc-rgb), 0.4); }
.c-like.is-on svg path { fill: currentColor; }
.c-answer { display: flex; gap: 10px; align-items: flex-start; }
.c-ans-ouro { flex: none; width: 22px; height: 22px; margin-top: 1px; background: var(--sand);
  -webkit-mask: url(img/ouro-lav.png) center/contain no-repeat; mask: url(img/ouro-lav.png) center/contain no-repeat; }
.c-follow-top { margin-left: auto; }
.c-reply.is-trainer { background: linear-gradient(120deg, rgba(43,33,89,0.9), rgba(29,23,56,0.9)); border-color: rgba(var(--acc-rgb), 0.45); }
.c-compose-dock { position: sticky; bottom: calc(var(--nav-h) + 8px + var(--safe-bottom)); z-index: 3; margin: 18px -16px 0; padding: 10px 16px 12px;
  background: rgba(20,16,42,0.96); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c-quickreplies { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.c-quickreplies .chip { white-space: nowrap; }
.c-dock-row { display: flex; align-items: flex-end; gap: 10px; }
.c-dock-row .notes { flex: 1; min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: 11px 16px; }
.c-send { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; box-shadow: var(--shadow-sand); }
.c-send svg { width: 20px; height: 20px; }
.c-catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-catcard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border-radius: 16px; text-align: left; color: var(--text);
  border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.03); }
.c-catcard svg { width: 22px; height: 22px; color: var(--sand); margin-bottom: 4px; }
.c-catcard b { font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.c-catcard span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.c-catcard.is-on { border-color: var(--sand); background: rgba(var(--acc-rgb), 0.1); }
.c-starts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.c-starts .chip { font-size: 13px; }
@media (min-width: 1024px) {
  .c-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  main[data-view^="community:"] { max-width: 1180px; }
  .c-help { display: none; }
  .c-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 28px; }
  .c-help-side .c-helprow { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
  .c-help-side .c-helpcard { width: auto; }
  .c-compose-dock { bottom: 88px; margin: 18px 0 0; border-radius: 18px; border: 1px solid var(--line); }
  body:not(:has(#player:not([hidden]))) .c-compose-dock { bottom: 16px; }
  .c-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Anmeldung am Desktop: links der Ouroboros, rechts das Formular */
  body:not(.is-app) .login { max-width: none; min-height: calc(100vh - 80px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; padding: 0; }
  body:not(.is-app) .login-art { min-height: calc(100vh - 80px); background: radial-gradient(closest-side, rgba(124,92,214,0.18), rgba(20,16,42,0)); }
  body:not(.is-app) .login-art .hb-orbit { width: 360px; height: 360px; }
  body:not(.is-app) .login-ring { width: 380px; height: 380px; }
  body:not(.is-app) .login-art .hb-glow { width: 560px; height: 560px; }
  body:not(.is-app) .login-body { width: 400px; justify-self: center; }
  body:not(.is-app) .login h1 { font-size: 64px; }
}
/* Schmaler Desktop (Seitenleiste plus zwei Spalten): Feed bekommt mehr Platz, Schnellknöpfe bleiben in der Karte */
@media (min-width: 1024px) and (max-width: 1199px) {
  .c-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .c-quicks { padding-left: 0; flex-wrap: wrap; }
}

/* ---------- Musikbibliothek ---------- */
.m-filters { margin: 0 0 8px; }
.m-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 0 0 14px; border-radius: 16px; background: rgba(var(--acc-rgb), 0.05); border: 1px solid var(--line); }
.m-tab { height: 44px; border-radius: 12px; font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: var(--muted); }
.m-tab span { font-family: var(--font-body); font-weight: 400; font-size: 12px; opacity: .8; margin-left: 4px; }
.m-tab.is-on { background: var(--sand); color: var(--sand-ink); }
.m-note { margin: -6px 4px 12px; font-size: 13px; color: var(--muted); }
.m-lic { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: .04em; margin-left: 6px; padding: 2px 8px; border-radius: 10px; background: var(--sand); color: var(--sand-ink); vertical-align: 2px; white-space: nowrap; }
.m-sec.is-licensed { border-color: rgba(var(--acc-rgb), 0.4); background: linear-gradient(120deg, rgba(var(--acc-rgb), 0.1), rgba(var(--acc-rgb), 0.03)); }
.m-group { font-family: var(--font-headline); font-weight: 700; font-size: 19px; margin: 26px 4px 12px; }
.m-group:first-child { margin-top: 8px; }
.m-sec { margin-bottom: 10px; }
.m-tracks { padding: 0 8px 8px; gap: 4px; }
.mtrack { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 10px; padding: 8px; border: 0; background: none; border-radius: 12px; }
.mtrack.is-playing { background: rgba(var(--acc-rgb), 0.08); }
.mtrack .item-title { font-size: 15px; white-space: normal; line-height: 1.3; }
.mtrack .item-state { display: none; }
.mt-play { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--acc-rgb), 0.14); color: var(--sand); display: grid; place-items: center; }
.mt-play svg { width: 16px; height: 16px; }
.mt-play.is-on, .mtrack.is-playing .mt-play { background: var(--sand); color: var(--sand-ink); }
.mtrack .dl { width: 36px; height: 36px; }
.mtrack .dl svg { width: 16px; height: 16px; }
.mtrack .dl .ring { width: 38px; height: 38px; }
.mt-file { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); }
.mt-file svg { width: 17px; height: 17px; }
.tool.is-music { align-items: center; margin: 0 0 16px; background: linear-gradient(120deg, rgba(168,182,236,0.16), rgba(var(--acc-rgb), 0.08)); border-color: rgba(168,182,236,0.35); }
.tool.is-music .tool-ico { background: var(--lav); color: var(--sand-ink); }
.tool.is-music .tool-ico svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .mtrack:hover { background: rgba(var(--acc-rgb), 0.05); } .mt-file:hover { border-color: rgba(var(--acc-rgb), 0.45); } }

/* ---------- Bearbeiten-Modus ---------- */
body.is-editing .et { outline: 1.5px dashed rgba(var(--acc-rgb), 0.7); outline-offset: 3px; border-radius: 4px; cursor: text; }
body.is-editing .et:hover { background: rgba(var(--acc-rgb), 0.08); }
body.is-editing .et a { pointer-events: none; }
.edit-bar { position: fixed; top: calc(8px + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 50; padding: 8px 8px 8px 14px; border-radius: 20px;
  background: var(--sand); color: var(--sand-ink); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-card); width: max-content; max-width: calc(100% - 24px); white-space: nowrap; }
.edit-bar span { overflow: hidden; text-overflow: ellipsis; }
.edit-bar button { padding: 5px 12px; border-radius: 14px; background: var(--sand-ink); color: var(--sand); font-weight: 600; }
.te-sheet h2 { margin-top: 4px; }
.te-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
#te-key { opacity: .6; }
.te-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.m-note a { color: var(--sand); }
.m-note-top { margin: 0 4px 14px; }

[hidden] { display: none !important; }

/* ---------- Eingebaute Nachschlagewerke (Techniken, Skript-Bibliothek) ---------- */
.ref-head p { max-width: 60ch; }
.ref-filters { margin-top: 12px; }
.ref-intro { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.ref-intro > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; color: var(--sand); }
.ref-intro > summary::-webkit-details-marker { display: none; }
.ref-intro .ref-body { padding: 0 18px 16px; }
.ref-ch { margin: 26px 0 0; }
.ref-ch-title { font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ref-ch-title span { font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--muted); letter-spacing: 0; }
.ref-ch.is-gold .ref-ch-title { color: var(--sand); }
.ref-ch.is-silver .ref-ch-title { color: #d6d1e2; }
.ref-ch.is-bronze .ref-ch-title { color: #dba57a; }
.ref-ch-intro { margin: 0 0 12px; color: var(--muted); }
.ref-item { border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin: 0 0 8px; scroll-margin-top: 90px; }
.ref-item[open] { background: rgba(var(--acc-rgb), 0.07); }
.ref-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 10px 14px 18px; }
.ref-item > summary::-webkit-details-marker { display: none; }
.ref-t { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; }
.ref-ico { margin-right: 8px; }
.ref-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ref-tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.ref-item.is-gold { border-left: 3px solid var(--sand); }
.ref-item.is-silver { border-left: 3px solid #bdb6cc; }
.ref-item.is-bronze { border-left: 3px solid #c98a58; }
.ref-fav { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer; }
.ref-fav svg { width: 20px; height: 20px; }
.ref-fav.is-on { color: var(--sand); }
.ref-fav.is-on svg { fill: currentColor; }
.ref-item .ref-body { padding: 0 18px 18px; }
.ref-body { line-height: 1.7; }
.ref-body p { margin: 0 0 12px; }
.ref-body ul, .ref-body ol { margin: 0 0 12px; padding-left: 20px; }
.ref-body li { margin: 0 0 4px; }
.ref-body h4, .ref-body .r-label { font-family: var(--font-headline); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.ref-body q { font-style: italic; color: var(--sand); quotes: "„" "“"; }
.ref-body q::before { content: open-quote; }
.ref-body q::after { content: close-quote; }
.r-lead strong { color: var(--sand); }
.r-note { font-style: italic; color: var(--muted); }
.r-hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.r-video { display: inline-flex; align-items: center; gap: 8px; color: var(--sand); text-decoration: none; font-weight: 500; font-size: 14px; }
.r-video svg { width: 14px; height: 14px; flex: none; }
.r-quote { font-style: italic; padding: 10px 14px; margin: 0 0 8px; border-left: 2px solid var(--line); background: rgba(255, 255, 255, 0.02); border-radius: 0 10px 10px 0; }
.r-quote.is-gold { border-left-color: var(--sand); }
.r-quote.is-silver { border-left-color: #bdb6cc; }
.r-quote.is-bronze { border-left-color: #c98a58; }
.r-cmd { font-style: normal; font-weight: 700; }
.r-tier { font-weight: 700; }
.r-tier.is-gold { color: var(--sand); }
.r-tier.is-silver { color: #d6d1e2; }
.r-tier.is-bronze { color: #dba57a; }
.r-sec { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); }
.r-sec .r-sec-title { margin-top: 0; }
.r-example { background: rgba(var(--acc-rgb), 0.06); }
.r-example .r-sec-title { color: var(--sand); }
.r-plain { border-color: transparent; padding: 0; }
.r-info .r-sec-title { color: #c7b8f0; }
.r-goal .r-sec-title { color: #9fe0bf; }
.r-warn { border-color: rgba(247, 180, 124, 0.35); }
.r-warn .r-sec-title { color: #f7b47c; }
.r-script { font-size: 1.02rem; }
.r-line { padding: 1px 0; }
.r-pause { height: 14px; }
.r-step { font-weight: 600; margin: 16px 0 8px; }
.r-step-mark { margin-right: 6px; }
.r-ok { color: #9fe0bf; }
.r-no { color: #f08f8f; }

/* ---------- Profilbild ---------- */
.av.has-img { background: none; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.is-trainer.has-img { box-shadow: 0 0 0 2px var(--sand); }
.pf-photo { display: flex; align-items: center; gap: 16px; }
.pf-photo.is-busy { opacity: 0.5; pointer-events: none; }
.pf-photo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-pick { cursor: pointer; margin: 0; }

/* ---------- Admin: Bearbeiten-Modus, Offen, Teilnehmer ---------- */
.adm-edit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.adm-edit div { flex: 1 1 260px; display: grid; gap: 4px; }
.adm-edit span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.adm-edit .btn { margin: 0; }
.adm-open { display: flex; align-items: center; gap: 8px; }
.adm-open .notif { flex: 1; min-width: 0; }
.adm-open .chip { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.adm-person-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.adm-person-main { display: grid; gap: 2px; min-width: 0; }
.adm-where { color: var(--sand); font-size: 0.9rem; font-weight: 500; }
.adm-person.is-open { background: rgba(var(--acc-rgb), 0.06); }
.adm-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.adm-d-h { font-family: var(--font-headline); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.adm-d-line { margin: 8px 0; color: var(--muted); font-size: 0.92rem; }
.adm-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.adm-steps li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.93rem; }
.adm-steps li::marker { color: var(--muted); }
.adm-steps li.is-ok { color: var(--muted); }
.adm-steps li.is-ok .adm-step-s { color: #9fe0bf; }
.adm-steps li.is-cur { color: var(--sand); font-weight: 600; }
.adm-step-s { flex: none; color: var(--muted); font-weight: 400; }
.adm-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.adm-recent li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.adm-recent a { color: var(--text); text-decoration: none; }
.adm-recent span { flex: none; color: var(--muted); }
.adm-all summary { cursor: pointer; color: var(--sand); margin: 8px 0; font-size: 0.92rem; }

/* ---------- Profil ---------- */
.me-head .pf-photo { margin-bottom: 10px; }
.pf-who { flex-basis: 100%; display: grid; gap: 2px; margin-bottom: 4px; }
.pf-who b { font-family: var(--font-headline); font-size: 1.15rem; }
.pf-who span { color: var(--muted); font-size: 0.9rem; word-break: break-all; }
.pf-count { font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.badges.is-short .badge.is-more { display: none; }
.badges-all { margin: 4px 0 8px; }
.me-btn { text-decoration: none; }
.me-btn .av { --s: 28px; }
.me-btn.is-on .av { box-shadow: 0 0 0 2px var(--sand); }
@media (min-width: 1024px) { body.is-app .me-btn { display: none; } }

/* ---------- Beitrag: schlanke Antworten, Unterantworten (Community-Redesign Abschnitt 10) ---------- */
.c-body-main.is-long { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 1024px) { .c-body-main.is-long { display: block; -webkit-line-clamp: unset; overflow: visible; } .c-readmore { display: none; } }
.c-readmore { background: none; border: 0; padding: 4px 0; color: var(--sand); font: inherit; font-size: 0.9rem; cursor: pointer; }
.c-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 22px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md, 16px); background: var(--card); }
.c-sum .c-follow-top { margin-left: auto; }
.c-sum-text { font-size: 0.93rem; }
.c-sum-text span { color: var(--muted); }
.c-stack { display: inline-flex; }
.c-stack .av { box-shadow: 0 0 0 2px var(--bg); }
.c-stack .av + .av { margin-left: -8px; }
.c-sort { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--line); }
.c-sort button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.82rem; padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.c-sort button.is-on { background: rgba(var(--acc-rgb), 0.14); color: var(--sand); }
.c-replies { margin-bottom: 12px; }
.c-row { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(var(--acc-rgb), 0.08); }
.c-row-main { flex: 1; min-width: 0; }
.c-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 0.9rem; }
.c-row-head b { font-weight: 600; }
.c-row-time { color: var(--muted); }
.c-row .c-body { margin: 3px 0 2px; font-size: 0.97rem; line-height: 1.55; }
.c-row-acts { display: flex; gap: 14px; }
.c-tact { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
.c-tact svg { width: 14px; height: 14px; }
.c-tact.is-on { color: var(--sand); }
.c-tact.is-on svg { fill: currentColor; }
.c-row.is-trainer > .av { box-shadow: 0 0 0 2px var(--sand); }
.c-more { position: relative; margin-left: auto; }
.c-more > summary { list-style: none; cursor: pointer; width: 32px; height: 28px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
.c-more > summary::-webkit-details-marker { display: none; }
.c-more > summary svg { width: 16px; height: 16px; }
.c-more-menu { position: absolute; right: 0; top: 30px; z-index: 3; display: grid; min-width: 140px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: 0 12px 30px -12px rgba(0,0,0,.7); }
.c-more-menu button { border: 0; background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.c-more-menu button:hover { background: rgba(var(--acc-rgb), 0.08); }
.c-kids { margin: 8px 0 0; padding-left: 12px; border-left: 1.5px solid rgba(var(--acc-rgb), 0.22); }
.c-row.is-kid { padding: 8px 0; border-bottom: 0; }
.c-row.is-kid .c-body { font-size: 0.875rem; }
.c-row.is-deleted { border-bottom: 1px solid rgba(var(--acc-rgb), 0.08); }
.c-row-gone { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.c-kid-form { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0 4px; }
.c-kid-form textarea { flex: 1; min-height: 40px; }
.c-send.is-small { width: 40px; height: 40px; flex: none; }
.c-older { display: block; width: 100%; margin: 10px 0 0; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--sand); font: inherit; font-size: 0.92rem; cursor: pointer; }
.c-row-head { flex-wrap: nowrap; min-width: 0; }
.c-row-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-row-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.c-row-head .c-trainer { flex: none; }

.c-card[hidden], .c-sec[hidden] { display: none; }
.c-feedmore { margin-top: 14px; }

/* Lektionstext im Bearbeiten-Modus */
.lt-bar { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border: 1.5px dashed rgba(var(--acc-rgb), 0.6); border-radius: 12px; }
body.is-editing .lt-bar { display: flex; }
.lt-bar .btn { margin: 0; }
.lt-hint { color: var(--muted); font-size: 0.85rem; }
.lesson-text.is-live-edit { outline: 1.5px dashed rgba(var(--acc-rgb), 0.7); outline-offset: 6px; border-radius: 6px; background: rgba(var(--acc-rgb), 0.04); }
body.is-editing .lesson-text.is-live-edit a { pointer-events: none; }

/* Skripte zum Vorlesen (Lektionstext mit Phasen-Überschriften) größer und luftiger */
.lesson-text:has(h3.phase) { font-size: 1.2rem; line-height: 1.85; }
.lesson-text:has(h3.phase) .phase { font-size: 0.85em; }
.lesson-text:has(h3.phase) summary { font-size: 1rem; }
.m-comments { margin-top: 36px; }

/* Längen-Check fürs Skript */
.lc { border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; margin: 18px 0; background: var(--card); }
.lc .sec-title { margin-top: 0; }
.lc-intro { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 14px; }
.lc-phases { list-style: none; counter-reset: lc; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.lc-phases li { counter-increment: lc; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 0.9rem; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lc-phases li:last-child { border-bottom: 0; }
.lc-phases b { font-weight: 600; }
.lc-phases b::before { content: counter(lc) '. '; color: var(--sand); }
.lc-phases span { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.lc-text { resize: vertical; min-height: 150px; line-height: 1.5; margin-bottom: 10px; }
.lc-tempo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 16px; }
.lc-tempo > span { margin-right: 4px; }
.lc-verdict { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
.lc-verdict b { font-family: var(--font-headline); font-size: 1.05rem; }
.lc-verdict span { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
.lc-verdict.is-ok { border-color: rgba(143, 214, 160, 0.5); }
.lc-verdict.is-ok b { color: #8fd6a0; }
.lc-verdict.is-short b, .lc-verdict.is-long b { color: var(--sand); }
.lc-scale { position: relative; height: 8px; border-radius: 8px; background: var(--line); margin: 18px 0 6px; }
.lc-zone { position: absolute; top: 0; bottom: 0; background: rgba(143, 214, 160, 0.45); border-radius: 8px; }
.lc-mark { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 3px; background: var(--sand); }
.lc-mark.is-ok { background: #8fd6a0; }
.lc-scale-lbl { position: relative; height: 16px; font-size: 0.72rem; color: var(--muted); margin-bottom: 12px; }
.lc-scale-lbl span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lc-scale-lbl span:first-child { transform: none; }
.lc-scale-lbl span:last-child { transform: translateX(-100%); }
.lc-rows { list-style: none; padding: 0; margin: 0; }
.lc-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.lc-rows li:last-child { border-bottom: 0; }
.lc-rows span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-rows .lc-r { text-align: right; flex: none; }
.lc-rows small { color: var(--muted); font-size: 0.78rem; }
.lc-note { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 10px 0 0; }

/* KI-Werkzeuge: Video der Lektion aufklappbar über dem Werkzeug, Kommentare darunter */
.tool-video { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin: 0 0 16px; overflow: hidden; }
.tool-video > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.tool-video > summary::-webkit-details-marker { display: none; }
.tool-video > summary > svg { flex: none; width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: var(--sand); color: var(--sand-ink); }
.tool-video > summary > span { display: flex; flex-direction: column; gap: 2px; }
.tool-video > summary > span > span { color: var(--muted); font-size: 0.82rem; }
.tool-video .lesson-media { margin: 0; }
.tool-video .lesson-text { padding: 0 14px; }
.tool-comments { margin-top: 24px; }

/* Skript-Bibliothek: Kapitel als Klappboxen */
.ref-ch.is-fold { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 0 14px; }
.ref-ch.is-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.ref-ch.is-fold > summary::-webkit-details-marker { display: none; }
.ref-ch.is-fold > summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.ref-ch.is-fold[open] > summary::after { transform: rotate(-135deg); }
.ref-ch.is-fold .ref-ch-title { margin: 0; flex: 1; min-width: 0; }
.ref-ch-n { flex: none; font-size: 0.78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; }
.ref-ch.is-fold[open] { padding-bottom: 12px; }

.edit-bar button[hidden] { display: none; }
.lesson-text.is-empty:not(.is-live-edit) { display: none; }
.lesson-text.is-empty.is-live-edit { min-height: 90px; }

/* Bilder in der Community */
.ci-add { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); border-radius: 50%; }
.ci-add svg { width: 22px; height: 22px; }
.c-dock-row .ci-add { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--line); }
.ci-add.has-label { border-radius: 99px; border: 1px solid var(--line); padding: 7px 14px 7px 11px; font-size: 0.88rem; }
.ci-add.has-label svg { width: 18px; height: 18px; }
.ci-add:hover { color: var(--sand); border-color: var(--sand); }
.ci-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ci-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-thumbs:empty { display: none; }
.c-compose-dock .ci-thumbs { margin: 0 0 8px 46px; }
.ci-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-thumb.is-busy img { opacity: .4; }
.ci-thumb.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sand); border-right-color: transparent; animation: ci-spin .8s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }
.ci-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(20,16,42,0.85); color: #fff; font-size: 15px; line-height: 20px; }
.cm-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-compose-row .btn-small { margin: 0; }
.ci-grid { display: grid; gap: 6px; margin: 10px 0 4px; max-width: 520px; }
.ci-grid.n2, .ci-grid.n4 { grid-template-columns: 1fr 1fr; }
.ci-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.ci-img { display: block; padding: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); cursor: zoom-in; }
.ci-img img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.ci-grid:not(.n1) .ci-img img { aspect-ratio: 1; height: 100%; }
.c-card-img { position: relative; margin: 10px 0 2px; border-radius: 12px; overflow: hidden; max-height: 220px; }
.c-card-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.c-card-img span { position: absolute; right: 8px; bottom: 8px; background: rgba(20,16,42,0.8); color: #fff; font-size: 0.8rem; padding: 2px 8px; border-radius: 99px; }
.ci-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(8,6,20,0.94); display: grid; place-items: center; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); cursor: zoom-out; }
.ci-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.ci-zoom button { position: absolute; top: calc(12px + var(--safe-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 24px; }

/* Meilenstein mit YouTube-Video (erst nach Tippen geladen) und Anleitung */
.yt-load { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; text-align: left; border-radius: 20px; border: 1px solid var(--line); background: var(--card); margin: 0 0 14px; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; margin: 0 0 14px; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ms-info { margin: 0 0 16px; }
.ms-info ol li { margin-bottom: 10px; }
.tool.is-ref { margin: 0 0 14px; }

/* Etappe im Theorie-Aufbau: Werkzeuge über der Bereichsliste, am Handy nicht in der Bereichsansicht */
.stg-extras { display: flex; flex-direction: column; gap: 12px; }
/* Handy: oben auf der Übersicht, in der Bereichsansicht unter der Überschrift. Desktop: nur oben. */
.tg.is-theme > .stg-extras, .tg:not(.is-theme) .stg-extras.is-in-theme { display: none; }
@media (min-width: 1024px) { .tg.is-theme > .stg-extras { display: flex; } .stg-extras.is-in-theme { display: none !important; } }

/* iPhone zoomt beim Tippen in Felder mit weniger als 16 px Schrift automatisch hinein und bleibt
   vergrößert, die untere Leiste steht dann mitten im Bild. Auf Touch-Geräten daher mindestens 16 px. */
@media (pointer: coarse) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not(#i-code), textarea, select { font-size: max(16px, 1em) !important; }
}

/* Starterpaket: je Session eine Karte mit Thumbnail, Varianten darunter */
.st-cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .st-cards { grid-template-columns: 1fr 1fr; } }
.st-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.st-card-img { aspect-ratio: 16 / 9; background: var(--bg-2) center / cover no-repeat; position: relative; }
.st-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,42,0) 60%, rgba(20,16,42,0.5)); }
.st-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.st-card-title { margin: 0 2px; font-family: var(--font-headline); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.st-vars { display: grid; gap: 8px; }
.st-var { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; padding: 10px 12px; border-radius: 12px; background: rgba(var(--acc-rgb), 0.06); border: 1px solid rgba(var(--acc-rgb), 0.18); }
.st-var-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sand); color: var(--sand-ink); display: grid; place-items: center; }
.st-var-ico svg { width: 17px; height: 17px; }
.st-var-body { display: block; min-width: 0; }
.st-var-title { display: block; font-weight: 600; font-size: 0.95rem; }
.st-var-text { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
@media (hover: hover) and (pointer: fine) { .st-card { transition: border-color .15s, transform .2s; } .st-card:hover { border-color: rgba(var(--acc-rgb), 0.4); } .st-var { transition: background .15s, border-color .15s; } .st-var:hover { background: rgba(var(--acc-rgb), 0.12); border-color: rgba(var(--acc-rgb), 0.4); } }

/* Atemphasen-Leiste über dem Skript (Starterpaket, Daten in item.cues) */
.cue-bar { --k: #9d93d6; position: sticky; top: calc(var(--safe-top) + 8px); z-index: 20; margin: 14px 16px 0; padding: 12px 14px 10px;
  border-radius: 16px; background: rgba(29, 23, 56, 0.94); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); transition: border-color .3s, box-shadow .3s; }
.k-ruhig { --k: #9d93d6; } .k-rhythmus { --k: #E9C79A; } .k-verbunden { --k: #e39a62; } .k-schnell { --k: #e0705f; } .k-pause { --k: #5fbfd0; } .k-aus { --k: #c9a8de; } .k-ende { --k: #6b6385; }
.cue-now { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cue-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k); align-self: center; flex: none; }
.cue-bar.is-live .cue-dot { animation: cuePulse 2s ease-in-out infinite; }
#cue-name { font-family: var(--font-headline); font-size: 1.05rem; color: var(--k); }
.cue-bar:not(.is-live) #cue-name { color: var(--text); }
.cue-hint { color: var(--muted); font-size: 0.85rem; }
.cue-time { margin-left: auto; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cue-line { position: relative; display: flex; gap: 2px; height: 14px; margin: 10px 0 8px; }
.cue-seg { flex: none; height: 100%; padding: 0; border: 0; border-radius: 3px; background: var(--k); opacity: .55; cursor: pointer; min-width: 3px; }
.cue-seg.is-past { opacity: .22; }
.cue-seg.is-now { opacity: 1; }
.cue-seg:hover { opacity: .9; }
.cue-head { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); pointer-events: none; }
.cue-next { font-size: 0.92rem; line-height: 1.4; color: var(--text); }
.cue-bar:not(.is-live) .cue-next { color: var(--muted); font-size: 0.85rem; }
.cue-next b[class^="k-"] { color: var(--k); }
.cue-left { font-variant-numeric: tabular-nums; }
.cue-at { color: var(--muted); font-size: 0.85em; }
.cue-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 0.75rem; color: var(--muted); }
.cue-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--k); margin-right: 5px; }
.cue-bar.is-live .cue-legend { display: none; }
/* Letzte 30 Sekunden vor dem Wechsel: die nächste Phase leuchtet */
.cue-bar.is-soon { border-color: var(--sand); box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .35), 0 10px 28px rgba(0,0,0,.35); animation: cueSoon 1.6s ease-in-out infinite; }
.cue-bar.is-soon .cue-left { color: var(--sand); font-size: 1.1em; }
@keyframes cuePulse { 50% { transform: scale(1.5); opacity: .6; } }
@keyframes cueSoon { 50% { box-shadow: 0 0 0 5px rgba(var(--acc-rgb), .18), 0 10px 28px rgba(0,0,0,.35); } }
@media (prefers-reduced-motion: reduce) { .cue-bar, .cue-dot { animation: none !important; } }
@media (min-width: 1200px) { .cue-bar { margin: 0; top: 16px; } }

/* Karaoke: Skript im Tempo von Fabians Aufnahme, aktuelle Zeile gold, Nachbarzeilen weiß */
.kar { padding: 0 0 6px; line-height: 1.5; }
.kar-title { font-size: 1.05em; margin: 22px 0 4px; }
.kar-intro { color: var(--muted); font-size: 0.8em; margin: 6px 0 18px; }
.kar .kar-h { display: inline-block; background: var(--sand); color: var(--sand-ink); border-radius: 8px; padding: 4px 12px; font-size: 0.72em; margin: 26px 0 8px; }
.kar-l { margin: 0; padding: 5px 0; cursor: pointer; color: var(--muted); opacity: .5; transition: opacity .3s, color .3s, transform .3s; transform-origin: left center; }
.kar-l.is-past { opacity: .3; }
.kar-l.is-count { font-style: italic; font-size: 0.85em; }
.kar-l.is-near { opacity: 1; color: var(--text); }
.kar-l.is-now { opacity: 1; color: var(--sand); font-weight: 600; transform: scale(1.06); }
.kar-l:hover { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .kar-l { transition: none; } .kar-l.is-now { transform: none; } }

/* SOS-Knopf neben Play: Text anhalten, Musik läuft weiter */
.p-sos { height: 34px; min-width: 54px; padding: 0 12px; border-radius: 99px; border: 1.5px solid #e0705f; background: rgba(224,112,95,.12);
  color: #f6a597; font: 700 0.8rem var(--font-headline); letter-spacing: .04em; cursor: pointer; flex: none; }
.p-sos.is-on { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); letter-spacing: 0; }
.p-sos[hidden] { display: none; }
.kar.is-frozen .kar-l.is-now { transform: none; outline: 1px dashed var(--sand); outline-offset: 3px; border-radius: 4px; }
/* Atem anhalten: Countdown in der Leiste */
.cue-bar.is-hold { border-color: #5fbfd0; box-shadow: 0 0 0 2px rgba(95,191,208,.3), 0 10px 28px rgba(0,0,0,.35); }
.cue-holdtxt { display: block; }
.cue-holdtxt .cue-left { color: #7fd3e2; font-size: 1.25em; }
.cue-holdbar { display: block; height: 8px; margin-top: 6px; border-radius: 6px; background: rgba(95,191,208,.18); overflow: hidden; }
.cue-holdbar i { display: block; height: 100%; background: #5fbfd0; border-radius: 6px; }
/* Unter „Atempause“: Plan der Haltephasen */
.kar-plan { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid rgba(95,191,208,.35); border-radius: 12px; background: rgba(95,191,208,.06); font-size: 0.8em; }
.kp-row { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 10px; padding: 4px 0; color: var(--muted); }
.kp-bar { display: block; height: 10px; border-radius: 6px; background: rgba(95,191,208,.25); overflow: hidden; }
.kp-bar i { display: block; height: 100%; width: 0; background: #5fbfd0; }
.kp-dur { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kp-row.is-on { color: var(--text); font-weight: 600; }
.kp-row.is-on .kp-dur { color: #7fd3e2; }
.kp-row.is-done { opacity: .5; }
/* Stille im Text: wird gold und zählt herunter */
.kar-l.kar-quiet { font-size: 0.8em; font-style: italic; }
.kar-quiet .kq-left { font-variant-numeric: tabular-nums; }
.kar-quiet .kq-bar { display: none; height: 6px; margin-top: 6px; border-radius: 6px; background: rgba(var(--acc-rgb), .2); overflow: hidden; }
.kar-quiet .kq-bar i { display: block; height: 100%; width: 0; background: var(--sand); }
.kar-quiet.is-now { font-size: 0.95em; font-style: normal; transform: none; }
.kar-quiet.is-now .kq-bar { display: block; }

/* Lautstärke der Musik in der App (unabhängig vom Gerät) */
.vol { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; margin: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--sand) var(--v, 100%), rgba(var(--acc-rgb), .2) var(--v, 100%)); }
.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sand); border: 0; }
.vol::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sand); border: 0; }
.vol-ico { display: inline-grid; color: var(--muted); flex: none; }
.vol-ico svg { width: 20px; height: 20px; }
.vol-pct { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; flex: none; }
.pf-vol { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pf-vol .vol { flex: 1; }
.p-vol { display: flex; align-items: center; gap: 8px; }
.p-vol .vol { width: 110px; }
.pf-vol[hidden], .p-vol[hidden] { display: none; }

/* ---------- Mehrere Kurse (10/2026): Kurs-Umschalter, Meine Kurse, Vorschau, Kurs-Themes ---------- */
/* Kurs-Themes (themes.css) tauschen --bg, --sand, --acc-rgb … am <body>. Karten und Linien neu aus dem
   Akzent ableiten, Kopf, Tab-Leiste und Player-Leiste aus --bg statt fest im Hypnobreath-Violett.
   Ein Theme, das --card oder --line selbst setzt, gewinnt (themes.css kommt danach). */
[data-theme-kurs] { --card: rgba(var(--acc-rgb), 0.05); --line: rgba(var(--acc-rgb), 0.14); }
body[data-theme-kurs] .top { background: color-mix(in srgb, var(--bg) 88%, transparent); }
/* Tab-Leiste und Mini-Player deckend: sonst scheinen beim Scrollen Texte der Seite durch (iPhone, 10/2026) */
body[data-theme-kurs] .tabs { background: var(--deep); }
body[data-theme-kurs] .player { background: var(--bg-2); }
body[data-theme-kurs] .c-compose-dock { background: color-mix(in srgb, var(--bg) 96%, transparent); }

/* Umschalter: Handy in der Mitte der Kopfzeile (Schriftzug weicht dem Ouroboros), Desktop in der Seitenleiste */
.kurs-switch { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 38px; padding: 0 10px 0 5px;
  border-radius: 19px; border: 1px solid rgba(var(--acc-rgb), 0.22); background: rgba(var(--acc-rgb), 0.06); color: var(--text);
  font-family: var(--font-headline); font-weight: 700; font-size: 14px; }
.kurs-switch[hidden] { display: none; }
.kurs-switch img { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.kurs-switch .ks-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kurs-switch svg { flex: none; width: 16px; height: 16px; color: var(--sand); }
@media (max-width: 1023px) {
  body.has-kurs-switch .brand { flex: none; }
  body.has-kurs-switch .brand-ico { display: block; width: 30px; height: 30px; }
  body.has-kurs-switch .brand-name { display: none; }
  body.has-kurs-switch .kurs-switch { flex: 0 1 auto; margin: 0 auto 0 10px; }
  /* Mit Zurück-Pfeil weicht der Ouroboros, sonst wird bei 390 px „Chakrenreise“ und „Manifestation“ abgeschnitten */
  body.has-kurs-switch .back:not([hidden]) + .brand { display: none; }
  body.has-kurs-switch .back:not([hidden]) ~ .kurs-switch { margin-left: 2px; }
}
@media (min-width: 1024px) {
  body.is-app .kurs-switch { order: 5; flex: 0 0 100%; max-width: none; height: 48px; margin: 18px 0 0 -10px; padding: 0 12px 0 8px; border-radius: 12px; font-size: 15px; }
  body.is-app .kurs-switch img { width: 32px; height: 32px; border-radius: 9px; }
  body.is-app .kurs-switch svg { margin-left: auto; }
  body.is-app .kurs-switch:hover { border-color: rgba(var(--acc-rgb), 0.5); }
  body.is-app.has-kurs-switch .lupe { margin-top: 10px; }
  body.is-app.has-kurs-switch .tabs { top: 214px; }
}
.ks-sheet h2 { text-align: left; margin: 0 0 14px; }
/* Eine Spalte, die nie breiter als das Blatt wird: ohne minmax(0, 1fr) hat die nowrap-Unterzeile das Raster
   auf ihre volle Länge gedehnt und das Blatt ließ sich am Handy seitlich schieben (v133) */
.ks-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ks-sheet { overflow-x: hidden; }
.ks-row { min-width: 0; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: left; }
.ks-row.is-on { border-color: rgba(var(--acc-rgb), 0.5); background: rgba(var(--acc-rgb), 0.08); }
.ks-row img { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--bg); }
.ks-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-title { font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.ks-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-ok { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--sand-ink); }
.ks-ok svg { width: 16px; height: 16px; }
.ks-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e2483d; }
/* Ungelesenes in der Community eines anderen eigenen Kurses: Punkt am Kursbild im Umschalter */
.kurs-switch { position: relative; }
.kurs-switch.has-dot::after { content: ''; position: absolute; top: 4px; left: 26px; width: 9px; height: 9px; border-radius: 50%;
  background: #e2483d; box-shadow: 0 0 0 2px var(--bg); }
@media (min-width: 1024px) { body.is-app .kurs-switch.has-dot::after { top: 6px; left: 34px; } }
/* Community: Kursname über der Überschrift, sobald es mehrere Communities gibt */
.course-head .c-kicker { display: block; margin: 0 0 6px; font-size: 11px; letter-spacing: 0.12em; }
.ks-all { display: block; margin: 16px 0 0; text-align: center; text-decoration: none; }
/* Info-Blatt eines Kurses, den man nicht hat (app.js openKursInfo, v157) */
.ki { display: grid; gap: 14px; }
.ki .kc-cover { margin: 0; }
.ki-txt { display: grid; gap: 6px; }
.ki-sub { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.5; }
.ki-inc { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.ki-price { margin: 0; font-weight: 700; color: var(--sand); }
.ki-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ki-btns .btn { flex: 1 1 140px; text-align: center; text-decoration: none; }
.ki-note { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.hub-lead { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
button.hub-tile.is-locked { font: inherit; color: inherit; text-align: left; padding: 0; background: none; border: 0; width: 100%; cursor: pointer; }

/* Meine Kurse: aktueller Kurs breit oben (Noom), sonst Kacheln im 2er-Raster, ab 1024 px im 3er-Raster.
   Gesperrte Kurse behalten ihr volles Cover, das Schloss ist ein Chip unten rechts (Mindvalley),
   darunter ein Satz Nutzen und der Preis-Hinweis (Grab). Siehe _konzepte/kurse-app/mobbin-referenzen.md */
.hub-sec { margin: 0 0 32px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
@media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; } }
.hub-tile { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--text); text-align: left; text-decoration: none; font: inherit; }
.hub-tile.is-feature { margin: 0 0 22px; }
.hub-cap { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; min-width: 0; }
.hub-cap .bar { margin: 2px 0 4px; }
.hub-line { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-price { font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: var(--sand); }
.kc-cover.is-img .kc-art { background-size: cover; background-position: center; }
.kc-cover .kc-kicker svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.hub-grid .kc-cover .kc-title { font-size: clamp(20px, 14cqi, 34px); overflow-wrap: break-word; hyphens: auto; }
.hub-grid .kc-cover[data-theme-kurs="manifestation"] .kc-title { font-size: clamp(15px, 9cqi, 24px); }
.hub-grid .kc-art[data-art="inner-winner"]::after { font-size: 30cqi; }
.hub-tile.is-feature .kc-title { font-size: clamp(30px, 9cqi, 46px); }
.hub-tile.is-feature .kc-meta { font-size: 14px; max-width: 34ch; }
@media (min-width: 1024px) { .hub-tile.is-feature .kc-cover--wide { aspect-ratio: 21 / 9; } }
.kc-cover.is-current { border-color: rgba(var(--acc-rgb), 0.45); }
.kc-lock { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 8, 22, 0.62); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kc-lock svg { width: 15px; height: 15px; }
.hub-tile.is-locked .kc-meta, .hub-tile.is-locked .kc-title { padding-right: 30px; }
.hub-tile:focus-visible { outline: none; }
.hub-tile:focus-visible .kc-cover { outline: 2px solid var(--sand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .hub-tile .kc-cover { transition: transform .2s, border-color .15s; }
  a.hub-tile:hover .kc-cover, button.hub-tile:hover .kc-cover { transform: translateY(-2px); border-color: rgba(var(--acc-rgb), 0.45); }
}

/* Vorschau eines gesperrten Kurses */
.pv-head { display: grid; gap: 16px; margin: 4px 0 26px; }
.pv-head .kc-title { font-size: clamp(30px, 9cqi, 46px); }
.pv-intro { display: grid; gap: 12px; min-width: 0; }
.pv-facts { margin: 0; font-family: var(--font-headline); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; color: var(--text); }
.pv-facts i { font-style: normal; color: var(--muted); margin: 0 8px; }
.pv-actions { display: flex; gap: 10px; }
.pv-actions .btn { margin: 0; width: auto; padding: 0 22px; height: 48px; border-radius: 24px; display: inline-flex; align-items: center; gap: 8px; }
.pv-actions .btn svg { width: 15px; height: 15px; margin: 0; }
.pv-price { display: block; margin: 0 0 8px; text-align: center; font-family: var(--font-headline); font-weight: 700; font-size: 13px; color: var(--sand); }
.pv-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
.pv-desc p { margin: 0 0 10px; }
.pv-desc ul { margin: 0 0 10px; padding-left: 20px; }
.pv-sec { margin: 0 0 26px; }
.pv-list { list-style: none; margin: 0; padding: 4px 14px 12px; display: grid; gap: 8px; }
.pv-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); }
.pv-ico svg { width: 15px; height: 15px; display: block; color: rgba(var(--acc-rgb), 0.6); }
.pv-d { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.pv-cta { position: sticky; bottom: calc(var(--nav-h) + 8px + var(--safe-bottom)); z-index: 3; margin: 24px -16px 0; padding: 12px 16px 14px;
  background: color-mix(in srgb, var(--bg) 96%, transparent); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pv-cta .btn { display: block; text-align: center; text-decoration: none; }
.pv-cta p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 1023px) { body:has(#player:not([hidden])) .pv-cta { bottom: calc(var(--nav-h) + 84px + var(--safe-bottom)); } }
@media (min-width: 1024px) {
  .pv-cta { bottom: 88px; margin: 24px 0 0; border-radius: 18px; border: 1px solid var(--line); }
  body:not(:has(#player:not([hidden]))) .pv-cta { bottom: 16px; }
  .pv-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
}
.pv-parts .btn { display: block; margin: 0 0 8px; }

/* Lektion eines Teils, der fehlt; Start eines Sessions-Kurses */
.item.is-locked { opacity: 0.7; }
.lock-ico { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
.lock-ico svg { width: 18px; height: 18px; }
.dash-sessions .sd-list .sec-head { margin-bottom: 12px; }
.dash-side .btn-ghost { display: block; text-align: center; text-decoration: none; }

/* ---------- Erledigt und Streaks (Sessions-Kurse mit practice, 10/2026) ----------
   Grundbausteine .kc-streak und .kc-days kommen aus themes.css und tragen den Kurs-Look.
   Hier: Karte auf dem Kurs-Start, Kennzahlen, Meilensteine, Heatmap, Abschluss-Moment, Vorschlag im Player.
   Referenzen: _konzepte/kurse-app/mobbin-referenzen.md, Abschnitt 3 (Duolingo, Calm, Breathwrk, Balance). */
.item.is-prac .check { transition: background .15s, border-color .15s, transform .1s; }
.item.is-prac .check:active { transform: scale(.9); }
.item.is-prac span.check { opacity: .5; }

.sd-streak { margin: 0 0 22px; padding: 18px 18px 16px; }
.sd-streak .kc-st-head { flex-wrap: wrap; row-gap: 2px; }
.sd-streak.is-done .kc-st-note { color: var(--sand); }
.sd-streak.is-open .kc-st-note { color: var(--text); }
.kc-days li.is-future i { opacity: .55; }

/* Drei Kennzahlen in einer Zeile, getrennt durch feine Linien (Breathwrk) */
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.st-stats div { min-width: 0; padding: 0 10px; }
.st-stats div:first-child { padding-left: 0; }
.st-stats div + div { border-left: 1px solid var(--line); }
.st-stats dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.st-stats dd { margin: 4px 0 0; font-family: var(--num-font); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-stats dd small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--muted); }

/* Meilensteine als Etappenleiste 3 · 7 · 14 · 30 · 60 · 100 (Duolingo), darunter das nächste Ziel (Balance) */
.ms-row { margin: 18px 0 0; }
.ms-track { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ms-track::before { content: ''; position: absolute; left: 8.33%; right: 8.33%; top: 7px; height: 2px; border-radius: 1px; background: var(--streak-off); }
.ms-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-track i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--streak-off); }
.ms-track li.is-on i { background: var(--streak-on); border-color: var(--streak-on); }
.ms-track li.is-on span { color: var(--text); font-weight: 600; }
.ms-track li.is-next i { border-color: var(--sand); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.14); }
.ms-next { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Heatmap: 12 Wochen als Spalten, Montag oben, Stufen nach Anzahl Sessions am Tag */
.hm { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.hm-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.hm-head span:first-child { letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--text); }
.hm-months, .hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 264px; }
.hm-months { margin: 0 0 4px; font-size: 10px; color: var(--muted); }
.hm-months span { white-space: nowrap; overflow: visible; }
.hm-grid { grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.hm-grid i { display: block; aspect-ratio: 1; border-radius: 3px; background: rgba(var(--acc-rgb), 0.07); }
/* Eine Session am Tag ist der Normalfall, die erste Stufe muss sich klar vom leeren Kästchen abheben */
.hm-grid i.l1, .hm-legend i.l1 { background: rgba(var(--acc-rgb), 0.4); }
.hm-grid i.l2, .hm-legend i.l2 { background: rgba(var(--acc-rgb), 0.62); }
.hm-grid i.l3, .hm-legend i.l3 { background: rgba(var(--acc-rgb), 0.85); }
.hm-grid i.is-today { outline: 1.5px solid var(--sand); outline-offset: 1px; }
.hm-grid i.is-future { background: none; }
.hm-legend { display: flex; align-items: center; gap: 3px; margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.hm-legend i { width: 10px; height: 10px; border-radius: 2px; background: rgba(var(--acc-rgb), 0.07); }
.hm-legend i:first-of-type { margin-left: 4px; }
.hm-legend i:last-of-type { margin-right: 4px; }

/* Abschluss-Moment nach dem Abhaken: eine große Zahl, Wochenzeile im Kurs-Look, ein Satz zu morgen */
.prac-done { position: fixed; inset: 0; z-index: 42; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--deep, #0c091a) 86%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); }
.prac-done[hidden] { display: none; }
.kc-done { position: relative; width: 100%; max-width: 380px; padding: 26px 20px 20px; text-align: center; border-radius: calc(var(--r-card, 18px) + 4px);
  background: var(--bg-2); border: 1px solid rgba(var(--acc-rgb), 0.35); animation: cel-pop .45s cubic-bezier(.2,1.4,.4,1); }
.kc-done .pd-card { background: none; border: 0; padding: 0; }
.kc-done .kc-st-head { flex-direction: column; align-items: center; gap: 4px; }
.prac-done .kc-done .kc-st-num { font-size: 88px; line-height: 0.95; display: inline-block; }
.kc-done .kc-days { margin: 18px 0 4px; }
.kc-done h2 { font-family: var(--font-headline); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; margin: 18px 0 6px; }
.kc-done p { color: var(--muted); line-height: 1.5; margin: 0 0 18px; }
.kc-done .pd-small { margin: -10px 0 18px; font-size: 12px; letter-spacing: 0.04em; }
.kc-done .btn { margin: 0; }
.kc-st-num.is-bump { animation: pdBump .5s cubic-bezier(.2,1.4,.4,1); }
.kc-days li.is-new i { animation: pdDay .6s cubic-bezier(.2,1.4,.4,1) .2s both; }
.prac-done.is-milestone .kc-st-num { text-shadow: 0 0 28px rgba(var(--acc-rgb), 0.55); }
/* Meilenstein: zwölf kurze Strahlen um die Zahl */
.pd-burst { position: absolute; left: 50%; top: 72px; width: 0; height: 0; pointer-events: none; }
.pd-burst i { position: absolute; left: -2px; top: -9px; width: 4px; height: 18px; border-radius: 2px; background: var(--sand); opacity: 0;
  animation: pdRay .9s ease-out .45s both; }
@keyframes pdRay { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-34px) scaleY(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-92px) scaleY(1); } }
@keyframes pdBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes pdDay { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kc-done, .kc-st-num.is-bump, .kc-days li.is-new i, .item.is-prac .check { animation: none !important; transition: none !important; }
  .pd-burst { display: none; }
}

/* Vorschlag nach 80 % der Session, über dem Mini-Player (und über Video und großem Player) */
.prac-suggest { position: fixed; z-index: 36; left: 12px; right: 12px; bottom: calc(var(--nav-h, 64px) + 12px + var(--safe-bottom)); max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 16px; border-radius: 16px;
  background: color-mix(in srgb, var(--bg-2) 96%, transparent); border: 1px solid rgba(var(--acc-rgb), 0.4); box-shadow: 0 18px 40px -14px rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: inst-up .3s ease-out; }
.prac-suggest[hidden] { display: none; }
.prac-suggest span { flex: 1; min-width: 0; font-family: var(--font-headline); font-weight: 700; font-size: 15px; }
.prac-suggest .btn-small { margin: 0; flex: none; }
.ps-x { flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); }
body:has(#player:not([hidden])) .prac-suggest { bottom: calc(var(--nav-h, 64px) + 86px + var(--safe-bottom)); }
/* Großer Player: der Mini-Player ist darunter weiter sichtbar, deshalb mit :has, sonst gewinnt die Regel darüber
   und der Vorschlag liegt mitten auf Play und Erledigt-Haken */
body:has(#video-wrap:not([hidden])) .prac-suggest, body.is-pfull:has(#pfull) .prac-suggest { bottom: calc(16px + var(--safe-bottom)); }
@media (min-width: 1024px) {
  .prac-suggest, body:has(#player:not([hidden])) .prac-suggest { left: var(--side, 0px); bottom: 104px; }
}
@media (prefers-reduced-motion: reduce) { .prac-suggest { animation: none; } }
.pf-acts.is-single { grid-template-columns: 1fr; }
.pf-act.pf-prac.is-done { color: var(--sand); border-color: rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.08); }

/* ---------- Feinschliff nach den Mobbin-Referenzen (10/2026) ----------
   _konzepte/kurse-app/mobbin-referenzen.md, Abschnitte 1 bis 5 und 8. Kurs-Motive als reines CSS (themes.css .kc-art)
   auch in Listen, im Bündel, auf der Kursseite und im großen Player. */

/* Kurs-Motiv als Vorschaubild: in fester Größe gezeichnet, per transform verkleinert (--kz), damit Mond, Chakren
   und Sterne ihre Proportionen behalten. Kein zoom: Prozente unter zoom rechnen die Browser
   verschieden, in Chrome war das Motiv 1/--kz zu groß und im Vorschaubild nur die leere linke obere Ecke zu sehen. */
.kc-thumb { position: relative; isolation: isolate; overflow: hidden; display: block; --kz: 0.32; }
.kc-thumb > .kc-art { position: absolute; left: 0; top: 0; inset: auto; width: calc(100% / var(--kz)); height: calc(100% / var(--kz)); transform: scale(var(--kz)); transform-origin: 0 0; z-index: -1; }
.item .cover.kc-thumb { border: 1px solid var(--line); }

/* Bündel: Mosaik aus den Motiven der enthaltenen Kurse, unten dunkel auslaufend für den Titel */
.kc-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; background: #07050f; }
.kc-mosaic::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,22,0.05) 15%, rgba(10,8,22,0.55) 52%, rgba(10,8,22,0.96) 92%); }
.kc-mini { --kz: 0.62; height: 100%; }
.kc-cover.is-bundle { border-color: rgba(var(--acc-rgb), 0.3); }

/* Meine Kurse: Titel nie mitten im Wort trennen */
.hub-grid .kc-cover .kc-title { hyphens: manual; overflow-wrap: normal; }
.hub-grid .kc-cover[data-theme-kurs="manifestation"] .kc-title { font-size: clamp(13px, 8cqi, 22px); letter-spacing: 0.02em; }
.hub-tile .kc-cover { transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .15s; }
.hub-tile:active .kc-cover { transform: scale(.98); }
.hub-price { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .hub-tile .kc-cover { transition: none; } .hub-tile:active .kc-cover { transform: none; } }

/* Kursseite: die nächste Session als Hero im Kurs-Motiv (Calm, Ten Percent Happier). Eine Entscheidung, ein Knopf. */
.next-card.is-themed .nc-art { isolation: isolate; height: 196px; background: var(--bg-2); }
.next-card.is-themed .nc-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 30%, transparent 62%, rgba(0,0,0,0.35)); }
.next-card.is-themed .nc-art .nc-kicker { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.next-card { transition: transform .15s ease-out; }
.next-card:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .next-card, .next-card:active { transition: none; transform: none; } }
@media (min-width: 1024px) {
  .next-card.is-themed .nc-art { position: absolute; inset: 0; height: auto; }
  .next-card.is-themed .nc-art .kc-art { left: auto; width: 48%; }
  .next-card.is-themed .nc-art .kc-art::before, .next-card.is-themed .nc-art .kc-art::after { zoom: 1.2; }
  .next-card.is-themed .nc-art::after { background: linear-gradient(90deg, var(--bg-2) 46%, transparent 70%); }
}

/* Chakrenreise: Punkt in der Farbe der Woche an jedem Modul. Nur die aktuelle Woche leuchtet. */
i.mod-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--chakra, var(--sand)); }
i.mod-dot.is-past { background: var(--chakra, var(--sand)); opacity: 0.6; }
i.mod-dot.is-now { background: var(--chakra, var(--sand)); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.18), 0 0 14px var(--chakra, var(--sand)); }

/* Großer Player im Kurs-Look: Motiv statt Ouroboros, Kursfarbe als Licht hinter Play (Headspace, Oura) */
.pf-cover { display: none; }
.pfull[data-theme-kurs] .pf-art { isolation: isolate; background: var(--bg-2); border-radius: calc(var(--r-card) + 8px); }
.pfull[data-theme-kurs] .pf-cover { display: block; z-index: 0; transition: transform 8s ease-in-out; }
.pfull[data-theme-kurs] .pf-art > .hb-ripple, .pfull[data-theme-kurs] .pf-art > .hb-glow, .pfull[data-theme-kurs] .pf-art > .hb-orbit { display: none; }
.pfull[data-theme-kurs]::before { background: radial-gradient(closest-side, rgba(var(--acc-rgb), 0.16), rgba(var(--acc-2-rgb), 0.06) 60%, transparent); }
.pfull.is-playing[data-theme-kurs] .pf-cover { animation: pfBreathe 9s ease-in-out infinite; }
@keyframes pfBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.pfull .ctl.play { box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0.07), 0 18px 46px -12px rgba(var(--acc-rgb), 0.7); transition: transform .12s; }
.pfull .ctl.play:active { transform: scale(.94); }
/* Fünf feste Plätze, Play bleibt in der Mitte, auch wenn links oder rechts nichts steht */
.pfull:not(:has(.p-sos:not([hidden]))) .pf-ctls { display: grid; grid-template-columns: 52px 56px 80px 56px 52px; justify-content: space-between; align-items: center; }
.pf-ctls > #pf-rate, .pf-ctls > #pf-done { grid-column: 1; grid-row: 1; }
.pf-ctls > [data-pf="back"] { grid-column: 2; grid-row: 1; }
.pf-ctls > #pf-play { grid-column: 3; grid-row: 1; }
.pf-ctls > [data-pf="fwd"] { grid-column: 4; grid-row: 1; }
.pf-ctls > #pf-talk { grid-column: 5; grid-row: 1; }
/* Erledigt-Haken neben Play (Moonly): leerer Kreis, nach dem Tippen gefüllt */
.pf-done { width: 52px; height: 52px; border-radius: 50%; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.pf-done svg { width: 22px; height: 22px; }
.pf-done.is-done { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); animation: pdDay .45s cubic-bezier(.2,1.4,.4,1); }
.pf-big { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pfull.is-playing[data-theme-kurs] .pf-cover, .pf-done.is-done { animation: none; }
  .pfull .ctl.play { transition: none; }
}

/* Abschluss-Moment: oben das Kurs-Motiv als Fläche mit der Zahl (Headspace), Kennzahlen in einer Glaskachel
   (Breathwrk), eine Frage mit drei Kacheln (stoic.) */
.kc-done { padding-top: 0; overflow: hidden; max-height: calc(100dvh - 32px); overflow-y: auto; }
.pd-top { position: relative; isolation: isolate; margin: 0 -20px; padding: 34px 20px 6px; }
.pd-top > .kc-art { z-index: -2; -webkit-mask: linear-gradient(180deg, #000 30%, transparent 96%); mask: linear-gradient(180deg, #000 30%, transparent 96%); opacity: 0.85; }
.pd-top::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 52%, color-mix(in srgb, var(--bg-2) 70%, transparent), transparent 75%); }
.pd-top .pd-burst { top: 82px; }
.kc-done .pd-card { margin-top: 2px; }
.pd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 18px; padding: 10px 0; border-radius: 14px;
  background: rgba(var(--acc-rgb), 0.06); border: 1px solid var(--line); }
.pd-stats div + div { border-left: 1px solid var(--line); }
.pd-stats dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pd-stats dd { margin: 2px 0 0; font-family: var(--num-font); font-weight: 700; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.pd-feel { margin: 0 0 18px; }
.kc-done .pd-feel-q { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.pd-feel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-feel-b { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 78px; padding: 12px 4px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--muted); font-size: 12.5px; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, transform .1s; }
.pd-feel-b svg { width: 24px; height: 24px; color: var(--sand); }
.pd-feel-b:active { transform: scale(.95); }
.pd-feel-b.is-on { border-color: var(--sand); background: rgba(var(--acc-rgb), 0.12); color: var(--text); }
.kc-done .btn:focus-visible, .pd-feel-b:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pd-feel-b { transition: none; } .pd-feel-b:active { transform: none; } }

/* Vorschau: ein Knopf zum Reinhören mit Titel und Dauer der Kostprobe (Mindvalley-Kurskopf) */
.pv-actions .pv-try { width: 100%; height: auto; min-height: 56px; padding: 8px 22px; border-radius: 28px; justify-content: flex-start; text-align: left; }
.pv-try span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pv-try small { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-try svg { flex: none; }

/* Community am Handy: drei Schnellknöpfe passen in eine Zeile, Filter laufen sichtbar aus */
@media (max-width: 479px) {
  .c-quicks { padding-left: 0; }
  .c-quick { flex: 1 1 0; justify-content: center; padding: 0 8px; min-width: 0; }
  .c-filters { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .c-filters::after { content: ''; flex: none; width: 24px; }
}
/* Scrubber im großen Player selbst gezeichnet: der native Regler färbt die Restspur bei dunklen Kursfarben weiß */
.pf-seek .seek { -webkit-appearance: none; appearance: none; height: 22px; background: none; cursor: pointer; }
.pf-seek .seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sand) var(--v, 0%), rgba(255,255,255,0.16) var(--v, 0%)); }
.pf-seek .seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sand) var(--v, 0%), rgba(255,255,255,0.16) var(--v, 0%)); }
.pf-seek .seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--sand); border: 0; box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.18); transition: transform .12s; }
.pf-seek .seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--sand); border: 0; }
.pf-seek .seek:active::-webkit-slider-thumb { transform: scale(1.25); }
.pf-seek .seek:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 6px; }
/* Kurs-Umschalter und Auswahl-Blatt: Kurs-Motiv in der Größe des Bildes */
.kurs-switch .ks-img { flex: none; width: 28px; height: 28px; border-radius: 50%; --kz: 0.16; }
.ks-row .ks-img { flex: none; width: 48px; height: 48px; border-radius: 12px; --kz: 0.26; }
@media (min-width: 1024px) { body.is-app .kurs-switch .ks-img { width: 32px; height: 32px; border-radius: 9px; --kz: 0.18; } }
/* Im Kopf ist das Bild nur 28 px groß: dort ein leuchtender Punkt in der Kursfarbe statt des ganzen Motivs */
.kurs-switch .ks-img { background: radial-gradient(circle at 50% 45%, var(--sand) 0 22%, rgba(var(--acc-rgb), 0.35) 42%, var(--bg-2) 72%); box-shadow: inset 0 0 0 1px var(--line); }
.kurs-switch .ks-img > .kc-art { display: none; }

/* ---------- Lektionsseiten der Sessions-Kurse (lektionsseiten.md) ----------
   Kursübersicht: Session-Karten (.ss-card, Aufbau wie .st-card) und Kacheln (.ss-tile, wie .tile).
   Lektion: .sl mit Bild oder Video oben (.sl-hero), Fassungen als Chips (.sl-vars), „Gemacht“ (.sl-done),
   am Handy Reiter (.sl-tabs) für Text, Kommentare, Anhänge. Ab 1200 px zwei Spalten wie die Ausbildung. */
.ss-body { padding: 0 0 18px; display: flex; flex-direction: column; gap: 14px; }
.ss-body > .sec-title.ss-head { margin: 6px 2px -4px; }
/* Spalten nach Platz, nicht nach Bildschirm: Handy 1 Karte / 2 Kacheln, Desktop-Spalte 2 / 3 */
.ss-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ss-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.ss-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-pic.kc-thumb { --kz: 0.5; background: var(--bg-2); }
.ss-pic.kc-thumb.is-big { --kz: 0.9; }
.ss-pic.is-cover { background: var(--bg-2) center / cover no-repeat; }
.ss-pic-t { position: absolute; left: 10px; right: 10px; bottom: 8px; font-family: var(--font-headline); font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--text);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-thumb.is-big .ss-pic-t { font-size: 20px; left: 18px; bottom: 16px; }
.ss-card { display: flex; flex-direction: column; border-radius: var(--r-card, 18px); overflow: hidden; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.ss-card-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.ss-card-img::after, .ss-tile-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35)); pointer-events: none; }
.ss-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ss-card-title { margin: 0 2px; font-family: var(--font-headline); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.25; }
.ss-card-meta { margin: -4px 2px 0; color: var(--muted); font-size: 0.82rem; }
.ss-vars { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-var { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 12px; text-decoration: none; color: var(--text);
  background: rgba(var(--acc-rgb), 0.06); border: 1px solid rgba(var(--acc-rgb), 0.2); font-size: 0.88rem; line-height: 1.2; max-width: 100%; }
.ss-var b { font-weight: 600; }
.ss-var small { color: var(--muted); font-size: 0.76rem; }
.ss-var svg { width: 14px; height: 14px; color: var(--sand); flex: none; }
.ss-var.is-today { border-color: rgba(var(--acc-rgb), 0.55); background: rgba(var(--acc-rgb), 0.14); }
.ss-var.is-off { opacity: 0.5; }
.ss-badge { position: absolute; z-index: 1; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px;
  background: var(--sand); color: var(--sand-ink); font-size: 0.72rem; font-weight: 600; }
.ss-badge svg { width: 12px; height: 12px; }
.ss-badge.is-ico { padding: 0; width: 26px; height: 26px; justify-content: center; }
.ss-lock { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.45); color: #fff; }
.ss-lock svg { width: 26px; height: 26px; }
.ss-tile { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; border-radius: calc(var(--r-card, 18px) - 4px); overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.ss-tile-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.ss-tile-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.ss-tile-kick { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sand); }
.ss-tile-title { font-family: var(--font-headline); font-weight: 700; font-size: 0.95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ss-tile-state { font-size: 0.75rem; color: var(--muted); }
.ss-tile.is-today .ss-tile-state, .ss-tile.is-playing .ss-tile-state { color: var(--sand); }
.ss-tile.is-playing { border-color: var(--sand); }
.ss-tile.is-pending { opacity: 0.55; }
.ss-tile.is-off { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .ss-card, .ss-tile { transition: border-color .15s, transform .2s; }
  .ss-card:hover, a.ss-tile:hover { border-color: rgba(var(--acc-rgb), 0.45); }
  a.ss-tile:hover { transform: translateY(-2px); }
  .ss-var { transition: background .15s, border-color .15s; }
  .ss-var:not(.is-off):hover { background: rgba(var(--acc-rgb), 0.14); border-color: rgba(var(--acc-rgb), 0.45); }
}
details.module { scroll-margin-top: calc(var(--top-h, 0px) + var(--safe-top, 0px) + 8px); }

/* „Als Nächstes“ mit Lektionsbild: Karte öffnet die Lektion, der runde Knopf spielt */
div.next-card { cursor: pointer; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Kajabi-Cover mit eingebrannter Schrift: ganzes Bild, darunter dieselbe Datei abgedunkelt als Füllung, kein Titel darüber */
.kc-cover.has-text .kc-art { background-size: contain, cover, cover; background-position: center; background-repeat: no-repeat; }
.hub-sub { color: var(--muted); }
.next-card.has-thumb .nc-art .nc-thumb { position: absolute; inset: 0; right: auto; top: 0; width: 100%; height: 100%; object-fit: cover; }
.nc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%); }
.next-card .nc-art .nc-kicker { z-index: 1; }
button.next-play { display: grid; place-items: center; background: var(--sand); color: var(--sand-ink); }
button.nc-cta { border: 0; cursor: pointer; }
@media (min-width: 1024px) {
  .nc-shade { background: linear-gradient(90deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.05) 100%); }
  /* Desktop: runder Play unten rechts statt mitten im Bild, er ersetzt dort den Knopf „Abspielen“ */
  /* .nc-body ist hier 64 % breit und Bezugsrahmen: 56,25 % davon sind die übrigen 36 % der Karte */
  div.next-card button.next-play { position: absolute; right: calc(28px - 56.25%); bottom: 28px; z-index: 2; width: 64px; height: 64px; }
  div.next-card button.nc-cta { display: none; }
  div.next-card .nc-foot:not(:has(.bar)) { display: none; }
  div.next-card .nc-foot { padding-right: 90px; }
  .next-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Lektion */
.sl { display: flex; flex-direction: column; }
.sl-crumb { align-self: flex-start; margin: 0 0 10px; }
.sl-media { position: relative; }
.sl-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--bg-2); isolation: isolate; }
.sl-hero .ss-pic { z-index: -2; }
.sl-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.5) 100%); pointer-events: none; }
.sl-hero .hb-ripple, .sl-hero .hb-glow { z-index: -1; }
.sl-hero .hb-glow { width: 300px; height: 300px; opacity: 0; transition: opacity .4s; }
.sl-hero.is-playing .hb-glow { opacity: 1; }
/* Play unten rechts, damit der eingebrannte Titel im Thumbnail frei bleibt (wie „Zuletzt gehört“ auf dem Start).
   Wellen und Leuchten gehen vom Knopf aus. */
.sl-art .art-play { inset: auto 16px 16px auto; margin: 0; width: 64px; height: 64px; background-size: 22px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.7), 0 0 0 6px rgba(var(--acc-rgb), 0.18); }
.sl-art .hb-ripple { right: -67px; bottom: -67px; }
.sl-art .hb-glow { right: -102px; bottom: -102px; }
@media (max-width: 1023px) {
  .sl-art .art-play { inset: auto 12px 12px auto; width: 56px; height: 56px; background-size: 20px; }
  .sl-art .hb-ripple { right: -75px; bottom: -75px; }
  .sl-art .hb-glow { right: -110px; bottom: -110px; }
}
.sl-video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; object-fit: contain; }
.sl-head { margin: 14px 0 0; }
.sl-head .lesson-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.sl-head .lesson-meta { margin: 0; }
.sl-vars { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.sl-var { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.sl-var small { font-size: 0.75em; opacity: 0.75; }
.sl-var svg { width: 12px; height: 12px; }
.sl-var.is-today:not(.is-on) { border-color: rgba(var(--acc-rgb), 0.55); }
.sl-var.is-off { opacity: 0.45; }
.sl-done { margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sl-done .done-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.sl-streak { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.sl-streak b { color: var(--sand); font-family: var(--num-font, var(--font-headline)); font-size: 1.05rem; }
.sl-tabs { position: sticky; top: calc(var(--top-h, 0px) + var(--safe-top, 0px)); z-index: 4; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 20px -16px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.sl-tab { padding: 14px 6px 12px; font-size: 0.9rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-tab.is-on { color: var(--text); border-bottom-color: var(--sand); font-weight: 600; }
.sl-tab:focus-visible { outline: 2px solid var(--sand); outline-offset: -4px; }
.sl-panel { margin: 18px 0 0; }
.sl-text .lesson-text { margin-top: 0; }
.sl .comments { margin-top: 18px; }
.sl-navs { margin-top: 24px; }
.sl-nav { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px 10px 12px; }
.sl-nav .sl-mini { width: 100%; border-radius: 10px; }
.sl-nav .sl-mini .ss-pic.kc-thumb { --kz: 0.3; }
.sl-nav-t { min-width: 0; padding: 0 4px; }
.sl-mini { position: relative; flex: none; width: 56px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--bg-2); display: block; }
.sl-mini .ss-pic.kc-thumb { --kz: 0.16; }
.sl-mini i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,0.45); color: var(--sand); }
.sl-mini i svg { width: 14px; height: 14px; }
.sl-modnav .mod-l { gap: 10px; }
.sl-modnav .mod-t { flex: 1; min-width: 0; }
@media (max-width: 1199px) {
  .sl.has-tabs .sl-panel { display: none; }
  .sl.has-tabs .sl-panel > .sec-title { display: none; }
  .sl.has-tabs[data-tab="text"] .sl-panel[data-panel="text"],
  .sl.has-tabs[data-tab="comments"] .sl-panel[data-panel="comments"],
  .sl.has-tabs[data-tab="files"] .sl-panel[data-panel="files"] { display: block; }
}
@media (max-width: 380px) { .ss-var { padding: 6px 10px; } }
@media (min-width: 1024px) {
  .sl-hero { border-radius: 24px; }
  .sl-video { border-radius: 24px; }
  .sl-tabs { margin: 20px 0 0; }
  .sl-done { max-width: 420px; }
  .sl-nav { flex-direction: row; align-items: center; padding: 12px; }
  .sl-nav.is-next { flex-direction: row-reverse; }
  .sl-nav .sl-mini { width: 128px; }
}
@media (min-width: 1200px) {
  .sl-tabs { display: none; }
  .sl-head { margin: 0; }
  .sl-head .lesson-title { font-size: 44px; }
  .sl-vars { margin-top: 16px; }
  .sl .lesson-side .comments { margin: 0; }
}

/* ---------- Mallorca-Retreat (Karte auf Start und Community) ---------- */
.retreat-card { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; margin: 0 0 14px; padding: 18px 16px; border-radius: 16px; text-decoration: none; color: #fff; border: 1px solid rgba(233,199,154,0.45);
  background: linear-gradient(90deg, rgba(20,16,42,0.92) 0%, rgba(20,16,42,0.7) 55%, rgba(20,16,42,0.25) 100%), url('/images/retreat-mallorca/steg-abend.webp') center 60% / cover no-repeat; }
.retreat-card:hover { border-color: rgba(233,199,154,0.8); }
.rc-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sand, #E9C79A); color: #1a1233; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(233,199,154,0.18); }
.rc-ico svg { width: 26px; height: 26px; }
.rc-body { display: block; min-width: 0; }
.rc-kicker { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #E9C79A; }
.rc-title { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 1.1rem; margin-top: 2px; }
.rc-text { display: block; font-size: 0.85rem; line-height: 1.45; color: rgba(255,255,255,0.85); margin-top: 2px; }
.rc-cta { display: inline-block; margin-top: 6px; font-weight: 600; font-size: 0.85rem; color: #E9C79A; }

/* ---------- QR-Scanner (Workbook-Codes) ---------- */
.scan-btn svg { width: 21px; height: 21px; }
.scan-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.scan-frame { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 6px auto 12px; border-radius: 18px; overflow: hidden; background: #000; }
.scan-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-corners { position: absolute; inset: 18%; border: 2px solid var(--sand); border-radius: 14px; box-shadow: 0 0 0 999px rgba(12, 9, 26, 0.35); pointer-events: none; }
.scan-msg { text-align: center; color: var(--muted); font-size: 0.92rem; line-height: 1.45; margin: 0 16px 6px; min-height: 2.6em; }
.scan-hint .scan-ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; color: var(--sand); }
.scan-hint-or { color: var(--muted); font-size: 0.88rem; margin-top: 6px; }
/* ---------- Community-Räume (community-raeume.md, Kap. 4) ----------
   Raumleiste als Segmente (Life Reset), Raum-Label als farbige Kontextzeile an der Karte, gesperrte Räume
   begehrenswert mit Schloss statt ausgegraut (Mindvalley), Teaser im Querformat Motiv links, Nutzen rechts (Grab). */
.c-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-lupe { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text);
  border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.04); }
.c-lupe svg { width: 18px; height: 18px; }
.c-lupe.is-on { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.c-rooms { display: flex; gap: 8px; overflow-x: auto; margin: -4px -16px 16px; padding: 2px 16px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.c-rooms::-webkit-scrollbar { display: none; }
.c-rooms::after { content: ''; flex: none; width: 20px; }
.c-rchip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.04); color: var(--text); font-size: 14px; font-weight: 500; }
.c-rchip.is-on { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.c-rchip.is-on .c-rdot { box-shadow: 0 0 0 2px rgba(20, 16, 42, 0.35); }
.c-rchip.is-locked { color: var(--muted); }
.c-rchip.is-locked.is-on { color: var(--sand-ink); }
.c-rchip svg { width: 12px; height: 12px; flex: none; }
.c-rdot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--acc-rgb)); }
.c-rdot.is-std { background: #E9C79A; }
.c-rdot.is-open { background: linear-gradient(135deg, #b79cff, #E9C79A); }
.c-rdot.is-all { background: conic-gradient(#E9C79A 0 25%, #b79cff 0 50%, #d4ff3a 0 75%, #8e9bd8 0); }
.c-rdot[data-theme-kurs="chakrenreise"] { background: conic-gradient(#e8524a, #f08a3a, #f2c94c, #5dbb7a, #4fa6dc, #767ce2, #a86ddb, #e8524a); }
.c-rn { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #f5a97f; color: #1a1330; font-size: 11px; font-weight: 700; }
.c-rtag { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px;
  border: 1px solid currentColor; opacity: 0.7; font-weight: 500; }
.c-room { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 8px; border-radius: 99px;
  border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-search { position: relative; margin: -6px 0 16px; }
.c-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: 22px; border: 1px solid var(--line);
  background: rgba(var(--acc-rgb), 0.05); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.c-search input:focus { border-color: rgba(var(--acc-rgb), 0.55); }
.c-search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); display: grid; }
.c-search-ico svg { width: 17px; height: 17px; }

/* Raum-Kopf und Teaser tragen das Theme ihres Kurses (data-theme-kurs am Element), nicht das der App.
   is-std: Ausbildung und Host im Standard, auch wenn die App gerade ein anderes Theme trägt. */
.c-roomhead.is-std, .c-teaser.is-std { --acc-rgb: 233, 199, 154; --acc-2-rgb: 183, 156, 255; --sand: #E9C79A; --text: #f1ecf8; --muted: #b9b0cc;
  --font-headline: 'Manrope', system-ui, sans-serif; --hl-case: none; --hl-track: -0.02em; --bg-2: #1d1738; --line: rgba(233, 199, 154, 0.14); }
.c-roomhead.is-open, .c-teaser.is-open { --acc-rgb: 183, 156, 255; --acc-2-rgb: 233, 199, 154; --sand: #cbb8ff; }
.c-roomhead, .c-teaser { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(var(--acc-rgb), 0.24); color: var(--text);
  background: radial-gradient(140% 110% at 0% 0%, rgba(var(--acc-rgb), 0.12), transparent 62%), rgba(var(--acc-rgb), 0.03); }
.c-roomhead::before, .c-teaser::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, rgb(var(--acc-rgb)), rgba(var(--acc-rgb), 0)); }
.c-roomhead { padding: 18px 18px 16px; margin: 0 0 14px; }
.c-rh-kicker { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); font-weight: 500; }
.c-rh-title { font-family: var(--font-headline); font-weight: 700; font-size: 22px; line-height: 1.15; margin: 6px 0 0;
  text-transform: var(--hl-case); letter-spacing: var(--hl-track); }
.c-rh-about { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.c-rh-stats { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.c-teaser { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: stretch; }
.c-tz-cover { position: relative; min-height: 196px; }
.c-tz-cover .kc-cover { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; padding: 12px; }
.c-tz-cover .kc-title, .c-tz-cover .kc-kicker, .c-tz-cover .kc-meta, .c-tz-cover .kc-lock { display: none; }
.c-tz-lock { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 8, 22, 0.72); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-tz-lock svg { width: 14px; height: 14px; }
.c-tz-body { padding: 16px 16px 14px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.c-tz-body .c-rh-title { font-size: 20px; }
.c-tz-btn { margin-top: 14px; }
.c-tz-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.c-tz-hide { margin-top: 8px; font-size: 12px; color: var(--muted); padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; }
.c-teaser.is-inline .c-tz-cover { min-height: 168px; }

/* Raumwahl beim Schreiben */
.c-roompick { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--acc-rgb), 0.03); }
.c-rp-label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.c-rp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.c-rp-who { margin: 0; font-size: 12.5px; color: var(--muted); }
.c-roompick.is-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-roompick.is-fixed .c-rp-who { flex-basis: 100%; }
.c-rp-in { font-size: 13px; color: var(--muted); }
.c-roompick.is-fixed b { font-weight: 600; }
#c-roompick:empty { display: none; }
.c-thread-room { display: block; padding: 0; margin: 0 0 12px; text-align: left; }
.notif-room { display: block; margin-bottom: 4px; }
.c-helpcard .c-room { align-self: flex-start; }

/* Seitenspalte am Desktop: Räume mit ihren Zahlen */
.c-rrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin: 0 -10px; width: calc(100% + 20px);
  border-radius: 10px; text-align: left; font-size: 14.5px; color: var(--text); }
.c-rrow + .c-rrow { margin-top: 2px; }
.c-rrow svg { width: 12px; height: 12px; flex: none; color: var(--muted); }
.c-rrow.is-locked { color: var(--muted); }
.c-rrow.is-on { background: rgba(var(--acc-rgb), 0.1); }
.c-rrow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rrow-name small { font-size: 11px; color: var(--muted); margin-left: 4px; }
.c-rside-sub { margin: 14px 0 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .c-rchip:not(.is-on):hover, .c-rrow:not(.is-on):hover { background: rgba(var(--acc-rgb), 0.09); }
  .c-tz-hide:hover { color: var(--text); }
}
@media (min-width: 1024px) {
  .c-rooms { margin: 0 0 18px; padding: 2px 0; }
  .c-roomhead { padding: 22px 24px 20px; }
  .c-rh-title { font-size: 26px; }
  .c-tz-cover { min-height: 240px; }
  .c-tz-body { padding: 22px 24px; }
  .c-tz-body .c-rh-title { font-size: 26px; }
}
@media (max-width: 380px) { .c-teaser { grid-template-columns: 36% minmax(0, 1fr); } .c-tz-body { padding: 14px 12px 12px; } }

/* ---------- Ausbildung im Look „1a“ (app.js d1*, Schalter design in api/app-courses.json) ----------
   Quelle: _konzepte/kurse-app/designs-neu/ausbildung/Ausbildung 1a.dc.html. Fließtext 17 px, nichts unter 14 px,
   hellere Grautöne, nur ein sandfarbener Hauptknopf pro Seite (.d1-main), Status in Worten, Listen statt Bilderraster.
   Alles hängt an .d1 (Seiten) bzw. body.is-d1a (Leiste und Seitenleiste); ohne Schalter greift hier nichts. */
.d1 { --d1-body: #e2dcec; --d1-mute: #c4bcd6; --d1-card: rgba(203,184,242,0.05); --d1-line: rgba(203,184,242,0.14); --d1-line2: rgba(203,184,242,0.12);
  --d1-hero: linear-gradient(135deg, #2a2152, #1d1738 75%); color: var(--text); font-size: 17px; line-height: 1.5; padding-bottom: 8px; }
.d1 h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: 0; }
.d1 h2 { margin: 0; }
.d1 :is(.d1-card, .d1-st, .d1-path, .d1-back, .d1-link) { color: inherit; text-decoration: none; }
.d1-kick { font-family: var(--font-headline); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d1-mute); line-height: 1.3; }
.d1-kick.is-acc { color: var(--sand); }
.d1-lead, .d1-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--d1-body); max-width: 620px; }
.d1-sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--d1-mute); }
.d1-cols { display: flex; flex-direction: column; gap: 18px; }
.d1-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.d1-only-2 { display: none; }
.d1-head { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.d1-prog { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.d1-prog span { font-size: 14px; color: var(--d1-mute); }
.d1 .bar { height: 6px; border-radius: 3px; background: rgba(203,184,242,0.18); margin: 0; max-width: 420px; }
/* Handy wie im Entwurf nur „1 von 61 Lektionen“, ab Tablet Balken und Zahl in einer Zeile */
.d1-prog .bar { display: none; }
.d1 .bar span { border-radius: 3px; }
.d1-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--d1-card); border: 1px solid var(--d1-line); }
.d1-card.is-dashed { background: none; border: 1px dashed rgba(203,184,242,0.24); }
.d1-card b, .d1-t { font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.3; }

/* Knöpfe: sandfarben nur .d1-main, alles andere ruhig */
.d1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px; border-radius: 30px;
  font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--text); border: 1px solid rgba(203,184,242,0.3); background: none; cursor: pointer; text-align: center; }
.d1-btn svg { width: 16px; height: 16px; flex: none; }
.d1-main { background: var(--sand); color: var(--sand-ink); border-color: var(--sand); }
.d1-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-family: var(--font-headline); font-weight: 600; font-size: 15px; color: var(--sand); background: none; border: 0; cursor: pointer; text-align: left; }
.d1 .d1-link, .d1-comm .sec-head a { color: var(--sand); }
.d1 .btn:not(.d1-main) { background: none; border: 1px solid rgba(203,184,242,0.3); color: var(--text); }
.d1 .chip { white-space: nowrap; font-size: 15px; min-height: 40px; padding: 8px 14px; border-color: rgba(203,184,242,0.2); color: var(--d1-body); }
.d1 .chip.is-on { background: rgba(233,199,154,0.14); border-color: rgba(233,199,154,0.5); color: var(--sand); }
.d1 .presence { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--d1-body); margin-top: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(233,199,154,0.28); background: rgba(233,199,154,0.06); }
.d1 .presence[hidden] { display: none; }

/* Zeilen mit Symbol */
.d1-row { flex-direction: row; align-items: center; gap: 14px; }
.d1-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(233,199,154,0.1); color: var(--sand); }
.d1-ico svg { width: 20px; height: 20px; }
.d1-ico.is-hot { background: rgba(245,169,127,0.16); color: #f5a97f; }
.d1-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.d1-row-txt > span:not(.d1-kick) { font-size: 15px; line-height: 1.45; color: var(--d1-mute); }
.d1-row-txt .et { color: inherit; }
.d1-chev { flex: none; color: var(--d1-mute); display: grid; }
.d1-chev svg { width: 18px; height: 18px; }
.d1-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--bg-2) center/cover; }
.d1-rows { display: flex; flex-direction: column; gap: 10px; }
.d1-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; }

/* Start */
.d1-hello { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; }
.d1-hello .d1-lead { font-size: 16px; color: var(--d1-mute); }
.d1-hero { border-radius: 22px; overflow: hidden; background: var(--d1-hero); border: 1px solid rgba(203,184,242,0.16); }
.d1-hero-in { display: flex; flex-direction: column; }
.d1-hero-img { height: 120px; background: var(--bg-2) center/cover; }
.d1-hero-txt { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.d1-hero h2 { font-family: var(--font-headline); font-weight: 700; font-size: 22px; line-height: 1.2; text-wrap: pretty; overflow-wrap: anywhere; }
.d1-hero .d1-btn { margin-top: 8px; width: 100%; }
.d1-hero.is-done .d1-hero-txt { padding: 22px 18px; }
.d1-path { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; border-top: 1px solid var(--d1-line); }
.d1-path-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--d1-mute); }
.d1-path-head b { font-family: var(--font-headline); font-weight: 700; font-size: 15px; color: var(--text); }
.d1-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.d1-bars i { height: 6px; border-radius: 3px; background: rgba(203,184,242,0.18); overflow: hidden; }
.d1-bars b { display: block; height: 100%; background: var(--sand); }
.d1-termin { gap: 4px; }
.d1-when { font-size: 16px; color: var(--d1-body); }
.d1-cd { font-size: 15px; color: var(--d1-mute); }
.d1-more { margin-top: 6px; font-family: var(--font-headline); font-weight: 600; font-size: 15px; color: var(--sand); }
.d1-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.d1-area { gap: 12px; }
.d1-area-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.d1-area-head b { font-size: 18px; }
.d1-area-head span { font-size: 15px; color: var(--d1-mute); }
.d1-goal { color: var(--d1-mute); font-size: 15px; }
.d1-goal p { margin: 4px 0 10px; font-size: 15px; line-height: 1.5; color: var(--d1-mute); }
.d1 .goal-opts .chip { font-size: 16px; }
.d1-remind { position: relative; padding-right: 44px; }
.d1-remind p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--d1-mute); }
.d1-comm { gap: 10px; }
.d1-comm:empty { display: none; }
.d1-comm .sec-head { padding: 0; margin: 0 0 2px; }
.d1-comm .sec-head h2 { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d1-mute); }
.d1-comm .sec-head a { font-size: 15px; font-weight: 600; font-family: var(--font-headline); }
.d1-comm .start-posts { display: flex; flex-direction: column; }
.d1-comm .sp-post { background: none; border: 0; border-bottom: 1px solid rgba(203,184,242,0.1); border-radius: 0; padding: 10px 18px 10px 0; display: flex; flex-direction: column; gap: 3px; }
.d1-comm .sp-post:last-child { border-bottom: 0; }
.d1-comm .sp-post.is-new::after { right: 2px; }
.d1-comm .sp-title { font-family: var(--font-headline); font-weight: 600; font-size: 16px; }
.d1-comm .sp-meta, .d1-comm .c-new, .d1-comm .c-none { font-size: 14px; color: var(--d1-mute); }
.d1-comm .c-open { font-size: 15px; }
.d1 .inst-card, .d1 .fv { margin: 0; }
.d1 .inst-card p { font-size: 15px; }

/* Praxis, Lernen, Theorie: Liste */
.d1-sts { display: flex; flex-direction: column; }
.d1-st { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid rgba(203,184,242,0.1); }
.d1-st:last-child { border-bottom: 0; }
.d1-st-pic { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid rgba(203,184,242,0.3); }
.d1-st-img { display: none; position: absolute; inset: 0; background: var(--bg-2) center/cover; }
.d1-st-n { position: relative; font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--d1-mute); display: grid; place-items: center; }
.d1-st-n svg { width: 16px; height: 16px; }
.d1-st.is-done .d1-st-pic { border-color: transparent; background-color: rgba(233,199,154,0.18); }
.d1-st.is-done .d1-st-n { color: var(--sand); }
.d1-st.is-ms .d1-st-pic { border-style: dashed; border-color: var(--sand); }
.d1-st.is-ms .d1-st-n { color: var(--sand); }
.d1-st-pic.is-img { width: 56px; height: 56px; border-radius: 12px; border: 0; }
.d1-st-pic.is-img .d1-st-img, .d1-st.is-here .d1-st-img { display: block; }
.d1-st-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d1-st-txt b { font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.3; }
.d1-st .d1-kick { display: none; }
.d1-st-state { flex: none; max-width: 42%; text-align: right; font-size: 14px; color: var(--d1-mute); }
.d1-st.is-here { flex-wrap: wrap; gap: 12px 14px; padding: 14px; margin: 4px 0 10px; border: 1px solid rgba(233,199,154,0.35); border-radius: 18px; background: var(--d1-hero); }
.d1-st.is-here .d1-kick { display: block; }
.d1-st.is-here .d1-st-pic { width: 56px; height: 56px; border-radius: 12px; border: 0; }
.d1-st.is-here:not(.is-ms) .d1-st-n { display: none; }
.d1-st.is-here.is-ms .d1-st-pic { background-color: rgba(233,199,154,0.12); border: 1.5px dashed rgba(233,199,154,0.45); }
.d1-st.is-here .d1-btn { flex: 1 0 100%; }
.d1-st.is-here b { font-size: 19px; }
.d1-aside > .d1-kick { margin-top: 6px; }
.d1-help { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
.d1-help-img { flex: none; width: 64px; height: 64px; border-radius: 12px; background: var(--bg-2) center/cover; }
.d1-help-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d1-help-txt > span { font-size: 15px; line-height: 1.45; color: var(--d1-mute); }
.d1-lernen .d1-st, .d1-theorie .d1-st { gap: 16px; }

/* Etappe */
.d1-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 -4px -4px; padding: 6px 4px;
  font-family: var(--font-headline); font-weight: 600; font-size: 16px; color: var(--sand) !important; }
.d1-back svg { width: 18px; height: 18px; }
.d1-parts { display: flex; flex-direction: column; gap: 10px; }
.d1-part > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--d1-line2); cursor: pointer; }
.d1-part > summary::-webkit-details-marker { display: none; }
.d1-part > summary { flex-wrap: wrap; row-gap: 4px; }
.d1-part > summary b { flex: 1 1 180px; font-family: var(--font-headline); font-weight: 700; font-size: 17px; line-height: 1.3; min-width: 0; }
.d1-part-st { margin-left: auto; }
.d1-part-st { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--d1-mute); text-align: right; }
.d1-part-st svg { width: 18px; height: 18px; transition: transform .2s; }
.d1-part[open] > summary { border-color: transparent; padding: 8px 2px 6px; }
.d1-part[open] .d1-part-open { display: none; }
.d1-part[open] .d1-part-st svg { transform: rotate(180deg); }
.d1-ls { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.d1-l { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(203,184,242,0.04); border: 1px solid var(--d1-line2); color: var(--text); cursor: pointer; }
.d1-dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(203,184,242,0.3); color: var(--sand); }
.d1-dot svg { width: 14px; height: 14px; }
.d1-l-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d1-l-txt b { font-family: var(--font-headline); font-weight: 600; font-size: 16px; line-height: 1.35; }
.d1-l-txt > span:not(.d1-kick) { font-size: 14px; color: var(--d1-mute); }
.d1-l-st { flex: none; font-size: 14px; color: var(--d1-mute); }
.d1-l.is-done .d1-dot { border: 0; background: rgba(233,199,154,0.18); }
.d1-l.is-done b { color: var(--d1-mute); }
.d1-l.is-soon { cursor: default; opacity: 0.7; }
.d1-l.is-soon .d1-dot { border-style: dashed; }
.d1-l.is-next { flex-wrap: wrap; gap: 12px 14px; padding: 14px; background: var(--d1-hero); border-color: rgba(233,199,154,0.4); }
.d1-l.is-next .d1-dot { border: 0; background: var(--sand); color: var(--sand-ink); }
.d1-l.is-next .d1-dot svg { width: 12px; height: 12px; margin-left: 2px; }
.d1-l.is-next b { font-weight: 700; font-size: 17px; }
.d1-l.is-next .d1-btn { flex: 1 0 100%; }
.d1-cover { height: 180px; border-radius: 18px; background: var(--bg-2) center/cover; }
.d1-facts { gap: 4px; }
.d1-facts > span { font-size: 15px; color: var(--d1-mute); }
.d1-nextst .d1-row-txt > span { font-size: 14px; }

/* Lektion */
.d1-les .lesson-crumb.is-link { font-family: var(--font-headline); font-weight: 600; font-size: 16px; }
.d1-les .lesson-title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: 0; }
.d1-les .lesson-meta { font-size: 15px; color: var(--d1-mute); }
.d1-les .lesson-text { font-size: 17px; line-height: 1.6; color: var(--d1-body); }
.d1-les .dl-text, .d1-les .file-kind, .d1-les .mod-min { font-size: 14px; color: var(--d1-mute); }
.d1-les .speed .chip { font-size: 15px; padding: 8px 14px; }
.d1-les .media-row { flex-wrap: wrap; row-gap: 10px; }
.d1-les .media-dl .chip { font-size: 14px; min-height: 36px; padding: 6px 12px; }
.d1-les .d1-link.desk-only { display: none; }
.d1-les .sec-title { font-family: var(--font-headline); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); }
.d1-les .mod-l { font-size: 15px; }
.d1-les .mod-l.is-cur { background: rgba(233,199,154,0.1); font-weight: 700; }
/* „In diesem Teil“ wie im Entwurf: Kreise 22 px (die Chakrenreise-Regel .mod-dot macht sie sonst 12 px), aktuelle Lektion
   sandfarben gefüllt, erledigte getönt mit Haken, ohne Minuten (der lange Titel bräche sonst dreizeilig) */
.d1-les .mod-l { padding: 8px 10px; }
.d1-les .mod-l.is-done { color: var(--d1-mute); }
.d1-les .mod-dot { width: 22px; height: 22px; border: 1.5px solid rgba(203,184,242,0.3); background: none; box-shadow: none; opacity: 1; display: grid; place-items: center; color: var(--sand); }
.d1-les .mod-l.is-done .mod-dot { border: 0; background: rgba(233,199,154,0.18); }
.d1-les .mod-l.is-cur .mod-dot { border: 0; background: var(--sand); }
.d1-les .mod-l.is-cur .mod-dot::after { content: none; }
.d1-les .mod-dot svg { width: 12px; height: 12px; }
.d1-les #l-module .mod-min { display: none; }
.d1-les .nav-btn span { font-size: 14px; }
.d1-les .nav-btn b { font-size: 16px; }
.d1-les .o1 { order: 1; } .d1-les .o4 { order: 2; } .d1-les .o3 { order: 3; } .d1-les .o7 { order: 4; } .d1-les .o5 { order: 5; }
.d1-les .o2, .d1-les .o6 { order: 6; } .d1-les .o8 { order: 7; }
#l-done .d1-big { width: 100%; border-radius: 16px; padding: 16px; }
#l-done .d1-big svg { width: 18px; height: 18px; }
.d1-after { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--d1-mute); }
p.d1-after { display: block; }
.d1-isdone { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(159,216,176,0.4); color: var(--ok); font-family: var(--font-headline); font-weight: 700; font-size: 16px; }
.d1-isdone > span { display: inline-flex; align-items: center; gap: 8px; }
.d1-isdone svg { width: 18px; height: 18px; }
.d1-isdone .d1-link { color: var(--d1-mute); font-size: 14px; }

/* Mitte: zweispaltige Karten ab Tablet */
@media (min-width: 600px) {
  .d1-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; padding: 24px 24px 20px; }
  .d1-hero-img { order: 2; height: auto; min-height: 170px; border-radius: 16px; }
  .d1-hero-txt { padding: 0; }
  .d1-hero h2 { font-size: 26px; }
  .d1-hero .d1-btn { width: auto; align-self: flex-start; padding: 15px 28px; }
  .d1-path { padding: 16px 24px 20px; }
  .d1-prog { flex-direction: row; align-items: center; gap: 14px; }
  .d1-prog .bar { display: block; flex: 1 1 auto; }
  .d1-prog span { flex: none; font-size: 15px; }
  .d1-st { padding: 10px 16px 10px 12px; margin-bottom: 8px; border: 1px solid var(--d1-line2); border-radius: 18px; background: rgba(203,184,242,0.04); }
  .d1-st:last-child { border-bottom: 1px solid var(--d1-line2); }
  .d1-st .d1-kick { display: block; font-size: 14px; }
  .d1-st-pic { width: 52px; height: 52px; border-radius: 10px; border: 0; }
  .d1-st-img { display: block; }
  .d1-st-n { display: none; }
  .d1-st.is-done .d1-st-n { display: grid; width: 26px; height: 26px; border-radius: 50%; background: rgba(20,16,42,0.78); }
  .d1-st.is-ms { background: none; border: 1.5px dashed rgba(233,199,154,0.45); }
  .d1-st.is-ms .d1-st-pic, .d1-st.is-done.is-ms .d1-st-pic { background: rgba(233,199,154,0.12); border: 0; }
  .d1-st.is-ms .d1-st-n { display: grid; background: none; }
  .d1-st.is-here { flex-wrap: nowrap; padding: 12px 16px 12px 12px; }
  .d1-st.is-here .d1-st-pic { width: 64px; height: 64px; }
  .d1-st.is-here .d1-btn { flex: none; min-height: 44px; padding: 11px 22px; font-size: 16px; }
  .d1-st-state { font-size: 15px; }
  .d1-l { padding: 14px 18px; gap: 16px; border-radius: 16px; }
  .d1-dot { width: 32px; height: 32px; }
  .d1-l-txt b { font-size: 17px; }
  .d1-l.is-next { flex-wrap: nowrap; padding: 16px 18px; }
  .d1-l.is-next b { font-size: 18px; }
  .d1-l.is-next .d1-btn { flex: none; min-height: 44px; padding: 11px 22px; font-size: 16px; }
  .d1-l.is-next .d1-only-1 { display: none; }
  .d1-l-st { font-size: 15px; }
  .d1-part > summary b { font-size: 18px; }
  .d1-part-st { font-size: 15px; }
  .d1 h1 { font-size: 52px; }
  .d1-start h1 { font-size: 56px; }
  .d1-les .lesson-title { font-size: 42px; }
}
@media (min-width: 1024px) {
  .d1 .d1-head { margin-top: 0; }
  .d1-back { margin-top: 0; }
}
/* Desktop zweispaltig wie im Entwurf: rechts Termin, Community, Hilfen */
@media (min-width: 1200px) {
  .d1-cols { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
  .d1-cols.is-narrow { grid-template-columns: minmax(0, 1fr) 270px; }
  .d1-col { gap: 20px; }
  .d1-only-1 { display: none; }
  .d1-only-2 { display: block; }
  .d1-start .d1-aside { padding-top: 132px; }
  .d1-praxis .d1-aside, .d1-lernen .d1-aside { padding-top: 6px; }
  .d1-stage .d1-aside { padding-top: 40px; }
  .d1-les .lesson-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; }
  /* Rechte Spalte (Erledigt, In diesem Teil) beginnt wie im Entwurf auf Höhe des Titels, Kopf und Video links darunter */
  .d1-les { display: grid; grid-template-columns: minmax(0, 1fr) 290px; column-gap: 32px; align-items: start; }
  .d1-les > .lesson-head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .d1-les > .lesson-grid { display: contents; }
  .d1-les .lesson-main { grid-column: 1; grid-row: 2; min-width: 0; }
  .d1-les .lesson-side { grid-column: 2; grid-row: 1 / span 2; min-width: 0; margin-top: 28px; }
  .d1-les .lesson-side { gap: 14px; }
  .d1-les .lesson-main > *, .d1-les .lesson-side > * { order: 0; }
  .d1-les .d1-link.desk-only { display: inline-flex; }
  .d1-help { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; gap: 0; }
  .d1-help-img { width: auto; height: 120px; border-radius: 0; }
  .d1-help-txt { padding: 14px 18px 16px; }
  .d1-les .lesson-main { gap: 20px; }
  .d1-les .lesson-text { max-width: 660px; }
  .d1-les .lesson-side .d1-link { margin-top: -4px !important; }
}
@media (hover: hover) and (pointer: fine) {
  .d1-card, .d1-st, .d1-l { transition: border-color .15s, background .15s; }
  a.d1-card:hover, .d1-st:hover, button.d1-l:hover, .d1-l.is-next:hover { border-color: rgba(233,199,154,0.45); }
  .d1-link:hover, .d1-more:hover { color: var(--text); }
  .d1-part > summary:hover { border-color: rgba(233,199,154,0.35); }
}
@media (prefers-reduced-motion: reduce) { .d1-part-st svg, .d1-card, .d1-st, .d1-l { transition: none; } }

/* Leiste und Seitenleiste nur mit Text wie im Entwurf (wie Inner Winner und Schlafkurs) */
body.is-d1a .tab .tab-ico { display: none; }
/* Leiste unten (Handy): Start · Lernen · Community · Mehr. Downloads und KI-Hilfe stehen unter „Mehr“. */
@media (max-width: 1023px) {
  body.is-d1a .tab[data-tab="offline"], body.is-d1a .tab[data-tab="ki"] { display: none; }
  body.is-d1a .tab { min-height: 54px; font-family: var(--font-headline); font-size: 14px; font-weight: 700; color: #c4bcd6; letter-spacing: 0; }
  body.is-d1a .tab-dot { top: 2px; left: calc(50% + 10px); }
  body.is-d1a .tab.is-on, body.is-d1a .tab.is-home { color: var(--sand); }
}
/* Seitenleiste (Desktop): Reihenfolge wie im Entwurf, Downloads und Profil abgesetzt unten */
@media (min-width: 1024px) {
  body.is-d1a .tab { font-family: var(--font-headline); font-size: 16px; font-weight: 600; color: #e2dcec; }
  body.is-d1a .tab.is-home:not(.is-on) { color: #e2dcec; font-weight: 600; }
  body.is-d1a .tab[data-tab="start"] { order: 1; }
  body.is-d1a .tab[data-tab="praxis"] { order: 2; }
  body.is-d1a .tab[data-tab="theorie"] { order: 3; }
  body.is-d1a .tab[data-tab="musik"] { order: 4; }
  body.is-d1a .tab[data-tab="community"] { order: 5; }
  body.is-d1a .tab[data-tab="termine"] { order: 6; }
  body.is-d1a .tab[data-tab="ki"] { order: 7; }
  body.is-d1a .tab[data-tab="offline"] { order: 8; margin-top: 12px; }
  body.is-d1a .tab[data-tab="profil"] { order: 9; }
  body.is-d1a .tab[data-tab="offline"]:not(.is-on), body.is-d1a .tab[data-tab="profil"]:not(.is-on) { font-size: 15px; color: #c4bcd6; }
  body.is-d1a .foot { font-size: 14px; color: #c4bcd6; }
}
/* Niedrige Fenster (z. B. 1024 × 768): Seitenleiste enger, damit „Profil“ nicht unter die Fußzeile rutscht */
@media (min-width: 1024px) and (max-height: 820px) {
  body.is-d1a .tab { height: 40px; }
  body.is-d1a .tab[data-tab="offline"] { margin-top: 4px; }
  body.is-d1a .foot { padding-bottom: 16px; }
}
/* Werkzeug-Karten in der Lektion (Fabian-Klon): auch hier nichts unter 14 px */
.d1 .tool-text { font-size: 14px; }
/* Theorie-Bereich am schmalen Desktop (1024 bis 1199 px): Themenliste schmaler, Kopf und Serien untereinander.
   Vorher lief die rechte Spalte bis zu 100 px aus dem Fenster (Querscrollen, „Thema starten“ abgeschnitten).
   Nur im Look 1a, der alte Look bleibt für Teilnehmer unverändert. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body.is-d1a .tg-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  body.is-d1a .tg-card { padding: 14px; gap: 12px; }
  body.is-d1a .tg-card .tg-num { width: 30px; font-size: 28px; }
  body.is-d1a .tg-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  body.is-d1a .ser, body.is-d1a button.ser { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  body.is-d1a .ser-parts { flex-wrap: wrap; }
}

/* ---------- v131: zurückgeholte Funktionen (funktions-inventur.md) ---------- */
/* Kapitel einer langen Lektion (Hörbuch der Chakrenreise): antippen springt an den Anfang */
.chaps { margin: 4px 0 18px; }
.chaps-res { margin: -4px 0 10px; font-size: 0.85rem; color: var(--muted); }
.chap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chap { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); text-align: left; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.chap:hover { border-color: rgba(var(--acc-rgb), 0.45); }
.chap:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.chap-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  border: 1px solid rgba(var(--acc-rgb), 0.45); color: var(--muted); font-variant-numeric: tabular-nums; }
.chap-t { flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; }
.chap-m { flex: none; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chap.is-on { border-color: rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.12); }
.chap.is-on .chap-n { background: rgb(var(--acc-rgb)); border-color: transparent; color: var(--bg, #14102a); }
/* Offline-Knopf als Pille (Meditationskarte der Chakrenreise) */
.off-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(var(--acc-rgb), 0.4); color: var(--text); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.off-pill svg { width: 16px; height: 16px; flex: none; }
.off-pill:hover { border-color: rgba(var(--acc-rgb), 0.7); background: rgba(var(--acc-rgb), 0.08); }
.off-pill.is-done { color: rgb(var(--acc-rgb)); }
.off-pill:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Download im großen Player außerhalb der Inner Winner Zone: erledigt in der Kursfarbe statt Volt */
.pfull:not(.is-iw) .pf-dlb { color: var(--text); cursor: pointer; }
.pfull:not(.is-iw) .pf-dlb.is-done, .pfull:not(.is-iw) .pf-dlb small { color: rgb(var(--acc-rgb)); }
/* Kurs, der dazugehört (Essentials zur Chakrenreise) */
.with-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  text-align: left; color: var(--text); cursor: pointer; transition: border-color .15s; }
.with-card:hover { border-color: rgba(var(--acc-rgb), 0.5); }
.with-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.with-card > svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.with-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.with-k { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--acc-rgb)); }
.with-t b { font-weight: 700; font-size: 1rem; }
.with-t .et { font-size: 0.85rem; line-height: 1.45; color: var(--muted); }

/* ---------- Demo ohne Login (/app/?demo=…, v135) ---------- */
.demo-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 8px 8px 8px 14px; border-radius: 12px;
  background: rgba(var(--acc-rgb, 233,199,154), 0.1); border: 1px solid rgba(var(--acc-rgb, 233,199,154), 0.35); font-size: 13px; line-height: 1.35; }
.demo-bar > span { flex: 1; min-width: 0; }
.demo-buy { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--sand, #E9C79A);
  color: #14102a; font-weight: 700; font-size: 13px; text-decoration: none; }
body[data-theme-kurs="inner-winner"] .demo-bar { background: rgba(212,255,58,0.08); border-color: rgba(212,255,58,0.35); color: #fff; border-radius: 4px; }
body[data-theme-kurs="inner-winner"] .demo-buy { background: #d4ff3a; color: #000; border-radius: 4px; }
.demo-tease { max-width: 520px; margin: 24px auto; text-align: center; }
.demo-tease p { color: var(--muted); line-height: 1.55; margin: 10px 0 20px; }
.demo-cta { display: inline-flex; justify-content: center; text-decoration: none; }
.demo-end { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,0.6); }
.demo-end[hidden] { display: none; }
.demo-end-in { width: 100%; max-width: 400px; padding: 24px; border-radius: 18px; background: var(--bg-2, #1c1736); border: 1px solid var(--line); text-align: center;
  display: flex; flex-direction: column; gap: 10px; color: var(--text, #fff); }
.demo-end-in h2 { margin: 0; }
.demo-end-in p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
body[data-theme-kurs="inner-winner"] .demo-end-in { background: #0b0b0b; border-color: rgba(212,255,58,0.35); border-radius: 6px; }
body[data-theme-kurs="inner-winner"] .demo-end-in .demo-cta { background: #d4ff3a; color: #000; }

/* ---------- Hypnobreath®-Host, Richtung 1a (Design „Host App.dc.html“, v136) ----------
   Nachtviolett mit Sand, Überschriften in Instrument Serif, Zahlen in Mono. Nur im Kurs host (app.js host*Html). */
.h { display: flex; flex-direction: column; gap: 32px; max-width: 1240px; color: var(--text); }
.h-kick { display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); }
.h-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-top: 8px; }
.h-head > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 56px); line-height: 1; letter-spacing: -0.01em; }
.h-lic { padding: 10px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.h-top { display: flex; flex-wrap: wrap; gap: 16px; }
.h-cont { position: relative; flex: 1.6 1 320px; min-height: 280px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.h-cont > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.h-cont-sh { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22,18,43,.15) 0%, rgba(22,18,43,.8) 45%, rgba(22,18,43,.97) 100%); }
.h-cont-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.h-cont-in { position: relative; z-index: 2; pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; padding: clamp(18px, 3vw, 32px); }
.h-cont-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.h-cont-t b { font-family: var(--font-headline); font-weight: 700; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.h-cont-t > span:last-child { font-size: 15px; color: rgba(239,234,242,.75); }
.h-play { pointer-events: auto; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--sand); color: #16122b; display: grid; place-items: center; }
.h-play svg { width: 20px; height: 20px; margin-left: 3px; }
.h-quicks { flex: 1 1 260px; display: grid; grid-auto-rows: 1fr; gap: 12px; }
.h-quick { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--text); text-decoration: none; }
.h-quick:hover { background: rgba(255,255,255,.07); }
.h-quick b { font-size: 17px; font-weight: 600; }
.h-quick span { font-size: 14px; color: rgba(239,234,242,.6); }
.h-sec { display: flex; flex-direction: column; gap: 16px; }
.h-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.h-sec-h h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 34px); }
.h-sec-h > span, .h-sec-h > a { font-size: 14px; color: rgba(239,234,242,.6); }
.h-sec-h > a { color: var(--sand); text-decoration: none; }
.h-series { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 42vw), 1fr)); gap: 14px; }
.h-ser { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); color: var(--text); text-decoration: none; }
.h-ser:hover { background: rgba(255,255,255,.07); }
.h-ser img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.h-ser > span { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; }
.h-ser b { font-size: 16px; font-weight: 600; }
.h-ser > span > span { font-size: 13px; color: rgba(239,234,242,.6); }
.h-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.h-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 500; color: rgba(239,234,242,.85); text-decoration: none; }
.h-chip.is-on { background: var(--sand); color: #16122b; border-color: var(--sand); }
.h-rows { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; }
.h-rows > li + li { border-top: 1px solid rgba(255,255,255,.06); }
.h-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; color: var(--text); text-decoration: none; }
a.h-row:hover, .h-lrow:hover { background: rgba(255,255,255,.04); }
.h-row.is-off { opacity: .6; }
.h-n { flex: none; width: 28px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: rgba(239,234,242,.45); }
.h-row-t { flex: 1 1 180px; min-width: 0; font-size: 16px; font-weight: 500; }
.h-row-s { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(239,234,242,.5); }
.h-row-s.is-ok { color: var(--sand); }
.h-row-s svg { width: 14px; height: 14px; }
.h-more { align-self: flex-start; font-size: 14px; color: var(--sand); text-decoration: none; }
.h-dur { flex: none; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: rgba(239,234,242,.6); white-space: nowrap; }
.h-lrow-link { position: absolute; inset: 0; z-index: 0; }
.h-acts { position: relative; z-index: 1; display: flex; gap: 8px; margin-left: auto; }
.h-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--sand); color: #16122b; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--sand); }
.h-btn.is-ghost { background: none; color: var(--text); border-color: rgba(255,255,255,.18); font-weight: 500; }
.h-btn.is-big { min-height: 52px; padding: 14px 26px; font-size: 16px; }
.h-btn.is-off { opacity: .5; }
.h-grp { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-start; }
.h-grp-a { flex: 1 1 180px; max-width: 240px; display: flex; flex-direction: column; gap: 12px; }
.h-grp-a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; }
.h-grp-a h2 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.h-grp-a span { font-size: 14px; color: rgba(239,234,242,.6); }
.h-grp .h-rows { flex: 999 1 420px; min-width: 0; }
@media (min-width: 1024px) { .h-grp-a { position: sticky; top: 24px; } }
@media (max-width: 640px) {
  .h-grp-a { flex-direction: row; align-items: center; max-width: none; }
  .h-grp-a img { width: 72px; flex: none; }
  .h-acts { width: 100%; padding-left: 42px; }
}
/* Session (Kopf der Lektionsseite) */
.h-sess { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; margin-bottom: 20px; }
.h-sess-img { flex: 1 1 240px; max-width: 380px; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; display: block; }
.h-sess-t { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.h-sess .h-sess-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; text-wrap: balance; }
.h-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.h-tags span { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 500; }
.h-sess-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.h-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 20px 0; }
.h-box { padding: 20px 22px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.h-box h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 26px; }
.h-mini { list-style: none; margin: 0; padding: 0; }
.h-mini li + li { border-top: 1px solid rgba(255,255,255,.06); }
.h-mini a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text); text-decoration: none; }
.h-mini a > svg { flex: none; width: 18px; height: 18px; color: var(--sand); }
.h-mini a > span:first-of-type { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h-mini b { font-size: 15px; font-weight: 500; }
.h-mini a > span:first-of-type > span { font-size: 13px; color: rgba(239,234,242,.55); }
.h-mini a:hover b { color: var(--sand); }
/* Live-Modus: ganzer Bildschirm, ohne Kopf, Leisten und Mini-Player */
body.is-hlive .top, body.is-hlive .tabs, body.is-hlive .player, body.is-hlive .foot, body.is-hlive .glow { display: none !important; }
body.is-hlive main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.h-live { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow: hidden; background: #0d0a1c; color: var(--text); }
.h-live-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: blur(40px) saturate(.8); transform: scale(1.2); pointer-events: none; }
.h-live-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: calc(20px + var(--safe-top)) clamp(16px, 4vw, 48px) 12px; font-size: 14px; color: rgba(239,234,242,.6); }
.h-live-x { color: rgba(239,234,242,.75); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.h-live-st { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.h-live-wake { max-width: 40%; text-align: right; font-size: 13px; }
.h-live-mid { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; }
.h-live-h { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 6vw, 64px); line-height: 1.02; max-width: 800px; }
.h-live-time { font-family: var(--serif); font-size: clamp(80px, 16vw, 120px); line-height: 1; color: var(--sand); font-variant-numeric: tabular-nums; }
.h-live-bar { width: min(720px, 100%); height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.h-live-bar i { display: block; height: 100%; width: 0; background: var(--sand); transition: width .25s linear; }
.h-live-ctl { display: flex; align-items: center; gap: 20px; padding-top: 8px; }
.h-live-b { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--text); }
.h-live-play { width: 96px; height: 96px; border-radius: 50%; background: var(--sand); color: #16122b; font-size: 15px; font-weight: 600; }
.h-live-foot { position: relative; display: flex; justify-content: space-between; padding: 16px clamp(16px, 4vw, 48px) calc(24px + var(--safe-bottom)); font-size: 14px; color: rgba(239,234,242,.55); }
@media (max-width: 640px) { .h-live-wake { max-width: 50%; font-size: 12px; } }
/* Anleiten lernen */
.h-prog { width: min(280px, 100%); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.h-prog > span { display: flex; justify-content: space-between; }
.h-prog b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 500; }
.h-mod { border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; }
.h-mod + .h-mod { margin-top: -20px; }
.h-mod summary { display: flex; align-items: center; gap: 12px; padding: 18px 20px; }
.h-mod summary .module-title { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; }
.h-mod .h-rows { border: 0; border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; }
/* Marketing */
.h-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: -12px; }
.h-tab { padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 500; color: rgba(239,234,242,.55); text-decoration: none; }
.h-tab.is-on { color: var(--text); border-bottom-color: var(--sand); }
.h-mk { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.h-tpls { flex: 1 1 240px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.h-tpl { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); color: var(--text); text-decoration: none; }
.h-tpl.is-on { border-color: rgba(233,201,154,.5); background: rgba(233,201,154,.08); }
.h-tpl span { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--sand); }
.h-tpl b { font-size: 15px; font-weight: 500; line-height: 1.35; }
.h-paper { flex: 3 1 400px; min-width: 0; padding: clamp(18px, 3vw, 32px); border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 16px; }
.h-mk.is-one .h-paper { flex-basis: 100%; }
.h-paper h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; }
.h-paper-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: rgba(239,234,242,.55); }
.h-paper-h > span { flex: 1 1 200px; }
.h-paper .lesson-text { overflow-wrap: anywhere; }
.h-link { align-self: flex-start; font-size: 14px; color: var(--sand); }
.h-cards { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
@media (max-width: 1023px) { .h { gap: 28px; } .h-cont { min-height: 240px; } }

/* Host v140: Kapitel in Modul-Listen, Einleitung Werbe-E-Mails, Meine Live-Veranstaltungen */
.h-rows > li.h-subhead { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 10px; background: rgba(255,255,255,.025); }
.h-subhead b { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
.h-subhead span { font-size: 14px; color: rgba(239,234,242,.6); max-width: 60ch; }
.h-mk-intro { margin: -12px 0 0; max-width: 62ch; font-size: 15px; color: rgba(239,234,242,.7); }
.hev-card-in { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 16px; background: rgba(233,199,154,.07); border: 1px solid rgba(233,199,154,.22); }
.hev-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.hev-num b { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 8vw, 64px); line-height: 1; color: var(--sand); font-variant-numeric: tabular-nums; }
.hev-num span { font-size: 17px; font-weight: 500; }
.hev-ms { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 420px; }
.hev-ms::before { content: ''; position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: rgba(255,255,255,.12); }
.hev-ms li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: rgba(239,234,242,.55); font-variant-numeric: tabular-nums; }
.hev-ms i { width: 16px; height: 16px; border-radius: 50%; background: #16122b; border: 2px solid rgba(255,255,255,.2); }
.hev-ms li.is-on i { background: var(--sand); border-color: var(--sand); }
.hev-ms li.is-on { color: var(--text); }
.hev-ms li.is-next i { border-color: var(--sand); }
.hev-line, .hev-last { margin: 0; font-size: 15px; color: rgba(239,234,242,.75); }
.hev-last { font-size: 14px; color: rgba(239,234,242,.55); overflow-wrap: anywhere; }
.hev-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hev-empty, .hev-err { margin: 0; max-width: 62ch; font-size: 15px; color: rgba(239,234,242,.7); }
.hev-err { color: #f3b7a8; }
.hev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hev-item { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 3vw, 24px); border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.hev-item h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 26px; overflow-wrap: anywhere; }
.hev-note { margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: rgba(239,234,242,.85); }
.hev-item-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hev-item-acts .h-btn { white-space: normal; text-align: center; }
.hev-form { max-width: 640px; padding: clamp(16px, 3vw, 24px); border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.hev-form h2 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.hev-form input[type=date] { min-height: 44px; }
button.h-btn { cursor: pointer; font-family: inherit; }
.h-dlbox { flex-basis: 100%; gap: 24px; }
.h-dls { display: flex; flex-direction: column; gap: 12px; }
.h-dls h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
.h-dl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.h-dl { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.h-dl-pv { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0d0a1c; }
.h-dl.is-png .h-dl-pv { background-color: #2a2540; background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%), linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.h-dl-pv img { width: 100%; height: 100%; object-fit: cover; }
.h-dl.is-img .h-dl-pv img { object-fit: contain; padding: 10px; }
.h-dl-ico { font-size: 14px; font-weight: 600; letter-spacing: .08em; color: rgba(239,234,242,.5); }
.h-dl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-dl-t b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.h-dl-t span { font-size: 13px; color: rgba(239,234,242,.55); }
.h-dl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.h-dl-acts .h-btn { white-space: normal; text-align: center; }
.h-guide-h { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.h-guide-h img { width: 140px; max-width: 40%; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.h-guide-h > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.h-guide-h p { margin: 0; color: rgba(239,234,242,.7); }
.h-guide-pdf { width: 100%; height: 80vh; min-height: 520px; border: 0; border-radius: 10px; background: #fff; }
#hev-body { display: flex; flex-direction: column; gap: 20px; }

/* Impressum und Datenschutz auf der Anmeldeseite (v137) */
.login-legal { margin: 24px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.login-legal a { color: var(--muted); }
body.is-iwlogin .login-legal a { color: rgba(255,255,255,.6); }

/* Teilnehmer-Ansicht für Admins (v143): schmale Leiste ganz oben, bleibt beim Scrollen stehen */
.view-bar { position: sticky; top: 0; z-index: 6; box-sizing: border-box; height: calc(30px + var(--safe-top)); padding: var(--safe-top) 12px 0;
  display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg); border-bottom: 1px solid var(--sand);
  color: var(--sand); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.view-bar[hidden] { display: none; }
.view-bar span { overflow: hidden; text-overflow: ellipsis; }
.view-bar button { padding: 2px 10px; border-radius: 12px; border: 1px solid var(--sand); color: var(--sand); font-size: 12px; font-weight: 600; }
/* Am Handy liegt der Kopf im Fluss unter der Leiste, die Leiste hat den sicheren Rand oben schon */
@media (max-width: 1023px) { body.is-viewas .top { padding-top: 10px; } }

/* v153: Lange deutsche Wörter in schmalen Kacheln mit Trennstrich trennen („INTENSITÄTS-STUFEN“) statt mitten im Wort
   umzubrechen („INTENSITÄTSSTU / FEN“). overflow-wrap bleibt als Notnagel für Wörter ohne Trennstelle.
   Nur Titel mit einem Wort, das wirklich nicht in die Zeile passt, bekommen .hy-on (app.js hyFit), sonst trennte der Browser
   auch Wörter, die in die nächste Zeile passen („TECHNI-KEN“). */
.hy-on, .hy-w { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; }

/* v153: Touch-Ziele am Handy mindestens 44 px. Runde Symbolknöpfe behalten ihre Größe, bekommen aber eine unsichtbare
   Tippfläche drumherum; Pillen (Fassungen, Uhrzeiten, Filter) werden etwas höher. Desktop unverändert. */
@media (max-width: 1023px) {
  .back, .c-lupe, .cr-fs-play, .media-dl .dl { position: relative; }
  .back::after, .c-lupe::after, .cr-fs-play::after, .media-dl .dl::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
  .chip, .c-rchip, .c-quick { min-height: 40px; }
  .h-tab { display: inline-flex; align-items: flex-end; min-height: 44px; box-sizing: border-box; }
}
@media (max-width: 1023px) { .cr-tab { min-height: 44px; } }
/* v153 Nachtrag (Prüfung): alle Tippflächen am Handy mindestens 44 px. Sichtbar bleibt alles gleich groß, die Fläche wächst
   unsichtbar per ::after (inset rechnet ab Innenkante, deshalb 1 px mehr für den Rand). Kopfzeile ist ohnehin 44 px hoch.
   Nur bis 1023 px. Benachbarte Flächen in Reihen mit kleinem Abstand dürfen sich berühren. */
@media (max-width: 1023px) {
  .top .bell, .top .lupe { flex: none; }
  .kurs-switch { height: 44px; }
  .iw-pill, .iw-ftab, .iw-rowtab, .pf-chip, .pf-act, .cr-seg-b, .off-pill, .crt-play, .h-chip, .h-btn, .sk-var, .sk-chip, .chip, .c-rchip, .c-quick, .c-prompt,
  .d1-link, .lesson-crumb.is-link, .sec-head > a, .h-sec-h > a { position: relative; }
  /* 36 px hoch */
  .iw-pill::after, .pf-chip::after, .cr-seg-b::after, .h-chip::after, .sk-var::after { content: ''; position: absolute; inset: -5px 0; }
  /* 38 px */
  .iw-ftab::after, .off-pill::after, .sk-chip::after { content: ''; position: absolute; inset: -4px 0; }
  .crt-play::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
  /* 40 px (Pillen, Knöpfe) */
  .iw-rowtab::after, .pf-act::after, .h-btn::after, .chip::after, .c-rchip::after, .c-quick::after, .c-prompt::after { content: ''; position: absolute; inset: -3px 0; }
  /* Textlinks und kleine Kreuze: 44 px hohe Fläche um die Zeile */
  .lesson-crumb.is-link::after, .sec-head > a::after, .h-sec-h > a::after, .d1-link::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
  .remind-x::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
  details > summary { min-height: 44px; box-sizing: border-box; }
  .lesson-crumb.is-link { z-index: 1; }              /* Fläche liegt über dem Bild darunter */
  .c-filters { padding-top: 3px; padding-bottom: 3px; margin-top: 13px; margin-bottom: 11px; }   /* Scrollreihe schneidet sonst die Fläche ab */
}

/* Feedback zur App (#feedback) */
.fb-form { display: grid; gap: 14px; max-width: 640px; }
.fb-arten { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-arten label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.95rem; }
.fb-arten label:has(input:checked) { border-color: rgba(var(--acc-rgb), 0.7); background: rgba(var(--acc-rgb), 0.1); color: var(--sand); }
.fb-arten input { accent-color: var(--sand); }
#fb-text { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
#fb-text:focus { outline: none; border-color: rgba(var(--acc-rgb), 0.6); }
.fb-ok { color: var(--sand); margin: 0; }

/* ---------- Alle Kurse · Jahreszugang (v170, app.js jk*) ----------
   Karte auf #kurse, Info-Blatt, Zeile im Kurs-Umschalter, Profil und Start der enthaltenen Kurse.
   Farben nur aus den Theme-Tokens (--sand, --card, --line, --acc-rgb), so trägt jede Stelle den Look des Kurses.
   Bewegung: Mosaik baut sich sanft auf, atmet langsam, ein Lichtstreif zieht alle paar Sekunden darüber. */
.jk-cover .kc-mosaic { animation: jk-breathe 16s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.jk-cover .kc-mini { animation: jk-tile .9s cubic-bezier(.2,.8,.3,1) both; }
.jk-cover .kc-mini:nth-child(2) { animation-delay: .08s; } .jk-cover .kc-mini:nth-child(3) { animation-delay: .16s; }
.jk-cover .kc-mini:nth-child(4) { animation-delay: .24s; } .jk-cover .kc-mini:nth-child(5) { animation-delay: .32s; }
.jk-cover .kc-mini:nth-child(6) { animation-delay: .4s; }
.jk-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.jk-glow::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.05) 35%, rgba(var(--acc-rgb), 0.16) 50%, rgba(255,255,255,0.05) 65%, transparent);
  transform: translateX(-120%) skewX(-12deg); animation: jk-sheen 9s ease-in-out 1.2s infinite; }
@keyframes jk-tile { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes jk-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes jk-sheen { 0% { transform: translateX(-120%) skewX(-12deg); } 38%, 100% { transform: translateX(330%) skewX(-12deg); } }
.jk-cover.kc-cover { border-color: rgba(var(--acc-rgb), 0.38); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), 0.08), 0 18px 40px -24px rgba(var(--acc-rgb), 0.55); }
.jk-cap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jk-pv { flex: none; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--sand); border: 1px dashed rgba(var(--acc-rgb), 0.55); background: rgba(var(--acc-rgb), 0.06); white-space: nowrap; }
.jk-pv-note { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 0.82rem; line-height: 1.5; color: var(--muted);
  border: 1px dashed rgba(var(--acc-rgb), 0.45); background: rgba(var(--acc-rgb), 0.05); }
.jk-pv-note b { color: var(--sand); font-weight: 600; }

/* Info-Blatt */
.jk-value { margin: 0; color: var(--muted); font-size: 0.86rem; }
.jk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jk-li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.jk-li-art { flex: none; width: 44px; height: 44px; border-radius: 10px; --kz: 0.24; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line); }
.jk-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jk-li-t b { font-family: var(--font-headline); font-weight: 700; font-size: 15px; line-height: 1.25; }
.jk-li-t span { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jk-own { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sand); }
.jk-own svg { width: 14px; height: 14px; }
.jk .btn[disabled] { cursor: default; }
.jk-page .jk { max-width: 620px; }

/* Kleines Mosaik (Umschalter, Profil, Start) */
.jk-mos { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; background: #07050f; box-shadow: inset 0 0 0 1px var(--line); }
.jk-mos-t { --kz: 0.1; height: 100%; }
.jk-mos--ks { width: 48px; height: 48px; border-radius: 12px; }
.jk-mos--row, .jk-mos--strip { width: 54px; height: 40px; border-radius: 10px; }
.jk-chev { flex: none; display: grid; place-items: center; color: var(--sand); }
.jk-chev svg { width: 18px; height: 18px; }

/* Zeile im Kurs-Umschalter */
.ks-row.jk-ks { position: relative; isolation: isolate; overflow: hidden; margin-top: 4px; border-style: dashed; border-color: rgba(var(--acc-rgb), 0.42); background: rgba(var(--acc-rgb), 0.05); cursor: pointer; color: inherit; font: inherit; }
.ks-row.jk-ks .ks-sub { color: var(--sand); }

/* Profil und Start: eine ruhige Zeile im Look des Kurses */
.jk-row, .jk-strip { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 12px 14px; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.jk-row-t, .jk-strip-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jk-row-t b, .jk-strip-t b { font-family: var(--font-headline); font-weight: 700; font-size: 15px; line-height: 1.25; text-transform: var(--hl-case); letter-spacing: var(--hl-track); }
.jk-row-t > span, .jk-strip-t > span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.jk-strip { margin: 28px 0 8px; background: transparent; border-color: rgba(var(--acc-rgb), 0.22); }
.jk-row:focus-visible, .jk-strip:focus-visible, .ks-row.jk-ks:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
@media (hover: hover) {
  .jk-row, .jk-strip, .ks-row.jk-ks { transition: border-color .15s, background-color .15s; }
  .jk-row:hover, .jk-strip:hover, .ks-row.jk-ks:hover { border-color: rgba(var(--acc-rgb), 0.55); background: rgba(var(--acc-rgb), 0.07); }
}
@media (prefers-reduced-motion: reduce) {
  .jk-cover .kc-mosaic, .jk-cover .kc-mini, .jk-glow::before { animation: none; }
  .jk-glow { display: none; }
  .jk-row, .jk-strip, .ks-row.jk-ks { transition: none; }
}
.jk-nw { white-space: nowrap; font: inherit; color: inherit; }
.jk-card .hub-line.jk-names { -webkit-line-clamp: 3; }
/* v171: Schließen-Kreuz über dem Titelbild der Info-Blätter (die Kachel ist isolate und läge sonst darüber) */
.ks-sheet > .inst-close { z-index: 3; }
.ks-row.jk-ks .ks-t { gap: 3px; }
.jk-pv--sm { align-self: flex-start; padding: 1px 7px; font-size: 10px; margin-top: 2px; }

/* ---------- Kalender-Seite #termine (app.js kal*, Entwurf Claude Design 08.10.2026) ----------
   Alles hängt an .kal, andere Seiten bleiben unberührt. Schriften der App (Instrument Serif für Titel, Work Sans für Text).
   Handy: eine Spalte (Kopf, Nächster Termin, Filter, Liste, Abo, Vergangene). Ab 1360 px Liste links, rechts mitlaufend
   Nächster Termin und Abo. */
.kal, .kal-ov { --kal-mute: #c4bdd3; --kal-card: rgba(255,255,255,0.035); --kal-line: rgba(255,255,255,0.09); --kal-tint: rgba(var(--acc-rgb), 0.14); --kal-fg: var(--sand); }
.kal { display: flex; flex-direction: column; padding: 10px 0 24px; color: var(--text); }
.kal .kal-side { display: contents; }
.kal-head { order: 0; }
.kal-next { order: 1; }
.kal-filter { order: 2; }
.kal-list { order: 3; }
.kal-sub { order: 4; }
.kal-past { order: 5; }
.kal-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -0.01em; }
.kal-head p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--kal-mute); max-width: 560px; text-wrap: pretty; }

/* Farbe je Terminart: Kachel-Hintergrund und Schrift */
.kal-t-trainercall { --kal-tint: #2e2752; --kal-fg: #ada0f5; }
.kal-t-kickoff { --kal-tint: #35282b; --kal-fg: #ebab74; }
.kal-t-lerngruppe { --kal-tint: #203230; --kal-fg: #8fd3b2; }
.kal-t-praxistage { --kal-tint: #352835; --kal-fg: #ebab74; }
.kal-t-stimme { --kal-tint: #33262f; --kal-fg: #f5a97f; }
.kal-t-live { --kal-tint: rgba(var(--acc-rgb), 0.16); --kal-fg: var(--sand); }

/* Knöpfe */
.kal-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16); background: transparent; color: #e2dcec; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform .15s, background-color .2s, border-color .2s; }
.kal-btn:hover { border-color: rgba(255,255,255,0.3); }
.kal-btn:active { transform: scale(0.97); }
.kal-btn.is-main { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); font-weight: 600; }
.kal-btn.is-main:hover { filter: brightness(1.05); }
.kal-btn svg { width: 15px; height: 15px; }
.kal-cal.is-added { background: rgba(143,211,178,0.12); border-color: rgba(143,211,178,0.45); color: #a8e2c6; }
.kal-acts.is-big .kal-btn { min-height: 44px; border-radius: 22px; font-size: 15px; }
.kal-btn:focus-visible, .kal-chip:focus-visible, .kal-hd:focus-visible, .kal-rem:focus-visible, .kal-x:focus-visible, .kal-more > summary:focus-visible, .kal-past > summary:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* Nächster Termin */
.kal-next { margin-top: 22px; padding: 18px; border-radius: 20px; background: linear-gradient(140deg, rgba(var(--acc-rgb), 0.16), rgba(169,156,240,0.10)); border: 1px solid rgba(var(--acc-rgb), 0.28); }
.kal-next-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kal-kick { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.kal-cd { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.kal-next-t { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.kal-next-when { margin: 4px 0 0; font-size: 14px; color: #d6cfe3; }
.kal-next .kal-acts .is-main { flex: 1; }

/* Filter */
.kal-filter { display: flex; gap: 8px; overflow-x: auto; margin: 22px -16px 0; padding: 2px 16px; scrollbar-width: none; }
.kal-filter::-webkit-scrollbar { display: none; }
.kal-chip { flex: none; min-height: 36px; padding: 0 15px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: #e2dcec; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.kal-chip.is-on { background: #f3eff8; border-color: #f3eff8; color: #1a1530; }

/* Monate und Karten */
.kal-mh { margin: 26px 0 12px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.kal-cards { display: flex; flex-direction: column; gap: 12px; }
.kal-card { border-radius: 18px; border: 1px solid var(--kal-line); background: var(--kal-card); padding: 16px; animation: kal-in .35s ease-out both; }
.kal-card.is-today, .kal-card.is-now { border-color: rgba(var(--acc-rgb), 0.5); background: rgba(var(--acc-rgb), 0.06); }
.kal-card.is-done { opacity: 0.55; }
.kal-hd { display: flex; gap: 14px; width: 100%; text-align: left; padding: 0; border-radius: 12px; }
.kal-tile { flex: none; width: 54px; height: 58px; border-radius: 12px; background: var(--kal-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kal-tile b { font-size: 23px; font-weight: 700; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.kal-tile span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kal-fg); margin-top: 4px; }
.kal-hd-t { flex: 1; min-width: 0; display: block; }
.kal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.kal-when { display: block; font-size: 14px; color: var(--kal-mute); margin-top: 3px; line-height: 1.4; }
.kal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; border: 1px solid rgba(var(--acc-rgb), 0.5); color: var(--sand);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; }
.kal-badge.is-today, .kal-badge.is-now { background: var(--sand); border-color: var(--sand); color: var(--sand-ink); }
.kal-badge.is-done { border-color: rgba(255,255,255,0.2); color: var(--kal-mute); }
.kal-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: kal-pulse 1.6s ease-in-out infinite; }
.kal-desc { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--kal-mute); text-wrap: pretty; }
.kal-more { margin-top: 10px; font-size: 14px; line-height: 1.5; }
.kal-more > summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; border-radius: 6px; }
.kal-more > summary::-webkit-details-marker { display: none; }
.kal-more-c, .kal-more[open] .kal-more-o { display: none; }
.kal-more[open] .kal-more-c { display: inline; }
.kal-more-in { color: #e2dcec; }
.kal-more-in p { margin: 8px 0 0; }
.kal-empty { margin: 40px 0; text-align: center; color: var(--kal-mute); font-size: 15px; line-height: 1.5; }

/* Abo */
.kal-sub { margin-top: 28px; padding: 18px; border-radius: 18px; border: 1px dashed rgba(var(--acc-rgb), 0.4); }
.kal-sub h2 { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.kal-sub p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--kal-mute); }

/* Vergangene Termine */
.kal-past { margin-top: 22px; color: var(--kal-mute); font-size: 14px; }
.kal-past > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-radius: 6px; }
.kal-past > summary::-webkit-details-marker { display: none; }
.kal-past > summary::after { content: '+'; font-weight: 400; }
.kal-past[open] > summary::after { content: '\2212'; }
.kal-past > summary span { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,0.06); }
.kal-past ul { list-style: none; margin: 8px 0 0; padding: 0; opacity: 0.8; }
.kal-past li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.kal-past li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kal-fg); opacity: 0.7; transform: translateY(-1px); }
.kal-past li b { font-weight: 500; color: #e2dcec; }
.kal-past li span { margin-left: auto; text-align: right; font-size: 13px; }

/* Details-Blatt */
html.kal-lock, html.kal-lock body { overflow: hidden; }
/* über Leiste (12) und Mini-Player, unter dem Hinweis-Toast (20) */
.kal-ov { position: fixed; inset: 0; z-index: 15; background: rgba(5,3,12,0.6); display: flex; align-items: flex-end; justify-content: center; animation: kal-fade .2s ease-out both; }
.kal-sheet { position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; border-radius: 28px 28px 0 0;
  background: #1d1834; border-top: 1px solid rgba(255,255,255,0.1); padding: 10px 22px calc(28px + var(--safe-bottom)); animation: kal-up .28s cubic-bezier(.2,.8,.2,1) both; }
.kal-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.2); margin: 0 auto 18px; }
.kal-x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 22px; font-size: 26px; line-height: 1; color: var(--kal-mute); }
.kal-x:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.kal-sh-kick { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kal-fg); padding-right: 48px; }
.kal-sh-t { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; }
.kal-sh-when { margin: 8px 0 0; font-size: 15px; color: #d6cfe3; }
.kal-days { list-style: none; margin: 10px 0 0; padding: 0; font-size: 15px; color: #d6cfe3; }
.kal-days li { padding: 4px 0; }
.kal-sh-desc { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--kal-mute); text-wrap: pretty; }
.kal-sh-more { font-size: 15px; line-height: 1.55; color: #e2dcec; }
.kal-sh-more p { margin: 10px 0 0; }
.kal-rem { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 20px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); text-align: left; font-size: 15px; }
.kal-rem small { display: block; margin-top: 2px; font-size: 13px; color: var(--kal-mute); }
.kal-rem:disabled { opacity: 0.6; cursor: progress; }
.kal-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px; background: rgba(255,255,255,0.18); transition: background-color .2s; }
.kal-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: #fff; transition: transform .2s; }
.kal-rem[aria-checked="true"] .kal-sw { background: var(--sand); }
.kal-rem[aria-checked="true"] .kal-sw::after { transform: translateX(18px); }
.kal-sheet .kal-acts { flex-direction: column; margin-top: 18px; gap: 10px; }
.kal-sheet .kal-acts .kal-btn { min-height: 50px; border-radius: 25px; font-size: 16px; }

@keyframes kal-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes kal-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes kal-fade { from { opacity: 0; } }
@keyframes kal-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .kal-card, .kal-ov, .kal-sheet, .kal-badge i { animation: none; }
  .kal-btn, .kal-chip, .kal-sw, .kal-sw::after { transition: none; }
  .kal-btn:active { transform: none; }
}
@media (min-width: 768px) {
  .kal-ov { align-items: center; padding: 24px; }
  .kal-sheet { border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); max-height: 88vh; padding-top: 22px; }
  .kal-grab { display: none; }
  .kal-head h1 { font-size: 60px; }
}
@media (min-width: 1360px) {
  .kal { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 40px; align-items: start; }
  .kal .kal-side { display: block; grid-column: 2; grid-row: 2 / span 4; position: sticky; top: 24px; }
  .kal-head { grid-column: 1 / -1; }
  .kal-filter { grid-column: 1; grid-row: 2; margin: 22px 0 0; padding: 2px 0; flex-wrap: wrap; overflow: visible; }
  .kal-list { grid-column: 1; grid-row: 3; }
  .kal-past { grid-column: 1; grid-row: 4; }
  .kal-sub { margin-top: 16px; }
}