/* BECRO Mitgliederbereich — Oberfläche nach dem freigegebenen Entwurf.
   Vorbilder: zoom.com, fundednext.com/cfds, bucherai.com.

   Grundzüge: fast schwarzer Grund, EIN Leuchtakzent (BECRO-Blau) mit
   Violett nur als Partner im Verlauf, Pill-Buttons, sehr fette enge
   Überschriften in Outfit, Monospace für alle Zahlen, nummerierte
   Versal-Kicker. Beide Erscheinungsbilder entstehen aus denselben Tokens:
   Komponenten kennen nur Tokens, nie Rohfarben. */

/* --- Schriften, selbst gehostet (kein CDN) ------------------------------ */

@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("/static/fonts/outfit-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/inter-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/inter-latin-700.woff2") format("woff2");
}

/* --- Tokens: dunkel ist der Normalfall ----------------------------------
 *
 * Hier steht das ganze Erscheinungsbild. Komponenten kennen nur Tokens,
 * nie Rohfarben — wer den Grundton, die Deckkraft der Ränder oder die
 * Stärke des Scheins ändern will, ändert das an dieser Stelle und
 * nirgends sonst.
 *
 * Der Aufbau ist deshalb zweistufig: erst die Grundwerte (Farbe als
 * RGB-Tripel, Deckkraft als Zahl), dann die zusammengesetzten Tokens, die
 * die Komponenten benutzen. Das helle Erscheinungsbild überschreibt nur
 * die Grundwerte — die Zusammensetzungen gelten dann automatisch mit,
 * weil eine CSS-Variable erst dort aufgelöst wird, wo sie benutzt wird.
 */

:root {
  /* Sagt dem Browser, wie er Formularelemente, Scrollbalken und
     Datumsfelder einfärben soll — sonst rendert er sie hell auf Schwarz. */
  color-scheme: dark;

  /* --- Grundton ---------------------------------------------------------
     Fast reines Schwarz mit einem Hauch Blau darin, wie der Grund der
     Website. Der Grund selbst trägt keine Farbe mehr: die kommt als
     weicher Schein darüber (--page-glow) und hinter den Hero-Flächen
     (--grad-hero). */
  --bg: #050508;

  /* Flächen liegen nur knapp über dem Grund. Eine Karte hebt sich durch
     ihre Kante und ihren Schatten ab, nicht durch einen Farbsprung — das
     ist der Unterschied zwischen einer Fläche und einem Kasten. */
  --surface: #0b0b11;
  --surface-2: #101017;
  --surface-3: #16161f;

  /* Die Leisten ziehen mit dem Grund nach unten. Eine Seitenleiste, die
     heller ist als die Seite, zieht den Blick nach links — dabei stehen
     dort nur die Wegweiser. */
  --sidebar-bg: rgba(3, 3, 6, 0.88);
  --topbar-bg: rgba(5, 5, 8, 0.72);

  /* --- Ränder -----------------------------------------------------------
     Eine Farbe, drei Deckkräfte. Wer die Kanten insgesamt kräftiger oder
     leiser haben will, dreht an diesen drei Zahlen. */
  --line-rgb: 255, 255, 255;
  --line-alpha: 0.07;
  --line-alpha-2: 0.12;
  --line-alpha-soft: 0.045;
  --line: rgba(var(--line-rgb), var(--line-alpha));
  --line-2: rgba(var(--line-rgb), var(--line-alpha-2));
  --line-soft: rgba(var(--line-rgb), var(--line-alpha-soft));

  --text: #f4f4f6;
  --text-2: #a6a6b4;
  /* Eine Spur heller als früher (#7b7b8b): auf einer Karte lag der
     leiseste Ton knapp unter 4,5:1, und knapp reicht bei 11-Pixel-Text
     nicht. */
  --text-3: #82828f;
  --on-accent: #ffffff;

  /* Blau führt, Violett begleitet nur im Verlauf. Beide stehen als
     RGB-Tripel da, weil der Schein und die Akzentflächen sie in
     verschiedenen Deckkräften brauchen. */
  --accent-rgb: 46, 144, 250;
  --violet-rgb: 99, 91, 255;
  --accent: #2e90fa;
  --accent-deep: #1a6fd4;
  --violet: #635bff;
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --accent-line: rgba(var(--accent-rgb), 0.42);
  --glow: rgba(var(--accent-rgb), 0.42);

  /* --- Der Schein über der Seite ----------------------------------------
     Das Blau, das früher im Grundton steckte, liegt jetzt als weiter
     radialer Schein oben über der Seite. Zwei Zahlen stellen ihn ein: wie
     kräftig oben in der Mitte, wie kräftig der violette Begleiter an der
     Schulter. Null bei beiden heißt: reiner schwarzer Grund. */
  --glow-top: 0.16;
  --glow-side: 0.09;
  --page-glow:
    radial-gradient(120% 72% at 50% -16%, rgba(var(--accent-rgb), var(--glow-top)), transparent 62%),
    radial-gradient(72% 52% at 88% -4%, rgba(var(--violet-rgb), var(--glow-side)), transparent 60%);

  --green: #09e354;
  --green-soft: rgba(9, 227, 84, 0.13);
  --amber: #ffb700;
  --amber-soft: rgba(255, 183, 0, 0.13);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.13);

  --grad: linear-gradient(120deg, #2e90fa 0%, #3f7ef5 55%, #635bff 100%);

  /* Die Aufhellung, die auf jeder Fläche liegt. Sie ist der Grund, warum
     eine Karte „Fläche" heißt und nicht „Kasten": ein Hauch Licht von
     oben, mehr nicht. */
  --soft-rgb: 255, 255, 255;
  --soft-a1: 0.035;
  --soft-a2: 0.010;
  --grad-soft: linear-gradient(180deg, rgba(var(--soft-rgb), var(--soft-a1)), rgba(var(--soft-rgb), var(--soft-a2)));

  /* Der Schein hinter einem Hero. Er bleibt in beiden Erscheinungsbildern
     dasselbe Blau — was sich ändert, ist nur, wie kräftig er aufträgt. */
  --hero-a1: 0.28;
  --hero-a2: 0.16;
  --grad-hero:
    radial-gradient(90% 130% at 88% 8%, rgba(46, 144, 250, var(--hero-a1)), transparent 62%),
    radial-gradient(60% 90% at 6% 100%, rgba(99, 91, 255, var(--hero-a2)), transparent 60%);
  --grad-art:
    radial-gradient(110% 120% at 15% 0%, rgba(46, 144, 250, 0.28), transparent 62%),
    linear-gradient(160deg, #171722, #0c0c12);

  /* --- Schatten ---------------------------------------------------------
     Weit und weich statt hart und nah: eine Fläche soll über dem Grund zu
     schweben scheinen, nicht auf ihm zu liegen. */
  --shadow-rgb: 0, 0, 0;
  --shadow-a1: 0.90;
  --shadow-a2: 0.50;
  --shadow: 0 28px 64px -40px rgba(var(--shadow-rgb), var(--shadow-a1)),
            0 4px 16px -10px rgba(var(--shadow-rgb), var(--shadow-a2));
  --shadow-lift: 0 38px 78px -40px rgba(var(--shadow-rgb), var(--shadow-a1)),
                 0 0 34px -16px var(--glow);
  --shadow-accent: 0 16px 34px -16px var(--glow);

  /* Der Grund hinter einem Video. Bewusst kein Kartenton: schwarze Balken
     links und rechts sind das, was man von einem Player kennt — eine
     weiße Fläche um ein Video herum sieht nach Fehler aus. Deshalb steht
     der Wert auch im hellen Erscheinungsbild auf dunkel. */
  --player-bg: #07070b;

  /* --- Ecken ------------------------------------------------------------
     Eine Leiter, sonst nichts. Jede Rundung im Stylesheet holt ihren Wert
     hier — es steht keine Zahl mehr an einer Komponente, und damit gibt
     es auch keine zwei Kacheln mehr, die sich um zwei Pixel
     unterscheiden, weil zweimal jemand geschätzt hat. */
  --pill: 9999px;
  --r-xxs: 6px;   /* Bedienelemente von 16–20 px: das Häkchen-Kästchen */
  --r-xs: 8px;    /* Eingabefelder, Inline-Code, kleine Vorschaubilder */
  --r-icon: 10px; /* die quadratischen Icon-Kacheln (26–34 px) */
  --r-sm: 12px;   /* Eingabefelder, kleine Kästen */
  --r-md: 16px;   /* Kacheln in Karten, größere Icon-Flächen */
  --r-card: 20px; /* die Karte: Panel, Tile, Stat, Webinar */
  --r-lg: 26px;   /* die großen Flächen: Anmeldekarte, Hero */

  --sidebar-w: 260px;
  --topbar-h: 64px;

  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Outfit", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t-fast: 150ms;
  --t: 200ms;
  --t-slow: 300ms;
}

/* --- Tokens: hell (Umschalter im Konto) ---------------------------------
 *
 * Nur die Grundwerte. Alles Zusammengesetzte — Ränder, Schatten, Schein,
 * die Aufhellung auf den Flächen — entsteht daraus von selbst.
 */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f6f8fd;
  --surface-3: #eef2fa;

  /* Die Leisten bleiben im Grundton und werden nicht weiß: sonst stünden
     sie heller da als die Karten daneben, und die Ordnung kippte. */
  --sidebar-bg: rgba(238, 241, 248, 0.88);
  --topbar-bg: rgba(244, 246, 251, 0.82);

  /* Dunkel auf Hell braucht mehr Deckkraft als Hell auf Dunkel, sonst
     verschwindet die Kante. */
  --line-rgb: 12, 16, 32;
  --line-alpha: 0.10;
  --line-alpha-2: 0.18;
  --line-alpha-soft: 0.06;

  --text: #12131a;
  --text-2: #4d5262;
  /* Eine Spur dunkler als früher (#767b8b). Der leiseste Ton lag auf
     hellem Grund unter 4,5:1 und wäre mit der nachgezogenen Leiste noch
     weiter gerutscht — jetzt trägt er auf allen drei Flächen (Karte,
     Seite, Leiste). Leise bleibt er trotzdem: er steht 30 Punkte unter
     --text-2. */
  --text-3: #686d7d;
  --on-accent: #ffffff;

  --accent-rgb: 22, 104, 214;
  --violet-rgb: 83, 72, 224;
  --accent: #1668d6;
  --accent-deep: #11529f;
  --violet: #5348e0;
  --accent-soft: rgba(var(--accent-rgb), 0.10);
  --accent-line: rgba(var(--accent-rgb), 0.32);
  --glow: rgba(var(--accent-rgb), 0.22);

  /* Auf hellem Grund trägt der Schein viel schneller auf — er darf hier
     kaum mehr als eine Ahnung sein. */
  --glow-top: 0.07;
  --glow-side: 0.04;

  --green: #0f7a45;
  --green-soft: rgba(15, 122, 69, 0.10);
  --amber: #96660a;
  --amber-soft: rgba(150, 102, 10, 0.10);
  --danger: #c33b32;
  --danger-soft: rgba(195, 59, 50, 0.10);

  --grad: linear-gradient(120deg, #1668d6 0%, #2f6ee0 55%, #5348e0 100%);

  --soft-rgb: 12, 16, 32;
  --soft-a1: 0.012;
  --soft-a2: 0.000;

  --hero-a1: 0.22;
  --hero-a2: 0.14;
  /* Medienflächen bleiben auch im hellen Modus dunkel: dort liegen
     Vorschaubilder und weiße Play-Symbole drauf. */
  --grad-art:
    radial-gradient(110% 120% at 15% 0%, rgba(46, 144, 250, 0.30), transparent 62%),
    linear-gradient(160deg, #1b2233, #10141f);

  --shadow-rgb: 12, 22, 50;
  --shadow-a1: 0.34;
  --shadow-a2: 0.10;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Safari auf dem iPhone vergrößert Text in schmalen Spalten von sich aus
   („text autosizing“). Auf einer Seite, die ihre Größen selbst staffelt,
   kommt dabei nur Unruhe heraus: Kicker brechen um, Überschriften sprengen
   ihre Kachel. Die Zeile schaltet das ab — Zoom durch den Nutzer bleibt
   davon unberührt. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Raster- und Flex-Kinder dürfen unter ihre Inhaltsbreite schrumpfen. */
.page, .content, .foot, .topbar, .tile, .stat, .webinar, .panel, .module,
.resume, .tile-body, .webinar-body, .lesson-text, .editor-title, .stat-body,
.grid, .stats, .webinars { min-width: 0; }

body {
  /* Der Grund ist fast schwarz, die Farbe liegt als Schein darüber
     (--page-glow). `fixed` hält ihn beim Scrollen still: ein Verlauf, der
     mitwandert, sieht aus wie ein Fehler im Bild. */
  background-color: var(--bg);
  background-image: var(--page-glow);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- Typografie --------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 3.6vw, 54px); font-weight: 800; line-height: 1.0; }
h2 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; line-height: 1.05; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.028em; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* Nummerierter Versal-Kicker mit Leuchtlinie — die Sektionsmarke. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-2);
}
.eyebrow i { font-style: normal; color: var(--accent); font-weight: 700; }
/* Die Leuchtlinie gehört zur Sektionsmarke. In Karten und Listen würde
   sie sich bei jedem Element wiederholen und das Raster unruhig machen. */
.tile-body .eyebrow::after,
.webinar .eyebrow::after,
.card-body .eyebrow::after { display: none; }
.eyebrow::after {
  content: ""; flex: 0 0 auto; width: 84px; height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent);
}

.muted { color: var(--text-2); }
.small { font-size: 13px; }
.numeral, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* --- Seitenleiste ------------------------------------------------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  /* Ohne den blauen Hauch von früher: er machte die Leiste heller als
     die Seite daneben, und das zog den Blick nach links, wo nur die
     Wegweiser stehen. Das Blau der Seite kommt jetzt von oben. */
  background: var(--sidebar-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid var(--line);
  color: var(--text);
  z-index: 30;
}

.sidebar-head { padding: 24px 20px 16px; }
.sidebar-logo { display: block; }
.sidebar-logo img { display: block; width: 160px; height: auto; }

.sidenav {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px 14px 16px;
  overflow-y: auto;
}
.sidenav-divider {
  display: block;
  margin: 14px 14px 6px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-3);
}

.sidenav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--pill);
  font-size: 14.5px; font-weight: 500;
  color: var(--text);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.sidenav-label { flex: 1; min-width: 0; }
.sidenav-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
}
:root[data-theme="light"] .sidenav-icon { background: rgba(12, 16, 32, 0.05); }
.sidenav-icon svg { width: 15px; height: 15px; }

a.sidenav-item:hover { background: rgba(255, 255, 255, 0.05); text-decoration: none; color: var(--text); }
:root[data-theme="light"] a.sidenav-item:hover { background: rgba(12, 16, 32, 0.04); }
a.sidenav-item.is-active {
  background: var(--grad);
  color: var(--on-accent); font-weight: 600;
  box-shadow: 0 12px 28px -14px var(--glow);
}
a.sidenav-item.is-active .sidenav-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Was es noch nicht gibt, ist blass. Was gesperrt ist, ist es nicht:
   derselbe Ton wie bei einem offenen Punkt. Ein abgeblendeter Eintrag
   sieht aus wie ein Fehler, und auf einen Fehler klickt niemand — dabei
   ist genau das der Weg zu dem, was dahinter liegt. */
.sidenav-item.is-soon { color: var(--text-3); }
/* Gesperrt, aber anklickbar: der Zeiger bleibt eine Hand. Nur wo gar kein
   Ziel ist, steht er still. */
span.sidenav-item.is-locked { cursor: default; }
a.sidenav-item.is-locked:hover .sidenav-lock { opacity: 1; }
.sidenav-tag {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.05);
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
/* Das Schloss ist die Antwort auf „warum kann ich das nicht anklicken“ —
   es muss erkennbar sein, nicht erahnbar. Deshalb größer und deutlicher
   als vorher, aber weiterhin in der Textfarbe und nicht in Rot. */
.sidenav-lock { display: inline-flex; flex: 0 0 auto; opacity: 0.8; }
.sidenav-lock svg { width: 17px; height: 17px; stroke-width: 2; }

.sidebar-foot { padding: 12px 16px 18px; border-top: 1px solid var(--line); }
.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t) var(--ease);
}
.user-card:hover { border-color: var(--line-2); }
.avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad);
  color: var(--on-accent);
  font-family: var(--mono); font-size: 12px;
  box-shadow: 0 8px 18px -10px var(--glow);
}
.user-meta { flex: 1; min-width: 0; line-height: 1.3; }
.user-name {
  display: block;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-mail {
  display: block; font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inline-form { margin: 0; display: flex; }
.sidebar-logout {
  flex: 0 0 auto;
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  font: inherit; color: var(--text-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-icon);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t-fast) var(--ease);
}
.sidebar-logout:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.sidebar-logout:active { transform: scale(0.92); }
.sidebar-logout svg { width: 16px; height: 16px; }

/* --- Inhaltsspalte ------------------------------------------------------ */

.content { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  height: var(--topbar-h);
  padding: 0 clamp(18px, 2.4vw, 52px);
  background: var(--topbar-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: 14px; width: 100%; }
.topbar-title {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-3);
}

.page { flex: 1; width: 100%; padding: clamp(26px, 2.4vw, 44px) clamp(18px, 2.4vw, 52px) 76px; }
.foot {
  width: 100%;
  padding: 0 clamp(18px, 2.4vw, 52px) 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-3);
  /* Adresse links, Rechtszeile rechts — und auf schmalen Schirmen
     untereinander statt in einer gequetschten Reihe. */
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  align-items: baseline; justify-content: space-between;
}
.foot a { color: var(--text-3); }
.foot a:hover { color: var(--accent); }

/* --- Die Mail-Strecke in der Nutzerliste --------------------------------
 *
 * Fünf Marken statt fünf Spalten. Die Liste hat schon vierzehn, und ein
 * Datum je Mail hätte sie unlesbar gemacht — das Datum steht im Tooltip,
 * die Marke sagt nur: raus oder nicht. */
.strecke { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.strecke-mark {
  padding: 2px 6px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-3);
  cursor: default; white-space: nowrap;
}
.strecke-mark.is-done {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent);
}

/* --- Die Rechtszeile ----------------------------------------------------
 *
 * Impressum, Datenschutz, AGB, Risikohinweis. Sie steht im Fuß jeder
 * Seite — im Mitgliederbereich wie auf den Anmeldeseiten — und sieht an
 * beiden Stellen gleich aus, weil sie aus demselben Baustein kommt
 * (templates/_legal.html).
 *
 * Leise, aber nicht versteckt: dieselbe Farbe wie der Rest des Fußes, und
 * beim Zeigen färbt sich der Verweis. Die einzelnen Wörter brechen nicht
 * um — was umbricht, ist die Zeile zwischen zwei Trennpunkten. */
.legal-links { color: var(--text-3); }
.legal-links a { color: var(--text-3); white-space: nowrap; }
.legal-links a:hover { color: var(--accent); }

/* --- Der Bildungshinweis ------------------------------------------------
 *
 * Unter der Idea of the Day und unter dem Daily Briefing: die beiden
 * Stellen, an denen BECRO selbst etwas über den Markt sagt. Klein und im
 * leisesten Ton der Palette — er ordnet ein, er warnt nicht. Die Linie
 * darüber trennt ihn vom Inhalt, ohne einen Kasten aufzumachen. */
.edu-note {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--text-3);
}

.navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.navburger { display: none; }
.nav-scrim { display: none; }

/* --- Flächen: eine Bauform für alle Karten ------------------------------ */

.panel, .tile, .stat, .webinar, .module, .resume, .card {
  background-color: var(--surface);
  background-image: var(--grad-soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel { border-radius: var(--r-card); padding: clamp(20px, 1.8vw, 30px); }
.panel + .panel { margin-top: 16px; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.panel-head h2, .panel-head h3 { margin: 0; }
/* Trägt die Sektion darüber schon die Überschrift, bleibt in der Fläche
   nur die Kennzahl — als Zeile über dem Inhalt. */
.panel-head-note { margin-bottom: 6px; }
.panel-note { font-family: var(--mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* --- Seitenkopf und Hero ------------------------------------------------ */

.hero { margin-bottom: 26px; }
.hero h1 { margin-bottom: 12px; }
.page-lead { max-width: 58ch; margin: 0; color: var(--text-2); font-size: 15.5px; }

.hero-panel {
  position: relative; overflow: hidden;
  padding: clamp(28px, 2.6vw, 42px) clamp(22px, 2.6vw, 44px) clamp(30px, 2.6vw, 40px);
  border-radius: var(--r-lg);
  background: var(--grad-hero), var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.hero-panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 100% at 100% 0%, #000, transparent 70%);
}
.hero-panel > * { position: relative; }
.hero-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: clamp(24px, 3vw, 56px);
  padding-right: 8px;
}
.hero-panel h1 { font-size: clamp(44px, 4.6vw, 74px); font-weight: 800; line-height: 0.94; max-width: 15ch; }
.hero-lead { max-width: 46ch; margin: 12px 0 0; color: var(--text-2); font-size: 15.5px; }

/* Der Fortschrittsring im Hero — die Kennzahl der Referenzen. */
.ring {
  position: relative; width: clamp(150px, 14vw, 200px); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  box-shadow: 0 0 60px -20px var(--glow);
}
.ring::after {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--surface);
}
.ring-value { position: relative; z-index: 1; text-align: center; }
.ring-value b {
  display: block;
  font-family: var(--display); font-size: clamp(30px, 3vw, 44px);
  font-weight: 800; letter-spacing: -0.05em; line-height: 1;
}
.ring-value span {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-3);
}

/* Ohne Zugang trägt der Ring kein Prozent, sondern das Schloss — gleiche
   Fläche, nur ohne Verlauf. */
.ring-locked { background: var(--line); }
.ring-locked .ring-value b svg { width: 26px; height: 26px; color: var(--text-3); }

/* Aktionszeile unter dem Hero-Text. Seit dort zwei Knöpfe stehen — das
   Erstgespräch und der Weg zur Website — eine Reihe mit Abstand statt
   zweier Absatzkinder, die im Zeilenfluss aneinanderkleben. Der eigene
   Randabstand der Knöpfe fällt dabei weg; ihn setzt hier die Zeile. */
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0;
}
.hero-actions .btn { margin-top: 0; }

/* Die Kennzahlen im Fuß des Heros. Sie standen einmal als vier Kacheln
   neben einem Fließtext; als Kacheln direkt unter der Preis-Karte wären
   sie ein zweites Kachelfeld an derselben Stelle. Hier sind sie eine
   Zeile hinter einer Haarlinie: Zahl groß, Wort klein darunter,
   getrennt nur durch Abstand.

   `auto-fit` und nicht vier feste Spalten — auf dem Handy werden von
   selbst zwei Reihen daraus, und die Wörter („Live-Webinare") brechen
   nicht mitten durch. */
.hero-facts {
  list-style: none; margin: clamp(24px, 2.4vw, 34px) 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px clamp(20px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.hero-facts b {
  display: block;
  font-family: var(--display); font-size: clamp(20px, 2vw, 26px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--text);
}
.hero-facts span {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
}
:root[data-theme="light"] .badge { background: var(--surface-2); }
.badge-quiet { color: var(--text-2); }
.hero-panel .badge:not(.badge-quiet) {
  border-color: transparent; background: var(--grad); color: var(--on-accent);
}

.section-title { margin: 6px 0 18px; }
/* Kicker + Überschrift bilden einen Block; der Abstand sitzt am Kicker. */
.eyebrow-section, .section-gap { margin-top: clamp(38px, 3.6vw, 56px); }
.section-title {
  margin: 6px 0 18px;
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 800; letter-spacing: -0.04em; color: var(--text);
}
.section-title:first-child { margin-top: 0; }

/* --- Häkchen ------------------------------------------------------------ */

.check {
  display: inline-flex; flex: 0 0 auto;
  align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); color: currentColor;
}
.check svg { width: 11px; height: 11px; stroke-width: 2.6; }
.check svg path { stroke-dasharray: 22; stroke-dashoffset: 22;
                  animation: check-draw 420ms var(--ease) 200ms forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* --- Weiterlernen ------------------------------------------------------- */

.resume {
  display: grid; grid-template-columns: clamp(260px, 24%, 400px) 1fr;
  border-radius: var(--r-card); overflow: hidden;
  transition: box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.resume:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.resume-float { margin: 16px 0 0; }
.resume-thumb {
  position: relative; overflow: hidden; min-height: 190px;
  background: var(--grad-art);
  display: grid; place-items: center;
}
.resume-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.resume-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,8,12,.1), rgba(8,8,12,.7));
}
.resume-play {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(4px); color: #fff;
  transition: transform var(--t-slow) var(--ease), background var(--t-slow) var(--ease);
}
.resume:hover .resume-play { transform: scale(1.06); background: var(--accent); border-color: transparent; }
.resume-play svg { width: 24px; height: 24px; }
.resume-body {
  padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column;
  justify-content: center; gap: 4px;
}
.resume-body h2 { margin-bottom: 4px; max-width: 20ch; }
.resume-body > .muted { max-width: 58ch; font-size: 14px; }

/* --- Statistik ---------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(12px, 1vw, 16px);
  margin-top: 16px;
}
.stat {
  position: relative; overflow: hidden;
  padding: 24px 26px;
  border-radius: var(--r-card);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.stat-icon { display: none; }
.stat-body { min-width: 0; }
.stat-value {
  display: block;
  font-family: var(--display); font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 800; letter-spacing: -0.055em; line-height: 0.95;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.stat-value .unit { font-size: 20px; font-weight: 600; color: var(--text-3); letter-spacing: -0.02em; }
.stat-label {
  display: block; margin-top: 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); }

/* --- Kacheln ------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(12px, 1.1vw, 18px);
}
.grid-fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Das Raster der Startseite: Videos und Bereichs-Karten teilen es sich.
   Eine Spur schmaler als `.grid` (260 statt 300 px), damit ein breiter
   Bildschirm eine Spalte mehr bekommt statt breiterer Kacheln — bei
   1200 px sind es drei, bei 1500 vier, bei 1920 fünf. Nach oben deckelt
   das Raster sich selbst: sobald eine Kachel auf die doppelte Mindest-
   breite zuläuft, passt eine weitere Spalte hinein, und keine wird je
   breiter als rund 360 px.

   Wie viele Kacheln in diesen Spalten stehen, entscheidet becro.js
   (`data-fill`): es blendet so viele aus, dass die letzte Reihe voll
   ist. Ausgeblendet wird mit `hidden` — und weil `.tile` ein `display`
   setzt, muss die Regel hier das UA-Verhalten zurückholen. */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.grid > [hidden] { display: none; }

.tile {
  display: flex; flex-direction: column;
  border-radius: var(--r-card); overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--accent-line); }
a.tile { color: inherit; }
a.tile:hover { text-decoration: none; color: inherit; }
.tile-wide { max-width: 620px; }

/* Nur das Seitenverhältnis, kein Höhendeckel dazu. Der Deckel stand
   früher hier (`max-height: clamp(150px, 14vw, 240px)`) und war auf dem
   Handy der Grund, warum die Vorschau die Karte nicht ausfüllte: 14vw sind
   bei 390 px keine 55 px, der Deckel griff also mit seinen 150 px, während
   das Verhältnis 199 px verlangte. Chromium behält dann die Breite und
   drückt das Bild flach; WebKit — und damit jedes iPhone — nimmt statt
   dessen die Breite zurück, auf 150 × 16/9 = 267 px in einer 354 px
   breiten Karte. Übrig blieb ein schwarzer Rand von 87 px.

   Breit wird die Vorschau trotzdem nicht: die Kachelspalte ist bei
   `.grid` auf 300–400 px begrenzt, und daraus folgt die Höhe von selbst. */
.tile-thumb {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; color: #fff;
}
.thumb-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--grad-art);
  transition: transform var(--t-slow) var(--ease);
}
.thumb-art img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85;
}
.thumb-art > svg { width: 40px; height: 40px; color: rgba(255,255,255,.8); }
.tile:hover .thumb-art { transform: scale(1.04); }
.tile-thumb.has-image .thumb-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,8,12,.8));
}
.tile-thumb-navy .thumb-art { background: linear-gradient(160deg, #14141d, #0a0a10); }

.thumb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,8,12,.5); border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(4px); color: #fff;
  transition: transform var(--t-slow) var(--ease), background var(--t-slow) var(--ease);
}
.thumb-play svg { width: 22px; height: 22px; }
.tile:hover .thumb-play { transform: translate(-50%,-50%) scale(1.08); background: var(--accent); border-color: transparent; }

