/* ============================================================
   custom.css — Kreismedienzentrum Westerwald
   Eigene Styles, immer NACH Bootstrap 5 eingebunden.
   ============================================================ */


/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {
  --sunset-start: #ff8a00;
  --sunset-end:   #e52e71;
  --sunset-grad:  linear-gradient(135deg, var(--sunset-start) 0%, var(--sunset-end) 100%);

  /* Reicher Sunset-Verlauf für große Flächen (Hero, Kontakt-CTA).
     Gold -> Orange -> Korallrot -> Magenta -> Tiefviolett.
     Orange und Magenta bleiben als Anker erhalten, gerahmt von Gelb und Violett. */
  --sunset-grad-rich: linear-gradient(
    135deg,
    #ffb627 0%,
    #ff8a00 20%,
    #ff3a5e 50%,
    #e52e71 75%,
    #6a3093 100%
  );

  --ink:          #1a1a2e;
  --muted:        #6b7280;
  --bg-soft:      #f7f8fc;

  --font-body:    'Inter', system-ui, sans-serif;
  --font-titel:   'Poppins', system-ui, sans-serif;

  --radius-karte: 14px;
  --radius-btn:   9999px;

  --schatten-karte:       0 2px 12px rgba(0, 0, 0, 0.06);
  --schatten-karte-hover: 0 12px 32px rgba(229, 46, 113, 0.13);
  --schatten-nav:         0 2px 20px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   2. BASIS & TYPOGRAFIE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1rem;
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titel);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

p { color: var(--muted); margin-bottom: 1rem; }

img { max-width: 100%; height: auto; display: block; }

address { font-style: normal; }

/* Sektions-Abstand & Hintergrund-Varianten */
.sektion       { padding: 5rem 0; }
.sektion--hell { background-color: var(--bg-soft); }
.mb-6          { margin-bottom: 4rem !important; }

/* ============================================================
   PARALLAX — Dekorationsebenen
   ============================================================ */

/* Jede Section, die Orbs enthält, braucht overflow:hidden damit
   die außerhalb des Sichtfelds liegenden Orbs nicht ausbrechen.  */
.sektion--dunkel,
.sektion--verlauf {
  position: relative;
  overflow: hidden;
}

/* Dekorative Hintergrund-Orbs (aria-hidden) */
.parallax-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Orbs im dunklen Lila-Bereich */
.parallax-orb--dunkel-1 {
  width: 520px;
  height: 520px;
  top: -120px;
  right: -160px;
  background: radial-gradient(circle at 40% 40%, rgba(228,46,113,0.18) 0%, transparent 70%);
  filter: blur(40px);
}

.parallax-orb--dunkel-2 {
  width: 380px;
  height: 380px;
  bottom: -80px;
  left: -100px;
  background: radial-gradient(circle at 60% 60%, rgba(255,138,0,0.14) 0%, transparent 70%);
  filter: blur(36px);
}

/* Orbs im Sunset-Gradient-Bereich */
.parallax-orb--verlauf-1 {
  width: 460px;
  height: 460px;
  top: -140px;
  left: -120px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, transparent 65%);
  filter: blur(50px);
}

.parallax-orb--verlauf-2 {
  width: 340px;
  height: 340px;
  bottom: -60px;
  right: -80px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.13) 0%, transparent 65%);
  filter: blur(40px);
}

/* will-change nur für tatsächlich parallax-gesteuerte Elemente */
[data-parallax] {
  will-change: transform;
}

/* ============================================================
   Dunkel — tiefes Lila */
.sektion--dunkel {
  background: #1a0d35;
}
.sektion--dunkel .sektion__obertitel {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.45);
}
.sektion--dunkel .sektion__titel {
  color: #fff;
}
.sektion--dunkel .sektion__titel::after {
  background: rgba(255,255,255,0.18);
}
.sektion--dunkel .sektion__untertitel {
  color: rgba(255,255,255,0.55);
}
.sektion--dunkel .schritt-karte {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.sektion--dunkel .schritt-karte:hover {
  background: rgba(255,255,255,0.09);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.sektion--dunkel .schritt-karte__titel { color: #fff; }
.sektion--dunkel .schritt-karte__text  { color: rgba(255,255,255,0.58); }

/* Verlauf — Sunset-Gradient für die Zahlen-Sektion */
.sektion--verlauf {
  background: var(--sunset-grad);
}
.sektion--verlauf .sektion__obertitel {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: rgba(255,255,255,0.6);
  color: rgba(255,255,255,0.6);
}
.sektion--verlauf .sektion__titel {
  color: #fff;
}
.sektion--verlauf .sektion__titel::after {
  background: rgba(255,255,255,0.3);
}
.sektion--verlauf .counter-karte__zahl {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
.sektion--verlauf .counter-karte__einheit     { color: rgba(255,255,255,0.9); }
.sektion--verlauf .counter-karte__beschreibung { color: rgba(255,255,255,0.6); }

/* Warm — Fortbildungen */
.sektion--warm {
  background: #FFFBF2;
  border-top: 3px solid rgba(255, 182, 39, 0.35);
}

/* Akzent — Testimonials, leichtes Slate-Blau */
.sektion--akzent {
  background: #F0F4FF;
}


/* ============================================================
   3. BARRIEREFREIHEIT
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--sunset-grad);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; outline: none; }

:focus-visible {
  outline: 3px solid var(--sunset-start);
  outline-offset: 3px;
  border-radius: 4px;
}

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


/* ============================================================
   4. NAVIGATION
   ============================================================ */

/* Dropdown-Menü */
.nav__dropdown {
  border: none;
  border-radius: var(--radius-karte);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 0.5rem;
  min-width: 220px;
  margin-top: 0.5rem !important;
}

.nav__dropdown .dropdown-item {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__dropdown .dropdown-item:hover,
.nav__dropdown .dropdown-item:focus {
  background-color: rgba(229,46,113,0.07);
  color: var(--sunset-end);
}

.nav__dropdown-icon {
  width: 24px;
  font-size: 1rem;
  color: var(--sunset-end);
  flex-shrink: 0;
}

/* Dropdown-Toggle-Pfeil im Hero-Zustand */
.nav-wrapper:not(.nav--gescrollt) .nav__links .dropdown-toggle {
  color: rgba(255,255,255,0.88);
}

.nav-wrapper:not(.nav--gescrollt) .nav__links .dropdown-toggle:hover {
  color: #fff;
}

/* ============================================================
   SEITEN-HERO (Unterseiten — kleinere Gradient-Kopfzeile)
   ============================================================ */
.seiten-hero {
  background: var(--sunset-grad-rich);
  background-size: 300% 300%;
  animation: gradient-flow 10s ease infinite;
  padding: 8rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

/* ── Gradient-Varianten pro Kategorie ─────────────────────── */

/* Geräte & Medienverleih — Ocean-Teal (Technik, Ausleihe) */
.seiten-hero--verleih {
  background: linear-gradient(135deg, #0369a1 0%, #0891b2 30%, #06b6d4 65%, #22d3ee 100%);
}

/* Fortbildungen & Beratung — Violett-Rose (Lernen, Kreativität) */
.seiten-hero--fortbildung {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 30%, #a855f7 65%, #ec4899 100%);
}

/* Online-Mediathek — Indigo-Nacht (Digital, Streaming) */
.seiten-hero--mediathek {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 30%, #4f46e5 65%, #7c3aed 100%);
}

/* Über uns / Team — Bernstein-Glut (Warm, Persönlich) */
.seiten-hero--team {
  background: linear-gradient(135deg, #92400e 0%, #c2410c 30%, #ea580c 65%, #fb923c 100%);
}

/* Kontakt — Smaragd-Türkis (Ruhig, Einladend) */
.seiten-hero--kontakt {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 30%, #14b8a6 65%, #2dd4bf 100%);
}

/* Spezialseiten (Koffer, it2school etc.) — Waldgrün (Natur, Praxis) */
.seiten-hero--koffer {
  background: linear-gradient(135deg, #14532d 0%, #15803d 30%, #16a34a 65%, #4ade80 100%);
}

/* Impressum & Datenschutz — Anthrazit-Blaugrau (Sachlich, Formal) */
.seiten-hero--rechtlich {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 35%, #334155 70%, #475569 100%);
}

.seiten-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 0;
}

.seiten-hero__inhalt {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Obertitel / Eyebrow im Seiten-Hero ─────────────────── */
.seiten-hero__obertitel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.6rem;
}

/* ── Layout: SPLIT (Geräte-Seiten) ──────────────────────── */
.seiten-hero__split {
  position: relative;
  z-index: 1;
}
.seiten-hero__split__text {
  text-align: left;
  padding: 1.5rem 0;
}
.seiten-hero__split__text .seiten-hero__titel {
  text-align: left;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}
.seiten-hero__split__text .seiten-hero__untertitel {
  text-align: left;
  margin: 0;
}
.seiten-hero__split__deko {
  justify-content: center;
  align-items: center;
}
.seiten-hero__deko-icon {
  font-size: clamp(6rem, 12vw, 10rem);
  color: rgba(255,255,255,0.13);
  display: block;
  line-height: 1;
}

/* ── Layout: EDITORIAL (Über uns, Fortbildungen, …) ─────── */
.seiten-hero__editorial {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 680px;
  padding: 1.5rem 0;
}
.seiten-hero__editorial .seiten-hero__titel {
  text-align: left;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}
.seiten-hero__editorial .seiten-hero__untertitel {
  text-align: left;
  margin: 0;
}

/* ── Layout: KOMPAKT (FAQ, Rechtliches, Suche) ──────────── */
.seiten-hero--kompakt {
  padding: 6rem 0 2rem;
}
.seiten-hero__kompakt {
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 0.5rem 0;
}
.seiten-hero__kompakt .seiten-hero__titel {
  text-align: left;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: 0.25rem;
}

/* ── ① TITELLEISTE — weißer Seitenkopf ohne Gradient ─────── */
.seiten-kopf {
  background: #fff;
  padding: 7rem 0 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.seiten-kopf::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  background: var(--sunset-grad);
}
.seiten-kopf__obertitel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
  display: inline-block;
}
.seiten-kopf__titel {
  font-family: var(--font-titel);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}

/* ── ② DIAGONAL — entfernt, organische Welle stattdessen ─── */

/* ── ③ BILD-SPLIT — Foto rechts im Gradient ──────────────── */
.seiten-hero--bild-split {
  overflow: hidden;
}
.seiten-hero__bild-foto {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, black 60%);
  opacity: 0.55;
  z-index: 0;
}
@media (max-width: 991px) {
  .seiten-hero__bild-foto { display: none; }
}

/* ── TEAM-OPENER — Vollbild-Split für Über uns ───────────── */
.team-opener {
  display: flex;
  height: 100vh;
  min-height: 520px;
  max-height: 900px;
  position: relative;
  overflow: hidden;
}
.team-opener__haelfte {
  flex: 1;
  background-size: cover;
  background-position: top center;
  position: relative;
  transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.team-opener__haelfte:hover { flex: 1.35; }
.team-opener__haelfte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.05) 100%);
  transition: background 0.4s ease;
}
.team-opener__haelfte--links::after {
  background: linear-gradient(130deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 65%),
              linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.team-opener__haelfte--rechts::after {
  background: linear-gradient(230deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 65%),
              linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
}
.team-opener__info {
  position: absolute;
  bottom: 2.5rem;
  padding: 0 2rem;
  z-index: 1;
  color: #fff;
}
.team-opener__haelfte--links .team-opener__info { left: 0; }
.team-opener__haelfte--rechts .team-opener__info { right: 0; text-align: right; }
.team-opener__rolle {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.25rem;
}
.team-opener__name {
  font-family: var(--font-titel);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.team-opener__mitte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}
.team-opener__badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 9999px;
  padding: 0.35rem 1.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: rgba(255,255,255,0.9);
}
.team-opener__titel {
  font-family: var(--font-titel);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  text-shadow: 0 3px 24px rgba(0,0,0,0.35);
  line-height: 1.1;
}
.team-opener__scroll {
  margin: 0;
  font-size: 1.3rem;
  color: rgba(255,255,255,0.55);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 767px) {
  .team-opener {
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  .team-opener__haelfte { min-height: 45vw; flex: none !important; }
  .team-opener__haelfte--links { min-height: 55vw; }
  .team-opener__mitte { position: relative; left: auto; top: auto;
    transform: none; padding: 2rem 1rem; white-space: normal; background: var(--ink); }
  .team-opener__mitte .team-opener__titel { font-size: 2.2rem; }
}

/* ── ④ MAGAZIN-INTRO — großes Typo-Intro ohne Gradient ────── */
.magazin-intro {
  background: #fff;
  padding: 7.5rem 0 4rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.magazin-intro::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  background: var(--sunset-grad);
}
.magazin-intro__obertitel {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.magazin-intro__titel {
  font-family: var(--font-titel);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.magazin-intro__lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.85;
  max-width: 580px;
}

/* ══════════════════════════════════════════════════════════
   ÜBER UNS OPENER — Split: Großer Titel links, Avatare rechts
══════════════════════════════════════════════════════════ */
.ueber-uns-opener {
  background: #fff;
  padding: 8rem 0 4.5rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ueber-uns-opener::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sunset-grad);
}
.ueber-uns-opener__logo {
  height: auto;
  width: 100%;
  max-width: 340px;
  display: block;
  margin-bottom: 2rem;
  filter: brightness(0);
  opacity: 0.45;
}
.ueber-uns-opener__obertitel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.ueber-uns-opener__titel {
  font-family: var(--font-titel);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.ueber-uns-opener__sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  max-width: 480px;
}
.ueber-uns-opener__avatare {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.ueber-uns-opener__person {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.ueber-uns-opener__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  /* Gradient ring */
  padding: 3px;
  background: var(--sunset-grad);
  box-sizing: content-box;
  /* Inner white ring effect */
  outline: 3px solid #fff;
  outline-offset: -6px;
}
.ueber-uns-opener__name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.ueber-uns-opener__rolle {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   FEATURED STORY — Aktuelles: erster Artikel als Opener
══════════════════════════════════════════════════════════ */
.featured-story {
  position: relative;
  background: var(--sunset-grad-rich);
  background-size: 300% 300%;
  animation: gradient-flow 12s ease infinite;
  padding: 9rem 0 5rem;
  overflow: hidden;
}
.featured-story__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 100%);
  z-index: 0;
}
/* Organische Welle unten */
.featured-story::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 50px;
  background: #fff;
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 1;
}
.featured-story__inhalt {
  position: relative;
  z-index: 2;
}
.featured-story__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.featured-story__datum {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.8rem;
}
.featured-story__titel {
  font-family: var(--font-titel);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
.featured-story__lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.8;
  margin-bottom: 2rem;
  max-width: 580px;
}
.featured-story__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.featured-story__link:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════
   KONTAKT-OPENER — Seite startet direkt mit Inhalt
══════════════════════════════════════════════════════════ */
.kontakt-opener {
  background: #fff;
  padding: 8rem 0 4rem;
  position: relative;
}
.kontakt-opener__akzent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sunset-grad);
}
.kontakt-opener__obertitel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.kontakt-opener__titel {
  font-family: var(--font-titel);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.kontakt-opener__lead {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* ══════════════════════════════════════════════════════════
   FAQ-INTRO — Suchfeld-Feeling + Kategorie-Kacheln
══════════════════════════════════════════════════════════ */
.faq-intro {
  background: var(--bg-soft);
  padding: 8rem 0 3.5rem;
  position: relative;
}
.faq-intro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sunset-grad);
}
.faq-intro__obertitel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: 0.6rem;
}
.faq-intro__titel {
  font-family: var(--font-titel);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.2;
}
.faq-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  background: #fff;
  border-radius: var(--radius-karte);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--schatten-karte);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
