/* ═══════════════════════════════════════════════════════════════════════
   Selbstverwirklichung – Basis-Stylesheet

   Tokens stammen 1:1 aus brand/visual-guidelines.md und wurden an
   selbstverwirklichung.de gemessen. Farbwerte hier nicht raten – wenn ein
   Ton fehlt, erst in den Guidelines ergänzen, dann hier.

   Gestaltungsprinzip der Marke: Tiefe entsteht über die Creme-Rampe,
   nicht über Schatten. Es gibt genau einen Schatten (--sf-shadow), und der
   wird sparsam eingesetzt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Überschriften: Jost (seit 2026-10-08, vorher Cormorant Garamond) ──
   Auf dem eigenen Server statt über Google Fonts, aus zwei Gründen:
   size-adjust gleicht Jost an die bisherigen Größen an — ohne wären alle
   Überschriften rund 15 % größer, weil Jost deutlich breiter läuft als
   Cormorant —, und eine Anfrage an Google weniger. Variable Schrift, ein
   Datei für alle Stärken von 300 bis 600; der Latin-Ausschnitt enthält
   Umlaute und ß. Herkunft: Google Fonts, Lizenz OFL. */
@font-face {
  font-family: 'Jost Display';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  size-adjust: 86%;
  src: url('../fonts/jost-latin.woff2') format('woff2');
}

:root {
  /* ── Akzent ──────────────────────────────────────────────────────── */
  --sf-sand:        #CE9F84;
  --sf-sand-deep:   #CD9F7A;
  --sf-sand-soft:   #E8D3C4;
  --sf-clay:        #756357;
  --sf-clay-deep:   #705A48;

  /* ── Flächen (hell → dunkel) ─────────────────────────────────────── */
  --sf-surface-0:   #FFFFFF;
  --sf-surface-1:   #FCFAF7;
  --sf-surface-2:   #FAF8F5;
  --sf-surface-3:   #F9F6F1;
  --sf-surface-4:   #F7F4F0;
  --sf-surface-5:   #F4EDE6;
  --sf-surface-6:   #EFE5DC;

  /* ── Text ────────────────────────────────────────────────────────── */
  --sf-ink:         #28292E;
  --sf-ink-strong:  #121314;
  --sf-ink-muted:   #54595F;
  --sf-on-dark:     #FFFFFF;

  /* ── Dunkel ──────────────────────────────────────────────────────── */
  --sf-dark:        #262626;

  /* ── Semantik (abgeleitet, siehe visual-guidelines.md §6) ────────── */
  --sf-success:     #6E8B6A;
  --sf-danger:      #B4574A;
  --sf-border:      #EFE5DC;

  /* ── Typo ────────────────────────────────────────────────────────── */
  --sf-font-display: 'Jost Display', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  --sf-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sf-font-eyebrow: 'Montserrat', var(--sf-font-body);

  /* ── Form ────────────────────────────────────────────────────────── */
  --sf-radius-pill:  9999px;
  --sf-radius-card:  24px;
  --sf-radius-md:    12px;
  --sf-radius-sm:    8px;
  --sf-shadow:       0 10px 40px rgba(0, 0, 0, 0.15);

  /* ── Raum ────────────────────────────────────────────────────────── */
  /* Seitenbreite. Kopfzeile, Inhalt und Fusszeile nutzen alle -wide. */
  --sf-container-wide: 1400px;
  /* Deckel fuer Bloecke, die von Breite nicht profitieren (Formulare).
     Fliesstext begrenzt sich stattdessen ueber ch, siehe .lead und .prose. */
  --sf-form-max:     760px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss jede Layout-Regel schlagen.
   Der Browser setzt dafür nur `[hidden] { display: none }` in seinem eigenen
   Stylesheet — und das verliert gegen JEDE eigene display-Angabe. `.field`
   ist display:flex, also blieb ein <label class="field" hidden> sichtbar.
   Vor dieser Zeile wurde der Fall einzeln pro Komponente geflickt
   (.drawer[hidden], .uploader-busy[hidden], .link-form[hidden]); dabei wird
   er zwangsläufig irgendwann vergessen. Deshalb hier einmal für alles. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--sf-surface-1);
  color: var(--sf-ink);
  font-family: var(--sf-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--sf-clay-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

code {
  font-family: Menlo, Consolas, 'SFMono-Regular', monospace;
  font-size: 0.86em;
  background: var(--sf-surface-5);
  padding: 1px 6px;
  border-radius: 6px;
}

:focus-visible {
  outline: 2px solid var(--sf-clay-deep);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Typografie
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Überschriftenschrift ist die Stimme: groß, eng gesetzt. Seit
   2026-10-08 Jost statt Cormorant — groß in Stärke 400 mit etwas engerer
   Laufweite, sonst wirkt eine Sans in dieser Größe schwer. Nie für
   Fließtext oder UI-Labels verwenden. */
.display {
  font-family: var(--sf-font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--sf-ink);
}

.section-title {
  font-family: var(--sf-font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.1;
  color: var(--sf-ink);
}

.eyebrow {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-sand);
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sf-ink-muted);
}

.fineprint {
  font-size: 0.875rem;
  color: var(--sf-ink-muted);
}

.muted { color: var(--sf-ink-muted); }
.nowrap { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--sf-radius-pill);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--sf-sand);
  color: var(--sf-on-dark);
}
.btn-primary:hover { background: var(--sf-clay-deep); }

.btn-ghost {
  border-color: var(--sf-border);
  color: var(--sf-clay);
  background: var(--sf-surface-0);
}
.btn-ghost:hover { background: var(--sf-surface-5); color: var(--sf-clay-deep); }

.btn-sm { padding: 9px 18px; font-size: 0.75rem; }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.linkbutton {
  border: 0;
  background: none;
  padding: 0;
  color: var(--sf-clay);
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}
.linkbutton:hover { color: var(--sf-clay-deep); }

/* ═══════════════════════════════════════════════════════════════════════
   Kopfzeile (Mitgliederbereich)
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 250, 247, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sf-border);
}

.site-header-inner {
  max-width: var(--sf-container-wide);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.site-brand:hover { text-decoration: none; }

/* Wortmarke „Meine Selbstverwirklichung" (seit 2026-10-08, dieselbe Datei
   wie im Mailkopf). Trägt den Namen selbst, deshalb keine Beschriftung
   mehr daneben. 400 px breit hinterlegt, also scharf bis 3-fach. */
.site-logo { height: 44px; width: auto; }

.site-brand-label {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf-sand);
  padding-left: 12px;
  border-left: 1px solid var(--sf-border);
}

.site-nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
}

.site-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--sf-radius-pill);
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.site-nav-link:hover { background: var(--sf-surface-5); color: var(--sf-ink); text-decoration: none; }
.site-nav-link.is-active { background: var(--sf-surface-5); color: var(--sf-clay-deep); font-weight: 600; }

/* Icons tragen die Akzentfarbe, nicht die Textfarbe. --sf-sand-deep ist in
   den Visual Guidelines ausdruecklich fuer Icons vorgesehen. Im aktiven
   Zustand zieht das Icon mit dem Label auf Clay nach, damit der Eintrag als
   ein Element liest und nicht als Icon plus Text. */
.site-nav-link .icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--sf-sand-deep);
  transition: color 0.18s ease;
}
.site-nav-link.is-active .icon { color: var(--sf-clay-deep); }

