/* selfmade.css */

/*  ------------------------------------------------------------------
    GLOBAL DESIGN TOKENS
    ------------------------------------------------------------------ */
/* ──────────────────────────────────────────────────────────────
   DESIGN TOKENS • 3 Grundflächen + Brand
   - page-bg     → Seitenhintergrund (Standard: Weiß)
   - surface-bg  → Oberflächen (Cards/Boxen): Weiß (konstant)
   - alt1-bg     → sehr helles Blau für Abschnittswechsel
   - alt2-bg     → sehr helles Grau für Abschnittswechsel
   - brand       → starkes Blau für Buttons/CTA/Footer
   - on-brand    → Text auf Brand
   - text/muted  → Fließtext/Farbnuance
   + Fonts, Radius, Shadow, Spacing
   ───────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --brand: #004aad;
  --on-brand: #ffffff;
  /* Hover-Variante (für :hover o.ä.) */
  --brand-hover: color-mix(in srgb, var(--brand) 90%, black);

  /* Flächen */
  --page-bg: #ffffff; /* Seitenhintergrund */
  --surface-bg: #ffffff; /* Cards/Boxen bleiben überall weiß */
  --alt1-bg: #f7faff; /* sehr helles Blau (Section-Alt 1) */
  --alt2-bg: #fcfcfd; /* sehr helles Grau (Section-Alt 2) */

  /* Text */
  --text: #111827; /* sehr dunkles Grau statt Schwarz */
  --muted: #6b7280;

  /* Deko */
  --radius: 0.125rem;
  --border-color: #e5e7eb;
  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.1);

  /* Spacing-Scale (8-pt) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;

  /* Schriften */
  --font-sans: "Montserrat", "Poppins", system-ui, -apple-system, Arial,
    sans-serif;

  /* ── Bootstrap-Mapping (Komponenten greifen automatisch) ───────── */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-primary: var(--brand);
  --bs-primary-rgb: 0, 74, 173; /* RGB von #004aad */
  --bs-link-color: var(--brand);
  --bs-card-bg: var(--surface-bg);
  --bs-card-border-color: var(--border-color);
  --bs-border-radius: var(--radius);
  --bs-body-font-family: var(--font-sans);
  --bs-heading-font-family: var(--font-sans);

  /* ── Legacy-Alias (Übergangsphase; später entfernen) ────────────
     Zeigt auf die neuen Tokens, damit alter Code weiterläuft. */
  --primary-color: var(--brand);
  --secondary-color: var(--alt1-bg); /* vorher #f8faff → Alt-Blau */
  --hover-color: var(--brand-hover);
  --text-color: var(--text);
  --background-color: var(--page-bg);

  /* Erweiterte Palette / Deko (falls im Projekt genutzt) */
  --clr-accent: hsl(35 85% 55%);

  /* Legacy-Radius/Shadow-Namen */
  --radius-lg: var(--bs-border-radius);
  --shadow-lg: var(--shadow-2);

  /* Für Hero Header */
  --overlay-light: color-mix(in srgb, var(--page-bg) 20%, transparent);

  /* Optional: Hover-Farbe der Links in Navs etwas brandiger */
  --bs-nav-link-hover-color: var(--brand);
  --bs-link-hover-color: var(--brand-hover);

  /* Preloader */
  --preloader-logo-h: clamp(6rem, 16vw, 11rem);
  --preloader-spinner-size: clamp(2.25rem, 6vw, 3.5rem);
  --preloader-spinner-thickness: 0.25rem;

  /* ---- Header / Navbar --------------------- */
  /* Branding */
  --logo-h-nav: 2.5rem;

  /* Layout & Spacing */
  --nav-h: 3rem; /* einheitliche Höhe für Links & CTAs */
  --nav-gap: 1.25rem; /* Abstände zwischen Items/Blöcken */
  --nav-link-px: 1rem; /* X-Padding der Links */

  /* CTAs */
  --btn-lg-font: 0.9375rem; /* ~15px */
  --btn-lg-px: 0.875rem;
  --btn-border-strong: 3px;
  --radius-navbar: 0rem; /* Header eckig */
  --radius-btn: 0.25rem; /* CTAs leicht abgerundet */

  /* Fokus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Sidebar --------------------- */
  /* Desktop */
  --header-h: 4rem; /* wird per JS exakt gesetzt */
  --sidebar-w: 16rem; /* Sidebar ausgeklappt */
  --sidebar-w-collapsed: 3.5rem; /* Icon-Rail (Desktop collapsed) */

  /* Mobile Overlay */
  --sidebar-mobile-max-w: var(--sidebar-w); /* max. Breite des Overlays */
  --sidebar-mobile-toggle-w: 2.75rem; /* Größe des Griff-Pfeils (wenn zu) */
  --sidebar-mobile-tab-w: 1.125rem; /* schmale Lasche (nur Icon) */
  --sidebar-toggle-size: 2.25rem; /* Größe des Toggle-Buttons */
  --overlay-dim: color-mix(in srgb, var(--text) 35%, transparent);

  /* Abstände/Typo */
  --sidebar-item-py: 0.625rem;
  --sidebar-item-px: 1rem;
  --sidebar-gap: 0.5rem;
  --sidebar-fs: 0.9375rem; /* ~15px */
  --sidebar-icon-fs: 1rem; /* ~16px */

  /* Flächen/Farben */
  --sidebar-bg: var(--alt2-bg);
  --sidebar-title: var(--muted);

  /* ---- Hero-Banner --------------------- */
  --bs-breadcrumb-divider: "›";

  /* ---- Auth-UI --------------------- */
  --focus-ring-primary: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
  --btn-font-size-lg: 1.125rem;
  --btn-padding-y-lg: 0.5rem;
  --btn-max-width: 16rem;

  /* NEU: sehr kleine Schriftgröße für Meta-Links (z. B. "Passwort vergessen") */
  --fs-xs: 0.8125rem; /* ~13px, gut lesbar */

  /* ---- C-Slider --------------------- */
  --dot-size: 0.5rem;
  --dot-gap: 0.5rem;
  --dot-color: var(--muted);
  --dot-color-active: var(--brand);
  --dot-opacity: 0.35;
  --dot-opacity-active: 1;

  --rule-space: 0.75rem;
  --rule-thickness: 1px;
  --rule-color: var(--border-color);

  /* ---- HERO / CAROUSEL ------------------------------- */
  /* ---------- Layout / Ratio ---------- */
  --hero-ratio-w: 1920;
  --hero-ratio-h: 865;
  --hero-height: clamp(
    24rem,
    min(70vh, calc(100vw * var(--hero-ratio-h) / var(--hero-ratio-w))),
    42rem
  );

  /* ---------- Overlay / Colors ---------- */
  --overlay-dark: color-mix(in srgb, var(--text) 38%, transparent);

  /* ---------- Indicators ---------- */
  --hero-indicator-size: 0.85rem;
  --hero-indicator-dot: calc(var(--hero-indicator-size) * 0.5);
  --indicator-border-width: 2px;
  --indicator-offset: 1rem;
  --indicator-ring: color-mix(in srgb, var(--muted) 55%, transparent);

  /* ---------- Motion (Tokens) ---------- */
  --anim-duration: 1000ms;
  --anim-ease: cubic-bezier(0.2, 0.7, 0, 1);
  --anim-delay-1: 300ms; /* H6 */
  --anim-delay-2: 600ms; /* H2 */
  --anim-delay-cta: 1000ms; /* CTA deutlich später */

  /* ---------- Distances ---------- */
  --text-slide-distance-x: 110%;
  --text-slide-distance-y: 120%;
  --cta-offset: 2.5rem; /* CTA fährt von unten ein */

  /* ---------- Image Look ---------- */
  --hero-brightness: 1.06; /* 1.00–1.10 */
  --hero-saturation: 1.06; /* 1.00–1.12 */
  --hero-warmth: 6%; /* 0%–10% sepia */
  --hero-hue: -4deg; /* leicht Richtung Rot/Orange */

  /* ---------- Slide Behavior ---------- */
  --hero-slide-duration: 1250ms;
  --hero-slide-ease: cubic-bezier(0.22, 0.7, 0, 1);

  /* ---- Buchungsprozess ------------------------------- */
  --subjects-col: 10rem; /* Kachelbreite je Fach (beibehalten) */
  --modal-desktop-w: 46rem; /* ~736px – generische Modal-Breite Desktop */
  --modal-desktop-w-wide: 56rem; /* ~896px – „breit“ (Kalender/Details) */
  --modal-max-block: 88vh; /* beibehalten */
  --modal-max-block-calendar: 92vh; /* Kalender darf etwas höher */
}