.faq-kachel:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  color: var(--ink);
}
.faq-kachel--kontakt {
  background: var(--sunset-grad);
  color: #fff;
  border: none;
}
.faq-kachel--kontakt:hover { color: #fff; }
.faq-kachel__icon {
  font-size: 1.6rem;
  color: var(--sunset-start);
}
.faq-kachel--kontakt .faq-kachel__icon { color: rgba(255,255,255,0.9); }
.faq-kachel__label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Breadcrumb */
.seiten-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.seiten-hero__breadcrumb a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.seiten-hero__breadcrumb a:hover { color: #fff; }

.seiten-hero__breadcrumb-sep { opacity: 0.5; }

/* Seitentitel */
.seiten-hero__titel {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  color: #fff;
  font-family: var(--font-titel);
  font-weight: 700;
  margin-bottom: 0.9rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.seiten-hero__untertitel {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  max-width: 600px;
  line-height: 1.75;
  margin-bottom: 0;
  text-align: center;
}

/* Icon-Kreis im Seiten-Hero */
.seiten-hero__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #fff;
  margin-bottom: 1.25rem;
}

/* Wave unterm Seiten-Hero */
.seiten-hero__wave {
  position: absolute;
  bottom: -2px; /* -2px deckt den Render-Gap zur nächsten Sektion */
  left: 0;
  width: 100%; line-height: 0; z-index: 1;
}
.seiten-hero__wave svg { width: 100%; height: 42px; display: block; }
.nav-wrapper {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
}

.nav-wrapper .navbar {
  padding: 1.2rem 0;
  transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.nav-wrapper.nav--gescrollt .navbar {
  background-color: #fff;
  box-shadow: var(--schatten-nav);
  padding: 0.65rem 0;
}

/* Logo */
.nav__logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
}

.nav__logo-img {
  height: auto;
  max-width: 220px;
  width: 100%;
  display: block;
  filter: brightness(0) invert(1); /* weiß auf dunklem Hero-Hintergrund */
  opacity: 1;
  transition: filter 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Logo groß im Hero der Startseite */
.hero__logo {
  height: 120px;
  max-width: 200px;
  width: auto;
  display: block;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.18));
}

/* Logo im Hero der Unterseiten */
.seiten-hero__logo {
  height: 80px;
  max-width: 140px;
  width: auto;
  display: block;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.2));
}

/* Gradient-Logo: ::before immer vorhanden, im Scroll-Zustand eingeblendet */
.nav__logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: auto;
  aspect-ratio: 1031.8134 / 139.84;
  background: url('../img/logo-schriftzug-gradient.svg') no-repeat center / contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.nav-wrapper.nav--gescrollt .nav__logo::before {
  opacity: 1;
}

/* Gescrollt: Original-Logo ausblenden, Gradient-Logo übernimmt */
.nav-wrapper.nav--gescrollt .nav__logo-img {
  opacity: 0;
}

/* Logo-Text-Span ausblenden (Text ist im SVG eingebettet) */
.nav__logo-text {
  display: none;
}

/* Nav-Links */
.nav__links .nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover-Hintergrund nur bei Geräten mit echter Maus —
   auf Touch bleibt der :hover-Zustand sonst nach dem Tippen „kleben". */
@media (hover: hover) {
  .nav__links .nav-link:hover {
    color: #fff;
    background-color: rgba(255,255,255,0.12);
  }
  .nav-wrapper.nav--gescrollt .nav__links .nav-link:hover {
    color: var(--sunset-end);
    background-color: rgba(229,46,113,0.06);
  }
}

/* Tastatur-Fokus immer sichtbar (Barrierefreiheit) */
.nav__links .nav-link:focus-visible {
  color: #fff;
  background-color: rgba(255,255,255,0.12);
}

.nav-wrapper.nav--gescrollt .nav__links .nav-link { color: var(--ink); }

.nav-wrapper.nav--gescrollt .nav__links .nav-link:focus-visible {
  color: var(--sunset-end);
  background-color: rgba(229,46,113,0.06);
}

/* Aktiver Abschnitt-Link (via Scrollspy in main.js) + Bootstrap .active */
.nav__links .nav-link--aktiv,
.nav__links .nav-link.active {
  color: #fff !important;
  background-color: rgba(255,255,255,0.15);
}

.nav-wrapper.nav--gescrollt .nav__links .nav-link--aktiv,
.nav-wrapper.nav--gescrollt .nav__links .nav-link.active {
  color: var(--sunset-end) !important;
  background-color: rgba(229,46,113,0.08);
}

/* Desktop: Angebot/Gerätebestand öffnen per Hover — der Klick auf den
   Hauptpunkt navigiert dann zum jeweiligen Abschnitt (siehe main.js). */
@media (min-width: 1200px) {
  .nav__links .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Dropdown-Eltern auf Desktop per Hover öffnen (Klick navigiert zur Section) */
@media (min-width: 1200px) {
  .nav__links .nav-item.dropdown:hover > .dropdown-menu { display: block; }
  .nav__links .nav-item.dropdown > .nav-link.dropdown-toggle { cursor: pointer; }
}

/* Hamburger */
.nav__hamburger {
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
}

.nav-wrapper:not(.nav--gescrollt) .nav__hamburger .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-wrapper.nav--gescrollt .nav__hamburger { border-color: rgba(0,0,0,0.18); }

/* Mobiles aufgeklapptes Menü */
@media (max-width: 1199.98px) {
  .navbar-collapse {
    background: #fff;
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: var(--radius-karte);
    margin-top: 0.75rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  }

  .nav-wrapper:not(.nav--gescrollt) .navbar-collapse .nav-link { color: var(--ink); }
  .nav-wrapper:not(.nav--gescrollt) .navbar-collapse .nav-link:hover { color: var(--sunset-end); }

  .nav__cta { width: 100%; margin-top: 0.75rem; justify-content: center; }
}


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn--primaer,
.btn--weiss,
.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-btn);
  transition: transform 0.3s ease, box-shadow 0.3s ease,
              background-color 0.2s ease, border-color 0.2s ease;
}

