/* ============================================================
   ACTIVE TRAIL by KAGOLO – Design System
   Brand palette is strictly 3 colours: blue, beige, white.
     #093C5F  Kagolo Blue  (primary background, text, CTAs)
     #DFCDBD  Kagolo Beige (accent, section tint, highlights)
     #ffffff  White        (surface, card backgrounds, on-blue text)
   ============================================================ */

:root {
  /* --- Colour tokens ---
     Text-soft and text-muted use rgba of the brand blue rather than
     separate hex values — this keeps all foreground tones derived
     from the 3-colour palette without introducing extra hues. */
  --color-bg: #093C5F;             /* Kagolo Blue — primary background */
  --color-bg-light: #1a6090;       /* Lighter blue for hover states */
  --color-bg-tint: #f2ede8;        /* Warm beige tint for image placeholders */
  --color-surface: #ffffff;        /* Card / white-section background */
  --color-section-alt: #DFCDBD;    /* Beige alternating section background */
  --color-section-deep: #072e49;   /* Deep dark blue for footer / dark sections */

  --color-text: #093C5F;           /* Body text on light backgrounds */
  --color-text-soft: rgba(9, 60, 95, 0.68);
  --color-text-muted: rgba(9, 60, 95, 0.45);
  --color-text-on-blue: #ffffff;
  --color-text-on-blue-soft: rgba(255,255,255,0.85);
  --color-text-on-beige: #093C5F;

  --color-accent: #DFCDBD;         /* Kagolo Beige — accent / highlight */
  --color-accent-deep: #c9b49e;    /* Darker beige for hover states */
  --color-link: #093C5F;
  --color-link-deep: #051f30;

  --color-border: rgba(9, 60, 95, 0.15);
  --color-border-on-blue: rgba(255, 255, 255, 0.2);

  /* --- Typography ---
     Per client brief the Wix design uses Brandon Grotesque (headings + logo)
     and Avenir Light (body). Both are commercial; these are the license-free
     Google Fonts substitutes with the closest geometric character:
       Montserrat → Brandon Grotesque (display / logo)
       Mulish     → Avenir Light       (body) */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Spacing scale (geometric progression for visual rhythm) --- */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Layout --- */
  --content-max: 1200px;
  --content-narrow: 760px;
  --header-h: 56px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(9,60,95,.10), 0 1px 3px rgba(9,60,95,.08);
  --shadow-md: 0 6px 18px rgba(9,60,95,.16), 0 2px 6px rgba(9,60,95,.08);
  --shadow-lg: 0 22px 44px rgba(9,60,95,.22), 0 10px 20px rgba(9,60,95,.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Base Styles
   ============================================================ */

html { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  /* Header ist position:fixed — Body braucht padding-top damit Content nicht
     darunter verschwindet. */
  padding-top: var(--header-h);
}

/* clamp() gives fluid type that scales with viewport without media query breakpoints */
/* Headings im Wordmark-Look: dünn, gesperrt, Versalien (Kundenwunsch) */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-text);
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-link);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
  border-radius: 2px;
}

.lead { font-size: 1.125rem; color: var(--color-text-soft); max-width: 60ch; }

/* ============================================================
   Layout Containers
   ============================================================ */

.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { width: 100%; max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--space-5); }

/* Default section background is white; use modifier classes below for tinted variants */
section { padding: var(--space-9) 0; background: var(--color-surface); }
@media (max-width: 768px) { section { padding: var(--space-7) 0; } }

/* Drei Standard-Sektionsstile pro CD (Kundenwunsch):
     default (weiß)   → Schrift blau,  Compass: fg blau,  bg weiß
     .section-blue    → Schrift beige, Compass: fg beige, bg blau
     .section-tint    → Schrift blau,  Compass: fg blau,  bg beige
   Compass-Farben werden via --compass-fg/--compass-bg gesetzt; jede Sektion
   exportiert die zwei Werte, damit eingebettete .compass-SVGs sich automatisch
   anpassen. */
