/* ==========================================================================
   Schmiel Consulting – Design-System & Komponenten
   --------------------------------------------------------------------------
   Aufbau:
   1. Design-Tokens (CSS Custom Properties)
   2. Basis / Reset
   3. Layout-Utilities (Container, Sektionen, Raster)
   4. Header & Navigation
   5. Buttons & Links
   6. Hero
   7. Karten & Sektions-Komponenten
   8. Reels
   9. Formulare
   10. FAQ (details/summary)
   11. Footer
   12. Hilfsklassen, Barrierefreiheit, Motion
   Breakpoints (Referenz, da Custom Properties in Media Queries nicht
   verwendet werden können):
     - klein:   bis 559px
     - mittel:  560px – 899px
     - gross:   900px – 1199px
     - xl:      ab 1200px
   ========================================================================== */

/* 1. Design-Tokens
   -------------------------------------------------------------------- */
:root {
  /* Marken-Gold: exakt aus der Logo-Datei ermittelt (Diamant-Bildmarke,
     dominante Farbe rgb(255,188,87)). Einheitliche Quelle für alle
     primären Buttons und CTA-Elemente der Website. */
  --brand-gold: #ffbc57;
  --brand-gold-hover: #ffa824;  /* etwas dunklerer Goldton für Hover-Zustände */
  --brand-dark: #151515;
  --brand-white: #ffffff;

  /* Farben */
  --color-ink: #161c33;          /* Überschriften, dunkle Flächen */
  --color-text: #2e3448;         /* Fließtext */
  --color-muted: #5a6072;        /* Nebentexte */
  --color-bg: #ffffff;           /* Seitenhintergrund */
  --color-surface: #f8f5ee;      /* warme Sektionen (passend zu den Fotos) */
  --color-surface-2: #f3eee4;    /* Karten auf warmen Flächen */
  --color-border: #e7e2d6;       /* Linien und Rahmen */
  --color-navy: #1e2749;         /* Markenfarbe dunkel */
  --color-navy-2: #2c3862;       /* Markenfarbe dunkel, heller */
  --color-accent: var(--brand-gold);  /* Bernstein/Logo-Gold (Bildmarke) */
  --color-accent-soft: #ffcc80;  /* helleres Gold für Text/Akzente auf dunklem Grund */
  --color-accent-text: #a96000;  /* dunkleres Gold für Text/Icons auf hellem Grund */
  --color-error: #b3261e;
  --color-success: #1e6b3a;
  --color-focus: #2c5bd9;

  /* Typografie: Systemschriften, keine externen Dienste */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.375rem);
  --lh-tight: 1.15;
  --lh-normal: 1.65;

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(22, 28, 51, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(22, 28, 51, 0.14);
  --shadow-lg: 0 18px 48px -16px rgba(22, 28, 51, 0.22);

  /* Sonstiges */
  --header-height: 92px;
  --topbar-height: 44px;
  --container-max: 1160px;
  --container-max-wide: 1360px;
  --transition: 180ms ease;
}

/* 2. Basis / Reset
   -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  color: var(--color-ink);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p, ul, ol {
  margin: 0 0 var(--space-4);
}

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

a {
  color: var(--color-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-ink);
}

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

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* 3. Layout-Utilities
   -------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--wide {
  max-width: var(--container-max-wide);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section--surface {
  background: var(--color-surface);
}

.section--navy {
  background: var(--color-navy);
}

.section--navy h2,
.section--navy h3 {
  color: #fff;
}

.section--navy p {
  color: #d9dce8;
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

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

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

.lead {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  max-width: 42rem;
}

/* 4. Topbar, Header & Navigation
   -------------------------------------------------------------------- */
.topbar {
  background: #fffdf9;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xs);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--topbar-height);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.topbar__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-muted);
  background: var(--color-surface-2);
  transition: color var(--transition), background var(--transition);
}

.topbar__social a:hover {
  color: var(--color-ink);
  background: var(--color-accent);
}