.thumb-badge {
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--pill);
  background: rgba(8,8,12,.72); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); color: #fff;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
}
.thumb-badge svg { width: 12px; height: 12px; }
.thumb-badge-done { background: var(--grad); border-color: transparent; }
.thumb-badge-done svg { stroke-width: 2.6; }
.thumb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(8,8,12,.5); }
.thumb-progress span { display: block; height: 100%; background: var(--grad); }

.tile-body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 22px; }
.tile-body .muted { flex: 1; font-size: 13.5px; }
.tile-meta { display: flex; align-items: center; gap: 8px; margin-top: 12px;
             font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.tile-mail { font-size: 16px; word-break: break-word; }
.eyebrow-done { color: var(--accent); }
/* Frist auf der Kachel — eigene Zeile unter der Kategorie, sonst bricht
   der Kicker mitten im Wort um. */
.eyebrow-warn { display: block; margin-top: 4px; color: var(--amber); }
.tile-account { margin-top: clamp(12px, 1.1vw, 18px); flex-direction: row; }
.tile-account .tile-thumb { flex: 0 0 clamp(170px, 15%, 280px); aspect-ratio: auto; max-height: none; }
.tile-account .tile-body { padding: 24px 26px; }
.tile-account .tile-body > .muted { max-width: 58ch; }

/* Kartenkopf wie im Entwurf: große Ziffer links, Icon-Kachel rechts,
   Zähler-Tag auf der Fläche. */
.tile-head {
  position: relative;
  height: 138px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px 30px;
  background: var(--grad-art);
}
.tile-no {
  font-family: var(--display); font-weight: 800; font-size: 58px;
  letter-spacing: -0.06em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tile-icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-2);
  color: #fff;
}
.tile-icon svg { width: 22px; height: 22px; opacity: .9; }
.tile-tag {
  position: absolute; right: 20px; bottom: 12px;
  max-width: calc(100% - 40px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--pill);
  background: rgba(8,8,12,.7); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11px; color: #fff;
}
.tile-tag.is-done { background: var(--grad); border-color: transparent; }

/* Balken mit Zähler im Textteil der Karte. */
.bar-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.bar {
  flex: 1; height: 5px; border-radius: var(--pill);
  background: rgba(255,255,255,.09); overflow: hidden;
}
:root[data-theme="light"] .bar { background: rgba(12,16,32,.09); }
.bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--grad); }
.bar-line .count { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* Sektionskopf: Kicker + Headline links, Aktion rechts. */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.sec-head .section-title { margin-bottom: 0; }
.sec-head .btn { margin-top: 0; }

svg[aria-hidden="true"] {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Grundgröße jedes Icons. Ohne die füllt ein SVG seinen Kasten komplett
   aus, sobald eine Komponente ihre eigene Regel vergisst — aus einem
   Symbol wird dann ein Vollbild. Bewusst eine einzelne Klasse: jede
   `.komponente svg`-Regel ist spezifischer und sticht sie, ohne dass hier
   etwas nachgezogen werden muss. */
.ic { width: 20px; height: 20px; flex: 0 0 auto; }

.check svg { stroke-width: 2.6; }

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

.progress { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.progress-track {
  flex: 1; height: 6px; border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.09); overflow: hidden;
}
:root[data-theme="light"] .progress-track { background: rgba(12, 16, 32, 0.09); }
.progress-fill {
  display: block; height: 100%; border-radius: var(--pill);
  background: var(--grad); box-shadow: 0 0 14px var(--glow);
  transition: width 900ms var(--ease);
}
.progress-value {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.progress-value.is-note { font-family: var(--font); font-size: 12.5px; color: var(--text-3); }
.progress-wide { margin: 0 0 22px; max-width: 720px; }
.progress-note { flex: 0 0 auto; font-size: 12.5px; color: var(--text-3); }
.progress-block { margin-top: 14px; max-width: 620px; }
.progress-block .progress { margin-top: 6px; }
.progress-cap {
  display: block;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.progress-sub { display: block; margin-top: 6px; font-family: var(--mono);
                font-size: 12px; color: var(--text-3); }

/* --- Empty-States ------------------------------------------------------- */

.empty {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 16px; padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--line-2);
}
:root[data-theme="light"] .empty { background: var(--surface-2); }
.empty-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  color: var(--text-3);
}
.empty-icon svg { width: 16px; height: 16px; }
.empty-text { font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 76ch; }
.empty-text strong {
  display: block; font-family: var(--display); font-size: 14px;
  font-weight: 700; letter-spacing: -0.025em; color: var(--text);
}
.empty-center { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 24px; }
.empty-center .empty-icon { width: 44px; height: 44px; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  align-self: flex-start; margin-top: 16px;
  padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--pill);
  background: var(--grad); color: var(--on-accent);
  font-family: var(--display); font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em;
  box-shadow: var(--shadow-accent);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              filter var(--t) var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { color: var(--on-accent); text-decoration: none; transform: translateY(-2px);
             filter: brightness(1.08); box-shadow: 0 20px 38px -18px var(--glow); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-outline {
  background: transparent; color: var(--text);
  border-color: var(--line-2); box-shadow: none;
}
.btn-outline:hover { background: rgba(255,255,255,.05); color: var(--text); filter: none;
                     border-color: var(--accent-line); box-shadow: none; }
:root[data-theme="light"] .btn-outline:hover { background: var(--surface-2); }
.btn-disabled { background: var(--surface-3); color: var(--text-3); border-color: var(--line); box-shadow: none; cursor: default; }
.btn-disabled:hover { transform: none; filter: none; box-shadow: none; color: var(--text-3); background: var(--surface-3); }
.btn-disabled:active { transform: none; }
.btn-wide { width: 100%; align-self: stretch; }
.btn-done { background: transparent; color: var(--accent); border-color: var(--accent-line); box-shadow: none; }
.btn-done svg { stroke-width: 2.6; }
.backlink { margin-top: 18px; }
.uplink { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; }
.hero-video { margin-bottom: 20px; }

/* --- Formulare ---------------------------------------------------------- */

.form { margin: 18px 0 12px; }
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input:disabled, .field textarea:disabled { color: var(--text-3); cursor: not-allowed; opacity: 0.7; }
.field input[type="file"] { padding: 11px 14px; font-size: 13.5px; color: var(--text-2);
                            border-style: dashed; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 0; border-radius: var(--pill); cursor: pointer;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.checkline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.checkline input {
  /* `flex: 0 0 auto` verhindert, dass die Box auf schmalen Schirmen
     zusammengedrueckt wird und oval aussieht. */
  flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.checkline span { color: var(--text-2); }
.checkline strong { display: block; color: var(--text); font-weight: 600; }

.alert, .notice {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 13px 17px;
  border-radius: var(--r-sm); font-size: 14px;
}
.alert { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }
.notice-ok { background: var(--green-soft); border: 1px solid var(--green); color: var(--green); }
.notice-error { background: var(--danger-soft); border: 1px solid var(--danger); color: var(--danger); }
.notice svg { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 2; }
/* Geht der Hinweis über mehrere Zeilen, gehört das Zeichen an die erste —
   in der Mitte eines Absatzes sieht es aus, als sei es verrutscht. */
.notice-long { align-items: flex-start; }
.notice-long svg { margin-top: 3px; }

/* --- Chips (Kategorie-Filter) ------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--text-2); font-size: 13px; font-weight: 500;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
              background var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
:root[data-theme="light"] .chip { background: var(--surface-2); }
.chip.is-active { border-color: transparent; background: var(--grad); color: var(--on-accent);
                  box-shadow: 0 10px 22px -14px var(--glow); }
a.chip:hover { text-decoration: none; border-color: var(--accent-line); color: var(--text); }
a.chip.is-active:hover { color: var(--on-accent); border-color: transparent; }
a.chip:active { transform: scale(0.97); }
.chip-count { margin-left: 7px; font-family: var(--mono); font-size: 11px; opacity: 0.7; }
.chip.is-quiet { cursor: default; }

/* --- Videokurs: Module, Lektionen --------------------------------------- */

.module { border-radius: var(--r-card); overflow: hidden; }
.module + .module { margin-top: 12px; }
.module > summary {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  transition: background var(--t) var(--ease);
}
.module > summary::-webkit-details-marker { display: none; }
.module > summary:hover { background: rgba(255,255,255,.03); }
/* Kursteile tragen ihre Nummer als große Ziffer im Verlauf — dieselbe
   Bauform wie die Ziffern auf den Bereichskacheln. */
.module-no {
  flex: 0 0 auto; min-width: 52px;
  font-family: var(--display); font-size: 34px; font-weight: 800;
  letter-spacing: -0.055em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.module-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.module-icon svg { width: 20px; height: 20px; }
.module-title { flex: 1; min-width: 0; }
.module-title strong {
  display: block; font-family: var(--display); font-size: 17px;
  font-weight: 700; letter-spacing: -0.03em; color: var(--text);
}
.module-title span { display: block; font-size: 13px; color: var(--text-3); }
.module-caret { flex: 0 0 auto; display: inline-flex; color: var(--text-3);
                transition: transform var(--t) var(--ease); }
.module-caret svg { width: 18px; height: 18px; }
.module[open] .module-caret { transform: rotate(180deg); }
.module-body { padding: 2px 24px 16px; border-top: 1px solid var(--line); }
.module-stand { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.module-bar { display: block; width: 100px; height: 5px; border-radius: var(--pill);
              background: rgba(255,255,255,.09); overflow: hidden; }
:root[data-theme="light"] .module-bar { background: rgba(12,16,32,.09); }
.module-bar span { display: block; height: 100%; background: var(--grad); }
.module-count { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

.lesson {
  display: flex; align-items: center; gap: 15px;
  padding: 12px 6px; border-bottom: 1px solid var(--line-soft);
}
.lesson:last-child { border-bottom: 0; }
a.lesson-link { color: inherit; border-radius: var(--r-sm);
                transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
a.lesson-link:hover { background: rgba(255,255,255,.04); text-decoration: none; color: inherit;
                      transform: translateX(2px); }
/* Das Vorschaubild einer Lektion. Feste Größe und fester Zuschnitt für
   alle: die Spalte soll ruhig sein, und ein Bild, das mal 16:9 und mal
   4:3 ist, macht aus einer Liste eine Treppe.

   Der Rahmen ist kein Schmuck: die Folien sind überwiegend weiß, und
   eine weiße Fläche ohne Fassung sitzt hart auf dem dunklen Grund.

   Er ist dunkel und nicht hell — eine helle Linie auf einer weißen Folie
   ist keine. Zwei Pixel in der Farbe der Flächen legen sich als schmaler
   Steg zwischen Bild und Hintergrund; der Haarstrich außen zeichnet ihn
   dann noch gegen den Grund ab. */
.lesson-thumb {
  flex: 0 0 auto; width: 76px; aspect-ratio: 16 / 9;
  border-radius: var(--r-xs); overflow: hidden;
  border: 2px solid var(--surface-3);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--grad-art); display: grid; place-items: center; color: #fff;
}
.lesson-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: .9;
}
.lesson-thumb svg { width: 16px; height: 16px; }
.lesson-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: 12px;
}
.lesson-text { flex: 1; min-width: 0; font-size: 14.5px; color: var(--text); }
.lesson-text span { display: block; color: var(--text-3); font-size: 12.5px; }
.lesson-tag {
  flex: 0 0 auto; padding: 4px 10px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.lesson-time { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.lesson-check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-2); color: transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.lesson-check svg { width: 12px; height: 12px; stroke-width: 2.6; }
.lesson-check.is-on { background: var(--grad); border-color: transparent; color: var(--on-accent); }
.lesson-link.is-done .lesson-text span { color: var(--text-3); }
.lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.lesson-actions .btn { margin-top: 0; }

/* --- Player ------------------------------------------------------------- */

/* Der Player wächst in die Breite, aber nie über drei Viertel der
   Fensterhöhe. Auf einem 3440er Schirm wäre er sonst 1900 px hoch — das
   Video ginge unten aus dem Bild, und Titel und Beschreibung stünden
   darunter im Nichts.

   Die drei Angaben gehören zusammen: `aspect-ratio` hält 16:9,
   `max-height` deckelt die Höhe, und `max-width` rechnet dieselbe Grenze
   noch einmal als Breite aus. Ohne die dritte Zeile wären sich die
   Browser uneins — WebKit nimmt bei gedeckelter Höhe die Breite zurück,
   Chromium behält sie und drückt das Bild flach. Mit ihr kommen beide auf
   dasselbe Ergebnis. */
.player {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  max-height: 75vh; max-width: calc(75vh * 16 / 9);
  margin: 0 auto 22px;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--player-bg); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
/* Auch der Rahmen bekommt den dunklen Grund: solange Vimeo nichts
   gezeichnet hat, zeigt er sonst das Weiß seines eigenen Dokuments — das
   ist der helle Balken, der vor dem Start zu sehen war.

   `color-scheme: normal` gehört dazu und ist der eigentliche Trick. Unser
   `:root` steht auf `color-scheme: dark`, und ein iframe erbt das. WebKit
   — also jedes iPhone und jeder Mac-Safari — malt daraufhin die eigene
   Fläche des Rahmens weiß über unseren Grund, solange das eingebettete
   Dokument noch nichts hat. Nachgemessen: mit `dark` oder `only dark`
   bleibt die Fläche weiß, mit `normal` steht dort unser Ton. Chromium war
   in beiden Fällen unauffällig — ohne die Zeile hätte es niemand gesehen,
   der nicht auf einem Apple-Gerät nachsieht. */
.player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: var(--player-bg); color-scheme: normal;
}

/* Der eigene Vollbild-Knopf.

   Er sitzt oben rechts und nicht unten rechts, wo man ihn zuerst suchen
   würde: unten rechts steht der Knopf von Vimeo. Zwei Vollbild-Symbole
   nebeneinander sind schlechter als eines an ungewohnter Stelle.

   Auf einem Zeigegerät blendet er sich erst beim Überfahren des Players
   ein — dort tut es Vimeos eigener Knopf ohnehin. Auf einem Touchscreen
   gibt es kein Überfahren, also steht er immer da; genau dort wird er
   gebraucht. */
.player-full {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r-icon); border: 1px solid rgba(255,255,255,.16);
  background: rgba(8, 8, 14, .55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.player-full svg { width: 18px; height: 18px; }
.player-full:active { transform: scale(0.94); }
.player:hover .player-full, .player-full:focus-visible { opacity: 1; }
@media (hover: none) { .player-full { opacity: 1; } }

/* Ein Knopf, zwei Symbole — im Vollbild zeigt er den Weg zurück. */
.player-full-shut { display: none; }
.player.is-full .player-full-open { display: none; }
.player.is-full .player-full-shut { display: block; }
.player.is-full .player-full { opacity: 1; }

/* Im echten Vollbild müssen die drei Größenangaben von oben weg.

   Sonst deckelt `max-height: 75vh` den Player mitten im Vollbild auf drei
   Viertel des Schirms und `aspect-ratio` hält ihn dort fest — man klickt
   auf Vollbild und bekommt ein Video mit schwarzem Rand ringsum. Der
   Browser setzt zwar `width/height: 100%`, aber gegen unsere Deckel kommt
   er nicht an.

   Zwei getrennte Regeln, kein gemeinsamer Selektor: kennt ein Browser
   `:-webkit-full-screen` nicht, wirft er die ganze Liste weg — und mit ihr
   die Zeile, die er verstanden hätte. */
.player:fullscreen {
  width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0; background: #000;
}
.player:-webkit-full-screen {
  width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0; background: #000;
}

/* Ersatz-Vollbild fürs iPhone.

   Safari hat auf dem iPhone keine Fullscreen-API — weder `requestFullscreen`
   noch die `webkit`-Variante, und beim iframe von Vimeo kommen wir auch an
   kein <video> heran. Bleibt: den Player selbst über das ganze Fenster
   legen. Das ist kein echtes Vollbild (die Safari-Leisten bleiben stehen),
   aber es ist quer gedreht formatfüllend — und vor allem funktioniert es.

   `aspect-ratio: auto` muss dabei sein: ohne die Zeile würde das 16:9 von
   oben gegen `inset: 0` rechnen und der Kasten bliebe in seiner alten Höhe
   stehen. Dasselbe gilt für die beiden `max-*`-Deckel. */
.player.is-faux-full {
  position: fixed; inset: 0; z-index: 300;
  width: 100%; height: 100%;
  max-width: none; max-height: none; aspect-ratio: auto;
  margin: 0; border: 0; border-radius: 0;
  background: #000; box-shadow: none;
}
body.has-faux-full { overflow: hidden; }
.panel-video .btn { margin-top: 0; }
.panel > .muted, .panel > p.small { max-width: 76ch; }

/* --- Webinar-Karten ----------------------------------------------------- */

.webinars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1vw, 16px); align-items: stretch;
}
.webinar {
  position: relative; overflow: hidden;
  display: flex; gap: 0;
  padding: 22px 24px; border-radius: var(--r-card);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.webinar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-2); }
.webinar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
/* Die Nummer steht als kleine Mono-Zeile über dem Zustand — wie im
   Artboard, nicht als Kasten neben dem Text. */
.webinar-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-3);
}
.webinar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.webinar-body h3 { margin: 0; font-size: 17px; }
.webinar-body .btn, .webinar-body .card-links { margin-top: auto; }
.webinar-body .btn { padding: 10px 18px; font-size: 13.5px; }
/* Alle Karten beginnen oben und setzen ihre Aktion unten ab — dadurch
   liegen Nummer, Zustand und Titel über die Reihe hinweg auf einer Linie. */
.webinar { align-items: flex-start; }
.webinar-date { display: inline-flex; align-items: center; gap: 6px;
                font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.webinar-date svg { width: 13px; height: 13px; }
.webinar-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
                font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.webinar-note svg { width: 13px; height: 13px; flex: 0 0 auto; }
.webinar-note.is-gone { color: var(--amber); }
.webinar-state {
  align-self: flex-start; padding: 5px 12px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.webinar.is-available::before { background: var(--green); box-shadow: 0 0 18px var(--green); }
.webinar.is-available .webinar-state { border-color: rgba(9,227,84,.45); background: var(--green-soft); color: var(--green); }

.webinar.is-upcoming::before { background: var(--grad); }
.webinar.is-upcoming .webinar-state { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }

.webinar.is-expired::before { background: var(--amber); }
.webinar.is-expired .webinar-state { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.webinar.is-open::before { background: var(--line-2); }

/* --- Hausaufgaben und Quiz ---------------------------------------------- */

.chip-status {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 12px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--text-2); white-space: nowrap;
}
.chip-status svg { width: 13px; height: 13px; }
.chip-status.is-abgegeben { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.chip-status.is-feedback, .chip-status.is-score {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
.panel-task, .panel-quiz { margin-top: 16px; }
.task-text { white-space: pre-line; max-width: 72ch; }
.panel-quiz .btn { margin-top: 14px; }

.feedback {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.feedback p { margin: 0; color: var(--text); font-size: 14px; }
.feedback p + p { margin-top: 6px; }
.feedback-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.feedback-head svg { width: 14px; height: 14px; stroke-width: 2.6; }

.card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.card-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  color: var(--text); font-size: 12.5px; font-weight: 600;
  transition: border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.card-link:hover { text-decoration: none; color: var(--text); border-color: var(--accent-line); }
.card-link:active { transform: scale(0.98); }
.card-link svg { width: 14px; height: 14px; color: var(--accent); }
.card-link .chip-status { padding: 2px 8px; font-size: 10px; }

.files-title { margin: 20px 0 4px; font-size: 13px; }
.files { list-style: none; margin: 8px 0 0; padding: 0; }
.files li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            border-top: 1px solid var(--line-soft); }
.files li:first-child { border-top: 0; }
.files a { display: flex; align-items: center; gap: 10px; padding: 10px 2px;
           font-size: 13.5px; font-weight: 600; color: var(--text); min-width: 0; }
.files a:hover { color: var(--accent); text-decoration: none; }
.files a svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
.file-size { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.webinar-body .files { margin-top: 10px; }
.webinar-body .files a { font-size: 12.5px; padding: 6px 2px; }

.questions { list-style: none; margin: 16px 0 0; padding: 0; }
.question { padding: 16px 0; border-top: 1px solid var(--line); }
.question:first-child { border-top: 0; padding-top: 2px; }
.question-head {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.028em; color: var(--text);
}
.question-mark { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
                 border-radius: 50%; display: grid; place-items: center; }
.question-mark svg { width: 13px; height: 13px; stroke-width: 2.4; }
.question.is-right .question-mark { background: var(--green-soft); color: var(--green); }
.question.is-wrong .question-mark { background: var(--danger-soft); color: var(--danger); }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.answer {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 14px; color: var(--text);
}
.answer-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.answer.is-correct { border-color: var(--green); background: var(--green-soft); }
.answer.is-correct .answer-dot { background: var(--green); }
.answer.is-chosen-wrong { border-color: var(--danger); background: var(--danger-soft); }
.answer.is-chosen-wrong .answer-dot { background: var(--danger); }
.answer-note { margin-left: auto; font-family: var(--mono); font-size: 10px;
               font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.answer.is-correct .answer-note { color: var(--green); }
.answer-pick { cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.answer-pick:hover { border-color: var(--accent-line); }
.answer-pick input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.answer-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.result-score { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.result-score .numeral { font-family: var(--display); font-size: clamp(34px, 3.4vw, 50px);
                         font-weight: 800; letter-spacing: -0.05em; }
.result.is-pass { border-color: var(--green); box-shadow: 0 0 44px -20px rgba(9,227,84,.6); }
.result.is-pass .result-score .numeral { color: var(--green); }

.qslot { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line);
         border-radius: var(--r-sm); background: rgba(255,255,255,.02); }
:root[data-theme="light"] .qslot { background: var(--surface-2); }
.qslot legend { padding: 0 8px; font-family: var(--mono); font-size: 10.5px;
                font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.qslot .field { margin-bottom: 12px; }
.qoptions { display: grid; gap: 8px; }
.qoption { display: flex; align-items: center; gap: 10px; }
.qoption input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.qoption input[type="text"] {
  flex: 1; min-width: 0; padding: 11px 14px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.qoption input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- Momente ------------------------------------------------------------ */

.moment {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--green-soft); border: 1px solid var(--green); color: var(--green);
  font-size: 14.5px; font-weight: 600;
  box-shadow: 0 0 36px -16px rgba(9,227,84,.7);
  animation: moment-in 420ms var(--ease) both;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.moment svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 2.4; }
.moment.is-gone { opacity: 0; transform: translateY(-6px); }
@keyframes moment-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Verwaltung: Tabs, Tabellen, Editoren ------------------------------- */

.tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 22px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill);
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--pill);
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-2);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.tab svg { width: 15px; height: 15px; }
a.tab:hover { background: rgba(255,255,255,.05); color: var(--text); text-decoration: none; }
.tab.is-active { background: var(--grad); color: var(--on-accent); box-shadow: 0 10px 22px -14px var(--glow); }

.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--pill); }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  text-align: left; padding: 0 16px 10px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}
table.list td { padding: 13px 16px 13px 0; border-top: 1px solid var(--line);
                vertical-align: middle; color: var(--text-2); white-space: nowrap; }
table.list tr:hover td { background: rgba(255,255,255,.02); }
.cell-mail { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cell-sub { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; white-space: nowrap; }
.cell-date { font-family: var(--mono); font-size: 12px; color: var(--text-3); white-space: nowrap; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.pill-blue { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.pill-navy { border-color: var(--line-2); background: var(--surface-3); color: var(--text); }
.pill-warn { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.toggle:hover { border-color: var(--accent-line); color: var(--text); }
.toggle:active { transform: scale(0.96); }
.toggle .box { width: 17px; height: 17px; border-radius: var(--r-xs); display: grid; place-items: center;
               border: 1.5px solid var(--line-2); color: transparent; }
.toggle .box svg { width: 11px; height: 11px; stroke-width: 2.6; }
.toggle.is-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.toggle.is-on .box { background: var(--grad); border-color: transparent; color: var(--on-accent); }

/* Auch als Verweis benutzt (die Zeile in der Nutzerliste), deshalb eine
   eigene Anzeige statt der eines Knopfes. */
.linkbtn {
  display: inline-flex; align-items: center;
  padding: 7px 12px; border-radius: var(--pill);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-3);
  background: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.linkbtn:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); text-decoration: none; }
.linkbtn-quiet:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.row-actions { display: flex; align-items: center; gap: 4px; }

.mini-thumb { display: block; width: 88px; height: 50px; border-radius: var(--r-xs); object-fit: cover;
              background: var(--grad-art); border: 1px solid var(--line); }
.mini-thumb-empty { display: grid; place-items: center; color: rgba(255,255,255,.7); }
.mini-thumb-empty svg { width: 18px; height: 18px; }

.editor { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-card);
          background: rgba(255,255,255,.02); overflow: hidden; }
:root[data-theme="light"] .editor { background: var(--surface-2); }
.editor > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--text);
  transition: background var(--t) var(--ease);
}
.editor > summary::-webkit-details-marker { display: none; }
.editor > summary:hover { background: rgba(255,255,255,.04); }
.editor > summary svg { width: 15px; height: 15px; }
.editor[open] > summary { border-bottom: 1px solid var(--line); }
.editor .form { margin: 16px 18px 4px; }
.editor > .inline-form { margin: 0 18px 14px; }
.editor .files { margin: 0 18px; }
.editor-title { flex: 1; min-width: 0; }
.editor-title strong { display: block; }
.editor-title span { display: block; font-family: var(--font); font-size: 12px;
                     font-weight: 400; color: var(--text-3); }
.editor-thumb { flex: 0 0 auto; display: inline-flex; }
.editor-lesson > summary .mini-thumb { width: 72px; height: 41px; }
.editor-new > summary { color: var(--accent); }
.editor-note { margin: 0 18px 10px; }
.files-admin li { border-top: 1px solid var(--line-soft); }

.plan-list { margin: 12px 0 0; padding: 0; list-style: none; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
                font-size: 13.5px; color: var(--text-2); border-top: 1px solid var(--line); }
.plan-list li:first-child { border-top: 0; }
.plan-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--accent); }

code { padding: 2px 7px; border-radius: var(--r-xs); background: var(--accent-soft);
       font-family: var(--mono); font-size: 0.9em; color: var(--accent); }

/* --- Anmeldung und Passwort-Seiten -------------------------------------- */

/* Die Hülle der Anmeldeseiten.
 *
 * Sie stand lange auf `overflow: hidden` mit `place-items: center` — und
 * das ist die klassische Falle: solange die Karte kleiner ist als das
 * Fenster, sieht es gut aus; wird sie größer (ein längeres Formular,
 * ein niedriges Laptop-Fenster, das Handy quer), zentriert das Raster
 * sie weiter und schiebt sie dabei oben und unten aus dem Bild. Was
 * herausragt, schneidet `overflow: hidden` ab. Der Knopf ist dann nicht
 * schwer zu finden, sondern nicht vorhanden.
 *
 * Deshalb: kein `overflow: hidden`, und zentriert wird über
 * `margin: auto` am Kind statt über `place-items`. Automatische
 * Außenabstände zentrieren genauso, drücken aber nie über den Anfang
 * des scrollbaren Bereichs hinaus — im Gegensatz zu `center` in Grid
 * und Flexbox.
 *
 * `100dvh` mit `100vh` als Rückfall: auf dem Handy zählt `vh` die
 * Adressleiste mit, und die Seite bekäme sonst eine Höhe, die es gar
 * nicht gibt. */
.auth-body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  padding: 40px 20px;
}
/* Beide Schmuckebenen liegen jetzt `fixed` statt `absolute`. Damit
   spannen sie das Fenster auf und nicht das Dokument: sie können den
   scrollbaren Bereich nicht mehr vergrößern (der Schein ragte 300 px
   über die Kante hinaus), und beim Scrollen bleibt der Verlauf ruhig
   stehen, statt mit der Karte zu wandern. `pointer-events: none`, damit
   sie nichts abfangen, was darunter liegt. */
.auth-body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(90% 70% at 50% 40%, #000, transparent 75%);
}
.auth-body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  top: -300px; left: 50%; width: 900px; height: 900px; margin-left: -450px;
  background: radial-gradient(circle,
    rgba(var(--accent-rgb), calc(var(--glow-top) * 2.2)) 0%,
    rgba(var(--violet-rgb), calc(var(--glow-side) * 1.4)) 42%,
    transparent 66%);
  animation: auth-drift 20s ease-in-out infinite alternate;
}
@keyframes auth-drift {
  from { transform: translate3d(-4%, 0, 0) scale(1); opacity: .9; }
  to { transform: translate3d(4%, 4%, 0) scale(1.1); opacity: 1; }
}
/* `margin: auto` zentriert in beide Richtungen und hält die Karte
   trotzdem im scrollbaren Bereich — siehe die Erklärung an `.auth-body`.
   Bei kleinen Fensterhöhen steht sie dann oben und der Rest ist
   erscrollbar, statt oben und unten abgeschnitten zu sein. */