.section-tint {
  background: var(--color-section-alt);
  color: var(--color-text-on-beige);
  border-top: 1px solid rgba(9, 60, 95, 0.1);
  border-bottom: 1px solid rgba(9, 60, 95, 0.1);
  --compass-fg: var(--color-bg);
  --compass-bg: var(--color-accent);
}
.section-tint h1, .section-tint h2, .section-tint h3, .section-tint h4 { color: var(--color-text-on-beige); }
.section-tint p { color: rgba(9, 60, 95, 0.75); }
.section-tint .eyebrow { color: var(--color-bg); }
.section-tint .card { border-top: 3px solid var(--color-bg); }
.section-blue {
  background: var(--color-bg);
  color: var(--color-accent);
  --compass-fg: var(--color-accent);
  --compass-bg: var(--color-bg);
}
.section-blue h1, .section-blue h2, .section-blue h3, .section-blue h4 { color: var(--color-accent); }
.section-blue p { color: var(--color-accent); }
.section-blue .eyebrow { color: var(--color-accent); }
.section-deep {
  background: var(--color-section-deep);
  color: var(--color-text-on-blue);
  --compass-fg: var(--color-accent);
  --compass-bg: var(--color-section-deep);
}
.section-deep h1, .section-deep h2, .section-deep h3, .section-deep h4 { color: var(--color-text-on-blue); }
.section-deep p { color: var(--color-text-on-blue-soft); }
.section-deep .eyebrow { color: var(--color-accent); }

/* ============================================================
   Site Header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  overflow: hidden;
  /* Slight transparency + blur lets the page content show through when scrolling,
     giving depth without losing text legibility */
  background: rgba(9, 60, 95, 0.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(223, 205, 189, 0.25);
  /* Header: blauer Grund → Compass beige mit blauem Punkt */
  --compass-fg: var(--color-accent);
  --compass-bg: var(--color-bg);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent);
}
/* Brand wordmark — beige, all-caps, light/fine per client brief */
.brand__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1;
  white-space: nowrap;
}

/* ---- Kompassnadel (Brand-Mark) ----------------------------
   Strikt zweifarbig per CD: Ring + Nadel in --compass-fg, Punkt in --compass-bg
   (= Hintergrundfarbe der Sektion). Sektionen setzen die zwei Variablen; hier
   nur Fallbacks für den seltenen Fall, dass eine Sektion keine setzt — Defaults
   NICHT direkt auf .compass, sonst würden sie die vererbten Sektionswerte
   übertrumpfen (eigene Element-Regel sticht Vererbung). */