/* Gesperrte Punkte (Gast sieht die ganze Leiste, kommt aber nur an die freien
   Bereiche). Bewusst zurückgenommen statt ausgegraut: Sie sind anklickbar und
   führen auf die Anmeldung — ein „disabled"-Grau würde das Gegenteil
   versprechen. Beim Überfahren gehen sie auf normale Helligkeit, damit sie
   sich anfassbar anfühlen. */
.site-nav-link.is-locked { color: var(--sf-ink-muted); }
.site-nav-link.is-locked .icon { opacity: 0.65; }
.site-nav-link.is-locked:hover .icon { opacity: 1; }

/* Das Schloss ist der Hinweis, nicht die Erklärung — die steht im
   title-Attribut und noch einmal auf der Anmeldeseite. Deshalb klein und
   leise: Es soll auffallen, wenn man hinsieht, und nicht, wenn man liest.

   Die Selektoren tragen `.is-locked` mit, obwohl das Schloss nur dort
   vorkommt. Ohne das gewinnt die Regel `.is-locked .icon` weiter oben (eine
   Klasse mehr) und zieht das Schloss auf dieselbe Deckkraft wie das
   Hauptsymbol — die Abstufung, um die es hier geht, fiele still aus. */
.site-nav-link.is-locked .icon-lock {
  width: 12px;
  height: 12px;
  margin-left: -3px;
  color: var(--sf-clay);
  opacity: 0.45;
}
.site-nav-link.is-locked:hover .icon-lock { opacity: 0.75; }

.site-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Konto-Menü (details/summary, kein JS nötig) ──────────────────── */

.user-menu { position: relative; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-0);
  cursor: pointer;
  list-style: none;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-trigger:hover { background: var(--sf-surface-5); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sf-sand);
  color: var(--sf-on-dark);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.user-menu-name { font-size: 0.875rem; font-weight: 500; }

.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  background: var(--sf-surface-0);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow);
  padding: 8px;
  z-index: 50;
}

.user-menu-head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--sf-border);
  margin-bottom: 6px;
}
.user-menu-fullname { font-weight: 600; font-size: 0.9375rem; }
.user-menu-mail { font-size: 0.8125rem; color: var(--sf-ink-muted); word-break: break-all; }

.user-menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--sf-radius-sm);
  font-size: 0.9375rem;
  color: var(--sf-ink);
}
.user-menu-item:hover { background: var(--sf-surface-5); text-decoration: none; }
.user-menu-item-quiet { color: var(--sf-ink-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   Hauptbereich
   ═══════════════════════════════════════════════════════════════════════ */

/* Kopfzeile, Inhalt und Fusszeile teilen sich eine Breite, damit es auf
   jeder Seite genau eine linke Kante gibt. Vorher lag der Inhalt auf 1120,
   Kopf- und Fusszeile auf 1400 — das ergab je nach Viewport 80 bis 140 px
   Versatz zwischen Logo- und Textkante. */
.site-main {
  max-width: var(--sf-container-wide);
  margin: 0 auto;
  padding: 56px 28px 96px;
}

.hero { margin-bottom: 56px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero .display { margin-bottom: 18px; }

.section { margin-top: 64px; }
.section-title { margin-bottom: 28px; }

/* ═══════════════════════════════════════════════════════════════════════
   Weiterlernen
   ═══════════════════════════════════════════════════════════════════════ */

.resume-card {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--sf-surface-5);
  border-radius: var(--sf-radius-card);
  padding: 32px 36px;
}

.resume-meta { flex: 1 1 320px; min-width: 0; }
.resume-meta .eyebrow { margin-bottom: 10px; }

.resume-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: 4px;
}

.resume-course { font-size: 0.9375rem; color: var(--sf-clay); margin-bottom: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   Fortschritt
   ═══════════════════════════════════════════════════════════════════════ */

.progress {
  height: 5px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-6);
  overflow: hidden;
}
.resume-card .progress { background: rgba(112, 90, 72, 0.16); }

.progress-bar {
  height: 100%;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-sand);
  transition: width 0.4s ease;
}

.progress-label {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--sf-clay);
}

/* ═══════════════════════════════════════════════════════════════════════
   Kurs-Karten
   ═══════════════════════════════════════════════════════════════════════ */

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--sf-surface-0);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.course-card:hover {
  transform: translateY(-3px);
  border-color: var(--sf-sand-soft);
  text-decoration: none;
}

.course-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sf-surface-5);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.course-cover img { width: 100%; height: 100%; object-fit: cover; }

.course-cover-mark {
  font-family: var(--sf-font-display);
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--sf-sand);
  line-height: 1;
}

.course-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-0);
  color: var(--sf-success);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.course-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
}

.course-subtitle {
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
  flex: 1;
}

.course-body .progress { margin-top: 6px; }

.course-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--sf-clay);
}

/* ═══════════════════════════════════════════════════════════════════════
   Leerzustand
   ═══════════════════════════════════════════════════════════════════════ */

.empty {
  background: var(--sf-surface-3);
  border-radius: var(--sf-radius-card);
  padding: 56px 44px;
  text-align: center;
}

.empty-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: 12px;
}

.empty-text {
  color: var(--sf-ink-muted);
  max-width: 52ch;
  margin: 0 auto;
}

.empty .btn-row { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   Anmeldung & zentrierte Seiten
   ═══════════════════════════════════════════════════════════════════════ */

.body-centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--sf-surface-5);
}

.auth-card,
.centered-card {
  width: 100%;
  max-width: 460px;
  background: var(--sf-surface-1);
  border-radius: var(--sf-radius-card);
  padding: 48px 44px;
}

.centered-card { max-width: 520px; text-align: center; }
.centered-card .btn-row { justify-content: center; }
.centered-card .lead { margin: 0 auto; }

.auth-logo { height: 54px; width: auto; margin-bottom: 30px; }

.auth-card .display { font-size: 2.25rem; margin-bottom: 14px; }
.auth-card .lead { font-size: 1rem; margin-bottom: 32px; }

.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-restart { margin-top: 20px; text-align: center; }
.auth-card .fineprint { margin-top: 28px; text-align: center; }

/* ── Formularfelder ───────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; }

.field-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-0);
  font-size: 1rem;
  transition: border-color 0.18s ease;
}
.field input::placeholder { color: #B9AFA6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sf-sand);
  outline: none;
}

.input-code {
  text-align: center;
  font-family: Menlo, Consolas, monospace;
  font-size: 1.75rem !important;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* gleicht das Tracking hinter der letzten Ziffer aus */
  padding: 16px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Hinweise
   ═══════════════════════════════════════════════════════════════════════ */

.alert {
  padding: 14px 18px;
  border-radius: var(--sf-radius-md);
  font-size: 0.9375rem;
  margin-bottom: 24px;
}

.alert-error {
  background: #F7EAE7;
  color: #8A3E33;
}

.alert-note {
  background: var(--sf-surface-5);
  color: var(--sf-clay-deep);
}

.alert-success {
  background: #EAF0E9;
  color: #46603F;
}

/* ═══════════════════════════════════════════════════════════════════════
   Flächen & Formulare im Inhaltsbereich
   ═══════════════════════════════════════════════════════════════════════ */

.panel-plain {
  background: var(--sf-surface-0);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  padding: 32px 34px;
}

/* Ein Eingabefeld wird durch Breite nicht besser. Ohne diesen Deckel
   waeren die Felder auf einer 1400er Seite rund 640 px breit und Label und
   Feld verlieren den Bezug zueinander. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--sf-form-max);
}

/* Flaeche, die das Formular umschliesst, zieht mit — sonst steht rechts
   ein halber Meter leere Karte. */
