/* =========================================================================
   D&S Baum- und Landschaftspflege GbR – Stylesheet
   Farbwelt und Anmutung abgeleitet aus dem Logo (Dunkelgrün auf Creme).
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Header/Nav · 5 Kettensägen-Leiste
           6 Hero · 7 Sektionen/Komponenten · 8 Footer · 9 Modal/Formular
           10 Rechtstexte · 11 Animationen · 12 Media Queries
   ========================================================================= */

/* ---------- 1 Tokens ---------------------------------------------------- */
:root {
  --forest-900: #12240f;
  --forest-800: #16301a;
  --forest: #1e3a22;
  --forest-600: #2f5a33;
  --moss: #6b8f5e;
  --moss-soft: #a8bf9c;
  --sand: #f2efe5;
  --cream: #fbfaf6;
  --paper: #ffffff;
  --ink: #16200f;
  --ink-soft: #4a5344;
  --line: rgba(30, 58, 34, 0.14);
  --line-strong: rgba(30, 58, 34, 0.28);
  --bark: #6d5a43;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(18, 36, 15, 0.06), 0 6px 18px rgba(18, 36, 15, 0.06);
  --shadow-lg: 0 24px 70px rgba(18, 36, 15, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 76px;

  /* Verlauf der Schlussfläche – wird auch vom grünen Band im Kopf genutzt */
  --cut-gradient: linear-gradient(120deg, var(--forest-800) 0%, var(--forest-600) 48%, var(--moss) 100%);

  /* Gekachelte Maske für die ausgefranste Schnittkante (kein echter Sägeschnitt
     ist schnurgerade). Die Kachel wird nur am unteren Rand eingesetzt, damit die
     Unruhe immer gleich stark bleibt – unabhängig von der Höhe des Bandes. */
  --rough-edge: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='168' height='10' preserveAspectRatio='none'><path fill='black' d='M0 0 H168 V5.2 L161 7.4 L156 4.1 L150 6.6 L143 3.4 L138 8.2 L131 5 L124 6.9 L119 3.2 L112 7.6 L106 4.4 L99 6.2 L93 2.9 L86 7.1 L80 4.8 L74 8.6 L67 5.3 L61 3.6 L54 7.2 L48 4.2 L41 6.4 L35 3.1 L28 7.8 L22 4.6 L15 6.1 L9 3.3 L0 5.2 Z'/></svg>");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* reservierte Scrollleiste: verhindert Breitensprünge, wenn das Scrollen
     kurzzeitig gesperrt wird (Kontaktfenster, Schnitt-Finale) */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

address { font-style: normal; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  color: var(--forest-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.6rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }

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

::selection { background: var(--moss-soft); color: var(--forest-900); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--forest);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3 Layout ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* flacher Streifen, z. B. für die Kennzahlen */
.section--slim { padding-block: clamp(1.4rem, 2.4vw, 2.1rem); }
.section--sand { background: var(--sand); }
.section--forest {
  background: var(--forest-900);
  color: #e6e9e0;
}
.section--forest h2,
.section--forest h3 { color: #f4f3ec; }
.section--forest a { color: var(--moss-soft); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest-600);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}
.section--forest .eyebrow { color: var(--moss-soft); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.section--forest .lead { color: #c7cec0; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }

/* Buttons */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s var(--ease-out-expo), background-color 0.25s var(--ease),
    color 0.25s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(18, 36, 15, 0.22);
}
.btn:active { transform: translateY(0); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--forest);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(30, 58, 34, 0.06); color: var(--forest); box-shadow: none; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--forest-900); }
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #f2f1ea;
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.btn--sm { padding: 0.7rem 1.25rem; font-size: 0.85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--forest-600);
}
.link-arrow::after {
  content: "→";
  transition: transform 0.35s var(--ease-out-expo);
}
.link-arrow:hover::after { transform: translateX(5px); }

/* Bildrahmen / Platzhalter */
.figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
  box-shadow: var(--shadow-sm);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.85rem 0.25rem 0;
}
.figure--ratio-4-3 { aspect-ratio: 4 / 3; }
.figure--ratio-3-4 { aspect-ratio: 3 / 4; }
.figure--ratio-16-9 { aspect-ratio: 16 / 9; }
.figure--ratio-1 { aspect-ratio: 1 / 1; }