.compass {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
}
.compass__ring   { stroke: var(--compass-fg, var(--color-bg)); fill: none; }
/* Needle rotated 45° about its own centre so it always points North-East */
.compass__needle {
  fill: var(--compass-fg, var(--color-bg));
  transform: rotate(45deg);
  transform-box: fill-box;
  transform-origin: center;
}
.compass__dot    { fill: var(--compass-bg, #ffffff); }

/* Bare hamburger — three beige bars, no field, no label (client brief) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-toggle:hover { opacity: 0.8; transform: translateY(-1px); }
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; }
.nav-toggle__bars span {
  width: 26px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
/* Animated hamburger → × transition driven by aria-expanded state */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Off-canvas full-screen menu
   Uses opacity + pointer-events instead of display:none/block so the
   CSS opacity transition can animate in/out — display changes are instant. */
.nav-panel {
  position: fixed;
  inset: 0;
  background: rgba(9, 60, 95, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.nav-panel[data-open="true"] { opacity: 1; pointer-events: auto; }
.nav-panel__close {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  color: #fff;
  font-size: 1.75rem;
  padding: .5rem;
  line-height: 1;
}
.nav-list { display: flex; flex-direction: column; gap: 1.25rem; text-align: center; }
.nav-list a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #fff;
  position: relative;
  display: inline-block;
  padding: .25rem .75rem;
  transition: color .2s var(--ease);
}
.nav-list a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width .3s var(--ease), left .3s var(--ease);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--color-accent); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { width: 60%; left: 20%; }

.nav-panel__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-top: 1px solid rgba(223, 205, 189, 0.2);
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.82rem;
  color: rgba(223, 205, 189, 0.6);
}
.nav-panel__footer a { color: rgba(223, 205, 189, 0.6); transition: color .2s var(--ease); }
.nav-panel__footer a:hover { color: var(--color-accent); }
.nav-panel__footer .footer-social { gap: var(--space-3); }
.nav-panel__footer .footer-social__link { color: rgba(223, 205, 189, 0.6); }
.nav-panel__footer .footer-social__link:hover { color: var(--color-accent); }

/* ============================================================
   Subpage Hero (Tours, Game, Process, FAQ, Contact)
   ============================================================ */

.hero {
  position: relative;
  min-height: 42vh;
  display: grid;
  place-items: end center;
  color: #fff;
  text-align: center;
  padding: var(--space-9) var(--space-5) var(--space-7);
  overflow: hidden;
  background: var(--color-section-deep);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../img/hero-hike-sunset.jpg");
  background-size: cover;
  background-position: center 60%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,60,95,0.35) 0%, rgba(9,60,95,0.15) 35%, rgba(9,60,95,0.78) 100%);
}
.hero > * { position: relative; z-index: 2; }
.hero__inner { max-width: 820px; }
.hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hero h1 { color: #fff; margin-bottom: var(--space-4); text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero p {
  font-size: 1.125rem;
  color: rgba(255,255,255,.95);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hero__cta { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero--page { min-height: 38vh; padding: var(--space-8) var(--space-5) var(--space-7); }

/* Unterseiten: die erste Sektion nach dem Hero füllt mindestens bis zum
   Viewport-Boden, damit am Seitenanfang Hero + nächste Sektion exakt eine
   Viewport-Höhe ergeben. */
.hero--page + section { min-height: calc(100vh - var(--header-h) - 38vh); }

/* Kontakt: Hero kompakt, damit das ganze Formular inkl. "Anfrage senden"-
   Button im sichtbaren Viewport liegt. min-height-Regel oben wird
   zurückgenommen, damit das Formular seine natürliche Höhe annimmt. */
.hero[aria-label="Kontakt"] { min-height: 12vh; }
.hero[aria-label="Kontakt"] + section { min-height: 0; }
.hero[aria-label="Kontakt"]::before { background-image: url("../img/ueber-uns-bg.jpg"); background-position: center; }
.hero[aria-label="Kontakt"]::after { background: none; }
.hero[aria-label="Kontakt"] h1,
.hero[aria-label="Kontakt"] p { color: var(--color-bg); }

/* ============================================================
   Landing Hero — full-width crystal-ball slider + overlapping wordmark
   ============================================================ */

/* Full-bleed seasonal slider with a centred blue box overlay
   (client brief Seite 1: "blauer Kasten, mit der Kompassnadel, dem Logo
   und der Bezeichnung") */
.hero-landing {
  position: relative;
  /* Hero füllt vom (fixierten) Header bis zur Viewport-Unterkante — bei
     scroll=0 schließt der untere Bildrand der Glaskugel bündig mit dem
     Seitenrand ab. */
  min-height: calc(100vh - var(--header-h));
  display: grid;
  /* Blue box anchored to the bottom edge of the image (client request) */
  place-items: end center;
  overflow: hidden;
  background: var(--color-bg);
  padding: var(--space-8) var(--space-5) var(--space-7);
}

.hero-landing__image { position: absolute; inset: 0; overflow: hidden; }
/* All slides are stacked (position: absolute) and invisible; JS adds .is-active
   to the current one. The 1.2s cross-fade gives a smooth seasonal transition. */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
/* Scrim darkens the photo so the blue box and beige type stay legible */
.hero-landing__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,60,95,0.30) 0%, rgba(9,60,95,0.18) 45%, rgba(9,60,95,0.55) 100%);
  pointer-events: none;
}

/* The blue box */
.hero-box {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1300px;
  width: 100%;
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.5rem, 4vw, 3rem);
  background: rgba(9, 60, 95, 0.80);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(223, 205, 189, 0.40);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Blauer Kasten → Compass beige mit blauem Punkt */
  --compass-fg: var(--color-accent);
  --compass-bg: var(--color-bg);
}
.hero-box .compass {
  width: clamp(44px, 6vw, 58px);
  height: clamp(44px, 6vw, 58px);
  margin: 0 auto var(--space-3);
}

/* Logo wordmark — beige, all-caps, fine weight, single line (client request) */
.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 5.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.wordmark__line { display: inline; }
/* "by" in der gleichen Schrift/Größe/Farbe wie der Rest der Wortmarke (Kundenwunsch) */
.wordmark__by { font-style: normal; }

/* Claim: beige, kompakt — Schriftgröße so, dass der Satz auf Desktop möglichst
   zweizeilig (idealerweise einzeilig auf sehr breiten Viewports) bleibt */
.hero-landing__tagline {
  margin: var(--space-2) auto 0;
  color: var(--color-accent);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.5;
}
.hero-landing__cta {
  display: inline-flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-6);
}