.panel-plain.is-narrow { max-width: var(--sf-form-max); }
.form-grid .field-wide { grid-column: 1 / -1; }

.field input:disabled {
  background: var(--sf-surface-4);
  color: var(--sf-ink-muted);
  cursor: not-allowed;
}

.field-hint {
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
  line-height: 1.55;
}

/* Häkchen mit Erklärung daneben. Stand bis 2026-10-03 nur in admin.css;
   seit dem Kursmail-Schalter im Profil braucht es auch der
   Mitgliederbereich. Die Regeln in admin.css sind identisch. */
.field-check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.field-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--sf-sand);
}
.field-check strong { display: block; font-weight: 600; }
.field-check .field-hint { display: block; margin-top: 2px; }

.deflist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin: 0;
}
.deflist dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay);
  margin-bottom: 4px;
}
.deflist dd {
  margin: 0;
  font-family: var(--sf-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--sf-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   Kapitel & Lektionen
   ═══════════════════════════════════════════════════════════════════════ */

.chapter-list { display: flex; flex-direction: column; gap: 40px; }

.chapter-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  margin-bottom: 16px;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  background: var(--sf-surface-0);
}

.lesson {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--sf-surface-4);
}
.lesson:last-child { border-bottom: 0; }

.lesson-num {
  font-family: var(--sf-font-display);
  font-size: 1.125rem;
  color: var(--sf-sand);
  width: 28px;
  flex-shrink: 0;
}

.lesson-title { flex: 1; min-width: 0; }

.lesson-meta {
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
  flex-shrink: 0;
}

.lesson.is-done .lesson-title { color: var(--sf-ink-muted); }
.lesson.is-done .lesson-num { color: var(--sf-success); }

/* ═══════════════════════════════════════════════════════════════════════
   Kursansicht: Gliederung links, Lektion rechts
   ═══════════════════════════════════════════════════════════════════════ */

.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
  margin-bottom: 24px;
}
.crumbs a { color: var(--sf-clay); }

.course-layout {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.course-aside {
  position: sticky;
  top: 92px;                 /* Höhe der Kopfzeile plus Luft */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}

.course-aside-head { margin-bottom: 24px; }

.course-aside-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 14px;
}

.toc-chapter { margin-bottom: 22px; }

/* Haarlinie zwischen Kapiteln — das Pendant zu .nav-divider in der
   Verwaltung. Nur ZWISCHEN Kapiteln, nicht ueber dem ersten: eine Linie
   direkt unter dem Fortschrittsbalken waere eine Trennung ohne Inhalt. */
.toc-chapter + .toc-chapter {
  border-top: 1px solid var(--sf-border);
  padding-top: 20px;
}

.toc-chapter-title {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-ink-muted);
  padding: 0 12px 8px;
}

.toc-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--sf-radius-sm);
  color: var(--sf-ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.toc-item:hover { background: var(--sf-surface-5); text-decoration: none; }

.toc-item.is-current {
  background: var(--sf-surface-5);
  font-weight: 600;
  color: var(--sf-clay-deep);
}
.toc-item.is-done .toc-text { color: var(--sf-ink-muted); }
.toc-item.is-locked { color: #B9AFA6; }

.toc-mark {
  flex-shrink: 0;
  width: 20px;
  font-size: 0.8125rem;
  color: var(--sf-sand);
  font-variant-numeric: tabular-nums;
}
.toc-item.is-done .toc-mark { color: var(--sf-success); }

.toc-mark .icon {
  width: 13px;
  height: 13px;
  vertical-align: -1px;
}

.toc-text { flex: 1; min-width: 0; }

.toc-dur {
  font-size: 0.75rem;
  color: var(--sf-ink-muted);
  flex-shrink: 0;
}

/* Gesperrte Lektion zeigt statt der Dauer das Freischaltdatum — dasselbe
   Pillen-Vokabular wie das „Bald" im Admin, aber mit echter Information.
   Vorher war nur ein graues Item mit „·" zu sehen und das Datum erst nach
   einem Klick. */
.toc-badge {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-6);
  color: var(--sf-clay);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.course-main { min-width: 0; }

/* ── Player ───────────────────────────────────────────────────────── */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  background: var(--sf-dark);   /* dunkle Bühne als bewusster Kontrast */
  margin-bottom: 32px;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lesson-head { margin-bottom: 22px; }

.lesson-heading {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.1;
}

.lesson-sub { font-size: 0.875rem; color: var(--sf-clay); margin-top: 6px; }

.section-subtitle {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 14px;
}

/* ── Fließtext der Lektion ────────────────────────────────────────── */

.prose { max-width: 68ch; color: var(--sf-ink); }
.prose > * + * { margin-top: 1.1em; }
.prose p { line-height: 1.75; }
.prose h2, .prose h3 {
  font-family: var(--sf-font-display);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 1.6em;
}
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.4em; }
.prose a { text-decoration: underline; }
.prose blockquote {
  border-left: 2px solid var(--sf-sand);
  padding-left: 20px;
  font-family: var(--sf-font-display);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--sf-clay-deep);
}
.prose img { border-radius: var(--sf-radius-md); }

.lesson-files { margin-top: 40px; }

.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--sf-border);
}
.lesson-nav { display: flex; gap: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   Download-Liste
   ═══════════════════════════════════════════════════════════════════════ */

.download-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  background: var(--sf-surface-0);
}

.download-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--sf-surface-4);
}
.download-item:last-child { border-bottom: 0; }

.download-body { flex: 1; min-width: 0; }
.download-title {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.download-meta { font-size: 0.8125rem; color: var(--sf-ink-muted); }

/* Ein Eintrag, der nach aussen fuehrt, bekommt das Pfeil-Icon vorweg —
   damit vor dem Klick klar ist, dass die Seite verlassen wird und nichts
   heruntergeladen. Farbe wie die Navigationsicons. */
.download-item.is-link .download-title .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--sf-sand-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
   Wiki
   ═══════════════════════════════════════════════════════════════════════ */

/* Fuer Beschriftungen, die eine Screenreader-Ausgabe braucht, aber im Bild
   nur Unruhe waere — das Suchfeld traegt seine Beschriftung sichtbar im
   Platzhalter. Nicht display:none: das nimmt die Beschriftung auch dem
   Screenreader weg. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wiki-search {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: var(--sf-form-max);
  margin-bottom: 10px;
}

.wiki-search .field { flex: 1 1 auto; min-width: 0; }

.wiki-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
}

.wiki-groups {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 40px;
}

.wiki-letter {
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sf-border);
  font-family: var(--sf-font-display);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--sf-sand-deep);
}

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

.wiki-entry {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--sf-border);
}

.wiki-entry:last-child { border-bottom: 0; }

.wiki-entry-link {
  flex: 1;
  min-width: 0;
  color: inherit;
}

.wiki-entry-link:hover { text-decoration: none; }
.wiki-entry-link:hover .wiki-term { color: var(--sf-clay-deep); }

.wiki-term {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
}

.wiki-teaser {
  display: block;
  margin-top: 3px;
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
}

/* Seit 2026-09-04 kann ein Begriff in mehreren Bereichen liegen, deshalb ein
   Behaelter drumherum. Die Marken sind jetzt Links auf die Bereichsseite. */
.wiki-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.wiki-cats-lead { margin-bottom: 16px; }

.wiki-cat {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-5);
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-clay);
}

a.wiki-cat:hover {
  background: var(--sf-surface-6);
  color: var(--sf-clay-deep);
  text-decoration: none;
}

