/* ==========================================================================
   base.css — Design-System Mitgliederbereich BestMe Training
   Shila-Branding (an die neue Website angeglichen): Weiß/Creme als Standard,
   warme Neutraltöne, Playfair Display (Überschriften) + Montserrat (Text),
   Koralle #F15D22 als einzige, sparsame Akzentfarbe. Referenz: design-system.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Schriften — Montserrat, selbst gehostet (CSP erlaubt nur eigene Quellen)
   Latin-Subset, Gewichte wie auf shiladriesch.de. Quelle: Google Fonts.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-500.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700.woff2") format("woff2");
}

/* Playfair Display — Serif für Überschriften, selbst gehostet (CSP: font-src 'self').
   Latin-Subset von Google Fonts. Quelle ist eine Variable Font: die normalen
   Gewichte 400/500/600 teilen sich dieselbe Datei, ebenso italic 400/500 —
   das Gewicht steuert der Browser über font-weight in den @font-face-Regeln. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-400.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/playfair-500.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-600.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-italic-400.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/playfair-italic-500.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Design-Tokens (CSS-Custom-Properties)
   -------------------------------------------------------------------------- */

:root {
  /* Farben — warme Neutraltöne (an die neue Website angeglichen), plus Koralle
     als einzige Akzentfarbe. Grundton bleibt Weiß/Creme, sparsamer Akzent. */
  --farbe-hintergrund: #ffffff;
  --farbe-hintergrund-leicht: #f7f7f7;   /* Flächen, die sich dezent abheben (warm statt kühl) */
  --farbe-ink: #0a0a0a;                  /* Primär-Schwarz der Website — starke Überschriften, dunkle Flächen */
  --farbe-text: #2a2a2a;                 /* Fließtext (Body-Ton der Website, minimal weicher als reines Schwarz) */
  --farbe-text-gedimmt: #4a4a4a;         /* Nebentexte, Beschreibungen (--gray-700 der Website) */
  --farbe-text-leise: #767676;           /* Meta-Angaben, Hinweise (--muted der Website) — AA auf Weiß/Creme (≈4,6:1) */
  --farbe-linie: #e5e5e5;                /* Trennlinien, Rahmen (warmer --border der Website) */
  --farbe-linie-stark: #dcdcdc;          /* Rahmen mit mehr Gewicht (warmer --gray-200 der Website) */
  --farbe-akzent: #0a0a0a;               /* Struktur-„Akzent" bleibt Schwarz — die ruhige, seriöse Aktion */
  --farbe-akzent-hover: #333333;
  --farbe-invers: #ffffff;               /* Schrift auf dunklen Flächen */
  --farbe-fokus: #f15f5c;                /* Fokus-Ring auf Koralle (gut sichtbar, barrierefrei) */

  /* Akzent Koralle — DIE eine Akzentfarbe des Ökosystems, sparsam als Signal.
     Kontrast auf Weiß ≈3,4:1 → nur großer/fetter Text, Nicht-Text (Linien,
     Icons, Buttons), niemals kleiner Fließtext. Pink bleibt bewusst ungenutzt. */
  --farbe-akzent-koralle: #f15f5c;
  --farbe-akzent-koralle-hover: #d94643;
  --farbe-akzent-koralle-hell: #fde7e6;  /* nur für dezente Flächen / Fokus-Glow */

  /* Warme CI-Töne (Shila) — Bühne und Akzentflächen der Karten-Seiten.
     Bewusst warm-cremig statt kühlem Grau; Karten bleiben Weiß, Text dunkel. */
  --farbe-buehne: #f2f2f2;               /* warmer Creme-Grund (Karten-Seiten) */
  --farbe-beige: #ebebeb;                /* dezente Akzent-/Absetzfläche */
  --farbe-rahmen-warm: #e5e5e5;          /* warmer Karten-/Trennlinien-Rahmen */

  /* Abstände — großzügig, viel Weißraum */
  --abstand-xs: 0.25rem;    /*  4px */
  --abstand-s: 0.5rem;      /*  8px */
  --abstand-m: 1rem;        /* 16px */
  --abstand-l: 1.5rem;      /* 24px */
  --abstand-xl: 2.5rem;     /* 40px */
  --abstand-xxl: 4rem;      /* 64px */
  --abstand-xxxl: 6rem;     /* 96px */

  /* Schrift — Montserrat (Body/Funktion) + Playfair Display (Überschriften/Zitate),
     wie auf der neuen Website. Systemschrift jeweils als Fallback. */
  --schrift-familie: "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-familie-display: "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --schrift-groesse-xs: 0.75rem;    /* 12px — Badges, Meta */
  --schrift-groesse-s: 0.875rem;    /* 14px — Nebentexte, Tabellen */
  --schrift-groesse-m: 1rem;        /* 16px — Fließtext */
  --schrift-groesse-l: 1.25rem;     /* 20px — Zwischentitel */
  --schrift-groesse-xl: 1.75rem;    /* 28px — Seitentitel */
  --schrift-groesse-xxl: 2.5rem;    /* 40px — Hero/Auftakt */
  --schrift-gewicht-normal: 400;
  --schrift-gewicht-mittel: 500;
  --schrift-gewicht-stark: 600;   /* Montserrat 700 wirkt zu massiv — 600 wie auf der Website */
  --schrift-zeilenhoehe: 1.65;          /* großzügige Zeilenhöhe im Fließtext */
  --schrift-zeilenhoehe-titel: 1.2;

  /* Form & Tiefe — dezent, kein Effekt-Feuerwerk */
  --radius-s: 10px;   /* Buttons (Entwurf-4-Maß) */
  --radius-m: 12px;   /* Karten/Kacheln (Entwurf-4-Maß) */
  --schatten-karte: 0 1px 3px rgba(17, 17, 17, 0.06);
  /* Geteiltes Easing wie auf der Website — „sanftes Ausklingen" für Hover-Übergänge */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --uebergang: 0.18s var(--ease);

  /* Layout */
  --breite-inhalt: 72rem;    /* maximale Inhaltsbreite */
  --breite-schmal: 26rem;    /* schmale Karten, z.B. Login */
}