.ph-tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(18, 36, 15, 0.72);
  color: #f1efe6;
  backdrop-filter: blur(6px);
}

/* ---------- 4 Header / Navigation --------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(251, 250, 246, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    transform 0.45s var(--ease), height 0.4s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header.is-hidden { transform: translateY(-105%); }

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--forest-900);
  flex: none;
}
.brand img {
  /* freigestelltes Emblem (transparentes PNG) – passt sich jeder Kopfhöhe an */
  height: min(52px, calc(var(--header-h) - 24px));
  width: auto;
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__claim {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest-600);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav a {
  font-size: 0.93rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-block: 0.35rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--forest);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--forest); font-weight: 600; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }
.header__phone {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--forest-900);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--forest-900);
  transform: translateX(-50%);
  transition: transform 0.35s var(--ease-out-expo), opacity 0.2s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -0.75px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after { top: 6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 80;
  background: var(--cream);
  padding: 2rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out-expo), visibility 0.3s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--forest-900);
  text-decoration: none;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 1.75rem; align-self: flex-start; }

/* ---------- 5 Kettensägen-Fortschrittsleiste ---------------------------- */
/* Platzhalter-Illustration: gegen finale Grafik austauschbar (SVG in main.ts) */
.saw-progress {
  /* Höhe so gewählt, dass die Säge mittig auf dem Schnitt-Strich sitzt
     (Strich liegt auf 50 % der Boxhöhe, Säge wird darauf zentriert). */
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 85;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.saw-progress.is-active { opacity: 1; transform: none; }

/* Durchgezogenes Grün zwischen Header und Schnittkante: die Säge fährt an der
   Unterkante eines grünen Bandes entlang – links davon ist sie durch (leicht
   ausgefranste Kante), rechts steht der Schnitt noch bevor (glatte Kante). */
.saw-progress__band,
.saw-progress__rough {
  position: absolute;
  top: var(--band-top, 0px);
  bottom: 50%;
  background: var(--forest);
  transition: top 0.45s var(--ease);
}
/* Fährt die Navigation beim Scrollen ein, wächst das grüne Band bündig
   bis an den oberen Bildschirmrand – der Schnitt bleibt an seiner Stelle. */
.header.is-hidden ~ .saw-progress { --band-top: calc(-1 * var(--header-h)); }
.saw-progress__band {
  /* --saw-lag: Abstand zwischen Sägeblatt und Beginn der gerissenen Kante */
  left: calc(var(--saw-progress, 0%) - var(--saw-lag, 34px));
  right: 0;
}
.saw-progress__rough {
  left: 0;
  width: calc(var(--saw-progress, 0%) - var(--saw-lag, 34px));
  /* Zwei Maskenebenen: unten die ausgefranste Schnittkante in fester
     Pixelhöhe, darüber eine deckende Fläche für den Rest des Bandes. */
  -webkit-mask-image: var(--rough-edge), linear-gradient(#000, #000);
  mask-image: var(--rough-edge), linear-gradient(#000, #000);
  -webkit-mask-size: 168px 10px, 100% calc(100% - 9px);
  mask-size: 168px 10px, 100% calc(100% - 9px);
  -webkit-mask-position: left bottom, left top;
  mask-position: left bottom, left top;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  filter: drop-shadow(0 2px 3px rgba(18, 36, 15, 0.3));
}

/* Im Schnitt-Finale geht das Band nahtlos in die grüne Fläche über: beide
   zeichnen denselben Verlauf im Viewport-Koordinatensystem
   (background-attachment: fixed), eingeblendet während der Seitenteil fällt. */
.saw-progress__band::after,
.saw-progress__rough::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cut-gradient);
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
/* im Schnitt-Finale verschwindet die Säge */
body.is-cut .saw-progress__saw { opacity: 0; }
body.is-cut .saw-progress__band::after,
body.is-cut .saw-progress__rough::after { opacity: 1; }
.saw-progress__saw {
  position: absolute;
  transition: opacity 0.35s var(--ease);
  top: 50%;
  left: var(--saw-progress, 0%);
  transform: translate(-62%, -50%);
  width: 118px;
  filter: drop-shadow(0 4px 8px rgba(18, 36, 15, 0.28));
  transition: left 0.08s linear;
}
/* Motorzustände: sägen → Leerlauf (2 s) → aus */
.saw-progress .saw-chain { animation: none; }
.saw-progress.is-idling .saw-chain { animation: saw-chain 0.55s linear infinite; }
.saw-progress.is-cutting .saw-chain { animation: saw-chain 0.3s linear infinite; }
.saw-progress.is-idling .saw-progress__saw { animation: saw-idle 0.14s linear infinite; }
.saw-progress.is-cutting .saw-progress__saw { animation: saw-shake 0.12s linear infinite; }
.saw-progress.is-cutting.is-hard .saw-progress__saw { animation: saw-shake-hard 0.08s linear infinite; }

/* Rauchfetzen und Sägespäne: eckige Schnipsel statt weicher Wölkchen.
   Form, Größe, Flugbahn und Drehung werden je Teilchen in main.ts gewürfelt. */
.saw-smoke,
.saw-chip {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--w, 10px);
  height: var(--h, 10px);
  margin-top: calc(var(--h, 10px) / -2);
  margin-left: calc(var(--w, 10px) / -2);
  clip-path: polygon(var(--ax, 50%) 0%, 0% 100%, 100% 100%);
  pointer-events: none;
}

/* Rauch: helle Fetzen, die nach oben davonwirbeln */
.saw-smoke {
  background: rgba(228, 231, 224, 0.85);
  animation: saw-smoke var(--dur, 1.2s) cubic-bezier(0.22, 0.6, 0.35, 1) forwards;
}
@keyframes saw-smoke {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
  12% { opacity: var(--o, 0.8); }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 6px), var(--dy, -40px)) rotate(var(--r, 120deg)) scale(1.5);
  }
}