/* ── Themenbereiche auf der Uebersicht ─────────────────────────────────
   Stehen ueber der alphabetischen Liste: Sie erklaeren den Zusammenhang,
   und das ist der interessantere Einstieg als der Buchstabe A. */
.wiki-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-theme {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-0);
  color: inherit;
}

.wiki-theme:hover {
  border-color: var(--sf-sand-soft);
  background: var(--sf-surface-2);
  text-decoration: none;
}

.wiki-theme-name {
  font-family: var(--sf-font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--sf-clay-deep);
}

.wiki-theme-teaser {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
}

.wiki-theme-count {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-sand-deep);
}

/* Der Zusammenhangstext eines Bereichs. Steht direkt unter dem Vorspann,
   deshalb kein zusaetzlicher Abstand nach oben. */
.wiki-cat-intro { margin-top: -12px; }

/* ── Verknuepfungen zwischen Begriffen ─────────────────────────────────
   Die Beschriftung („setzt voraus") ist die Ueberschrift der Gruppe, nicht
   ein Wort vor jedem Eintrag — bei drei Voraussetzungen stuende es sonst
   dreimal untereinander. */
.wiki-relation-group + .wiki-relation-group { margin-top: 28px; }

.wiki-relation-label {
  margin-bottom: 8px;
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-sand-deep);
}

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

.wiki-relation {
  padding: 12px 0;
  border-bottom: 1px solid var(--sf-border);
}

.wiki-relation:last-child { border-bottom: 0; }

.wiki-relation-term {
  font-weight: 600;
  color: var(--sf-ink);
}

.wiki-relation-term:hover { color: var(--sf-clay-deep); }

.wiki-relation-note {
  display: block;
  margin-top: 3px;
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
}

/* ── Einzelner Begriff ─────────────────────────────────────────────── */

.wiki-detail .display { margin-bottom: 16px; }
.wiki-detail .lead { margin-bottom: 8px; }

.wiki-synonyms {
  margin: 0 0 32px;
  font-size: 0.875rem;
  color: var(--sf-ink-muted);
}

.wiki-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-0);
  font-size: 0.875rem;
  color: var(--sf-clay-deep);
}

.wiki-chip:hover {
  background: var(--sf-surface-5);
  text-decoration: none;
}

.wiki-back { margin-top: 56px; }

/* ── Verweise im Fliesstext ────────────────────────────────────────────
   Ein Wiki-Verweis ist eine Fussnote, kein Aufruf zum Klicken: gepunktet
   und in Textfarbe, damit ein Absatz mit fuenf Begriffen nicht aussieht
   wie eine Linkliste. Die Regel steht bewusst NACH `.prose a`, sonst
   gewinnt dort der Unterstrich. */
.wiki-link,
.prose .wiki-link {
  color: var(--sf-clay-deep);
  text-decoration: none;
  border-bottom: 1px dotted var(--sf-sand-deep);
}

.wiki-link:hover,
.prose .wiki-link:hover {
  text-decoration: none;
  border-bottom-style: solid;
}

/* ═══════════════════════════════════════════════════════════════════════
   Tabellen (Mitgliederbereich und Verwaltung)
   ═══════════════════════════════════════════════════════════════════════ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-ink-muted);
  padding: 0 14px 10px;
  border-bottom: 1px solid var(--sf-border);
}

.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--sf-surface-4);
  vertical-align: top;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--sf-surface-2); }

/* ═══════════════════════════════════════════════════════════════════════
   Fußzeile
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  border-top: 1px solid var(--sf-border);
  background: var(--sf-surface-3);
}

.site-footer-inner {
  max-width: var(--sf-container-wide);
  margin: 0 auto;
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
}

.site-footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer-nav a { color: var(--sf-clay); }

/* ═══════════════════════════════════════════════════════════════════════
   Impulse & Perspektiven (Artikel)

   Der Stöber-Bereich. Bewusst dieselbe Kartenform wie bei den Kursen —
   es soll sich nicht wie ein zweites, fremdes Modul anfühlen. Unterschied:
   Karten ohne Fortschrittsbalken, dafür mit Lesedauer und Schlagworten.

   Nirgends ein Datum. Das ist keine Auslassung, sondern der Punkt: Ein
   Artikel von vor zwei Jahren soll genauso gültig aussehen wie einer von
   gestern.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schlagwort-Filter ─────────────────────────────────────────────── */

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-surface-0);
  font-size: 0.875rem;
  color: var(--sf-clay-deep);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tag-chip:hover {
  background: var(--sf-surface-5);
  border-color: var(--sf-sand-soft);
  text-decoration: none;
}
.tag-chip.is-active {
  background: var(--sf-sand);
  border-color: var(--sf-sand);
  color: var(--sf-on-dark);
}

.tag-count {
  font-size: 0.75rem;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.tag-chip.is-active .tag-count { opacity: 0.8; }

/* ── Übersicht ─────────────────────────────────────────────────────── */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 28px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--sf-surface-0);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.article-card:hover {
  transform: translateY(-3px);
  border-color: var(--sf-sand-soft);
  text-decoration: none;
}

/* Hervorgehobene Artikel bekommen einen ruhigen Rahmen statt einer zweiten
   Farbe. Die Pille trägt die Aussage; der Rahmen sorgt nur dafür, dass die
   Karte beim Überfliegen auffällt. */
.article-card.is-highlighted { border-color: var(--sf-sand); }

.article-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sf-surface-5);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.article-card-cover img { width: 100%; height: 100%; object-fit: cover; }

.article-card-mark {
  font-family: var(--sf-font-display);
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--sf-sand);
  line-height: 1;
}

.article-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.article-card-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
}

.article-card-teaser {
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
  flex: 1;
}

.article-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--sf-clay);
}

.article-card-tags {
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pille „Empfehlung" ────────────────────────────────────────────── */

.article-pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-sand);
  color: var(--sf-on-dark);
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Auf dem Titelbild sitzt sie oben rechts und wechselt auf hellen Grund —
   auf einem Foto ist Sand auf Sand nicht zu lesen. Gleiche Position wie das
   Fortschritts-Abzeichen auf den Kurskarten. */
.article-pill-onCover {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--sf-surface-0);
  color: var(--sf-clay-deep);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* ── Einzelner Artikel ─────────────────────────────────────────────── */

/* Breite der Artikelspalte — 70 % der Inhaltsbreite von .site-main.
   Hier drehen, wenn die Spalte breiter oder schmaler werden soll.

   Die 34rem sind die Untergrenze und sparen einen Media Query: Auf mittleren
   Bildschirmen wären 70 % unangenehm schmal, und sobald 34rem mehr sind als
   überhaupt Platz ist (Handy), begrenzt ohnehin die Breite des Elternteils.
   `max()` nimmt jeweils den größeren der beiden Werte.

   Zur Einordnung: 70 % ergeben auf einem 1280er Bildschirm rund 855 px, also
   etwa 85 Zeichen je Zeile. Das ist bewusst über der typografischen
   Empfehlung von 65–75 — falls sich das Lesen irgendwann zäh anfühlt, ist
   nicht die Breite schuld, sondern das Verhältnis von Breite zu Zeilenabstand
   (siehe .article-detail .prose p weiter unten). */
.article-detail { max-width: max(70%, 34rem); }

/* .prose und .lead bringen eigene Zeilenbreiten mit (68ch bzw. 56ch) — sie
   stehen auch in Lektionen und auf anderen Seiten, wo genau das richtig ist.
   Im Artikel bestimmt dagegen die Spalte die Breite. Ohne diese Zeile bliebe
   die Angabe oben wirkungslos, weil der Text weiter bei 68ch abbräche. */
