/* ==========================================================================
   Haustechnik-Vorlage – Design-System
   --------------------------------------------------------------------------
   Farbwelt: Kupfer (das Material des Gewerks: Rohre, Wärme) auf kühlem
   Graphit und neutralem Stein-Hell. Bewusst kein Installateur-Blau/Rot,
   kein Beige-Messing-Klischee. Ein Akzent, eine Familie, die ganze Seite.

   Radius-System (dokumentierte Regel, überall einhalten):
   Flächen/Medien = 12px  ·  Formularfelder = 8px  ·  Buttons/Chips = Pill

   Theme: bewusst fixes helles Theme (color-scheme: light). Die Bildwelt
   (Video, Fotos) ist lichtgeführt; dunkle Bänder sind gestalterische
   Akzente innerhalb desselben Themes, kein Theme-Wechsel.
   ========================================================================== */

/* ----- Schriften (Fontshare, frei für kommerzielle Nutzung) -------------- */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../assets/fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ----- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Farbe */
  --graphit: #1e2023;
  --graphit-80: #34373b;
  --text: #232529;
  --text-2: #54575c;
  --stein: #f3f2ef;
  --stein-2: #e9e8e3;
  --weiss: #fcfcfb;
  /* Akzent: aus dem Logo-Orange (#f47912) abgeleitetes, vertieftes Kupfer */
  --kupfer: #b0521f;
  --kupfer-tief: #8f421a;
  --kupfer-hell: #e09a63;
  --kupfer-wash: #f1e5da;
  --gruen: #2e7d4f;
  --rot: #c02f2f;
  --linie: rgba(30, 32, 35, 0.14);
  --linie-hell: rgba(252, 252, 251, 0.22);

  /* Typografie */
  --font-display: "Cabinet Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-text: "Satoshi", "Avenir Next", "Helvetica Neue", sans-serif;
  --fs-900: clamp(2.9rem, 7.2vw, 5.4rem);
  --fs-800: clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-700: clamp(1.45rem, 2.6vw, 2.1rem);
  --fs-600: clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-500: 1.125rem;
  --fs-400: 1rem;
  --fs-300: 0.9rem;
  --fs-200: 0.8125rem;

  /* Fläche und Form */
  --radius-m: 12px;   /* Karten, Medien */
  --radius-s: 8px;    /* Formularfelder */
  --shadow-media: 0 24px 70px -28px rgba(30, 32, 35, 0.4);
  --shadow-card: 0 14px 40px -22px rgba(30, 32, 35, 0.28);

  /* Rhythmus */
  --section: clamp(2.75rem, 5.25vw, 4.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-max: 1320px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms;
  --dur-2: 500ms;
  --dur-3: 850ms;

  /* Z-Ebenen (nur systemische Kontexte) */
  --z-header: 100;
  --z-nav-overlay: 90;
}

/* ----- Reset / Basis ------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-400);
  font-weight: 430;
  line-height: 1.6;
  color: var(--text);
  background: var(--stein);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; } /* Breite/Höhe-Attribute reservieren Platz, Skalierung bleibt proportional */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); letter-spacing: -0.005em; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.lead {
  font-size: var(--fs-500);
  font-weight: 460;
  color: var(--text-2);
  line-height: 1.65;
}

.muted { color: var(--text-2); }

::selection { background: var(--kupfer); color: var(--weiss); }

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

/* ----- Layout-Helfer ------------------------------------------------------ */

.shell {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section);
}

/* ----- Ikonografie (Phosphor, inline) ------------------------------------- */

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* ----- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-text);
  font-size: var(--fs-400);
  font-weight: 640;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .icon { transition: transform var(--dur-1) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--kupfer);
  color: var(--weiss);
}
.btn--primary:hover { background: var(--kupfer-tief); }

.btn--dark {
  background: var(--graphit);
  color: var(--weiss);
}
.btn--dark:hover { background: #000; }

.btn--line {
  border-color: var(--linie);
  color: var(--text);
  background: transparent;
}
.btn--line:hover { border-color: var(--text); }

/* Auf dunklem Grund / über Video */
.btn--line-invert {
  border-color: var(--linie-hell);
  color: var(--weiss);
  background: rgba(30, 32, 35, 0.25);
}
.btn--line-invert:hover { border-color: var(--weiss); background: rgba(30, 32, 35, 0.45); }

/* ----- Erreichbarkeits-Status --------------------------------------------- */

.avail {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--fs-300);
  font-weight: 560;
  line-height: 1.3;
}
.avail__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--text-2);
}
.avail.is-open  { color: var(--gruen); }
.avail.is-open .avail__dot { background: var(--gruen); }
.avail.is-closed { color: var(--rot); }
.avail.is-closed .avail__dot { background: var(--rot); }

@media (prefers-reduced-motion: no-preference) {
  .avail.is-open .avail__dot {
    animation: avail-pulse 2.4s ease-in-out infinite;
  }
  @keyframes avail-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 125, 79, 0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(46, 125, 79, 0); }
  }
}