/* Späne: grüne Schnipsel aus dem Band, die der Schwerkraft folgen */
.saw-chip {
  background: var(--chip, #2f5a33);
  animation: saw-chip var(--dur, 1.2s) linear forwards;
}
@keyframes saw-chip {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  15% {
    opacity: 1;
    transform: translate(calc(var(--dx, 10px) * 0.2), var(--up, -12px)) rotate(calc(var(--r, 180deg) * 0.2));
  }
  85% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 10px), var(--dy, 160px)) rotate(var(--r, 180deg));
  }
}

/* Overscroll-Barriere am Seitenende */
.cut-hint {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 86;
  transform: translate(-50%, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(18, 36, 15, 0.82);
  backdrop-filter: blur(10px);
  color: #eef0e8;
  border: 0;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out-expo), visibility 0.35s;
}
.cut-hint:hover { background: rgba(18, 36, 15, 0.92); }
.cut-hint.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.cut-hint__bar {
  width: 148px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.cut-hint__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--barrier, 0) * 100%);
  background: linear-gradient(90deg, var(--moss-soft), #fff);
  transition: width 0.12s linear;
}

/* Abfallender Seitenteil + grüne Schlussfläche */
/* Begrenzt den Seitenbereich: `clip` schneidet den herunterfallenden Teil ab,
   ohne – anders als `hidden` – einen Scrollcontainer zu erzeugen. Damit bleibt
   die Seitenhöhe konstant und Sticky-Effekte funktionieren weiter. */