.article-detail .prose,
.article-detail .lead { max-width: none; }

/* Etwas mehr Zeilenabstand als die 1.75 aus .prose. Je breiter die Spalte,
   desto wichtiger ist der Abstand zwischen den Zeilen: Das Auge findet den
   Anfang der nächsten Zeile sonst schlechter, und genau das ist der Grund,
   warum breite Textblöcke anstrengend wirken. */
.article-detail .prose p { line-height: 1.8; }

.article-detail .article-pill { margin-bottom: 16px; }
.article-detail .display { margin-bottom: 10px; }
.article-detail .lead { margin-bottom: 8px; }

/* Steht anstelle eines Datums. Die Lesedauer sagt etwas über den Text und
   altert nicht. */
.article-meta {
  font-family: var(--sf-font-eyebrow);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay);
  margin-bottom: 24px;
}

.article-cover {
  margin: 32px 0;
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  background: var(--sf-surface-5);
}
.article-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-detail .prose { margin-top: 32px; }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 44px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--sf-border);
}

.article-back { margin-top: 56px; }

/* Hinweis statt Text, wenn jemand einen geteilten Link öffnet, für den ihm
   der Zugang fehlt. Sitzt direkt unter Titel und Anriss — die beiden bleiben
   sichtbar, damit klar ist, worum es überhaupt ginge. */
.article-locked { margin-top: 40px; }

/* ═══════════════════════════════════════════════════════════════════════
   Startseite: rechte Spalte (seit 2026-10-06)

   Kästen auf der Creme-Rampe, ohne Schatten — wie der Rest des Bereichs.
   Grundton surface-5 wie die „Weiterlernen"-Karte; surface-3 ging auf dem
   Seitengrund (surface-1) unter (Feedback Florian 2026-10-06).
   Der Rückruf hebt sich ab (weiß mit Rand, weil er der einzige Kasten mit
   einem echten Knopf ist). Das Wochenpotenzial stand bis 2026-10-07 hier
   und ist jetzt .week-card in der Hauptspalte.
   ═══════════════════════════════════════════════════════════════════════ */

.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.home-main { min-width: 0; }
.home-main > .section:first-child { margin-top: 0; }

.home-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.aside-card {
  display: block;
  background: var(--sf-surface-5);
  border-radius: 20px;
  padding: 26px;
}
.aside-card .eyebrow { margin-bottom: 10px; }


.aside-card-call {
  background: var(--sf-surface-0);
  border: 1px solid var(--sf-border);
}

.aside-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.12;
  color: var(--sf-ink);
  margin-bottom: 10px;
}
.aside-title a { color: inherit; }

.aside-text p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--sf-ink);
}
.aside-text p + p { margin-top: 0.8em; }

.aside-text-small {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--sf-ink-muted);
  margin-bottom: 16px;
}

.aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay-deep);
}
.aside-link .icon { width: 14px; height: 14px; transition: transform 0.18s ease; }
.aside-link:hover { text-decoration: none; color: var(--sf-ink); }
.aside-link:hover .icon { transform: translateX(2px); }

/* ── Rückruf ───────────────────────────────────────────────────────── */

.call-faces { display: flex; margin-bottom: 16px; }
.call-faces img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sf-surface-0);
}
.call-faces img + img { margin-left: -14px; }

.aside-card-call .btn .icon { width: 15px; height: 15px; }

/* ── Podcast ───────────────────────────────────────────────────────── */

.aside-episode {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--sf-ink);
}
.aside-episode:hover { text-decoration: none; }
.aside-episode:hover .aside-episode-title { color: var(--sf-clay-deep); }

.aside-episode img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--sf-radius-md);
  object-fit: cover;
  background: var(--sf-surface-6);
}

.aside-episode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aside-episode-meta { font-size: 0.75rem; color: var(--sf-clay); }
.aside-episode-title {
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.18s ease;
}

/* ── Buch ──────────────────────────────────────────────────────────── */

.aside-book {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.aside-book .aside-title { font-size: 1.35rem; }

.aside-book-cover { display: block; }
.aside-book-cover img {
  width: 100%;
  border-radius: 3px 8px 8px 3px;
}

/* Gesetztes Cover, solange keins hochgeladen ist: Sand-Fläche mit
   dunklerem Rücken links, Titel in der Serif. */
.book-mock {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: 10px 8px 10px 14px;
  border-radius: 3px 8px 8px 3px;
  background: var(--sf-sand);
  border-left: 6px solid var(--sf-clay-deep);
  color: var(--sf-on-dark);
  font-family: var(--sf-font-display);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
}

/* ── Instagram ─────────────────────────────────────────────────────── */

.aside-social {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  color: var(--sf-ink);
  transition: background-color 0.18s ease;
}
.aside-social:hover { text-decoration: none; background: var(--sf-surface-6); }

.aside-social-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sf-sand);
  color: var(--sf-on-dark);
}
.aside-social-icon .icon { width: 22px; height: 22px; }

.aside-social-label { display: block; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.aside-social-handle { display: block; font-size: 0.8125rem; color: var(--sf-clay); }

.aside-social-arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--sf-clay);
}

/* ── Rückruf-Fenster ───────────────────────────────────────────────── */

.modal {
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 0;
  border: 0;
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-1);
  color: var(--sf-ink);
  box-shadow: var(--sf-shadow);
}
.modal::backdrop { background: rgba(38, 38, 38, 0.45); }

/* Ohne JavaScript steht das Fenster offen im Seitenfluss (siehe
   home_sidebar_view.php). Dann braucht es Abstand statt Schwebe. */
.modal[open]:not(:modal) {
  position: relative;
  margin: 48px auto 0;
}

.modal[open] { animation: modal-in 0.22s ease-out; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal-inner {
  position: relative;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 40px 40px 32px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sf-clay);
  cursor: pointer;
}
.modal-close:hover { background: var(--sf-surface-5); color: var(--sf-clay-deep); }
.modal-close .icon { width: 20px; height: 20px; }

.modal-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  margin: 8px 0 10px;
}

.modal-lead {
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
  margin-bottom: 24px;
}

.modal-body > .alert { margin-bottom: 20px; }

.modal-form { display: flex; flex-direction: column; gap: 20px; }

.modal-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-4);
  font-size: 0.9375rem;
}
.modal-who-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay);
}
.modal-who .muted { font-size: 0.875rem; }

.field textarea { resize: vertical; min-height: 64px; }
.field textarea::placeholder { color: #B9AFA6; }

.field-error { font-size: 0.8125rem; color: #8A3E33; }
.field.has-error input,
.field.has-error textarea { border-color: var(--sf-danger); }

.partner-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.partner-pick legend { padding: 0; margin-bottom: 10px; }

.partner-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.partner-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 14px;
  border: 1px solid var(--sf-border);
  border-radius: 16px;
  background: var(--sf-surface-0);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.partner-option:hover { border-color: var(--sf-sand-soft); }

/* Radio bleibt im Formular und per Tastatur erreichbar, nur unsichtbar —
   die ganze Karte ist die Auswahlfläche. */
.partner-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.partner-option img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  outline: 1px solid var(--sf-border);
  transition: border-color 0.18s ease;
}

.partner-name { font-size: 0.9375rem; font-weight: 600; }

.partner-option:has(input:checked) {
  border-color: var(--sf-sand);
  background: var(--sf-surface-5);
}
.partner-option:has(input:checked) img { border-color: var(--sf-sand); outline-color: transparent; }
.partner-option:has(input:focus-visible) {
  outline: 2px solid var(--sf-clay-deep);
  outline-offset: 3px;
}

.modal-fineprint { text-align: center; margin-top: -6px; font-size: 0.8125rem; }

.modal-done { text-align: center; padding: 16px 0 8px; }
.modal-done .modal-lead { max-width: 34ch; margin: 0 auto 24px; }
.modal-done-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EAF0E9;
  color: #46603F;
}
.modal-done-icon .icon { width: 26px; height: 26px; }