.authbox {
  position: relative; z-index: 1; margin: auto;
  width: 100%; max-width: 420px; text-align: center;
}
.auth-logo { display: inline-block; margin-bottom: 12px; }
.auth-logo img { display: block; width: 230px; max-width: 70vw; height: auto;
                 filter: drop-shadow(0 0 30px var(--glow)); }
:root[data-theme="light"] .auth-logo img { filter: none; }
.auth-kicker {
  margin: 0 0 24px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-3);
}
.card {
  background-color: var(--surface); background-image: var(--grad-soft);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 28px;
}
/* Die Anmeldekarte hat eigene Formularregeln, und zwar nur sie: im
   Mitgliederbereich steht ein Formular zwischen Listen und Tabellen und
   darf kräftig sein. Auf einer Anmeldeseite IST das Formular die Seite —
   dort wirkt jede gefüllte Kachel laut. Also flache Felder mit dezentem
   Rand, ruhige Beschriftungen und Luft dazwischen. */
.card-auth {
  text-align: left;
  /* Oben etwas mehr als unten, seitlich gleich: eine Karte, die unten
     denselben Abstand hat wie oben, sieht aus, als rutsche ihr Inhalt
     nach unten. */
  padding: 34px 30px 30px;
  border-radius: var(--r-lg);
  border-color: var(--line);
  box-shadow: var(--shadow-lift);
}
.card-auth .eyebrow { margin-bottom: 10px; }
/* Die Leuchtlinie ist eine Sektionsmarke. Über einer einzelnen Karte
   markiert sie nichts und macht nur den Kopf unruhig. */
.card-auth .eyebrow::after { display: none; }
.card-auth h1 { font-size: 27px; line-height: 1.2; margin-bottom: 0; }

/* Der Satz unter der Überschrift. Er erklärt, er wirbt nicht — deshalb
   Fließtext und keine Fläche. */
.auth-sub {
  margin: 12px 0 0;
  font-size: 14px; line-height: 1.6; color: var(--text-2);
}
.auth-sub strong { color: var(--text); font-weight: 600; }

.card-auth .form { margin: 24px 0 0; }
/* Die Luft steht zwischen den Paaren, nicht in ihnen: Beschriftung und
   Feld rücken zusammen (4 px), der nächste Abstand ist fünfmal so groß.
   Vorher war beides fast gleich weit, und dann liest man eine Reihe
   einzelner Zeilen statt vier Paare. */
.card-auth .field { margin-bottom: 22px; }
.card-auth .field > span {
  margin-bottom: 4px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.card-auth .field span i { font-size: 12.5px; font-weight: 400; }
/* Feste Höhe statt Innenabstand: so ist jedes Feld gleich hoch, egal was
   der Browser aus Schriftgröße und Zeilenhöhe macht. */
.card-auth .field input {
  height: 46px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
}
/* Vor- und Nachname stehen in einem Raster; dort setzt der Abstand
   zwischen den Zeilen das Raster, nicht das einzelne Feld. */
.card-auth .field-pair { margin-bottom: 22px; }
.card-auth .field-pair .field { margin-bottom: 0; }
.card-auth .field input:hover:not(:focus) { border-color: var(--text-3); }
/* Ruhig heißt: eine Kante, die sich färbt, und ein schwacher Saum — kein
   Leuchten. Der Knopf soll das Hellste auf der Karte bleiben. */
.card-auth .field input:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Der kleine Satz unter einem Feld. Er gehört zu dem Feld über ihm und
   steht deshalb mit im <label>: wer ihn antippt, landet im Feld. */
.field-hint {
  display: block; margin-top: 7px;
  font-size: 12px; line-height: 1.45; color: var(--text-3);
}

/* Die beiden Kästchen über dem Knopf: Zustimmung (Pflicht) und der
   freiwillige Wunsch nach Post. Sie ersetzen den Absatz Kleingedrucktes,
   der früher unter dem Formular stand — was in der Datenschutzerklärung
   steht, gehört in die Datenschutzerklärung, verlinkt und nicht
   nacherzählt. */
.consent { margin: 24px 0 12px; }
.card-auth .checkline { margin-bottom: 12px; font-size: 13.5px; line-height: 1.5; }
.card-auth .checkline:last-child { margin-bottom: 0; }
/* Eine Nuance leiser als die Feldbeschriftungen: das hier ist die
   Bedingung, nicht die Frage. Der leiseste Ton der Palette — und der
   trägt auf der Karte nachgerechnet über 4,5:1. */
.card-auth .checkline span { color: var(--text-3); }
.card-auth .checkline a { text-decoration: underline; text-underline-offset: 2px; }

/* Das Kästchen zeichnet die Seite selbst. Der Browser-Standard bringt
   seine eigene Kante, seine eigene Rundung und sein eigenes Grau mit —
   auf einer Karte, an der jede andere Kante aus denselben zwei Tokens
   kommt, ist das der eine Fleck, der nicht dazugehört.
   `appearance: none` nimmt ihm alles weg, danach ist es ein Kasten wie
   jeder andere: Kartenfläche, feine Kante, kleine Rundung. */
.card-auth .checkline input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  /* Auf der ersten Textzeile ausgerichtet und nicht am Absatz: bei zwei
     Zeilen Text stünde das Kästchen sonst in der Mitte daneben.
     (20 px Zeilenhöhe − 18 px Kästchen) / 2. */
  margin: 1px 0 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xxs);
  background: var(--surface-2);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card-auth .checkline input:hover { border-color: var(--accent-line); }
/* Das Häkchen liegt als Bild im Hintergrund und nicht in einem
   ::after — Eingabefelder sind ersetzte Elemente, und ob sie
   Pseudo-Elemente bekommen, hält nicht jeder Browser gleich. */
.card-auth .checkline input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.7 4.7L19 7.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.card-auth .form .btn { margin-top: 10px; }
.card-auth > .btn { margin-top: 24px; }
/* Was nach dem Knopf passiert, steht unter dem Knopf — klein, weil es
   niemanden aufhalten soll. */
.form-note {
  margin: 14px 0 0;
  font-size: 12.5px; line-height: 1.55; color: var(--text-3);
}
/* Die Wege von der Karte weg: Registrieren, Passwort vergessen, zurück
   zum Login. */
.authlinks { margin: 18px 0 0; font-size: 13.5px; color: var(--text-2); }
.authlinks + .authlinks { margin-top: 8px; }

/* Ein Knopf, der wie ein Verweis aussieht — „Überspringen", „Abmelden".
   Beide sind ein POST und dürfen deshalb kein <a> sein, sehen aber aus
   wie das, was sie tun: ein Weg und keine Handlung. */
.linkish {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--text); }

/* Die Chips der Herkunfts-Karte: jeder ist ein eigener Absende-Knopf,
   eine Antwort ist ein Klick. */
.chips-source { gap: 10px; margin: 24px 0 0; }
.chips-source .chip { padding: 10px 18px; font-size: 13.5px; }
button.chip { font-family: inherit; cursor: pointer; }
button.chip:hover { border-color: var(--accent-line); color: var(--text); }
button.chip:active { transform: scale(0.97); }

/* Der Zweizeiler über dem Registrierungsformular: was man bekommt. Er
   trägt eine eigene Fläche, damit er nicht als Kleingedrucktes unter der
   Überschrift verschwindet — aber eine ruhige und keinen Verlauf: der
   Knopf darunter soll das Lauteste auf der Karte bleiben. */
.auth-lead {
  margin: 20px 0 0; padding: 11px 14px;
  /* Kein Rahmen ringsum mehr: ein zweiter Kasten in der Karte macht aus
     einem Hinweis eine Warnung. Was bleibt, ist der Strich links — er
     sagt „hierher gehört der Blick" und hört danach auf zu reden. */
  border: 0; border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--line-soft);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.auth-lead b { color: var(--text); font-weight: 700; }
.authfoot { margin: 22px 0 0; font-family: var(--mono); font-size: 11px; }
.authfoot a { color: var(--text-3); }
.authfoot a:hover { color: var(--text); }
/* Unter der Adresse und nicht daneben: die Karte ist 420 px breit, vier
   Verweise nebeneinander passten dort nur mit der Lupe. */
.authfoot .legal-links { display: block; margin-top: 9px; line-height: 2; }
.authfoot .legal-links a:hover { color: var(--accent); }

/* --- Darstellung-Umschalter --------------------------------------------- */

.theme-switch { display: flex; gap: 8px; margin-top: 6px; }
.theme-option {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.theme-option svg { width: 16px; height: 16px; }
.theme-option:hover { border-color: var(--accent-line); color: var(--text); }
.theme-option:active { transform: scale(0.97); }
.theme-option.is-active { border-color: transparent; background: var(--grad); color: var(--on-accent);
                          box-shadow: 0 10px 22px -14px var(--glow); }

/* --- Handy -------------------------------------------------------------- */

@media (max-width: 900px) {
  .sidebar {
    width: 280px; transform: translateX(-100%); visibility: hidden;
    transition: transform var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
    box-shadow: 0 0 50px rgba(0,0,0,.7);
  }
  .navtoggle:checked ~ .sidebar {
    transform: translateX(0); visibility: visible;
    transition: transform var(--t-slow) var(--ease), visibility 0s;
  }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(4,4,8,.7); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease);
  }
  .navtoggle:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

  .content { margin-left: 0; }
  .navburger {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: var(--r-icon); border: 1px solid var(--line-2);
    background: var(--surface-2); color: var(--text); cursor: pointer;
    transition: transform var(--t-fast) var(--ease);
  }
  .navburger:active { transform: scale(0.94); }
  .navburger svg { width: 18px; height: 18px; }
  .navtoggle:focus-visible ~ .content .navburger { outline: 2px solid var(--accent); outline-offset: 2px; }

  .page { padding-bottom: 48px; }
  .foot { padding-bottom: 28px; }
  .hero-row { grid-template-columns: 1fr; gap: 24px; }
  .ring { width: 130px; justify-self: start; }
  .hero-panel h1 { font-size: clamp(34px, 9vw, 46px); }
  .resume { grid-template-columns: 1fr; }
  .resume-thumb { min-height: 170px; }
  .grid, .grid-fit, .webinars { grid-template-columns: 1fr; }
  .tile:hover, .resume:hover, .stat:hover, .webinar:hover { transform: none; }
  .tile:hover .thumb-art { transform: none; }
  .tile-account { flex-direction: column; }
  .tile-account .tile-thumb { flex: 0 0 auto; aspect-ratio: 16/7; }
  .lesson-thumb { width: 60px; height: 34px; }
  .editor-lesson > summary .mini-thumb { display: none; }
  .tab { padding: 8px 12px; font-size: 12.5px; }
  .card-links { flex-direction: column; align-items: stretch; }
  .progress-wide { flex-wrap: wrap; }
  .progress-note { width: 100%; }
}

@media (max-width: 560px) {
  .card-auth { padding: 26px 20px 22px; }
  .card-auth h1 { font-size: 23px; }
  .stat { padding: 20px 20px; }
  .tile-body { padding: 18px 18px 20px; }
}

/* --- Logo je Erscheinungsbild ------------------------------------------- */

img.logo-light { display: none; }
:root[data-theme="light"] img.logo-dark { display: none; }
:root[data-theme="light"] img.logo-light { display: block; }

/* --- Motion ------------------------------------------------------------- */

.js-ready .js-reveal {
  opacity: 0; transform: translateY(10px);
  animation: reveal 380ms var(--ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* Aufsteigen — dieselbe Bewegung für zwei Auslöser (siehe becro.js):
   `[data-stagger]` gibt sie seinen Kindern beim Laden mit versetztem
   Takt, `[data-rise]` erst, wenn das Element in den Blick kommt. Bis
   dahin liegen sie auf null — aber nur unter `.js-ready`, also nur wenn
   das Skript wirklich läuft. Ohne Skript ist alles einfach da.

   Etwas länger und weicher als `reveal`: ein halber Wimpernschlag, der
   auffällt, wenn man darauf achtet, und sonst nicht. */
.js-ready [data-rise],
.js-ready [data-stagger] > * { opacity: 0; }
.js-ready [data-rise].js-rise,
.js-ready [data-stagger] > .js-rise {
  opacity: 0; transform: translateY(14px);
  animation: rise 500ms cubic-bezier(0.16, 0.84, 0.32, 1) forwards;
  animation-delay: var(--rise-delay, 0ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }
/* Oben angekommen: dieselbe Sichtbarkeit, aber ohne Animation dahinter.
   becro.js tauscht die Klasse, sobald das Aufsteigen vorbei ist — sonst
   hielte die Animation ihren Endwert (`forwards`) für immer fest und
   nähme jeder Karte das Anheben beim Überfahren wieder weg. */
.js-ready [data-rise].js-shown,
.js-ready [data-stagger] > .js-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-ready .js-reveal { opacity: 1; transform: none; }
  /* Doppelt genäht: `init` kommt hier ohnehin nicht an, aber ein
     Stylesheet, das ohne sein Skript etwas versteckt, wäre eine
     Zeitbombe. */
  .js-ready [data-rise],
  .js-ready [data-stagger] > *,
  .js-ready [data-rise].js-rise,
  .js-ready [data-stagger] > .js-rise { opacity: 1; transform: none; }
  .tile:hover, .resume:hover, .btn:hover, .stat:hover, .webinar:hover { transform: none; }
  .check svg path { stroke-dashoffset: 0; }
}

/* Kategorie und Ablauf in der Verwaltungstabelle: Felder und Knopf in
   einer Zeile, damit die Spalte nicht auseinanderfällt. */
.cell-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-slim { padding: 7px 10px; font-size: 12.5px; min-width: 150px; }
.input-slim { padding: 7px 10px; font-size: 12.5px; width: 74px; }

/* Notiz des Coaches auf der Session-Karte — leiser als der Termin. */
.webinar-note-text {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}

/* --- Markt heute -------------------------------------------------------- */

/* Zwei Flächen nebeneinander, ab Tabletbreite gestapelt. Beide wachsen mit
   dem Fenster mit — wie alle Raster hier. */
.market {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(12px, 1.1vw, 18px);
  margin-bottom: clamp(20px, 2vw, 32px);
}
.market .panel { display: flex; flex-direction: column; }
.market .panel + .panel { margin-top: 0; }

/* Der Kalender kommt als fremde Seite; Rahmen und Fläche stellen wir. */
.calendar-frame {
  flex: 1; width: 100%; min-height: 420px;
  border: 0; border-radius: var(--r-sm);
  background: var(--surface-2);
  color-scheme: normal;
}

/* Schlagzeilen: eine Liste, jede Zeile ein Ziel. */
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.news li + li { border-top: 1px solid var(--line); }
.news a {
  display: block; padding: 13px 2px;
  color: inherit; transition: color var(--t) var(--ease);
}
.news a:hover { text-decoration: none; color: var(--accent); }
.news-title { display: block; font-size: 14px; line-height: 1.45; }
.news-meta {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

/* Abgelaufen — in der Verwaltung, wo es noch sichtbar bleibt. */
.pill-off {
  border-color: var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--text-3);
}


/* Sammel-Einladung: Zählerzeile und die nackten Adresslisten im Bericht. */
.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.plain-list {
  margin: 10px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
}
.plain-list li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.plain-list li:last-child { border-bottom: 0; }


/* --- Kommentare unter den internen Videos ---------------------------------
   Nur die Bibliothek hat sie; der Videokurs bleibt bewusst ohne. Das Feld
   steht oben, die Beiträge darunter — neueste zuerst. */

.comments { margin-top: 26px; }

/* Der Kreis mit den Initialen. Feste Größe, damit die Textspalte bei
   jedem Namen an derselben Kante beginnt. */
.c-avatar {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
  user-select: none;
}
.c-avatar-admin {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent);
}

/* --- Eingabe --- */
.c-form { margin: 4px 0 22px; }
.c-form-row { display: flex; gap: 12px; align-items: flex-start; }
.c-input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 14.5px; line-height: 1.5;
  resize: vertical;
}
.c-input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.c-form-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
  margin-top: 10px; padding-left: 50px;
}
.c-form-reply .c-form-foot { padding-left: 0; }
.c-form-foot .btn { margin-top: 0; }
.c-hint { color: var(--text-3); font-size: 12.5px; }
.c-error { margin: 12px 0 0 50px; }

/* --- Der Bezug einer Antwort ---------------------------------------------
   Antworten stehen flach, alle auf einer Ebene. Wer gemeint war, steht
   deshalb im Text und nicht in der Einrückung — nach drei Stufen wäre
   eine Zeile auf dem Handy zwei Wörter breit. */
.c-at { font-weight: 600; color: var(--accent); }

/* --- Das angehängte Bild -------------------------------------------------
   Klein gehalten: es ist ein Beleg neben dem Text, keine Bühne. Der
   Klick öffnet es groß (becro.js). Der dunkle Rahmen fasst es ein —
   Chart-Ausschnitte sind oft hell, und eine helle Fläche ohne Fassung
   sitzt hart auf dem dunklen Grund. */
.c-shot {
  display: block; margin-top: 10px; padding: 0; cursor: zoom-in;
  max-width: 340px; border-radius: var(--r-sm); overflow: hidden;
  border: 2px solid var(--surface-3);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--grad-art);
  transition: border-color var(--t) var(--ease);
}
.c-shot:hover { border-color: var(--line-2); }
.c-shot img { display: block; width: 100%; height: auto; }

/* --- Die vergebenen Reaktionen -------------------------------------------
   Nur die Emojis, die es wirklich gibt. Die Auswahl aller möglichen
   liegt im Popover neben „Antworten“ — eine feste Reihe aus sechs
   Knöpfen unter jedem Beitrag war eine Klaviatur, und unter einem
   Kommentar ohne jede Reaktion stand sie leer da.

   Die Reihenfolge ist die der Auswahl und nicht die der Anzahl: eine
   Plakette, die beim Draufklicken den Platz wechselt, trifft man beim
   zweiten Mal nicht mehr. */
.c-react {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.c-react form { margin: 0; }
.c-react-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--pill); cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-3); line-height: 1;
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.c-react-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.c-react-btn:active { transform: scale(0.94); }
/* Was man selbst gedrückt hat, trägt den Akzent — das ist die einzige
   Auskunft, die der Knopf über einen selbst gibt. */
.c-react-btn.is-on {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent);
}
.c-react-emoji { font-size: 14px; }
/* Die Zahl in der Zahlenschrift, damit die Knöpfe beim Hochzählen nicht
   die Breite wechseln. */
.c-react-count {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.c-react-btn.is-on .c-react-count { color: var(--accent); }

/* --- Der Auswahl-Popover -------------------------------------------------
   Ein <details>, wie alles Aufklappbare hier: kein Skript nötig. Der
   Knopf ist der <summary>, das Menü hängt darüber und nimmt keinen Platz
   in der Zeile — sonst schöbe es beim Öffnen die Aktionen auseinander.

   Nach der Wahl tauscht HTMX die ganze Sektion, damit ist der Popover
   von selbst wieder zu. becro.js schließt ihn zusätzlich beim Klick
   daneben und mit Escape. */

.c-pick { position: relative; }
.c-pick > summary { list-style: none; }
.c-pick > summary::-webkit-details-marker { display: none; }
.c-pick-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-3);
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease), color var(--t) var(--ease);
}
.c-pick-btn svg { width: 15px; height: 15px; }
.c-pick-btn:hover { border-color: var(--line-2); color: var(--text-2); }
.c-pick[open] > .c-pick-btn {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent);
}

/* Nach unten und nicht nach oben: der Knopf steht unter dem Beitrag, und
   nach oben legte sich das Menü über den Text, den man gerade liest.
   Darunter liegt eine Antwort oder nichts — beides verzeiht es eher. */
.c-pick-menu {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: -4px;
  display: flex; gap: 2px; padding: 5px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--surface-3);
  box-shadow: var(--shadow-lift);
}
.c-pick-menu form { margin: 0; }
.c-pick-one {
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent;
  font-size: 17px; line-height: 1;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.c-pick-one:hover { background: rgba(255, 255, 255, 0.08); transform: scale(1.12); }
:root[data-theme="light"] .c-pick-one:hover { background: rgba(12, 16, 32, 0.07); }
.c-pick-one:active { transform: scale(0.94); }

/* Am rechten Rand kippt das Menü nach innen, damit es nicht aus der
   Karte läuft. Auf dem Handy steht der Knopf ohnehin links. */
@media (max-width: 560px) {
  .c-pick-menu { left: -8px; }
  .c-pick-one { width: 34px; height: 34px; }
}


/* --- Das Feld für ein Bild -----------------------------------------------
   Ein Dateifeld sieht in jedem Browser anders aus, deshalb steht das
   echte unsichtbar hinter dem Etikett. Es bleibt bedienbar: das <label>
   gehört über `for` dazu, und mit der Tastatur führt der Weg über das
   Feld selbst — `sr-only` statt `display: none`, sonst wäre es aus dem
   Fokuslauf verschwunden. */
.c-file {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--pill); cursor: pointer;
  border: 1px dashed var(--line-2); background: transparent;
  font-size: 12.5px; color: var(--text-3);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.c-file:hover { border-color: var(--accent-line); color: var(--text-2); }
.c-file svg { width: 14px; height: 14px; }
.c-file input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Ist eine Datei gewählt, sagt das der Browser nicht von selbst — becro.js
   schreibt den Namen ins Etikett und setzt diese Klasse. */
.c-file.is-set {
  border-style: solid; border-color: var(--accent-line); color: var(--accent);
}
.c-file.is-set svg { color: var(--accent); }

/* Der Fuß trägt jetzt drei Dinge statt zwei: Feld, Hinweis, Knopf. Der
   Hinweis nimmt den Platz dazwischen und darf als Erstes umbrechen. */
.c-form-foot .c-hint { flex: 1; min-width: 0; }

@media (max-width: 560px) {
  .c-form-foot { padding-left: 0; gap: 9px; }
  .c-form-foot .c-hint { flex-basis: 100%; order: 3; }
  .c-shot { max-width: 100%; }
}


/* --- Liste --- */
.c-list, .c-replies { list-style: none; margin: 0; padding: 0; }
.c-item { padding: 16px 0; border-top: 1px solid var(--line); }
.c-list > .c-item:first-child { border-top: 1px solid var(--line-2); }
.c-row { display: flex; gap: 12px; align-items: flex-start; }
.c-content { flex: 1; min-width: 0; }

.c-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 5px;
}
.c-name {
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  color: var(--text); letter-spacing: -0.01em;
}
.c-badge {
  padding: 2px 8px; border-radius: var(--pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--display); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em;
}
.c-time { color: var(--text-3); font-size: 12.5px; }

/* Absätze so lassen, wie sie getippt wurden — ohne HTML zuzulassen. */
.c-text {
  margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- Aktionen --- */
.c-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 9px;
}
.c-actions-form { margin: 0; }
.c-link {
  padding: 0; border: 0; background: none;
  color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.c-link:hover { color: var(--accent); }
.c-link::-webkit-details-marker { display: none; }
.c-reply { display: inline-block; }
.c-reply[open] { display: block; width: 100%; }
.c-reply[open] > .c-link { color: var(--accent); margin-bottom: 10px; }
.c-form-reply { margin: 0; }

/* Die eine Antwort-Ebene: eingerückt mit Linie, tiefer geht es nicht. */
.c-replies {
  margin: 14px 0 0; padding-left: 16px;
  border-left: 2px solid var(--line-2);
}
.c-replies .c-item { padding: 12px 0; border-top: 0; }
.c-replies .c-avatar { width: 30px; height: 30px; font-size: 11.5px; }

.c-empty { margin: 8px 0 0; }

/* Zähler auf der Kachel. */
/* Die zwei Angaben unter einer Aufzeichnung: von wann sie ist, und wie
   lange sie noch da ist. Dieselbe Typografie wie die Kommentarzeile
   darunter — es ist dieselbe Sorte Nebenauskunft. */
.tile-facts {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 10px 0 0; color: var(--text-3); font-size: 12.5px;
}
.tile-fact { display: inline-flex; align-items: center; gap: 6px; }
.tile-fact svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Die Frist ist die einzige Angabe, die drängt. */
.tile-fact.is-warn { color: var(--amber); }

.tile-comments {
  display: flex; align-items: center; gap: 6px;
  margin: 10px 0 0; color: var(--text-3); font-size: 12.5px;
}
.tile-comments svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Auf dem Handy sitzt die Sektion direkt unter dem Player — dort ist die
   Einrückung Platzverschwendung, und der Knopf darf die volle Breite. */
@media (max-width: 560px) {
  .c-form-foot { padding-left: 0; }
  .c-error { margin-left: 0; }
  .c-form-foot .btn { width: 100%; }
  .c-avatar { width: 32px; height: 32px; font-size: 12px; }
  .c-replies { padding-left: 11px; }
}


/* --- Dashboard: Begrüßung, Hero, Kennzahlen -------------------------------
   Die Idea of the Day trägt die Seite. Alles darüber ist flach gehalten,
   damit der Hero die erste große Fläche ist, die das Auge trifft. */

/* Eine Zeile, kein Kasten: Name links, Ring rechts, ~80px hoch. */
.welcome {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 64px; margin-bottom: 22px;
}
.welcome-text { min-width: 0; }
.welcome h1 {
  margin: 0;
  font-family: var(--display); font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.2;
}
.welcome .badges { margin-top: 8px; }
.welcome .badge { padding: 4px 10px; font-size: 9.5px; }

/* Derselbe Ring wie bisher, nur klein — er ist hier Beiwerk. */
.ring-sm { width: 68px; flex: 0 0 68px; box-shadow: none; }
.ring-sm::after { inset: 6px; }
.ring-sm .ring-value b { font-size: 16px; letter-spacing: -0.03em; }
.ring-sm .ring-value span { font-size: 7px; letter-spacing: 0.14em; }

/* --- Der Hero ------------------------------------------------------------
   Ein Billboard im Kino-Schnitt, kein 16:9-Bild: die Höhe ist gesetzt,
   das Vorschaubild wird vertikal mittig angeschnitten. 45vh trifft auf
   einem 1080p-Schirm die 440px-Obergrenze und schrumpft auf flacheren
   Fenstern mit, damit die neuesten Videos darunter immer anreißen.
   Der Text sitzt als Bauchbinde unten links über einem Verlauf von
   unten — der trägt ihn auch auf einem hellen Vorschaubild. */
.feature {
  position: relative; display: block; overflow: hidden;
  width: 100%; height: clamp(300px, 45vh, 440px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Der Verlauf liegt immer darunter: fehlt das Vorschaubild, trägt die
   Fläche ihn allein statt eines grauen Lochs. */
.feature-media {
  position: absolute; inset: 0;
  background: var(--grad-hero), var(--surface-2);
}
.feature-media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease);
}

/* Zwei Verläufe: von links für den Text, von unten für den Rand. Kräftig
   genug, dass auch weiße Vorschaubilder den Text tragen. */
.feature::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Kräftig von unten, weil die Vorschaubilder oft helle Screenshots mit
     Nachrichtenfenstern sind; der schwache Verlauf von links fängt nur
     den Kicker ab, der am weitesten oben steht. */
  background:
    linear-gradient(0deg, rgba(6,6,10,.97) 0%, rgba(6,6,10,.90) 32%,
                    rgba(6,6,10,.55) 62%, rgba(6,6,10,.12) 100%),
    linear-gradient(90deg, rgba(6,6,10,.55) 0%, transparent 55%);
}

.feature-body {
  position: absolute; z-index: 2; inset: auto 0 0 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 0 clamp(22px, 3vw, 52px) clamp(22px, 2.6vw, 40px);
  max-width: 92ch;
}
.feature-kicker {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.feature-title {
  margin: 0;
  font-family: var(--display); font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.06;
  max-width: 22ch; color: #fff;
}
.feature-lead {
  margin: 0; max-width: 56ch; min-width: 0;
  color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.55;
  /* Eine Zeile: neben dem Knopf ist für mehr kein Platz. */
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Beschreibung und Knopf nebeneinander. `flex: 0 1 auto` an der
   Beschreibung sorgt dafür, dass der Knopf direkt hinter dem Text sitzt
   und nicht ans andere Ende der Fläche geschoben wird. */
.feature-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  width: 100%; margin-top: 12px;
}
.feature-row .feature-lead { flex: 0 1 auto; }
.feature-btn { flex: 0 0 auto; margin-top: 0; pointer-events: none; }

/* Dauer oben rechts, wie auf einer Kachel. */
.feature-duration {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--pill);
  background: rgba(6, 6, 10, 0.66); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px; color: #fff;
}
.feature-duration svg { width: 13px; height: 13px; }