/* --------------------------------------------------------------------------
   2. Reset — schlank und vorhersehbar
   -------------------------------------------------------------------------- */

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

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

body {
  font-family: var(--schrift-familie);
  font-size: var(--schrift-groesse-m);
  font-weight: var(--schrift-gewicht-normal);
  line-height: var(--schrift-zeilenhoehe);
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

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

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

ul,
ol {
  list-style-position: inside;
}

/* --------------------------------------------------------------------------
   3. Typografie — klare Hierarchie
   -------------------------------------------------------------------------- */

/* Überschriften auf Playfair Display (Serif) — die editoriale Stimme der Marke.
   Gewicht 600 (Website-Standard), leicht verdichtet, tiefes Ink-Schwarz.
   Größen bleiben wie gehabt (Seiten hängen daran) — nur Familie/Gewicht/
   Spacing/Farbe wechseln. Body/Buttons/Labels/Tabellen bleiben Montserrat. */
h1,
h2,
h3,
h4 {
  font-family: var(--schrift-familie-display);
  line-height: var(--schrift-zeilenhoehe-titel);
  font-weight: var(--schrift-gewicht-stark);
  letter-spacing: -0.005em;
  color: var(--farbe-ink);
}

h1 {
  /* Website-Maß statt fixer 28px — die Größe trägt die Hierarchie, seit
     Playfair raus ist (Entwurf-4-Skala, Max 12.08.). */
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: var(--schrift-gewicht-stark);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: var(--abstand-l);
}

h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: var(--schrift-gewicht-stark);
  letter-spacing: -0.01em;
  margin-bottom: var(--abstand-m);
}

h3 {
  font-size: var(--schrift-groesse-m);
  font-weight: var(--schrift-gewicht-mittel);   /* kleinere Titel etwas leichter, wie auf der Website */
  margin-bottom: var(--abstand-s);
}