.btn--primaer {
  padding: 0.65rem 1.6rem;
  font-size: 0.9rem;
  background: linear-gradient(to right, #ff8a00 0%, #e52e71 50%, #ff8a00 100%);
  background-size: 200% 100%;
  background-position: left center;
  color: #fff;
  border: 2px solid transparent;
  transition: background-position 0.45s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn--primaer:hover, .btn--primaer:focus {
  color: #fff;
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(229,46,113,0.38);
}

.btn--weiss {
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid #fff;
}
.btn--weiss:hover, .btn--weiss:focus {
  color: var(--sunset-end);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.btn--ghost {
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.btn--ghost:hover, .btn--ghost:focus {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff;
  transform: translateY(-3px);
}

.nav__cta {
  padding: 0.5rem 1.3rem;
  font-size: 0.88rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav__cta:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* Scrolled nav: etwas dunkler damit es auf weißem Grund lesbar bleibt */
.nav--gescrollt .nav__cta {
  background: rgba(229,46,113,0.1);
  border-color: rgba(229,46,113,0.35);
  color: var(--sunset-end);
}
.nav--gescrollt .nav__cta:hover {
  background: rgba(229,46,113,0.16);
  border-color: rgba(229,46,113,0.55);
  color: var(--sunset-end);
}
/* Such-Icon in der Nav */
.nav__suche-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  margin-right: 0.5rem;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.nav__suche-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav--gescrollt .nav__suche-btn { color: var(--muted); }
.nav--gescrollt .nav__suche-btn:hover { background: var(--bg-soft); color: var(--ink); }


/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 5rem;
  background: var(--sunset-grad-rich);
  background-size: 300% 300%;
  animation: gradient-flow 10s ease infinite;
}

@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Sanfter Vignette-Effekt: oben fast transparent, unten dunkler — sorgt für Lesbarkeit auch über hellen Gold-Stellen */
  background: linear-gradient(
    170deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.28) 100%
  );
  z-index: 0;
}

.hero__inhalt {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 8rem;
  width: 100%;
}

/* Linke Spalte: Text und Buttons */
.hero__text {
  /* Reserve auf großen Screens gegenüber der Bubble */
  padding-right: 1rem;
}

@media (max-width: 991.98px) {
  .hero__text { padding-right: 0; }
}

/* Rechte Spalte: Bild-Bubble mit Crossfade
   ---------------------------------------------
   Auf mobilen Geräten unter den Text gestapelt,
   ab Tablet (lg) rechts neben dem Text. */
.hero__bubble-spalte {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Szene: Positionierungsbasis für Haupt- und Deko-Bubbles.
   Etwas größer als die Haupt-Bubble, damit die Deko-Bubbles
   außen herum Platz haben, ohne abgeschnitten zu werden. */
.hero__bubble-szene {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
}

/* ===== Haupt-Bubble (vorn) ===== */
.hero__bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 62% 38% 54% 46% / 44% 58% 42% 56%;
  overflow: hidden;
  z-index: 3;
  transform: translate(-50%, -50%);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.28),
    0 0 0 8px rgba(255,255,255,0.10),
    0 0 0 16px rgba(255,255,255,0.05);
  animation: bubble-float 11s ease-in-out infinite, blob-morph 9s ease-in-out infinite;
}

@keyframes blob-morph {
  0%   { border-radius: 62% 38% 54% 46% / 44% 58% 42% 56%; }
  20%  { border-radius: 44% 56% 38% 62% / 58% 42% 62% 38%; }
  40%  { border-radius: 56% 44% 62% 38% / 38% 62% 44% 56%; }
  60%  { border-radius: 38% 62% 46% 54% / 56% 44% 58% 42%; }
  80%  { border-radius: 54% 46% 56% 44% / 42% 58% 38% 62%; }
  100% { border-radius: 62% 38% 54% 46% / 44% 58% 42% 56%; }
}

.hero__bubble-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 4 Bilder à ~5s sichtbar, mit sanftem Crossfade. Gesamtdauer 20s. */
  animation: bubble-cycle 20s infinite;
}
.hero__bubble-bild:nth-child(1) { animation-delay: 0s; }
.hero__bubble-bild:nth-child(2) { animation-delay: 5s; }
.hero__bubble-bild:nth-child(3) { animation-delay: 10s; }
.hero__bubble-bild:nth-child(4) { animation-delay: 15s; }

@keyframes bubble-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Organische Schwebebewegung: leichte Wanderung in alle Richtungen plus minimaler Tilt.
   Das Center-Offset (-50%, -50%) bleibt erhalten und wird durch die Bewegungs-Verschiebungen ergänzt. */
@keyframes bubble-float {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(calc(-50% - 6px), calc(-50% - 12px)) rotate(0.4deg); }
  40%  { transform: translate(calc(-50% + 8px), calc(-50% - 16px)) rotate(-0.3deg); }
  60%  { transform: translate(calc(-50% + 10px), calc(-50% - 4px)) rotate(0.5deg); }
  80%  { transform: translate(calc(-50% - 4px), calc(-50% + 6px)) rotate(-0.4deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* ===== Deko-Karten (schweben um die Haupt-Bubble) ===== */
.hero__floating-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px 20px 16px 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  z-index: 4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Status-Pille (oben rechts) */
.hero__floating-tag--status {
  top: 8%;
  right: -8%;
  animation: tag-float-1 7s ease-in-out infinite;
}

.hero__floating-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: tag-pulse 2s ease-out infinite;
}

@keyframes tag-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Kategorie-Karte (unten links) — etwas größer mit Icon */
.hero__floating-tag--kategorie {
  bottom: 6%;
  left: -10%;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-karte);
  font-size: 0.88rem;
  font-weight: 600;
  /* fester Bereich, damit das Layout beim Label-Wechsel nicht springt */
  min-width: 175px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tag-float-2 9s ease-in-out infinite;
}

.hero__kategorie-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  /* Synchron mit dem Bild-Cycle in der Bubble: 20 s Gesamtdauer, jedes Label ~5 s */
  animation: kategorie-cycle 20s infinite;
}

.hero__kategorie-label i {
  font-size: 1.1rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__kategorie-label:nth-child(1) { animation-delay: 0s; }
.hero__kategorie-label:nth-child(2) { animation-delay: 5s; }
.hero__kategorie-label:nth-child(3) { animation-delay: 10s; }
.hero__kategorie-label:nth-child(4) { animation-delay: 15s; }

@keyframes kategorie-cycle {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Zwei verschiedene Schwebebahnen für die Karten */
@keyframes tag-float-1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-6px, 8px); }
  100% { transform: translate(0, 0); }
}

@keyframes tag-float-2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, -6px); }
  100% { transform: translate(0, 0); }
}

/* Auf Tablet kleiner */
@media (max-width: 991.98px) {
  .hero__bubble-szene {
    max-width: 360px;
    margin-top: 1.5rem;
  }
  .hero__floating-tag--status { right: -4%; }
  .hero__floating-tag--kategorie { left: -4%; }
}

/* Auf Smartphone Karten ausblenden — sonst zu eng */
@media (max-width: 575.98px) {
  .hero__bubble-szene {
    max-width: 280px;
  }
  .hero__floating-tag { display: none; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .hero__bubble,
  .hero__floating-tag,
  .hero__floating-tag-dot { animation: none; }
  .hero__bubble-bild,
  .hero__kategorie-label {
    animation: none;
    opacity: 0;
  }
  .hero__bubble-bild:first-child,
  .hero__kategorie-label:first-child { opacity: 1; }
}

/* Eyebrow */
.hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.35rem 1.1rem;
  border-radius: var(--radius-btn);
  margin-bottom: 1.5rem;
}

/* H1 */
.hero__titel {
  font-size: clamp(2.1rem, 5.5vw, 3.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
  line-height: 1.13;
  text-shadow: 0 2px 16px rgba(0,0,0,0.22);
}

.hero__titel-highlight { position: relative; }

.hero__titel-highlight::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 70%; height: 2px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
}

/* Subheadline */
.hero__untertitel {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin-bottom: 2.25rem;
  line-height: 1.75;
  text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}

.hero__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0; }

/* Hero-Stats-Leiste — sitzt jetzt unter beiden Spalten */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  padding: 1.25rem 1.75rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-karte);
  width: fit-content;
  max-width: 100%;
  margin-top: 3rem;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hero__stat-zahl {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  line-height: 1;
}

.hero__stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}

.hero__stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .hero__stat-divider { display: none; }
  .hero__stats { gap: 1.25rem 0; }
}

/* Wave-Trenner */
.hero__wave {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
}
.hero__wave svg { width: 100%; height: clamp(40px, 4vw, 56px); display: block; }


/* ============================================================
   7. SEKTIONS-KOPF (wiederverwendbar)
   ============================================================ */
.sektion__obertitel {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sunset-start);
  margin-bottom: 0.4rem;
}

/* Variante für die Anwendung über dem Sunset-Verlauf
   (Hero, Kontakt-CTA): glasartige Pille mit weißer Schrift,
   damit die Beschriftung auf jedem Hintergrund-Bewegungsstand lesbar bleibt. */
.sektion__obertitel--auf-verlauf {
  background: rgba(255,255,255,0.18);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1rem;
}

.sektion__titel {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
}

/* Gradient-Balken */
.sektion__titel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 2px;
  background: var(--sunset-grad);
  border-radius: 2px;
}

/* Zentrierte Variante: Balken mittig */
.sektion__titel--zentriert::after { left: 50%; transform: translateX(-50%); }

.sektion__untertitel {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Gradient-Text-Utility */
.text--gradient {
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sunset-start);
}


/* ============================================================
   8. ANGEBOT-KARTEN
   ============================================================ */
.karte--angebot {
  position: relative;
  background: #fff;
  border-radius: var(--radius-karte);
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid rgba(0,0,0,0.06);
  /* height: auto — jede Karte wächst nur für sich */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--schatten-karte);
  cursor: pointer;
}

.karte--angebot:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}

/* Text + Link standardmäßig eingeklappt */
.karte--angebot .karte__text {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height 0.4s ease, opacity 0.32s ease, margin-bottom 0.3s ease;
}

.karte--angebot .karte__link {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.32s ease;
}

/* Aufklappen bei Hover / Fokus */
.karte--angebot:hover .karte__text,
.karte--angebot:focus-within .karte__text {
  max-height: 140px;
  opacity: 1;
  margin-bottom: 1rem;
}

.karte--angebot:hover .karte__link,
.karte--angebot:focus-within .karte__link {
  max-height: 48px;
  opacity: 1;
}