/* Helle Variante über Video: Status muss auf dunklem Grund lesbar sein */
.hero .avail.is-open  { color: #7fd6a4; }
.hero .avail.is-open .avail__dot { background: #7fd6a4; }
.hero .avail.is-closed { color: #ff9d8a; }
.hero .avail.is-closed .avail__dot { background: #ff9d8a; }

/* ----- Scroll-Reveals ------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Gestaffelte Kinder: Verzögerung über data-reveal-child-Index */
[data-reveal] [data-reveal-child] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
[data-reveal].is-revealed [data-reveal-child] { opacity: 1; transform: none; }
[data-reveal].is-revealed [data-reveal-child]:nth-child(1) { transition-delay: 60ms; }
[data-reveal].is-revealed [data-reveal-child]:nth-child(2) { transition-delay: 140ms; }
[data-reveal].is-revealed [data-reveal-child]:nth-child(3) { transition-delay: 220ms; }
[data-reveal].is-revealed [data-reveal-child]:nth-child(4) { transition-delay: 300ms; }
[data-reveal].is-revealed [data-reveal-child]:nth-child(5) { transition-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ----- Leitungslinien ------------------------------------------------------
   Der rote Faden der Seite: kupferne Rohrleitungen, die die Karten der
   Abschnitte verbinden. Jede Leitung verlässt eine Karte an ihrer Unterkante,
   macht (wie echt verlegte Rohre) einen rechtwinkligen Weg mit abgerundeten
   Ecken durch den Zwischenraum und dockt an der nächsten Karte an. Beim
   Scrollen zeichnen sie sich von oben nach unten.

   Die Pfade werden per JS aus den tatsächlichen Kartenpositionen berechnet
   (js/main.js, initPipes), damit sie bei jeder Bildschirmbreite exakt sitzen
   und mitwandern. Ein einziges SVG liegt als Overlay über dem Seiteninhalt. */

.pipes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.pipes__path {
  fill: none;
  stroke: var(--kupfer);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}
/* Anschluss-Punkt am Ende jeder Leitung (dort, wo sie an der Karte andockt) */
.pipes__dot {
  fill: var(--kupfer);
  opacity: 0.72;
}
main { position: relative; } /* Bezugsrahmen für das absolut liegende SVG */

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 76px;
}

.site-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--weiss);
  transition: color var(--dur-2) ease;
}
.site-header__brand small {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 540;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(252, 252, 251, 0.75);
  transition: color var(--dur-2) ease;
}
/* Auf schmaleren Desktops den Zusatz ausblenden, damit die Nav nicht drängt. */
@media (max-width: 1130px) {
  .site-header__brand small { display: none; }
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  margin-left: auto;
}
.site-header__nav a {
  font-size: var(--fs-300);
  font-weight: 560;
  text-decoration: none;
  color: rgba(252, 252, 251, 0.9);
  transition: color var(--dur-1) ease;
}
.site-header__nav a:hover { color: var(--weiss); }

/* Aktiver Link: zeigt dezent, in welchem Abschnitt man sich gerade
   befindet. .is-active wird per Scroll-Spy gesetzt (js/main.js). */
.site-header__nav > a:not(.site-header__phone),
.site-header__item.has-dropdown > a {
  position: relative;
  padding-bottom: 0.3rem;
}
.site-header__nav > a:not(.site-header__phone)::after,
.site-header__item.has-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: left;
  transition: opacity var(--dur-1) ease, transform var(--dur-1) var(--ease-out), background-color var(--dur-1) ease;
}
.site-header__nav > a:not(.site-header__phone):hover::after,
.site-header__item.has-dropdown > a:hover::after {
  opacity: 0.4;
  transform: scaleX(1);
}
.site-header__nav a.is-active { color: var(--weiss); }
.site-header__nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
  background: var(--kupfer-hell);
}

/* Leistungen-Dropdown: Hover oder Klick öffnet das Untermenü
   (initLeistungenDropdown in js/main.js) zu den einzelnen Leitabschnitten. */
.site-header__item { position: relative; display: flex; align-items: center; }
.site-header__item.has-dropdown > a { display: inline-flex; align-items: center; gap: 0.3em; }
.icon--caret {
  width: 0.6em;
  height: 0.6em;
  transition: transform var(--dur-1) var(--ease-out);
}
.site-header__item.has-dropdown.is-hover .icon--caret,
.site-header__item.has-dropdown:focus-within .icon--caret,
.site-header__item.has-dropdown.is-open .icon--caret {
  transform: rotate(180deg);
}

.site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0.9rem;
  min-width: 14.5rem;
  padding: 0.45rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.site-header__dropdown a {
  display: block;
  padding: 0.6em 0.85em;
  border-radius: calc(var(--radius-m) - 5px);
  font-size: var(--fs-300);
  font-weight: 560;
  color: var(--text-2);
  white-space: nowrap;
}
.site-header__dropdown a:hover,
.site-header__dropdown a:focus-visible,
.site-header__dropdown a.is-active { background: var(--kupfer-wash); color: var(--kupfer); }

.site-header__item.has-dropdown.is-hover .site-header__dropdown,
.site-header__item.has-dropdown:focus-within .site-header__dropdown,
.site-header__item.has-dropdown.is-open .site-header__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-300);
  font-weight: 640;
  white-space: nowrap;
  text-decoration: none;
  color: var(--weiss);
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  transition: border-color var(--dur-1) ease, color var(--dur-2) ease, background-color var(--dur-1) ease;
}
.site-header__phone:hover { border-color: var(--weiss); }

/* WhatsApp-Kurzbutton im Header: nur am Handy sichtbar (siehe @media unten),
   sitzt dort links vom Hamburger. Auf dem Desktop bleibt die ausführliche
   Pille wie gehabt in der Nav, hier also standardmäßig unsichtbar. */
.site-header__wa--bar { display: none; }