/* Signatur-Akzent der Marke: ein <em> in einer Überschrift wird kursiv +
   Gewicht 500 + Koralle. So kann jede Seite ein Headline-Wort betonen —
   sparsam, eine Pointe pro Headline. */
h1 em,
h2 em,
h3 em {
  /* Montserrat hat keine Italic-Schnitte — Betonung über Farbe statt Kursiv */
  font-style: normal;
  font-weight: var(--schrift-gewicht-mittel);
  color: var(--farbe-akzent-koralle);
}

p {
  margin-bottom: var(--abstand-m);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--farbe-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--farbe-text-gedimmt);
}

small,
.text-klein {
  font-size: var(--schrift-groesse-s);
}

.text-gedimmt {
  color: var(--farbe-text-gedimmt);
}

.text-leise {
  color: var(--farbe-text-leise);
  font-size: var(--schrift-groesse-s);
}

/* Kicker — wiederkehrendes kleines Label über einer Überschrift.
   Montserrat, All-Caps, weit gesperrt. Standard in Koralle (dezenter Akzent);
   Variante .kicker-leise für rein orientierende Labels ohne Akzentwirkung. */
.kicker {
  display: inline-block;
  font-family: var(--schrift-familie);
  font-size: 0.8rem;      /* Entwurf-4-Maß */
  font-weight: var(--schrift-gewicht-stark);
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--farbe-akzent-koralle);
  margin-bottom: var(--abstand-m);
}

.kicker-leise {
  color: var(--farbe-text-leise);
}

/* --------------------------------------------------------------------------
   4. Fokus-Styles — sichtbar, aber dezent (Accessibility)
   -------------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------------
   5. Buttons — primär: Schwarz mit weißer Schrift, sekundär: Outline
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-s);
  padding: 0.75rem 1.5rem;
  font-size: var(--schrift-groesse-m);
  font-weight: var(--schrift-gewicht-mittel);
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-s);
  border: 1px solid var(--farbe-akzent);
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang),
    border-color var(--uebergang);
}

/* Primärer Button — die eine Haupt-Aktion pro Ansicht */
.button-primaer {
  background-color: var(--farbe-akzent);
  color: var(--farbe-invers);
}

.button-primaer:hover {
  background-color: var(--farbe-akzent-hover);
  border-color: var(--farbe-akzent-hover);
  color: var(--farbe-invers);
}

/* Sekundärer Button — Outline auf Weiß */
.button-sekundaer {
  background-color: transparent;
  color: var(--farbe-text);
}

.button-sekundaer:hover {
  background-color: var(--farbe-hintergrund-leicht);
  color: var(--farbe-text);
}

/* Koralle-Button — der Verkaufs-CTA (Landingpage angebot.html). Gefüllt Koralle,
   weiße Schrift, 6px Radius wie auf der Website; Hover dunkelt ab und hebt sich
   minimal an (nie skalieren). Im geschlossenen Mitgliederbereich bleibt der
   schwarze Primär-Button die ruhige Aktion — dieser hier ist bewusst nur fürs
   Verkaufen. */
.button-koralle {
  background-color: var(--farbe-akzent-koralle);
  border-color: var(--farbe-akzent-koralle);
  border-radius: 6px;
  color: var(--farbe-invers);
  transition: background-color var(--uebergang), border-color var(--uebergang),
    transform var(--uebergang);
}

.button-koralle:hover {
  background-color: var(--farbe-akzent-koralle-hover);
  border-color: var(--farbe-akzent-koralle-hover);
  color: var(--farbe-invers);
  transform: translateY(-1px);
}

/* Leiser Text-Button, z.B. „Passwort vergessen" oder „Abmelden" */
.button-leise {
  background: none;
  border: none;
  padding: var(--abstand-xs) 0;
  color: var(--farbe-text-gedimmt);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color var(--uebergang);
}