.topbar__social svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.topbar__info {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, var(--space-5));
  margin-left: auto;
  color: var(--color-muted);
  white-space: nowrap;
}

.topbar__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
}

.topbar__contact svg {
  width: 14px;
  height: 14px;
  fill: var(--color-accent-text);
}

.topbar__contact:hover { color: var(--color-accent-text); }

/* WhatsApp: eigenständiger, hochwertiger Icon-Button – keine zweite
   ausgeschriebene Telefonnummer, damit die Unterscheidung zu "Telefon"
   auf den ersten Blick eindeutig ist. */
.topbar__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-surface-2);
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}

.topbar__whatsapp svg {
  width: 15px;
  height: 15px;
  fill: #25d366;
}

.topbar__whatsapp:hover {
  background: #e6f8ec;
  transform: translateY(-1px);
}

.topbar__hours {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  padding-left: clamp(0.9rem, 1.6vw, var(--space-5));
  border-left: 1px solid var(--color-border);
}

@media (max-width: 899px) {
  .topbar__hours { display: none; }
}

@media (max-width: 699px) {
  .topbar__contact span { display: none; }
  .topbar__contact svg { width: 16px; height: 16px; }
  /* Mobil: Kontaktleiste auf Telefon- und WhatsApp-Symbol reduzieren */
  .topbar__social { display: none; }
}

@media (max-width: 480px) {
  .topbar__inner { gap: var(--space-3); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Hintergrund/Weichzeichner bewusst auf einer eigenen ::before-Ebene statt
   direkt auf dem sticky-positionierten Element: Firefox' WebRender-Compositor
   stellt backdrop-filter in Kombination mit position:sticky auf ein und
   demselben Element unzuverlässig dar (bekannter Rendering-Bug, siehe u.a.
   Mozilla Bugzilla #1803813) und kann die Fläche dabei komplett schwarz statt
   hell/transparent zeigen. Ausgelagert auf ein eigenes ::before bleibt der
   helle Frost-Effekt in allen Browsern identisch. background-color allein
   (ohne Blur) ist zudem bereits hell/deckend genug als Fallback, falls
   backdrop-filter in einem Browser gar nicht greifen sollte. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, var(--space-5));
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-ink);
  margin-right: auto;
  flex-shrink: 0;
}

.brand__logo {
  height: 38px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 560px) {
  .brand__logo { height: 42px; }
}

@media (min-width: 1200px) {
  .brand__logo { height: 46px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.75vw, 0.85rem);
  flex-shrink: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 0.5vw, 0.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* Header-CTA etwas kompakter als andere große Buttons, damit die
   Navigation auch auf schmaleren Desktop-Fenstern (ab 1200px) nicht
   überläuft. */
.site-nav > a.btn.btn--accent {
  padding: 0.65rem 0.85rem;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* Dezenter WhatsApp-Button im Header, neben dem Erstgespräch-CTA */
.header-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-surface-2);
  color: var(--color-ink);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.header-whatsapp svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.header-whatsapp:hover {
  background: var(--color-accent);
  transform: translateY(-1px);
}

.header-whatsapp[hidden] { display: none; }

.site-nav__list a {
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.site-nav__list a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.lang-switch a,
.lang-switch span[aria-current] {
  text-decoration: none;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
}

.lang-switch span[aria-current] {
  color: var(--color-ink);
  background: var(--color-surface-2);
}

.lang-switch a:hover {
  color: var(--color-ink);
}

.nav-toggle {
  display: none;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.nav-toggle__bars {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--transition);
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* Mobile Navigation
   Schwelle bewusst höher als üblich (1199px statt 991px): Der volle
   Marken-Schriftzug im Header braucht mehr Breite als das frühere
   kleine Icon+Text-Logo, damit die Navigation nie quetscht oder
   überläuft. */
@media (max-width: 1299px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) clamp(1.25rem, 4vw, 2.5rem) var(--space-6);
    gap: var(--space-4);
  }

  .site-nav.is-open { display: flex; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list a {
    display: block;
    padding: 0.8rem 0.2rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-base);
  }

  .site-nav__list a[aria-current="page"] {
    border-bottom-color: var(--color-border);
  }

  .site-nav .btn { justify-content: center; }
}

/* 5. Buttons & Links
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primäre Buttons: einheitlich im Logo-Gold (--brand-gold), site-weit */
.btn--primary,
.btn--accent {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border-color: var(--brand-gold);
}

.btn--primary:hover,
.btn--accent:hover {
  background: var(--brand-gold-hover);
  color: var(--brand-dark);
  border-color: var(--brand-gold-hover);
}

/* Sekundäre Buttons: zurückhaltend, füllen sich beim Hover mit Gold */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border-color: var(--brand-gold);
}

