/* ============================================
   Filder-Bau.de — Rebuild
   Design system: same brand palette as the
   original site, refined for contrast, spacing,
   and modern UI conventions.
   ============================================ */

:root {
  /* Brand */
  --color-primary: #5D7186;
  --color-primary-dark: #46586B;
  --color-primary-light: #7C8FA3;
  --color-primary-50: rgba(93, 113, 134, 0.06);
  --color-primary-100: rgba(93, 113, 134, 0.12);
  --color-primary-200: rgba(93, 113, 134, 0.24);

  /* Neutrals */
  --color-ink: #23262B;
  --color-text: #4B4F55;
  --color-text-muted: #6B7280;
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F7F9;
  --color-border: #E4E7EB;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --container-width: 1200px;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(35, 38, 43, 0.06);
  --shadow-sm: 0 4px 16px rgba(35, 38, 43, 0.07);
  --shadow-md: 0 16px 40px rgba(35, 38, 43, 0.10);
  --shadow-lg: 0 24px 64px rgba(35, 38, 43, 0.16);
  --shadow-primary: 0 14px 30px rgba(93, 113, 134, 0.30);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.3s var(--ease);
  --focus-ring: 0 0 0 3px rgba(93, 113, 134, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.7;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }
img.img-missing {
  display: block;
  min-height: 80px;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}
a { color: inherit; text-decoration: none; }

/* Global focus state — visible only for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keep anchored sections clear of the sticky header */
[id] { scroll-margin-top: 96px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: 0 0 16px;
}

h1, h2 { color: var(--color-primary); font-weight: 300; }
h1 { font-size: clamp(2.1rem, 3.4vw + 1.2rem, 3.25rem); letter-spacing: 0.3px; }
h2 { font-size: clamp(1.7rem, 1.8vw + 1.1rem, 2.4rem); }
h3 { color: var(--color-ink); font-weight: 600; font-size: 1.25rem; }
h4 { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.6px; }

p { margin: 0 0 16px; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: fixed;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 14px 22px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  z-index: 300;
  transition: width 0.12s linear;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 16px 34px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn .icon { width: 16px; height: 16px; fill: currentColor; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(93, 113, 134, 0.36); }
.btn-primary:active { transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-primary); }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition);
}
/* The frosted-glass look lives on a pseudo-element rather than
   .site-header itself. backdrop-filter (like transform/filter) on
   an element turns it into the containing block for any
   position:fixed descendants — since .main-nav lives inside the
   header and becomes position:fixed on mobile, that was hijacking
   it: the menu was "fixing" itself to the header's own tiny box
   instead of the viewport, collapsing it into a sliver instead of
   a full-screen overlay. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background var(--transition);
  z-index: -1;
}
.site-header.scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}
.site-header.scrolled::before {
  background: rgba(255, 255, 255, 0.97);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}

.brand-logo { height: 32px; width: auto; }

.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  display: inline-block;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  position: relative;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}
.nav-link:hover { color: var(--color-primary); background: var(--color-primary-50); }
.nav-link.active { color: var(--color-primary); background: var(--color-primary-100); }

.header-cta { padding: 12px 26px; font-size: 0.88rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 190px;
  /* Nearly full viewport height like the original site, capped so
     the house never becomes comically large on tall screens */
  min-height: min(92vh, 880px);
  display: flex;
  align-items: center;
}