/* Header nach dem Hero: fester heller Grund, Graphit-Text */
.site-header.is-solid {
  background: rgba(243, 242, 239, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--linie);
}
.site-header.is-solid .site-header__brand { color: var(--text); }
.site-header.is-solid .site-header__brand small { color: var(--text-2); }
.site-header.is-solid .site-header__nav a { color: var(--text-2); }
.site-header.is-solid .site-header__nav a:hover { color: var(--text); }
.site-header.is-solid .site-header__nav a.is-active { color: var(--text); }
.site-header.is-solid .site-header__nav a.is-active::after { background: var(--kupfer); }
.site-header.is-solid .site-header__phone {
  color: var(--text);
  border-color: var(--linie);
}
.site-header.is-solid .site-header__phone:hover { border-color: var(--text); }

.site-header__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.5rem;
  color: var(--weiss);
  cursor: pointer;
}
.site-header.is-solid .site-header__toggle { color: var(--text); }
.site-header__toggle .icon { width: 1.7rem; height: 1.7rem; }
.site-header__toggle .icon--close { display: none; }

@media (max-width: 900px) {
  .site-header__nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-overlay);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    padding: 2rem;
    background: var(--graphit);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) ease;
  }
  .site-header__nav a { font-size: var(--fs-600); color: var(--weiss); }
  /* WhatsApp sitzt am Handy fest im Header links vom Hamburger (siehe
     .site-header__wa--bar), darum hier ausgeblendet statt dupliziert. */
  .site-header__nav .site-header__wa { display: none; }

  /* Leistungen-Dropdown im Mobile-Overlay: Akkordeon statt Popover-Fläche */
  .site-header__item.has-dropdown { flex-direction: column; }
  .site-header__dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    transition: max-height var(--dur-2) var(--ease-out);
  }
  .site-header__item.has-dropdown.is-open .site-header__dropdown {
    max-height: 22rem;
    margin-top: 1.1rem;
  }
  .site-header__dropdown a {
    text-align: center;
    padding: 0.55em 0;
    font-size: var(--fs-400);
    color: rgba(252, 252, 251, 0.75);
    white-space: normal;
  }
  .site-header__dropdown a:hover,
  .site-header__dropdown a:focus-visible,
  .site-header__dropdown a.is-active {
    background: transparent;
    color: var(--weiss);
  }
  /* Setzt die Desktop-Popover-Verschiebung zurück (sonst schiebt
     translate(-50%, 0) das geöffnete Akkordeon aus dem Bildschirm). */
  .site-header__item.has-dropdown.is-hover .site-header__dropdown,
  .site-header__item.has-dropdown:focus-within .site-header__dropdown,
  .site-header__item.has-dropdown.is-open .site-header__dropdown {
    transform: none;
  }

  body.nav-open .site-header__nav { opacity: 1; pointer-events: auto; }
  /* Wortmarke ueber dem Overlay sichtbar lassen (rahmt das Menue oben links) */
  body.nav-open .site-header__brand { position: relative; z-index: calc(var(--z-nav-overlay) + 1); color: var(--weiss); }
  body.nav-open .site-header__brand small { color: rgba(252, 252, 251, 0.6); }

  /* backdrop-filter erzeugt einen Containing-Block und wuerde das fixierte
     Vollbild-Overlay des Menues einsperren: es deckte dann nur die Hoehe der
     Kopfleiste ab und die Menuepunkte laegen auf hellem Seiteninhalt (kaum
     lesbar). Am Handy daher ohne Blur, der gescrollte Header bleibt als
     deckende Leiste bestehen, das Overlay kann wieder den ganzen Schirm fuellen. */
  .site-header.is-solid {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--stein);
  }

  /* Overlay-Menue in ALLEN Zustaenden hell lesbar halten. Sobald der Header
     gescrollt den is-solid-Zustand traegt, gelten dort dunkle Schrift- und
     Hover-Farben, die auch im offenen Vollbildmenue greifen wuerden (dunkel
     auf dunklem Graphit-Grund, kaum lesbar). Darum hier hell erzwingen, auch
     fuer :hover (Geraete mit Zeiger) und den aktiven Zustand. */
  body.nav-open .site-header .site-header__nav a,
  body.nav-open .site-header.is-solid .site-header__nav a,
  body.nav-open .site-header.is-solid .site-header__nav a:hover,
  body.nav-open .site-header.is-solid .site-header__nav a.is-active { color: var(--weiss); }
  body.nav-open .site-header .site-header__dropdown a,
  body.nav-open .site-header.is-solid .site-header__dropdown a { color: rgba(252, 252, 251, 0.78); }
  body.nav-open .site-header .site-header__dropdown a:hover,
  body.nav-open .site-header .site-header__dropdown a:focus-visible,
  body.nav-open .site-header.is-solid .site-header__dropdown a:hover,
  body.nav-open .site-header.is-solid .site-header__dropdown a:focus-visible,
  body.nav-open .site-header.is-solid .site-header__dropdown a.is-active { color: var(--weiss); }

  /* WhatsApp-Kurzbutton im Header: kompakte Pille links vom Hamburger.
     margin-left:auto zieht sie (und damit den Hamburger direkt danach) an
     den rechten Rand, der Hamburger braucht dafuer keinen eigenen
     Auto-Margin mehr. Klein genug gehalten, um die Kopfleiste neben der
     Wortmarke nicht zu dominieren. */
  .site-header__wa--bar {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    gap: 0.4em;
    padding: 0.45em 0.8em;
    font-size: var(--fs-200);
  }
  .site-header__wa--bar .icon { width: 1rem; height: 1rem; }
  .site-header__toggle { margin-left: 0; }

  /* Bleibt beim geoeffneten Menue oberhalb des Overlays sichtbar und hell
     lesbar, unabhaengig vom is-solid-Zustand (gleiche Logik wie Wortmarke
     und Hamburger-Button). */
  body.nav-open .site-header__wa--bar,
  body.nav-open .site-header.is-solid .site-header__wa--bar {
    position: relative;
    z-index: calc(var(--z-nav-overlay) + 1);
    color: var(--weiss);
    border-color: #25d366;
  }

  /* Hamburger: sanfte Morph-Animation zwischen Menue- und Schliess-Symbol
     (Rotation und Ein-/Ausblenden), statt hartem Icon-Tausch. Beide Icons
     liegen zentriert uebereinander, nur die Sichtbarkeit wechselt. */
  .site-header__toggle {
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
    z-index: calc(var(--z-nav-overlay) + 1);
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  .site-header__toggle .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
  }
  .site-header__toggle .icon--menu { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }
  .site-header__toggle .icon--close { display: block; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.5); }
  body.nav-open .site-header__toggle { color: var(--weiss); }
  body.nav-open .site-header__toggle .icon--menu { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.5); }
  body.nav-open .site-header__toggle .icon--close { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); }

  body.nav-open { overflow: hidden; }
}