@media (max-width: 700px) {
  .hero-landing__tagline { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  /* Give hamburger more breathing room on narrow phones */
  .nav-toggle { margin-right: 0.5rem; }
  /* Wordmark at 1.4rem min can overflow ~306px into ~294px on iPhone 12 — scale down */
  .wordmark { font-size: 1.2rem; }
  /* Ensure hero-box is symmetrically centered even if box model differs */
  .hero-box { margin-left: auto; margin-right: auto; }
  /* Brand text: allow wrap at the TRAIL|BY break point (regular space in HTML).
     Increase header height so the two-line brand fits with breathing room. */
  :root { --header-h: 72px; }
  .brand__text { white-space: normal; line-height: 1.35; }
  .brand { align-items: center; }
}

/* ============================================================
   Buttons
   Four variants: primary (beige CTA), ghost (outline on dark BG),
   dark (blue filled), white (white filled for use on blue BG)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
  border: 1.5px solid var(--color-accent-deep);
}
.btn-primary:hover { background: var(--color-accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.7);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; }

.btn-dark {
  background: var(--color-bg);
  color: #fff;
}
.btn-dark:hover { background: var(--color-section-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-white {
  background: #fff;
  color: var(--color-link);
}
.btn-white:hover { background: var(--color-accent); color: var(--color-text); transform: translateY(-1px); }

/* ============================================================
   Section Heads / Cards / Grid
   ============================================================ */

.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-7); }
.section-head .eyebrow { display: inline-flex; margin-bottom: var(--space-3); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head p { color: var(--color-text-soft); }
.section-deep .section-head p,
.section-blue .section-head p { color: var(--color-text-on-blue-soft); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
}

/* Wix-style text teasers — no card/box, centred heading/text + centred button */
.teasers { gap: var(--space-7); }
.teaser { display: flex; flex-direction: column; text-align: center; }
.teaser h3 { color: var(--color-text); margin-bottom: var(--space-3); }
.teaser p { color: var(--color-text-soft); margin-bottom: var(--space-5); }
.teaser .btn { margin-top: auto; align-self: center; }

.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card__media {
  aspect-ratio: 16/10;
  background: var(--color-bg-tint);
  position: relative;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__tag { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--color-link); font-weight: 600; }
.card__body h3 { color: var(--color-text); }
.card__body p { color: var(--color-text-soft); font-size: 0.95rem; }
.card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; justify-content: space-between; align-items: center; }
.card__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-link); }
.card__price small { font-size: .75rem; color: var(--color-text-muted); }

/* Split layout (image + text side by side) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
/* direction:rtl swaps the visual column order without changing DOM order,
   keeping the image on the right without duplicating markup.
   Children are reset to ltr so their internal text direction is unaffected. */
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split__media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: var(--color-bg-tint);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { margin-bottom: var(--space-4); color: var(--color-text); }
.split__body p { color: var(--color-text-soft); margin-bottom: var(--space-4); }
.split__body .eyebrow { display: block; margin-bottom: var(--space-3); }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; gap: var(--space-5); }
  .split--reverse { direction: ltr; }
}

/* ============================================================
   Pricing Cards
   ============================================================ */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-5);
  max-width: 800px;
  margin: 0 auto;
}
/* Preiskarten: beige Karten auf blauer Sektion (Kundenwunsch Punkt E). */
.price-card {
  background: var(--color-accent);
  border: 1px solid rgba(9, 60, 95, 0.15);
  border-top: 3px solid var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  color: var(--color-text);
}
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.price-card h3 { color: var(--color-text); margin-bottom: var(--space-3); }
.price-card .price {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--color-link);
  margin: var(--space-3) 0;
}
.price-card .price small { font-size: 1rem; color: var(--color-text-muted); }
.price-card ul { color: var(--color-text-soft); display: flex; flex-direction: column; gap: var(--space-2); }
.price-card ul li::before { content: '· '; color: var(--color-link); }

/* ============================================================
   FAQ — native <details>/<summary> accordion
   ============================================================ */

.faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 800px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--color-link); transition: transform .25s var(--ease); }
.faq details[open] { border-color: var(--color-bg); border-width: 2px; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--color-accent-deep); }
.faq details > div { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-soft); }

/* ============================================================
   Process Steps
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-5);
  /* CSS counter initialised here so each .step auto-numbers itself
     with decimal-leading-zero (01, 02, …) without hardcoded HTML */
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-link);
  display: block;
  margin-bottom: var(--space-3);
}
.step h3 { color: var(--color-text); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-soft); font-size: 0.95rem; }