/* Hover hellt auf — nur dort, wo die Fläche wirklich verlinkt ist. */
a.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
a.feature:hover .feature-media img { transform: scale(1.02); filter: brightness(1.12); }
.feature-empty { cursor: default; }

/* --- Kennzahlen als Zeile ------------------------------------------------
   Klein, einfarbig, mit Punkttrennern. Bewusst kein Kasten: es sind
   Randnotizen, keine Kacheln. */
.stat-line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 16px 0 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em;
  color: var(--text-3);
}
.stat-line span { display: inline-flex; align-items: baseline; gap: 14px; }
.stat-line span + span::before { content: "·"; color: var(--line-2); }

@media (max-width: 700px) {
  /* Auf dem Handy trägt ein 16:9-Bild den Text nicht mehr — die Fläche
     wird höher, und der Verlauf kommt von unten statt von links. */
  .feature { height: clamp(240px, 38vh, 290px); }
  .feature::before {
    background: linear-gradient(0deg, rgba(6,6,10,.97) 0%,
                rgba(6,6,10,.88) 38%, rgba(6,6,10,.42) 72%, rgba(6,6,10,.1) 100%);
  }
  .feature-body { max-width: none; padding: 0 20px 20px; }
  .feature-title { font-size: clamp(20px, 5.6vw, 27px); max-width: none; }
  /* Nebeneinander wird es zu eng — Beschreibung raus, Knopf über die
     volle Breite. Der Titel sagt ohnehin, worum es geht. */
  .feature-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .feature-lead { display: none; }
  .feature-btn { align-self: stretch; width: 100%; justify-content: center; }
  .welcome { min-height: 0; }
  .welcome .ring-sm { width: 56px; flex-basis: 56px; }
}


/* --- Daily Briefing -------------------------------------------------------
   Aufbau wie das gedruckte Brief: Kicker, Leitsatz, Key Zones, Themen als
   Karten, Termine-Leiste. Die Typografie folgt dem Rest des Bereichs, nur
   die Headline darf hier so groß werden wie sonst nur ein Hero. */

/* --- Im Fokus ---
   Der Sonderartikel steht über der Headline und darf sie trotzdem nicht
   übertönen: kein Panel-Schatten, keine Fläche, nur eine Kante an der
   Seite und der Text. Was auffällt, ist die Position — nicht die Farbe. */
.brief-focus {
  /* Angesprungen wird der Block vom Dashboard aus. Ohne den Abstand
     schöbe die klebende Topbar sich über seine erste Zeile. */
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  margin-bottom: clamp(26px, 2.8vw, 40px);
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 28px);
  border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); background: var(--surface-2);
}
.brief-focus + .brief-focus { margin-top: calc(-1 * clamp(14px, 1.4vw, 20px)); }
.brief-focus-tag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.brief-focus-tag svg { width: 13px; height: 13px; }
.brief-focus-title {
  margin: 0 0 12px; max-width: 40ch;
  font-family: var(--display); font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.22;
}
/* Die Datumszeile schließt den Kopf des Artikels ab. Sie steht wie der
   Titel über beiden Spalten — beides gehört zum Artikel und nicht in
   seinen Textfluss. Die Linie darunter ist die Kante, an der der Satz
   beginnt. */
.brief-focus-date {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  padding-bottom: clamp(12px, 1.4vw, 16px);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

/* Der Artikeltext läuft zweispaltig über die volle Breite des Blocks —
   wie im gedruckten Brief. Zwei Spalten und nicht drei: bei der Breite,
   die dieser Block hat, trägt die halbe Spalte noch einen Absatz, ein
   Drittel nicht mehr.

   `columns` bricht am Spaltenende von selbst nach rechts oben um; die
   Zwischentitel laufen dabei mit, weil sie im selben Fluss stehen und
   kein `column-span` tragen. Nur was oberhalb von .brief-focus-body
   steht, geht über beide Spalten. */
.brief-focus-body {
  columns: 2; column-gap: clamp(28px, 3.4vw, 56px);
  column-rule: 1px solid var(--line);
  color: var(--text-2); font-size: 15px; line-height: 1.7;
}
.brief-focus-body p {
  margin: 0 0 13px;
  overflow-wrap: anywhere;
  /* Einen Absatz nicht mitten durchschneiden, wo es sich vermeiden
     lässt. Ist ein Absatz höher als die Spalte, bricht der Browser ihn
     trotzdem — das ist richtig so, sonst entstünde eine Lücke, die
     größer wäre als der Schaden. */
  break-inside: avoid;
}
.brief-focus-body p:last-child { margin-bottom: 0; }
.brief-focus-body strong { color: var(--text); font-weight: 600; }

/* Ein Zwischentitel, der als letzte Zeile einer Spalte steht, hat seinen
   Text verloren — `break-after: avoid` zieht ihn mit hinüber. Der erste
   bekommt keinen Abstand nach oben: er steht schon an der Kante. */
.brief-focus-body h3 {
  margin: 20px 0 9px;
  font-family: var(--display); font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--text);
  break-after: avoid; break-inside: avoid;
}
.brief-focus-body > h3:first-child { margin-top: 0; }

/* Auf einem schmalen Schirm trägt keine halbe Spalte mehr einen Absatz —
   dort steht der Artikel einspaltig, und die Trennlinie entfällt mit der
   zweiten Spalte. */
@media (max-width: 760px) {
  .brief-focus-body { columns: 1; column-rule: 0; }
}

.brief-head { margin-bottom: clamp(28px, 3vw, 44px); }
.brief-kicker {
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.brief-headline {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-size: clamp(30px, 4vw, 56px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.03;
}
.brief-subline {
  margin: 14px 0 0; max-width: 58ch;
  color: var(--text-2); font-size: 16.5px; line-height: 1.55;
}
.brief-idea { margin-top: 22px; }

/* Ein Hinweis, der nicht warnt — für „das Briefing ist von gestern“. */
.notice-quiet {
  background: var(--surface-2); border: 1px solid var(--line-2);
  color: var(--text-2);
}

/* --- Key Zones --- */
.brief-zones {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 24px); align-items: start;
}
.brief-zones.no-chart { grid-template-columns: minmax(0, 1fr); }

.brief-chart {
  position: relative; display: block; width: 100%; padding: 0;
  overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--surface);
  cursor: zoom-in;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.brief-chart img { display: block; width: 100%; height: auto; }
.brief-chart:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); }
.brief-chart-hint {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--pill);
  background: rgba(6, 6, 10, 0.7); border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff;
}
.brief-chart-hint svg { width: 14px; height: 14px; }

/* Zahlen gehören in Monospace: so stehen die Stellen untereinander. */
.level-list { list-style: none; margin: 0; padding: 0; }
.level-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px;
}
.level-list li:last-child { border-bottom: 0; }
.level-instrument { flex: 1 1 auto; color: var(--text); font-weight: 600; }
.level-price { color: var(--accent); font-weight: 600; }
.level-label {
  flex: 0 0 auto;
  padding: 2px 9px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}

/* --- Themen --------------------------------------------------------------
   Fünf Karten nebeneinander waren fünf Spalten von je einem Fünftel der
   Seite. Bei diesen Textlängen sind das schmale Schluchten — vier bis
   fünf Wörter je Zeile, und das Auge springt öfter zurück, als es liest.
   Dazu kam, dass kein Thema so lang ist wie das andere: die Karten endeten
   auf fünf verschiedenen Höhen, und die Reihe franste unten aus.

   Beides war dasselbe Problem — die Themen standen nebeneinander, obwohl
   sie nacheinander gelesen werden. Untereinander wird die Zeile so lang,
   wie eine Zeile sein soll, und eine Liste hat kein Höhenproblem: jedes
   Thema ist genau so hoch, wie sein Text es braucht.

   Links Kicker und Titel, rechts der Text. Die linke Spalte ist damit eine
   Randspalte, die man von oben nach unten überfliegen kann, ohne einen
   Absatz zu lesen — wer nur wissen will, worum es heute geht, liest fünf
   Zeilen und ist fertig.

   Die Trennlinie ersetzt die fünf Kästen. Sie trennt genauso deutlich und
   zeichnet dabei keine fünf Rahmen auf eine Seite, die für Levels,
   Kalender und Archiv ohnehin schon Rahmen trägt.                      */
.brief-topics { margin-top: 2px; }
.brief-topic {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 26%) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  padding: clamp(22px, 2.4vw, 32px) 0;
  border-top: 1px solid var(--line);
}
/* Die erste Linie fiele mit der Sektionsüberschrift zusammen. */
.brief-topic:first-child { border-top: 0; padding-top: 8px; }
.brief-topic:last-child { border-bottom: 1px solid var(--line); }
.brief-topic-kicker {
  margin: 0 0 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.brief-topic-title {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.28;
}
.brief-topic-body {
  margin: 0; max-width: 74ch;
  color: var(--text-2); font-size: 15.5px; line-height: 1.72;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Unter 900 px ist die Randspalte zu schmal für einen Titel — dann steht
   sie darüber statt daneben, und der Text behält die ganze Breite. */
@media (max-width: 900px) {
  .brief-topic { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .brief-topic-title { max-width: none; }
}

/* --- Termine-Leiste ------------------------------------------------------
   Tiefes Navy statt des üblichen Flächenblaus: die Leiste schließt die
   Seite ab und soll sich vom Rest abheben, ohne zu leuchten. Das bleibt.

   Geändert hat sich, was darin steht. Vorher eine einzige Zeile — auf
   einem schmalen Fenster wurden daraus drei, in denen die Trennpunkte
   nichts mehr trennen: man liest sie von vorn, um den einen Termin zu
   finden, den man sucht. Jetzt dieselben Angaben, nur sortiert nach
   „Heute", „Nach Schluss" und „Danach", jeder Termin ein Chip. Getrennt
   wird beim Ausgeben (siehe app.briefing.event_groups); gespeichert ist
   weiterhin eine Zeile.                                                */
.brief-events {
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px);
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, #0c1f3d 0%, #112a52 100%);
  border: 1px solid rgba(46, 144, 250, 0.28);
}
.brief-events-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.brief-events-tag {
  flex: 0 0 auto;
  padding: 5px 12px; border-radius: var(--pill);
  background: rgba(46, 144, 250, 0.18);
  border: 1px solid rgba(46, 144, 250, 0.45);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9ccbff;
}
.brief-events-note {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6f93c4;
}

/* Die Gruppen nebeneinander, solange sie nebeneinander passen. Die
   Trennlinie hängt links an der Gruppe und ist kein eigenes Element:
   bricht die Reihe um, bricht sie mit um. */
.brief-events-groups {
  display: grid; gap: 16px clamp(18px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.brief-events-group + .brief-events-group {
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgba(46, 144, 250, 0.22);
}
.brief-events-label {
  margin: 0 0 9px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #6f93c4;
}
.brief-events-group.is-now .brief-events-label { color: #9ccbff; }

.brief-events-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.brief-events-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: var(--pill);
  background: rgba(46, 144, 250, 0.10);
  border: 1px solid rgba(46, 144, 250, 0.26);
  font-size: 12.5px; line-height: 1.35; color: #dbe8fb;
}
/* Was jetzt gilt, steht einen Ton kräftiger da, damit das Auge dort
   zuerst hängen bleibt. */
.brief-events-group.is-now .brief-events-chip {
  background: rgba(46, 144, 250, 0.17);
  border-color: rgba(46, 144, 250, 0.42);
}
.brief-events-time {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: #9ccbff;
}

/* Der Rückfall: eine Zeile, die sich nicht sinnvoll auftrennen ließ. Die
   steht wie eh und je. */
.brief-events-plain {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.brief-events-plain p {
  margin: 0; flex: 1 1 320px;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: #dbe8fb;
}

/* Untereinander verliert die senkrechte Linie ihren Sinn — dort trennt
   der Abstand. */
@media (max-width: 700px) {
  .brief-events-group + .brief-events-group {
    padding-left: 0; border-left: 0;
  }
}

/* --- Archiv --- */
.brief-archive { list-style: none; margin: 0; padding: 0; }
.brief-archive li { border-bottom: 1px solid var(--line); }
.brief-archive li:last-child { border-bottom: 0; }
.brief-archive a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 2px; color: var(--text-2); text-decoration: none;
}
.brief-archive a:hover { color: var(--text); }
.brief-archive a:hover .arrow { color: var(--accent); }
.brief-archive-date {
  flex: 0 0 auto; min-width: 9ch;
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
}
.brief-archive-headline { flex: 1 1 auto; font-size: 14.5px; }
.brief-archive .arrow { flex: 0 0 auto; color: var(--text-3); }

/* --- Dashboard: der Hero und die Spalte daneben --------------------------
   Der Hero lief über die ganze Breite und war dabei so hoch wie ein
   Banner — rechts blieb Fläche, die nichts trug. Er nimmt jetzt zwei
   Drittel, daneben steht, was heute ansteht.

   Unter 1100 px liegt die Spalte darunter statt daneben: zwei Drittel von
   einem Tablet sind für eine Bauchbinde zu wenig.                     */

.dash-top {
  display: grid; gap: clamp(12px, 1.3vw, 18px);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .dash-top { grid-template-columns: minmax(0, 1fr); }
}

/* Der Hero gibt seine feste Höhe auf und nimmt die der Spalte daneben —
   so stehen beide auf einer Linie, oben wie unten. */
.dash-top .feature { height: auto; min-height: clamp(320px, 42vh, 420px); }

.dash-side { display: flex; flex-direction: column; gap: 12px; }

.dash-card {
  padding: 15px 17px; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
}
.dash-cap {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.dash-cap svg { width: 13px; height: 13px; }
.dash-none { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }


/* --- „Heute wichtig“ -----------------------------------------------------
   Die einzige Karte auf dem Dashboard, die wirklich dringlich ist —
   deshalb trägt sie als einzige den Akzent. Die Zeit ist die Hauptsache
   und darf so aussehen; ohne Skript steht dort die Uhrzeit, mit Skript
   zählt sie herunter.                                                  */

.dash-now {
  border-color: var(--accent-line);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(46, 144, 250, 0.16), transparent 62%),
    var(--surface-2);
}
/* Der Termin trägt die Karte, nicht die verbleibende Zeit. Vorher stand
   der Countdown groß und der Name klein darunter — die Karte sagte damit
   „noch 3 Std 36 Min" und erst im Kleingedruckten, worauf. Wer morgens
   hinsieht, will es andersherum: erst was ansteht, dann wann.

   Der Name bekommt deshalb den Schriftgrad, den vorher die Uhr hatte —
   nur nicht ganz so groß: eine Zeile Text bei 34 px bräche in der schmalen
   Spalte auf drei Zeilen um. */
.dash-now-title {
  display: block; font-family: var(--display);
  font-size: clamp(17px, 1.9vw, 21px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--text);
}
/* Die Zeit darunter: klein, im Akzent, mit Ziffern fester Breite — sonst
   ruckt die Zeile bei jedem Minutenwechsel seitlich. */
.dash-now-count {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dash-now-note {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
}
.dash-now-note svg { width: 12px; height: 12px; flex: 0 0 auto; }


/* --- „Als Nächstes“ ------------------------------------------------------
   Live-Sessions und Mentoring-Webinare in einer Liste, sortiert nach
   Zeitpunkt. Welcher Bereich es ist, sagt der Punkt links — eine zweite
   Liste je Bereich wäre eine Trennung, die niemand braucht: was zuerst
   kommt, kommt zuerst.                                                 */

.dash-dates { list-style: none; margin: 0; padding: 0; }
.dash-dates a {
  position: relative; display: flex; align-items: baseline; gap: 11px;
  padding: 9px 0; color: inherit;
}
.dash-dates a:hover { text-decoration: none; color: inherit; }
.dash-dates a:hover .dash-dates-what b { color: var(--accent); }
/* Der Trennstrich läuft an beiden Enden aus — er trennt, ohne zu
   schneiden. */
.dash-dates li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 16%,
              var(--line-2) 76%, transparent);
}
.dash-dates li { position: relative; }
.dash-dates li:first-child a { padding-top: 0; }
.dash-dates li:last-child a { padding-bottom: 0; }
.dash-dates li:last-child::after { display: none; }

.dash-dates-mark {
  flex: 0 0 auto; align-self: center;
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
}
.dash-dates li.is-live .dash-dates-mark { background: var(--grad); }
.dash-dates li.is-mentoring .dash-dates-mark { background: var(--violet); }

.dash-dates-when {
  flex: 0 0 auto; width: 58px;
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.dash-dates-when b {
  display: block; font-weight: 600; color: var(--text-2);
}
.dash-dates-what { min-width: 0; font-size: 12.5px; color: var(--text-3); }
.dash-dates-what b {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: color var(--t) var(--ease);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* --- Die drei Kurse ------------------------------------------------------
   Eingebettet wie der Kalender im Briefing: ein <iframe> mit einer
   Adresse, die der Server baut — kein fremdes Skript im Browser.

   Das Widget bringt sein eigenes Innenleben mit; durchsichtig gestellt
   nimmt es wenigstens unseren Grund an. Die Beschriftung darüber ist
   unsere: das Widget nennt den Kontrakt („US 100 CASH CFD“), wir nennen
   den Markt, um den es geht.                                          */

/* Untereinander, nicht nebeneinander: die Spalte ist rund 380 px breit,
   und drei Kacheln darin wären je 118 px — darin schneidet das Widget
   seinen eigenen Inhalt ab („29.4…“ statt „29.482,6“, „US 100 CASH“
   statt „US 100 CASH CFD“). Über die ganze Breite steht Name, Kurs und
   Veränderung vollständig da, die Veränderung sogar in Farbe.

   Die Beschriftung je Kachel entfällt dafür: das Widget nennt das
   Instrument selbst, und „NQ“ darüber wäre dasselbe zweimal. */
/* Die Kurse fallen kleiner aus, als das Widget sie zeichnet: seine Zahl
   ist rund 28 px hoch und zog damit den Blick von allem anderen weg.

   Am Inhalt eines fremden iframes lässt sich nichts stellen — es gibt
   keine Schriftgröße in seiner Konfiguration und kein CSS reicht
   hinein. Bleibt der Maßstab: das iframe wird um denselben Faktor
   größer aufgespannt, um den es danach kleiner gezeichnet wird. Das
   Ergebnis ist scharf (Text wird neu gesetzt, nicht hochgerechnet) und
   trifft alles gleichmäßig.

   0,62 macht aus 28 px rund 17 px — Fließtextgröße und etwas darüber. */
.dash-quotes { --quote-scale: 0.62; --quote-height: 60px; }
.dash-quotes { display: flex; flex-direction: column; gap: 6px; }
.dash-quotes .dash-cap { margin-bottom: 10px; }
.dash-quote {
  height: var(--quote-height); overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
}
/* `color-scheme: normal` und die eigene Fläche sind derselbe Kniff wie
   beim Kalender im Briefing (siehe `.calendar-frame`): unser `:root`
   steht auf `color-scheme: dark`, das iframe erbt es, und der Browser
   malt dann seine eigene Leinwand hinter die durchsichtige Seite des
   Widgets — hell statt dunkel. Mit `normal` bleibt sie durchsichtig, und
   was durchscheint, stellen wir. */
.dash-quote iframe {
  display: block; border: 0;
  width: calc(100% / var(--quote-scale));
  height: calc(var(--quote-height) / var(--quote-scale));
  transform: scale(var(--quote-scale)); transform-origin: 0 0;
  background: var(--surface); color-scheme: normal;
}


/* --- Die Briefing-Karte auf dem Dashboard --- */
.brief-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 18px; padding: 16px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, #0c1f3d 0%, #112a52 100%);
  border: 1px solid rgba(46, 144, 250, 0.28);
  color: #dbe8fb; text-decoration: none;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.brief-card:hover {
  transform: translateY(-1px);
  border-color: rgba(46, 144, 250, 0.6);
}
.brief-card-tag {
  flex: 0 0 auto;
  padding: 5px 12px; border-radius: var(--pill);
  background: rgba(46, 144, 250, 0.18);
  border: 1px solid rgba(46, 144, 250, 0.45);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9ccbff;
}
.brief-card-headline {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--display); font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.015em; color: #fff;
}
/* Der Hinweis neben der Headline: auf der Briefing-Seite wartet mehr als
   der Text — Kalender und Schlagzeilen stehen dort mit drin. */
.brief-card-hint {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--pill);
  background: rgba(46, 144, 250, 0.12);
  border: 1px solid rgba(46, 144, 250, 0.3);
  font-family: var(--mono); font-size: 11px; color: #9ccbff;
  white-space: nowrap;
}
.brief-card-hint svg { width: 13px; height: 13px; }
.brief-card .arrow { flex: 0 0 auto; color: #9ccbff; }

/* Auf schmalen Fenstern rutscht der Hinweis unter die Headline. */
@media (max-width: 620px) {
  .brief-card-headline { flex: 1 1 100%; }
}

/* --- Vollbild fürs Chartbild ---
   Wird von becro.js erzeugt; ohne JavaScript existiert sie nicht und das
   Bild bleibt trotzdem in voller Breite lesbar. */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 3vw, 48px);
  background: rgba(4, 4, 8, 0.92);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  padding: 8px 16px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.08);
  color: #fff; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}

/* --- Kleinteile der Verwaltungs-Maske --- */
.field-label {
  margin: 22px 0 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.row-list { display: flex; flex-direction: column; gap: 10px; }
.row-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row-item input[type="text"] {
  flex: 1 1 140px; min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font: inherit;
  font-size: 14px;
}
.row-item textarea {
  flex: 1 1 100%; min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font: inherit;
  font-size: 14px; line-height: 1.55; resize: vertical;
}
.row-item input:focus, .row-item textarea:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.row-item-block {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.chart-preview {
  display: block; width: 100%; max-width: 520px; height: auto;
  margin: 12px 0; border-radius: var(--r-md); border: 1px solid var(--line-2);
}
.inline-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.inline-actions .btn { margin-top: 0; }
.btn-small { padding: 8px 16px; font-size: 13px; margin-top: 12px; }
/* Für sich stehend, nicht nur eine Einfärbung: ohne den eigenen Grund
   bliebe der blaue Verlauf des Knopfes darunter stehen, und aus einer
   Warnung würde die Hauptaktion der Seite. */
.btn-danger {
  background: transparent; border-color: var(--danger); color: var(--danger);
  box-shadow: none;
}
.btn-danger:hover {
  background: var(--danger-soft); color: var(--danger);
  filter: none; box-shadow: none;
}

@media (max-width: 860px) {
  .brief-zones { grid-template-columns: minmax(0, 1fr); }
}

/* Der Querverweis von der Idea of the Day zurück ins Briefing. */
.video-briefing { margin: 14px 0 0; }
.video-briefing a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 14px; font-weight: 600;
  text-decoration: none;
}
.video-briefing a:hover { text-decoration: underline; }
.video-briefing svg { width: 16px; height: 16px; }

/* Der Knopf unter einer Häkchen-Liste braucht Luft: `.btn` bringt nur
   16px mit, was direkt unter einer zweizeiligen Erklärung zu wenig ist. */
.form-actions { margin-top: 22px; }
.form-actions .btn { margin-top: 0; }
/* Ein abgeschaltetes Häkchen soll man ansehen können. */
.checkline.is-disabled { opacity: 0.55; }
.checkline.is-disabled input { cursor: not-allowed; }


/* --- Schnell-Eingabe im Briefing-Formular ---------------------------------
   Ein Feld, das den fertigen Brief zerlegt und die Felder darunter fuellt.
   Abgesetzt vom Rest, damit klar ist: hier wird nichts gespeichert. */
.paste-box { border-color: var(--accent-line); }
.paste-input {
  width: 100%; margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  resize: vertical;
}
.paste-input:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.paste-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.paste-status {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
}
.paste-status.is-ok { color: var(--green); }
.paste-status.is-warn { color: var(--amber); }


/* --- Videokurse: die Querkarten der Übersicht -----------------------------
   Eine Karte je Kurs, quer über die volle Breite: Cover links, Text in
   der Mitte, die eine Handlung rechts. Vorher stand hier das Kachelraster
   der Bibliothek — bei einer Handvoll Kurse, die jeder von vorn bis hinten
   durchgeht, ist das die falsche Form: es zählt nicht die Auswahl,
   sondern der Stand, und der braucht Breite.

   Alle Karten sind gleich hoch, und niemand rechnet das aus: die Höhe
   kommt vom Cover mit seinem festen Seitenverhältnis, und die
   Beschreibung kann sie nicht sprengen, weil sie nach drei Zeilen
   endet. */

.crows { display: flex; flex-direction: column; gap: 14px; }

.crow {
  position: relative;
  display: grid;
  grid-template-columns: clamp(190px, 21vw, 258px) minmax(0, 1fr) auto;
  gap: clamp(16px, 1.8vw, 26px);
  align-items: center;
  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.crow:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-lift);
}
/* Was nirgends hinführt, hebt sich auch nicht: die gesperrte Karte und die
   des Kurses, der noch aufgebaut wird, bleiben liegen. */
.crow.is-locked, .crow.is-quiet { border-style: dashed; }
.crow.is-locked:hover, .crow.is-quiet:hover {
  transform: none; box-shadow: none; border-color: var(--line-2);
}
/* Gedämpft, nicht ausgeblendet — der Kurs ist da, nur noch nicht so weit.
   Gedämpft wird dabei jedes Teil für sich und nicht die Karte als Ganzes:
   ein `opacity` über allem zöge im hellen Erscheinungsbild auch das dunkle
   Cover mit hoch, und aus dem tiefen Navy würde ein Grauschleier. */
.crow.is-quiet .crow-cover { filter: grayscale(0.55) brightness(0.72); }
.crow.is-quiet .crow-head h3 { color: var(--text-2); }
.crow.is-quiet .crow-note { color: var(--text-3); }

/* --- Das Cover ------------------------------------------------------------
   Dieselbe Machart wie die Flächen im Mentoring: tiefes Navy, ein weiches
   Licht von oben, ein feiner Rahmen. Die hochgeladenen Cover sind helle
   Screenshots — ohne den Verlauf von unten und den Rahmen säßen sie wie
   ausgeschnitten in der dunklen Oberfläche. */
.crow-cover {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--r-md);
  background: #080a12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.crow-art {
  position: absolute; inset: 0;
  background-color: #0b1120;
  background-image:
    radial-gradient(96% 118% at 32% -14%, rgba(46, 144, 250, 0.26), transparent 62%),
    linear-gradient(168deg, #111c30 0%, #0b1120 46%, #080a12 100%);
}
/* Das Platzhalter-Cover trägt dieselbe feine Struktur wie der Kopfbereich
   des Mentorings — ein leeres Feld wäre ein Loch, ein Symbol darauf ein
   Notbehelf. Liegt ein Bild darüber, entfällt sie: es bringt seine eigene
   Struktur mit, und zwei Muster übereinander sind Unruhe. */
.crow-cover:not(.has-image) .crow-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 64%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 64%, transparent);
}
.crow-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.92;
  transition: transform var(--t-slow) var(--ease);
}
.crow:hover .crow-cover img { transform: scale(1.035); }
.crow.is-locked:hover .crow-cover img,
.crow.is-quiet:hover .crow-cover img { transform: none; }
/* Der Schleier von unten. Nicht bis Schwarz: darunter soll das Navy noch
   durchkommen, sonst endet jedes Cover in derselben Nacht. */