/* Sicherheitsnetz für sehr schmale Bildschirme (kleines Android, altes
   iPhone SE 1./2. Generation): Marke, WhatsApp-Pille und Hamburger passen
   ab ca. 376px nebeneinander. Darunter erst den Textinhalt der Pille
   weglassen, damit der Hamburger nie eng wird, statt Layout brechen zu
   lassen. Bei den gängigen Handybreiten (375px aufwärts) bleibt die volle
   Pille mit Text unangetastet. */
@media (max-width: 370px) {
  .site-header__wa--bar { padding: 0.45em 0.65em; }
  .site-header__wa-label { display: none; }
}

/* Reduzierte Bewegung: Hamburger nur sanft ueberblenden, ohne Drehung. */
@media (prefers-reduced-motion: reduce) {
  .site-header__toggle .icon { transition: opacity var(--dur-1) ease; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;   /* Fallback */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--weiss);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--graphit);
}
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero__video {
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero__video--ready { opacity: 1; }

/* Scrim: Textseite links dunkler, Fuß dunkler für den Übergang */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 19, 21, 0.82) 0%, rgba(18, 19, 21, 0.45) 42%, rgba(18, 19, 21, 0.06) 78%),
    linear-gradient(0deg, rgba(18, 19, 21, 0.88) 0%, rgba(18, 19, 21, 0.12) 42%, rgba(18, 19, 21, 0.38) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(2.5rem, 6vh, 4.5rem);
}

.hero__eyebrow {
  font-size: var(--fs-300);
  font-weight: 560;
  letter-spacing: 0.02em;
  color: rgba(252, 252, 251, 0.85);
  margin: 0 0 1.1rem;
}

.hero h1 {
  color: var(--weiss);
  max-width: 13ch;
  margin-bottom: 1.2rem;
}

.hero__sub {
  font-size: var(--fs-500);
  font-weight: 460;
  line-height: 1.55;
  color: rgba(252, 252, 251, 0.92);
  max-width: 44ch;
  margin: 0 0 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.hero__phone-note {
  font-size: var(--fs-300);
  color: rgba(252, 252, 251, 0.75);
  font-weight: 500;
}

/* Statusleiste am Hero-Fuß: Öffnungszeiten + Live-Status */
.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  border-top: 1px solid var(--linie-hell);
  padding-top: 1.3rem;
  max-width: 720px;
}
.hero__hours {
  font-size: var(--fs-300);
  color: rgba(252, 252, 251, 0.78);
  font-weight: 500;
}

/* Sanfter Einstieg beim Laden (nur beim ersten Aufbau) */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    opacity: 0;
    transform: translateY(24px);
    animation: hero-in 950ms var(--ease-out) forwards;
  }
  .hero__content > *:nth-child(1) { animation-delay: 150ms; }
  .hero__content > *:nth-child(2) { animation-delay: 260ms; }
  .hero__content > *:nth-child(3) { animation-delay: 380ms; }
  .hero__content > *:nth-child(4) { animation-delay: 500ms; }
  .hero__content > *:nth-child(5) { animation-delay: 640ms; }
  @keyframes hero-in {
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 720px) {
  .hero { align-items: flex-end; }
  .hero h1 { max-width: 12ch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions { gap: 0.7rem; }
}

/* ==========================================================================
   AKTUELLES
   ========================================================================== */

.news__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas:
    "feature head"
    "feature side";
  grid-template-rows: auto 1fr;
  gap: 0 clamp(2rem, 4vw, 3.5rem);
}
.news__head {
  grid-area: head;
}
.news__head h2 { margin-bottom: 0; font-size: var(--fs-700); }

/* Hauptmeldung: eigenständige Karte, bleibt in der News-Sektion. */
.news__feature {
  grid-area: feature;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: var(--graphit);
  color: var(--weiss);
  border: 1px solid rgba(252, 252, 251, 0.08);
  border-radius: var(--radius-m);
  padding: clamp(2rem, 4vw, 3.25rem);
  box-shadow: var(--shadow-card);
}
.news__feature h3 { color: var(--weiss); max-width: 18ch; }
.news__feature p { color: rgba(252, 252, 251, 0.84); max-width: 46ch; }
.news__feature .btn { margin-top: 1.6rem; }

