/* ####### Motorboot-Führerscheine-Mühldorf CSSW ####### */

:root {
  /* Basis — aus dem Logo */
  --mfm-navy-900: #1e2547;
  --mfm-navy-800: #2a3260;
  --mfm-navy-700: #38406f;
  --mfm-petrol-700: #2f5666;
  --mfm-petrol-600: #3d6a80;
  --mfm-petrol-500: #4f7f95;
  --mfm-gold-600: #a8922f;
  --mfm-gold-500: #c0a83e;
  --mfm-gold-400: #d4c26a;

  /* Maritime Ergänzung */
  --mfm-wave-100: #e8eef2;
  --mfm-wave-200: #d4e0e7;
  --mfm-wave-300: #b3c8d3;
  --mfm-sea-400: #7ea3b5;
  --mfm-foam-0: #fbfcfd;

  /* Neutrale */
  --mfm-ink-900: #16192b;
  --mfm-ink-600: #4a5065;
  --mfm-ink-400: #8189a0;
  --mfm-line-200: #dce2e8;

  /* Flächen */
  --surface-page: var(--mfm-foam-0);
  --surface-card: #ffffff;
  --surface-raised: var(--mfm-wave-100);
  --surface-inverse: var(--mfm-navy-800);
  --surface-inverse-deep: var(--mfm-navy-900);

  /* Text */
  --text-heading: var(--mfm-navy-800);
  --text-body: var(--mfm-ink-600);
  --text-muted: var(--mfm-ink-400);
  --text-on-inverse: #f2f5f8;
  --text-on-inverse-muted: #b8c3d4;
  --text-accent: var(--mfm-petrol-600);

  /* Interaktion */
  --action-primary: var(--mfm-navy-900);
  --action-primary-hover: var(--mfm-petrol-700);
  --action-secondary: var(--mfm-navy-800);
  --accent-gold: var(--mfm-gold-500);
  --accent-gold-hover: var(--mfm-gold-600);
  --focus-ring: rgba(61, 106, 128, 0.35);
  --focus-ring-rgb: 61, 106, 128;

  /* Status */
  --status-success: #2e7d5b;
  --status-warning: #a8922f;

  --border-default: var(--mfm-line-200);
  --border-strong: var(--mfm-wave-300);

  /* Typografie */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 58px;
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-wide: 0.14em;

  /* Abstände / Radien / Schatten */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(30, 37, 71, 0.08), 0 6px 18px rgba(30, 37, 71, 0.07);
  --shadow-raised: 0 10px 32px rgba(30, 37, 71, 0.16);
  --container-max: 1120px;

  /* ---- Bootstrap-Variablen an das Theme anpassen ---- */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-md);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--text-body);
  --bs-body-bg: var(--surface-page);
  --bs-link-color: var(--text-accent);
  --bs-link-hover-color: var(--mfm-navy-800);
  --bs-border-color: var(--border-default);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-gutter-x: 1.5rem;
}

/* ---
Dient dazu den Badge-Button "Featured" aauf der Startseite abzuschalten.
--- */
.article-details .featured-article-badge {
  display: none;
}


#sp-main-body {
  padding: 50px 0;
}

/* =========================================================
   2. Basis / Reset
   ========================================================= */
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
}

.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-gold);
  font-weight: 600;
}
.eyebrow--petrol { color: var(--text-accent); }
.eyebrow--gold-light { color: var(--mfm-gold-400); }

.muted-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 18px 0 0;
}

/* =========================================================
   3. Keyframes
   ========================================================= */
@keyframes mfmWater {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes mfmFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mfm-blurIn {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

/* Scroll-reveal for <section> elements, toggled by js/intersection-observer.js */
.mfm-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.mfm-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mfm-reveal {
    transition: none;
  }
}

/* =========================================================
   4. Buttons (Bootstrap-Variablen pro Variante überschrieben)
   ========================================================= */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mfm-navy-900);
  --bs-btn-border-color: var(--mfm-navy-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--action-primary-hover);
  --bs-btn-hover-border-color: var(--action-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--action-primary-hover);
  --bs-btn-active-border-color: var(--action-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--focus-ring-rgb);
  padding: 0.2rem 0.55rem;
  /* templates/css/presets/preset1.css setzt .btn-primary fest auf #0345BF (background-color/
     border-color als literale Werte statt über --bs-btn-bg) - das schlägt unsere Variable
     oben, da preset1.css nach Bootstrap aber vor dieser Datei geladen wird. Deshalb hier
     zusätzlich fest überschreiben. */
  background-color: var(--mfm-navy-900);
  border-color: var(--mfm-navy-900);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
}