.karte__icon-kreis {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sunset-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.karte__titel {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.karte__text {
  font-size: 0.93rem;
  color: var(--muted);
  flex-grow: 1;
  margin-bottom: 1.25rem;
}

.karte__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sunset-end);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: gap 0.2s ease, color 0.2s ease;
  margin-top: auto;
}

.karte__link:hover {
  color: var(--sunset-start);
  gap: 4px;
}

/* Stretch-Trick: gesamte Karte klickbar machen */
.karte__link--vollflaeche::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-karte);
}

/* Verleih-Karten-Link */
.verleih-karte__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sunset-end);
  text-decoration: none;
  margin-top: 0.75rem;
  transition: color 0.2s ease;
}

.verleih-karte__link:hover { color: var(--sunset-start); }

/* Stretch über die gesamte Verleih-Karte */
.verleih-karte__link--vollflaeche::after {
  content: '';
  position: absolute;
  inset: 0;
}


/* ============================================================
   UNTERSEITEN — gemeinsame Elemente
   ============================================================ */

/* Bild auf Unterseiten */
.unterseite__bild {
  width: 100%;
  border-radius: var(--radius-karte);
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(0,0,0,0.1);
}

/* Aufzählungsliste mit Gradient-Icons */
.unterseite__liste {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.unterseite__liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}

.unterseite__liste .bi-check-circle-fill {
  color: var(--sunset-end);
  font-size: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* Geräte-Übersichtskacheln (auf Medienverleih-Seite) */
.unterseite__geraete-karte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}

.unterseite__geraete-karte i:first-child {
  font-size: 1.3rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sunset-start);
  flex-shrink: 0;
}

.unterseite__geraete-karte span { flex-grow: 1; }

.unterseite__geraete-pfeil {
  font-size: 0.9rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.unterseite__geraete-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-karte-hover);
  color: var(--sunset-end);
}

.unterseite__geraete-karte:hover .unterseite__geraete-pfeil {
  transform: translateX(3px);
  color: var(--sunset-end);
}

/* Info-Karten (3er-Grid auf Unterseiten) */
.unterseite__info-karte {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-karte);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--schatten-karte);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unterseite__info-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}

.unterseite__info-icon {
  font-size: 1.75rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--sunset-start);
  display: block;
  margin-bottom: 0.75rem;
}

.unterseite__info-titel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.unterseite__info-text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* Rechtliche Seiten (Impressum, Datenschutz) */
.rechtlich__inhalt {
  max-width: 780px;
}

.rechtlich__abschnitt-titel {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bg-soft);
}

.rechtlich__abschnitt-untertitel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
  font-family: var(--font-titel);
}

.rechtlich__inhalt p {
  color: var(--muted);
  line-height: 1.8;
}

.rechtlich__inhalt a {
  color: var(--sunset-end);
  text-decoration: none;
}

.rechtlich__inhalt a:hover { text-decoration: underline; }

/* Hinweis-Box auf Datenschutzseite */
.rechtlich__hinweis {
  background: rgba(255, 138, 0, 0.08);
  border-left: 4px solid var(--sunset-start);
  border-radius: 0 var(--radius-karte) var(--radius-karte) 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--ink) !important;
  margin-bottom: 2rem;
}

/* ============================================================
   9. VERLEIH-KARTEN
   ============================================================ */
/* ── Hover-Image-Cards (neue Version) ─────────────────────── */
.verleih-hover-karte {
  border-radius: var(--radius-karte);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--schatten-karte);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  display: flex;
  flex-direction: column;
}
.verleih-hover-karte:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}
.verleih-hover-karte__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
}
.verleih-hover-karte__bild-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex-shrink: 0;
}
.verleih-hover-karte__bild {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.verleih-hover-karte:hover .verleih-hover-karte__bild {
  transform: scale(1.07);
}
.verleih-hover-karte__body {
  padding: 0.9rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
}
.verleih-hover-karte__titel {
  color: var(--ink);
  font-family: var(--font-titel);
  font-size: 0.97rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.verleih-hover-karte__hover-inhalt {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
  opacity: 0;
}
.verleih-hover-karte:hover .verleih-hover-karte__hover-inhalt,
.verleih-hover-karte:focus-within .verleih-hover-karte__hover-inhalt {
  max-height: 120px;
  opacity: 1;
}
.verleih-hover-karte__text {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0.5rem 0 0.5rem;
}
.verleih-hover-karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--sunset-end);
  font-size: 0.8rem;
  font-weight: 600;
}
/* Touch-Geräte: Text immer sichtbar */
@media (hover: none) {
  .verleih-hover-karte__hover-inhalt { max-height: 120px; opacity: 1; }
}
/* Badge-Position auf den neuen Karten */
.verleih-hover-karte .verleih-karte__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
}

.verleih-karte {
  position: relative; /* Anker für den Stretch-Link */
  background: #fff;
  border-radius: var(--radius-karte);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--schatten-karte);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.verleih-karte:hover {
  transform: translateY(-5px);
  box-shadow: var(--schatten-karte-hover);
}

.verleih-karte__bild-wrapper {
  position: relative;
  overflow: hidden;
  /* Standardmäßig eingeklappt — kein Bild sichtbar */
  max-height: 0;
  flex-shrink: 0;
  transition: max-height 0.45s ease;
}

/* Bild auf Hover einblenden */
.verleih-karte:hover .verleih-karte__bild-wrapper,
.verleih-karte:focus-within .verleih-karte__bild-wrapper {
  max-height: 200px;
}

.verleih-karte__bild {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.verleih-karte:hover .verleih-karte__bild { transform: scale(1.05); }

/* Badge auf dem Bild */
.verleih-karte__badge {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  background: var(--sunset-grad);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-btn);
}