.btn--light {
  background: #fff;
  color: var(--color-ink);
}

.btn--light:hover { color: var(--color-ink); }

.btn--lg {
  padding: 1.05rem 2rem;
  font-size: var(--fs-base);
}

.arrow-link {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.arrow-link::after {
  content: "→";
  transition: transform var(--transition);
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* 6. Hero
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 6%, rgba(255, 188, 87, 0.12) 0%, rgba(255, 188, 87, 0) 45%),
    linear-gradient(180deg, #fdfbf6 0%, var(--color-surface) 100%);
}

/* Sehr feine Punktraster-Struktur für Tiefenwirkung, kaum wahrnehmbar */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23161c33' fill-opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* dezente Hintergrundstruktur: großer, sehr blasser Lichtakzent hinter dem Team */
.hero::after {
  content: "";
  position: absolute;
  top: 4%;
  right: -10%;
  width: 640px;
  height: 640px;
  max-width: 60vw;
  max-height: 60vw;
  background: radial-gradient(circle, rgba(255, 188, 87, 0.16) 0%, rgba(255, 188, 87, 0) 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 7rem);
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 0.92fr 1.08fr;
  }
}

.hero h1 {
  margin-bottom: var(--space-5);
  font-size: clamp(2.375rem, 1.6rem + 3.2vw, 3.75rem);
  line-height: 1.1;
  max-width: 16ch;
}

.hero__highlight {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  max-width: 34rem;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

/* Hero-Buttons: hochwertiger als die Standard-Pill-Buttons – moderate
   Ecken statt voller Pille, einheitliches Logo-Gold, weicher Hover. */
.btn--hero-primary {
  padding: 1.05rem 1.9rem;
  border-radius: 12px;
  background: var(--brand-gold);
  color: var(--brand-dark);
  border: 2px solid var(--brand-gold);
  box-shadow: var(--shadow-md);
}

.btn--hero-primary:hover {
  background: var(--brand-gold-hover);
  border-color: var(--brand-gold-hover);
  box-shadow: var(--shadow-lg);
  color: var(--brand-dark);
}

.btn--hero-primary .btn__arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}

.btn--hero-primary:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--hero-ghost {
  padding: 1.05rem 1.9rem;
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}

.btn--hero-ghost:hover {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border-color: var(--brand-gold);
}

/* Vertrauenspunkte: hochwertige goldene Marker statt Häkchen */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.hero__trust li::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Team-Komposition: moderne, asymmetrische Bildkomposition statt
   nebeneinanderliegender Passfoto-Karten.
   .hero__frame trägt ausschließlich die absolut positionierten Ebenen
   (Hintergrundfoto, Lichtakzente, Fotos, Badges) und bestimmt seine
   Höhe allein über .hero__photos. Die Beschriftung .hero__caption steht
   bewusst AUSSERHALB dieser Ebene im normalen Textfluss, damit sie sich
   nie mit einem Badge oder Foto überschneiden kann. */
.hero__visual {
  position: relative;
  padding-block: var(--space-4);
}

.hero__frame {
  position: relative;
  isolation: isolate;
}

.hero__bg-photo {
  position: absolute;
  inset: 10% -4% -4% 10%;
  z-index: 0;
  overflow: hidden;
  border-radius: 32px;
  opacity: 0.14;
  pointer-events: none;
}

.hero__bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) saturate(105%);
}

.hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
}