/* ===========================
   Z-Index: zentrale Tokens
   =========================== */
:root {
  /* Bootstrap-Overlay-Skala (spiegelt die Defaults) */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-offcanvas-backdrop: 1040;
  --z-offcanvas: 1045;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-popover: 1070;
  --z-tooltip: 1080;
  --z-toast: 1090;
  --z-preloader: 1200;

  /* Low-level für Komponentendetails (BS-Utilities -1..3 existieren schon) */
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;

  /* App-spezifische Platzhalter (unter 1000 lassen!) */
  --z-app-header: 110; /* nicht-sticky Header über Content */
  --z-app-navbar-sticky: var(--z-sticky); /* wenn Header sticky ist */
  --z-app-sidebar: 900; /* über Content, aber unter Overlays */
  --z-app-sidebar-backdrop: 850; /* über Content, aber unter Overlays */
  --z-app-fab: 950; /* Floating-Action-Button */
  --z-app-tooltip-local: 15; /* kleine lokale Overlays in Cards etc. */

  /* WICHTIG: auf Bootstrap-Variablen mappen (global!) */
  --bs-backdrop-zindex: var(--z-modal-backdrop);
  --bs-modal-zindex: var(--z-modal);
}

/* =========================================
   Globaler Brand-Look für Buttons & Nav-Pills
   – Bootstrap 5.3 Variablen pro Variante überschreiben
   – nutzt bestehende Tokens: --brand / --on-brand / --brand-hover
   ========================================= */

/* Primär-Buttons überall (nicht nur im Auth-Scope) */
.btn-primary {
  --bs-btn-color: var(--on-brand);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: var(--on-brand);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--brand) 60%, white);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand) 60%, white);
}

/* Outline-Primär (für sekundäre CTAs im Brand-Look) */
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: color-mix(in srgb, var(--brand) 60%, white);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand) 60%, white);
}

/* Link-Button (falls genutzt) */
.btn-link {
  --bs-btn-color: var(--brand);
  --bs-btn-hover-color: var(--brand-hover);
  --bs-link-color-rgb: var(--bs-primary-rgb); /* für Unterstreichungsfarbe */
}

/* Nav-Pills aktiv (z. B. Stepper-Buttons im Screenshot) */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand);
  --bs-nav-pills-link-active-color: var(--on-brand);
}

/* Alter Root nach Erstellung von Tokens */
/* :root { */
/* Brand ▸ Bootstrap‑Hooks  (↓ wird per BS‑Klassen vererbt) */
/* --bs-secondary: #f8faff; */

/* Alt‑Mapping  (→ bleibt vorerst; s. Audit‑Spalte) */
/* --hover-color: var(
    --bs-primary
  ); Redundant, evtl. ersetzen durch :hover states */
/* --background-color: #fff; dito */
/* } */

/* 2) Harte heading-Zuweisungen von Intense neutralisieren (Elemente + BS-Hilfsklassen) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-family: var(--bs-heading-font-family);
}

/* 3) (Optional) Falls Legacy/Custom irgendwo dem Footer eine eigene Schrift gibt: neutralisieren */
footer {
  font-family: var(--bs-body-font-family);
}

/*  ------------------------------------------------------------------
    RESET  (einmalig, dann KEINE weiteren *{}‑Blöcke mehr)
    ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* -------------- Alte Resets / Duplikate ----------------------------
   *{…font-family:'Roboto'}         → wird jetzt von Bootstrap/Montserrat ersetzt
   *{…font-family:'Poppins'}        → falls Poppins NICHT mehr genutzt wird:
                                      Klassenspezifisch löschen, Block entfernt.
------------------------------------------------------------------------ */

/* --------------------------------------------------
   Sections ▸ Token-basierte Flächenwechsel
   - exakt zwei Hintergründe im Wechsel: alt1 (blauhell) / alt2 (grauhell)
   - Cards bleiben weiß über --surface-bg / Bootstrap-Mapping
-------------------------------------------------- */
.section {
  padding-block: var(--sp-5);
  background: var(--page-bg);
}

.section--alt {
  background: var(--alt1-bg);
}

.section--muted {
  background: var(--alt2-bg);
}

/* Option für dunkle Brand-Section (falls benötigt) */
.section--brand {
  background: var(--brand);
  color: var(--on-brand);
}
.section--brand a {
  color: var(--on-brand);
}

.c-lead {
  font-size: 1.25rem; /* etwas größer als normaler Text */
  font-weight: 500; /* leicht hervorgehoben */
  color: var(--text); /* Standard-Textfarbe aus Token */
}

/* =========================================
   PRELOADER (Bootstrap 5) – minimal notwendig
   ========================================= */
/* --------------------------------------------------
   PRELOADER (Fullscreen Overlay mit "Kino"-Öffnung)
   - Overlay ist initial weiß (→ --page-bg)
   - Spinner bleibt blau via .text-primary (→ --brand, Bootstrap)
   - Bei Fertig: Vorhänge fahren seitlich auf, Overlay wird transparent
   -------------------------------------------------- */

/* vorgeschlagene Tokens für Größen (nur hier genutzt) */

/* Utilities */
.u-z-overlay {
  z-index: var(--z-preloader);
} /* über Header/Offcanvas/Modals */
.u-logo-xl {
  height: var(--preloader-logo-h);
  width: auto;
}
.u-spinner-xl {
  width: var(--preloader-spinner-size);
  height: var(--preloader-spinner-size);
  border-width: var(--preloader-spinner-thickness);
}