.crow-cover::after {
  content: ""; position: absolute; inset: 38% 0 0;
  background: linear-gradient(180deg, transparent, rgba(4, 7, 16, 0.72));
}
.crow.is-locked .crow-cover { filter: grayscale(0.5) brightness(0.72); }
/* Das Symbol oben rechts, wie auf den Kacheln des Mentorings. */
.crow-mark {
  position: absolute; z-index: 1; right: 10px; top: 10px;
  width: 30px; height: 30px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.crow-mark svg { width: 14px; height: 14px; }

/* --- Der Textteil --------------------------------------------------------- */
/* Der Textteil bekommt eine Obergrenze: auf einem breiten Schirm liefe die
   Beschreibung sonst über hundert Zeichen je Zeile, und das liest niemand
   gern. Der Knopf bleibt davon unberührt — er sitzt in seiner eigenen
   Spalte am rechten Rand. */
.crow-body {
  min-width: 0; max-width: 640px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 0;
}
/* Der große Klick: ein leerer Link, der über der ganzen Karte liegt —
   Cover, Titel, Beschreibung, alles führt zur Kursübersicht. Der Knopf
   rechts liegt eine Ebene darüber und fängt seinen eigenen Klick ab.

   Die beiden Angaben gehören zusammen und keine geht ohne die andere:
   `absolute` nimmt den Link aus dem Fluss, sonst zählte er als leeres
   Kind der Textspalte und schöbe die Karte um eine Lücke auseinander;
   `inset: 0` spannt ihn über die Karte, sonst bliebe er null Pixel groß
   und wäre ein Link, der nichts trifft. Bezugsrahmen ist `.crow`, denn
   nur die Karte steht auf `relative`. */
.crow-open {
  position: absolute; inset: 0; z-index: 1;
  border-radius: var(--r-lg);
}
/* Mit der Tastatur ist der leere Link die Karte — also gehört der Ring um
   sie und nicht um einen Punkt im Text. */
.crow:focus-within { border-color: var(--accent-line); }
.crow-open:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.crow-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
}
.crow-head h3 {
  margin: 0; font-family: var(--display);
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.2;
}
/* Die Stufe: eine Plakette, kein zweiter Titel — sie beantwortet „für
   wen ist das“, und das ist eine Fußnote zum Namen. */
.crow-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.crow-badge svg { width: 13px; height: 13px; }
.crow.is-locked .crow-badge, .crow.is-quiet .crow-badge {
  background: transparent; border-color: var(--line-2); color: var(--text-3);
}
.crow-meta {
  margin: 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--text-3);
}
/* Drei Zeilen und dann „…“: der volle Text steht auf der Kursseite. Der
   Deckel ist keine Sparmaßnahme, sondern die eine Hälfte davon, dass alle
   Karten gleich hoch sind — ein Kurs mit einem Absatz Beschreibung zöge
   die Reihe sonst auseinander.

   Die andere Hälfte ist die reservierte Höhe: drei Zeilen stehen immer zu
   Buche, auch wenn der Text nur eine füllt oder ganz fehlt. Sonst
   säßen Strich und Zählung von Karte zu Karte auf einer anderen Höhe, und
   die Spalte hätte keine Linie mehr, an der das Auge herunterläuft. */
.crow-note {
  margin: 0; min-height: 4.65em;
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}

/* Der Stand, ganz unten: ein Strich und die Zählung daneben. */
.crow-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
}
.crow-bar {
  flex: 1; min-width: 0; height: 4px; border-radius: var(--pill);
  background: var(--line); overflow: hidden;
}
/* Der Strich startet leer und läuft beim Laden auf seinen Wert zu — die
   Breite setzt becro.js (`armProgress`), die Bewegung steht hier. */
.crow-bar i {
  display: block; height: 100%; background: var(--grad);
  transition: width 900ms var(--ease);
}
.crow-tally {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}
/* Der Grund an einer Sperre oder an einem Kurs, der noch entsteht — er
   steht dort, wo sonst der Strich steht, und hält damit auch dessen Platz. */
.crow-lock {
  display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--text-3);
}
.crow-lock svg {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px;
}

/* --- Die Handlung rechts --------------------------------------------------
   Ein Knopf, und darunter, wohin er führt. Er liegt über dem großen Klick
   (z-index), sonst führte auch er zur Kursübersicht. */
.crow-side {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  max-width: 230px; padding-right: 6px;
}
.crow-side .btn { margin-top: 0; align-self: stretch; white-space: nowrap; }
.crow-next {
  font-size: 12px; line-height: 1.4; color: var(--text-3); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Unter 900 px reicht die Breite für drei Spalten nicht mehr: das Cover
   legt sich über die ganze Karte, Text und Knopf darunter. */
@media (max-width: 900px) {
  .crow { grid-template-columns: 1fr; gap: 14px; }
  .crow-cover { aspect-ratio: 21 / 9; }
  .crow-side { max-width: none; padding-right: 0; }
  .crow-next { text-align: left; }
}

/* Verweiskarte: ein Ziel, eine Zeile — Icon links, Text in der Mitte,
   Knopf rechts. Flach gehalten, damit sie nicht mit den Karten
   konkurriert, auf die sie zeigt. */
.linkcard {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px; padding: 16px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: inherit;
  transition: border-color var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.linkcard:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-1px); border-color: var(--accent-line);
}
.linkcard-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
}
.linkcard-icon svg { width: 20px; height: 20px; }
.linkcard-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.linkcard-text strong {
  font-family: var(--display); font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.015em;
}
.linkcard-text > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
}
.linkcard-btn { flex: 0 0 auto; margin-top: 0; }
.linkcard:hover .linkcard-btn { border-color: var(--accent-line); color: var(--accent); }

/* Auf dem Handy rutscht der Knopf unter den Text, statt ihn zu quetschen —
   und die Zeile darf umbrechen, statt mitten im Wort abzureißen. */
@media (max-width: 620px) {
  .linkcard { flex-wrap: wrap; }
  .linkcard-text { flex: 1 1 100%; order: 2; }
  .linkcard-text > span { white-space: normal; line-height: 1.5; }
  .linkcard-btn { order: 3; width: 100%; justify-content: center; }
}

/* --- Kohorten in der Verwaltung ------------------------------------------
   Eine Leiste wie die Kategorie-Chips der Bibliothek: ein Durchgang ist
   ausgewählt, darunter stehen seine Webinare. */
.cohort-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cohort-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--text-2); font-size: 13px;
}
.cohort-chip:hover { text-decoration: none; border-color: var(--accent-line); color: var(--text); }
.cohort-chip.is-active {
  border-color: transparent; background: var(--grad); color: #fff;
}
.cohort-chip .chip-count {
  font-family: var(--mono); font-size: 11px; opacity: .75;
}

/* Kohorten-Auswahl in der Nutzertabelle: Auswahl und Knopf nebeneinander,
   schmal genug, dass die Tabelle nicht auseinanderfällt. */
.cohort-form { display: flex; align-items: center; gap: 8px; }
.cohort-form select {
  min-width: 118px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-icon);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12.5px;
}
.cohort-form select:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Ein einzelnes Feld, das nicht die volle Formularbreite braucht. */
.field-narrow { max-width: 280px; }


/* --- Profilbild -----------------------------------------------------------
   Ein Avatar ist überall ein Kreis fester Größe. Liegt ein Bild vor, füllt
   es diesen Kreis formatfüllend aus — zugeschnitten wird schon auf dem
   Server, `object-fit` fängt nur den Rest ab. */
.avatar.has-photo,
.c-avatar.has-photo,
.cell-avatar.has-photo,
.profile-avatar.has-photo {
  object-fit: cover;
  background: none;
  padding: 0;
}
.c-avatar.has-photo { border-color: var(--line-2); }

/* Die Zeile in der Nutzerliste: Bild links, Adresse und Name daneben. */
.cell-person { display: flex; align-items: center; gap: 11px; }
.cell-person-text { min-width: 0; }
.cell-avatar {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  user-select: none;
}

/* Die Sektion im Konto: Kreis links, Feld und Knopf daneben. */
.profile-row {
  display: flex; align-items: flex-start; gap: clamp(16px, 2vw, 26px);
  flex-wrap: wrap;
}
.profile-preview { flex: 0 0 auto; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: var(--on-accent);
  font-family: var(--display); font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 14px 30px -16px var(--glow);
  user-select: none;
}
.profile-fields { flex: 1 1 280px; min-width: 0; }
.profile-fields .field { margin-bottom: 8px; }
.profile-actions { margin-top: 14px; }
.profile-actions .btn { margin-top: 0; }

/* Trennt Bild und Name innerhalb derselben Sektion, ohne einen zweiten
   Kasten aufzumachen. */
.profile-rule {
  margin: 22px 0; border: 0; border-top: 1px solid var(--line);
}

/* Solange eine Vorschau steht, sagt der Kreis, dass noch nichts
   gespeichert ist. */
.profile-preview.is-preview { position: relative; }
.profile-preview.is-preview::after {
  content: "Vorschau";
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  padding: 3px 10px; border-radius: var(--pill);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  white-space: nowrap;
}

/* --- Live Trading -------------------------------------------------------- *
 *
 * Drei Bausteine: die Karte mit dem nächsten Termin, die Terminliste und
 * die schmalen Felder in der Terminliste der Verwaltung. Alles andere auf
 * der Seite sind Panels, Kacheln und Chips, die es schon gibt.
 */

.livenext { display: flex; flex-direction: column; align-items: flex-start; }
.livenext-head { margin-bottom: 6px; }
.livenext-title {
  margin: 4px 0 0; font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 800;
  letter-spacing: -0.02em; color: var(--text);
}
.livenext-time {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-size: 14px; color: var(--text-2);
}
.livenext-time svg { width: 15px; height: 15px; }
/* Steht ein Thema als Überschrift, sagt diese Zeile daneben, welcher
   Termin es ist — leise, denn das Thema ist die Auskunft. */