.hero__glow--1 {
  width: 380px;
  height: 380px;
  top: -8%;
  right: -6%;
  background: radial-gradient(circle, rgba(255, 188, 87, 0.32) 0%, rgba(255, 188, 87, 0) 70%);
}

.hero__glow--2 {
  width: 280px;
  height: 280px;
  bottom: -4%;
  left: 0%;
  background: radial-gradient(circle, rgba(30, 39, 73, 0.16) 0%, rgba(30, 39, 73, 0) 70%);
}

.hero__photos {
  position: relative;
  z-index: 1;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}

.hero__photo {
  position: absolute;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 30px 60px -18px rgba(22, 28, 51, 0.35);
}

.hero__photo--rafael {
  width: 72%;
  aspect-ratio: 3 / 4;
  top: 0;
  left: 0;
  z-index: 2;
}

.hero__photo--fabian {
  width: 54%;
  aspect-ratio: 3 / 4;
  bottom: 0;
  right: 0;
  z-index: 3;
  border: 5px solid #fdfbf6;
}

/* Vollflächiges Foto-Hero (Startseite DE): das gemeinsame Foto von
   Rafael und Fabian bildet die komplette Hero-Fläche als Hintergrund,
   Text liegt auf einem linksseitigen dunklen Verlauf. Bewusst als
   .hero--photo-Modifier gekapselt, damit die restlichen Seiten (inkl.
   en/index.html) mit dem hellen Karten-Hero unverändert bleiben. */
.hero--photo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 88vh, 980px);
  background: var(--color-ink);
}

.hero--photo::before,
.hero--photo::after {
  content: none;
}

.hero--photo .hero__inner {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

.hero--photo .hero__content {
  max-width: 34rem;
}

.hero--photo .hero__content .kicker {
  color: var(--brand-gold);
}

.hero--photo h1 {
  color: #fff;
}

.hero--photo .hero__highlight {
  color: #fff;
  text-decoration-color: var(--brand-gold);
}

.hero--photo .hero__sub {
  color: rgba(255, 255, 255, 0.86);
}

.hero--photo .btn--hero-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.hero--photo .btn--hero-ghost:hover {
  background: var(--brand-gold);
  color: var(--brand-dark);
  border-color: var(--brand-gold);
}

.hero--photo .hero__trust li {
  color: rgba(255, 255, 255, 0.88);
}

.hero--photo .hero__trust li::before {
  background: var(--brand-gold);
}

.hero--photo .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Kein einzelner fester object-position-Wert: die Hero-Höhe ist auf
   max. 980px gedeckelt (siehe min-height oben), wodurch das Seiten-
   verhältnis der sichtbaren Fläche mit zunehmender Breite IMMER
   flacher/breiter wird. Ohne breitenabhängige Anpassung würde
   dieselbe Position bei schmaleren Desktop-Fenstern (900–1439px)
   knapp und bei sehr breiten Fenstern unnötig weit rechts sitzen.
   Je breiter das Fenster, desto zentrierter darf die Position sein,
   ohne dass Rafael oder Fabian aus dem sichtbaren Ausschnitt fallen. */
.hero--photo .hero__team-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 90% center;
}

@media (min-width: 1280px) {
  .hero--photo .hero__team-photo { object-position: 85% center; }
}

@media (min-width: 1440px) {
  .hero--photo .hero__team-photo { object-position: 80% center; }
}

@media (min-width: 1600px) {
  .hero--photo .hero__team-photo { object-position: 75% center; }
}

@media (min-width: 1920px) {
  .hero--photo .hero__team-photo { object-position: 70% center; }
}

/* Sehr große Monitore: die Sektionshöhe bleibt bei max. 980px gedeckelt,
   wodurch bei 2560px+ Breite ohnehin keinerlei seitlicher Beschnitt
   mehr stattfindet. Zusätzliches, dezentes Zoom-out (4%) schafft auf
   Wunsch noch etwas mehr Luft um beide Personen und wirkt ruhiger. */