.button-leise:hover {
  color: var(--farbe-text);
}

/* Kleine Buttons, z.B. in Tabellenzeilen */
.button-klein {
  padding: 0.4rem 0.9rem;
  font-size: var(--schrift-groesse-s);
}

/* Deaktivierter Zustand — für alle Button-Varianten */
.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Volle Breite, z.B. im Login-Formular */
.button-breit {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. Formularfelder
   -------------------------------------------------------------------------- */

.formular-gruppe {
  margin-bottom: var(--abstand-l);
}

.formular-gruppe label {
  display: block;
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  margin-bottom: var(--abstand-s);
}

.eingabefeld,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: var(--schrift-groesse-m);
  color: var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-s);
  transition: border-color var(--uebergang);
}

.eingabefeld:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--farbe-text);
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 1px;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

::placeholder {
  color: var(--farbe-text-leise);
}

/* Hinweis unter einem Feld */
.feld-hinweis {
  font-size: var(--schrift-groesse-xs);
  color: var(--farbe-text-leise);
  margin-top: var(--abstand-xs);
}

/* Fehlermeldung im Formular — bewusst Schwarz statt Rot (Brand-Vorgabe),
   Aufmerksamkeit entsteht über Gewicht und Rahmen, nicht über Farbe */
.formular-fehler {
  display: none;
  padding: var(--abstand-s) var(--abstand-m);
  margin-bottom: var(--abstand-m);
  font-size: var(--schrift-groesse-s);
  font-weight: var(--schrift-gewicht-mittel);
  border: 1px solid var(--farbe-text);
  border-radius: var(--radius-s);
}

.formular-fehler.sichtbar {
  display: block;
}

/* Erfolgs-/Statusmeldung — dezent auf hellem Grau */
.formular-erfolg {
  display: none;
  padding: var(--abstand-s) var(--abstand-m);
  margin-bottom: var(--abstand-m);
  font-size: var(--schrift-groesse-s);
  background-color: var(--farbe-hintergrund-leicht);
  border-radius: var(--radius-s);
}

.formular-erfolg.sichtbar {
  display: block;
}

/* --------------------------------------------------------------------------
   7. Karten
   -------------------------------------------------------------------------- */

.karte {
  background-color: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  padding: var(--abstand-xl);
}

/* Schmale, zentrierte Karte — z.B. Login */
.karte-schmal {
  max-width: var(--breite-schmal);
  margin-left: auto;
  margin-right: auto;
}

.karte-kopf {
  margin-bottom: var(--abstand-l);
}

/* --------------------------------------------------------------------------
   8. Tabellen — z.B. Mitgliederliste im Admin-Panel
   -------------------------------------------------------------------------- */

.tabelle-umbruch {
  /* Wrapper, damit breite Tabellen auf kleinen Screens scrollen statt brechen */
  overflow-x: auto;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-groesse-s);
}

.tabelle th {
  text-align: left;
  font-weight: var(--schrift-gewicht-mittel);
  color: var(--farbe-text-gedimmt);
  padding: var(--abstand-s) var(--abstand-m);
  border-bottom: 1px solid var(--farbe-linie-stark);
  white-space: nowrap;
}

.tabelle td {
  padding: var(--abstand-m);
  border-bottom: 1px solid var(--farbe-linie);
  vertical-align: middle;
}

.tabelle tbody tr:hover {
  background-color: var(--farbe-hintergrund-leicht);
}

/* --------------------------------------------------------------------------
   9. Badges — Status „aktiv" / „gesperrt" (nur Schwarz/Grau, kein Bunt)
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: var(--schrift-groesse-xs);
  font-weight: var(--schrift-gewicht-mittel);
  letter-spacing: 0.08em;   /* All-Caps-Labels mit Luft — wie auf shiladriesch.de */
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}

/* aktiv: gefüllt schwarz — der positive Normalzustand */
.badge-aktiv {
  background-color: var(--farbe-text);
  color: var(--farbe-invers);
}