.cut-stage {
  position: relative;
  z-index: 2;
  overflow: clip;
  /* fällt gerade nach unten weg – wie ein abgetrennter Abschnitt */
  transition: transform 1s cubic-bezier(0.5, 0, 0.9, 0.35);
}
.cut-slab {
  background: var(--cream);
}
/* Im Moment des Schnitts wird die Bühne auf den sichtbaren Ausschnitt fixiert
   (Versatz kommt aus main.ts), damit genau dieser Ausschnitt wegfällt. */
body.is-cut .cut-stage {
  position: fixed;
  inset: 0;
  /* Die Bühne fällt mitsamt ihrer Maske – so rutscht kein höher liegender
     Seiteninhalt nach, es bleibt die grüne Fläche zurück. */
  transform: translateY(110%);
}
body.is-cut .cut-slab {
  margin-top: var(--cut-offset, 0px);
  pointer-events: none;
}
/* Wichtig: Der verschobene Teil zählt sonst zum Scrollbereich. Die Seite ließe
   sich dann weiterscrollen (Blick hinter die Seite) und wäre laut atBottom()
   nicht mehr am Ende – der Schnitt würde sofort wieder zurückgenommen. */
body.is-cut { overflow: hidden; }

.cut-reveal {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
  background-image: var(--cut-gradient);
  background-attachment: fixed;
  color: #fff;
  /* Beim Zurückkehren bleibt die Fläche sichtbar, bis der Seitenteil wieder
     an seinem Platz ist – sonst blitzt der Hintergrund durch. */
  visibility: hidden;
  transition: visibility 0s linear 1s;
}
body.is-cut .cut-reveal { visibility: visible; transition-delay: 0s; }
.cut-reveal__inner { max-width: min(92vw, 56rem); }
.cut-reveal h2 {
  color: #fff;
  font-size: clamp(2.4rem, 1rem + 7vw, 6.5rem);
  line-height: 1.02;
  margin-bottom: 1.5rem;
}
.cut-reveal p { color: rgba(255, 255, 255, 0.85); margin-inline: auto; max-width: 38ch; }
.cut-reveal h2,
.cut-reveal p,
.cut-reveal .btn-row,
.cut-reveal .cut-reveal__back {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease) 0.45s, transform 0.9s var(--ease-out-expo) 0.45s;
}
.cut-reveal .lead { transition-delay: 0.55s; }
.cut-reveal .btn-row { transition-delay: 0.65s; justify-content: center; }
.cut-reveal__meta { transition-delay: 0.75s; }
.cut-reveal .cut-reveal__back { transition-delay: 0.85s; }
body.is-cut .cut-reveal h2,
body.is-cut .cut-reveal p,
body.is-cut .cut-reveal .btn-row,
body.is-cut .cut-reveal .cut-reveal__back { opacity: 1; transform: none; }

.cut-reveal__meta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.cut-reveal__meta a { color: rgba(255, 255, 255, 0.86); text-decoration: underline; }
.cut-reveal__meta a:hover { color: #fff; }
.cut-reveal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.cut-reveal__back:hover { color: #fff; }

@keyframes saw-chain { to { stroke-dashoffset: -12; } }
@keyframes saw-shake {
  0%, 100% { transform: translate(-62%, -50%); }
  50% { transform: translate(-62%, calc(-50% + 1.1px)); }
}
@keyframes saw-shake-hard {
  0%, 100% { transform: translate(-62%, calc(-50% - 1.7px)) rotate(-1.4deg); }
  50% { transform: translate(-62%, calc(-50% + 1.9px)) rotate(1.4deg); }
}
@keyframes saw-idle {
  0%, 100% { transform: translate(-62%, calc(-50% - 0.9px)) rotate(-0.5deg); }
  50% { transform: translate(-62%, calc(-50% + 1.1px)) rotate(0.5deg); }
}

/* ---------- 6 Hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--forest-900);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: scale(calc(1.16 - 0.16 * var(--p, 0)));
  transform-origin: 50% 40%;
  will-change: transform;
}
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Video im Seitenkopf: läuft stumm in Schleife, Poster dient als Rückfall */
.hero__video { background: var(--forest-900); }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 36, 15, 0.62) 0%, rgba(18, 36, 15, 0.38) 40%, rgba(18, 36, 15, 0.82) 100%);
}
.hero__inner {
  position: relative;
  padding-block: calc(var(--header-h) + 5rem) 6rem;
  color: #f4f3ec;
  opacity: calc(1 - var(--p, 0) * 1.25);
  transform: translateY(calc(var(--p, 0) * -40px));
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .eyebrow { color: var(--moss-soft); }
.hero .lead { color: rgba(244, 243, 236, 0.82); max-width: 44ch; }
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin-top: 2.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 243, 236, 0.72);
}
.hero__badges span { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__badges span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moss);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 243, 236, 0.7);
  opacity: calc(1 - var(--p, 0) * 2.5);
}
.scroll-hint__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent);
  animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Kopfbereich der Unterseiten */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(4rem, 9vw, 8rem)) clamp(3rem, 6vw, 5rem);
  background: var(--sand);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
}
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 52ch; }