@media (min-width: 2560px) {
  .hero--photo .hero__team-photo {
    object-position: 65% center;
    transform: scale(0.96);
    transform-origin: right center;
  }
}

.hero--photo .hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(8, 10, 18, 0.86) 0%,
    rgba(8, 10, 18, 0.68) 26%,
    rgba(8, 10, 18, 0.28) 48%,
    rgba(8, 10, 18, 0) 66%);
  pointer-events: none;
}

@media (max-width: 899px) {
  .hero--photo {
    display: block;
    min-height: 0;
  }

  .hero--photo .hero__inner {
    padding-block: clamp(2.5rem, 9vw, 3.5rem);
  }

  .hero--photo .hero__content {
    max-width: none;
  }

  .hero--photo .hero__media {
    position: static;
    inset: auto;
    height: clamp(380px, 55vw, 480px);
    margin-top: var(--space-6);
  }

  .hero--photo .hero__team-photo {
    object-position: 85% center;
  }

  .hero--photo .hero__scrim {
    display: none;
  }
}

/* Kompakter Mobile-Hero (Startseite DE, bis 768px): eigenständiger,
   spezifischerer Override oberhalb des allgemeinen 899px-Blocks.
   Wirkt NUR bis 768px – der Bereich 769–899px (Tablet) bleibt bewusst
   unverändert bei den Werten des Blocks oben. Ziel: das gemeinsame
   Foto erscheint deutlich früher, ohne große Leerflächen davor. */
@media (max-width: 768px) {
  .hero--photo .hero__inner {
    padding-block: clamp(1.1rem, 5vw, 1.5rem) clamp(0.6rem, 3vw, 0.85rem);
  }

  .hero--photo .hero__content .kicker {
    margin-bottom: 0.4rem;
  }

  .hero--photo h1 {
    margin-bottom: 0.6rem;
  }

  .hero--photo .hero__sub {
    margin-bottom: 0.9rem;
  }

  /* Beide CTAs untereinander, volle Breite, gleiche Höhe (stretch ist
     der display:flex-Standard bei flex-direction:column) – dadurch
     steht "Leistungen ansehen" nie mehr allein/abgesetzt daneben. */
  .hero--photo .hero__actions {
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }

  .hero--photo .hero__actions .btn {
    width: 100%;
  }

  /* Vertrauensmerkmale: von der langen vertikalen Liste zu einem
     kompakten 2x2-Chip-Raster, damit der Bereich insgesamt deutlich
     unter 150px Höhe bleibt. */
  .hero--photo .hero__trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.6rem;
  }

  .hero--photo .hero__trust li {
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: var(--fs-xs);
    line-height: 1.25;
  }

  .hero--photo .hero__trust li::before {
    width: 6px;
    height: 6px;
  }

  /* Foto direkt im Anschluss, volle Breite, kompakte Höhe, minimaler
     Abstand zu den Chips darüber und sauberer Übergang zur nächsten
     Sektion darunter (keine zusätzliche Innen-/Außenabstände). */
  .hero--photo .hero__media {
    height: clamp(320px, 46vw, 380px);
    margin-top: var(--space-3);
  }
}

.hero__caption {
  margin: 20px 0 0;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.hero__caption span {
  font-weight: 500;
  color: var(--color-muted);
}

/* Schwebende UI-Karten: modernes Glas-Design, max. 3 gleichzeitig */
.hero__chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 16px 32px -16px rgba(22, 28, 51, 0.28);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-ink);
  white-space: nowrap;
  animation: hero-chip-float 7s ease-in-out infinite;
}

.hero__chip svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--color-accent-text);
}

.hero__chip--1 { top: 2%; left: -4%; animation-delay: 0s; }
.hero__chip--2 { top: 40%; right: -5%; animation-delay: 1.6s; }

/* Badge 3 liegt in der Lücke unten links, die zwischen dem unteren Rand
   von Rafaels Foto und dem linken Rand von Fabians Foto frei bleibt.
   max-width verhindert, dass der Text bei schmaleren Bildverbund-Breiten
   in Fabians Foto hineinragt – er bricht dann stattdessen um. */