.verleih-karte__badge--neu {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.verleih-karte__inhalt {
  padding: 0.85rem 1rem 0.9rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.verleih-karte__titel {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0;
}

.verleih-karte__text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  /* Standardmäßig eingeklappt */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height 0.4s ease, opacity 0.32s ease, margin-bottom 0.3s ease;
}

/* Verleih-Link ebenfalls eingeklappt */
.verleih-karte .verleih-karte__link {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.32s ease, margin-top 0.3s ease;
}

/* Aufklappen bei Hover */
.verleih-karte:hover .verleih-karte__text,
.verleih-karte:focus-within .verleih-karte__text {
  max-height: 120px;
  opacity: 1;
  margin-bottom: 0.25rem;
}

.verleih-karte:hover .verleih-karte__link,
.verleih-karte:focus-within .verleih-karte__link {
  max-height: 48px;
  opacity: 1;
  margin-top: 0.65rem;
}


/* ============================================================
   10. FORTBILDUNGS-KARTEN (Termin-Cards)
   ============================================================ */
.termin-karte {
  background: #fff;
  border-radius: var(--radius-karte);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.termin-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}

/* Datum-Block oben: farbiger Gradient-Streifen */
.termin-karte__datum {
  background: var(--sunset-grad);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-shrink: 0;
}

.termin-karte__tag {
  font-family: var(--font-titel);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.termin-karte__monat {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.termin-karte__inhalt {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Kategorie-Chip */
.termin-karte__kategorie {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(229,46,113,0.08);
  color: var(--sunset-end);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-btn);
  margin-bottom: 0.6rem;
}

.termin-karte__titel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.termin-karte__text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.termin-karte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.termin-karte__meta span { display: flex; align-items: center; gap: 0.15rem; }

.termin-karte__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: var(--sunset-grad);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  width: fit-content;
  margin-top: auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.termin-karte__link:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(229,46,113,0.3);
}

/* Termine "Coming Soon" Karte */
.termine-bald {
  background: linear-gradient(135deg, rgba(255,182,39,0.08) 0%, rgba(229,46,113,0.08) 100%);
  border: 2px dashed rgba(229,46,113,0.25);
  border-radius: 20px;
  padding: 3.5rem 2rem;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.termine-bald__icon {
  font-size: 3rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.25rem;
  display: block;
}

.termine-bald__titel {
  font-family: var(--font-titel);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--dunkel);
  margin-bottom: 0.9rem;
}

.termine-bald__text {
  color: var(--muted);
  line-height: 1.8;
  font-size: 0.98rem;
  margin-bottom: 0;
}


/* ============================================================
   11. COUNTER / ZAHLEN-SEKTION
   ============================================================ */
.counter-karte {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.counter-karte__zahl {
  font-family: var(--font-titel);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

.counter-karte__einheit {
  font-family: var(--font-titel);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
}

.counter-karte__beschreibung {
  font-size: 0.82rem;
  color: var(--muted);
  display: block;
}


/* ============================================================
   12. ÜBER UNS
   ============================================================ */
.ueber-uns__text {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 0.85rem;
}

.ueber-uns__highlights {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.ueber-uns__highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.93rem;
  color: var(--ink);
  font-weight: 500;
}

.ueber-uns__highlight-icon {
  color: var(--sunset-end);
  font-size: 1.1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

/* Bild mit floating Badge */
.ueber-uns__bild-wrapper {
  position: relative;
  border-radius: var(--radius-karte);
  overflow: visible;
}

.ueber-uns__bild {
  width: 100%;
  border-radius: var(--radius-karte);
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.ueber-uns__bild-badge {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  background: var(--sunset-grad);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-karte);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(229,46,113,0.3);
}

.ueber-uns__bild-badge i { font-size: 1.2rem; }

/* Team-Karten */
.team-karte {
  background: #fff;
  border-radius: var(--radius-karte);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 2rem 1.5rem;
}

.team-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}

.team-karte__foto-wrapper {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.25rem;
  border: 3px solid transparent;
  background: var(--sunset-grad);
  padding: 3px;
}

.team-karte__foto {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-karte__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.2rem;
}

.team-karte__rolle {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.team-karte__kontakt {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.team-karte__kontakt-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(229,46,113,0.08);
  color: var(--sunset-end);
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.team-karte__kontakt-link:hover {
  background: var(--sunset-grad);
  color: #fff;
  transform: translateY(-2px);
}


/* ============================================================
   13. KONTAKT-SEKTION (Gradient + Glasmorphism)
   ============================================================ */
.kontakt-sektion {
  position: relative;
  padding: 5rem 0;
  background: var(--sunset-grad-rich);
  background-size: 300% 300%;
  animation: gradient-flow 12s ease infinite;
  overflow: hidden;
}

.kontakt-sektion__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 0;
}

.kontakt-sektion__titel {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: #fff;
  font-family: var(--font-titel);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.kontakt-sektion__untertitel {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  margin: 0 auto;
}

/* Glasmorphism-Karte */
/* Organische Wellen-Übergänge zwischen Sektionen */
.sektion__wave--oben,
.sektion__wave--unten {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.sektion__wave--oben { top: -1px; }
.sektion__wave--unten { bottom: -1px; }
.sektion__wave--oben svg,
.sektion__wave--unten svg {
  width: 100%;
  height: clamp(22px, 2.8vw, 40px);
  display: block;
}

.kontakt-karte {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-karte);
  padding: 1rem 1.4rem;
  color: #fff;
  height: 100%;
  transition: transform 0.3s ease, background 0.2s ease;
}

.kontakt-karte:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-4px);
}

.kontakt-karte__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 auto 0.65rem;
}

.kontakt-karte__titel {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  margin-bottom: 0.35rem;
}

.kontakt-karte__wert {
  display: block;
  font-family: var(--font-titel);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.4rem;
  word-break: break-word;
  transition: opacity 0.2s ease;
}

.kontakt-karte__wert:hover { opacity: 0.8; color: #fff; }

.kontakt-karte__adresse { font-size: 1rem; line-height: 1.6; }

.kontakt-karte__hinweis {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 0;
}

/* Öffnungszeiten */
.oeffnungszeiten {
  padding: 1.5rem 2rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-karte);
  /* Volle Breite passend zu den 3 Kontakt-Karten darüber */
  display: block;
  width: 100%;
}

.oeffnungszeiten__titel {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  margin-bottom: 0.5rem;
}

.oeffnungszeiten__zeile {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
}

.oeffnungszeiten__zeile strong { color: #fff; }

.oeffnungszeiten__trenner {
  color: rgba(255,255,255,0.35);
  font-size: 1.2rem;
}

/* Wrapper für Öffnungszeiten-Block zentriert */
.oeffnungszeiten-wrapper {
  display: flex;
  justify-content: center;
}


/* ============================================================
   14. FOOTER
   ============================================================ */
.footer {
  background-color: var(--ink);
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.footer__logo {
  display: block;
  text-decoration: none;
  margin-bottom: 1.25rem;
  position: relative;
}

.footer__logo-img {
  height: auto;
  max-width: 300px;
  width: 100%;
  display: block;
  filter: brightness(0) invert(1); /* weiß auf dunklem Footer */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Logo-Text-Span ausblenden (Text ist im SVG eingebettet) */
.footer__logo-text {
  display: none;
}

.footer__beschreibung {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.footer__adresse {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
}
.footer__ort {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.footer__ort:first-child { margin-top: 0; }

.footer__spalten-titel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body);
  margin-bottom: 1rem;
}

.footer__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer__link {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__link:hover { color: #fff; }

.footer__untere-zeile {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer__copy {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-body);
}


/* ============================================================
   RESPONSIVE — Professional Agency-Level Polish
   ============================================================ */

/* ---- Globale Verbesserungen ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Scroll-Offset damit fixe Nav Ankerziele nicht verdeckt */
  scroll-padding-top: 90px;
}

*,
*::before,
*::after {
  /* Kein blaues Highlight auf Touch-Geräten */
  -webkit-tap-highlight-color: transparent;
}

/* Hover-Effekte NUR auf Geräten mit Maus aktivieren */
@media (hover: hover) {
  .karte--angebot:hover     { transform: translateY(-4px); box-shadow: var(--schatten-karte-hover); }
  .verleih-karte:hover      { transform: translateY(-5px); box-shadow: var(--schatten-karte-hover); }
  .verleih-karte:hover .verleih-karte__bild { transform: scale(1.05); }
  .termin-karte:hover       { transform: translateY(-4px); box-shadow: var(--schatten-karte-hover); }
  .team-karte:hover         { transform: translateY(-4px); box-shadow: var(--schatten-karte-hover); }
  .unterseite__info-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-karte-hover); }
  .unterseite__geraete-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-karte-hover); }
  .btn--primaer:hover       { transform: translateY(-2px); }
  .btn--weiss:hover         { transform: translateY(-3px); }
  .btn--ghost:hover         { transform: translateY(-3px); }
  .kontakt-karte:hover      { transform: translateY(-4px); }
}

/* Touch: Karten direkt ohne Hover */
@media (hover: none) {
  .karte--angebot,
  .verleih-karte,
  .termin-karte,
  .team-karte,
  .unterseite__info-karte { box-shadow: var(--schatten-karte); }
}

/* ---- NAVIGATION ---- */

/* Slide-Transition für Mobile Collapse */
@media (max-width: 1199.98px) {
  .navbar-collapse.collapsing {
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hamburger: größeres Touch-Target */
  .nav__hamburger {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Dropdown innerhalb des Mobile-Menüs flach darstellen */
  .navbar-collapse .nav__dropdown {
    box-shadow: none;
    background: var(--bg-soft);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    margin: 0.25rem 0 0.5rem;
  }

  .navbar-collapse .nav__dropdown .dropdown-item {
    font-size: 0.88rem;
    padding: 0.5rem 0.9rem;
  }
}

/* Dropdown: sanfter Erschein-Effekt auf Desktop */
@media (min-width: 1200px) {
  .nav__links .dropdown-menu {
    animation: dropdown-in 0.18s ease forwards;
    transform-origin: top center;
  }
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ---- HERO ---- */
@media (max-width: 767.98px) {
  .hero {
    min-height: auto;
    padding-top: 4.5rem;
    padding-bottom: 0;
    align-items: flex-start;
    /* Gleichmäßiger vertikaler Verlauf auf Mobile — kein Balken */
    background: linear-gradient(to bottom, #ff8a00 0%, #f0472a 45%, #e52e71 100%);
    background-size: auto;
    animation: none;
  }

  .hero__inhalt {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Logo im Hero kleiner */
  .hero__logo {
    height: 60px;
    margin-bottom: 0.85rem;
  }

  .hero__eyebrow {
    font-size: 0.68rem;
    padding: 0.28rem 0.9rem;
    margin-bottom: 0.9rem;
  }

  /* H1 kompakter */
  .hero__titel {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    margin-bottom: 0.75rem;
    line-height: 1.18;
  }

  .hero__untertitel {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.4rem;
  }

  /* Buttons: kompakt, nicht volle Breite */
  .hero__buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .hero__buttons .btn--weiss,
  .hero__buttons .btn--ghost {
    width: auto;
    min-width: 190px;
    max-width: 260px;
    padding: 0.7rem 1.4rem;
    font-size: 0.88rem;
  }

  /* Bubble auf Mobile komplett ausblenden */
  .hero__bubble-spalte {
    display: none !important;
  }

  .hero__stats {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1rem 1.25rem;
  }

  .hero__stat-zahl  { font-size: 1.25rem; }
  .hero__stat-label { font-size: 0.72rem; }
  .hero__stat-divider { display: none; }
}

@media (max-width: 399.98px) {
  .hero__stats { flex-direction: column; gap: 0.6rem; }
}

/* ---- SEKTIONEN ---- */
@media (max-width: 767.98px) {
  .sektion { padding: 3.5rem 0; }

  .sektion__titel {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .sektion__untertitel { font-size: 0.95rem; }

  /* Karten auf Mobile immer ausgeklappt (kein Hover auf Touch-Geräten) */
  .karte--angebot .karte__text,
  .karte--angebot .karte__link {
    max-height: 200px !important;
    opacity: 1 !important;
  }
  .karte--angebot .karte__text { margin-bottom: 1rem !important; }

  .verleih-karte .verleih-karte__bild-wrapper {
    max-height: 160px !important;
  }
  .verleih-karte .verleih-karte__text,
  .verleih-karte .verleih-karte__link {
    max-height: 200px !important;
    opacity: 1 !important;
  }
  .verleih-karte .verleih-karte__text  { margin-bottom: 0.25rem !important; }
  .verleih-karte .verleih-karte__link  { margin-top: 0.65rem !important; }
}

/* ---- ANGEBOT-KARTEN ---- */
@media (max-width: 575.98px) {
  .karte--angebot {
    padding: 1.5rem 1.25rem;
  }

  .karte__icon-kreis {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
}

/* ---- VERLEIH-KARTEN ---- */
/* Bildhöhe wird durch max-height-Transition gesteuert (kein festes height mehr) */

/* ---- TERMIN-KARTEN ---- */
@media (max-width: 575.98px) {
  .termin-karte__tag  { font-size: 2rem; }
  .termin-karte__monat { font-size: 0.9rem; }
  .termin-karte__inhalt { padding: 1.25rem; }
}

/* ---- ZAHLEN / COUNTER ---- */
@media (max-width: 575.98px) {
  .counter-karte { padding: 1.5rem 0.5rem; }
  .counter-karte__zahl { font-size: 2rem; }
  .counter-karte__einheit { font-size: 0.82rem; }
  .counter-karte__beschreibung { font-size: 0.75rem; }
}

/* ---- ÜBER UNS ---- */
@media (max-width: 991.98px) {
  .ueber-uns__bild-badge {
    bottom: -0.75rem;
    left: -0.5rem;
    font-size: 0.78rem;
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 767.98px) {
  .ueber-uns__bild-wrapper { margin-top: 1rem; }
}

/* ---- TEAM-KARTEN ---- */
@media (max-width: 767.98px) {
  /* 2-spaltig auf Tablet */
  .team-karte { padding: 1.5rem 1.25rem; }
}

/* ---- KONTAKT-SEKTION ---- */
@media (max-width: 767.98px) {
  .kontakt-sektion { padding: 3.5rem 0; }

  .kontakt-sektion__titel {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .kontakt-karte { padding: 1.5rem 1.25rem; }

  .oeffnungszeiten {
    padding: 1.1rem 1.25rem;
    width: 100%;
    text-align: center;
  }

  .oeffnungszeiten .row { flex-direction: column; }
  .oeffnungszeiten__trenner { display: none; }
}

/* ---- SEITEN-HERO (Unterseiten) ---- */
@media (max-width: 767.98px) {
  .seiten-hero {
    padding: 6.5rem 0 2.5rem;
  }

  .seiten-hero__titel {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }

  .seiten-hero__untertitel { font-size: 0.95rem; }
  .seiten-hero__icon { width: 52px; height: 52px; font-size: 1.4rem; }
}

/* ---- UNTERSEITEN-BILDER ---- */
@media (max-width: 767.98px) {
  .unterseite__bild {
    border-radius: 10px;
  }
}

/* ---- RECHTLICHE SEITEN ---- */
@media (max-width: 767.98px) {
  .rechtlich__inhalt { max-width: 100%; }
}

/* ---- FOOTER ---- */
@media (max-width: 767.98px) {
  .footer { padding: 3rem 0 1.5rem; }

  .footer__untere-zeile {
    flex-direction: column;
    text-align: center;
    gap: 0.25rem;
  }

  .footer__spalten-titel { margin-top: 0.5rem; }
}

/* ---- BUTTONS — Mindest-Tappgröße 44px ---- */
.btn--primaer,
.btn--weiss,
.btn--ghost {
  min-height: 44px;
}

/* ---- PRINT ---- */
@media print {
  .nav-wrapper,
  .hero__wave,
  .seiten-hero__wave,
  footer { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ---- HOHER KONTRAST (prefers-contrast) ---- */
@media (prefers-contrast: high) {
  :root {
    --muted: #4a5568;
    --schatten-karte: 0 0 0 2px rgba(0,0,0,0.15);
  }

  .karte--angebot,
  .verleih-karte,
  .termin-karte {
    border: 2px solid rgba(0,0,0,0.15);
  }
}

/* ======================================================
   ÜBER UNS — SEITE
   ====================================================== */

/* ---- Intro-Text ---- */
.ueber-uns-seite__intro {
  font-size: 1.0625rem;
  color: var(--muted);
  line-height: 1.8;
  max-width: 65ch;
  margin: 0 auto 1rem;
}

/* ---- Wert-Karten ---- */
.wert-karte {
  background: #fff;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: 2rem 1.75rem;
  text-align: center;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

@media (hover: hover) {
  .wert-karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(229,46,113,0.13);
  }
}

.wert-karte__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sunset-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.6rem;
  color: #fff;
  flex-shrink: 0;
}

.wert-karte__titel {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.wert-karte__text {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 0;
}

/* ---- Team-Profil ---- */
.team-profil__foto-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 56px rgba(0,0,0,0.12);
}

/* Gradient accent frame via ::before */
.team-profil__foto-wrapper::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: var(--sunset-grad);
  z-index: -1;
}

/* Alt variant — reversed gradient direction */
.team-profil__foto-wrapper--alt::before {
  background: linear-gradient(315deg, var(--sunset-start), var(--sunset-end));
}

.team-profil__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  object-fit: cover;
}

.team-profil__name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.team-profil__rolle {
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

.team-profil__bio {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.team-profil__bio p:last-child { margin-bottom: 0; }

.team-profil__schwerpunkte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.team-profil__tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(255,138,0,0.1);
  color: #c45a00;
  border: 1px solid rgba(255,138,0,0.25);
}

.team-profil__kontakt {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.team-profil__kontakt-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s;
}

.team-profil__kontakt-item i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

@media (hover: hover) {
  .team-profil__kontakt-item:hover {
    color: var(--sunset-end);
  }
}

/* ---- Responsive: Über uns ---- */
@media (max-width: 991.98px) {
  .team-profil__foto-wrapper {
    max-width: 340px;
    margin-bottom: 1rem;
  }
}

@media (max-width: 767.98px) {
  .ueber-uns-seite__intro { font-size: 1rem; }
  .team-profil__name { font-size: 1.5rem; }
  .wert-karte { padding: 1.5rem 1.25rem; }
}


/* ============================================================
   3-SCHRITTE-FLOW
============================================================ */
.schritt-karte {
  text-align: center;
  padding: 2.75rem 1.75rem 2rem;
  background: #fff;
  border-radius: var(--radius-karte);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--schatten-karte);
  height: 100%;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.schritt-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}
.schritt-karte__nummer-wrap {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}
.schritt-karte__nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(229,46,113,0.35);
}
.schritt-karte__icon-wrap {
  font-size: 2.2rem;
  margin: 0.25rem 0 1rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.schritt-karte__titel {
  font-family: var(--font-titel);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.schritt-karte__text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0;
}

/* Verbindungspfeil zwischen Schritten auf Desktop */
@media (min-width: 768px) {
  .schritt-karte::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -2rem;
    transform: translateY(-50%);
    font-size: 1.4rem;
    background: var(--sunset-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.5;
  }
  .col-md-4:last-child .schritt-karte::after { display: none; }
}


/* ============================================================
   HOVER-VORSCHAU — Verleih-Karten Bild-Overlay
============================================================ */
.verleih-karte__bild-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,8,40,0.72) 0%, transparent 58%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.verleih-karte__bild-wrapper::after {
  content: 'Details ansehen →';
  position: absolute;
  bottom: 0.9rem;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2;
  pointer-events: none;
}
.verleih-karte:hover .verleih-karte__bild-wrapper::before { opacity: 1; }
.verleih-karte:hover .verleih-karte__bild-wrapper::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================
   EINZUGSGEBIET — Westerwaldkreis
============================================================ */
.einzugsgebiet__bild-wrapper {
  position: relative;
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
.einzugsgebiet__bild-wrapper .unterseite__bild {
  margin: 0;
  border-radius: 0;
}

/* Google-Maps-Karte */
.einzugsgebiet__karte {
  display: block;
  width: 100%;
  height: 420px;
  border: none;
  border-radius: var(--radius-karte);
  filter: grayscale(15%);
  transition: filter 0.3s ease;
}
.einzugsgebiet__karte:hover {
  filter: grayscale(0%);
}

/* "In Google Maps öffnen"-Link über der Karte */
.einzugsgebiet__maps-link {
  display: block;
  position: relative;
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  text-decoration: none;
}
.einzugsgebiet__maps-link::after {
  content: 'In Google Maps öffnen \2197';
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.einzugsgebiet__maps-link:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.einzugsgebiet__pin {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.einzugsgebiet__pin .bi-geo-alt-fill { color: var(--sunset-start); }
.einzugsgebiet__info-karte {
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.einzugsgebiet__info-karte:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
}
.einzugsgebiet__info-karte i {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.einzugsgebiet__info-karte strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.einzugsgebiet__info-karte span {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */

/* Overlay */
#cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 25, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Banner-Wrapper (initial unsichtbar) */
.cookie-banner {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cookie-banner--sichtbar {
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner--sichtbar #cookie-overlay {
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner--versteckt {
  opacity: 0;
  pointer-events: none;
}

/* Die eigentliche Box */
.cookie-banner__box {
  position: relative;
  z-index: 10000;
  background: #fff;
  border-radius: 20px;
  padding: 2.2rem 2.4rem 2rem;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-banner--sichtbar .cookie-banner__box {
  transform: translateY(0) scale(1);
}

/* Emoji-Icon oben */
.cookie-banner__icon {
  font-size: 2.4rem;
  margin-bottom: 0.75rem;
  display: block;
  line-height: 1;
}

/* Titel */
.cookie-banner__titel {
  font-family: var(--font-titel);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

/* Fließtext */
.cookie-banner__text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

/* Link zur Datenschutzerklärung */
.cookie-banner__mehr-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sunset-start);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 1.5rem;
}
.cookie-banner__mehr-link:hover { color: var(--sunset-end); }

/* Button-Reihe */
.cookie-banner__buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
  font-size: 0.88rem;
}

/* Einstellungen-Link */
.cookie-banner__einstellungen-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
  transition: color 0.2s;
}
.cookie-banner__einstellungen-link:hover { color: var(--ink); }

/* Einstellungen-Panel (ausklappbar) */
.cookie-einstellungen-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.cookie-einstellungen-panel--offen {
  max-height: 300px;
  padding-top: 1.1rem;
}

.cookie-einstellung {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--bg-soft);
}
.cookie-einstellung:last-of-type { border-bottom: 1px solid var(--bg-soft); margin-bottom: 1rem; }

.cookie-einstellung__label {
  flex: 1;
}
.cookie-einstellung__name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.cookie-einstellung__beschreibung {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Toggle-Switch */
.cookie-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cookie-toggle__schieber {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s;
}
.cookie-toggle__schieber::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}
.cookie-toggle input:checked + .cookie-toggle__schieber {
  background: var(--sunset-start);
}
.cookie-toggle input:checked + .cookie-toggle__schieber::before {
  transform: translateX(18px);
}
.cookie-toggle input:disabled + .cookie-toggle__schieber {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Responsiv */
@media (max-width: 480px) {
  .cookie-banner__box {
    padding: 1.6rem 1.4rem 1.4rem;
  }
  .cookie-banner__buttons {
    flex-direction: column;
  }
  .cookie-banner__btn {
    width: 100%;
  }
}

/* Outline-Button (im Cookie-Banner: dunkler Rand auf weißem Hintergrund) */
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid rgba(0,0,0,0.18);
  padding: 0.75rem 1.5rem;
  font-size: 0.88rem;
  border-radius: 9999px;
}
.btn--outline:hover, .btn--outline:focus {
  border-color: var(--sunset-start);
  color: var(--sunset-start);
  background: transparent;
  transform: translateY(-2px);
}


/* ============================================================
   20. SCROLL-FORTSCHRITTSBALKEN
   ============================================================ */
#scroll-fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--sunset-grad);
  z-index: 10001;
  pointer-events: none;
  will-change: width;
}


/* ============================================================
   21. FLOATING KONTAKT-BUTTON
   ============================================================ */
.float-kontakt {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1050;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.float-kontakt--sichtbar {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.float-kontakt__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--sunset-grad);
  color: #fff;
  border-radius: var(--radius-btn);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 6px 24px rgba(229,46,113,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.float-kontakt__btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(229,46,113,0.45);
}

.float-kontakt__btn i { font-size: 1.1rem; }

@media (max-width: 767.98px) {
  .float-kontakt { bottom: 1.25rem; right: 1.25rem; }
  .float-kontakt__text { display: none; }
  .float-kontakt__btn { padding: 0.8rem; border-radius: 50%; }
}


/* ============================================================
   22. TIPP-ANIMATION
   ============================================================ */


/* ============================================================
   23. FAQ-AKKORDEON (Kontakt-Seite)
   ============================================================ */
.faq-akkordeon .accordion-item {
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: var(--radius-karte) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  box-shadow: var(--schatten-karte);
}

.faq-akkordeon .accordion-item:last-child { margin-bottom: 0; }

.faq-akkordeon .accordion-button {
  font-family: var(--font-titel);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border-radius: var(--radius-karte) !important;
  padding: 1.1rem 1.4rem;
  box-shadow: none !important;
}

.faq-akkordeon .accordion-button:not(.collapsed) {
  color: var(--sunset-end);
  background: #fff;
}

.faq-akkordeon .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e52e71'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Fokus-Ring nur bei Tastatur-Navigation — beim reinen Maus-Klick
   erschien sonst ein Rahmen, der die geöffnete Antwort „verschoben" wirken ließ. */
.faq-akkordeon .accordion-button:focus { box-shadow: none !important; }
.faq-akkordeon .accordion-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(229,46,113,0.18) !important;
}

.faq-akkordeon .accordion-body {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.75;
  padding: 0 1.4rem 1.2rem;
  background: #fff;
}


/* ============================================================
   24. KONTAKT-SEITE — Infokarte
   ============================================================ */
.kontakt-info-karte {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.kontakt-info-karte__eintrag {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.kontakt-info-karte__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.kontakt-info-karte__eintrag strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.kontakt-link {
  color: var(--sunset-end);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.kontakt-link:hover { color: var(--sunset-start); }


/* ============================================================
   25. FORTBILDUNGS-KATEGORIE-KARTEN
   ============================================================ */
.fortbildung-kategorie-karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fortbildung-kategorie-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-karte-hover);
  border-color: rgba(229,46,113,0.2);
  color: var(--ink);
}

.fortbildung-kategorie-karte--highlight {
  background: linear-gradient(135deg, rgba(255,138,0,0.06) 0%, rgba(229,46,113,0.06) 100%);
  border-color: rgba(229,46,113,0.2);
}

.fortbildung-kategorie-karte__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.fortbildung-kategorie-karte > div strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.fortbildung-kategorie-karte > div span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

.fortbildung-kategorie-karte > .bi-arrow-right {
  color: var(--sunset-end);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fortbildung-kategorie-karte:hover > .bi-arrow-right {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================================
   25. SCROLL-REVEAL
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .kmz-versteckt {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .kmz-sichtbar {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* ============================================================
   26. ORGANISCHE HINTERGRUND-LINIEN
   ============================================================ */
.organische-linien {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.organische-linien svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .organische-linien path {
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    animation: pfad-zeichnen var(--dauer, 5s) ease forwards;
    animation-delay: var(--verzoegerung, 0s);
  }

  @keyframes pfad-zeichnen {
    to { stroke-dashoffset: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .organische-linien path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}


/* ============================================================
   27. NEUE LEITUNG — organische Pille im Hero
============================================================ */
.neuleitung-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 9999px;
  padding: 0.6rem 1.4rem 0.6rem 1rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.45;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.neuleitung-hero-pill:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  transform: translateY(-2px);
}
.neuleitung-hero-pill__icon {
  font-size: 1rem;
  opacity: 0.9;
  flex-shrink: 0;
}
.neuleitung-hero-pill__text {
  color: #fff;
}
.neuleitung-hero-pill__pfeil {
  opacity: 0.75;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.neuleitung-hero-pill:hover .neuleitung-hero-pill__pfeil {
  transform: translateX(3px);
  opacity: 1;
}

/* Made-with-Link im Footer */
.footer__made-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer__made-link:hover { opacity: 0.75; }
.footer__herz {
  color: #e52e71;
}

/* Ankündigungs-Box auf Über-uns-Seite */
.neuleitung-hinweis {
  background: linear-gradient(135deg, rgba(255,138,0,0.08) 0%, rgba(229,46,113,0.08) 100%);
  border: 1.5px solid rgba(229,46,113,0.18);
  border-radius: var(--radius-karte);
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 2.5rem;
}
.neuleitung-hinweis__icon {
  font-size: 1.4rem;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  line-height: 1.3;
}
.neuleitung-hinweis__text {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink);
  line-height: 1.55;
}


/* ============================================================
   KONTAKTFORMULAR
============================================================ */
.kmz-form__label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.kmz-form__label span[aria-hidden] { color: var(--sunset-end); }

.kmz-form__input {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.kmz-form__input:focus {
  outline: none;
  border-color: var(--sunset-end);
  box-shadow: 0 0 0 3px rgba(229,46,113,0.13);
}
.kmz-form__input.kmz-form--invalid {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229,62,62,0.12);
}
.kmz-form__select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.kmz-form__textarea { resize: vertical; min-height: 130px; }

.kmz-form__fehler {
  font-size: 0.8rem;
  color: #e53e3e;
  margin-top: 0.3rem;
  min-height: 1.1em;
}

.kmz-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}
.kmz-form__checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 0.1rem;
  accent-color: var(--sunset-end);
  cursor: pointer;
}
.kmz-form__link { color: var(--sunset-end); text-decoration: underline; }

.kmz-form__submit { min-width: 220px; }

.kmz-form__erfolg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  font-weight: 500;
  margin-top: 1.5rem;
}
.kmz-form__netzfehler {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff5f5;
  border: 1.5px solid #feb2b2;
  color: #c53030;
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  font-weight: 500;
  margin-top: 1.5rem;
}
.kmz-form__optional { font-size: 0.78rem; color: var(--muted); font-weight: 400; }
.kmz-form__hinweis { font-size: 0.78rem; color: var(--muted); text-align: center; }


/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb-nav {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.breadcrumb-nav .breadcrumb {
  margin: 0;
  padding: 0.5rem 0;
  background: none;
  font-size: 0.73rem;
  font-weight: 300;
  color: var(--muted);
}
.breadcrumb-nav .breadcrumb-item a {
  color: var(--muted);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}
.breadcrumb-nav .breadcrumb-item a:hover { opacity: 1; color: var(--sunset-end); }
.breadcrumb-nav .breadcrumb-item.active { color: var(--ink); opacity: 0.55; font-weight: 500; }
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--muted);
  opacity: 0.35;
}


/* ============================================================
   DOWNLOAD-BEREICH
============================================================ */
.download-karte {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-karte);
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: var(--ink);
}
.download-karte:hover {
  border-color: var(--sunset-end);
  box-shadow: 0 6px 24px rgba(229,46,113,0.10);
  transform: translateY(-2px);
  color: var(--ink);
}
.download-karte__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}
.download-karte__icon--pdf  { background: #fff0f0; color: #e53e3e; }
.download-karte__icon--zip  { background: #fffbeb; color: #d69e2e; }
.download-karte__icon--doc  { background: #ebf8ff; color: #2b6cb0; }
.download-karte__icon--link { background: #f0fff4; color: #276749; }
.download-karte__body { flex: 1; min-width: 0; }
.download-karte__titel { font-weight: 600; font-size: 0.95rem; margin: 0 0 0.2rem; }
.download-karte__info  { font-size: 0.8rem; color: var(--muted); margin: 0; }
.download-karte__badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--bg-soft);
  color: var(--muted);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.1rem;
}


/* ============================================================
   SUCHSEITE
============================================================ */
.suche-eingabe-wrap { margin-bottom: 0.75rem; }

.suche-eingabe-feld {
  position: relative;
  display: flex;
  align-items: center;
}
.suche-eingabe-feld__icon {
  position: absolute;
  left: 1.1rem;
  font-size: 1.1rem;
  color: var(--muted);
  pointer-events: none;
}
.suche-eingabe-feld__input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid #e2e8f0;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.suche-eingabe-feld__input:focus {
  border-color: var(--sunset-end);
  box-shadow: 0 0 0 3px rgba(229,46,113,0.12);
}
.suche-eingabe-feld__input::placeholder { color: var(--muted); }

.suche-status { min-height: 1.5rem; margin-bottom: 0.5rem; }
.suche-status__anzahl {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}

/* Hinweis-Zustand */
.suche-hinweis {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.suche-hinweis__icon { font-size: 2.5rem; opacity: 0.25; margin-bottom: 0.75rem; display: block; }
.suche-hinweis__text { font-size: 0.95rem; margin-bottom: 1.25rem; }
.suche-hinweis__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

.suche-chip {
  background: var(--bg-soft);
  border: 1.5px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.suche-chip:hover {
  background: var(--sunset-end);
  border-color: var(--sunset-end);
  color: #fff;
}

/* Kein Ergebnis */
.suche-leer {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.suche-leer__icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: 0.75rem; display: block; }
.suche-leer__text { font-size: 0.95rem; }

/* Ergebniskarten */
.suche-ergebnisse { display: flex; flex-direction: column; gap: 0.75rem; }

.suche-karte {
  display: block;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-karte);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.suche-karte:hover {
  border-color: var(--sunset-end);
  box-shadow: 0 6px 24px rgba(229,46,113,0.10);
  transform: translateY(-2px);
  color: var(--ink);
}
.suche-karte__bread {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sunset-end);
  margin-bottom: 0.25rem;
}
.suche-karte__titel {
  font-family: var(--font-titel);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.suche-karte__desc {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.suche-karte__snippet {
  font-size: 0.83rem;
  color: #64748b;
  line-height: 1.5;
  border-top: 1px solid #f1f5f9;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}
.suche-karte mark {
  background: #fef08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}


/* ============================================================
   NAV-SUCHPANEL
============================================================ */
/* Toggle-Button (Lupe) */
.nav__suche-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Das ausklappbare Panel */
.nav-suchpanel {
  position: fixed;
  left: 0;
  right: 0;
  top: 72px; /* wird per JS gesetzt */
  z-index: 1039;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: none;
  box-shadow: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s;
}
.nav-suchpanel--offen {
  max-height: 420px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Innenbereich */
.nav-suchpanel__inner {
  padding: 1rem 0 1.25rem;
}

/* Eingabezeile */
.nav-suchpanel__eingabe-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.nav-suchpanel__icon {
  color: var(--muted);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.nav-suchpanel__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  padding: 0.3rem 0;
  border-bottom: 2px solid #e2e8f0;
  transition: border-color 0.2s;
}
.nav-suchpanel__input:focus { border-bottom-color: var(--sunset-end); }
.nav-suchpanel__input::placeholder { color: var(--muted); }
.nav-suchpanel__schliessen {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.1rem;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.nav-suchpanel__schliessen:hover { background: var(--bg-soft); color: var(--ink); }

/* Ergebnisliste */
.nav-suche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-suche-item {
  border-top: 1px solid #f8fafc;
}
.nav-suche-item:first-child { border-top: none; }

.nav-suche-item__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.25rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 8px;
  transition: background 0.15s;
}
.nav-suche-item__link:hover,
.nav-suche-item__link:focus { background: var(--bg-soft); color: var(--ink); outline: none; }

.nav-suche-item__icon {
  font-size: 1rem;
  color: var(--sunset-end);
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}
.nav-suche-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-suche-item__titel {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
}
.nav-suche-item__bread {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-suche-item--leer {
  padding: 1rem 0.25rem;
  color: var(--muted);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-suche-item mark {
  background: #fef08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 0.1em;
}

/* Beispiel-/Vorschlag-Chips (angezeigt bei leerer Suche) */
.nav-suche-beispiele {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.25rem 0.5rem;
}
.nav-suche-beispiele__titel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 0.15rem;
}
.nav-suche-chip {
  border: 1.5px solid #e2e8f0;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.nav-suche-chip:hover,
.nav-suche-chip:focus-visible {
  border-color: var(--sunset-end);
  background: rgba(229,46,113,0.06);
  color: var(--sunset-end);
  outline: none;
}


/* ============================================================
   GERÄTEBESTAND-LISTE — kompakte Listenzeilen für Index
   ============================================================ */
.geraet-zeile {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-btn);
  background: var(--bg-soft);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.18s ease, transform 0.18s ease;
}
.geraet-zeile:hover {
  background: #eaecf5;
  transform: translateX(4px);
  color: var(--ink);
}
.geraet-zeile__icon {
  font-size: 1.2rem;
  color: var(--sunset-start);
  flex-shrink: 0;
  opacity: 0.85;
}
.geraet-zeile__info {
  flex: 1;
  min-width: 0;
}
.geraet-zeile__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.geraet-zeile__klasse {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.geraet-zeile__pfeil {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.4;
  flex-shrink: 0;
}

/* ============================================================
   VERLEIH-KARTE V2 — Designed Card, dezent
   ============================================================ */
.vk2 {
  background: #fff;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.vk2:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.11);
  transform: translateY(-3px);
}

/* Bild-Header */
.vk2__bild-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}
.vk2__bild {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vk2:hover .vk2__bild {
  transform: scale(1.05);
}

/* Kategorie-Chip als Overlay auf dem Bild */
.vk2__chip {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: inline-block;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.17rem 0.6rem;
  z-index: 2;
}

/* Karten-Body */
.vk2__body {
  padding: 0.9rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vk2__titel {
  font-family: var(--font-titel);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}
.vk2__text {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0 0 0.65rem;
  flex: 1;
}
.vk2__meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 0.8rem;
  opacity: 0.8;
}
.vk2__meta i { font-size: 0.75rem; }

/* Button — Gradient nur hier als gezielter Akzent */
.vk2__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--sunset-grad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-btn);
  padding: 0.46rem 1rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.vk2__btn:hover {
  opacity: 0.87;
  color: #fff;
  transform: translateY(-1px);
}


/* ============================================================
   NEWS-KARTE — Aktuelles-Section
   ============================================================ */
.news-karte {
  background: #fff;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.5rem 1.75rem 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-karte:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.11);
  transform: translateY(-3px);
}
.news-karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  gap: 0.5rem;
}
.news-karte__kategorie {
  display: inline-block;
  background: var(--sunset-grad);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 0.18rem 0.65rem;
  white-space: nowrap;
}
.news-karte__kategorie--event {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
}
.news-karte__datum {
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
}
.news-karte__titel {
  font-family: var(--font-titel);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.35;
}
.news-karte__text {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 1.1rem;
  flex: 1;
}
.news-karte__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--sunset-end);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease;
  margin-top: auto;
}
.news-karte__link:hover {
  gap: 0.55rem;
  color: var(--sunset-end);
}


/* ============================================================
   BLOG-BEITRAG — aktuelles.html
   ============================================================ */
.blog-beitrag {
  background: var(--bg-soft);
  border-radius: var(--radius-karte);
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 1.5rem;
}
.blog-beitrag__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.blog-beitrag__titel {
  font-family: var(--font-titel);
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.1rem;
  line-height: 1.3;
}
.blog-beitrag__text p {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 1rem;
}
.blog-beitrag__text p:last-child { margin-bottom: 1.25rem; }
.blog-beitrag__text strong { color: var(--ink); }
.blog-trenner {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin: 2.5rem 0;
}

/* ============================================================
   EMPFEHLUNG — Externe Workshops (Index)
============================================================ */
.empfehlung-karte {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.empfehlung-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
  border-color: rgba(229,46,113,0.25);
  color: var(--ink);
}
.empfehlung-karte__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--sunset-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.empfehlung-karte__quelle {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: .4rem;
}
.empfehlung-karte__titel {
  font-family: var(--font-titel);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .6rem;
}
.empfehlung-karte__text {
  font-size: .94rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1rem;
}
.empfehlung-karte__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--sunset-end);
}
@media (max-width: 575.98px) {
  .empfehlung-karte { flex-direction: column; gap: 1rem; padding: 1.5rem; }
}

/* ============================================================
   VERLEIH-ANFRAGE — Ablauf-Infospalte
============================================================ */
.verleih-info {
  background: var(--bg-soft);
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-karte);
  padding: 1.75rem;
  position: sticky;
  top: 100px;
}
.verleih-info__titel {
  font-family: var(--font-titel);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.verleih-info__schritte {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.verleih-info__schritte li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 0.85rem;
}
.verleih-info__schritte li span {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.verleih-info__box {
  background: #fff;
  border-radius: var(--radius-btn);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}
.verleih-info__box-titel {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.verleih-info__box ul {
  list-style: none;
  margin: 0; padding: 0;
}
.verleih-info__box li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.4rem;
}
.verleih-info__box li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sunset-end);
  font-weight: 700;
}
.verleih-info__hinweis {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   KONTAKT — zwei Standort-Karten (Google Maps) übereinander
============================================================ */
.kontakt-karten {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.kontakt-karte-block__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.kontakt-karte-block__label i { color: var(--sunset-end); }

/* ============================================================
   STANDORTE — Kontaktseite
============================================================ */
.standort-karte {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.standort-karte::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sunset-grad);
}
.standort-karte:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-karte-hover);
}
.standort-karte__nr {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--sunset-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .2rem;
}
.standort-karte__ort {
  font-family: var(--font-titel);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.standort-karte__adresse {
  display: flex;
  gap: .7rem;
  font-style: normal;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.standort-karte__adresse i {
  color: var(--sunset-end);
  font-size: 1.1rem;
  margin-top: .15rem;
}
.standort-karte__person {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 0;
  margin-top: auto;
  border-top: 1px solid #eef0f6;
}
.standort-karte__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  padding: 2px;
  background: var(--sunset-grad);
  flex-shrink: 0;
}
.standort-karte__person-label {
  display: block;
  font-size: .78rem;
  color: var(--muted);
}
.standort-karte__person-name {
  font-size: 1rem;
  color: var(--ink);
}
.standort-karte__maps {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--sunset-end);
  text-decoration: none;
}
.standort-karte__maps:hover { text-decoration: underline; }

/* ============================================================
   EXTERNE WORKSHOPS — eigene Seite (mehrfarbig)
============================================================ */
.workshop-intro {
  background: #fff;
  padding: 8rem 0 3rem;
  position: relative;
}
/* On-Brand-Akzentstreifen: Sunset → Pink → Violett (im Gradient-Bereich) */
.workshop-intro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,#ff8a00 0%, #e52e71 55%, #7b2ff7 100%);
}
.workshop-intro__obertitel {
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.workshop-intro__titel {
  font-family: var(--font-titel);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}
.workshop-intro__lead {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.workshop-intro__lead strong { color: var(--ink); }
.workshop-intro__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.workshop-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, filter .15s ease;
}
.workshop-chip:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.workshop-chip--coding { background: linear-gradient(135deg,#ff8a00,#e52e71); box-shadow: 0 4px 16px rgba(229,46,113,.32); }
.workshop-chip--mint   { background: linear-gradient(135deg,#ffd000,#ff2e9a 50%,#7b2ff7); box-shadow: 0 4px 16px rgba(255,46,154,.30); }
.workshop-chip--medien { background: linear-gradient(135deg,#7b2ff7,#e0218a); box-shadow: 0 4px 16px rgba(123,47,247,.30); }

/* Themengruppen mit eigenem Akzent */
.workshop-gruppe { margin-bottom: 3.5rem; scroll-margin-top: 90px; }
.workshop-gruppe:last-of-type { margin-bottom: 1rem; }
.workshop-gruppe--coding { --akzent: linear-gradient(135deg,#ff8a00,#e52e71); --akzent-solid:#e52e71; --akzent-border: rgba(229,46,113,.3);  --akzent-glow: rgba(229,46,113,.33); }
.workshop-gruppe--mint   { --akzent: linear-gradient(135deg,#ffd000,#ff2e9a 50%,#7b2ff7); --akzent-solid:#d61f8c; --akzent-border: rgba(255,46,154,.32); --akzent-glow: rgba(255,46,154,.30); }
.workshop-gruppe--medien { --akzent: linear-gradient(135deg,#7b2ff7,#e0218a); --akzent-solid:#7b2ff7; --akzent-border: rgba(123,47,247,.3); --akzent-glow: rgba(123,47,247,.30); }

.workshop-gruppe__kopf {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #eef0f6;
}
.workshop-gruppe__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--akzent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 6px 18px var(--akzent-glow);
}
.workshop-gruppe__titel {
  font-family: var(--font-titel);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .15rem;
}
.workshop-gruppe__sub { font-size: .88rem; color: var(--muted); margin: 0; }

/* Karten erben den Gruppen-Akzent */
.workshop-gruppe .empfehlung-karte__icon { background: var(--akzent); box-shadow: 0 6px 18px var(--akzent-glow); }
.workshop-gruppe .empfehlung-karte__quelle {
  background: var(--akzent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.workshop-gruppe .empfehlung-karte__cta { color: var(--akzent-solid); }
.workshop-gruppe .empfehlung-karte:hover { border-color: var(--akzent-border); }

.workshop-hinweis {
  margin-top: 1rem;
  background: var(--bg-soft);
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: .88rem;
}

/* ============================================================
   FOOTER — organischer Übergang in den dunklen Footer
   (Wellen-Element direkt vor dem Footer, auf allen Seiten)
============================================================ */
.footer-wave {
  line-height: 0;
  /* Welle ÜBER die letzte Section ziehen, damit deren Hintergrund durch die
     transparenten Wellen-Bereiche scheint (kein weißer Balken bei farbigen
     Sections wie der Kontakt-Sektion auf der Startseite). */
  margin-top: -42px;
  margin-bottom: -1px;   /* nahtloser Anschluss an den Footer */
  position: relative;
  z-index: 3;
  pointer-events: none;
}
.footer-wave svg {
  display: block;
  width: 100%;
  height: 42px;
}

/* ============================================================
   MEDIENKONZEPT — Prozess-Schritte
============================================================ */
.medkonz-schritt {
  background: #fff;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
  padding: 2rem 1.5rem 1.75rem;
  height: 100%;
  position: relative;
}

.medkonz-schritt__nr {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sunset-grad);
  color: #fff;
  font-family: var(--font-titel);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.medkonz-schritt__titel {
  font-family: var(--font-titel);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.medkonz-schritt__text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   NEWSLETTER — Anmelde-Section
============================================================ */
.newsletter-section {
  background: var(--sunset-grad-rich);
  padding: 4rem 0;
  position: relative;
}

.newsletter-section__titel {
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.newsletter-section__sub {
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 520px;
}

.newsletter-form__input {
  flex: 1 1 260px;
  padding: 0.75rem 1.1rem;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  background: rgba(255,255,255,0.15);
  color: #fff;
  outline: 2px solid transparent;
  transition: background 0.2s, outline-color 0.2s;
}

.newsletter-form__input::placeholder {
  color: rgba(255,255,255,0.65);
}

.newsletter-form__input:focus {
  background: rgba(255,255,255,0.22);
  outline-color: rgba(255,255,255,0.5);
}

.newsletter-form__btn {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  border: 2px solid #fff;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--sunset-start);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.newsletter-form__btn:hover {
  background: transparent;
  color: #fff;
}

.newsletter-hinweis {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.6rem;
}

.newsletter-hinweis a {
  color: rgba(255,255,255,0.8);
  text-decoration: underline;
}

/* Placeholder-Variante (ohne Backend) */
.newsletter-placeholder {
  background: var(--bg-soft);
  border: 1.5px dashed #c8d0e0;
  border-radius: var(--radius-karte);
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--muted);
}

.newsletter-placeholder__icon {
  font-size: 2.2rem;
  opacity: 0.4;
  display: block;
  margin-bottom: 0.75rem;
}