/* ── Schmaler: Spalte rutscht unter die Kurse ──────────────────────── */

@media (max-width: 1100px) {
  .home-layout { grid-template-columns: 1fr; gap: 48px; }
  .home-aside {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
  }
}

@media (max-width: 760px) {
  .home-aside { grid-template-columns: 1fr; }
  .modal-inner { padding: 32px 22px 24px; }
  .modal-title { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Offene Startseite, Registrierung, Wiki für Gäste (seit 2026-10-06)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kurskarten ohne Freischaltung ─────────────────────────────────────
   Keine Link-Karte (der Kurs wäre gesperrt), deshalb kein Anheben beim
   Darüberfahren — der Weg hinein ist der Knopf. */
.course-card.is-locked:hover { transform: none; border-color: var(--sf-border); }
.course-card.is-locked .course-cover img { filter: saturate(0.85); }

/* Sprungziel aus kurs.php (/#kurs-<slug>): kurz markieren, welche Karte
   gemeint ist. */
.course-card.is-locked:target { border-color: var(--sf-sand); }

/* „Jetzt freischalten für 19,90 € / Monat" ist für eine 290er-Karte lang.
   Etwas kleiner und enger als .btn, und falls es doch umbricht, dann
   ausgewogen statt mit einem Wort allein in der zweiten Zeile. */
.course-offer {
  margin-top: 8px;
  padding: 13px 16px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.course-offer-none {
  margin-top: 8px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--sf-border);
  font-size: 0.8125rem;
  color: var(--sf-ink-muted);
  text-align: center;
}

.course-badge-free { background: var(--sf-sand); color: var(--sf-on-dark); }
.course-badge-lock {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--sf-clay);
}
.course-badge-lock .icon { width: 15px; height: 15px; }

.section-note {
  margin: -16px 0 24px;
  font-size: 0.875rem;
  color: var(--sf-ink-muted);
  max-width: 64ch;
}
.hero .section-note { margin: 16px 0 0; }

/* ── Kopfzeile für Gäste: zwei Knöpfe ───────────────────────────────
   Anmelden + Registrieren brauchen rund 120 px mehr als das Konto-Menü.
   Damit die Navigation nicht abgeschnitten wird, geht die lange
   Beschriftung neben dem Logo für Gäste schon unter 1480 px — sonst
   greift das erst bei 1280 (siehe „Kopfzeile bei fünf Menüpunkten"). */
/* Rechts bündig auch dann, wenn die Navigation in eine eigene Zeile
   umbricht — sonst klebt der Knopf am Logo (bisher fiel das nicht auf,
   weil das Konto-Menü schmal ist). */
.site-header-right { margin-left: auto; }
.site-header-right .btn { white-space: nowrap; }

@media (max-width: 1480px) {
  .site-brand-label.is-guest { display: none; }
}
@media (max-width: 560px) {
  .header-login { display: none; }
}

/* ── Hinweis „Kostenlos weiterlesen" (Wiki) ───────────────────────── */
.signup-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 32px;
  padding: 28px 32px;
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-5);
}
.signup-box .eyebrow { margin-bottom: 6px; }
.signup-box .btn-row { margin-top: 0; }
.signup-box-text {
  font-family: var(--sf-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  max-width: 38ch;
}

/* ── Registrierung ─────────────────────────────────────────────────── */
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Honigtopf: aus dem Bild und aus der Tab-Reihenfolge, aber nicht
   display:none — manche Roboter lassen versteckte Felder bewusst aus. */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-card .auth-switch { margin-top: 10px; }

@media (max-width: 760px) {
  .auth-row { grid-template-columns: 1fr; }
  .signup-box { padding: 24px 22px; }
}

/* ── Wochenpotenzial (seit 2026-10-07 in der Hauptspalte) ──────────────
   Breit über den Kursen, eine Stufe dunkler als die übrigen Kästen.
   Fließtext bleibt Inter (Guidelines: Überschriftenschrift nie für
   Fließtext), nur die Überschrift ist Jost. Zeilenlänge über ch begrenzt, nicht über die
   Kastenbreite. */
.week-card {
  background: var(--sf-surface-6);
  border-radius: var(--sf-radius-card);
  padding: 34px 40px 30px;
  margin-bottom: 32px;
}
.week-head { margin-bottom: 14px; }

/* Eyebrow und Gültigkeit in einer Zeile. Die Gültigkeit ist eine
   Randnotiz, keine Überschrift — klein, normal geschrieben, in Ton. */
.week-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 8px;
}
.week-valid {
  font-size: 0.8125rem;
  color: var(--sf-clay);
}
.week-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.12;
}

.week-text {
  position: relative;
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sf-ink);
}
.week-text p + p { margin-top: 0.9em; }

/* Eingeklappt: rund vier Zeilen, nach unten in den Kastengrund
   auslaufend. Die Verlaufsfarbe MUSS der Kastenfarbe entsprechen. */
.week-text.is-collapsed {
  /* Genau vier Zeilen, die vierte läuft aus. Bis 2026-10-07 waren es 4,5 —
     die halbe fünfte Zeile sah abgeschnitten aus statt ausgeblendet. */
  max-height: calc(1.0625rem * 1.8 * 4);
  overflow: hidden;
}
.week-text.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, rgba(239, 229, 220, 0), var(--sf-surface-6) 85%);
  pointer-events: none;
}

.week-toggle {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-clay-deep);
  cursor: pointer;
}
.week-toggle:hover { color: var(--sf-ink); }

@media (max-width: 760px) {
  .week-card { padding: 26px 22px 22px; }
  .week-text { font-size: 1rem; }
  .week-text.is-collapsed { max-height: calc(1rem * 1.8 * 6); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Startseite für Gäste (seit 2026-10-08, includes/home_guest.php)

   Vorschlag A „Persönlich". Hintergrundflächen sind abgerundete Paneele
   statt randloser Bänder: Ein 100vw-Band erzeugt unter Windows mit
   sichtbarem Scrollbalken einen waagerechten Scroll, und die Paneele
   passen zur Kartenwelt des übrigen Bereichs.
   ═══════════════════════════════════════════════════════════════════════ */

.g-section { margin-block: 72px; }
.g-panel {
  margin-block: 72px;
  padding: 56px 52px;
  border-radius: 32px;
  background: var(--sf-surface-5);
}
.g-head { max-width: 640px; margin-bottom: 36px; }
.g-head .eyebrow { margin-bottom: 12px; }
.g-head .section-title { margin-bottom: 0; text-wrap: balance; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.g-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 24px;
}
.g-hero-title {
  font-family: var(--sf-font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-block: 18px 22px;
  text-wrap: balance;
}
/* Betonung über Farbe statt Kursive — Jost-Kursive ist nicht eingebunden,
   und eine vom Browser schräggestellte Sans sieht billig aus. */
.g-hero-title em { font-style: normal; color: var(--sf-clay-deep); }
.g-lead {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--sf-ink-muted);
  max-width: 52ch;
}
.g-hero .btn-row { margin-top: 32px; }

.g-reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--sf-clay);
}
.g-reassure li::before { content: "✓"; margin-right: 7px; color: var(--sf-sand); font-weight: 600; }