.btn-button{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mfm-navy-900);
  --bs-btn-border-color: var(--mfm-navy-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--action-primary-hover);
  --bs-btn-hover-border-color: var(--action-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--action-primary-hover);
  --bs-btn-active-border-color: var(--action-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--focus-ring-rgb);
  padding: 0.2rem 0.55rem;
}

/* Sea / Hellblau (ersetzt die frühere Gold-Fläche) */
.btn-sea {
  --bs-btn-color: var(--mfm-navy-900);
  --bs-btn-bg: var(--mfm-wave-300);
  --bs-btn-border-color: var(--mfm-wave-300);
  --bs-btn-hover-color: var(--mfm-navy-900);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.9);
  --bs-btn-hover-border-color: var(--mfm-wave-400);
  --bs-btn-active-color: var(--mfm-navy-900);
  --bs-btn-active-bg: var(--mfm-wave-400);
  --bs-btn-active-border-color: var(--mfm-wave-300);
  --bs-btn-focus-shadow-rgb: var(--focus-ring-rgb);
}

/* Auf dunklen Flächen */
.btn-on-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
  --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);
}

.text-link {
  font-weight: 600;
  color: var(--text-accent);
  text-decoration: none;
}
.text-link:hover, .text-link:focus { color: var(--mfm-navy-800); text-decoration: none; }

/* =========================================================
   5. Header / Navigation (Helix Ultimate)
   ========================================================= */
#sp-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(251, 252, 253, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-default);
  transition: height 200ms ease, box-shadow 200ms ease;
}
#sp-header.header-sticky { height: 72px; box-shadow: var(--shadow-card); }
#sp-header .container-inner { padding-top: 10px; padding-bottom: 10px; transition: padding 200ms ease; }
#sp-header.header-sticky .container-inner { padding-top: 0; padding-bottom: 0; }

/* Template setzt auf ".logo" (nicht nur auf das Bild) eine feste Höhe (--header_height,
   hier 140px) - die muss im Sticky-Zustand mitschrumpfen, sonst bleibt Leerraum
   über/unter Logo und Menü stehen. */
#sp-header #sp-logo .logo { transition: height 200ms ease; }
#sp-header.header-sticky #sp-logo .logo { height: 72px; }

#sp-logo .logo-image { height: 88px; width: auto; transition: height 200ms ease; }
#sp-header.header-sticky #sp-logo .logo-image { height: 48px; }

/* Burger-Icon (#offcanvas-toggler) hat auf Mobile eine feste Höhe/Line-Height von
   $header_height_sm (120px, siehe responsive.scss), die im Sticky-Zustand nicht mit der
   auf 72px geschrumpften Headerhöhe mitschrumpft - dadurch sitzt das Icon nicht mehr
   vertikal mittig. */
#sp-header.header-sticky #offcanvas-toggler { height: 72px; line-height: 72px; }

#sp-menu .sp-megamenu-parent { align-items: center; }
#sp-menu .sp-megamenu-parent > li.sp-menu-item { vertical-align: middle; }

#sp-menu .sp-megamenu-parent > li.sp-menu-item > a,
#sp-menu .sp-megamenu-parent > li.sp-menu-item > span {
  position: relative;
  display: inline-block;
  line-height: normal;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  color: var(--text-body);
  transition: color 140ms ease;
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--mfm-navy-900);
  transform: translateX(-50%) scaleX(0);
  transition: transform 220ms ease;
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item:hover > a { color: var(--mfm-navy-800); }
#sp-menu .sp-megamenu-parent > li.sp-menu-item:hover > a::after { transform: translateX(-50%) scaleX(1); }