/* gesperrt: grauer Outline-Zustand */
.badge-gesperrt {
  background-color: transparent;
  color: var(--farbe-text-gedimmt);
  border: 1px solid var(--farbe-linie-stark);
}

/* --------------------------------------------------------------------------
   10. Layout-Bausteine
   -------------------------------------------------------------------------- */

.inhalt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-xl) var(--abstand-l);
}

/* Kopfzeile der App (Logo/Titel links, Aktionen rechts) */
.kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-l);
  border-bottom: 1px solid var(--farbe-linie);
  background-color: var(--farbe-hintergrund);
}

.kopfzeile-marke {
  font-weight: var(--schrift-gewicht-stark);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Logo-Bild in der Kopfzeile — sitzt bewusst oben rechts (Kundenwunsch),
   dezent klein; die Bildmaße stehen als width/height im Markup (kein Springen) */
.kopfzeile-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
}

.kopfzeile-logo img {
  height: 32px;
  width: auto;
}

/* Trennlinie mit Luft */
.trenner {
  border: none;
  border-top: 1px solid var(--farbe-linie);
  margin: var(--abstand-xl) 0;
}

/* --------------------------------------------------------------------------
   11. Utility-Klassen — bewusst wenige, klar benannte
   -------------------------------------------------------------------------- */

.versteckt {
  display: none !important;
}

/* Nur für Screenreader sichtbar (Accessibility) */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.zentriert {
  text-align: center;
}

.rechts {
  text-align: right;
}

.fluss > * + * {
  /* vertikaler Rhythmus: gleichmäßiger Abstand zwischen Kind-Elementen */
  margin-top: var(--abstand-m);
}

.zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
}

.zeile-umbruch {
  flex-wrap: wrap;
}

.wachsend {
  flex: 1;
}

.abstand-oben-l {
  margin-top: var(--abstand-l);
}

.abstand-oben-xl {
  margin-top: var(--abstand-xl);
}

.abstand-unten-l {
  margin-bottom: var(--abstand-l);
}

/* --------------------------------------------------------------------------
   12. Responsives Verhalten
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    /* Auf kleinen Screens etwas kompaktere Abstände und Titel */
    --schrift-groesse-xl: 1.5rem;
    --schrift-groesse-xxl: 2rem;
    --abstand-xl: 1.75rem;
    --abstand-xxl: 2.5rem;
  }

  .inhalt {
    padding: var(--abstand-l) var(--abstand-m);
  }

  .karte {
    padding: var(--abstand-l);
  }

  .kopfzeile {
    padding: var(--abstand-m);
  }

  /* Logo in der Kopfzeile darf auf Mobil kleiner werden */
  .kopfzeile-logo img {
    height: 24px;
  }

  /* Zeilen dürfen auf Mobil untereinander fallen */
  .zeile {
    flex-wrap: wrap;
  }
}

/* Reduzierte Bewegung respektieren (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   13. Karten-Bühne — geteilte Bausteine für die Übersicht (start.html) und
   die Lektionsansicht (kurs.html), Vorbild Coachy/LearningSuite in Shilas
   warmer CI: weiße Karten auf cremefarbenem Grund, monochrom, ohne bunte
   Akzente. Diese Klassen werden in Welle 2 nur noch konsumiert.
   -------------------------------------------------------------------------- */

/* Seiten-Bühne: weißer Grund (Entwurf-4-Look, Max 12.08.) — die Karten
   setzen sich über Rahmen/Schatten ab, die Sidebar trägt das Kachelgrau.
   Auf den <body> der Karten-Seiten legen. */
.buehne {
  background-color: var(--farbe-hintergrund);
  min-height: 100vh;
}

/* Weiße Karte auf der Bühne — großzügiger Innenabstand, dezente Tiefe,
   warmer Rahmen statt kühlem Grau. */
.karte-weiss {
  /* Handout-Grammatik: flach, Haarlinie statt Schatten (Entwurf 4). */
  background-color: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: var(--abstand-xl);
}