/* Organische Bildform von selbstverwirklichung.de (img-shape.svg) als
   Maske. Die Form hat das Seitenverhältnis 437.79 : 423.13; das Foto wird
   darauf zugeschnitten. */
.g-hero-photo { position: relative; margin: 0; }
.g-hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 437.79 / 423.13;
  object-fit: cover;
  object-position: 50% 35%;
  -webkit-mask-image: url('../img/img-shape.svg');
          mask-image: url('../img/img-shape.svg');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.g-hero-caption {
  position: absolute;
  left: -28px;
  bottom: 34px;
  max-width: 280px;
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--sf-surface-1);
  box-shadow: var(--sf-shadow);
}
.g-hero-caption strong {
  display: block;
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.g-hero-caption span { font-size: 0.84rem; color: var(--sf-ink-muted); line-height: 1.5; }

/* ── Was dich erwartet ─────────────────────────────────────────────── */
.g-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.g-offer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 24px;
  border: 1px solid var(--sf-border);
  border-radius: 22px;
  background: var(--sf-surface-0);
  color: var(--sf-ink);
  transition: border-color 0.18s ease, transform 0.22s ease;
}
.g-offer:hover { text-decoration: none; border-color: var(--sf-sand-soft); transform: translateY(-2px); }
.g-offer-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sf-surface-5);
  color: var(--sf-clay-deep);
}
.g-offer-icon .icon { width: 20px; height: 20px; }
.g-offer strong { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.g-offer-text { flex: 1; font-size: 0.9375rem; color: var(--sf-ink-muted); line-height: 1.6; }
.g-offer-meta { font-size: 0.8rem; font-weight: 500; color: var(--sf-clay); }
.g-offer-meta.is-free { color: #46603F; }

/* ── Für wen ───────────────────────────────────────────────────────── */
.g-forwhom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.g-forwhom .eyebrow { margin-bottom: 14px; }
.g-quote {
  font-family: var(--sf-font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.g-quote em { font-style: normal; color: var(--sf-clay-deep); }
.g-signs { display: grid; gap: 14px; padding-top: 6px; }
.g-signs li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.65; }
.g-signs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sf-sand);
}

/* ── So fängst du an ───────────────────────────────────────────────── */
.g-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.g-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-sand-soft);
  font-size: 0.9375rem;
  color: var(--sf-ink-muted);
}
.g-steps strong { font-size: 1.0625rem; font-weight: 600; color: var(--sf-ink); margin-top: 4px; }
.g-step-no {
  font-family: var(--sf-font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--sf-sand);
}

/* Kurse: drei nebeneinander, die Seite hat hier keine rechte Spalte. */
.g-courses { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ── Wer wir sind ──────────────────────────────────────────────────── */
.g-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.g-person {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--sf-border);
  border-radius: 24px;
  background: var(--sf-surface-0);
}
.g-person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.g-person h3 {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.g-role { margin-block: 4px 12px; font-size: 0.8125rem; color: var(--sf-clay); }
.g-person p { font-size: 0.9375rem; color: var(--sf-ink-muted); line-height: 1.65; }
.g-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.g-links a { display: inline-flex; align-items: center; gap: 5px; }
.g-links .icon { width: 13px; height: 13px; }

/* ── Schluss ───────────────────────────────────────────────────────── */
.g-final { text-align: center; padding-block: 24px 16px; }
.g-final .section-title { max-width: 22ch; margin: 14px auto 16px; text-wrap: balance; }
.g-final p { max-width: 52ch; margin: 0 auto; color: var(--sf-ink-muted); }
.g-final .btn-row { justify-content: center; }
.g-final .btn .icon { width: 15px; height: 15px; }

/* Wochenpotenzial steht hier zwischen zwei Sektionen. */
.g-section + .week-card { margin-top: -24px; margin-bottom: 0; }

@media (max-width: 1100px) {
  .g-hero { grid-template-columns: 1fr; gap: 40px; }
  .g-hero-photo { max-width: 540px; }
  .g-hero-caption { left: 16px; }
  .g-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-forwhom { grid-template-columns: 1fr; gap: 28px; }
  .g-people { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .g-panel { padding: 36px 22px; border-radius: 24px; margin-block: 48px; }
  .g-section { margin-block: 48px; }
  .g-offers, .g-steps { grid-template-columns: 1fr; }
  .g-person { grid-template-columns: 1fr; }
  .g-hero-caption { position: relative; left: auto; bottom: auto; margin: -36px 0 0 16px; }
  .g-section + .week-card { margin-top: 0; }
}

/* ── Kopfzeile bei fünf Menüpunkten ────────────────────────────────────
   Bis „Podcast" dazukam, hatte die Leiste vier Punkte und passte auf jedem
   Bildschirm in eine Zeile. Mit dem fünften nicht mehr: Marke (362 px, davon
   250 für die Beschriftung), Navigation (783) und der rechte Teil (bis 260,
   wenn jemand die Verwaltung sehen darf) brauchen zusammen rund 1520 px —
   mehr, als der Inhaltsdeckel von 1400 px hergibt. Ohne diese Regeln wurde
   das Konto-Menü aus dem Bild geschoben und die ganze Seite waagerecht
   scrollbar.

   Zwei Stufen, dann greift der bestehende 760er-Block:

     ≤ 1280  Die Beschriftung neben dem Logo geht, die Punkte rücken zusammen.
             Die Beschriftung ist Zierde — das Logo daneben sagt dasselbe.
     ≤ 1040  Die Navigation bekommt eine eigene Zeile. Enger zusammenrücken
             würde ab hier die Punkte selbst unleserlich machen.

   Zusätzlich darf die Navigation schrumpfen (min-width: 0) und notfalls
   waagerecht rollen. Das ist der Notnagel für den Fall, dass irgendwann ein
   sechster Punkt dazukommt: Lieber eine rollbare Leiste als ein Konto-Menü,
   das niemand mehr erreicht. */

.site-nav { min-width: 0; }

@media (max-width: 1280px) {
  .site-brand-label { display: none; }
  .site-header-inner { gap: 20px; }
  .site-nav { gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav-link { padding: 8px 12px; gap: 7px; }
}

@media (max-width: 1040px) {
  .site-header-inner { flex-wrap: wrap; gap: 14px 20px; }
  .site-nav { order: 3; width: 100%; margin-right: 0; padding-bottom: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Klein
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .site-header-inner { gap: 16px; padding: 12px 18px; flex-wrap: wrap; }
  .site-brand-label { display: none; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .user-menu-name { display: none; }
  .user-menu-trigger { padding: 5px; }

  .site-main { padding: 36px 18px 72px; }
  .resume-card { padding: 26px 24px; gap: 22px; }
  .auth-card, .centered-card { padding: 36px 26px; }
  .empty { padding: 40px 24px; }
  .course-grid { grid-template-columns: 1fr; gap: 20px; }
  .panel-plain { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .lesson, .download-item { padding: 14px 18px; }
  .download-item { flex-wrap: wrap; }

  /* Die Kategorie rutscht unter den Begriff statt daneben — nebeneinander
     bleibt fuer den Teaser sonst eine Spalte von zwei Woertern uebrig. */
  .wiki-entry { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wiki-groups { gap: 36px; }

  .article-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Die Filterleiste bleibt einzeilig und wird geschoben. Umgebrochen nimmt
     sie bei vielen Schlagworten den halben Bildschirm ein, bevor der erste
     Artikel zu sehen ist. */
  .tag-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 28px;
  }
  .tag-chip { flex: 0 0 auto; }

  .article-card-foot { flex-direction: column; gap: 4px; }
  .article-card-tags { text-align: left; }
}

/* Gliederung wandert unter den Player, sobald zwei Spalten zu eng werden. */
@media (max-width: 1000px) {
  .course-layout { grid-template-columns: 1fr; gap: 32px; }
  .course-aside {
    position: static;
    max-height: none;
    order: 2;
    border-top: 1px solid var(--sf-border);
    padding-top: 28px;
  }
  .course-main { order: 1; }
  .lesson-actions { flex-direction: column; align-items: stretch; }
  .lesson-nav { justify-content: space-between; }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   Community (seit 2026-10-08)
   ═══════════════════════════════════════════════════════════════════════
   Eine Seite, zwei Zustände (community.php): Mitglieder sehen Zugang und
   Archiv, alle anderen das Angebot. Tiefe nur über die Creme-Rampe, keine
   Schatten (Guidelines §3). */

.community-lead { max-width: 64ch; }
.community-lead p + p { margin-top: 0.9em; }
.hero .btn-row .course-offer-none { margin: 0; padding: 12px 0; border-top: 0; text-align: left; }

/* ── Zugang: WhatsApp und Termin ─────────────────────────────────── */
.community-access {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
.community-tile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-3);
}
.community-tile-main { background: var(--sf-surface-6); }
.community-tile-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-surface-0);
  color: var(--sf-sand-deep);
}
.community-tile-icon .icon { width: 22px; height: 22px; }
.community-tile-body { flex: 1; min-width: 0; }
.community-tile-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 4px;
}
.community-tile-text { font-size: 0.9375rem; color: var(--sf-ink-muted); }
.community-tile .btn { flex-shrink: 0; }

/* ── Aufzeichnungen ──────────────────────────────────────────────── */
.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  overflow: hidden;
  background: var(--sf-surface-0);
}
.rec-list > li + li { border-top: 1px solid var(--sf-surface-4); }

.rec-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 24px;
  color: inherit;
  transition: background-color 0.18s ease;
}
a.rec-item:hover { background: var(--sf-surface-2); text-decoration: none; }

/* Datumskästchen statt Nummer: Bei einem Archiv sucht man „die vom
   letzten Dienstag", nicht „Folge 14". */
.rec-date {
  width: 56px;
  flex-shrink: 0;
  padding: 9px 0 8px;
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-5);
  text-align: center;
  line-height: 1;
}
.rec-day {
  display: block;
  font-family: var(--sf-font-display);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--sf-ink);
}
.rec-month {
  display: block;
  margin-top: 4px;
  font-family: var(--sf-font-eyebrow);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-clay);
}