.news__kicker {
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kupfer-hell);
  margin: 0 0 0.7rem;
}

.news__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0.6rem;
}
.news__item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 1.4rem;
  align-items: center;
  padding-block: 1.6rem;
}
.news__item + .news__item { border-top: 1px solid var(--linie); }
.news__item img {
  width: 104px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--weiss);
}
.news__item h4 { margin-bottom: 0.25em; }
.news__item p { font-size: var(--fs-300); color: var(--text-2); }

@media (max-width: 960px) {
  .news__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "feature" "head" "side";
    grid-template-rows: none;
  }
  .news__head { padding-top: 2.2rem; }
}

/* ==========================================================================
   FLIESSENDE LEISTUNGSABSCHNITTE
   ========================================================================== */

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

/* Getönte Abschnitte laufen weich aus statt hart zu schneiden:
   kein striktes Teilen der Sektionen, alles bleibt eine Fläche. */
.section--tint {
  background: linear-gradient(
    180deg,
    rgba(233, 232, 227, 0) 0%,
    var(--stein-2) clamp(3rem, 8vw, 7rem),
    var(--stein-2) calc(100% - clamp(3rem, 8vw, 7rem)),
    rgba(233, 232, 227, 0) 100%
  );
}

.flow__grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}
.flow__grid--mirror { grid-template-columns: 1fr 1.12fr; }

.flow--waermepumpe h2 {
  white-space: nowrap;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
}

.flow__media { position: relative; margin: 0; }
.flow__media video,
.flow__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-media);
  background: var(--stein-2);
}

.flow__caption {
  margin-top: 0.85rem;
  font-size: var(--fs-200);
  color: var(--text-2);
}

/* Eingesetztes Referenzbild: mittig, kompakt an den Abschnitt angebunden. */
.flow__inset {
  margin: clamp(1.5rem, 3.5vw, 2.75rem) auto 0;
  max-width: min(560px, 52%);
  position: relative;
}
.flow__inset img {
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-media);
}

/* Sachliche Merkmalzeilen (nur Trennlinie oben, bewusst sparsam) */
.spec-rows { margin: 2rem 0 0; }
.spec-rows__row {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0.4rem 1.4rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--linie);
}
.spec-rows__row dt { font-weight: 660; }
.spec-rows__row dd { margin: 0; color: var(--text-2); font-size: var(--fs-300); line-height: 1.55; }

/* Umschaltbare Merkmalzeilen: die gewählte Zeile steuert die Animation daneben.
   Zustände lehnen sich bewusst an .chip.is-active an (gleiche Kupfer-Wash-Logik),
   damit "das ist auswählbar" ohne neue Sprache erkennbar wird. */
.spec-rows--switch { margin-top: 1.6rem; }
.spec-rows--switch .spec-rows__row {
  width: 100%;
  margin: 0;
  border-inline: 0;
  border-bottom: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  padding: 0.95rem 2.5rem 0.95rem 1.1rem;
  border-radius: var(--radius-s);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
}
.spec-rows--switch .spec-rows__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 3px;
  border-radius: 2px;
  background: var(--kupfer);
  transform: scaleY(0);
  transition: transform var(--dur-1) ease;
}
.spec-rows--switch .spec-rows__row::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.05em;
  height: 1.05em;
  transform: translate(-6px, -50%);
  background: var(--kupfer);
  opacity: 0;
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z"/></svg>') center / contain no-repeat;
}
.spec-rows--switch .spec-rows__row:hover,
.spec-rows--switch .spec-rows__row:focus-visible { background-color: var(--stein-2); }
.spec-rows--switch .spec-rows__row:hover .spec-rows__dt,
.spec-rows--switch .spec-rows__row:focus-visible .spec-rows__dt,
.spec-rows--switch .spec-rows__row.is-active .spec-rows__dt { color: var(--kupfer); }
.spec-rows--switch .spec-rows__row:hover::after,
.spec-rows--switch .spec-rows__row:focus-visible::after,
.spec-rows--switch .spec-rows__row.is-active::after { opacity: 1; transform: translate(0, -50%); }
.spec-rows--switch .spec-rows__row.is-active {
  background-color: var(--kupfer-wash);
}
.spec-rows--switch .spec-rows__row.is-active::before { transform: scaleY(1); }
.spec-rows__dt { font-weight: 660; transition: color var(--dur-1) ease; }
.spec-rows__dd { color: var(--text-2); font-size: var(--fs-300); line-height: 1.55; }
.spec-rows__hint {
  margin: 0.9rem 0 0;
  font-size: var(--fs-200);
  color: var(--text-2);
}

/* Schema-Animation: 4:3, sonst wie jedes andere Sektions-Video (Radius, Schatten). */
.flow__media--schema video { aspect-ratio: 4 / 3; }

/* Häkchenliste (Icon: Phosphor "check" als Maske) */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 1.7rem 0 0;
}
.tick-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 1.05em;
  height: 1.05em;
  background: var(--kupfer);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg>') center / contain no-repeat;
}

.flow__extras { margin-top: 1.7rem; color: var(--text-2); }
.flow__extras strong { color: var(--text); font-weight: 660; }

.flow__actions { margin-top: 2.1rem; }

@media (max-width: 960px) {
  .flow__grid,
  .flow__grid--mirror { display: block; }
  .flow__media { margin-bottom: 2rem; }
  .flow__grid--mirror .flow__media { margin-bottom: 0; margin-top: 2.25rem; }
  .flow__inset { max-width: 100%; margin: 2.25rem 0 0; }
  .spec-rows__row { grid-template-columns: 1fr; }
}