/* Overlay */
.preloader {
  background-color: var(--page-bg);
  isolation: isolate; /* eigener Stacking-Kontext gegen fremde Overlays/Intense */
  transition: background-color 0.6s ease, opacity 0.2s ease,
    visibility 0.2s ease;
}

/* "Vorhänge" links/rechts als Pseudo-Elemente */
.preloader::before,
.preloader::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: var(--page-bg);
  transform: translateX(0);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.preloader::before {
  left: 0;
}
.preloader::after {
  right: 0;
}

/* Inhalt (Logo/Spinner) sanft ausblenden */
.preloader .preloader__content {
  position: relative;
  z-index: var(--z-3);
  transition: opacity 0.3s ease;
}

/* Start der "Kino"-Öffnung */
.preloader.is-done {
  background-color: transparent;
} /* weiß → transparent */
.preloader.is-done .preloader__content {
  opacity: 0;
} /* Spinner/Logo raus */
.preloader.is-done::before {
  transform: translateX(-100%);
} /* Vorhang links auf */
.preloader.is-done::after {
  transform: translateX(100%);
} /* Vorhang rechts auf */

/* Finale Unsichtbarkeit / Interaktion wieder erlauben */
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Intense.css-Effekte im Preloader neutralisieren (kein !important nötig) */
.preloader img,
.preloader [data-no-intense],
.preloader .intense,
.preloader [data-action="zoom"] {
  pointer-events: none;
  transform: none;
  transition: none;
  filter: none;
  cursor: default;
}

/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .preloader,
  .preloader::before,
  .preloader::after,
  .preloader .preloader__content {
    transition: none;
  }
  .spinner-border {
    animation: none;
  }
}

/* ======================================================
   Header / Navbar (Bootstrap 5) – konsolidiert
   ====================================================== */

/* ---- Grundstruktur / Resets ------------------------- */
.page-header {
  --radius: 0;
}
.page-header,
.page-header .c-navbar,
.page-header .navbar,
.page-header .navbar-collapse,
.page-header .container-xxl {
  border-radius: 0;
}

.page-header.sticky-top {
  z-index: var(--z-sticky);
} /* über Content */

.c-navbar {
  position: relative;
  max-width: none;
  background-color: var(--surface-bg);
  border-radius: var(--radius-navbar);
}

/* Logo: responsiv, nicht gequetscht */
.c-brand-logo {
  display: block;
  height: auto;
  max-height: var(--logo-h-nav);
  width: auto;
}

/* ---- Navigation & CTAs (Desktop-Basis) -------------- */
.c-navbar .navbar-collapse {
  align-items: center;
  justify-content: center;
}

.c-navbar .c-navbar__group {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--nav-gap);
}

.c-navbar .navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}
.c-navbar .c-navbar__group > .d-flex {
  gap: var(--nav-gap);
}

.c-navbar .navbar-nav .nav-item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

/* Links */
.c-navbar .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  line-height: 1;
  padding: 0 var(--nav-link-px);
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  border: 0;
}
.c-navbar .nav-link:hover,
.c-navbar .nav-link:focus {
  color: var(--brand);
}

/* CTAs */
.c-navbar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  line-height: 1;
  padding: 0 var(--btn-lg-px);
  font-size: var(--btn-lg-font);
  border-style: solid;
  border-width: var(--btn-border-strong);
  border-radius: var(--radius-btn);
  margin-left: 0;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  box-sizing: border-box;
}
.c-navbar .btn.c-btn-outline-brand {
  background-color: var(--page-bg);
  color: var(--brand);
  border-color: var(--brand);
}
.c-navbar .btn.c-btn-outline-brand:hover,
.c-navbar .btn.c-btn-outline-brand:focus {
  background-color: var(--page-bg);
  color: var(--brand);
  border-color: var(--brand-hover);
}
.c-navbar .btn.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.c-navbar .btn.btn-primary:hover,
.c-navbar .btn.btn-primary:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--on-brand);
}

/* Fokus sichtbar */
.c-navbar .nav-link:focus-visible,
.c-navbar .btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Mobile: Layout + Overlay-Collapse --------------- */
@media (max-width: 991.98px) {
  /* Burger links – bereits durch Markup, hier nur spacing neutral */
  .navbar-toggler {
    border: 0;
  }

  /* Gruppe/Listen vertikal ausrichten */
  .c-navbar .c-navbar__group {
    flex-direction: column;
    align-items: flex-start;
  }
  .c-navbar .c-navbar__group > .d-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .c-navbar .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .c-navbar .nav-link,
  .c-navbar .btn {
    justify-content: flex-start;
    width: 100%;
  }

  /* Collapse als Overlay (nicht Content pushen) */
  .c-navbar .collapsing,
  .c-navbar .collapse.show {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--surface-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: var(--shadow-2);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    padding: 0.75rem var(--bs-gutter-x);
    z-index: var(--z-sticky);
  }
}

/* =========================
   SIDEBAR / 2-Spalten Account Layout — FINAL (konsolidiert)
   ========================= */

/* Stellschrauben */

/* Grid (Desktop): zwei Spalten, beide scrollen unabhängig */
.c-appLayout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: calc(100dvh - var(--header-h));
  overflow: hidden;
  background: var(--page-bg);
  position: relative;
}
.c-sidebar {
  background: var(--surface-bg);
  border-right: 1px solid var(--border-color);
  overflow: auto;
}
.c-sidebar.c-sidebar--muted {
  background: var(--sidebar-bg);
}
.c-main {
  overflow: auto;
  background: var(--page-bg);
}

/* Subheader (rechte Spalte, sticky) */
.c-subheader {
  position: sticky;
  top: 0;
  z-index: var(--z-1);
  background: var(--surface-bg);
}
.c-subheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}
.probe-hint {
  color: var(--brand);
  margin-left: 0.25rem;
}

/* Kopf + Toggle + Profil */
.c-sidebar__head {
  position: sticky;
  top: 0;
  /* z-index: var(--z-app-sidebar); */
  background: var(--surface-bg);
}
.c-sidebar__head > .d-flex {
  min-width: 0;
  flex: 1 1 auto;
}
.c-sidebar__profileDetails {
  min-width: 0;
}
.c-sidebar__hello,
.c-sidebar__email {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pfeil-Button: überall dezent & zentriert in der Box */
.c-sidebar__toggle {
  inline-size: var(--sidebar-toggle-size);
  block-size: var(--sidebar-toggle-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: var(--sp-2);

  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--surface-bg);
  color: var(--muted);
  box-shadow: var(--shadow-1);
}
.c-sidebar__toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.c-sidebar__toggle i {
  font-size: 0.875rem; /* dezent */
  line-height: 1;
}
.c-sidebar__toggle .fa-chevron-left {
  transition: transform 0.2s ease;
}

/* Avatar */
.c-sidebar__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Gruppen & Titel */
.c-sidebar__section {
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}
.c-sidebar__section + .c-sidebar__section {
  border-top: 1px solid var(--border-color);
}
.c-sidebar__title {
  color: var(--sidebar-title);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem 0;
}

/* Links */
.c-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: var(--sidebar-gap);
  padding: var(--sidebar-item-py) var(--sidebar-item-px);
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius);
  line-height: 1.25;
  font-size: var(--sidebar-fs);
}
.c-sidebar .nav-link i {
  font-size: var(--sidebar-icon-fs);
}
.c-sidebar .nav-link:hover,
.c-sidebar .nav-link:focus {
  background: var(--alt2-bg);
  color: var(--brand);
}