.livenext-kind {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.livenext .btn { margin-top: 18px; }
.livenext .btn-wide { max-width: 320px; }

/* Läuft gerade: derselbe blaue Rahmen wie die Briefing-Zeile, damit
   „jetzt" auf einen Blick vom „demnächst" zu unterscheiden ist. */
.livenext.is-live { border-color: var(--accent-line); background: var(--accent-soft); }
.livedot {
  display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Der Countdown. Ohne JavaScript steht hier der Satz, den der Server
   gerendert hat — deshalb ist das hier nur Typografie. */
.livecount {
  margin: 14px 0 0; font-family: var(--mono);
  font-size: 13px; color: var(--text-2);
}

/* --- Terminliste ----------------------------------------------------------
   Eine Zeile je Termin, kein Raster: leere Tage brauchen keinen Platz. Die
   Spalten sind dieselben wie bei den Einzelterminen darunter — wann, was,
   und was daran besonders ist —, damit beide Listen wie eine aussehen. */

.livedates { list-style: none; margin: 0; padding: 0; }
.livedate {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.livedate:last-child { border-bottom: 0; }
.livedate-when {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.livedate-when b { display: block; color: var(--text); font-weight: 600; }
.livedate-what b {
  display: block; font-size: 15px; font-weight: 700; color: var(--text);
}
.livedate-note {
  display: block; margin-top: 2px; font-size: 13px; color: var(--text-2);
}
.livedate-tags {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
}

/* Heute: derselbe blaue Anstrich wie die laufende Karte, dazu ein Strich
   am linken Rand — die Zeile soll auffindbar sein, ohne dass die Liste
   ihre Ruhe verliert. */
.livedate.is-today {
  border-radius: var(--r-sm); background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 14px; padding-right: 14px;
}
/* Vorbei, aber noch von heute: bleibt bis Mitternacht stehen und tritt
   zurück. */
.livedate.is-past { opacity: 0.6; }
.livedate.is-off .livedate-what b { text-decoration: line-through; }
.livedate.is-off { color: var(--text-3); }

@media (max-width: 640px) {
  .livedate { grid-template-columns: minmax(0, 1fr) auto; }
  .livedate-when { grid-column: 1 / -1; }
}

/* Der Kalender-Knopf sitzt in der Kopfzeile der Fläche. `btn-small` bringt
   einen Abstand nach oben mit, der dort nur die Grundlinie verschiebt. */
.panel-head .btn-small { margin-top: 0; }

/* --- Einzeltermine --------------------------------------------------------
   Eine Liste statt Kacheln: es sind wenige, sie stehen chronologisch, und
   das Datum links soll dabei untereinander bleiben. Auf dem Handy stapelt
   sich beides — 280 px reichen nicht für zwei Spalten mit Text. */

.liveevents { list-style: none; margin: 0; padding: 0; }
.liveevent {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 4px 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.liveevent:last-child { border-bottom: 0; }
.liveevent-when {
  font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.liveevent-when b { display: block; color: var(--text); font-weight: 600; }
.liveevent-what b {
  display: block; font-size: 15px; font-weight: 700; color: var(--text);
}
.liveevent-note {
  display: block; margin-top: 2px; font-size: 13px; color: var(--text-2);
}
/* Abgesagt: durchgestrichen wie im Kalender, nicht weg — wer den Termin
   im Kopf hat, soll sehen, dass er ausfällt. */
.liveevent.is-off .liveevent-what b { text-decoration: line-through; }
.liveevent.is-off { color: var(--text-3); }

@media (max-width: 640px) {
  .liveevent { grid-template-columns: minmax(0, 1fr) auto; }
  .liveevent-when { grid-column: 1 / -1; }
}

/* --- Dashboard-Zeile ----------------------------------------------------- */

/* Dieselbe Zeile wie beim Briefing, nur in Violett — zwei blaue Bänder
   übereinander wären nicht zu unterscheiden. */
.brief-card-live {
  background: linear-gradient(90deg, #1b163d 0%, #2a2260 100%);
  border-color: rgba(99, 91, 255, 0.32);
}
.brief-card-live:hover { border-color: rgba(99, 91, 255, 0.62); }
.brief-card-live .brief-card-tag {
  background: rgba(99, 91, 255, 0.2); border-color: rgba(99, 91, 255, 0.5);
  color: #c3befd;
}
.brief-card-live .brief-card-hint {
  background: rgba(99, 91, 255, 0.14); border-color: rgba(99, 91, 255, 0.34);
  color: #c3befd;
}
.brief-card-live .arrow { color: #c3befd; }

/* Und dasselbe Band in Discords eigenem Blau (#5865F2). Die dritte Farbe
   in dieser Reihe, und die einzige, die nicht wir gewählt haben: der
   Server ist ein fremder Ort, und wer die Marke kennt, erkennt die Zeile
   noch vor dem Lesen. Neben dem Violett der Live-Variante hält sie sich
   dadurch, dass sie kälter und satter ist. */
.brief-card-discord {
  background: linear-gradient(90deg, #23264d 0%, #343a7a 100%);
  border-color: rgba(88, 101, 242, 0.38);
}
.brief-card-discord:hover { border-color: rgba(88, 101, 242, 0.7); }
.brief-card-discord .brief-card-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(88, 101, 242, 0.22);
  border-color: rgba(88, 101, 242, 0.55);
  color: #c7ccff;
}
.brief-card-discord .brief-card-tag svg { width: 13px; height: 13px; }
.brief-card-discord .brief-card-hint {
  background: rgba(88, 101, 242, 0.15);
  border-color: rgba(88, 101, 242, 0.36);
  color: #c7ccff;
}
.brief-card-discord .arrow { color: #c7ccff; }

/* Die Sonderartikel-Leiste steht direkt ÜBER dem blauen Briefing-Band.
   Nach derselben Überlegung wie eben bekommt sie kein zweites Blau — aber
   auch keine dritte Farbe: der Sonderartikel ist keine weitere Rubrik
   neben Briefing und Live, sondern der Hinweis, dass heute zusätzlich
   etwas dasteht. Deshalb ruhig, in den Flächen der Seite, und mit der
   Akzentkante des Artikelblocks, auf den sie zeigt.

   Untereinander gelesen heißt das: das farbige Band ist die Rubrik, die
   helle Leiste darüber die Ausnahme. Genau darum geht es. */
.brief-card-focus {
  background: var(--surface-2);
  border-color: var(--line-2);
  border-left: 3px solid var(--accent);
  color: var(--text-2);
}
.brief-card-focus:hover {
  border-color: var(--accent-line);
  border-left-color: var(--accent);
}
.brief-card-focus .brief-card-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(46, 144, 250, 0.12);
  border-color: var(--accent-line);
  color: var(--accent);
}
.brief-card-focus .brief-card-tag svg { width: 12px; height: 12px; }
.brief-card-focus .brief-card-headline { color: var(--text); }
.brief-card-focus .arrow { color: var(--text-3); }
.brief-card-focus:hover .arrow { color: var(--accent); }

/* Die beiden gehören zusammen — zwischen ihnen weniger Luft als zum
   Rest der Seite. */
.brief-card-focus + .brief-card { margin-top: 10px; }


/* Der Hinweis auf den nächsten Mentoring-Durchgang — dieselbe Zeile, in
   Gold.

   Nicht Blau (das ist das Briefing) und nicht Violett: Violett ist auf
   dem Dashboard zwar die Farbe des Mentorings (`.dash-dates li.is-
   mentoring`), aber in der Testphase steht direkt darüber das
   Discord-Band in #5865F2 — zwei Zeilen, die sich um zwei Grad Blau
   unterscheiden, sind keine zwei Zeilen. Gold ist die einzige warme
   Farbe der Seite und damit die einzige, die hier von selbst auffällt.

   Dass Gold sonst am Ablauf hängt (`--amber` an Fristen und Plaketten),
   trägt hier nicht in die Irre: das sind kleine Schilder in Text, keine
   Bänder über die ganze Breite. */
.brief-promo {
  position: relative;
  transition: transform var(--t) var(--ease);
}
/* Das Anheben sitzt am Rahmen und nicht am Band: sonst bliebe das X
   liegen, während die Zeile darunter wegrutscht. */
.brief-promo:hover { transform: translateY(-1px); }
.brief-card-promo:hover { transform: none; }

.brief-card-promo {
  /* Platz für das X, damit der Pfeil nicht darunter läuft. */
  padding-right: 56px;
  background: linear-gradient(90deg, #2a1e06 0%, #40300b 100%);
  border-color: rgba(255, 183, 0, 0.32);
}
.brief-card-promo:hover { border-color: rgba(255, 183, 0, 0.62); }
.brief-card-promo .brief-card-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255, 183, 0, 0.16);
  border-color: rgba(255, 183, 0, 0.45);
  color: #ffd274;
}
.brief-card-promo .brief-card-tag svg { width: 13px; height: 13px; }
.brief-card-promo .brief-card-hint {
  background: rgba(255, 183, 0, 0.12);
  border-color: rgba(255, 183, 0, 0.34);
  color: #ffd274;
}
.brief-card-promo .arrow { color: #ffd274; }

/* Das X. Es liegt neben dem Band im Baum und nur optisch darauf — ein
   Knopf im Link wäre verschachtelte Bedienung. */
.brief-promo-close {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); margin: 0; line-height: 0;
}
.brief-promo-close button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 183, 0, 0.28);
  background: rgba(255, 183, 0, 0.1);
  color: #ffd274; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.brief-promo-close button:hover {
  background: rgba(255, 183, 0, 0.24);
  border-color: rgba(255, 183, 0, 0.55);
  color: #fff;
}

/* --- Verwaltung: Terminzeile ---------------------------------------------
 *
 * Ein Termin trägt mehr Felder, als in eine Zeile aus nackten Eingaben
 * passen. Deshalb steht über jedem Feld seine Beschriftung: ein
 * abgeschnittener Platzhalter in einem 74px breiten Kasten sagt niemandem,
 * dass hier die Vimeo-ID hingehört.
 */

.cellgrid {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
  max-width: 380px;
}
.cellfield { display: flex; flex-direction: column; gap: 3px; }
.cellfield-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.cellfield .input-slim { width: 104px; }
.cellfield-wide .input-slim { width: 100%; min-width: 168px; }
.cellfield-wide { flex: 1 1 168px; }
.cellgrid-foot {
  display: flex; align-items: center; gap: 10px;
  flex: 1 0 100%; margin-top: 2px;
}
.cellgrid-foot .cell-date { font-family: var(--mono); font-size: 11px; }

/* Der Zustand der Aufzeichnung steht über ihrem Formular: Vorschaubild,
   Restlaufzeit, Länge — damit auf einen Blick klar ist, ob eine hängt. */
.rec-state {
  display: flex; align-items: center; gap: 10px;
  flex: 1 0 100%; margin-bottom: 2px;
}
.rec-state .mini-thumb { width: 64px; height: 36px; flex: 0 0 auto; }
.rec-state-text { display: flex; flex-direction: column; gap: 3px; }

.checkline-slim { margin: 0; flex: 1 0 100%; font-size: 12px; }
.checkline-slim input { width: 15px; height: 15px; margin-top: 1px; }
.checkline-slim span { color: var(--text-3); }

/* Wochentag-Auswahl im Rhythmus: Chips, die sich anklicken lassen. */
.chips-check { margin-bottom: 0; }
.chip-check { cursor: pointer; gap: 8px; }
.chip-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.chip-check:has(input:checked) {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}

/* Abgesagte Termine in der Verwaltungstabelle. */
.list tr.is-off .cell-mail { text-decoration: line-through; color: var(--text-3); }

/* --- Zoom-Raum: Knopf und Meeting-Passwort ------------------------------- */

/* Beide nebeneinander, auf schmalen Schirmen untereinander. Das Passwort
   ist ein Knopf, weil es einer ist: ein Klick legt es in die Zwischenablage. */
.liveroom {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; margin-top: 18px;
}
.liveroom .btn { margin-top: 0; }

.livepw {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: var(--pill);
  border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.03);
  color: var(--text-2); cursor: pointer; font: inherit;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
              background var(--t) var(--ease);
}
:root[data-theme="light"] .livepw { background: var(--surface-2); }
.livepw:hover { border-color: var(--accent-line); color: var(--text); }
.livepw:active { transform: scale(0.98); }
.livepw-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.livepw-value {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text);
  /* Auswählbar bleiben: wer die Zwischenablage nicht hat, markiert von Hand. */
  user-select: all;
}
.livepw-icon { font-size: 14px; color: var(--text-3); }
/* Nach dem Kopieren, für zwei Sekunden. */
.livepw.is-copied { border-style: solid; border-color: var(--green); color: var(--green); }
.livepw.is-copied .livepw-icon,
.livepw.is-copied .livepw-label { color: var(--green); }

/* Nur für Vorlese-Programme: Text, der auf dem Schirm nichts zu suchen
   hat, im Dokument aber gebraucht wird — etwa die Überschrift einer Seite,
   die ihren Namen schon in der Kopfleiste trägt. `clip-path` statt
   `display: none`, sonst läse ihn niemand vor. */
.offscreen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Mentoring: die Auswahl und ihre drei Unterseiten ---------------------
   Das Mentoring besteht aus drei Bausteinen, und die Auswahlseite tut
   nichts anderes, als sie nebeneinanderzustellen: eine schmale Zeile
   oben, drei Kacheln darunter, Schluss. Alles, was ein Zustand ist —
   Termine, Fristen, Plaketten, Zahlen je Fach — steht auf der Unterseite,
   zu der es gehört.

   Vorher lag das alles auf einer Seite. Das war nicht zu viel Inhalt,
   sondern zu viel gleichzeitig: eine Seite, die neun Fragen auf einmal
   beantwortet, beantwortet keine davon.

   Aufgeklappt wird überall mit <details> — kein Skript, und der Browser
   merkt sich nichts, was der Server nicht auch weiß.                   */


/* --- Der Kopfbereich der Auswahlseite -------------------------------------
   Links Anrede und ein Satz, rechts der eine Hinweis als eigener Kasten.
   Vorher war beides eine dünne Zeile und der Hinweis stand kalt am
   rechten Rand — er sah aus wie eine Fußnote an der Begrüßung, dabei ist
   er das Einzige auf dieser Seite, das gerade wirklich etwas will.

   Der Verlauf dahinter ist der Anker, den die Seite oben braucht: ohne
   ihn fängt sie schwarz an und die erste Farbe kommt erst bei den
   Kacheln. Er ist bewusst so leise, dass man ihn eher merkt als sieht —
   zwei weiche Lichter, kein Kasten.                                    */

.mhead {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center; gap: clamp(18px, 2vw, 32px);
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-card); border: 1px solid var(--line);
  background:
    radial-gradient(78% 150% at 8% 0%, rgba(46, 144, 250, 0.17), transparent 62%),
    radial-gradient(64% 140% at 92% 8%, rgba(99, 91, 255, 0.11), transparent 64%),
    var(--surface-2);
}
:root[data-theme="light"] .mhead {
  background:
    radial-gradient(78% 150% at 8% 0%, rgba(46, 144, 250, 0.13), transparent 62%),
    radial-gradient(64% 140% at 92% 8%, rgba(99, 91, 255, 0.09), transparent 64%),
    var(--surface);
}
/* Dieselbe feine Struktur wie auf den Flächen darunter — sie hält die
   beiden Lichter zusammen, statt sie verlaufen zu lassen. */
.mhead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 38px);
  -webkit-mask-image: radial-gradient(80% 130% at 6% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 130% at 6% 0%, #000, transparent 70%);
}
:root[data-theme="light"] .mhead::before { display: none; }

.mhead-text { position: relative; min-width: 0; }
.mhead-hi {
  margin: 0;
  font-family: var(--display); font-size: clamp(21px, 2.2vw, 29px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.15;
  color: var(--text-2); text-wrap: balance;
}
/* Der Name ist das eine Wort, das dieser Person gehört — er darf voll
   stehen, alles andere darum bleibt eine Stufe leiser. */
.mhead-hi b { font-weight: 800; color: var(--text); }
.mhead-sub {
  margin: 7px 0 0; max-width: 46ch;
  font-size: 14px; line-height: 1.6; color: var(--text-3);
}

/* --- Der „jetzt dran“-Kasten im Kopf --- */
.mnow {
  position: relative; min-width: 0; max-width: 380px;
  padding: 15px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
}
.mnow.is-live {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.mnow-cap {
  margin: 0 0 9px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.mnow.is-live .mnow-cap { color: var(--accent); }

.mnow-what {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 11px; row-gap: 1px;
  margin: 0; font-size: 13.5px;
}
.mnow-mark {
  grid-area: 1 / 1 / 3 / 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-icon);
  background: var(--surface-3); border: 1px solid var(--line-2);
  color: var(--text-2);
}
.mnow-mark svg { width: 15px; height: 15px; }
.mnow.is-live .mnow-mark {
  border-color: transparent; background: var(--grad); color: var(--on-accent);
  box-shadow: 0 8px 20px -12px var(--glow);
}
.mnow-what b {
  grid-area: 1 / 2; min-width: 0; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `:not(.mnow-mark)`, weil das Symbol selbst ein <span> ist: ohne das
   erwischt diese Regel es mit und legt es in die zweite Zeile, quer über
   den Titel. */
.mnow-what > span:not(.mnow-mark) {
  grid-area: 2 / 2; min-width: 0; font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mnow-what.is-quiet b { font-weight: 500; color: var(--text-2); }

/* Kein Knopf, sondern ein Link mit Winkel — ein voller Knopf machte aus
   dem Hinweis einen zweiten Aufruf neben den Kacheln. */
.mnow-go {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 11px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.mnow-go:hover { text-decoration: none; filter: brightness(1.15); }
.mnow-go svg { width: 15px; height: 15px; transform: rotate(-90deg); }

@media (max-width: 860px) {
  .mhead { grid-template-columns: minmax(0, 1fr); }
  .mnow { max-width: none; }
}


/* --- „Weiter, wo du warst“ ------------------------------------------------
   Der kurze Weg zurück in die angefangene Lektion: Bild, Titel, Pfeil,
   die ganze Fläche klickbar. Flacher als eine Kachel und schmaler als die
   Seite — er ist eine Abkürzung, kein vierter Baustein.

   Er steht nur da, wenn es wirklich ein „weiter“ gibt; darüber entscheidet
   die Route (`_resume_strip`), nicht dieses Stylesheet.               */

.mgo {
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(14px, 1.6vw, 22px);
  padding: 11px 16px 11px 11px; color: inherit;
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.mgo:hover {
  text-decoration: none; color: inherit; transform: translateY(-1px);
  border-color: var(--accent-line); background: var(--accent-soft);
}

.mgo-thumb {
  position: relative; flex: 0 0 auto; overflow: hidden;
  width: 92px; aspect-ratio: 16 / 9; border-radius: var(--r-sm);
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(46, 144, 250, 0.28), transparent 62%),
    linear-gradient(168deg, #111c30, #080a12);
  border: 1px solid var(--line-2);
}
.mgo-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.86;
}
/* Der Knopf liegt auf dem Bild — er sagt, was passiert, ohne dass ein
   zweiter danebenstehen muss. */
.mgo-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.92);
}
.mgo-play svg {
  width: 24px; height: 24px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.mgo-text { flex: 1; min-width: 0; }
.mgo-cap {
  display: block;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.mgo-text strong {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: clamp(15px, 1.5vw, 17.5px);
  font-weight: 700; letter-spacing: -0.03em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgo-sub {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mgo-go {
  flex: 0 0 auto; display: inline-flex; color: var(--text-3);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.mgo-go svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.mgo:hover .mgo-go { color: var(--accent); transform: translateX(2px); }

@media (max-width: 560px) {
  .mgo-thumb { width: 74px; }
  .mgo-go { display: none; }
}


/* --- Die drei Kacheln -----------------------------------------------------
   Oben die Fläche, darunter Titel, ein Satz, eine Zahl. Gleich gebaut und
   im selben Raster, damit keine von ihnen wichtiger aussieht als die
   andere — welche man zuerst öffnet, ist eine Frage des Tages und nicht
   der Gestaltung.

   `auto-fit` mit 290 px legt sie unter rund 950 px zu zweit und unter
   620 px untereinander. Drei Briefmarken nebeneinander wären auf dem
   Handy keine Auswahl.                                                */

.mtiles {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.mtile {
  position: relative;
  display: flex; flex-direction: column; color: inherit;
  border-radius: var(--r-card); overflow: hidden;
  background-color: var(--surface); background-image: var(--grad-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
/* Beim Überfahren hebt sie sich und bekommt einen weichen Schein in der
   Akzentfarbe — weit gestreut und tief gesetzt, damit es ein Licht bleibt
   und kein Rahmen wird. */
.mtile:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-3px); border-color: var(--accent-line);
  box-shadow: var(--shadow-lift), 0 24px 64px -38px var(--glow);
}
.mtile.is-locked:hover {
  transform: none; box-shadow: var(--shadow); border-color: var(--line);
}

/* Der große Klick: ein leerer Link im Textteil, den `::after` über die
   ganze Kachel zieht. So bleibt die Fläche als Ganzes anklickbar, ohne
   dass ein <a> um alles liegt — und die Zeile „Weiter mit Lektion …“
   kann darin ihr eigenes Ziel behalten. Sie liegt eine Stufe höher und
   fängt ihren Klick vorher ab. */
.mtile-open { position: static; }
.mtile-open::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
/* Mit der Tastatur ist der leere Link die Kachel: der Ring gehört also
   um die Kachel und nicht um ein Nichts von null Pixeln. */
.mtile:focus-within { border-color: var(--accent-line); }
.mtile-open:focus-visible::after {
  outline: 2px solid var(--accent); outline-offset: 3px;
}


/* --- Die Cover-Fläche -----------------------------------------------------
   Drei Flächen derselben Machart: tiefes Navy, ein weiches Licht von
   oben, eine feine Struktur darüber, der Titel unten links. Sie sind
   gleich hell und unterscheiden sich nur um eine Nuance im Ton — Blau,
   Blau mit mehr Sättigung, Blau ins Indigo. Stäche eine heraus, wäre die
   Reihe keine Auswahl mehr, sondern eine Rangfolge.

   Der Titel steht hier und nicht unter der Fläche: er stand vorher an
   beiden Stellen, und ein riesiger Anfangsbuchstabe daneben rang mit ihm
   um denselben Platz. Hier ist er ruhig gesetzt — lesbar, aber nicht
   laut.

   Wird später ein echtes Bild hochgeladen, tritt es an genau dieselbe
   Stelle; die Verläufe bleiben als Grund darunter liegen, und der
   Schleier hält den Titel darauf lesbar. Ob hochgeladene Cover überhaupt
   gezeigt werden, entscheidet `SHOW_COURSE_COVERS` in der Route.      */

.mcover {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; color: #fff; background: #080a12;
}

/* Verlauf und Struktur liegen auf einer eigenen Ebene. Nur sie wächst
   beim Überfahren — Titel und Symbol bleiben, wo sie sind. Sie mit der
   Fläche zu skalieren hieße, auch den Titel zu vergrößern, und ein
   wandernder Titel ist kein Detail, sondern ein Wackler. */
.mcover-art {
  position: absolute; inset: 0;
  background-color: #0b1120;
  background-image:
    radial-gradient(96% 118% at 50% -12%, rgba(46, 144, 250, 0.30), transparent 62%),
    linear-gradient(168deg, #111c30 0%, #0b1120 46%, #080a12 100%);
  /* Das Bild kommt als weitere Ebene aus der Vorlage und legt sich davor;
     `cover` und `center` gelten für alle Ebenen, der Verlauf bleibt also
     als Grund darunter, wenn ein Bild einmal fehlt. */
  background-size: cover; background-position: center;
  transition: transform var(--t-slow) var(--ease);
}
/* Die Nuancen: nur der Ort und der Ton des Lichts wechseln, nie seine
   Stärke — sonst wäre eine Kachel heller als die anderen. */
.mcover.tone-1 .mcover-art {
  background-image:
    radial-gradient(96% 118% at 26% -12%, rgba(46, 144, 250, 0.30), transparent 62%),
    linear-gradient(168deg, #101b2f 0%, #0b1120 46%, #080a12 100%);
}
.mcover.tone-live .mcover-art {
  background-image:
    radial-gradient(96% 118% at 50% -12%, rgba(64, 156, 255, 0.34), transparent 62%),
    linear-gradient(168deg, #12203a 0%, #0b1222 46%, #080a12 100%);
}
.mcover.tone-2 .mcover-art {
  background-image:
    radial-gradient(96% 118% at 74% -12%, rgba(99, 91, 255, 0.25), transparent 62%),
    linear-gradient(168deg, #111830 0%, #0b0f20 46%, #080a12 100%);
}
.mcover.tone-3 .mcover-art {
  background-image:
    radial-gradient(96% 118% at 38% -12%, rgba(40, 178, 220, 0.26), transparent 62%),
    linear-gradient(168deg, #0f1e2c 0%, #0a1220 46%, #080a12 100%);
}

/* Die Struktur: ein feines Raster, oben angedeutet, nach unten
   verschwindend — dieselbe Handschrift wie im Kopfbereich darüber. */
.mcover-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 62%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 62%, transparent);
}
/* Liegt ein Bild auf der Fläche, entfällt das Raster: es hat seine
   eigene Struktur, und zwei Muster übereinander sind Unruhe. Der
   Attribut-Vergleich trifft genau die Flächen, die die Vorlage mit einem
   Bild versehen hat. */
.mcover-art[style]::after { display: none; }

/* Der Zoom beim Überfahren: eine Spur, nicht ein Sprung. */
.mtile:hover .mcover-art { transform: scale(1.045); }
.mtile.is-locked:hover .mcover-art { transform: none; }
/* Ein Schleier nach unten: er trägt den Titel — über dem Verlauf wie über
   einem später hochgeladenen Foto. Nicht bis Schwarz: darunter soll das
   Navy noch durchkommen, sonst endet jede Fläche in derselben Nacht. */
.mcover::after {
  content: ""; position: absolute; inset: 42% 0 0;
  background: linear-gradient(180deg, transparent, rgba(4, 7, 16, 0.62));
}

.mcover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.88;
  transition: transform var(--t-slow) var(--ease);
}
.mtile:hover .mcover img { transform: scale(1.03); }

/* Der Titel auf der Fläche: unten links, in der Anzeigeschrift, ruhig.
   Er ist die Überschrift der Kachel und steht deshalb über dem Schleier
   (z-index), nicht darunter. */
.mcover-name {
  position: absolute; z-index: 1;
  left: clamp(16px, 1.7vw, 22px); right: clamp(16px, 1.7vw, 22px);
  bottom: clamp(14px, 1.5vw, 19px);
  font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.14;
  color: rgba(255, 255, 255, 0.94); text-wrap: balance;
}
.mtile.is-locked .mcover-name { color: rgba(255, 255, 255, 0.66); }

.mcover-mark {
  position: absolute; z-index: 1;
  right: clamp(12px, 1.3vw, 16px); top: clamp(12px, 1.3vw, 16px);
  width: 32px; height: 32px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mcover-mark svg { width: 15px; height: 15px; }

/* Die Plakette „Neu": oben links, gegenüber dem Symbol. Sie ist das
   einzige Farbige auf der Fläche und darf das auch sein — sie steht nur
   da, solange etwas wirklich neu ist, und ist nach dem ersten Besuch
   wieder weg. */
.mtile-new {
  position: absolute; z-index: 1;
  left: clamp(12px, 1.3vw, 16px); top: clamp(12px, 1.3vw, 16px);
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--grad); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 6px 20px -8px var(--glow);
}
.mtile.is-locked .mcover { filter: grayscale(0.5) brightness(0.72); }


/* --- Der Text unter der Fläche --- */
.mtile-body {
  flex: 1; display: flex; flex-direction: column; gap: 7px;
  padding: clamp(16px, 1.6vw, 21px) clamp(16px, 1.6vw, 22px)
           clamp(15px, 1.5vw, 19px);
}
.mtile-note {
  font-size: 13.5px; line-height: 1.55; color: var(--text-3);
}

/* Der Fortschritt: ein Satz und ein Strich, ganz unten und leise. Der
   Satz sagt, wohin es geht, der Strich sagt, wie weit — eine nackte
   Zählung sagte nur das Zweite, und das auch noch als Zahl, die man erst
   in Bewegung übersetzen muss.

   Untereinander und nicht nebeneinander: ein Satz ist länger als „7 / 12“
   und drückte den Strich sonst auf einen Rest zusammen. */
.mtile-foot {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: auto; padding-top: 13px;
}
.mtile-hint {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.mtile-hint.is-quiet { color: var(--text-3); }
.mtile-hint svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  transform: translateY(2px); color: var(--text-3);
}
/* Die Abkürzung: derselbe Satz, aber als Link — und deshalb einen Ton
   kräftiger, mit einem Pfeil, der beim Überfahren anzieht. Er liegt über
   dem großen Klick (z-index), sonst führe auch er zur Kursübersicht. */
.mtile-hint.is-go {
  position: relative; z-index: 2; align-self: flex-start;
  color: var(--text); font-weight: 500;
  transition: color var(--t) var(--ease);
}
.mtile-hint.is-go:hover { color: var(--accent); text-decoration: none; }
.mtile-hint-go {
  display: inline-flex; flex: 0 0 auto; align-self: center;
  transition: transform var(--t) var(--ease);
}
/* Derselbe Winkel wie am Streifen darüber (`.mgo-go`): der Haken zeigt
   von Haus aus nach unten und wird zum Pfeil nach rechts gedreht. */
.mtile-hint-go svg {
  width: 14px; height: 14px; transform: rotate(-90deg); color: currentColor;
}
.mtile-hint.is-go:hover .mtile-hint-go { transform: translateX(3px); }
.mtile-bar {
  width: 100%; height: 3px; border-radius: var(--pill);
  background: var(--line); overflow: hidden;
}
/* Der Strich startet leer und läuft beim Laden auf seinen Wert zu — die
   Breite setzt becro.js (`armProgress`), die Bewegung steht hier. Ohne
   Skript greift der Übergang nie und der Strich steht sofort richtig. */
.mtile-bar i {
  display: block; height: 100%; background: var(--grad);
  transition: width 900ms var(--ease);
}
/* Die Zählung unter dem Strich: dieselbe Auskunft in Zahlen, für alle,
   die lieber lesen als schätzen. Deshalb so leise wie möglich — sie ist
   die dritte Zeile und darf die erste nicht überholen. */
.mtile-tally {
  font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}


/* --- Was unter den Kacheln steht ------------------------------------------
   Leer ist nicht ruhig, sondern unfertig — unter drei Kacheln blieb die
   halbe Seite übrig. Was hier steht, füllt den Platz, ohne ihn zu
   belegen: kein Block zeigt einen Zustand, keiner hat eine Plakette, und
   die einzige Zahl auf dieser ganzen Ebene ist die Schrittnummer.

   Nebeneinander, weil der Platz waagerecht übrig war: der Ablauf braucht
   die Breite für seine Sätze, die Termine kommen mit einer schmalen
   Spalte aus. Unter 900 px liegen sie untereinander.                  */

.mrest {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  margin-top: clamp(26px, 3vw, 42px);
}
/* Beide Blöcke gleich hoch (der Vorgabe des Rasters folgend), und
   „Alle Termine“ sitzt unten — sonst hängt der kürzere Block in der Luft
   und der Absatz darunter sieht aus wie ein Fehler. */
@media (max-width: 900px) {
  .mrest { grid-template-columns: minmax(0, 1fr); }
}

/* Ein Block ist ein ruhiger Kasten: derselbe Rahmen wie die
   Durchgangszeile, keine Fläche, kein Schatten. Er steht neben den
   Kacheln und soll nicht mit ihnen um Aufmerksamkeit ringen. */
.mblock {
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 26px);
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
}
.mblock-cap {
  margin: 0 0 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.mblock-none {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-3);
}

/* Der Weg zur ganzen Liste — ein Link mit Winkel, kein Knopf. Ein Knopf
   machte aus dem Ausblick eine Aufforderung. */
.mblock-more {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: auto; padding-top: 16px; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.mblock-more:hover { text-decoration: none; filter: brightness(1.15); }
.mblock-more svg { width: 15px; height: 15px; transform: rotate(-90deg); }


/* --- Der Ablauf in drei Schritten --- */
.mweg { list-style: none; margin: 0; padding: 0; }
.mweg-step {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px;
}
.mweg-step:last-child { padding-bottom: 0; }

/* Die Linie zwischen den Ziffern: sie macht aus drei Punkten einen Weg.
   Am letzten Schritt hört sie auf, sonst zeigte sie ins Nichts. */
.mweg-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-2), rgba(255, 255, 255, 0.04));
}
:root[data-theme="light"] .mweg-step:not(:last-child)::before {
  background: linear-gradient(180deg, var(--line-2), transparent);
}
.mweg-no {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.mweg-text {
  min-width: 0; padding-top: 3px;
  font-size: 13.5px; line-height: 1.6; color: var(--text-3);
}
.mweg-text b {
  display: block; margin-bottom: 1px;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -0.028em; color: var(--text);
}


/* --- Die nächsten Termine --- */
.mdates { list-style: none; margin: 0; padding: 0; }
/* Die Trennlinie ist kein Strich von Rand zu Rand, sondern ein Verlauf,
   der an beiden Enden ausgeht. Sie trennt damit, ohne zu schneiden — ein
   durchgezogener Strich zerlegt eine kurze Liste in Kästchen. */
.mdates li {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
}
.mdates li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
              transparent, var(--line-2) 18%, var(--line-2) 74%, transparent);
}
.mdates li:first-child { padding-top: 0; }
.mdates li:last-child { padding-bottom: 0; }
.mdates li:last-child::after { display: none; }
.mdates-when {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}
.mdates-when b { display: block; font-weight: 600; color: var(--text-2); }
.mdates-title {
  min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--text);
}
.mdates-no {
  margin-right: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--text-3);
}


/* --- Austausch: eine Leiste, kein vierter Kasten -------------------------
   Sie liegt unter den beiden Blöcken über die ganze Breite und ist
   flacher als sie — der Austausch ist ein Angebot, kein Schritt.      */

.mtalk {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: 15px clamp(20px, 2vw, 26px);
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
}
.mtalk-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-icon);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
}
.mtalk-mark svg { width: 16px; height: 16px; }
.mtalk-text {
  flex: 1; min-width: 200px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--text-3);
}
.mtalk-text b {
  display: block;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -0.028em; color: var(--text);
}
.mtalk .btn { flex: 0 0 auto; margin-top: 0; }
.mtalk-none {
  flex: 0 0 auto; font-size: 12.5px; color: var(--text-3);
}
/* Knopf und Beschriftung sind eine Einheit: der Knopf sagt „Discord“,
   die Zeile darunter, welcher — sonst müsste der Knopf beides tragen und
   wäre eine Zeile Fließtext mit Rahmen.                                */
.mtalk-go {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 5px;
}
.mtalk-cap {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}

/* --- Der Briefkasten unter dem Austausch ----------------------------------
   Ein Feld und ein Knopf, nebeneinander, weil eine Frage meist eine Zeile
   ist. Unter 620 px liegen sie untereinander — ein Knopf, der neben einem
   Feld auf Daumenbreite schrumpft, ist keiner mehr.                    */

.mfrage {
  margin-top: 10px;
  padding: 15px clamp(20px, 2vw, 26px) 17px;
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
}
.mfrage .notice { margin: 0 0 12px; }
.mfrage-form { display: flex; align-items: flex-start; gap: 12px 16px; }
.mfrage-field { flex: 1; min-width: 0; margin-bottom: 0; }
.mfrage-field textarea { min-height: 64px; font-size: 14px; }
.mfrage-form .btn { flex: 0 0 auto; margin-top: 26px; }
.mfrage-note {
  margin: 10px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--text-3);
}
@media (max-width: 620px) {
  .mfrage-form { flex-direction: column; align-items: stretch; }
  .mfrage-form .btn { margin-top: 0; justify-content: center; }
}


/* --- Nach dem Mentoring: die Übergangs-Karte -------------------------------
 *
 * Sie steht auf zwei Seiten (Mentoring-Auswahl und Dashboard) und sagt
 * dort dasselbe: der Durchgang ist durch, hier geht es weiter. Groß,
 * damit sie nicht zu übersehen ist — und ruhig, weil sie jemandem
 * gegenübersteht, der gerade eine Ausbildung beendet hat und keine
 * Reklame braucht.
 *
 * Deshalb kein Verlauf, kein Leuchten, keine zweite Farbe: dieselbe
 * Fläche wie jede andere Karte, nur mit einem Hauch Akzent an der Kante
 * und einem breiten Rand innen. Das Gewicht kommt aus dem Platz, den sie
 * nimmt, nicht aus der Lautstärke.
 */

.bridge {
  position: relative;
  margin: clamp(16px, 1.8vw, 24px) 0 clamp(20px, 2.2vw, 30px);
  padding: clamp(24px, 2.8vw, 38px) clamp(22px, 2.6vw, 40px);
  border-radius: var(--r-card);
  border: 1px solid var(--accent-line);
  background: var(--surface-2);
}
/* Platz für das X in der Ecke, damit kein Wort darunter läuft. */
.bridge-body { max-width: 62ch; padding-right: 34px; }

.bridge-cap {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.bridge-cap svg { width: 13px; height: 13px; }

.bridge-title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(24px, 2.9vw, 34px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.12; color: var(--text);
}
.bridge-text {
  margin: 0;
  font-size: 15px; line-height: 1.62; color: var(--text-2);
}
.bridge-go { margin-top: 20px; }

/* Das X liegt neben der Karte im Baum und nur optisch darin — dieselbe
   Bauart wie am Mentoring-Band auf dem Dashboard. */
.bridge-close {
  position: absolute; top: 14px; right: 14px; margin: 0; line-height: 0;
}
.bridge-close button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3); font-size: 17px; line-height: 1; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.bridge-close button:hover {
  background: var(--surface-3);
  border-color: var(--line-2); color: var(--text);
}

/* Auf dem Dashboard tritt sie an die Stelle des Heros und nimmt dessen
   Fläche: dieselbe Höhe wie die Spalte daneben, dieselbe große Rundung,
   derselbe weiche Schein hinter dem Text. Der Text sitzt unten wie im
   Hero — nur ohne Bild darunter und ohne den harten Verlauf, den ein
   Bild braucht. Sie ersetzt dort den „Mitglied werden"-Hero und ist
   damit das eine Angebot der Seite, nicht das zweite. */
.bridge-hero {
  display: flex; align-items: flex-end;
  margin: 0;
  min-height: clamp(320px, 42vh, 420px);
  padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 52px);
  border-radius: var(--r-lg);
  border-color: var(--line-2);
  background: var(--grad-hero), var(--surface);
  box-shadow: var(--shadow);
}
.bridge-hero .bridge-title {
  font-size: clamp(26px, 3.1vw, 44px); line-height: 1.04;
}
.bridge-hero .bridge-text { max-width: 56ch; }

@media (max-width: 620px) {
  .bridge-body { padding-right: 0; }
  .bridge-go { width: 100%; }
  .bridge-hero {
    min-height: 0;
    padding: clamp(22px, 6vw, 30px) 20px;
  }
}


/* --- Der Ablauf über einer Unterseite -------------------------------------
   Vier Sätze, bevor die Liste anfängt: die erste Frage an einem Kurs oder
   an einer Terminliste lautet nicht „welche Zeile“, sondern „was ist das
   hier und wie ist es gemeint“. Der Kasten ist deshalb ruhig und tut
   nichts — er hat keinen Knopf und keine Zahl.                        */

.ablauf {
  margin: clamp(16px, 1.8vw, 24px) 0 clamp(22px, 2.4vw, 32px);
  padding: clamp(17px, 1.7vw, 22px) clamp(19px, 1.9vw, 26px);
  border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--surface-2);
}
.ablauf-cap {
  margin: 0 0 14px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.ablauf-grid {
  display: grid; gap: 15px 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
}
.ablauf-item { display: flex; align-items: flex-start; gap: 12px; }
.ablauf-mark {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-icon);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
}
.ablauf-mark svg { width: 15px; height: 15px; }
.ablauf-text {
  min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-3);
}
.ablauf-text b {
  display: block; margin-bottom: 2px;
  font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: -0.025em; color: var(--text);
}


/* --- Der Kopf der Kursübersicht -------------------------------------------
   Links Titel, Untertitel und Fortschrittsbalken, rechts auf ihrer Höhe
   die Karte „Weiterschauen“. Die Karte ist schmal und fest: sie soll
   neben dem Titel stehen, nicht mit ihm um die Breite ringen. Unter
   860 px rutscht sie unter den Titel und wird ganz breit — nebeneinander
   wären dort zwei zu enge Spalten.                                     */

.kurskopf {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.kurskopf-main h1 { margin-bottom: 12px; }

@media (max-width: 860px) {
  .kurskopf { grid-template-columns: 1fr; }
}


/* --- Fortschritt über der Lektionsliste ---
   Nur noch der Balken: der Knopf „Fortsetzen“, der hier stand, ist in
   die Karte nebenan gewandert — zwei Sprünge ins selbe Video auf einer
   Höhe waren einer zu viel. */
.kursbar {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  max-width: 860px; margin-top: clamp(16px, 1.8vw, 22px);
}
.kursbar .progress { flex: 1 1 260px; margin: 0; }


/* --- Die Karte „Weiterschauen“ --------------------------------------------
   Das eine Ziel, das diese Seite anbietet, und deshalb das einzige
   Farbige im Kopf: Vorschaubild, Titel, Platz im Kurs, Laufzeit. Wer nur
   weiterschauen will, klickt hier und liest die Modulliste gar nicht.

   Sie steht nur da, wenn es etwas fortzusetzen gibt; ist der Kurs durch,
   trägt dieselbe Karte die Meldung darüber (`.is-done`) — grün, ohne
   Link, ohne Pfeil. Das ist kein Ziel mehr, sondern eine Quittung.    */

.weiter {
  display: block; color: inherit;
  padding: 14px 15px 15px; border-radius: var(--r-card);
  background-color: var(--surface); background-image: var(--grad-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
a.weiter:hover {
  text-decoration: none; color: inherit;
  transform: translateY(-2px); border-color: var(--accent-line);
  box-shadow: var(--shadow-lift), 0 20px 52px -34px var(--glow);
}

.weiter-cap {
  display: block; margin-bottom: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.weiter-row { display: flex; align-items: center; gap: 11px; }

/* Das Vorschaubild: klein und im Videoformat, damit es als Standbild
   lesbar bleibt. Fehlt eines, bleibt die dunkle Fläche mit dem
   Abspielzeichen stehen — eine leere Lücke wäre schlechter als ein
   ruhiges Feld. */
.weiter-thumb {
  position: relative; flex: 0 0 auto;
  width: 76px; aspect-ratio: 16 / 10; border-radius: var(--r-icon);
  overflow: hidden; background: #0b1120;
  display: grid; place-items: center; color: rgba(255, 255, 255, 0.9);
}
.weiter-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.weiter-play {
  position: relative; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(8, 12, 22, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: transform var(--t) var(--ease);
}
.weiter-play svg { width: 12px; height: 12px; }
a.weiter:hover .weiter-play { transform: scale(1.1); }

.weiter-text { min-width: 0; }
/* Der Titel darf zwei Zeilen haben und bricht dann ab: eine Karte, die
   mit der Lektion mitwächst, verschöbe den Balken daneben. */
.weiter-text b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25; color: var(--text);
}
.weiter-meta {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.weiter-dot { margin: 0 2px; }

.weiter.is-done { border-color: var(--line); }
.weiter.is-done .weiter-thumb {
  background: var(--green-soft); color: var(--green);
}
.weiter.is-done .weiter-thumb svg { width: 22px; height: 22px; stroke-width: 2.6; }
.weiter.is-done .weiter-text b { color: var(--green); }


/* --- Wessen Termine hier stehen -------------------------------------------
   Für einen Teilnehmer eine Auskunft, keine Auswahl — sein Durchgang
   steht am Konto. Nur der Admin, der von außen hineinschaut, bekommt
   dahinter den Wechsler, und der ist als Werkzeug der Verwaltung
   gekennzeichnet.                                                      */

.dgbar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 13px 20px;
  border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface-2);
}
.dgbar-cap {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.dgbar-name {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.dgbar-name.is-quiet { font-weight: 600; color: var(--text-3); }
.dgbar-period {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
}
.dgbar .badge { padding: 5px 12px; font-size: 9.5px; }

.dgswitch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto; padding-left: 16px; border-left: 1px solid var(--line-2);
}
.dgswitch label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}
.dgswitch label svg { width: 13px; height: 13px; color: var(--text-3); }
.dgswitch select {
  padding: 8px 12px; font-size: 13px; border-radius: var(--pill);
  min-width: 210px;
}
.dgswitch .btn { margin-top: 0; padding: 8px 16px; font-size: 13px; }

/* Der Zustand des Durchgangs als Plakette — dieselbe Bauform wie im Hero. */
.badge-aktiv {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent);
}
.badge-geplant { color: var(--text-2); }
.badge-abgeschlossen {
  border-color: rgba(9, 227, 84, 0.4); background: var(--green-soft);
  color: var(--green);
}

/* Der Hinweis für einen abgeschlossenen Durchgang: was wegfällt und was
   bleibt, an der Stelle, an der sonst die nächsten Termine stünden. */
.dgnote {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 13px 18px;
  border-radius: var(--r-sm); border: 1px solid rgba(9, 227, 84, 0.32);
  background: var(--green-soft);
  font-size: 13px; color: var(--text-2); max-width: 78ch;
}
.dgnote svg {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px;
  stroke-width: 2.6; color: var(--green);
}


/* --- Zwei Spalten auf der Webinar-Seite --- */
.live-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(16px, 1.6vw, 26px); align-items: start;
}
.live-side {
  position: sticky; top: calc(var(--topbar-h) + 20px);
  display: flex; flex-direction: column; gap: 14px;
}
.side-card { padding: 20px 22px; }
.side-card h3 { margin: 0; font-size: 15px; }
.side-card .btn { margin-top: 14px; }
.side-card .panel-head { margin-bottom: 8px; }
/* In einer Spalte mit eigenem Abstand wäre der Aufschlag von
   `.panel + .panel` ein zweiter Abstand. */
.live-side .panel + .panel { margin-top: 0; }

/* Kommende Termine in der Seitenspalte. */
.dates { list-style: none; margin: 0; padding: 0; }
.dates li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.dates li:last-child { border-bottom: 0; }
.dates-day {
  display: block; font-family: var(--mono); font-size: 12.5px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.dates-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }


/* --- Die Webinar-Liste ----------------------------------------------------
   Ein durchgehender Faden, an dem die Termine hängen — der Kalender als
   Linie. Zugeklappt trägt eine Zeile drei Dinge und sonst nichts: das
   Datum links vom Faden, den Punkt darauf, den Titel rechts davon. Der
   Zustand steht als ein Wort am rechten Rand, in der Farbe des Punktes
   und ohne Plakette drumherum — eine Plakette je Zeile wären elf Kästen
   untereinander, und genau daran ist die alte Zeile erstickt.

   Die ganze Kopfzeile ist der Aufklapper (ein <summary>), deshalb steht
   kein einziger Knopf darin: ein Knopf im <summary> klappte beim Klick
   auch die Zeile auf und zu. Alles, was man mit einem Webinar tun kann,
   liegt darunter im aufgeklappten Teil.

   Ob eine Zeile ihre Spalten nebeneinander unterbringt, hängt nicht am
   Fenster, sondern an der Breite dieser Liste — in der zweispaltigen
   Ansicht ist sie selbst bei 1280 px schmaler als auf einem Tablet mit
   900. Deshalb fragt sie ihre eigene Umgebung (`@container`).

   `--rail` ist die einzige Zahl, an der der Faden hängt: Innenabstand
   links (18) + Terminspalte (100) + Spaltenabstand (16) + halber Punkt
   (12). `--stem` ist dieselbe Rechnung bis zum Titel — daran hängt der
   Einzug des aufgeklappten Teils.                                      */

.wlist {
  container: wlist / inline-size;
  --rail: 146px;
  --stem: 174px;
  padding: 4px clamp(16px, 1.7vw, 24px) 12px;
  border-radius: var(--r-card);
  background-color: var(--surface); background-image: var(--grad-soft);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}

/* Die Überschrift der Liste: links, wofür sie steht, rechts der Stand.
   Der Stand steht genau einmal auf der Seite, und hier. */
.wlist-cap {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  margin: 0; padding: 14px 2px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.wlist-count {
  margin-left: auto; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Der Faden. Er läuft hinter allem durch, auch hinter dem aufgeklappten
   Teil — so bleibt sichtbar, zu welchem Punkt der gehört. */
.wrail { position: relative; }
.wrail::before {
  content: ""; display: none; position: absolute;
  left: var(--rail); top: 24px; bottom: 24px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg,
              var(--accent-line), var(--line-2) 55%, transparent);
}

/* --- Eine Zeile --- */
.wline { position: relative; border-bottom: 1px solid var(--line-soft); }
.wline:last-child { border-bottom: 0; }

.wline-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 5px 14px;
  padding: 15px 4px 15px 18px;
  cursor: pointer; list-style: none; border-radius: var(--r-sm);
  transition: background var(--t) var(--ease);
}
.wline-head::-webkit-details-marker { display: none; }
.wline-head:hover { background: rgba(255, 255, 255, 0.03); }
:root[data-theme="light"] .wline-head:hover { background: var(--surface-2); }

/* Schmal liegen Datum und Zustand als leise Zeile unter dem Titel, der
   Punkt entfällt. Breit stehen sie in Spalten — siehe ganz unten. */
.wline-when {
  grid-area: 2 / 1; align-self: start;
  font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}
.wline-when b { font-weight: 600; color: var(--text-2); }
.wline-when b.is-quiet { font-weight: 400; color: var(--text-3); }
.wline-when span::before { content: " · "; }

/* Der Punkt auf dem Faden trägt den Zustand. */
.wline-dot { display: none; grid-area: 1 / 2; place-items: center; }
.wline-dot i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center;
}
.wline-dot svg { width: 8px; height: 8px; stroke-width: 3.4; color: transparent; }
.wline.is-aufzeichnung .wline-dot i { border-color: var(--green); }
.wline.is-erledigt .wline-dot i { border-color: var(--green); background: var(--green); }
.wline.is-erledigt .wline-dot svg { color: #06210f; }
.wline.is-verpasst .wline-dot i { border-color: var(--amber); background: var(--amber-soft); }
.wline.is-geplant .wline-dot i { border-color: var(--accent-deep); }
.wline.is-offen .wline-dot i { border-color: var(--line); opacity: 0.75; }
.wline.is-heute .wline-dot i {
  width: 18px; height: 18px; border-color: transparent;
  background: var(--grad);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 20px var(--glow);
}

/* Der Titel ist die Hauptsache der Zeile und darf so aussehen. */
.wline-title { grid-area: 1 / 1; min-width: 0; }
.wline-no {
  display: inline-block; margin-right: 10px; vertical-align: 1px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--text-3);
}
.wline-title strong {
  font-family: var(--display); font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700; letter-spacing: -0.032em; color: var(--text);
}
.wline.is-offen .wline-title strong,
.wline.is-erledigt .wline-title strong { color: var(--text-2); }