/* Waermepumpe am Handy: Das Schema-Video wird als fest verankerte Vorschau
   oben gehalten (sticky, unter dem Header), die drei Systemzeilen liegen
   darunter. So aktualisiert ein Tipp auf eine Zeile das Video sofort im
   sichtbaren Bereich, ohne hoch und runter scrollen zu muessen. Bewusst nur
   fuer Handybreiten (bis 640px); auf Tablets bleibt das gestapelte Layout,
   damit das 4:3-Video nicht durch die Hoehenbegrenzung beschnitten wird.
   Das Desktop-Split-Layout bleibt ohnehin unveraendert. */
@media (max-width: 640px) {
  .flow--waermepumpe .flow__grid { display: flex; flex-direction: column; }
  .flow--waermepumpe .flow__media {
    order: -1;
    margin: 0 0 1.4rem;
    position: sticky;
    top: 84px;
    z-index: 3;
    background: var(--stein);
    padding-bottom: 0.35rem;
  }
  .flow--waermepumpe .flow__media--schema video { max-height: 44vh; }
}

/* ==========================================================================
   DUNKLES BAND: KLIMA & LÜFTUNG
   ========================================================================== */

.band--dark {
  background: var(--graphit);
}
.band--dark h2 { color: var(--weiss); }
.band--dark .lead { color: rgba(252, 252, 251, 0.8); }
.band--dark p { color: rgba(252, 252, 251, 0.8); }

.band__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}
.band__head .lead { margin-inline: auto; }

.band__media {
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  max-width: 920px;
}
.band__media video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  border: 1px solid rgba(252, 252, 251, 0.12);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  background: var(--graphit-80);
}

.band__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 980px;
  margin-inline: auto;
}
.band__point h4 { color: var(--weiss); margin-bottom: 0.45em; }
.band__point p { color: rgba(252, 252, 251, 0.72); font-size: var(--fs-300); margin: 0; }

@media (max-width: 760px) {
  .band__points { grid-template-columns: 1fr; gap: 1.8rem; }
}

.band__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 980px;
  margin: clamp(2.25rem, 4.5vw, 3.5rem) auto 0;
}
.band__card {
  background: var(--graphit-80);
  border: 1px solid rgba(252, 252, 251, 0.08);
  border-radius: var(--radius-m);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.band__card h3 {
  color: var(--weiss);
  font-size: var(--fs-500);
  line-height: 1.2;
  margin-bottom: 0.55em;
}
.band__card p {
  color: rgba(252, 252, 251, 0.78);
  font-size: var(--fs-300);
  margin: 0;
}

@media (max-width: 760px) {
  .band__cards { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   SOLAR & SANIERUNG (Hairline-Split)
   ========================================================================== */

.split-head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.split-head h2 { margin-bottom: 0; }

.split-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  align-items: start;
}
.split-cols__divider {
  width: 1px;
  align-self: stretch;
  background: var(--linie);
}
.split-cols__media { margin: 0 0 1.5rem; }
.split-cols__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-media);
}
.split-cols__col h3 { margin-bottom: 0.55em; }

@media (max-width: 860px) {
  .split-cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-cols__divider { width: 100%; height: 1px; }
}

/* ==========================================================================
   BETRIEB & VERTRAUEN
   ========================================================================== */

.betrieb__intro {
  max-width: 640px;
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.betrieb__intro h2 { margin-bottom: 0.6em; }
.betrieb__intro .lead { margin-inline: auto; }
.betrieb__intro p:not(.lead) {
  text-align: left;
  margin-inline: auto;
  margin-top: 1.4rem;
}
.betrieb__seal {
  display: block;
  margin: 2.6rem auto 0;
  color: var(--kupfer);
}
.betrieb__signoff {
  margin-top: 1.8rem;
  font-size: var(--fs-300);
  color: var(--text-2);
  text-align: center;
}
.betrieb__signoff em {
  font-style: italic;
  font-weight: 560;
  color: var(--text);
}

.betrieb__reviews {
  padding-top: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--linie);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.review-score {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}
.review-score__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--text);
}
.review-score__stars {
  display: flex;
  gap: 0.15rem;
  color: var(--kupfer);
  margin-bottom: 0.35rem;
}
.review-score__stars .icon { width: 1rem; height: 1rem; }
.icon--star-dim { opacity: 0.35; }
.review-score__meta {
  margin: 0.3rem 0 0;
  font-size: var(--fs-200);
  color: var(--text-2);
}

.review-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.review-quote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--kupfer);
}
.review-quote blockquote {
  margin: 0 0 0.7rem;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text);
}
.review-quote figcaption { font-size: var(--fs-200); color: var(--text-2); }

@media (max-width: 900px) {
  .betrieb__reviews { grid-template-columns: 1fr; }
  .review-quotes { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ==========================================================================
   FÖRDERUNG (Mock-Rechner)
   ========================================================================== */

.foerderung__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.foerderung__intro h2 { margin-bottom: 0.7em; }
.foerderung__intro p + p { margin-top: 1.1em; }

.calc {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.calc__row + .calc__row { margin-top: 1.6rem; }
.calc__label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 640;
  margin-bottom: 0.7rem;
}
.calc__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--fs-300);
  font-weight: 560;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.chip .icon { width: 1rem; height: 1rem; }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip.is-active {
  border-color: var(--kupfer);
  background: var(--kupfer-wash);
  color: var(--kupfer-tief);
}

.calc__result {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.calc__result-label { font-size: var(--fs-300); color: var(--text-2); margin: 0 0 0.4rem; }
.calc__result-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-700);
  color: var(--kupfer-tief);
  margin: 0 0 0.6rem;
}
.calc__result-note { font-size: var(--fs-200); color: var(--text-2); margin: 0; }
.calc__cta { margin-top: 1.8rem; width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .foerderung__grid { display: block; }
  .foerderung__intro { margin-bottom: 2.5rem; }
}