#sp-menu .sp-megamenu-parent > li.sp-menu-item.active > a,
#sp-menu .sp-megamenu-parent > li.sp-menu-item.current > a {
  color: var(--mfm-navy-800);
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item.active > a::after,
#sp-menu .sp-megamenu-parent > li.sp-menu-item.current > a::after {
  background: var(--accent-gold);
  transform: translateX(-50%) scaleX(1);
}

/* Staggernde Eintritts-Animation für die Desktop-Hauptnavigation (nicht im Offcanvas-Modus -
   dort ist .sp-megamenu-parent per d-lg-block ausgeblendet und bleibt unberührt). Wird von
   js/intersection-observer.js getriggert: Klasse "is-visible" auf dem <ul>, je Menüpunkt ein
   individuelles transition-delay (per JS gesetzt). */
#sp-menu .sp-megamenu-parent > li.sp-menu-item {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 550ms ease, transform 550ms ease;
}
#sp-menu .sp-megamenu-parent.is-visible > li.sp-menu-item {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #sp-menu .sp-megamenu-parent > li.sp-menu-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Menüpunkte als Button (z.B. "Kursanmeldung", "Login") - über die Anchor-CSS-Klasse
   "btn btn-button" pro Menüpunkt gesetzt (Menü-Item-Einstellungen in Joomla) */
#sp-menu .sp-megamenu-parent > li.sp-menu-item > a.btn {
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  color: var(--bs-btn-color);
  font-size: 14px;
  line-height: 1.5;
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item > a.btn::after { content: none; }
#sp-menu .sp-megamenu-parent > li.sp-menu-item:hover > a.btn,
#sp-menu .sp-megamenu-parent > li.sp-menu-item.active > a.btn,
#sp-menu .sp-megamenu-parent > li.sp-menu-item.current > a.btn {
  color: var(--bs-btn-hover-color, #fff);
}

/* Burger-Icon (Offcanvas-Toggler) an das Farbschema angleichen */
#sp-header .burger-icon span { background-color: var(--mfm-navy-800); }
#sp-header .offcanvas-toggler-custom:hover .burger-icon span,
#sp-header .offcanvas-toggler-secondary:hover .burger-icon span { background-color: var(--mfm-navy-900); }

/* CTA-Button-Menüpunkt ("Jetzt anmelden") - wie btn.btn-primary.btn-sm im Original.
   Wird automatisch auf den letzten Menüpunkt der Hauptnavigation angewendet,
   keine zusätzliche CSS-Klasse in der Joomla-Menüverwaltung nötig. */
#sp-menu .sp-megamenu-parent > li.sp-menu-item:last-child > a {
  display: inline-block;
  margin-left: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  padding: 4px 8px;
  background: var(--action-primary);
  border: 1px solid var(--action-primary);
  border-radius: var(--radius-sm);
  color: #fff;
  white-space: nowrap;
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item:last-child > a:hover,
#sp-menu .sp-megamenu-parent > li.sp-menu-item:last-child > a:focus {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
}
#sp-menu .sp-megamenu-parent > li.sp-menu-item:last-child > a::after { display: none; }

/* --- Offcanvas-Navigation (mobiles Menü) - gleiche Optik wie die Desktop-Navigation --- */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 4px;
  color: var(--mfm-navy-800);
  /* Template setzt hier standardmäßig opacity:0.7 (siehe offcanvas.scss) und hellt erst
     bei :hover auf 1 auf - dadurch wirkten die Menüpunkte im Ruhezustand blass/verwaschen. */
  opacity: 1;
  border-bottom: 1px solid var(--border-default);
  border-left: 3px solid transparent;
  transition: color 140ms ease, border-color 140ms ease, padding-left 140ms ease;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:focus {
  color: var(--mfm-navy-800);
  border-left-color: var(--mfm-wave-300);
  padding-left: 12px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.current > a,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
  color: var(--mfm-navy-800);
  border-left-color: var(--accent-gold);
  padding-left: 12px;
}