/* ---------- 7 Sektionen & Komponenten ----------------------------------- */

/* Marken-/Vertrauensband */
.trust-bar {
  border-block: 1px solid var(--line);
  background: var(--cream);
  padding-block: 1.6rem;
}
.trust-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem clamp(1.5rem, 5vw, 4rem);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Leistungskarten */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s var(--ease-out-expo),
    border-color 0.4s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  color: inherit;
}
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); position: relative; }
.service-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out-expo);
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { padding: 1.6rem 1.6rem 1.9rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.service-card__body h3 { margin: 0; }
.service-card__body p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.service-card__more { margin-top: auto; padding-top: 1.1rem; font-weight: 600; font-size: 0.9rem; color: var(--forest-600); }
.service-card__more::after { content: " →"; }

/* Leistungs-Detailblöcke */
.service-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--line);
}
.service-detail:last-of-type { border-bottom: 0; }
.service-detail:nth-child(even) .service-detail__media { order: -1; }
.service-detail ul { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.service-detail li { position: relative; padding-left: 1.6rem; font-size: 0.97rem; color: var(--ink-soft); }
.service-detail li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--moss);
}

/* Sticky Zoom-Sequenz (Apple-Stil) */
.zoom-stage { position: relative; height: 320vh; background: var(--forest-900); }
.zoom-stage__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.zoom-stage__media {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + 0.55 * (1 - var(--p, 0))));
  will-change: transform;
}
.zoom-stage__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.68; }
.zoom-stage__sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(18, 36, 15, 0.25), rgba(18, 36, 15, 0.85));
}
.zoom-stage__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 54rem;
  padding-inline: var(--gutter);
  color: #f4f3ec;
}
.zoom-stage__content .eyebrow { color: #fff; }
.zoom-stage__content h2 { color: #fff; font-size: clamp(2rem, 1rem + 4.2vw, 4.4rem); }
.zoom-stage__content .lead { color: rgba(244, 243, 236, 0.82); margin-inline: auto; }

/* Zeilenweise Texteinblendung */
.reveal-lines span {
  display: block;
  overflow: hidden;
  /* Luft für Unterlängen (g, j, p) – sonst schneidet die Maske sie ab */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.reveal-lines span > i {
  display: block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.95s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.is-revealed .reveal-lines span > i,
.reveal-lines.is-revealed span > i { transform: none; }

/* Kennzahlen */
/* passt sich der Anzahl der Kennzahlen an */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
}
/* gleich hohe Zellen + Beschriftung unten = alle Texte auf einer Linie */
.stats > * { display: flex; flex-direction: column; }
.stats .stat__label { margin-top: auto; padding-top: 0.6rem; }
.stat__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--forest);
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.section--forest .stat__value { color: #fff; }
.stat__label {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.section--forest .stat__label { color: #b9c1b0; }

/* Stadtumriss als vierte Kennzahl – wird beim Einblenden im Uhrzeigersinn
   gezeichnet (pathLength="1", daher Strichmuster und -versatz von 1 auf 0). */
.stat-map { display: flex; flex-direction: column; }
.stat-map__svg { width: 100%; max-width: 86px; height: auto; }
.stat-map__outline {
  fill: var(--moss-soft);
  fill-opacity: 0;
  stroke: var(--moss-soft);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.45, 0, 0.15, 1),
    fill-opacity 0.6s var(--ease) 1s;
}
.stat-map.is-revealed .stat-map__outline { stroke-dashoffset: 0; fill-opacity: 0.12; }
.stat-map__dot {
  fill: #fff;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.4s var(--ease) 1.15s;
}
.stat-map.is-revealed .stat-map__dot { opacity: 1; }

/* Ablauf / Prozess */
.process { counter-reset: step; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.process__item {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid var(--line-strong);
}
.process__item::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 1rem;
  left: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--moss);
}
.process__item h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.process__item p { font-size: 0.94rem; color: var(--ink-soft); }
.process__item .figure { margin-top: 1.25rem; }

/* Galerie */
.gallery {
  columns: 3;
  column-gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.gallery__item {
  break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
  position: relative;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
}
.gallery__item img { width: 100%; transition: transform 1s var(--ease-out-expo), filter 0.5s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1rem 0.9rem;
  font-size: 0.85rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(0deg, rgba(18, 36, 15, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 20, 8, 0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-height: 82vh; width: auto; border-radius: var(--radius-lg); }
.lightbox__caption { color: #d8ddd2; text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Zitate / Kundenstimmen */
.quote-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--forest-900);
}
.quote-card blockquote::before { content: "„"; }
.quote-card blockquote::after { content: "“"; }
.quote-card footer { font-size: 0.85rem; color: var(--ink-soft); margin-top: auto; }
.rating { color: var(--moss); letter-spacing: 0.2em; font-size: 0.9rem; }

/* Team */
.team-card .figure { margin-bottom: 1.1rem; }
.team-card h3 { margin-bottom: 0.15rem; }
.team-card__role {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.9rem;
}

/* Werte-Liste */
.value-list { display: grid; gap: 1.5rem; }
.value-list__item { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.value-list__item h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.value-list__item p { font-size: 0.95rem; color: var(--ink-soft); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 1.4rem 3rem 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  color: var(--forest-900);
  cursor: pointer;
  position: relative;
}
.faq__q::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--forest) 0 0) center/100% 1.5px no-repeat,
    linear-gradient(var(--forest) 0 0) center/1.5px 100% no-repeat;
  transition: transform 0.45s var(--ease-out-expo);
}
.faq__item.is-open .faq__q::after { transform: rotate(135deg); }
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.45s var(--ease-out-expo);
}
.faq__a > div { padding: 0 3rem 1.6rem 0; color: var(--ink-soft); font-size: 0.98rem; }

/* Einsatzgebiet */
.area-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.area-list li {
  font-size: 0.85rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* CTA-Band */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--forest-900);
  color: #f2f1ea;
  text-align: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  transform: scale(calc(1.1 - 0.1 * var(--p, 0)));
}
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(242, 241, 234, 0.8); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* Kontaktinfo-Blöcke */
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.info-card { border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.info-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.info-card p, .info-card a { font-size: 0.95rem; color: var(--ink-soft); }
.info-card a { display: block; text-decoration: none; }
.info-card a:hover { color: var(--forest); text-decoration: underline; }

/* Notfall-Hinweis */
.notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--moss);
  background: rgba(107, 143, 94, 0.1);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
}