/* Aktiv: blau hinterlegt + linker Indikator */
.c-sidebar .nav-link.active {
  background: var(--alt1-bg);
  color: var(--brand);
  border-left: var(--btn-border-strong) solid var(--brand);
  padding-left: calc(var(--sidebar-item-px) - var(--btn-border-strong));
}

/* Logout leicht abtrennen */
.c-sidebar .nav-link[href*="/logout"] {
  margin-top: var(--sp-2);
  padding-top: calc(var(--sidebar-item-py) + 0.125rem);
  border-top: 1px solid var(--border-color);
}

/* Desktop collapsed: Icon-Rail */
.c-appLayout.is-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
.c-appLayout.is-collapsed .c-sidebar__avatar,
.c-appLayout.is-collapsed .c-sidebar__label,
.c-appLayout.is-collapsed .c-sidebar__title,
.c-appLayout.is-collapsed .c-sidebar__profileDetails {
  display: none;
}
.c-appLayout.is-collapsed .c-sidebar .nav-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.c-appLayout.is-collapsed .c-sidebar__toggle .fa-chevron-left {
  transform: rotate(180deg);
}

/* =========================================
   Mobile (<lg): Overlay ohne Quetschen + sichtbarer Griff
   ========================================= */
@media (max-width: 991.98px) {
  /* Content IMMER volle Breite – auch collapsed */
  .c-appLayout {
    grid-template-columns: 1fr;
    position: relative;
  }
  .c-appLayout.is-collapsed {
    grid-template-columns: 1fr;
  }

  /* Sidebar: Overlay-Panel unter dem Header, Breite am Inhalt */
  .c-sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: calc(100dvh - var(--header-h));
    width: max-content; /* an Inhalt orientiert */
    max-width: min(var(--sidebar-mobile-max-w), 100vw);
    overflow: auto;
    z-index: var(--z-app-sidebar);
    box-shadow: var(--shadow-2);
    transition: margin-left 0.2s ease; /* steuern über margin-left */
    margin-left: 0; /* geöffnet */
  }

  /* Collapsed: bis auf eine schmale „Rail“ links ins Off schieben */
  .c-appLayout.is-collapsed .c-sidebar {
    margin-left: calc(
      -1 * (min(var(--sidebar-mobile-max-w), 100vw) -
            var(--sidebar-mobile-toggle-w))
    );
  }

  /* Backdrop nur wenn offen */
  .c-appLayout:not(.is-collapsed)::after {
    content: "";
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--overlay-dim);
    z-index: var(--z-app-sidebar-backdrop);
  }

  /* In der sichtbaren Rail: nur den Toggle zeigen (zentriert in der Box) */
  .c-appLayout.is-collapsed .c-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Toggle links in der Rail */
    padding: 0;
    background: var(--surface-bg);
    border-right: 1px solid var(--border-color);
  }
  .c-appLayout.is-collapsed .c-sidebar__toggle {
    position: static; /* bleibt in der Rail */
    inline-size: var(--sidebar-mobile-toggle-w);
    block-size: var(--sidebar-mobile-toggle-w);
    margin: 0;
    /* gleiche dezente Optik wie überall */
    border: 1px solid var(--border-color);
    border-left: none; /* nahtlos an die Kante */
    background: var(--surface-bg);
    color: var(--muted);
    box-shadow: var(--shadow-1);
  }

  /* Floating-Lasche (außerhalb der Sidebar) – nur wenn collapsed */
  .c-sidebar-fab {
    position: fixed;
    left: 0;
    top: calc(var(--header-h) + 0.5rem);
    z-index: var(--z-app-fab);
    display: none;

    inline-size: var(--sidebar-mobile-tab-w);
    block-size: var(--sidebar-mobile-toggle-w);
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 0;
  }
  .c-sidebar-fab i {
    font-size: 0.875rem;
  }
  .c-sidebar-fab:hover {
    color: var(--brand);
  }

  /* Nur im eingeklappten Zustand zeigen + Content links etwas Luft */
  .c-appLayout.is-collapsed .c-sidebar-fab {
    display: inline-flex;
  }
  .c-appLayout.is-collapsed .c-main {
    padding-left: calc(var(--sidebar-mobile-tab-w) + 0.25rem);
  }

  /* Im offenen Zustand: Sidebar-Toggle normal, FAB ausgeblendet */
  .c-appLayout:not(.is-collapsed) .c-sidebar-fab {
    display: none;
  }
  .c-appLayout:not(.is-collapsed) .c-sidebar__head {
    padding-inline: var(--sp-2);
  }
  .c-appLayout:not(.is-collapsed) .c-sidebar__toggle {
    inline-size: var(--sidebar-toggle-size);
    block-size: var(--sidebar-toggle-size);
    margin-left: var(--sp-2);
  }
}

/* Sehr schmale Geräte – Icons/Schrift minimal kleiner */
@media (max-width: 375px) {
  .c-sidebar .nav-link {
    font-size: 0.875rem;
  }
  .c-sidebar .nav-link i {
    font-size: 0.9375rem;
  }
}

/* =============================
   Desktop collapsed: Pfeil oben nicht gequetscht, sauber mittig
   ============================= */
@media (min-width: 992px) {
  /* Profilblock im Header ausblenden (nur Pfeil zeigen) */
  .c-appLayout.is-collapsed .c-sidebar__head > .d-flex {
    display: none;
  }

  /* Header: mehr vertikale Luft + Pfeil mittig */
  .c-appLayout.is-collapsed .c-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-2);
    min-block-size: calc(var(--sidebar-toggle-size) + (2 * var(--sp-2)));
    border-right: 1px solid var(--border-color);
    background: var(--surface-bg);
  }

  /* Toggle ohne Versatz, zentriert */
  .c-appLayout.is-collapsed .c-sidebar__toggle {
    margin-left: 0;
    inline-size: var(--sidebar-toggle-size);
    block-size: var(--sidebar-toggle-size);
  }
}

/* Mobile-Backdrop: klick schließt Sidebar; liegt unter Header, unter der Sidebar */
.c-sidebar-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0; /* unterhalb des Headers */
  background: var(--overlay-dim);
  z-index: var(--z-app-sidebar-backdrop);
  display: none; /* nur mobil & offen */
}

/* nur mobil einblenden, wenn Sidebar offen ist */
@media (max-width: 991.98px) {
  .c-appLayout:not(.is-collapsed) .c-sidebar-backdrop {
    display: block;
  }
}