/* Der Zustand als ein Wort, nicht als Kasten. */
.wline-state {
  grid-area: 2 / 1; justify-self: end; align-self: start;
  white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.wline.is-heute .wline-state { color: var(--accent); }
.wline.is-aufzeichnung .wline-state,
.wline.is-erledigt .wline-state { color: var(--green); }
.wline.is-verpasst .wline-state { color: var(--amber); }
.wline.is-geplant .wline-state { color: var(--text-2); }

/* Der Aufklapp-Hinweis: ein Winkel, der sich dreht. Das Wort „Details“
   wäre in elf Zeilen elfmal dasselbe Wort. */
.wline-caret {
  grid-area: 1 / 3; justify-self: end;
  display: inline-flex; color: var(--text-3);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}
.wline-caret svg { width: 18px; height: 18px; }
.wline-head:hover .wline-caret { color: var(--text-2); }
.wline[open] .wline-caret { transform: rotate(180deg); }

/* Der heutige Termin ist der einzige, der hervorsticht. */
.wline.is-heute {
  border-radius: var(--r-sm); border-bottom-color: transparent;
  background: var(--accent-soft);
}


/* --- Der aufgeklappte Teil ------------------------------------------------
   Erst worum es geht, dann die Aktionen in einer Leiste, dann die drei
   Fächer. In dieser Reihenfolge, weil man erst weiß, was man will, und
   dann klickt.                                                         */

.wbody { padding: 2px 4px 24px 18px; }
.wbody-lead {
  margin: 0 0 16px; max-width: 68ch;
  font-size: 14px; line-height: 1.6; color: var(--text-2);
}

/* Alle Aktionen in einer Leiste: der eine große Knopf links, seine Frist
   daneben, das Häkchen ganz rechts. */
.wdo {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}
.wdo .btn { margin-top: 0; }
.wdo-done { margin-left: auto; }
.wdo-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
}
.wdo-note svg { width: 12px; height: 12px; flex: 0 0 auto; }
.wdo-note.is-gone { color: var(--amber); }

/* Die drei Fächer nebeneinander, solange Platz ist. Sie tragen nur noch
   Inhalt — die Aktion dazu steht oben in der Leiste. */
.wcols {
  display: grid; gap: 16px 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.wcol { min-width: 0; }
.wcol .lesson { padding-left: 0; padding-right: 0; }
.wcol .lesson:last-child { border-bottom: 0; }
.wcol .files { margin-top: 0; }
.wcol .card-links { margin-top: 8px; }
.wcol .locknote { font-size: 12.5px; }
.wcol .wrow-cap:first-child { margin-top: 0; }
.wcol-none { margin: 6px 0 0; font-size: 13px; color: var(--text-3); }

/* Die Zwischenüberschrift im aufgeklappten Teil — auch in der Verwaltung
   benutzt, deshalb der allgemeine Name. */
.wrow-cap {
  margin: 20px 0 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}

/* Ab hier ist Platz für Spalten: Datum links vom Faden, Punkt darauf,
   Titel rechts, Zustand am Rand. */
@container wlist (min-width: 560px) {
  .wrail::before { display: block; }
  .wline-head {
    grid-template-columns: 100px 24px minmax(0, 1fr) auto auto;
    align-items: center; gap: 16px; padding: 14px 4px 14px 18px;
  }
  .wline-when { grid-area: 1 / 1; text-align: right; align-self: center; }
  .wline-when b, .wline-when span { display: block; }
  .wline-when span::before { content: none; }
  .wline-dot { display: grid; align-self: stretch; }
  .wline-title { grid-area: 1 / 3; }
  .wline-state { grid-area: 1 / 4; align-self: center; }
  .wline-caret { grid-area: 1 / 5; }
  .wbody { padding-left: var(--stem); }
}

@container wlist (max-width: 470px) {
  .wdo-done { margin-left: 0; width: 100%; }
  .wdo .btn { width: 100%; }
}


/* --- Das Häkchen an einer Webinar-Zeile -----------------------------------
   Abgehakt wird ohne die Seite zu verlassen — deshalb ein Formular je
   Zeile und ein Knopf, der wie ein Häkchen aussieht.                    */
.donebtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
  transition: color var(--t) var(--ease);
}
.donebtn:hover { color: var(--text); }
.donebtn.is-on { color: var(--accent); }
.donebtn .lesson-check { pointer-events: none; }

/* --- Verwaltung: die Terminliste einer Kohorte --- */
.dates-table td { white-space: nowrap; }
.dates-table input[type="datetime-local"],
.dates-table input[type="date"],
.dates-table input[type="url"] {
  min-width: 170px; padding: 8px 10px; font-size: 13px;
}
.dates-table input[type="url"] { min-width: 210px; }
.cohort-chip.is-abgeschlossen { opacity: 0.72; }
.form-row { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }

/* Überschrift und Hinweis eines Aufklappers stehen auf derselben Kante
   wie seine Formulare (`.editor .form`) — vorher hingen sie am Rand. */
.editor > .wrow-cap { margin-left: 18px; margin-right: 18px; }
.editor > .wrow-cap .chip-status { margin-left: 8px; }

/* --- Verwaltung: die Begleitvideos eines Webinars ---
   Eine Zeile je Video: Platz, Vorschaubild, Titel, und rechts die drei
   Knöpfe (hoch, runter, entfernen). Das Bearbeiten steckt darunter in
   einem Aufklapper — es ist der seltenere Fall und soll die Liste nicht
   auseinanderziehen. */
.vlist { margin-top: 4px; }
.vrow { display: block; padding: 4px 0; }
.vrow-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.vrow-num {
  flex: 0 0 auto; width: 22px;
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
}
.vrow .mini-thumb { flex: 0 0 auto; width: 72px; height: 41px; }
.vrow-text { flex: 1; min-width: 0; font-size: 13px; }
.vrow-text strong { display: block; color: var(--text); }
.vrow-text > span {
  display: block; font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ein Knopf, der nur aus seinem Zeichen besteht — hoch und runter. Am
   Rand der Liste ist er abgeschaltet statt weg: sonst wanderten die
   anderen beiden Knöpfe von Zeile zu Zeile. */
.iconbtn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  padding: 0; border-radius: var(--r-xs); cursor: pointer;
  color: var(--text-3); background: none; border: 1px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.iconbtn svg { width: 15px; height: 15px; }
.iconbtn:hover:not(:disabled) {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-line);
}
.iconbtn:disabled { opacity: 0.28; cursor: default; }

.vedit { margin: 0 0 4px 34px; }
.vedit > summary {
  list-style: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.vedit > summary::-webkit-details-marker { display: none; }
.vedit > summary:hover { color: var(--accent); }
.vedit .form { margin: 8px 0 12px; }

/* Die Auswahl selbst darf breiter sein als ein halbes Raster: da stehen
   Kategorie, Titel und Laufzeit in einer Zeile. */
.field-wide { grid-column: 1 / -1; }
.vpick select { font-size: 13px; }

/* Der Weg an der Bibliothek vorbei — vorhanden, aber zugeklappt. */
.editor-aside { margin: 0 18px 14px; }
.editor-aside > summary {
  list-style: none; cursor: pointer; padding: 6px 0;
  font-size: 12.5px; color: var(--text-3);
}
.editor-aside > summary::-webkit-details-marker { display: none; }
.editor-aside > summary:hover { color: var(--accent); }
.editor-aside .form { margin: 4px 0 8px; }

/* --- Schmaler als 1240: die Karten rutschen unter die Terminliste.
   Die Grenze ist gerechnet und nicht geraten: Seitenleiste (260),
   Seitenrand (2 × 36), Kartenspalte samt Abstand (280 + 26) — bleibt der
   Liste bei 1240 px genau die Breite, ab der ihre Zeilen Datum, Punkt,
   Titel und Zustand nebeneinander unterbringen (560, siehe
   `@container wlist`). Darunter ist ihr die ganze Breite mehr wert als
   eine zweite Spalte. --- */
@media (max-width: 1240px) {
  .live-layout { grid-template-columns: 1fr; }
  .live-side { position: static; }
  .live-side .panel + .panel { margin-top: 0; }
}

/* Nebeneinander statt gestapelt, sobald sie unter der Liste stehen. */
@media (min-width: 620px) and (max-width: 1240px) {
  .live-side {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
  }
}

@media (max-width: 900px) {
  /* Die Durchgangszeile wird zum Kasten, sobald sie umbricht — eine Pille
     über zwei Zeilen sieht aus wie ein Fehler. */
  .dgbar { border-radius: var(--r-card); }
  .dgswitch {
    margin-left: 0; width: 100%; padding-left: 0;
    border-left: 0; border-top: 1px solid var(--line-2); padding-top: 12px;
  }
  /* Die Beschriftung nimmt die ganze Zeile, sonst bleibt dem Auswahlfeld
     daneben ein Streifen und es wird am Rand abgeschnitten. */
  .dgswitch label { flex-basis: 100%; }
  .dgswitch select { flex: 1; min-width: 0; }
}

/* --- Handy: eine Spalte, nichts nebeneinander ---------------------------
   Unter 768 px ist kein Platz mehr für zwei Dinge nebeneinander. Statt
   etwas wegzulassen, wandert alles untereinander: der Fortschrittsbalken
   unter den Titel, die Aktionen in eigene Zeilen über die volle Breite.
   Was rechts stehen bleibt, ist nur noch, was schmal ist — Dauer und
   Häkchen.                                                              */

@media (max-width: 767.98px) {
  /* Die Zeile oben bricht um: Begrüßung, Hinweis, Knopf untereinander —
     nebeneinander bliebe für den Hinweis ein Streifen. */
  .mnow { border-radius: var(--r-card); padding: 14px 18px; }
  .mnow-what { margin-left: 0; flex-basis: 100%; }
  .mnow-go { margin-left: 39px; }

  /* Die Kachel wird flacher: eine 16:10-Fläche über die volle Breite
     wäre auf dem Handy ein halber Bildschirm für ein Muster. */
  .mcover { aspect-ratio: 16 / 8; }
  .mcover-name { font-size: 20px; }

  .wlist { padding: 2px 12px 10px; }
  .wline-head { padding-left: 12px; }
  .wbody { padding-left: 12px; }

  /* Der Modulkopf als Raster: Nummer, Titel und Pfeil oben, der Balken
     darunter über die ganze Breite. Nebeneinander bliebe für den Titel
     ein Streifen von zwei Wörtern. */
  .module > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 12px; row-gap: 10px;
    padding: 16px 16px;
  }
  .module-no { grid-area: 1 / 1; font-size: 27px; min-width: 38px; }
  .module-title { grid-area: 1 / 2; }
  .module-title strong { font-size: 16px; }
  .module-lock { grid-area: 1 / 3; }
  .module-caret { grid-area: 1 / 4; }
  .module-stand { grid-area: 2 / 1 / 3 / 5; }
  .module-bar { flex: 1; width: auto; }
  .module-body { padding: 2px 14px 14px; }

  /* Kapitelkopf: der Titel darf umbrechen, Zähler und Pfeil bleiben an
     der ersten Zeile stehen. */
  .modrow > summary { align-items: flex-start; gap: 10px; padding: 12px 2px; }
  .modrow-cap { font-size: 9.5px; letter-spacing: 0.12em; }
  .modrow-count, .modrow-caret, .modrow-lock { margin-top: 1px; }

  /* Lektionszeile: kleineres Vorschaubild, zweizeiliger Titel — Dauer und
     Häkchen bleiben rechts. Nur die Zahl der Unterlagen geht: sie steht
     auf der Lektionsseite noch einmal. */
  .lesson { gap: 11px; padding: 11px 2px; }
  /* Nur die Breite: die Höhe kommt aus dem Seitenverhältnis, sonst
     wäre der Zuschnitt auf dem Handy ein anderer als daneben. */
  .lesson-thumb { width: 58px; }
  .lesson-text { font-size: 14px; }
  .lesson-text span { font-size: 12px; }
  .lesson-time { font-size: 11px; }
  .lesson-tag { display: none; }

  /* Aufklappen ist eine Fingerfläche, keine Pfeilspitze: jede Kopfzeile
     ist so hoch, dass man sie trifft. */
  .module > summary, .wline-head, .modrow > summary { min-height: 48px; }

  /* Mono-Kicker dürfen kleiner werden, damit sie in eine Zeile passen. */
  .eyebrow { font-size: 9.5px; letter-spacing: 0.16em; }
  .wrow-cap, .wlist-cap, .ablauf-cap { font-size: 9px; letter-spacing: 0.14em; }
  .wline-state { font-size: 9px; letter-spacing: 0.14em; }

  .files a { font-size: 12.5px; padding: 9px 2px; }
  .file-size { font-size: 10px; }
}

/* --- Gesperrt: Kursteil, Lektion, Begleitvideos --------------------------
   Ein Schloss statt eines Links. Die Zeile bleibt stehen, damit man sieht,
   dass es weitergeht — nur eben noch nicht.                             */

.module.is-locked > summary { cursor: pointer; }
.module.is-locked .module-no { background: none; -webkit-text-fill-color: var(--text-3); color: var(--text-3); }
.module.is-locked .module-title strong { color: var(--text-2); }
.module-lock {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  color: var(--text-3);
}
.module-lock svg { width: 16px; height: 16px; }

.lesson-row.is-locked { cursor: default; }
.lesson-row.is-locked .lesson-text { color: var(--text-3); }
.lesson-row.is-locked .lesson-thumb {
  background: var(--surface-3); color: var(--text-3);
}
.lesson-row.is-locked .lesson-thumb svg { width: 14px; height: 14px; }
.lesson-check.is-locked {
  border-style: dashed; color: var(--text-3); background: none;
}
.lesson-check.is-locked svg { width: 11px; height: 11px; stroke-width: 2; }

/* Der Hinweis an der Stelle, an der sonst die Begleitvideos stünden. */
.locknote {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 0; padding: 11px 14px;
  border-radius: var(--r-sm); border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px; color: var(--text-3);
}
:root[data-theme="light"] .locknote { background: var(--surface-2); }
.locknote svg { width: 15px; height: 15px; flex: 0 0 auto; }


/* --- Module innerhalb eines Kurses ---------------------------------------
   Ein Modul ist ein Block, keine Tabellenzeile: eigene Fläche, eigener
   Rand, Luft dazwischen. Vorher trennte sie nur ein Haarstrich, und die
   Kopfzeile bestand aus blassen Versalien — das las sich wie eine
   Spaltenbeschriftung und ging zwischen den Lektionen unter.

   Links die Ziffer als Anker, in derselben Bauform wie die Schritte im
   Ablauf auf der Mentoring-Startseite. Daneben das kleine Schild „Modul
   2“ und darunter das Thema als Überschrift — die Zahl ordnet ein, der
   Name sagt, worum es geht, und nur einer von beiden muss laut sein.  */

.modrow {
  margin-bottom: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  transition: border-color var(--t) var(--ease);
}
.modrow:last-child { margin-bottom: 0; }
.modrow:hover { border-color: var(--line-2); }
.modrow[open] { background: var(--surface); }

.modrow > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 4px 14px;
  padding: 15px 18px; cursor: pointer; list-style: none;
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease);
}
.modrow > summary::-webkit-details-marker { display: none; }
.modrow > summary:hover { background: rgba(255, 255, 255, 0.025); }
:root[data-theme="light"] .modrow > summary:hover { background: var(--surface-3); }

/* Die Ziffer — dieselbe Bauform wie `.mweg-no` im Ablauf. */
.modrow-no {
  grid-area: 1 / 1; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.modrow[open] .modrow-no { background: var(--surface-2); }
/* Durch heißt durch: Rand und Ziffer grün, dazu der Strich unten. Das
   ist die Auskunft, die man beim Überfliegen sucht. */
.modrow.is-done .modrow-no {
  border-color: rgba(9, 227, 84, 0.45); color: var(--green);
}
.modrow.is-locked .modrow-no { color: var(--text-3); }

.modrow-text { grid-area: 1 / 2; min-width: 0; }
.modrow-cap {
  display: block;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.modrow-title {
  display: block; margin-top: 2px;
  font-family: var(--display); font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--text); overflow-wrap: anywhere;
}
.modrow.is-locked .modrow-title { color: var(--text-2); }

/* Zahl und Strich untereinander: die Zahl genau, der Strich auf einen
   Blick. Der Strich ist so breit wie die Zahl darüber und nicht breiter
   — er ist eine Fußnote zur Zahl, kein zweites Maß. */
.modrow-stand { grid-area: 1 / 3; display: grid; gap: 5px; justify-items: end; }
.modrow-count {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.modrow-bar {
  width: 54px; height: 3px; border-radius: var(--pill);
  background: var(--line); overflow: hidden;
}
.modrow-bar i { display: block; height: 100%; background: var(--grad); }
.modrow.is-done .modrow-bar i { background: var(--green); }

.modrow-caret, .modrow-lock {
  grid-area: 1 / 4; display: inline-flex; color: var(--text-3);
  transition: transform var(--t) var(--ease);
}
.modrow-caret svg, .modrow-lock svg { width: 16px; height: 16px; }
.modrow[open] .modrow-caret { transform: rotate(180deg); }

/* Aufgeklappt: die Lektionen rücken unter die Ziffer ein, damit sichtbar
   bleibt, zu welchem Modul sie gehören. */
.modrow-body {
  padding: 2px 18px 12px; border-top: 1px solid var(--line-soft);
  margin: 0 0 0 0;
}
.modrow-body .lesson:last-child { border-bottom: 0; }

@media (max-width: 767.98px) {
  .modrow > summary { padding: 13px 14px; gap: 4px 11px; }
  .modrow-no { width: 27px; height: 27px; }
  .modrow-body { padding: 2px 14px 10px; }
  /* Der Strich geht: auf dem Handy zählt die Breite mehr als das
     zweite Maß, die Zahl daneben bleibt. */
  .modrow-bar { display: none; }
}


/* --- 1:1 Coaching: die Anfrage-Seite ------------------------------------
   Die Preis-Karte ist die Stelle, auf die alles zuläuft: Umfang klein
   darüber, Betrag groß, Steuerhinweis leise darunter, dann der Knopf.  */

.pricecard { max-width: 560px; text-align: center; }
.price-units {
  margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.price-amount {
  margin: 6px 0 0; font-family: var(--display);
  font-size: clamp(38px, 5vw, 52px); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.price-note {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3);
  /* Sonst steht das Prozentzeichen allein in der zweiten Zeile. */
  text-wrap: balance;
}
/* Zwei Preise in einer Karte: die einzelne Session und das Paket. Ein
   Strich dazwischen, sonst nichts — zwei Kästen ineinander wären eine
   Schachtelung zu viel. Der Betrag ist eine Spur kleiner als bei einem
   einzelnen Preis, damit beide in denselben Kasten passen. */
.price-opt + .price-opt {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2);
}
.price-opt .price-amount { font-size: clamp(32px, 3.6vw, 42px); }
.price-opt .price-note { margin-top: 8px; }

/* Was das Paket als Paket ausweist: dasselbe Wort in der Zeile des
   Umfangs, nur in Blau. Keine Plakette — die Karte trägt genug. */
.price-kind { color: var(--accent); }

/* Die Ersparnis gegenüber zwölf einzelnen Terminen: das Argument fürs
   Paket, deshalb grün und direkt unter dem Betrag — vor dem
   Steuerhinweis, der für beide Preise gilt. */
.price-saving {
  margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.5;
  color: var(--green); text-wrap: balance;
}

.price-state { margin: 22px 0 0; text-align: left; align-items: flex-start; }
.price-state svg { margin-top: 3px; }

/* Der Knopf ist das <summary>: aufgeklappt steht darunter das Formular,
   und die Seite kommt weiter ohne Skript aus. */
.askbox { margin-top: 22px; }
.askbox > summary {
  list-style: none; margin: 0 auto; align-self: center;
}
.askbox > summary::-webkit-details-marker { display: none; }
.askbox[open] > summary { margin-bottom: 4px; }
.askbox .form { margin-top: 18px; text-align: left; }
.askbox .form .btn { margin-top: 18px; }
.askbox .field input[readonly] { color: var(--text-3); cursor: default; }

/* Der Text einer Coaching-Anfrage in der Tabelle: er darf umbrechen und
   mehrere Zeilen hoch werden, aber die Spalte nicht sprengen. */
.cell-text {
  max-width: 42ch; min-width: 22ch;
  color: var(--text-2); line-height: 1.5; white-space: pre-line;
  vertical-align: top;
}

/* --- Der Kicker auf einer Kachel ----------------------------------------
   Drei Angaben, die nichts miteinander zu tun haben: Kategorie, ob man das
   Video gesehen hat, und wie lange es noch da ist. Keine davon darf in
   sich umbrechen — „Idea of the“ / „Day“ auf zwei Zeilen liest niemand als
   einen Begriff. Die Frist steht ohnehin in ihrer eigenen Zeile.        */

.tile-body .eyebrow { flex-wrap: wrap; }
.eyebrow-cat, .eyebrow-done { white-space: nowrap; }
/* Eigene Zeile, und zwar wirklich: der Kicker ist eine Flex-Reihe, in der
   ein `display: block` am Kind nichts ausrichtet — es wird ohnehin zum
   Flex-Element. Was die Zeile umbricht, ist die Basisbreite. */
.eyebrow-warn { flex: 0 0 100%; white-space: nowrap; }

@media (max-width: 767.98px) {
  /* Enger gesetzt und eine Spur kleiner: auf 354 px Karte ist das der
     Unterschied zwischen einer Zeile und zweien. */
  .tile-body .eyebrow {
    font-size: 9.5px; letter-spacing: 0.12em; gap: 6px;
  }
  .eyebrow-warn { margin-top: 3px; }

  /* Vorschau, Fortschrittsbalken und Karte sind gleich breit — der Balken
     sitzt am unteren Rand der Vorschau und erbt das damit von selbst. */
  .tile-thumb { max-height: none; }
}

/* Schmaler als 480 px hat der Knopf neben der Überschrift keinen Platz
   mehr: dann steht er darunter und über die volle Breite. */
@media (max-width: 480px) {
  .sec-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .sec-head > div { min-width: 0; }
  .sec-head .btn { align-self: stretch; justify-content: center; }
}

/* Was für beide Preise gilt: Voraussetzung, Plätze, Ausverkauft. Unter
   einem Strich und als Zeilen, nicht als Plaketten — gerahmt und getont
   wären sie lauter als die Beträge darüber, und genau die sind der Grund,
   warum jemand die Seite aufmacht. */
.price-terms {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.price-term {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
  text-align: center;
}
.price-term svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* Die Zahl der Plätze ist ein Hinweis, kein Hindernis. */
.price-term.is-seats { color: var(--text-3); }
/* Ausgebucht ist eine Absage auf Zeit — bernsteinfarben, nicht rot. */
.price-term.is-full { color: var(--amber); }
.price-full-note { margin-top: 14px; }

/* Die Preis-Kachel im Hero der Mentoring-Teaser-Seite. Sitzt dort, wo auf
   anderen Seiten der Ring steht: die eine Zahl, um die es geht. */
.hero-price {
  width: clamp(220px, 24vw, 300px);
  padding: 22px 24px; border-radius: var(--r-card);
  background-color: var(--surface); background-image: var(--grad-soft);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-accent);
  text-align: center;
}
.hero-price .price-note { margin-top: 10px; }

@media (max-width: 900px) {
  /* Im Hero steht dann alles untereinander — die Kachel nimmt die Breite,
     die sie bekommt, statt schmal danebenzustehen. */
  .hero-price { width: 100%; }
}

/* --- Der Preis neben der Überschrift ------------------------------------
   Auf der Coaching-Seite steht die Preis-Karte oben rechts, nicht als
   eigener Abschnitt weiter unten: sie ist die Angabe, wegen der man die
   Seite aufmacht. `.hero-row` macht daraus zwei Spalten und wird unter
   900 px von selbst zu einer — dann steht die Karte darunter.          */

.hero-split .hero-row { align-items: start; }
.hero-split h1 { max-width: 16ch; }
.hero-split .page-lead { margin-top: 14px; }

/* Seit das Anfrage-Formular unten steht, trägt die Karte nur noch
   Preise und Bedingungen — und darf entsprechend schmal sein. Vorher
   überragte sie den Hero, den sie eigentlich ergänzen sollte. */
.pricecard.hero-price {
  width: clamp(268px, 26vw, 330px); max-width: 100%;
  margin-top: 0; padding: clamp(20px, 1.6vw, 26px);
}
/* Zwei Preise in einer Karte: der zweite bekommt eine Haarlinie, sonst
   verschwimmen Einzelsession und Paket zu einem Block. */
.pricecard.hero-price .price-opt + .price-opt {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pricecard.hero-price .price-amount { font-size: clamp(26px, 2.6vw, 34px); }
.pricecard.hero-price .price-terms { margin-top: 16px; }

/* Im schmalen Kasten steht jedes Feld für sich. */
.hero-price .form-grid { grid-template-columns: 1fr; }
.hero-price .form { margin-top: 16px; }

/* Der Sprung aus dem Hero landet im Formular am Seitenende — mit etwas
   Luft darüber, sonst klebt es unter der Topbar. */
.schau-end .askbox { scroll-margin-top: 90px; }


/* --- Mitglied werden: die Kasse und die zweite Reihe --------------------
 *
 * Die Seite ist eine Kasse und keine Broschüre. Oben eine schmale,
 * zentrierte Karte — Preis, drei Häkchen, Knopf, Kleingedrucktes —, und
 * erst darunter die Aufzählung, was Member+ öffnet.
 *
 * Die Breite ist Absicht: über die volle Spalte gezogen sieht eine
 * Preiskarte aus wie ein Abschnitt, den man liest. Auf 480 px sieht sie
 * aus wie etwas, das man drückt.
 */

.checkout {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 480px; margin: 0 auto;
  /* Die Sprungmarke der Rückleitungen. Ohne den Abstand klebte die Karte
     nach dem Sprung unter der Topbar. */
  scroll-margin-top: 84px;
}

.checkout-card {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2vw, 30px);
  border-radius: var(--r-card);
  background-color: var(--surface);
  background-image: var(--grad-soft);
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.checkout-title {
  margin: 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}

.checkout-price {
  display: flex; align-items: baseline; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin: 8px 0 0;
}
.checkout-price b {
  font-family: var(--display); font-size: clamp(34px, 4.4vw, 44px);
  font-weight: 800; letter-spacing: -0.035em; color: var(--text);
  line-height: 1.05;
}
.checkout-price span { font-size: 14px; color: var(--text-3); }
/* Ohne Betrag von Stripe steht nur der Zeitraum da — dann ohne die große
   Ziffer, sonst klaffte an ihrer Stelle ein Loch. */
.checkout-price-plain { font-size: 17px !important; color: var(--text-2) !important; }

/* Die drei Häkchen. Linksbündig in einer zentrierten Karte: eine Liste
   liest sich an einer Kante entlang, nicht um eine Mitte herum. */
.checkout-checks {
  list-style: none; margin: 18px 0; padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  display: flex; flex-direction: column; gap: 9px;
}
.checkout-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-2);
}
.checkout-checks svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke-width: 2.6; color: var(--accent);
}