.hero__chip--3 {
  bottom: 4%;
  left: 2%;
  max-width: 40%;
  white-space: normal;
  line-height: 1.25;
  animation-delay: 3.2s;
}

@keyframes hero-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 899px) {
  .hero__chip { display: none; }
}

@media (max-width: 559px) {
  .hero__photos { max-width: 340px; }
}

/* Vertrauensbereich unterhalb der Hero-Sektion */
.trustbar {
  border-block: 1px solid var(--color-border);
  background: #fff;
}

.trustbar__heading {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.trustbar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar__list li {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  transition: color var(--transition);
}

.trustbar__list li:hover {
  color: var(--color-ink);
}

/* 7. Karten & Sektions-Komponenten
   -------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--brand-gold);
}

.card h3 {
  margin-bottom: var(--space-2);
  overflow-wrap: break-word;
}

.card__subtitle {
  color: var(--color-muted);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.card .arrow-link {
  margin-top: auto;
  padding-top: var(--space-4);
}

.card__icon {
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-4);
}

.card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.card__list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.52em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
}

/* Problem-Liste (Startseite) */
.pain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .pain-list { grid-template-columns: repeat(2, 1fr); }
}

.pain-list li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.pain-list li::before {
  content: "✕";
  color: var(--color-error);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* Ablauf / Schritte */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.steps li {
  counter-increment: step;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}

.steps h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}

.steps p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin: 0;
}

/* Team: zwei gleich große, hochwertige Profilkarten statt eines
   einzelnen Composite-Fotos mit einer gemeinsamen Bildunterschrift. */
.team-figure {
  margin: 0;
}

.profile-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 700px) {
  .profile-duo { gap: 24px; }
}

.profile-card {
  text-align: center;
}

.profile-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-3);
}

.profile-card__name {
  margin: 0 0 0.2rem;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-accent-text);
}

.profile-card__role {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-muted);
}

.person-card {
  display: flex;
  flex-direction: column;
}

.person-card img {
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.person-card__role {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-accent-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* Timeline: kompakte Firmengeschichte (aktuell nur auf "Über uns").
   Bewusst schlicht gehalten: eine durchgehende dünne Goldlinie mit
   Punkt-Markern, große Jahreszahl links, Text rechts. Für Fließtext
   wird die dunklere --color-accent-text statt --brand-gold verwendet
   (reines Gold hat auf weißem Grund zu wenig Kontrast für Text). */
.timeline {
  position: relative;
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  max-width: 42rem;
  margin-inline: auto;
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: var(--space-5);
  padding-bottom: var(--space-8);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(4.5rem + (var(--space-5) / 2) - 1px);
  top: 0.3em;
  bottom: calc(-1 * var(--space-8) + 0.3em);
  width: 2px;
  background: linear-gradient(180deg, var(--brand-gold), rgba(255, 188, 87, 0.15));
}

.timeline__item:last-child::before {
  display: none;
}

.timeline__item::after {
  content: "";
  position: absolute;
  left: calc(4.5rem + (var(--space-5) / 2) - 6px);
  top: 0.22em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--brand-gold);
  box-shadow: 0 0 0 4px #fff;
}

.timeline__year {
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-accent-text);
  text-align: right;
}

.timeline__content p {
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

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

.timeline__closing {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--color-text);
}

.timeline__closing strong {
  color: var(--color-ink);
  font-weight: 700;
}

@media (max-width: 559px) {
  .timeline__item {
    grid-template-columns: 3.4rem 1fr;
    column-gap: var(--space-4);
  }

  .timeline__item::before {
    left: calc(3.4rem + (var(--space-4) / 2) - 1px);
  }

  .timeline__item::after {
    left: calc(3.4rem + (var(--space-4) / 2) - 6px);
  }

  .timeline__year {
    font-size: 1.375rem;
  }
}

/* Referenzen */
.reference-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.reference-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.reference-card__body {
  padding: var(--space-5);
}

.reference-card__body h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}