.rec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-title { font-weight: 500; color: var(--sf-ink); }
.rec-meta { font-size: 0.8125rem; color: var(--sf-ink-muted); }
.rec-progress { display: block; max-width: 220px; margin-top: 6px; }
.rec-progress .progress-bar { display: block; }
.rec-item.is-done .rec-title,
.rec-list.is-locked .rec-title { color: var(--sf-ink-muted); }

.rec-state { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--sf-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.rec-pill .icon { width: 13px; height: 13px; }
/* Weiß auf Sand hätte zu wenig Kontrast für so kleine Schrift — deshalb
   die helle Sandstufe mit dunklem Text. */
.rec-pill-new  { background: var(--sf-sand-soft); color: var(--sf-clay-deep); }
.rec-pill-done { background: #EAF0E9; color: #46603F; }

.rec-play {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sf-surface-5);
  color: var(--sf-clay-deep);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.rec-play .icon { width: 14px; height: 14px; margin-left: 2px; }
a.rec-item:hover .rec-play { background: var(--sf-sand); color: var(--sf-on-dark); }

.rec-lock .icon { width: 16px; height: 16px; color: var(--sf-sand-deep); }

/* ── Kurse, die mit der Community kommen ─────────────────────────── */
.community-courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.community-course {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px 14px 14px;
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-0);
  color: inherit;
  transition: background-color 0.18s ease;
}
.community-course:hover { background: var(--sf-surface-2); text-decoration: none; }
.community-course-cover {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--sf-radius-md);
  background: var(--sf-surface-5);
}
.community-course-cover img { width: 100%; height: 100%; object-fit: cover; }
.community-course-cover .course-cover-mark { font-size: 2rem; }
.community-course-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.community-course-title { font-weight: 500; }
.community-course-sub { font-size: 0.8125rem; color: var(--sf-ink-muted); }
.community-course-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--sf-sand-deep); }

.community-foot { margin-top: 48px; }

/* ── Angebot ─────────────────────────────────────────────────────── */
.community-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.community-benefit {
  padding: 26px 26px 24px;
  border-radius: var(--sf-radius-card);
  background: var(--sf-surface-3);
}
.community-benefit-title {
  font-family: var(--sf-font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
  margin-bottom: 8px;
}
.community-benefit-text { font-size: 0.9375rem; line-height: 1.6; color: var(--sf-ink-muted); }

.community-bonus-list { max-width: 68ch; padding-left: 1.2em; line-height: 1.7; }
.community-bonus-list li + li { margin-top: 6px; }

@media (max-width: 1040px) {
  .community-access { grid-template-columns: 1fr; }
  .community-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .community-tile { flex-wrap: wrap; padding: 22px; gap: 16px; }
  .community-tile .btn { width: 100%; justify-content: center; }
  .community-benefits { grid-template-columns: 1fr; }
  .rec-item { gap: 14px; padding: 14px 16px; }
  .rec-date { width: 48px; }
  .rec-play { display: none; }
  .community-courses { grid-template-columns: 1fr; }
}
/* ── Kopfzeile bei sechs Menüpunkten (seit „Community", 2026-10-08) ──
   Gemessen in der Vorschau: Die Navigation braucht mit sechs Punkten
   803 px. Zwischen 1041 und 1280 px stand sie neben Logo und Konto-Menü
   und wurde abgeschnitten — rechts fiel genau der neue Punkt heraus.
   Deshalb bekommt sie schon ab 1200 px eine eigene Zeile, und unter 900 px
   fallen die Icons weg (spart rund 150 px), damit alle sechs Wörter
   sichtbar bleiben. Darunter greift wie bisher das waagerechte Rollen. */
@media (max-width: 1200px) {
  .site-header-inner { flex-wrap: wrap; gap: 14px 20px; }
  .site-nav { order: 3; width: 100%; margin-right: 0; padding-bottom: 2px; }
}
@media (max-width: 900px) {
  .site-nav-link > svg.icon:not(.icon-lock) { display: none; }
}/* Gäste haben rechts zwei Knöpfe, Staff zusätzlich „Verwaltung" — beide
   brauchen die eigene Zeile früher (gemessen: Gast ab 1395 px zu eng).
   Ohne :has()-Unterstützung bleibt es beim Rollen, nichts bricht. */
@media (max-width: 1400px) {
  .site-header-inner:has(.header-register) { flex-wrap: wrap; gap: 14px 20px; }
  .site-header-inner:has(.header-register) .site-nav { order: 3; width: 100%; margin-right: 0; padding-bottom: 2px; }
}
@media (max-width: 1320px) {
  .site-header-inner:has(a[href="/admin/"]) { flex-wrap: wrap; gap: 14px 20px; }
  .site-header-inner:has(a[href="/admin/"]) .site-nav { order: 3; width: 100%; margin-right: 0; padding-bottom: 2px; }
}