/* Soft brand-tinted glow behind the house cutout for depth */
.hero::before {
  content: '';
  position: absolute;
  right: -10%;
  top: 4%;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, var(--color-primary-200) 0%, var(--color-primary-50) 48%, transparent 72%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-text { max-width: 600px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.eyebrow-center { text-align: center; }
.eyebrow.light { color: rgba(255, 255, 255, 0.8); }

.hero-lead { font-size: 1.08rem; max-width: 46ch; color: var(--color-text); }

/* Like on the original filder-bau.de: the wallpaper spans the
   full hero width. The house sits in the right half of the image
   (left half is transparent and lies beneath the hero text), its
   base flush with the bottom of the section. object-fit: contain
   anchored right/bottom keeps the whole house visible and right-
   aligned at every viewport size — it scales down instead of
   getting cropped. */
.hero-visual-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  transform: translateY(-20px);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  animation: cue-bounce 2.4s ease-in-out infinite;
  z-index: 2;
}
.scroll-cue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  height: 90px;
  fill: var(--color-primary);
  /* Above the wallpaper (z-index 1) so the house base disappears
     behind the blue divider, like the band on the original site */
  z-index: 2;
}

/* ---------- Reveal animation (JS toggles .in-view) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }

/* ============================================
   Intro / Contact bands with diagonal line motif
   ============================================ */
.intro-band, .contact-band {
  position: relative;
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.92);
  padding: var(--space-8) 0;
  overflow: hidden;
  text-align: center;
}
.contact-band { padding: 88px 0 110px; }

.band-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.band-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

/* Content must sit in its own stacking context above the
   decorative lines — otherwise the (positioned) SVG paints
   on top of the (static) text, regardless of source order. */
.intro-band > .container,
.contact-band > .container {
  position: relative;
  z-index: 1;
}

.intro-text {
  font-size: 1.2rem;
  font-weight: 300;
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.94);
}

.contact-band h2.light { color: #fff; max-width: 820px; margin: 0 auto 44px; text-align: center; }

.contact-info-row {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
  text-align: center;
}
.contact-info-row h4 { color: rgba(255, 255, 255, 0.72); margin-bottom: 8px; }
.contact-info-row a { font-size: 1.1rem; font-weight: 600; color: #fff; }
.contact-info-row a:hover { text-decoration: underline; }

/* ============================================
   Sections
   ============================================ */
.section { padding: var(--space-9) 0; }
.section-alt { background: var(--color-bg-alt); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); }
.section-sub { color: var(--color-text-muted); }
.section-sub a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

.card-grid {
  display: grid;
  gap: var(--space-6);
}
.three-col { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-primary-100);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { margin-bottom: 10px; }
.card p { margin: 0; color: var(--color-text); }

/* ============================================
   Leistungen — pinned scrollytelling (desktop)
   ============================================ */

/* Tall spacer that defines how much scroll distance the whole
   pinned sequence takes. More height = slower, more deliberate
   pacing. Mobile gets no spacer — see below.
   Fixed px, not vh: vh ties the spacer's (and so the whole
   document's) height to the current window height, so resizing the
   window while scrolled partway through would shift the document
   height under a scroll position that stays a constant pixel value
   — the classic cause of the pinned section appearing to jump/
   overlap other sections after a resize. A fixed px height keeps
   the scroll distance stable regardless of window height; only the
   width-based desktop/mobile switch (handled in JS via matchMedia)
   should change whether this pin exists at all. */
.leistungen-scroller { position: relative; }

@media (min-width: 961px) {
  .leistungen-scroller { height: 4500px; }

  /* Pinning is done purely in CSS via position: sticky — the
     browser keeps this in sync with layout automatically, also
     during/after window resizes. (The previous GSAP pin had to be
     killed and rebuilt on resize and kept ending up out of sync,
     leaving the section floating over other content.)
     top: 90px must match STICKY_TOP in js/leistungen-scroll.js. */
  .leistungen-pin {
    position: sticky;
    top: 90px;
    height: 100vh;
    overflow: hidden;
  }

  .leistungen-pin-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 96px;
    padding-bottom: var(--space-6);
  }

  /* Stays visible at the top for the whole pinned duration */
  .leistungen-head {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto var(--space-6);
  }

  .leistungen-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: var(--space-8);
  }
}