.reference-card__body p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin: 0;
}

.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Pakete (Reels) */
.package-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.package-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.package-card__badge {
  position: absolute;
  top: -0.85rem;
  right: 1.25rem;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
}

.package-card__count {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-ink);
  line-height: 1;
}

.package-card__unit {
  color: var(--color-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.package-card .btn {
  margin-top: auto;
}

/* Abschluss-CTA */
.cta-panel {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.cta-panel .btn {
  margin: 0.4rem 0.3rem 0;
}

.cta-panel__note {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
}

.cta-panel__note a {
  color: #e8d9b8;
  text-decoration: underline;
  text-decoration-color: rgba(255, 188, 87, 0.5);
  text-underline-offset: 3px;
  font-weight: 600;
}

.cta-panel__note a:hover {
  color: var(--color-accent-soft);
}

/* Breadcrumb */
.breadcrumb {
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--color-border);
}

.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--color-ink); }

/* Seiten-Intro (Unterseiten) */
.page-intro {
  background: linear-gradient(180deg, #fbf8f1 0%, #fff 100%);
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem);
}

.page-intro h1 {
  max-width: 50rem;
}

.page-intro .lead {
  margin-bottom: 0;
}

/* Inhaltliche Zweispalter */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-left > :first-child { order: -1; }
}

.split img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Checkliste */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--space-3);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* 8. Reels
   -------------------------------------------------------------------- */
/* Mobil (< 560px): horizontales Scrollen mit Snap, damit Karten nicht
   gequetscht werden und Texte nicht abgeschnitten sind. */
.reel-grid {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}

.reel-grid .reel-item {
  flex: 0 0 62%;
  scroll-snap-align: start;
}

@media (min-width: 560px) {
  .reel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }

  .reel-grid .reel-item { flex: initial; }
}

@media (min-width: 900px) {
  .reel-grid { grid-template-columns: repeat(4, 1fr); }
}

.reel {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-navy);
  box-shadow: var(--shadow-md);
  display: block;
  width: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}

.reel:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.reel:hover img {
  transform: scale(1.03);
}

.reel__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel__play::before {
  content: "";
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23161c33'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}

.reel:hover .reel__play::before {
  transform: scale(1.07);
}

.reel__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-4) var(--space-3);
  background: linear-gradient(0deg, rgba(22, 28, 51, 0.85), transparent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
}

.reel-item video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: #000;
}

.reel-item__caption {
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* 8b. Calendly-Terminbuchung (direkte Einbindung)
   -------------------------------------------------------------------- */
.calendly-embed {
  width: 100%;
  max-width: 600px;
  background: transparent;
}

.calendly-embed .calendly-inline-widget {
  width: 100% !important;
  min-width: 320px;
  min-height: 700px;
  height: 760px;
  border: none;
  background: transparent;
}

/* Zweispalter auf der Kontaktseite: Formular und Kalender oben ausrichten */
.split--top {
  align-items: start;
}

@media (min-width: 900px) {
  .split--top {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 600px);
  }
}

@media (max-width: 699px) {
  .calendly-embed {
    max-width: 100%;
  }

  .calendly-embed .calendly-inline-widget {
    min-height: 680px;
    height: 680px;
  }
}

/* 8c. Impressum & Datenschutz: Inhaltsverzeichnis, Hinweiskästen, Tabellen
   -------------------------------------------------------------------- */
.legal-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-7);
}

.legal-toc h2 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-3);
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

@media (min-width: 700px) {
  .legal-toc ol {
    columns: 2;
    column-gap: var(--space-6);
  }
}

.legal-toc li {
  margin-bottom: var(--space-2);
  break-inside: avoid;
  font-size: var(--fs-sm);
}

.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--space-5);
}

.legal-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  vertical-align: top;
}

.legal-table th {
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 700;
}

.legal-table tr:nth-child(even) td {
  background: var(--color-surface);
}

