/* Eigenheim Vision - shared design system
   Design read: lokale Immobilienmakler-Personenmarke (Werder/Potsdam),
   warm-vertrauensvolle Sprache, statisches HTML/CSS (kein Framework),
   Dials: Variance 6 / Motion 4 / Density 3 */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-v23-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-v23-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-v23-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --bg-alt: #eef3f7;
  --ink: #23262b;
  --ink-soft: #4b4e55;
  --primary: #14395a;
  --primary-dark: #0c2740;
  --accent: #baac3a;
  --accent-dark: #93872c;
  --border: #e1e6ea;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  --radius-card: 12px;
  --radius-input: 8px;

  --container: 1180px;
  --shadow-soft: 0 20px 50px -25px rgba(20, 57, 90, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Native cross-page fade for this multi-page site. No JS, ignored by
   unsupported browsers, so this is a pure progressive enhancement. */
@view-transition {
  navigation: auto;
}

@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;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a, button, input, textarea, select, summary { touch-action: manipulation; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--primary);
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.3rem, 3.4vw + 1.2rem, 3.6rem); letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 1.6vw + 1.1rem, 2.4rem); letter-spacing: -0.005em; text-wrap: balance; }
h3 { font-size: clamp(1.2rem, 0.6vw + 1rem, 1.5rem); }

/* Playfair Display's & is too ornate for headings; borrow the plainer
   body typeface for it instead, a classic editorial swap */
.amp { font-family: var(--font-body); font-weight: 500; }

p { margin: 0 0 1em; max-width: 62ch; }
p.lead { font-size: 1.15rem; color: var(--ink-soft); }

a { color: var(--primary); }

/* Skip link: hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-input);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 1rem; }

/* Visually hidden but readable by screen readers (e.g. section headings kept for heading-level navigation) */
.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;
}

/* Consistent branded focus ring on interactive elements */
.btn:focus-visible,
.main-nav a:focus-visible,
.link-quiet:focus-visible,
.nav-toggle:focus-visible,
.faq-list summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.section-dark .btn:focus-visible,
.quote-band a:focus-visible {
  outline-color: #fff;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}

/* Buttons: pill radius for all interactive CTAs (shape lock) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, background-color 200ms ease;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: var(--primary-dark);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: inherit;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-dark:hover { background: var(--primary); color: #fff; }

.link-quiet {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.link-quiet:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand img { height: 38px; width: auto; }
.site-header .brand img { height: 68px; }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--primary); border-color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.6rem;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease-out;
}
.nav-toggle:hover { background: var(--bg-alt); }
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle svg { width: 26px; height: 26px; color: var(--primary); }

@media (max-width: 860px) {
  .main-nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem 1.5rem;
    gap: 1rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                display 200ms allow-discrete;
  }
  .main-nav.is-open ul {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }
  .main-nav ul a {
    display: block;
    padding: 0.75rem 0.25rem;
  }
  @starting-style {
    .main-nav.is-open ul {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  .nav-toggle { display: inline-flex; }
}

/* Hero: asymmetric split */
.hero {
  padding-top: clamp(2rem, 4vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-copy p.lead { max-width: 46ch; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.6rem; }

.hero-media { position: relative; }
.hero-media .frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .frame { transform: translateY(-0.5rem); }

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media .frame { aspect-ratio: 4 / 3; transform: none; }
}

/* Why-block: one large statement + two supporting points (asymmetric, not 3 equal cards) */
.why-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.why-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
  padding-block: clamp(2.2rem, 4vw, 3rem);
}
.why-feature {
  background: var(--primary);
  border-radius: var(--radius-card);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
}
.why-feature p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.3vw + 1rem, 1.85rem);
  line-height: 1.3;
  color: #fff;
  margin: 0;
  max-width: 24ch;
}
.why-block--inline { padding-block: 0; margin-top: 2.5rem; }
.why-list { display: flex; flex-direction: column; justify-content: center; }
.why-item { display: flex; gap: 1rem; padding-block: 1.3rem; }
.why-item + .why-item { border-top: 1px solid var(--border); }
.why-item svg { flex-shrink: 0; width: 32px; height: 32px; color: var(--accent-dark); margin-top: 2px; }
.why-item h3 { margin-bottom: 0.3rem; font-size: 1.12rem; }
.why-item p { margin: 0; font-size: 1rem; color: var(--ink-soft); }

@media (max-width: 760px) {
  .why-block { grid-template-columns: 1fr; }
}

/* Generic section rhythm */
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-alt { background: var(--bg-alt); }
.section-dark {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.92);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255, 255, 255, 0.78); }

/* About teaser: split, image left this time (anti zig-zag handled per page) */
.about-teaser .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.about-teaser .frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 3 / 4;
}
.about-teaser img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Standalone example figure, e.g. a real deliverable shown inline in running text */
.example-figure {
  max-width: 26rem;
  margin: 2.5rem auto 0;
}
/* Wider variant for a figure standing alone in a full section, not nested in a narrower column */
.example-figure--wide { max-width: 100%; }
.example-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border);
}
.example-figure figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .about-teaser .container { grid-template-columns: 1fr; }
}