/* ============================================================
   Timeline (Ablauf page)
   ============================================================ */

.timeline {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}
.timeline-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 2rem;
  padding-bottom: 2.5rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-link);
  flex-shrink: 0;
}
.timeline-connector {
  width: 1px;
  flex: 1;
  background: var(--color-border);
  margin-top: 0.5rem;
}
.timeline-item:last-child .timeline-connector { display: none; }
.timeline-body {
  padding-top: 0.65rem;
  padding-bottom: 1rem;
}
.timeline-body h3 { color: var(--color-text); margin-bottom: var(--space-2); font-size: 1.05rem; }
.timeline-body p { color: var(--color-text-soft); font-size: 0.95rem; line-height: 1.75; }
.timeline-body p + p { margin-top: 0.55rem; }
.timeline-body ul { color: var(--color-text-soft); font-size: 0.95rem; line-height: 1.75; margin: 0.55rem 0; display: flex; flex-direction: column; gap: 0.25rem; }

.section-tint .timeline-num { border-color: var(--color-link); color: var(--color-link); }
.section-tint .timeline-connector { background: rgba(9,60,95,0.15); }
.section-tint .timeline-body h3 { color: var(--color-text-on-beige); }
.section-tint .timeline-body p,
.section-tint .timeline-body ul { color: rgba(9,60,95,0.75); }

.section-deep .timeline-num { border-color: var(--color-accent); color: var(--color-accent); }
.section-deep .timeline-connector { background: rgba(223,205,189,0.2); }
.section-deep .timeline-body h3 { color: var(--color-text-on-blue); }
.section-deep .timeline-body p,
.section-deep .timeline-body ul { color: var(--color-text-on-blue-soft); }

@media (max-width: 600px) {
  .timeline-item { grid-template-columns: 44px 1fr; gap: 0 1rem; }
  .timeline-num { width: 38px; height: 38px; font-size: 0.72rem; }
}

/* ============================================================
   Contact Form
   ============================================================ */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}