/* 9. Formulare
   -------------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .form-field--full { grid-column: 1 / -1; }
}

.form-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.form-field .optional {
  font-weight: 400;
  color: var(--color-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-navy-2);
  box-shadow: 0 0 0 3px rgba(44, 91, 217, 0.18);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field .field-error {
  display: none;
  color: var(--color-error);
  font-size: var(--fs-xs);
  margin-top: var(--space-1);
}

.form-field.has-error .field-error {
  display: block;
}

.form-consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.form-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--color-navy);
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ausfuellbar */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.form-status--success {
  background: #e8f4ec;
  color: var(--color-success);
  border: 1px solid #bfe0cb;
}

.form-status--error {
  background: #fbeae9;
  color: var(--color-error);
  border: 1px solid #f0c4c1;
}

/* Kontakt-Kanäle */
.contact-channel {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.contact-channel__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.contact-channel h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.contact-channel p {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.contact-channel .btn {
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-xs);
}

/* 10. FAQ
   -------------------------------------------------------------------- */
.faq-list {
  max-width: 50rem;
  margin-inline: auto;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-accent-text);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-muted);
}

.faq-item__body p:last-child { margin-bottom: 0; }

/* 11. Footer
   -------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: #c9cdda;
  font-size: var(--fs-sm);
}

.site-footer a {
  color: #e6e8f0;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent-soft);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.site-footer h2 {
  color: #fff;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: var(--space-2);
}

.site-footer address {
  font-style: normal;
  line-height: 1.8;
}

.site-footer__brand img {
  width: 200px;
  margin-bottom: var(--space-4);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: #9aa0b5;
}

.site-footer__bottom .lang-switch span[aria-current] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.site-footer__bottom .lang-switch a {
  color: #c9cdda;
}

/* WhatsApp-Button (dezent, unten rechts, Marken-Farben) */
.whatsapp-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: whatsapp-fab-breathe 3.4s ease-in-out infinite;
}

.whatsapp-fab:hover {
  transform: scale(1.07);
  box-shadow: var(--shadow-lg);
  animation-play-state: paused;
}

.whatsapp-fab svg {
  width: 27px;
  height: 27px;
  fill: var(--color-ink);
}

.whatsapp-fab[hidden] { display: none; }

/* Sehr dezente, langsame Puls-Animation – niemals aufdringlich, respektiert
   prefers-reduced-motion über die globale Regel weiter unten. */
@keyframes whatsapp-fab-breathe {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(255, 188, 87, 0.35); }
  50% { box-shadow: var(--shadow-md), 0 0 0 8px rgba(255, 188, 87, 0); }
}

/* 11b. Dezente Hintergrundbilder (Foto-Sektionen)
   --------------------------------------------------------------------
   Ein Foto liegt als <img> ganz unten (z-index 0), leicht geblurrt und
   abgedunkelt/aufgehellt über einen halbtransparenten Overlay (z-index 1),
   der eigentliche Inhalt bleibt darüber (z-index 2) und damit jederzeit
   vollständig lesbar. Kein CSS-background-image, damit loading="lazy"
   und Responsive-Verhalten über das <img>-Element funktionieren. */
.section--photobg {
  position: relative;
  isolation: isolate;
}

.section--photobg .section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) saturate(92%);
  opacity: 0.5;
  z-index: 0;
}

.section--photobg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 248, 241, 0.86);
  z-index: 1;
}

.section--photobg > .container {
  position: relative;
  z-index: 2;
}

/* 12. Hilfsklassen, Barrierefreiheit, Motion
   -------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Sanftes Einblenden beim Scrollen (nur mit JS aktiv, dezent) */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffeltes Einblenden für Gruppen (z. B. Hero) */
.fade-in--d1 { transition-delay: 90ms; }
.fade-in--d2 { transition-delay: 180ms; }
.fade-in--d3 { transition-delay: 270ms; }

/* Ohne JavaScript alles sichtbar */
.no-js .fade-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in {
    opacity: 1;
    transform: none;
  }
}

/* Druckansicht */
@media print {
  .site-header,
  .whatsapp-fab,
  .site-footer,
  .nav-toggle {
    display: none !important;
  }
}