/* Responsives Kachel-Raster: 1 Spalte mobil, 2 ab ~640px, 3 ab ~960px. */
.kachel-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-l);
}

@media (min-width: 640px) {
  .kachel-raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .kachel-raster {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Eine Modul-Kachel — weiße Karte. Als <a>/<button> hebt sie sich beim
   Hover dezent an; als reines Info-Element (gesperrt) bleibt sie ruhig. */
.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  height: 100%;
  padding: var(--abstand-l);
  background-color: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  text-align: left;
  text-decoration: none;
  color: var(--farbe-text);
  transition: transform var(--uebergang), box-shadow var(--uebergang),
    border-color var(--uebergang);
}

/* Nur klickbare Kacheln (Links/Buttons) reagieren auf Hover. */
a.kachel:hover,
button.kachel:hover {
  /* Entwurf-4-Hover: leicht anheben, ruhiger Schatten, dunkle Haarlinie. */
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.07);
  border-color: var(--farbe-ink);
  color: var(--farbe-text);
}

/* Gesperrte Kachel (Drip): gedämpft ins Beige, kein Hover, Standard-Cursor. */
.kachel-gesperrt,
.kachel-gesperrt:hover {
  background-color: var(--farbe-buehne);
  color: var(--farbe-text-gedimmt);
  transform: none;
  box-shadow: none;
  border-color: transparent;
  cursor: default;
}

/* Abgeschlossenes Modul: etwas kräftigerer Rahmen als ruhiges Signal. */
.kachel-fertig {
  border-color: var(--farbe-linie-stark);
}

/* Dezentes Häkchen-Abzeichen (schwarz gefüllt) für fertige Module/Lektionen. */
.kachel-fertig-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background-color: var(--farbe-text);
  color: var(--farbe-invers);
}

/* Schmaler Fortschrittsbalken für Kacheln (grau/schwarz), wiederverwendbar. */
.fortschritt-mini {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background-color: var(--farbe-rahmen-warm);
  overflow: hidden;
}

.fortschritt-mini-fuellung {
  height: 100%;
  width: 0;
  background-color: var(--farbe-text);
  border-radius: inherit;
  transition: width var(--uebergang);
}

/* Dezente „Nächste Lektion"-Leiste (volle Breite, leicht ins Beige abgesetzt). */
.naechste-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--abstand-m) var(--abstand-l);
  background-color: var(--farbe-beige);
  border: 1px solid var(--farbe-rahmen-warm);
  border-radius: var(--radius-m);
}

/* --------------------------------------------------------------------------
   14. Drawer — Off-Canvas-Panel (Modulliste als einklappbares Menü).
   Basis-Styling; die Detailnutzung (Inhalt, Steuerung) macht Welle 2.
   Standard: von rechts herein. Variante .drawer-links: von links.
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(22rem, 90vw);
  height: 100%;
  padding: var(--abstand-l);
  background-color: var(--farbe-hintergrund);
  border-left: 1px solid var(--farbe-rahmen-warm);
  box-shadow: -4px 0 24px rgba(17, 17, 17, 0.08);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.24s ease;
}

/* Offener Zustand: fährt in den Viewport. */
.drawer-offen {
  transform: translateX(0);
}

/* Variante: Drawer von links. */
.drawer-links {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--farbe-rahmen-warm);
  box-shadow: 4px 0 24px rgba(17, 17, 17, 0.08);
  transform: translateX(-100%);
}

.drawer-links.drawer-offen {
  transform: translateX(0);
}

/* Abdunkelnde Ebene hinter dem offenen Drawer (schließt ihn per Klick). */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(17, 17, 17, 0.35);
  border: none;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   Handout-Signatur: roter Strich (44×3px) — Wiedererkennung aus Shilas
   Handouts/Website. Als Klasse an Überschriften, die eine Sektion eröffnen.
   -------------------------------------------------------------------------- */

.strich::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--farbe-akzent-koralle);
  margin-top: var(--abstand-m);
}