/* --------------------------------------------------
   LAYOUT UTILITIES
-------------------------------------------------- */
/* Beispiel – zentrierter Container, Schatten‑Card */
.u-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
}

/*  ------------------------------------------------------------------
    SECTION: COMPONENTS
    - navbar
    - sidebar
    - arrow-indicator
    ------------------------------------------------------------------ */

/* ▸ NAVBAR
   TODO: Schrittweise prüfen, ob Bootstrap‑Klassen (`navbar`, `navbar-expand‑lg`) 
   die Eigenlösung ersetzen können. */
.navbar {
  background: #fff;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ▸ SIDEBAR
   Behalten, bis Intense ersetzt wurde */
.sidebar {
  background: var(--background-color);
  box-shadow: var(--shadow-lg);
}

/* ▸ ARROW‑INDICATOR (neu, global) */
.arrow-indicator {
  font-size: 24px;
  color: #bbb;
  transition: color 0.3s ease, transform 0.3s ease;
}
.arrow-indicator.active {
  color: var(--bs-primary);
  transform: translateY(-2px);
}

/* --------------------------------------------------
   NEUAUFLAGE
-------------------------------------------------- */

/* --------------------------------------------------
   HERO‑BANNER  ▸ universal
   --------------------------------------------------
   Bild wird über die CSS‑Variable  --hero-img  gesetzt.
-------------------------------------------------- */
.hero-banner {
  --hero-img: none; /* Fallback */
  position: relative;
  padding: 7rem 0 6rem;
  background: var(--hero-img) center/cover no-repeat;
}

/* Weiße Overlay‑Folie  (Farbe & Deckkraft via CSS‑Var) */
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(
    --hero-overlay,
    rgba(0, 0, 0, 0.45)
  ); /* Standard: dunkel 45 % */
}

/* Text liegt über der Folie */
.hero-banner .container {
  position: relative;
}

.hero-eyebrow {
  letter-spacing: 0.05em;
} /* etwas Laufweite */

/* HERO SPACER  (Abstand vor 1. Section) */
.mt-hero {
  margin-top: var(--sp-5);
} /* ≈ 2 rem */

/* weißen Pfeil ▸ zwischen den Breadcrumb‑Items */
.breadcrumb-item + .breadcrumb-item::before {
  color: #fff; /* erbt nicht von .link-light */
}

/* --------------------------------------------------
   BENEFIT CARDS
-------------------------------------------------- */

.u-card-hover {
  position: relative;
  overflow: visible;
  flex: 1 1 auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.u-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/*  Icon‑Kreis – halb über Card  */
.u-icon-circle {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background: #fff;
  color: var(--bs-primary);
  font-size: 32px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(0, 0, 0, 0.05);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  transition: background 0.25s ease, color 0.25s ease;
}
.u-card-hover:hover .u-icon-circle {
  background: var(--bs-primary);
  color: #fff;
}

/*  Titel‑Abstand (unterhalb des Kreises)  */
.u-title {
  margin-top: 3rem;
  margin-bottom: 0.75rem;
} /* 40 px Abstand zum Kreis */

/* gleiche Titel-Höhe für alle Grundpfeiler */
.u-pillar-title {
  min-height: 3.25rem; /* an längstem Titel orientiert */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

/*  Reveal‑Text  */
.u-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.u-card-hover:hover .u-reveal {
  max-height: 220px;
  opacity: 1;
}

/*  Großzügiger Zeilen‑Abstand (falls g‑Gap nicht reicht, gy‑8 > 4rem)  */
@media (min-width: 768px) {
  .benefit-row {
    row-gap: 3rem;
  } /* zusätzlich zu gy-8 */
}

/* --------------------------------------------------
   CALL‑TO‑ACTION BUTTON ▸  dezente Variante
-------------------------------------------------- */

/* ===========================================
   CTA-Button: keine Transition-Shorthands,
   damit .u-anim (Transform/Opacity + Delays) nicht überschrieben wird
   =========================================== */

.btn-cta {
  line-height: 1.2;
  padding: 0.3rem 2rem; /* nur Tokens/Bootstrap-Variablen einsetzen */
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: none;
  background: var(--bs-primary);
  color: var(--on-brand);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  /* KEIN transition hier – sonst überschreibt es .u-anim */
}

/* Hover/Fokus: nur bei NICHT animierten CTAs Übergänge setzen */
.btn-cta:not(.u-anim) {
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.22s ease;
}
.btn-cta:hover,
.btn-cta:focus {
  background: rgba(var(--bs-primary-rgb), 0.9);
  box-shadow: var(--shadow-2);
}
.btn-cta:not(.u-anim):hover,
.btn-cta:not(.u-anim):focus-visible {
  transform: translateY(-0.125rem);
}

/* -------------------------------------------------
   Auth-UI: Scope gegen intense.css & mit Token-Nutzung
   ------------------------------------------------- */

/* Scope-Container */
.c-auth {
  background: var(--surface-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border-color);
}

/* Header im Brand-Look */
.c-auth > .card-header {
  background: var(--brand);
  color: var(--on-brand);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom: 1px solid var(--border-color);
}

/* Labels neutralisieren (kein Floating) */
.c-auth .form-label,
.c-auth label {
  position: static;
  transform: none;
  float: none;
  display: inline-block;
  color: var(--text);
  opacity: 1;
  visibility: visible;
  transition: none;
  font-size: 1rem;
  font-weight: 600;
}

/* Fokus innerhalb Gruppe blendet Label nicht aus */
.c-auth
  :is(
    .mb-2,
    .mb-3,
    .mb-4,
    .form-group,
    .c-auth__inputGroup,
    .input-group
  ):focus-within
  > .form-label {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Inputs */
.c-auth .form-control {
  background: var(--surface-bg);
  color: var(--text);
  border-color: var(--border-color);
  font-size: 1rem;
}
.c-auth .form-control:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring-primary);
  outline: 0;
}

/* Input-Addon */
.c-auth .input-group-text {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

/* Links im Auth-Scope */
.c-auth .link-primary {
  color: var(--brand);
}
.c-auth .link-primary:hover,
.c-auth .link-primary:focus {
  color: var(--brand-hover);
}

/* Alerts */
.c-auth .alert {
  border-color: var(--border-color);
  box-shadow: var(--shadow-1);
}

/* Buttons (ein Regelblock reicht – deckt auch Fälle ohne .btn ab) */
.c-auth :is(.btn, .btn-primary, .btn-outline-primary) {
  /* visuelle Konsistenz */
  --bs-btn-border-radius: var(--radius);
  font-size: var(--btn-font-size-lg);
  padding-top: var(--btn-padding-y-lg);
  padding-bottom: var(--btn-padding-y-lg);

  border-radius: var(--radius);
  box-shadow: var(--shadow-1);

  /* zentriert + max Breite */
  display: block;
  width: 100%;
  max-width: var(--btn-max-width);
  margin-left: auto;
  margin-right: auto;

  text-transform: none;
  letter-spacing: normal;
}
.c-auth :is(.btn, .btn-primary, .btn-outline-primary):hover {
  box-shadow: var(--shadow-2);
}
.c-auth :is(.btn, .btn-primary, .btn-outline-primary):focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring-primary);
}