.form-grid .form-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.field input, .field textarea, .field select {
  padding: .75rem .9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(9,60,95,0.18);
}
.field textarea { resize: vertical; min-height: 140px; }
.checkbox-row {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; color: var(--color-text-soft);
}
.checkbox-row input { margin-top: 3px; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA Strip
   ============================================================ */

.cta-strip {
  background: var(--color-bg);
  color: #fff;
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--color-accent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
.cta-strip h2 { color: #fff; max-width: 28ch; letter-spacing: normal; text-transform: none; }
.cta-strip p { color: rgba(255,255,255,.85); margin-top: .5rem; }
.cta-strip .btn { letter-spacing: normal; }

/* Zentrierte Variante (Startseite Punkt I): Überschrift + Button gestapelt, mittig. */
.cta-strip--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: none;
  border-top: 5px solid var(--color-accent);
  gap: var(--space-5);
}
.cta-strip--center h2 { max-width: 32ch; }

/* ============================================================
   Site Footer
   ============================================================ */

/* Footer — blue background, beige text (client brief, Seite 8) */
.site-footer {
  background: var(--color-bg);
  color: rgba(223, 205, 189, 0.82);
  padding: var(--space-8) 0 var(--space-5);
  font-size: 0.9rem;
  border-top: 4px solid var(--color-accent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.site-footer p { color: rgba(223, 205, 189, 0.82); }
.site-footer h4 { color: var(--color-accent); margin-bottom: var(--space-3); font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site-footer a { color: rgba(223, 205, 189, 0.82); transition: color .2s var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }
/* Brand claim/slogan block in the first footer column */
.footer-claim { margin-top: var(--space-3); font-style: italic; color: rgba(223, 205, 189, 0.6); }
.footer-bottom {
  border-top: 1px solid rgba(223, 205, 189, 0.25);
  padding-top: var(--space-4);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: rgba(223, 205, 189, 0.6);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-social { display: flex; gap: var(--space-3); align-items: center; }
.footer-social__label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(223, 205, 189, 0.45); margin-right: var(--space-1); }
.footer-social__link {
  display: inline-flex;
  color: rgba(223, 205, 189, 0.6);
  transition: color .2s var(--ease);
}
.footer-social__link:hover { color: var(--color-accent); }
.footer-social__link svg { width: 20px; height: 20px; }

/* ============================================================
   Utilities
   ============================================================ */

.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
/* visually-hidden hides elements from sighted users while keeping them
   in the accessibility tree for screen readers */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Scroll-reveal animation — gated behind no-preference so users who
   request reduced motion see content immediately without the fade/slide */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* Beige outline keeps focus indicators visible on both light and dark backgrounds */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.nav-list a:focus-visible { outline: none; }

/* Legal pages (Impressum, Datenschutz, AGB) render white cards on the blue body background */
.legal { background: #fff; }

/* ============================================================
   Über uns — full-width photo with white filter (client Seite 4)
   ============================================================ */

.about-feature {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-tint);
}
.about-feature::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/ueber-uns-bg.jpg") center / cover no-repeat;
}
/* The "weißer Filter" the client asked for: a translucent white veil that
   washes out the photo so the dark-blue copy stays readable on top */
.about-feature::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.45);
}
.about-feature > .container { position: relative; z-index: 2; }
.about-feature__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-feature h2 { color: var(--color-text); margin-bottom: var(--space-5); }
.about-feature p { color: var(--color-text-soft); font-size: 1.0625rem; line-height: 1.7; }
.about-feature__inner .btn { margin-top: var(--space-5); }
/* Über uns: Compass blau mit weißem Punkt (Kundenwunsch) */
.about-feature .compass {
  width: 74px; height: 74px;
  margin: 0 auto var(--space-6);
  --compass-fg: var(--color-bg);
  --compass-bg: #ffffff;
}

/* ============================================================
   DIE PREISE — compass marker on white cards (client Seite 3)
   ============================================================ */

/* Preiskarten: Compass blau, Punkt = Karten-Hintergrund (beige) */
.price-card .compass {
  width: 40px; height: 40px;
  margin: 0 auto var(--space-3);
  --compass-fg: var(--color-bg);
  --compass-bg: var(--color-accent);
}
.price-card .price-qual { color: var(--color-text-muted); font-size: 0.95rem; }
.price-card .price-sub {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
}
.price-card .price-sub .price { font-size: 1.75rem; margin: var(--space-1) 0 0; }
.price-note {
  text-align: center;
  margin-top: var(--space-6);
  font-size: 0.85rem;
  color: var(--color-accent);
  opacity: 0.85;
}

/* ============================================================
   UNSERE KUNDEN — placeholder while client supplies references
   ============================================================ */

/* Border per Sektion: currentColor passt sich an (beige auf Blau, blau auf Beige). */
.coming-soon {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  border: 1px dashed;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}

/* ============================================================
   KUNDENSTIMMEN — testimonial carousel (client Seite 6)
   Lives inside .section-tint (beige bg / blue text).
   ============================================================ */

.quote-carousel {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.quote-viewport { overflow: hidden; flex: 1; }
.quote-track { display: flex; transition: transform .5s var(--ease); }
@media (prefers-reduced-motion: reduce) { .quote-track { transition: none; } }
.quote {
  min-width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: var(--space-4) var(--space-5);
}
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--color-bg);
}
.quote figcaption { margin-top: var(--space-5); }
.quote__role {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(9, 60, 95, 0.6);
}
.quote__name { display: block; font-weight: 700; color: var(--color-bg); margin-top: 0.25rem; }

/* "< + >" navigation in blue (client brief) */
.quote-nav {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-bg);
  color: var(--color-bg);
  font-size: 1.5rem;
  line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.quote-nav:hover { background: var(--color-bg); color: var(--color-accent); transform: translateY(-1px); }

/* Dots below, alternating active blue / inactive white (client brief) */
.quote-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: var(--space-5); }
.quote-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-bg);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.quote-dots button[aria-current="true"] { background: var(--color-bg); transform: scale(1.1); }
@media (max-width: 560px) {
  .quote-nav { width: 38px; height: 38px; font-size: 1.25rem; }
  .quote { padding: var(--space-3) var(--space-2); }
}

/* ============================================================
   Contact form on blue background (client Seite 7)
   ============================================================ */

.section-blue .field label { color: var(--color-accent); }
.section-blue .checkbox-row { color: var(--color-text-on-blue-soft); }
.section-blue .checkbox-row a { color: var(--color-accent); text-decoration: underline; }
.contact-line {
  margin-top: var(--space-7);
  text-align: center;
  color: var(--color-text-on-blue-soft);
  font-size: 0.95rem;
  line-height: 1.9;
}
.contact-line a { color: var(--color-accent); }