.checkout-card .btn { margin-top: 0; justify-content: center; }

.checkout-foot {
  margin: 14px 0 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
}
.checkout-foot a { color: var(--text-2); text-decoration: underline; }
.checkout-foot a:hover { color: var(--accent); }

/* --- Zweite Reihe: was Member+ öffnet ---------------------------------
 * Kompakter als eine gewöhnliche Fläche: sie erklärt, sie verkauft
 * nicht. Der Abstand nach oben trennt sie von der Kasse. */

.panel-perks { margin-top: clamp(26px, 2.6vw, 40px); }

.perks { list-style: none; margin: 2px 0 0; padding: 0; }
.perks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
.perks li + li { border-top: 1px solid var(--line); }
.perk-mark {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--r-icon);
  background: rgba(46, 144, 250, 0.12);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.perk-mark svg { width: 15px; height: 15px; }
.perk-text { min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.perk-text b {
  display: block;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
}

/* Der Kopf der Seite darf hier kürzer ausfallen — die Kasse soll ins
   erste Bild. */
.hero-tight { margin-bottom: 18px; }
.hero-tight .page-lead { max-width: 52ch; }

/* Die zweite Filterreihe der Kontenliste. Sie gehört zur ersten und
   steht deshalb dichter darunter als ein neuer Abschnitt — aber mit
   genug Luft, dass man zwei Achsen sieht und nicht eine lange Reihe. */
.panel-head-sub { margin-top: -2px; margin-bottom: 14px; }

/* Ein Feld, das leer ist, weil es nie gefüllt wurde — kein Fehler, nur
   nichts. Leiser als der Rest der Zeile. */
.cell-none { color: var(--text-3); }

/* --- Formularfelder: Paar und Fußnote ----------------------------------
 *
 * Vor- und Nachname stehen nebeneinander: es ist ein Name, keine zwei
 * Angaben. Auf schmalen Fenstern rutschen sie untereinander, sonst wären
 * zwei halbe Felder schmaler als die Wörter darin.
 */

.field-pair {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Der kleine Satz unter einem Feld. Er gehört zu dem Feld über ihm und
   rückt deshalb näher heran — aber nach unten braucht er denselben
   Abstand wie jedes andere Feld (`.field` hat 14px), sonst klebt die
   nächste Beschriftung an ihm. */
.field-note {
  margin: -8px 0 14px;
  font-size: 12px; line-height: 1.45; color: var(--text-3);
}

/* „(optional)" in einer Feldbeschriftung: dieselbe Zeile, leiser Ton. */
.field span i {
  font-style: normal; font-weight: 500;
  color: var(--text-3); letter-spacing: 0;
}

/* --- Vorschau statt Absage ----------------------------------------------
 *
 * Die Seite hinter einem Schloss (vorschau.html). Sie zeigt echtes
 * Material aus dem gesperrten Bereich — abgedunkelt und unscharf, aber
 * erkennbar. Der Unterschied zu einem leeren Schloss-Kasten ist der
 * ganze Punkt: man soll sehen, dass da etwas Gepflegtes liegt.
 *
 * Die Unschärfe ist Darstellung und kein Schutz. Was hier steht, ist
 * ohnehin nur Titel und Vorschaubild; die Inhalte selbst kommen nie bis
 * in dieses HTML.
 */

.peek {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.peek-tile { min-width: 0; }

.peek-art {
  position: relative; display: block;
  aspect-ratio: 16 / 9; border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.peek-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Abgedunkelt und leicht unscharf: erkennbar, aber nicht zu benutzen. */
  filter: blur(2.5px) brightness(0.45) saturate(0.85);
  transform: scale(1.06); /* deckt den weichen Rand der Unschärfe ab */
}
/* Ein Hauch Farbe darüber, damit die Kacheln als Gruppe zusammengehören
   und nicht als drei zufällig dunkle Bilder wirken. */
.peek-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg,
              rgba(12, 31, 61, 0.35), rgba(8, 8, 12, 0.55));
}

/* Das Abzeichen einer Vorschau-Kachel: wohin dieser Kurs gehört. Blau,
   wenn ein Kauf hier wirkt — ruhig, wenn nicht. Der Unterschied ist die
   ganze Auskunft, deshalb darf er nicht in der Bildunschärfe untergehen
   und sitzt auf einer eigenen, deckenden Fläche. */
.peek-badge {
  position: absolute; left: 8px; top: 8px; z-index: 1;
  padding: 4px 9px; border-radius: var(--pill);
  background: rgba(8, 8, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.peek-badge.is-member {
  background: rgba(46, 144, 250, 0.9);
  border-color: rgba(46, 144, 250, 0.5);
  color: #fff;
}

.peek-lock {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-xs);
  background: rgba(8, 8, 12, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}
.peek-lock svg { width: 14px; height: 14px; }

.peek-title {
  margin: 9px 0 0;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Das Briefing bekommt keine Kacheln, sondern seine Schlagzeile: die
   steht scharf da und ist der Beleg, dass es das von heute wirklich
   gibt. Erst der Anriss darunter verwischt. */
.peek-brief {
  position: relative;
  padding: 20px 22px; margin-bottom: 22px;
  border-radius: var(--r-card);
  background: linear-gradient(90deg, #0c1f3d 0%, #112a52 100%);
  border: 1px solid rgba(46, 144, 250, 0.28);
}
.peek-cap {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9ccbff;
}
.peek-cap svg { width: 13px; height: 13px; }
.peek-headline {
  margin: 0;
  font-family: var(--display); font-size: clamp(17px, 2vw, 21px);
  font-weight: 700; letter-spacing: -0.02em; color: #fff;
}
.peek-blur {
  margin: 10px 0 0; max-width: 60ch;
  font-size: 13.5px; line-height: 1.6; color: #dbe8fb;
  filter: blur(4px);
  /* Nicht markierbar und nicht anklickbar: der Text ist Kulisse. */
  user-select: none; pointer-events: none;
}
.peek-lock-inline { position: absolute; right: 14px; top: 14px; }

/* --- Die Journal-Vorschau ------------------------------------------------
 *
 * Der eine Bereich, dessen Material nicht in unserer Datenbank liegt:
 * das Journal läuft als eigene Anwendung. Was es zu zeigen gibt, sind
 * Aufnahmen davon, und die stehen als Collage neben dem Text statt
 * darüber. Der Grund ist banal und trotzdem der Punkt: eine Seite mit
 * drei Häkchen und einem Knopf läuft unten leer aus, wenn rechts nichts
 * steht.
 */

.vsplit {
  display: grid; gap: clamp(24px, 3vw, 52px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.vsplit-text { min-width: 0; }
/* Der Hero bringt normalerweise seinen eigenen Abstand nach oben mit. In
   der Spalte sitzt er schon oben und braucht ihn nicht. */
.vsplit-text .hero { margin-top: 0; }

/* Die Collage. `perspective` steht am Rahmen und nicht an den Karten:
   nur so kippen alle drei in denselben Raum und nicht jede in ihren
   eigenen. */
.jshot {
  position: relative; margin: 0; min-width: 0;
  padding: 8% 6% 10%;
  perspective: 1600px;
}
.jshot-card {
  display: block; position: relative;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Leicht abgedunkelt: es ist eine Vorschau und nicht der Bereich. */
  filter: brightness(0.86);
}
.jshot-card img { display: block; width: 100%; height: auto; }

/* Die führende Aufnahme: im Fensterrahmen, leicht aus der Fläche
   gedreht. Der Winkel ist klein mit Absicht — ab etwa zehn Grad liest
   man den Inhalt nicht mehr, und dann ist es Deko statt Auskunft. */
.jshot-main {
  z-index: 2;
  transform: rotateY(-8deg) rotateX(3deg);
  transform-origin: 100% 50%;
}
.jshot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.jshot-bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
}

/* Die beiden dahinter. Sie zeigen dasselbe Werkzeug aus einem anderen
   Winkel und stehen deshalb kleiner, blasser und angeschnitten: sie
   sollen Tiefe machen, nicht mitlesen wollen. */
.jshot-back {
  position: absolute; z-index: 1;
  width: 54%;
  filter: brightness(0.72);
  box-shadow: var(--shadow);
}
.jshot-back-1 {
  right: 0; top: 0;
  transform: rotateY(-8deg) rotateX(3deg) translate3d(6%, -8%, -90px);
}
.jshot-back-2 {
  left: 0; bottom: 0;
  transform: rotateY(-8deg) rotateX(3deg) translate3d(-8%, 10%, -140px);
}

/* Das Schloss aus den anderen Vorschauen sitzt auf dunklem Bildmaterial
   und passt hier unverändert: eine Aufnahme ist Bildmaterial. */
.jshot-cap {
  margin: 18px 0 0; text-align: center;
  font-size: 12px; color: var(--text-3);
}

@media (max-width: 900px) {
  /* Untereinander, und die Collage zuerst: auf einem schmalen Schirm ist
     das Bild das, was jemanden hält. */
  .vsplit { grid-template-columns: 1fr; gap: 18px; }
  .vsplit-art { order: -1; }
  .jshot { padding: 0 0 4%; }
  /* Drei überlappende Aufnahmen auf einem Handy sind Matsch. Die
     führende reicht, und sie steht dann gerade. */
  .jshot-back { display: none; }
  .jshot-main { transform: none; }
}

/* --- Das Angebot darunter ---------------------------------------------
 * Drei Häkchen, eine Preiszeile, ein Knopf. In dieser Reihenfolge und
 * genau einmal — zwei Knöpfe für dieselbe Sache lesen sich als Drängeln.
 */

.offer { max-width: 480px; }

.offer-checks {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.offer-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text-2);
}
.offer-checks svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  stroke-width: 2.6; color: var(--accent);
}

.offer-price {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.offer-price b {
  font-family: var(--display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text);
}
.offer-price span { font-size: 13px; color: var(--text-3); }

.offer .btn { margin-top: 0; }
.offer .backlink { margin-top: 14px; }

/* Der zweite Block: was ein Kauf hier NICHT aufmacht. Bewusst ohne
   Akzentfarbe und ohne Knopf — er soll nicht mit dem Angebot darüber
   konkurrieren, sondern eine Auskunft sein, die man einmal liest. */
.offer-aside {
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.offer-aside-title {
  margin: 0;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--text);
}
.offer-aside-text {
  margin: 5px 0 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}

/* --- Werkzeug: die Journal-Karte unten in der Seitenleiste --------------
   Kein Navigationspunkt, sondern ein Werkzeug außerhalb der App — deshalb
   eine hellblaue Karte im Schein statt einer Pille. `margin-top: auto`
   hält sie unten, egal wie viele Bereiche darüber stehen. */

.sidetool { margin-top: auto; padding: 6px 14px 4px; }

/* Zwei Wege nach draußen, und sie sehen jetzt auch so aus wie Wege und
   nicht wie Werbeflächen. Vorher trugen beide einen vollflächigen
   Verlauf mit Schein — zusammen waren sie das Lauteste in der Leiste,
   lauter als der Bereich, in dem man gerade steht. Jetzt tragen sie
   denselben ruhigen Bau wie die Bereichs-Einträge darüber: nichts im
   Rücken, eine feine Kante, normaler Text. Die Farbe steckt allein im
   Icon — das reicht, um Journal und Discord auseinanderzuhalten. */
.toolcard {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: transparent;
  color: var(--text); font-weight: 500;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Beim Zeigen hebt sich die Fläche eine Spur — dieselbe Aufhellung wie
   an einem Bereichs-Eintrag, damit die Leiste eine Sprache spricht. */
.toolcard:hover {
  text-decoration: none; color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-2);
}
:root[data-theme="light"] .toolcard:hover { background: rgba(12, 16, 32, 0.04); }
.toolcard:active { transform: scale(0.98); }
/* Kein `is-active` mehr: der leuchtende Verlauf gehört den Einträgen, die
   wirklich eine Seite dieser App aufmachen. Ein Werkzeug, das in einem
   neuen Tab liegt, kann hier gar nicht „der Ort sein, an dem man ist". */
.toolcard-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: var(--r-icon);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.toolcard-icon svg { width: 16px; height: 16px; }
.toolcard-text { flex: 1; min-width: 0; line-height: 1.25; }
.toolcard-title {
  display: block;
  font-size: 14.5px; font-weight: 500; color: var(--text);
}
.toolcard-note {
  display: block; margin-top: 1px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Pfeil an der Discord-Karte: leise, bis jemand hinzeigt. */
.toolcard-out { display: inline-flex; flex: 0 0 auto; color: var(--text-3); opacity: 0.7; }
.toolcard-out svg { width: 14px; height: 14px; }
.toolcard:hover .toolcard-out { opacity: 1; color: var(--text-2); }

/* Ohne Zugang: derselbe Kasten, nur mit stummem Icon und einem Schloss.
   Der Klick bleibt — er führt auf die Seite, die erklärt, was dahinter
   liegt. */
.toolcard.is-locked { color: var(--text-2); }
.toolcard.is-locked .toolcard-icon {
  background: rgba(255, 255, 255, 0.06); color: var(--text-3);
}
:root[data-theme="light"] .toolcard.is-locked .toolcard-icon { background: rgba(12,16,32,.05); }
.toolcard.is-locked .toolcard-title { color: var(--text-2); }

/* Die zweite Karte im Werkzeug-Block: der Discord-Server. Derselbe Bau
   wie das Journal — der Unterschied steckt im Icon, das Discords Blurple
   trägt statt des App-Blaus. Etwas Luft darüber, damit die beiden zwei
   Karten bleiben und nicht ein Block mit einer Naht in der Mitte. */
.toolcard-discord { margin-top: 8px; }
.toolcard-discord .toolcard-icon {
  background: rgba(88, 101, 242, 0.16); color: #5865f2;
}
/* Auf hellem Grund braucht Blurple eine Spur mehr Tiefe, sonst
   verschwimmt die Marke im Blau daneben. */
:root[data-theme="light"] .toolcard-discord .toolcard-icon {
  background: rgba(88, 101, 242, 0.12); color: #4752c4;
}


/* --- Die Schaufenster-Seiten (Mentoring, 1:1 Coaching) ---------------------
 *
 * Zwei Seiten, ein Bauplan: oben der Hero mit der Preis-Karte, darunter
 * vier Abschnitte in immer derselben Folge — was es ist, was drinsteckt,
 * wie es abläuft, für wen es gemacht ist — und am Ende der eine Knopf.
 *
 * Absichtlich kein Karten-Raster. Wer hier steht, liest; er wählt nicht
 * aus. Kacheln zerlegen zusammenhängende Sätze in Kästchen und machen aus
 * einer Erklärung eine Auslage. Deshalb tragen die Abschnitte hier nur
 * Haarlinien: der Kicker mit seiner Ziffer (01, 02, …) gliedert, und die
 * Fläche bleibt der Seite.
 *
 * Bewegung wie auf der Mentoring-Auswahlseite: jeder Abschnitt steigt
 * auf, wenn er in den Blick kommt (`data-rise` in becro.js). Einmal je
 * Element, und aus, wenn jemand Animationen abgeschaltet hat.
 */

/* Fließtext. Die Breite ist der eigentliche Gestaltungsgriff: über 70
   Zeichen je Zeile findet das Auge den Zeilenanfang nicht mehr, und ein
   Absatz über die volle Seitenbreite liest sich wie ein Vertrag. */
.schau-text { max-width: 68ch; }
.schau-text p {
  margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--text-2);
}
.schau-text p:last-child { margin-bottom: 0; }
/* Der erste Absatz trägt den Gedanken, die folgenden erklären ihn — also
   steht er eine Spur größer und heller da. */
.schau-text p:first-child { font-size: 16.5px; color: var(--text); }

/* Die Punkte-Liste: zwei Spalten, jede Zeile mit einer Haarlinie darüber.
   Kein Rahmen, keine Fläche — sie ist eine Aufzählung und soll neben dem
   Fließtext darüber nicht wie ein eigener Kasten wirken. Unter der
   Mindestbreite wird von selbst eine Spalte daraus. */
.schau-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 clamp(24px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.schau-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.55; color: var(--text-2);
}
/* Die Ziffer am Zeilenanfang. Es gab hier einmal auch eine Punkt-Fassung
   (`.is-dots`) für die Themengebiete des Mentorings — die Liste gibt es
   nicht mehr, ihre Themen stehen in den Stationen des Lehrplans. */
.schau-mark {
  flex: 0 0 auto; width: 22px; padding-top: 2px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- Der Lehrplan als Zeitleiste ---------------------------------------
 *
 * Drei Stationen und ein Ziel, untereinander an einer Linie. Sie ist
 * dieselbe Figur wie die Webinar-Zeitleiste (`.wrail`) und der Ablauf
 * darunter (`.schau-steps`): eine Nummernkachel sitzt auf dem Faden, der
 * Inhalt steht rechts daneben. Anders als dort trägt der Inhalt hier
 * eine eigene Fläche — eine Station ist kein Halbsatz, sondern Titel,
 * Art, Satz und eine Punkteliste, und vier solcher Blöcke ohne Rahmen
 * liefen zu einer Textwand zusammen. Genau die sollte weg.
 *
 * Die Linie liegt nicht als ein Strich hinter allem (so macht es
 * `.wrail`), sondern als Stück an jeder Station: nur so kann das Stück
 * vor dem Ziel gepunktet sein statt durchgezogen. Es läuft von der
 * Unterkante der Kachel bis zur Oberkante der nächsten und ragt dafür
 * in den Abstand hinein — der Zusammenschluss sieht aus wie ein Faden.
 *
 * Auf dem Handy fällt beides weg: Kachel über die Karte, keine Linie.
 * Bei rund 340 px Breite blieben neben einer 44-px-Kachel für den Titel
 * keine 30 Zeichen — die Reihenfolge steht dann in den Ziffern selbst.
 */

.schau-plan {
  --phase-gap: clamp(14px, 1.6vw, 20px);
  --goal-sep: 16px;
  --phase-no: 44px;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--phase-gap);
  max-width: 82ch;
}
.schau-phase {
  position: relative;
  display: grid; grid-template-columns: var(--phase-no) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
/* Der Faden zur nächsten Station. Er beginnt zwei Pixel unter der Kachel
   und endet auf der Oberkante der nächsten; am Ziel hört er auf, sonst
   zeigte er ins Nichts. */
.schau-phase:not(:last-child)::before {
  content: ""; position: absolute;
  left: calc(var(--phase-no) / 2); top: calc(var(--phase-no) + 2px);
  bottom: calc(var(--phase-gap) * -1);
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--accent-line), var(--line-2));
}
/* Vor dem Ziel: gepunktet und ein Stück länger. Das ist eins von drei
   Zeichen dafür, dass das Ziel keine vierte Station ist — die anderen
   beiden sind der Abstand und die getönte Karte. */
.schau-phase.is-pre-goal::before {
  bottom: calc((var(--phase-gap) + var(--goal-sep)) * -1);
  background: repeating-linear-gradient(180deg,
              var(--accent-line) 0 4px, transparent 4px 12px);
}
.schau-phase.is-goal { margin-top: var(--goal-sep); }

/* Die Nummernkachel: gefüllter Verlauf, Mono-Ziffer — dieselbe Signatur
   wie die Kacheln im Werbematerial und in der App. Am Ziel steht ein
   Häkchen darin, und die Kachel wird zum Umriss: gefüllt ist, was man
   noch vor sich hat. */
.phase-no {
  grid-column: 1; display: grid; place-items: center;
  width: var(--phase-no); height: var(--phase-no);
  border-radius: var(--r-md);
  background: var(--grad); color: var(--on-accent);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 12px 26px -14px var(--glow);
}
.is-goal .phase-no {
  background: var(--accent-soft); color: var(--accent);
  border: 2px solid var(--accent-line); box-shadow: none;
}
.is-goal .phase-no svg { width: 20px; height: 20px; stroke-width: 2.6; }

.phase-card {
  grid-column: 2; min-width: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.is-goal .phase-card {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.phase-title {
  margin: 0;
  font-family: var(--display); font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--text);
}
.phase-kind {
  margin: 9px 0 0;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.phase-lead {
  margin: 7px 0 0; font-size: 15px; font-weight: 600; line-height: 1.45;
  color: var(--text);
}
/* Die Punkte hinter einer Haarlinie: der Satz darüber ist die Aussage
   der Station, die Liste ihr Inhalt. Ohne die Linie liest sich beides
   als ein Absatz. */
.phase-list {
  list-style: none;
  margin: 14px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 9px;
  font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.phase-list li { display: flex; align-items: baseline; gap: 11px; }
.phase-list li::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; margin-top: 0.42em;
  border-radius: 50%; background: var(--accent); opacity: 0.8;
}

@media (max-width: 700px) {
  .schau-plan { --phase-no: 38px; }
  .schau-phase { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .schau-phase:not(:last-child)::before { content: none; }
  .schau-phase.is-goal { margin-top: 0; }
  .phase-no {
    grid-column: 1; font-size: 13.5px; border-radius: var(--r-sm);
  }
  .phase-card { grid-column: 1; }
}

/* Der Ablauf. Dieselbe Idee wie `.mweg` im Lernpfad — Ziffern an einer
   Linie —, nur größer: dort ist der Ablauf eine Randnotiz, hier ist er
   ein Abschnitt mit eigenen Absätzen. */
.schau-steps { list-style: none; margin: 0; padding: 0; max-width: 78ch; }
.schau-step {
  position: relative; display: flex; align-items: flex-start; gap: 18px;
  padding-bottom: clamp(20px, 2.2vw, 28px);
}
.schau-step:last-child { padding-bottom: 0; }
/* Die Linie macht aus Schritten einen Weg. Am letzten hört sie auf,
   sonst zeigte sie ins Nichts. */
.schau-step:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-2), rgba(255, 255, 255, 0.04));
}
:root[data-theme="light"] .schau-step:not(:last-child)::before {
  background: linear-gradient(180deg, var(--line-2), transparent);
}
.schau-step-no {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 35px; height: 35px; border-radius: 50%;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.schau-step-text { min-width: 0; padding-top: 5px; }
.schau-step-text b {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.schau-step-text span {
  display: block; font-size: 14px; line-height: 1.65; color: var(--text-3);
}

/* „Für wen ist das“: vier Absätze nebeneinander, getrennt durch eine
   Linie über jedem. Keine Karten — es sind vier Antworten auf dieselbe
   Frage und nicht vier Angebote zur Auswahl. */
/* --- Fließtext mit Kennzahlen daneben ----------------------------------
 *
 * Die erzählenden Abschnitte standen auf `max-width: 68ch` und ließen
 * rechts eine leere Hälfte stehen — auf einem breiten Schirm sah der
 * Abschnitt aus, als fehle dort etwas. Es fehlte auch etwas: die Zahlen,
 * die ohnehin die erste Rückfrage sind.
 *
 * Der Text behält seine Lesebreite (eine Zeile über die volle Spalte
 * liest sich schlechter, nicht besser), die Kacheln füllen den Rest.
 * Unter 900 px rutschen sie darunter und werden zur Reihe.
 */

.schau-split {
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: start;
}
.schau-split .schau-text { max-width: 60ch; }

.schau-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.schau-stat {
  padding: 16px 16px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.schau-stat b {
  display: block;
  font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--text);
}
.schau-stat span {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 900px) {
  .schau-split { grid-template-columns: 1fr; }
  .schau-split .schau-text { max-width: none; }
  .schau-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .schau-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vier Textblöcke, und `auto-fit` machte daraus auf einem breiten
   Schirm vier Spalten nebeneinander — vier schmale Säulen mit je vier
   Zeilen Fließtext, die man nicht liest, sondern überfliegt. Zwei feste
   Spalten geben jedem Block eine Zeilenlänge, in der ein Satz atmet, und
   mehr Luft dazwischen. Unter 720 px bleibt eine Spalte. */
.schau-who {
  display: grid; gap: clamp(22px, 2.6vw, 34px) clamp(28px, 4vw, 60px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .schau-who { grid-template-columns: 1fr; }
}
.schau-who-item { padding-top: 16px; border-top: 1px solid var(--line); }
.schau-who-item b {
  display: block;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--text);
}
.schau-who-item p {
  margin: 7px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-3);
}

/* Das Zitat eines Absolventen. Ein ruhiger Kasten mit einem Strich in
   Blau an der linken Kante — kein überlebensgroßes Anführungszeichen und
   kein Porträt: der Satz trägt sich selbst. */
.schau-quote {
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-card);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  background: var(--surface-2);
}
.schau-quote blockquote {
  margin: 0;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6;
  letter-spacing: -0.02em; color: var(--text);
}
.schau-quote figcaption {
  margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-3);
}
.schau-quote figcaption b { color: var(--text-2); }

/* Der Abschluss: ein Satz und der eine Knopf, mehr steht hier nicht.
   Nebeneinander, solange der Platz reicht — darunter, wenn nicht. Der
   weiche Blauschimmer ist derselbe wie im Kopf der Auswahlseite: er
   schließt die Seite ab, statt sie einfach aufhören zu lassen. */
.schau-end {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px clamp(24px, 3vw, 44px);
  margin-top: clamp(30px, 3.4vw, 48px);
  padding: clamp(26px, 2.8vw, 38px) clamp(24px, 2.8vw, 38px);
  border-radius: var(--r-card);
  border: 1px solid var(--accent-line); background: var(--surface-2);
}
.schau-end::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grad-soft); opacity: 0.9;
}
.schau-end > * { position: relative; }
.schau-end-text { max-width: 52ch; }
.schau-end-text h2 {
  margin: 6px 0 0;
  font-family: var(--display); font-size: clamp(22px, 2vw, 28px);
  font-weight: 800; letter-spacing: -0.035em; color: var(--text);
}
.schau-end-text p {
  margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--text-2);
}
/* Der Knopf steht rechts und bricht als Erstes um — er ist das Ziel der
   Seite und soll unten nie eingeklemmt aussehen. */
.schau-end-go { display: flex; flex-wrap: wrap; gap: 10px; }
.schau-end-go .btn { margin-top: 0; }

/* Die Zeile unter dem Knopf: wann der nächste Durchgang beginnt. Über
   die volle Breite des Fachs, also immer unter dem Knopf und nie daneben
   — sie ist der Nachsatz und nicht die zweite Wahl.

   Klein und in der Schreibmaschinenschrift, wie jede andere Datumsangabe
   der Seite. Ein Kasten mit Fläche wäre hier ein zweiter Knopf; genau
   den will der Abschluss nicht (siehe `.schau-end`). */
.schau-end-note {
  flex: 1 1 100%; margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--accent);
}
.schau-end-note svg { width: 13px; height: 13px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .schau-end { flex-direction: column; align-items: flex-start; }
  .schau-end-go { width: 100%; }
  .schau-end-go .btn { width: 100%; justify-content: center; }
}