/* Varianten */
.c-auth .btn.btn-primary {
  --bs-btn-color: var(--on-brand);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: var(--on-brand);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--brand) 60%, white);
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand) 60%, white);

  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.c-auth .btn.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-color: color-mix(in srgb, var(--brand) 60%, white);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--brand) 60%, white);

  color: var(--bs-btn-color);
  background-color: transparent;
  border-color: var(--bs-btn-border-color);
}

/* Utility: extra-klein (für "Passwort vergessen") */
.c-auth .u-text-xs {
  font-size: var(--fs-xs);
  line-height: 1.2;
}

/* --------------------------------------------------
   FAQ ▸ blauer Pfeil + Fade (konsolidiert)
   – Surface bleibt weiß, Abschnittshintergrund via .section--alt/--muted
   – Icon-Größe komponentenlokal per CSS-Var
-------------------------------------------------- */

.faq-item {
  /* Komponenten-Variable: deutlich größer als Text */
  --faq-icon-size: calc(var(--bs-body-font-size) * 2);

  /* Surface-Look */
  background-color: var(--surface-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.faq-summary {
  position: relative;
  /* Platz für den größeren Pfeil rechts */
  padding-right: calc(var(--faq-icon-size) + var(--bs-body-font-size));
  list-style: none;
  cursor: pointer;
}

/* Standard-Marker ausblenden */
.faq-summary::-webkit-details-marker,
.faq-summary::marker {
  display: none;
}

/* Pfeil rechts (▸), deutlich größer */
.faq-summary::before {
  content: "▸";
  font-size: var(--faq-icon-size);
  line-height: 1;
  color: var(--bs-primary);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* Rotation bei geöffnetem Item */
.faq-item[open] > .faq-summary::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Fade-In des Inhalts */
.faq-item[open] > div {
  animation: fade 0.25s ease;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------
   Themen‑Navigation ▸ große Kreis‑Icons
-------------------------------------------------- */
/* --------------------------------------------------
   ICON GRID ▸ Themennavigation
-------------------------------------------------- */
/* Icon‑Grid – alle Kacheln exakt zentriert */
.icon-grid {
  gap: 2rem;
} /* Abstand zwischen Tiles */

.icon-tile {
  display: block; /* Block = voller Kachelrahmen  */
  width: 110px;
  text-align: center; /* Label zentriert              */
  text-decoration: none;
}

.icon-round {
  width: 4.5rem;
  height: 4.5rem; /* 72 px Kreis   */
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.25s ease, transform 0.25s ease;
  margin: 0 auto;
}

/* Icon‑Label wirklich zentrieren */
.icon-text {
  display: block; /*  NEU  – nimmt volle Kachelbreite ein  */
  width: 100%; /*  NEU  – so verteilt sich der Text gleichmäßig */
  font-weight: 500;
  color: #333;
  font-size: 1rem;
  text-align: center; /* belasse Zentrierung */
  transition: color 0.25s ease;
}

.icon-tile:hover .icon-round {
  background: rgba(var(--bs-primary-rgb), 0.85);
  transform: translateY(-4px);
}
.icon-tile:hover .icon-text {
  color: var(--bs-primary);
}

/*  Unterstreichung für die Kachel komplett abschalten */
.icon-tile,
.icon-tile:hover,
.icon-tile:focus {
  text-decoration: none !important;
}

/* ──────────────────────────────────────────────────────────────
   c-slider (global): ruhiger 1-Step Slider (Bootstrap-Optik)
   – overflow-safe, kein Fade, einheitliche Abstände
   ──────────────────────────────────────────────────────────── */

.c-slider {
  --ipv: 1; /* wird per JS auf 1/2/3/4 gesetzt */
  position: relative;
  overflow-x: hidden; /* verhindert horizontales Page-Scroll */
  overscroll-behavior-x: contain;
}

.c-slider .carousel-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / var(--ipv));
  gap: 0; /* kein grid-gap → verhindert Rand-Abschneiden */
  transition: transform 0.35s ease;
  will-change: transform;
  touch-action: pan-y; /* horizontale Wischgeste im Slider halten */
  overflow: visible;
}

.c-slider .carousel-item {
  display: block;
  box-sizing: border-box;
  padding-inline: calc(var(--sp-3) / 2); /* Abstand zwischen Kacheln */
  opacity: 1; /* kein Fade */
}

/* Dots (Indikatoren) */
.c-slider .c-dots.d-none {
  display: none;
}
.c-slider .c-dots > button {
  width: var(--dot-size);
  height: var(--dot-size);
  border: 0;
  border-radius: 50%;
  background-color: var(--dot-color);
  opacity: var(--dot-opacity);
  margin: 0 var(--dot-gap);
}
.c-slider .c-dots > button.active {
  background-color: var(--dot-color-active);
  opacity: var(--dot-opacity-active);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .c-slider .carousel-inner {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   Timeline Steps (generisch wiederverwendbar)
   ──────────────────────────────────────────────────────────── */
.c-step {
  text-align: left;
  padding: 0;
  overflow: visible;
}
.c-step__eyebrow {
  letter-spacing: 0.02em;
}
.c-step__rule {
  position: relative;
  display: block;
  border-top: var(--rule-thickness) solid var(--rule-color);
  margin-bottom: var(--rule-space);
}
.c-step__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--brand);
  transform: translate(-50%, calc(-50% + var(--rule-thickness) / 2));
}
.c-step h3,
.c-step p {
  overflow-wrap: anywhere;
}

/* ──────────────────────────────────────────────────────────────
   Lehrer-Slider (Cards) – baut auf .c-slider auf
   ──────────────────────────────────────────────────────────── */
.c-teacher {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bild kleiner & einheitlich */
.c-teacher__media {
  position: relative;
  aspect-ratio: 4 / 3; /* konstante Höhe unabhängig vom Bild */
  max-height: clamp(120px, 26vw, 180px);
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.c-teacher__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inhalt */
.c-teacher__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 0.5rem);
  padding: var(--sp-3);
}
.c-teacher__meta {
  margin-bottom: var(--sp-1, 0.25rem);
}
.c-teacher__name {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
.c-teacher__name a {
  color: var(--brand);
  text-decoration: none;
}
.c-teacher__name a:hover,
.c-teacher__name a:focus {
  text-decoration: underline;
}
.c-teacher__subjects {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.c-teacher__subjects span {
  color: inherit;
}

/* Bio: 4 Zeilen + Fade; „Mehr“ klappt auf */
.c-teacher__bio {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.c-teacher__bio::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2.2em;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.c-teacher.is-expanded .c-teacher__bio {
  -webkit-line-clamp: unset;
}
.c-teacher.is-expanded .c-teacher__bio::after {
  display: none;
}

/* Kein Bio: subtil */
.c-teacher__bio--empty {
  color: var(--muted);
  opacity: 0.5;
  text-align: left;
  min-height: 1rem;
}
.c-teacher--nobio .c-teacher__bio--empty {
  margin-top: 0.125rem;
}

/* „Mehr“-Link */
.c-teacher__actions {
  margin-top: auto;
}

/* ▸ Eigener, intens-unabhängiger „Mehr“-Button */
.c-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit; /* gleiche Schrift wie im Card-Text */
  font-size: 0.875rem; /* etwas kleiner */
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.c-more:hover,
.c-more:focus {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.c-more:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Platzhalter / Skeleton */
.c-skeleton {
  background: var(--gray-100, rgba(0, 0, 0, 0.06));
  border-radius: 0.5rem;
}
.c-skeleton--media {
  display: block;
  width: 100%;
  height: 100%;
}
.c-skeleton--text {
  height: 1rem;
  margin: 0.5rem 0;
}

/* ================================
   HERO / Carousel (Bootstrap 5)
   ================================ */

/* ----------------
   Grundlayout
------------------*/
.c-hero {
  overflow: hidden;
}

.c-hero .carousel-item {
  min-height: var(--hero-height);
  background: var(--page-bg);
}

.c-hero__img {
  height: var(--hero-height);
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(var(--hero-warmth)) saturate(var(--hero-saturation))
    brightness(var(--hero-brightness)) hue-rotate(var(--hero-hue));
  transition: filter 300ms ease;
}

/* Caption + Overlay */
.c-hero__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.c-hero__caption .container {
  position: relative;
  z-index: var(--z-1);
}
.c-hero__caption::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--overlay-dark) 0%, transparent 60%);
}
/* Textblock clippt die Einfahr-Animation exakt am späteren Textbeginn */
.c-hero__text {
  overflow: hidden;
}

/* Schrift im Hero immer hell */
.c-hero__caption :where(h1, h2, h3, h4, h5, h6, p, small, span, a, strong, em) {
  color: var(--on-brand);
}

/* ----------------
   Indicators
------------------*/
.c-hero .carousel-indicators {
  margin-bottom: var(--indicator-offset);
}
.c-hero .carousel-indicators [data-bs-target] {
  position: relative;
  width: var(--hero-indicator-size);
  height: var(--hero-indicator-size);
  border-radius: 50%;
  border: var(--indicator-border-width) solid var(--indicator-ring);
  background: transparent;
  opacity: 1;
}
.c-hero .carousel-indicators [data-bs-target]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--hero-indicator-dot);
  height: var(--hero-indicator-dot);
  border-radius: 50%;
  background: var(--page-bg);
}
.c-hero .carousel-indicators .active::after {
  background: var(--brand);
}

/* =================================
   Animation Utilities (schlank)
====================================*/
.u-anim {
  opacity: 0;
  transition: transform var(--anim-duration) var(--anim-ease),
    opacity var(--anim-duration) var(--anim-ease);
  will-change: transform, opacity;
}

/* Richtungen (setzen Start-Transform + Variablen für Keyframe) */
.u-from-left {
  --from-x: calc(-1 * var(--text-slide-distance-x));
  --from-y: 0;
  transform: translateX(calc(-1 * var(--text-slide-distance-x)));
}
.u-from-right {
  --from-x: var(--text-slide-distance-x);
  --from-y: 0;
  transform: translateX(var(--text-slide-distance-x));
}
.u-from-up {
  --from-x: 0;
  --from-y: calc(-1 * var(--text-slide-distance-y));
  transform: translateY(calc(-1 * var(--text-slide-distance-y)));
}
.u-from-down {
  --from-x: 0;
  --from-y: var(--text-slide-distance-y);
  transform: translateY(var(--text-slide-distance-y));
}
.u-fade {
  --from-x: 0;
  --from-y: 0;
  transform: none;
}

/* CTA – einheitlich von unten */
.u-cta {
  --from-x: 0;
  --from-y: var(--cta-offset);
  transform: translateY(var(--cta-offset));
}

/* Staffelung */
.u-delay-300 {
  transition-delay: var(--anim-delay-1);
  animation-delay: var(--anim-delay-1);
}
.u-delay-600 {
  transition-delay: var(--anim-delay-2);
  animation-delay: var(--anim-delay-2);
}
.u-delay-cta {
  transition-delay: var(--anim-delay-cta);
  animation-delay: var(--anim-delay-cta);
}

/* Aktiv-Zustand (Transition-Ziel) – für alle Slides */
.c-hero .carousel-item.active .u-anim {
  transform: none;
  opacity: 1;
}

/* Nur für die ERSTE aktive Slide: Keyframe-Intro
   (Longhands + fill-mode: both -> .u-delay-* greift, Start bleibt bis dahin "off") */
.c-hero .carousel-inner > .carousel-item:first-child.active .u-anim {
  animation-name: heroIn;
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--anim-ease);
  animation-fill-mode: both; /* backwards + forwards */
}