/* ---------- 8 Footer ---------------------------------------------------- */
.footer {
  background: var(--forest-900);
  color: #b9c1b0;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  font-size: 0.92rem;
}
.footer h4 {
  color: #f2f1ea;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer a { color: #b9c1b0; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 0.35rem;
}
.footer__claim {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--moss-soft);
  margin-bottom: 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  font-size: 0.82rem;
}

/* Fester Instagram-Knopf unten rechts */
.social-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  box-shadow: 0 6px 20px rgba(18, 36, 15, 0.28);
  transition: transform 0.35s var(--ease-out-expo), background-color 0.25s var(--ease);
}
.social-float:hover {
  color: #fff;
  background: var(--forest-600);
  transform: translateY(-3px) scale(1.05);
}
.social-float svg { width: 26px; height: 26px; }

@media (max-width: 620px) {
  .social-float { width: 46px; height: 46px; }
  .social-float svg { width: 23px; height: 23px; }
}

/* ---------- 9 Modal / Kontaktformular ----------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 8, 0.62);
  backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 90svh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.4s var(--ease);
}
.modal.is-open .modal__panel { transform: none; opacity: 1; }
.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--forest-900);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: rgba(30, 58, 34, 0.07); }
.modal h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-bottom: 0.4rem; }
.modal__intro { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 1.75rem; }

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest-600);
  box-shadow: 0 0 0 3px rgba(47, 90, 51, 0.15);
}
.field--error input,
.field--error textarea,
.field--error select { border-color: #a3382f; }
.field__error { font-size: 0.8rem; color: #a3382f; min-height: 0; }
.field--hp { position: absolute; left: -9999px; opacity: 0; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.checkbox input { width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--forest); }

.form__status {
  font-size: 0.92rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--ok { background: rgba(107, 143, 94, 0.16); color: var(--forest-800); }
.form__status--err { background: rgba(163, 56, 47, 0.1); color: #8a2f27; }

.form__hint { font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- 10 Rechtstexte ---------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); }
.legal h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.5rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.legal p, .legal li { color: var(--ink-soft); font-size: 0.97rem; }
.legal ul { padding-left: 1.2rem; }
.legal address { font-style: normal; }
.legal .todo {
  background: rgba(191, 154, 58, 0.14);
  border-left: 3px solid #bf9a3a;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  font-weight: 600;
  color: #6b5416;
}
.legal__note {
  margin-bottom: 2rem;
  padding: 1.1rem 1.35rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* ---------- 11 Scroll-Animationen --------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo), transform 1s var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}
[data-reveal="scale"] { transform: scale(1.06); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

.pin-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.pin-media img {
  transform: scale(calc(1.18 - 0.18 * var(--p, 0)));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media,
  .hero__video,
  .zoom-stage__media,
  .pin-media img,
  .cta-band__bg { transform: none !important; }
  .hero__inner, .scroll-hint { opacity: 1 !important; transform: none !important; }
  .reveal-lines span > i { transform: none !important; }
  .zoom-stage { height: auto; }
  .zoom-stage__sticky { position: relative; height: auto; padding-block: 6rem; }
  .cut-stage { transition: none; }
  body.is-cut .cut-stage { transform: none; position: relative; }
}

/* ---------- 12 Media Queries -------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .stats, .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { columns: 2; }
}

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav, .header__phone { display: none; }
  .nav-toggle { display: block; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: 1fr; }
  .split, .service-detail { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .service-detail:nth-child(even) .service-detail__media { order: 0; }
  .brand__text { display: none; }
  .saw-progress__saw { width: 92px; }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .stats, .process { grid-template-columns: 1fr; }
  /* seitliche Einblendungen würden auf schmalen Schirmen über den Rand ragen */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
  .gallery { columns: 1; }
  .form__row { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  /* Nur die Button-Reihen im Inhalt werden gestapelt – nicht der Kopfbereich,
     sonst sprengt der CTA-Button die Navigationsleiste. */
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  /* Im schmalen Kopf genügt das Burger-Menü, dort steht der CTA ebenfalls. */
  .header__actions .btn:not(.nav-toggle) { display: none; }
  .scroll-hint { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media print {
  .header, .saw-progress, .modal, .lightbox, .cta-band, .footer nav,
  .social-float { display: none !important; }
  body { background: #fff; }
}