/* Mobile/tablet: same pinned scrollytelling as desktop, just
   stacked vertically — canvas on top, one card below. The section
   stays stuck until the whole frame sequence + all four steps have
   played through. top: 74px must match STICKY_TOP_MOBILE in
   js/leistungen-scroll.js. */
@media (max-width: 960px) {
  .leistungen-scroller { height: 3600px; }

  .leistungen-pin {
    position: sticky;
    top: 74px;
    height: calc(100vh - 74px);
    height: calc(100svh - 74px);
    overflow: hidden;
  }

  .leistungen-pin-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }

  .leistungen-head {
    flex: 0 0 auto;
    margin-bottom: var(--space-5);
  }

  .leistungen-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

.leistungen-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.scroll-canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 560px;
}

.leistungen-dots {
  display: flex;
  gap: 10px;
}
.leistungen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition), transform var(--transition);
}
.leistungen-dot.is-active { background: var(--color-primary); transform: scale(1.4); }

.leistungen-steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.leistungen-step {
  counter-increment: step;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  /* Kept in sync with the actual padding via a custom property so
     the .step-thumb bleed below always matches exactly — a fixed
     var(--space-6) here previously went out of sync with the
     smaller padding on narrow screens and left a gap on one side. */
  --step-pad: var(--space-6);
  padding: var(--step-pad);
}

.timeline-icon {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.timeline-icon::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  right: -6px; bottom: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}
.timeline-icon svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leistungen-step h3 { color: var(--color-ink); font-weight: 600; font-size: 1.4rem; margin: 0 0 12px; }
.leistungen-step p { margin: 0; color: var(--color-text); font-size: 1.02rem; }

/* Desktop: cards are stacked on top of each other and crossfade
   as the pin scrubs through — only one is visible at a time. */
@media (min-width: 961px) {
  .leistungen-steps { position: relative; min-height: 380px; display: flex; align-items: center; }
  .leistungen-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .leistungen-step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Mobile/tablet: cards crossfade one after another below the
   canvas, exactly like on desktop — only the layout is vertical.
   The step icons are dropped here to keep the card compact enough
   to fit under the animation on small screens. */
@media (max-width: 960px) {
  .leistungen-visual { flex: 0 0 auto; }

  .leistungen-steps {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--space-5);
  }
  .leistungen-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .leistungen-step.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .leistungen-step .timeline-icon { display: none; }
}

/* ============================================
   Contact form section
   ============================================ */
.contact-form-section { padding-top: 0; margin-top: -64px; position: relative; z-index: 2; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.contact-form-wrap { background: var(--color-white); padding: var(--space-7); }
.contact-form-wrap h3 { color: var(--color-ink); font-weight: 700; margin-bottom: var(--space-5); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-field { margin-bottom: var(--space-4); }
.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-bg-alt);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-text-muted); opacity: 0.8; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.form-field textarea { resize: vertical; }

.contact-form .btn { width: 100%; margin-top: var(--space-2); }
@media (min-width: 480px) { .contact-form .btn { width: auto; } }

.form-note { margin-top: 14px; font-size: 0.9rem; color: var(--color-primary); min-height: 1.4em; font-weight: 600; }

.contact-map { min-height: 340px; }
.contact-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(0.15); }

/* ============================================
   FAQ
   ============================================ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover { border-color: var(--color-primary-200); }
.faq-item.is-open { box-shadow: var(--shadow-sm); border-color: var(--color-primary-200); }

.faq-heading { margin: 0; }

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item.is-open .faq-question { color: var(--color-primary); }
.faq-caret {
  width: 18px; height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}
.faq-question[aria-expanded="true"] .faq-caret { transform: rotate(180deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { padding: 0 24px 22px; margin: 0; font-size: 0.95rem; color: var(--color-text); }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.78);
  padding-top: var(--space-8);
  position: relative;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-logo { height: 28px; }
.footer-contact h4 { color: #fff; margin-bottom: 14px; }
.footer-contact p { margin-bottom: 8px; font-size: 0.95rem; }
.footer-contact a:hover { text-decoration: underline; }

.footer-nav { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.footer-nav a { font-size: 0.95rem; transition: color var(--transition); }
.footer-nav a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 24px var(--space-6);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a:hover { color: #fff; }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), box-shadow var(--transition);
  z-index: 150;
}
.back-to-top:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================
   Legal pages (Impressum / Datenschutz)
   ============================================ */