/* Reduced Motion – auch die erste Slide ohne Animation */
@media (prefers-reduced-motion: reduce) {
  .u-anim,
  .c-hero .carousel-item.active .u-anim,
  .c-hero .carousel-inner > .carousel-item:first-child.active .u-anim {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------------
   Slide statt Fade (scoped auf .c-hero)
-----------------------------------------*/
/* Fading aus, Slide via Transform an – selbst wenn .carousel-fade gesetzt ist */
.c-hero.carousel-fade .carousel-item {
  opacity: 1;
  transition: transform var(--hero-slide-duration) var(--hero-slide-ease);
}

/* Bootstrap-5 Slide-States (nur Hero) */
.c-hero .carousel-item {
  display: none;
}
.c-hero .carousel-item.active,
.c-hero .carousel-item-next,
.c-hero .carousel-item-prev {
  display: block;
}

.c-hero .carousel-item-next:not(.carousel-item-start),
.c-hero .active.carousel-item-end {
  transform: translateX(100%);
}

.c-hero .carousel-item-prev:not(.carousel-item-end),
.c-hero .active.carousel-item-start {
  transform: translateX(-100%);
}

.c-hero .carousel-item-next.carousel-item-start,
.c-hero .carousel-item-prev.carousel-item-end {
  transform: translateX(0);
}

/* Optional: Bilder leicht mitschwenken für mehr Dynamik */
.c-hero .carousel-item img {
  transition: transform var(--hero-slide-duration) var(--hero-slide-ease);
}
.c-hero .carousel-item-start.active img {
  transform: translateX(-2%);
}
.c-hero .carousel-item-end.active img {
  transform: translateX(2%);
}

/* ----------------
   Keyframes
------------------*/
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0));
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* =========================================
   Registrierung als Lehrer-Bewerber
   ========================================= */

/* Fallback, falls style.css nicht mehr geladen wird */
.c-auth .hidden {
  display: none;
}
/* Kleine Zwischen-Überschriften innerhalb von Formular-Sektionen */
.c-subheading {
  font-weight: 600;
  font-size: 0.875rem; /* ≈ .text-sm */
  color: var(--muted); /* Token */
}

/* global – reicht überall */
.c-selectTrigger {
  background: var(--surface-bg);
  color: var(--text);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  min-height: calc(2.625rem + 2px);
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
}
.c-selectTrigger:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
  border-color: var(--brand);
}