/* Letzter Menüpunkt ("Jetzt anmelden") auch hier als Button */
.offcanvas-menu .offcanvas-inner ul.menu > li:last-child {
  border-bottom: none;
  margin-top: 10px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li:last-child > a {
  display: inline-block;
  border: 1px solid var(--action-primary);
  border-radius: var(--radius-sm);
  background: var(--action-primary);
  color: #fff;
  padding: 8px 16px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li:last-child > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li:last-child > a:focus {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: #fff;
  padding-left: 16px;
}

/* =========================================================
   6. Seiten / Sektionen
   ========================================================= */
/* --- Hero --- */
.hero-variant { display: none; }
.hero-variant.is-active { display: block; }

.hero-a {
  position: relative;
  margin: 0;
}
.hero-a__panel {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(120deg, #1e2547, #2a3260 40%, #3d6a80 100%);
  background-size: 200% 200%;
  animation: mfmWater 18s ease infinite;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-a__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,37,71,0.15) 0%, rgba(30,37,71,0.35) 45%, rgba(30,37,71,0.82) 100%);
}
.hero-a__content {
  position: relative;
  padding: 56px 56px 52px;
  max-width: 720px;
  animation: mfmFadeUp 600ms ease both;
}
.hero-title-light { color: #fff; font-size: var(--text-4xl); margin: 16px 0 18px; line-height: 1.08; }
.hero-title-light .word {
  display: inline-block;
  margin-right: 0.32em;
  animation: mfm-blurIn 900ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-light .word {
    animation: none;
  }
}
.hero-lead-light { color: var(--text-on-inverse-muted); font-size: var(--text-lg); max-width: 560px; margin: 0 0 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-title { font-size: var(--text-4xl); margin: 16px 0 18px; line-height: 1.06; }
.hero-lead { font-size: var(--text-lg); color: var(--text-body); margin: 0 0 28px; }



/* --- Karten (auf Bootstrap .card aufgesetzt) --- */
.info-card {
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.info-card--hover:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.info-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--mfm-wave-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.info-card .card-title { font-size: var(--text-xl); margin-bottom: 8px; }
.info-card .card-text { font-size: var(--text-sm); color: var(--text-body); margin-bottom: 18px; }
.info-card--plain .card-title { font-size: var(--text-xl); margin-bottom: 14px; }
.info-card--plain .card-text { font-size: var(--text-sm); color: var(--text-body); }

/* --- Knotenkunde: Kartenraster mit CSS Subgrid (Titel / Grafik / Buttons je eigene Zeile) --- */
.knoten-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 24px;
  row-gap: 32px;
}
@media (min-width: 768px) {
  .knoten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .knoten-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .knoten-grid { grid-template-columns: repeat(4, 1fr); }
}

.knoten-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 14px;
  padding: 1rem;
  text-align: center;
}
.knoten-card .card-title { margin: 0; align-self: start; }
.knoten-card .knoten-graphic-btn { align-self: center; }

.knoten-graphic-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.knoten-graphic-wrap {
  aspect-ratio: 4 / 3;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.knoten-graphic { padding: 14px; transition: transform 200ms ease; }
.knoten-graphic-btn:hover .knoten-graphic, .knoten-graphic-btn:focus-visible .knoten-graphic { transform: scale(1.04); }

.knoten-actions { display: flex; gap: 8px; justify-content: center; align-self: end; }

/* Fallback für Browser ohne subgrid-Unterstützung: normaler Flex-Stack */
@supports not (grid-template-rows: subgrid) {
  .knoten-card { display: flex; flex-direction: column; }
  .knoten-card .knoten-graphic-btn { margin: 14px 0; }
}

/* Staggernde Eintritts-Animation für die einzelnen Knoten-Cards, getriggert von
   js/intersection-observer.js. Jede Card wird einzeln beobachtet und bekommt ihre
   "is-visible"-Klasse erst, wenn SIE selbst ins Blickfeld scrollt (nicht schon, wenn nur
   die erste Reihe des Grids sichtbar wird) - bei mehrzeiligen Grids sonst würden weiter
   unten liegende Cards längst fertig eingeblendet sein, bevor man dorthin scrollt.
   Transform beeinflusst die Subgrid-Platzierung nicht, daher unbedenklich auf dem
   Grid-Item selbst. */
.knoten-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.knoten-card.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .knoten-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Video-Popup: Videos sind hochkant (9:16) — Dialog schmal halten, Video per Höhe begrenzen */
@media (min-width: 576px) {
  .video-modal-dialog { max-width: 420px; }
}
/* Offcanvas-Menü liegt bei --bs-breakpoint-lg (<992px) mit z-index:10000 im DOM -
   Modal muss darüber liegen, sonst blockiert es Klicks auf den Schließen-Button. */
.video-modal { --bs-modal-zindex: 10050; }
.video-modal .modal-body {
  padding: 0;
  background: #000;
  display: flex;
  justify-content: center;
}
.knoten-modal-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 75vh;
}

/* --- Ablauf (Inverse) --- */
.steps-panel {
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  color: var(--text-on-inverse);
  position: relative;
  overflow: hidden;
}
.steps-panel h2 { color: #fff; font-size: var(--text-3xl); margin: 14px 0 36px; max-width: 620px; }
.step__no { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--mfm-gold-400); }
.step__rule { height: 1px; background: rgba(192,168,62,0.4); margin: 14px 0 16px; }
.step h3 { color: #fff; font-size: var(--text-lg); margin: 0 0 8px; }
.step p { color: var(--text-on-inverse-muted); font-size: var(--text-sm); margin: 0; }

/* --- Zitat --- */
.quote-section { max-width: 860px; margin: 0 auto; padding: 88px 24px 0; text-align: center; }
.quote-rule { width: 40px; height: 1px; background: var(--accent-gold); margin: 0 auto 28px; }
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--text-heading);
  line-height: 1.35;
  margin: 0 0 16px;
}
.quote-cite { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* === Google-Rezensionen · dunkler Abschnitt (#2a3260) === */
.mod-googlereviews {
  /* Farben */
  --gr-accent: #fff;        /* helle CD-Blau-Variante, gut lesbar auf Dunkel – Hex anpassbar */
  --gr-accent-hover: color-mix(in srgb, var(--gr-accent) 80%, #fff);
  --gr-star: #ffc23c;          /* Sterne etwas heller für dunklen Grund */
  --gr-card-bg: rgba(255,255,255,.06);
  --gr-card-border: rgba(255,255,255,.14);
  --gr-muted: #aab2c6;
  --gr-radius: .75rem;

  /* der Abschnitt selbst */
  background: #2a3260;
  color: #eef1f7;              /* helle Grundschrift */
  padding: 2.25rem 1.75rem;
  border-radius: var(--gr-radius);
}

/* Kopf / Gesamtbewertung */
.mod-googlereviews .gr-summary {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.mod-googlereviews .gr-summary-value { color: var(--gr-accent); font-size: 2.1rem; letter-spacing: -.01em; }

/* Karten & Texte hell */
.mod-googlereviews .gr-review { border-color: #d2c069; }
.mod-googlereviews .gr-review-text,
.mod-googlereviews .gr-author-name { color: #eef1f7; }

/* Fußzeile: Button + Link */
.mod-googlereviews .gr-btn {
  display: inline-block;
  padding: .5rem 1rem;              /* btn-lg */
  font-size: 1.25rem;               /* btn-lg */
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14px;
  text-align: center;
  text-decoration: none;
  border-radius: .5rem;             /* btn-lg */
  color: var(--mfm-navy-900, #1e2547);
  background: var(--mfm-wave-300, #b3c8d3);
  border: 1px solid var(--mfm-wave-300, #b3c8d3);
  box-shadow: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.mod-googlereviews .gr-btn:hover,
.mod-googlereviews .gr-btn:focus {
  color: var(--mfm-navy-900, #1e2547);
  background: rgba(255,255,255,.9);
  border-color: var(--mfm-wave-400, #9db7c7);
  transform: none;
}

/* --- CTA-Band --- */
.cta-band { max-width: var(--container-max); margin: 88px auto 96px; padding: 0 24px; }
.cta-band__panel {
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  background-color: var(--mfm-wave-100);
}
.cta-band__panel h2 { color: var(--mfm-navy-900); font-size: var(--text-2xl); margin: 0 0 8px; }
.cta-band__panel p { color: var(--mfm-navy-800); font-size: var(--text-md); margin: 0; }

/* --- Termine (Bootstrap table) --- */
.table-card-mfm {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-card);
}
.table-card-mfm table { margin-bottom: 0; }
.table-card-mfm thead { background: var(--surface-raised); }
.table-card-mfm th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  border-bottom-width: 1px;
}
.table-card-mfm td { font-size: var(--text-sm); color: var(--text-body); vertical-align: middle; }
.table-card-mfm .course-name { font-weight: 600; color: var(--text-heading); font-family: var(--font-display); font-size: var(--text-lg); }

/* Status-Badges ("Plätze frei" / "Warteliste") - Bootstrap-5.3-"subtle"-Farben,
   im hier eingebundenen Bootstrap noch nicht enthalten, daher hier nachgetragen.
   Verwendung: <span class="badge rounded-pill bg-success-subtle text-success-emphasis">Plätze frei</span> */
.bg-success-subtle { background-color: #d1e7dd !important; }
.text-success-emphasis { color: #0a3622 !important; }
.bg-warning-subtle { background-color: #fff3cd !important; }
.text-warning-emphasis { color: #664d03 !important; }

.inverse-band {
  margin-top: 44px;
  background: var(--surface-inverse);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.inverse-band h2 { color: #fff; font-size: var(--text-xl); margin: 0 0 6px; }
.inverse-band p { color: var(--text-on-inverse-muted); font-size: var(--text-sm); margin: 0; }

/* --- Infos --- */
.lead-block { max-width: 720px; }
.lead-block .lead { font-size: var(--text-lg); color: var(--text-body); margin: 0 0 12px; }
.lead-block p { font-size: var(--text-md); color: var(--text-body); }
.note-box {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: var(--text-sm);
  color: var(--text-heading);
}
.block-gap { margin-bottom: 64px; }
.h2-lg { font-size: var(--text-2xl); margin: 0 0 8px; }
.sub-lead { font-size: var(--text-md); color: var(--text-body); max-width: 620px; margin: 0 0 28px; }

.mini-card { border-color: var(--border-default); border-radius: var(--radius-lg); }
.mini-card .card-title { font-size: var(--text-lg); margin-bottom: 10px; color: var(--text-accent); }
.mini-card .card-text { font-size: var(--text-sm); color: var(--text-body); margin: 0; }

/* --- Preistabellen (Bootstrap list-group) --- */
.price-card { border-color: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.price-card__head { background: var(--surface-inverse); border: none; }
.price-card__head h3 { color: #fff; font-size: var(--text-xl); margin: 0; }
.price-card .list-group-item {
  background: transparent;
  border-color: var(--border-default);
  font-size: var(--text-sm);
  color: var(--text-body);
  padding: 12px 28px;
}
.price-card .list-group-item span:last-child { font-weight: 700; color: var(--text-heading); white-space: nowrap; }
.price-card .list-group-item--sub span:last-child { font-weight: 600; }
.price-subhead {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

/* --- FAQ (Bootstrap accordion) --- */
.faq-page { max-width: 820px; }
.accordion-mfm .accordion-item {
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 12px;
}
.accordion-mfm .accordion-item:last-child { margin-bottom: 0; }
.accordion-mfm .accordion-button {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-heading);
  padding: 22px 26px;
}
.accordion-mfm .accordion-button:not(.collapsed) {
  background: var(--surface-raised);
  color: var(--text-heading);
  box-shadow: none;
}
.accordion-mfm .accordion-button:focus { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Plus/Minus-Pictos (Bootstrap-Icons "plus" / "dash") statt Standard-Chevron */
.accordion-mfm .accordion-button::after {
  flex: none;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232a3260' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  background-size: 1rem;
  transform: none;
}
.accordion-mfm .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c0a83e' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
  transform: none;
}
.accordion-mfm .accordion-body {
  font-size: var(--text-md);
  color: var(--text-body);
  padding: 24px 24px;
}

/* --- Über uns --- */
.about-grid .lead { font-size: var(--text-lg); color: var(--text-body); margin: 0 0 18px; }
.about-grid p { font-size: var(--text-md); color: var(--text-body); margin: 0 0 18px; }
.about-grid p:last-child { margin-bottom: 0; }
.facts-card { background: var(--surface-raised); border-radius: var(--radius-lg); border-color: var(--border-default); }
.facts-card__rule { width: 40px; height: 1px; background: var(--accent-gold); margin-bottom: 20px; }
.fact { padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.fact:last-child { border-bottom: none; padding-bottom: 0; }
.fact__value { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-heading); }
.fact__label { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Galerie (kein Bootstrap-Äquivalent für Masonry-Spans) --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.gallery-cell--wide { grid-column: span 2; }
.gallery-cell--tall { grid-row: span 2; }
.gallery-slot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mfm-wave-100);
}
.gallery-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   6. Kontakt
   ========================================================= */
.contact-card-dark {
  background: var(--surface-inverse);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--text-on-inverse);
}

.contact-card-dark h3 { color: #fff; font-size: var(--text-lg); margin: 0 0 16px; }
.contact-card-dark p { color: var(--text-on-inverse-muted); font-size: var(--text-sm); margin: 0 0 14px; }
.contact-card-dark a { color: var(--mfm-gold-400); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.contact-card-dark a:hover { color: #fff; }
.contact-card-light {
  background: var(--surface-raised);
  border-color: var(--border-default);
  border-radius: var(--radius-lg);
}
.contact-card-light h3 { font-size: var(--text-md); margin: 0 0 8px; }
.contact-card-light p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* =========================================================
   7. Footer
   ========================================================= */
.site-footer {
  background: transparent;
  color: var(--text-on-inverse-muted);
  margin-top: auto;
}
.footer-brand { font-family: var(--font-display); font-size: var(--text-xl); color: #fff; margin-bottom: 6px; }
.footer-rule { width: 44px; height: 2px; border-radius: 2px; background: var(--mfm-gold-500); margin-bottom: 16px; }
.footer-brand-text { font-size: var(--text-sm); color: var(--text-on-inverse-muted); margin: 0; max-width: 280px; }
.footer-col-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mfm-gold-400);
  font-weight: 700;
  margin-bottom: 14px;
}
.footer-link {
  display: block;
  background: none;
  border: none;
  padding: 5px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-on-inverse-muted);
  text-align: left;
  text-decoration: none;
  transition: color 140ms ease;
}
.footer-link:hover { color: #fff; }
.footer-link--icon {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}
.footer-link--icon svg { display: block; }
.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease;
}
.instagram-link:hover { color: var(--mfm-gold-500, #c9a24a); }
.sp-copyright {
font-size: var(--text-xs);
color: rgba(184,195,212,0.7);
}

/* --- Wasserwellen-Hintergrund (Video) ---
   Grundfarbe des Footers (var(--surface-inverse-deep)) bleibt unverändert erhalten;
   das Video (js/footer-video.js, nur bei Bedarf nachgeladen) wird per Scrim in den
   gleichen Navy-Ton wie das Hero-Video getaucht (siehe .hero-a__scrim), damit die
   Footer-Grundfarbe der dominante Farbeindruck bleibt. Positionierungs-Kontext ist
   #sp-bottom (nicht .site-footer) - so deckt der Effekt die volle Breite/Höhe des
   Footers inkl. dessen Innenabstand (padding: 60px 0 30px, siehe theme.scss) ab. */
#sp-bottom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.footer-waves {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}

.footer-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.footer-video.is-visible { opacity: .5; }

.footer-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 37, 71, 0.35) 0%, rgba(30, 37, 71, 0.6) 55%, rgba(30, 37, 71, 0.88) 100%);
}

/* =========================================================
   8. Scroll-Button
   ========================================================= */
.sp-scroll-up {
  display: none;
  position: fixed;
  bottom: 60px;
  right: 30px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  color: #2a3260;
  background: var(--mfm-wave-100);
  border-radius: 10px;
  z-index: 1000;
  transition: all .3s ease;
}

.sp-scroll-up:hover, .sp-scroll-up:active, .sp-scroll-up:focus {
  color: #fff;
  background: #000;
}

/* --- Formulare (z.B. com_users Login) an das Farbschema angleichen --- */
.form-control:focus {
  border-color: var(--mfm-petrol-600);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.com-users-login__options.list-group { border: 0; }
.com-users-login__options .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  padding: 12px 4px;
  color: var(--text-accent);
  font-weight: 600;
  font-size: var(--text-sm);
  background: transparent;
  transition: color 140ms ease;
}
.com-users-login__options .list-group-item:last-child { border-bottom: 0; }
.com-users-login__options .list-group-item:hover,
.com-users-login__options .list-group-item:focus {
  color: var(--mfm-navy-800);
  background: transparent;
}