/* ==========================================================================
   REFERENZEN (Galerie)
   ========================================================================== */

.gallery {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, clamp(150px, 19vw, 260px));
  grid-template-areas:
    "a a b c"
    "a a d d"
    "e e f f";
  gap: clamp(1rem, 2vw, 1.5rem);
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-media);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__item:nth-child(1) { grid-area: a; }
.gallery__item:nth-child(2) { grid-area: b; }
.gallery__item:nth-child(3) { grid-area: c; }
.gallery__item:nth-child(4) { grid-area: d; }
.gallery__item:nth-child(5) { grid-area: e; }
.gallery__item:nth-child(6) { grid-area: f; }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.1rem 1rem;
  font-size: var(--fs-200);
  color: var(--weiss);
  background: linear-gradient(0deg, rgba(18, 19, 21, 0.8) 0%, rgba(18, 19, 21, 0) 100%);
}

@media (max-width: 760px) {
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .gallery__item { grid-area: auto !important; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   ANFRAGE (Mock-Formular)
   ========================================================================== */

.anfrage__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.anfrage__intro h2 { margin-bottom: 0.6em; }

.contact-block {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.contact-block__row {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-500);
  font-weight: 640;
  text-decoration: none;
  color: var(--text);
  transition: color var(--dur-1) ease;
}
.contact-block__row .icon { color: var(--kupfer); }
.contact-block__row:hover { color: var(--kupfer-tief); }

.request-form {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-card);
}
.request-form__field + .request-form__field,
.request-form__field + .request-form__row,
.request-form__row + .request-form__field { margin-top: 1.4rem; }
.request-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.request-form__label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 640;
  margin-bottom: 0.55rem;
}
.request-form input,
.request-form textarea {
  width: 100%;
  padding: 0.85em 1em;
  border-radius: var(--radius-s);
  border: 1px solid var(--linie);
  background: var(--stein);
  font-family: var(--font-text);
  font-size: var(--fs-400);
  color: var(--text);
  transition: border-color var(--dur-1) ease;
}
.request-form input::placeholder,
.request-form textarea::placeholder { color: var(--text-2); opacity: 0.75; }
.request-form input:focus,
.request-form textarea:focus { outline: none; border-color: var(--kupfer); }
.request-form textarea { resize: vertical; min-height: 6.5rem; }

.request-form__error {
  display: none;
  margin-top: 0.5rem;
  font-size: var(--fs-200);
  color: var(--rot);
}
.request-form__field.has-error input { border-color: var(--rot); }
.request-form__field.has-error .request-form__error { display: block; }

.request-form__submit { margin-top: 1.8rem; width: 100%; justify-content: center; }

.request-form__success {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-s);
  background: var(--kupfer-wash);
  color: var(--kupfer-tief);
}
.request-form__success[hidden] { display: none; }
.request-form__success .icon { flex: none; margin-top: 0.15rem; }
.request-form__success h4 { color: var(--kupfer-tief); margin-bottom: 0.25em; font-size: var(--fs-500); }
.request-form__success p { color: var(--kupfer-tief); font-size: var(--fs-300); margin: 0; }

@media (max-width: 860px) {
  .anfrage__grid { display: block; }
  .anfrage__intro { margin-bottom: 2.5rem; }
  .request-form__row { grid-template-columns: 1fr; }
}

/* Formular am Handy kompakter und aufgeraeumter: engere Abstaende und
   Innenraeume, damit es edel statt klobig wirkt. Eingabefelder behalten
   bewusst 16px Schrift, sonst zoomt iOS beim Fokussieren hinein. */
@media (max-width: 560px) {
  .anfrage__intro { margin-bottom: 1.9rem; }
  .request-form { padding: 1.4rem 1.25rem; }
  .request-form__field + .request-form__field,
  .request-form__field + .request-form__row,
  .request-form__row + .request-form__field { margin-top: 1rem; }
  .request-form__row { gap: 1rem; }
  .request-form__label { margin-bottom: 0.4rem; }
  .request-form input,
  .request-form textarea { padding: 0.7em 0.9em; }
  .request-form textarea { min-height: 4.5rem; }
  .request-form__submit { margin-top: 1.3rem; }
  .request-form .calc__chips { gap: 0.45rem; }
  .request-form .chip { padding: 0.5em 0.9em; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  position: relative;
  background: var(--graphit);
  color: rgba(252, 252, 251, 0.85);
  padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
}
.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--linie-hell);
}
.site-footer__logo {
  width: 84px;
  height: auto;
  border-radius: var(--radius-s);
  margin-bottom: 1rem;
}
.site-footer__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  color: var(--weiss);
  margin: 0 0 0.15em;
}
.site-footer__brand .muted { color: rgba(252, 252, 251, 0.6); margin-bottom: 1.1em; }
.site-footer__block { font-style: normal; }
.site-footer__block h4 {
  color: var(--weiss);
  font-size: var(--fs-400);
  margin-bottom: 0.7em;
}
.site-footer__block p { font-size: var(--fs-300); line-height: 1.7; }
.site-footer__block .muted { color: rgba(252, 252, 251, 0.55); margin-top: 0.7em; }
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--weiss); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.7rem;
  font-size: var(--fs-200);
  color: rgba(252, 252, 251, 0.55);
}