/* eine gemeinsame Liste */
.c-selectList {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin-top: 0.25rem;
  list-style: none;
  padding: 0;
  max-height: 16rem;
  overflow: auto;
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  z-index: var(--z-dropdown);
}
.c-selectList .autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--text);
}
.c-selectList .autocomplete-item:hover,
.c-selectList .autocomplete-item:focus {
  background: var(--alt2-bg);
}

/* NUR wenn du im Auth-Bereich etwas wirklich abweichend brauchst: */
.c-auth .c-selectList {
  /* z. B. andere max-height o. spacing */
}
/* Fallbacks kannst du lassen: */
.c-auth .hidden {
  display: none;
}

/* Utility für JS-Kompatibilität (ersetzt Inline display:none) */
.hidden {
  display: none;
}

/* =========================================
   Buchungsprozess – Layout-Tuning
   - Stepper: vertikale Pfeile mobil, zentriert
   - Card/Spalten: mehr Breite nutzen
   - Fächer: Flex-Wrap + feste Kachelbreite (kein Überlaufen)
   - Lehrkräfte: weniger Spalten bei md/lg; Karten entspannter
   - Modals: breiter/länger (Teacher + Kalender)
   ========================================= */

/* ▸ Stepper: Pfeile auch mobil – dann vertikal und rotiert */
@media (max-width: 575.98px) {
  .c-stepper__sep {
    display: block; /* mobil sichtbar */
    transform: rotate(90deg); /* aus → wird ↓ */
    margin: 0.25rem 0; /* vertikaler Abstand */
  }
}

/* Step-Überschriften in der Card mittig + dezente Linie */
.contentContainer > section > header > h2,
.contentContainer > section > h2 {
  text-align: center;
  font-weight: 600;
  color: var(--text);
  position: relative;
}
.contentContainer > section > header > h2::after,
.contentContainer > section > h2::after {
  content: "";
  display: block;
  inline-size: 4.5rem; /* kurze Linie unter der Überschrift */
  block-size: 0.125rem; /* ~2px, dezent */
  margin: 0.5rem auto 0;
  background: var(--border-color);
  border-radius: var(--radius);
}

/* ▸ Fächer-Container: echtes Wrap innerhalb der Card,
      alle Kacheln gleich groß, keine „über den Rand“ Effekte */
.c-subjects-grid {
  /* wichtig: JS erwartet .d-flex – wir konfigurieren Flex korrekt */
  flex-wrap: wrap;
}
.c-subjects-grid .fach-btn {
  flex: 0 0 var(--subjects-col); /* fixe Breite je Button */
  max-inline-size: var(--subjects-col);
  inline-size: var(--subjects-col);
  border-radius: var(--radius);
}

/* ▸ Lehrkräfte-Karten: etwas luftiger, Bilder konsistent, Karten füllen Spaltenhöhe */
.js-teachers .row {
  /* g-4 ist im HTML gesetzt; hier nur sicherstellen, dass Karten gleich hoch sind */
}
.js-teachers .card {
  height: 100%;
  box-shadow: var(--shadow-1);
  border-radius: var(--radius);
}
.js-teachers .card .card-img-top {
  aspect-ratio: 4 / 3; /* weniger „hoch“ als 1:1, wirkt luftiger */
  object-fit: cover;
  inline-size: 100%;
}

/* ▸ Teacher-Buttons dezenter (beibehalten) */
.js-teachers .js-teacher-details.btn {
  --bs-btn-padding-y: var(--control-py-sm);
  --bs-btn-padding-x: var(--control-px-sm);
  --bs-btn-border-width: 0;
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-color: var(--muted);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* ====== Lehrkraft-Modal: nur Header-Layout & Avatar-Größe ====== */
#teacherInfoModal .u-avatar-sm {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  object-fit: cover;
}

/* Optional: engerer Header-Look */
#teacherInfoModal .modal-title {
  line-height: 1.2;
}

/* Breite/Höhe bleiben „vanilla“ – gesteuert von deinen globalen Tokens:
   --modal-mobile-w / --modal-desktop-w / --modal-max-block, etc.
   (Durch .modal-dialog-scrollable ist NUR der Body scrollbar; Header/Footer bleiben fix.) */

/* Abschluss-Schritt: Bestätigung & Button mittig ausrichten */
#summaryContent .row {
  justify-content: center; /* Summary-Box mittig in der Zeile */
}
#summaryContent .mt-3 {
  display: flex;
  justify-content: center; /* Bestätigungs-Button mittig */
}

/* =========================================
   Kalender (c-cal): Toolbar, Sticky Day-Header, Mobile-Collapse
   – nutzt ausschließlich Design-Tokens / Bootstrap-Mapping
   ========================================= */

/* Neue/ergänzende Tokens (zentral anpassbar) */
:root {
  --cal-icon-size: 2.25rem; /* einheitliche Icon-Button-Größe */
  --cal-sticky-offset: 0px; /* wird per JS auf die Höhe der Toolbar gesetzt */
}

/* Icon-only Buttons: ohne Rahmen, großer Klickbereich, sichtbarer Fokus */
.c-iconbtn {
  inline-size: var(--cal-icon-size);
  block-size: var(--cal-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  text-decoration: none;
}
.c-iconbtn:hover,
.c-iconbtn:focus {
  color: var(--brand);
}
.c-iconbtn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.c-iconbtn[disabled],
.c-iconbtn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Kalender – lokaler Stacking-Context, damit kleine z-index reichen */
.c-cal {
  position: relative;
  isolation: isolate; /* eigener Stack – verhindert "globales" Überdecken */
  --cal-z-bar: 2; /* Toolbar (Wochenwechsel) über den Slots */
  --cal-z-dayhead: 1; /* Day-Header knapp darunter */
}

/* Wochenwechsel/Toolbar sticky (nur innerhalb der .c-cal scrollenden Umgebung) */
.c-calbar {
  position: sticky;
  top: 0; /* klebt am oberen Rand des Scroll-Containers (Modal-Body) */
  z-index: var(--cal-z-bar);
  background: var(--surface-bg); /* deckt Inhalte beim Scrollen ab */
  border-bottom: 1px solid var(--border-color);
}

/* Day-Header: bleiben unter der Toolbar sticky
   Dein JS setzt --cal-sticky-offset auf die Toolbar-Höhe → top passt dynamisch. */
.c-calday__head {
  position: sticky;
  top: var(--cal-sticky-offset);
  z-index: var(--cal-z-dayhead);
  background: var(--surface-bg);
  border-color: var(--border-color);
}

/* Mobile: Day-Header als Toggle für Slots */
.c-daytoggle {
  color: var(--text);
  text-decoration: none;
}
.c-daytoggle:hover,
.c-daytoggle:focus {
  color: var(--brand);
}
.c-daytoggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Pfeil-Icon klappt mit auf/zu */
.c-daytoggle .fa-chevron-down {
  transition: transform 120ms linear;
}
.c-daytoggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}