.legal-hero {
  padding: var(--space-8) 0 var(--space-7);
  background: var(--color-bg-alt);
  text-align: center;
}
.legal-hero h1 { margin-bottom: 0; }
.legal-content { padding: var(--space-8) 0 var(--space-9); }
.legal-content .container { max-width: 800px; }
.legal-content h2 {
  color: var(--color-ink);
  font-weight: 600;
  font-size: 1.3rem;
  margin-top: var(--space-7);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--color-text); }
.legal-content a { color: var(--color-primary); text-decoration: underline; }
.legal-content a:hover { color: var(--color-primary-dark); }
.legal-block + .legal-block { margin-top: var(--space-6); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 960px) {
  .hero { min-height: 0; padding-bottom: 500px; }
  .hero::before { width: 90%; right: -20%; }
  .hero-text { max-width: 100%; }
  /* Text and house stack: the frame becomes a fixed-height strip
     below the text (reserved via the hero's padding-bottom), the
     house stays anchored bottom-right like on desktop. */
  .hero-visual-frame { inset: auto 0 0 0; height: 520px; }
  /* The source image is ~45% transparent padding on the left (kept
     for the desktop layout, where the house sits beside the text).
     On mobile the text stacks above instead, so that padding is
     just wasted space — zoom in from the bottom-right corner to
     crop it away and let the house fill the frame. */
  .hero-visual-img { transform: translateY(-26px) scale(1.6); transform-origin: bottom right; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-section { margin-top: -40px; }
  .contact-map { min-height: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-nav { grid-column: span 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 20px; }

  /* Nav collapses to a hamburger at the same breakpoint as the
     rest of the layout — otherwise tablets (e.g. 768px iPads) fall
     into a dead zone where the full desktop nav + CTA no longer
     fit but the hamburger hasn't appeared yet. */
  .main-nav {
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--color-white);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 190;
  }
  .main-nav.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .main-nav ul { flex-direction: column; text-align: center; gap: 12px; }
  .nav-link { font-size: 1.2rem; padding: 10px 20px; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
}

@media (max-width: 760px) {
  .scroll-cue { display: none; }
  .three-col { grid-template-columns: 1fr; }
  .contact-info-row { gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-nav { grid-column: auto; align-items: center; justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section { padding: var(--space-8) 0; }
  .contact-form-wrap { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 480px) {
  .btn { padding: 14px 26px; font-size: 0.9rem; }
  h1 { letter-spacing: 0; }

  .hero { padding: 72px 0 400px; }
  .hero::before { width: 110%; right: -30%; }
  .hero-visual-frame { inset: auto 0 0 0; height: 400px; }
  .hero-visual-img { transform: translateY(-22px) scale(1.8); }
  .hero-lead { max-width: 100%; }

  .intro-text { font-size: 1.05rem; }
  .section { padding: var(--space-7) 0; }
  .section-head { margin-bottom: var(--space-6); }
  .contact-band { padding: 72px 0 96px; }
  .contact-info-row { gap: 24px; }
  .card { padding: var(--space-6) var(--space-5); }
  .contact-form-wrap { padding: var(--space-5) var(--space-4); }
  .contact-map, .contact-map iframe { min-height: 220px; }
  .leistungen-step { --step-pad: var(--space-5); padding: var(--step-pad); }
  .leistungen-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .leistungen-step p { font-size: 0.95rem; }
  .footer-bottom { padding-left: 16px; padding-right: 16px; }
}