@media (max-width: 960px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Footer am Handy kompakter: Marke oben ueber die ganze Breite, darunter
   Adresse und Kontakt zweispaltig, Oeffnungszeiten wieder ueber die ganze
   Breite. So bleiben alle Angaben erhalten, der Footer wird aber deutlich
   niedriger und wirkt aufgeraeumter. */
@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.25rem;
    padding-bottom: 2rem;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__grid > .site-footer__block:last-child { grid-column: 1 / -1; }
  .site-footer__logo { width: 58px; margin-bottom: 0.7rem; }
  .site-footer__name { font-size: 1.4rem; }
  .site-footer__brand .muted { margin-bottom: 0.7em; }
  .site-footer__block h4 { margin-bottom: 0.4em; }
  .site-footer__block p { line-height: 1.55; }
  .site-footer__block .muted { margin-top: 0.45em; }
  .site-footer__legal { padding-block: 1.2rem; gap: 0.3rem 1rem; }
}

/* ==========================================================================
   LEISTUNGEN (Übersicht: vier Bereiche mit Teaser-Icons, verlinkt in Details)
   ========================================================================== */
.leistungen__head {
  max-width: 46rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.leistungen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
/* Fotokarten statt Icon-Kacheln: Bild füllt die Karte, ein Kupfer-Verlauf
   sichert die Lesbarkeit von Nummer und Text am unteren Rand. */
.leistung-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
  color: var(--weiss);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) ease;
}
.leistung-card:hover,
.leistung-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(30, 20, 12, 0.45);
}
.leistung-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.leistung-card:hover .leistung-card__img,
.leistung-card:focus-visible .leistung-card__img {
  transform: scale(1.06);
}
.leistung-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(21, 15, 9, 0) 32%,
    rgba(21, 15, 9, 0.38) 62%,
    rgba(16, 11, 7, 0.86) 100%);
}
.leistung-card__num {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--weiss);
  padding: 0.32em 0.72em;
  border: 1px solid rgba(252, 252, 251, 0.55);
  border-radius: 999px;
  background: rgba(21, 15, 9, 0.28);
  backdrop-filter: blur(6px);
}
.leistung-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.4rem 1.6rem;
}
.leistung-card__body h3 {
  color: var(--weiss);
  font-size: var(--fs-500);
  line-height: 1.12;
}
.leistung-card__body p {
  margin: 0;
  color: rgba(252, 252, 251, 0.82);
  font-size: var(--fs-300);
  max-width: 26ch;
}
.leistung-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: 0.4rem;
  color: var(--kupfer-hell);
  font-weight: 640;
  font-size: var(--fs-300);
}
.leistung-card:hover .leistung-card__more .icon--arrow,
.leistung-card:focus-visible .leistung-card__more .icon--arrow {
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .leistungen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .leistungen__grid { grid-template-columns: 1fr; }
}

/* Große Detailkarte: vollständiges Leistungsspektrum, dunkel abgesetzt wie
   news__feature, damit sie als eigenständige Übersicht statt als fünfte
   Karte im Raster wirkt. */
.leistungen-all {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--graphit);
  color: var(--weiss);
  border: 1px solid rgba(252, 252, 251, 0.08);
  border-radius: var(--radius-m);
  padding: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.75rem, 3.6vw, 3rem);
  box-shadow: var(--shadow-card);
}
.leistungen-all__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid rgba(252, 252, 251, 0.12);
}
.leistungen-all__heading h3 { color: var(--weiss); margin-bottom: 0.3em; }
.leistungen-all__heading p { margin: 0; color: rgba(252, 252, 251, 0.72); max-width: 40ch; }
.leistungen-all__cta { flex-shrink: 0; }

.leistungen-all__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.9rem clamp(1.25rem, 2.4vw, 2rem);
}
.leistungen-all__col h4 { color: var(--weiss); font-size: var(--fs-500); }

/* Tick-Liste, invertiert (auf --graphit) und enger gesetzt für die Detailkarte */
.tick-list--invert li { color: rgba(252, 252, 251, 0.78); }
.tick-list--invert li::before { background: var(--kupfer-hell); }
.tick-list--compact { margin-top: 0.85rem; }
.tick-list--compact li {
  padding: 0.3rem 0 0.3rem 1.65rem;
  font-size: var(--fs-300);
  line-height: 1.5;
}
.tick-list--compact li::before {
  top: 0.62em;
  width: 0.9em;
  height: 0.9em;
}

@media (max-width: 900px) {
  .leistungen-all__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .leistungen-all__top { flex-direction: column; align-items: flex-start; }
  .leistungen-all__cta { width: 100%; justify-content: center; }
}
@media (max-width: 520px) {
  .leistungen-all__cols { grid-template-columns: 1fr; }
}

/* WhatsApp-Button rechts oben: auf ausdrücklichen Kundenwunsch im WhatsApp-Grün
   (bewusste Ausnahme von der sonst strikten Ein-Akzent-Palette). */
.site-header__wa,
.site-header.is-solid .site-header__wa {
  border-color: #25d366;
}
.site-header__wa:hover,
.site-header.is-solid .site-header__wa:hover {
  border-color: #25d366;
}
.site-header__wa .icon { color: #25d366; }