/* Service checklist: icon + text rows, no numbering */
.process-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.process-list li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.3rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--border);
}
.process-list li:last-child { border-bottom: 1px solid var(--border); }
.check-icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent-dark);
  margin-top: 0.2rem;
}
.process-list h3 { margin-bottom: 0.35rem; }
.process-list p { margin: 0; color: var(--ink-soft); }

/* Energy-efficiency scale. The green-to-red ramp is the convention people know
   from the Energieausweis, so it deliberately steps outside the brand palette.
   The class letters sit below the bar as normal text instead of inside the
   colored fields, which keeps them at full contrast on every segment. */
.energy-scale { margin: 2.5rem 0 0; }
.energy-scale-bar {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  border-radius: 999px;
  overflow: hidden;
}
.energy-scale-bar span { height: 0.9rem; }
.energy-scale-bar span:nth-child(1) { background: #1f8a4c; }
.energy-scale-bar span:nth-child(2) { background: #4aa14a; }
.energy-scale-bar span:nth-child(3) { background: #7fb541; }
.energy-scale-bar span:nth-child(4) { background: #b9c93f; }
.energy-scale-bar span:nth-child(5) { background: #e8d33c; }
.energy-scale-bar span:nth-child(6) { background: #f0b038; }
.energy-scale-bar span:nth-child(7) { background: #e8893a; }
.energy-scale-bar span:nth-child(8) { background: #dc5f3c; }
.energy-scale-bar span:nth-child(9) { background: #c8383c; }
.energy-scale-labels {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  margin-top: 0.5rem;
}
.energy-scale-labels span {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.energy-scale figcaption {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Timeline: connected vertical line, used once for the detailed sale process */
.timeline {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline li {
  position: relative;
  padding-left: 3.6rem;
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.section-alt .timeline li::before { box-shadow: 0 0 0 4px var(--bg-alt); }
.timeline h3 { margin-bottom: 0.35rem; }
.timeline p { margin: 0; color: var(--ink-soft); }

.teaser-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.teaser-row .lead { margin-bottom: 0; }
@media (max-width: 700px) {
  .teaser-row { grid-template-columns: 1fr; }
}

/* Compare: honest before/after, one neutral column + one featured column */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.compare-col {
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  border-radius: var(--radius-card);
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.compare-col h3 { margin-bottom: 1.1rem; }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.compare-col li {
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding-left: 1.9rem;
  position: relative;
}
.compare-col li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--ink-soft);
}
.compare-col--featured {
  background: var(--primary);
  border-color: var(--primary);
}
.compare-col--featured h3 { color: #fff; }
.compare-col--featured li { color: rgba(255, 255, 255, 0.88); }
.compare-col--featured li svg { color: var(--accent); }

@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
}

/* Service grid: clickable index cards linking to dedicated service pages.
   Cards are justified here because this is a navigational hub, not a
   decorative feature list. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.service-card {
  display: block;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
}
.service-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.service-card:active { transform: translateY(-1px) scale(0.98); }
.service-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.service-card h3 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.2rem; }
.service-card p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.service-card-link { display: inline-block; margin-top: 1.1rem; color: var(--accent-dark); font-weight: 600; font-size: 0.92rem; }

@media (max-width: 700px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* Situation row: same link-card idea, visually distinct (left accent
   bar, no lift) so it reads as a different category from services */
.situation-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.situation-card {
  display: block;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-left-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.situation-card:hover { border-left-color: var(--primary); transform: translateY(-2px); }
.situation-card:active { transform: translateY(-1px) scale(0.98); }
.situation-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.situation-card h3 { color: var(--primary); margin-bottom: 0.4rem; font-size: 1.1rem; }
.situation-card p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

@media (max-width: 700px) {
  .situation-row { grid-template-columns: 1fr; }
}

/* Stacked list: parallel options with a hairline divider, no left
   accent bar, no icon. A third distinct "list of related items"
   treatment alongside region-notes (bordered) and process-list
   (icon rows), used when items are genuinely parallel/alternative
   rather than geographic notes or a checklist of deliverables. */
.stacked-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.stacked-list li {
  padding-block: 1.4rem;
  border-top: 1px solid var(--border);
}
.stacked-list li:last-child { border-bottom: 1px solid var(--border); }
.stacked-list h3 { margin-bottom: 0.35rem; }
.stacked-list p { margin: 0; color: var(--ink-soft); }

/* Region notes: editorial stacked sub-sections, not equal cards */
.region-notes {
  display: grid;
  gap: 1.75rem;
  margin: 2rem 0 2.25rem;
}
.region-notes > div {
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
}
.region-notes h3 { margin-bottom: 0.4rem; }
.region-notes p { margin: 0; color: var(--ink-soft); }

/* FAQ accordion, native <details>, no JS needed */
.faq-list { display: grid; gap: 0; margin-top: 2rem; }
.faq-list details {
  border-top: 1px solid var(--border);
  padding-block: 1.15rem;
}
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
  transition: color 160ms ease, opacity 120ms ease;
}
.faq-list summary:hover { color: var(--accent-dark); }
.faq-list summary:active { opacity: 0.6; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent-dark);
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }

/* Content reveal: smooth height animation where interpolate-size is
   supported, safe instant native toggle everywhere else */
.faq-list details {
  interpolate-size: allow-keywords;
}
.faq-list details p {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  max-width: 68ch;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms ease,
              display 240ms allow-discrete;
}
.faq-list details[open] p {
  height: auto;
  opacity: 1;
}
@starting-style {
  .faq-list details[open] p {
    height: 0;
    opacity: 0;
  }
}

/* Full-width quote / handshake band */
.quote-band {
  position: relative;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
}
.quote-band .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: 340px;
}
.quote-band .frame { height: 100%; }
.quote-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.quote-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.6vw + 0.8rem, 1.9rem);
  line-height: 1.35;
  margin: 0 0 1rem;
  max-width: 34ch;
}
.quote-band cite {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 860px) {
  .quote-band .container { grid-template-columns: 1fr; padding-block: 0; }
  .quote-band .frame { aspect-ratio: 16/10; }
  .quote-band .quote-copy { padding-block: 2.5rem; }
}

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band .container { max-width: 720px; }
.cta-band h2 { margin-bottom: 0.5rem; }

/* Footer */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.75);
  padding-block: 3rem 2rem;
}
.site-footer .container {
  display: grid;
  grid-template-columns: 0.95fr 0.55fr 1.55fr 0.7fr;
  gap: 2.5rem;
  align-items: start;
}
.site-footer h3 { color: #fff; font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 0.85rem; }
.site-footer .brand { margin-bottom: 0.9rem; }
.site-footer .brand img { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.site-footer p { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* The Leistungen/Besondere-Situationen column runs to 10 links; laying
   each list out in two sub-columns keeps that column from towering
   over Brand/Kontakt and forcing dead space into them via grid stretch */
.site-footer .container > div:nth-child(3) ul {
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
}
.site-footer a { display: inline-block; padding-block: 0.4rem; margin-block: -0.4rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.94rem; transition: color 160ms ease; }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  max-width: var(--container);
  margin: 2.5rem auto 0;
  padding: 1.5rem 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

@media (max-width: 900px) {
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer .container { grid-template-columns: 1fr; }
}

/* Hero entrance: single deterministic CSS animation on load, no scroll-triggered reveals */
.hero-copy h1, .hero-copy p.lead, .hero-copy .hero-actions {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-copy p.lead { animation-delay: 0.08s; }
.hero-copy .hero-actions { animation-delay: 0.16s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy p.lead, .hero-copy .hero-actions { animation: none; }
}

/* Page header band (used by inner pages): soft gradient wash + two thin
   accent rings for asymmetric depth, angled base edge instead of a hard
   line, fade-up entrance matching the homepage hero. No photo needed. */
.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 82% -10%, rgba(20, 57, 90, 0.1), transparent 60%),
    var(--bg-alt);
  padding-block: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(0.75rem, 1.5vw, 1.25rem)), 0 100%);
}
.page-header::before,
.page-header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-header::before {
  top: -18%;
  right: -6%;
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 1;
  border: 1px solid rgba(186, 172, 58, 0.35);
}
.page-header::after {
  bottom: -32%;
  right: 16%;
  width: clamp(90px, 11vw, 160px);
  aspect-ratio: 1;
  border: 1px solid rgba(20, 57, 90, 0.14);
}
.page-header .container {
  position: relative;
  z-index: 1;
}
.page-header .container > * {
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-header .container > *:nth-child(2) { animation-delay: 0.07s; }
.page-header .container > *:nth-child(3) { animation-delay: 0.14s; }
.page-header p.lead { max-width: 56ch; }

/* Contact page split */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Forms */
.form-grid { display: grid; gap: 1.3rem; max-width: 640px; }
.form-row { display: grid; gap: 0.4rem; }
.form-row.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}
.form-row.checkbox-row input { width: auto; margin-top: 0.25rem; }
.form-row.checkbox-row label { font-weight: 400; }
.form-row label { font-weight: 600; font-size: 0.92rem; }
.form-row .hint { font-size: 0.82rem; color: var(--ink-soft); font-weight: 400; }
.form-row input, .form-row textarea, .form-row select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.form-note { font-size: 0.85rem; color: var(--ink-soft); }

/* Contact-form success state: rare, high-emotion moment, entrance
   animation is warranted here */
.form-success {
  display: none;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.6rem;
  font-weight: 500;
  max-width: 640px;
}
.form-success.is-visible {
  display: block;
  opacity: 0;
  transform: scale(0.96);
  animation: success-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes success-in {
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .form-success.is-visible { animation: none; opacity: 1; transform: none; }
}