/* ============================================================
   Michael Wolf — Landschaftsarchitekt
   Premium One-Pager · Fraunces + Manrope
   ============================================================ */

:root {
  --green-light: #9DBA3B;
  --green-pale: #E9F3C8;   /* heller Kicker ueber Fotos, erreicht WCAG 4,5:1 */
  --green: #1E7A46;
  --forest: #0E3B26;
  --forest-deep: #0A2C1C;
  --warm-gray: #B9B3A8;
  --off: #F5F3EE;
  --off-2: #EDEAE2;
  --ink: #14211A;

  /* --- 03.08.2026 ergaenzt, fuer die neuen Bausteine am Dateiende. ---------
     Keine zweite Farbwelt: alle vier Farbwerte sind aus den vorhandenen
     Tokens abgeleitet. Aufgenommen wurde nur, was als Rolle wirklich
     fehlte und sonst als Literal ueber die Datei verstreut waere. */

  /* Haarlinie. Stand bisher 9x wortgleich als rgba(14, 59, 38, 0.15) in der
     Datei. Die Bestandsregeln bleiben absichtlich unveraendert, damit sich
     an ihrem Rendering nichts aendert; neue Bausteine nutzen das Token. */
  --rule: rgba(14, 59, 38, 0.15);

  /* Zwei Abstufungen des Fliesstextes, gemessen mit
     work/bausteine-einbau-2026-08-03/kontrast-flach.mjs:
     0.80 -> 8,18:1 auf --off / 7,74:1 auf --off-2
     0.68 -> 5,60:1 auf --off / 5,30:1 auf --off-2
     Beide halten also auch auf dem helleren Zweitgrund die 4,5:1. */
  --ink-soft: rgba(20, 33, 26, 0.80);   /* Fliesstext der neuen Bausteine */
  --ink-mute: rgba(20, 33, 26, 0.68);   /* Bildunterschrift, Verzeichnis */

  /* --ink-mute hat am 03.08.2026 ausserdem fuenf verstreute Literale im
     Bereich 0.60 bis 0.65 abgeloest, die dieselbe Rolle hatten und
     gemessen zu schwach waren: .project-detail, .service-desc,
     .card-detail, .gallery figcaption, .phase-desc. Der schlechteste
     Wert lag bei 4,27:1 (.gallery figcaption auf --off-2, live auf
     projekte/stadion-rochlitz/). Alle liegen jetzt bei 5,30 oder besser.
     Reine Farbaenderung, die Geometrie ist nachweislich unveraendert. */

  /* Gruener Kleintext auf hellem Grund. Diese Rolle fehlte: --green (#1E7A46)
     erreicht auf --off 4,83:1, auf --off-2 aber nur 4,46:1 und faellt damit
     auf jedem .page-section--alt durch. --green-ink liegt bei 5,89 (--off)
     und 5,44 (--off-2).
     TRENNUNG BITTE EINHALTEN: --green bleibt fuer Flaechen (Knopffuellung)
     und fuer Displaytypo ab 24 px, --green-ink fuer jeden gruenen Text
     darunter. Sonst stehen zwei Gruentoene ohne System nebeneinander. */
  --green-ink: #196B3D;

  /* Hoehe des fixierten Seitenkopfs, gemessen ueber 320 bis 1920 px:
     72,06 px unterhalb 780 px Breite, 74,94 px darueber. Das Token traegt
     den unguenstigsten Wert. Genutzt vom Ankerversatz und von der
     klebenden Seitenleiste der Rechtstexte.
     Werkzeug: work/bausteine-einbau-2026-08-03/hoehe2.mjs */
  --header-h: 75px;

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 18px;
}

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

html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  background: var(--off);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--green-light); color: var(--forest-deep); }

/* ---------- Typo-Bausteine ---------- */

.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 1.25rem;
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 2.2rem; height: 1px;
  background: var(--green-light);
  vertical-align: middle;
  margin-right: 0.9rem;
}
.section-label--light { color: var(--green-light); }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--forest);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad);
  transition: background 0.45s ease, box-shadow 0.45s ease, padding 0.45s ease;
  color: var(--off);
}
/* 03.08.2026 Kontrast im ungescrollten Zustand. Am Seitenanfang hat die
   Kopfzeile keinen Hintergrund, ihr Text in --off stand also direkt auf dem
   Herofoto. Gemessen bei 1440 px auf der Startseite: "Ueber mich" 2,42:1,
   "Kontakt" 2,60:1, "Projekte" 2,61:1, "Leistungen" 3,02:1 bei 13,6 px; bei
   390 px zusaetzlich der Menueknopf mit 2,83:1. Verlangt sind 4,5:1.
   Loesung ist ein opaker Verlauf aus --forest-deep hinter der Kopfzeile, kein
   zweiter backdrop-filter: DESIGN.md verbietet neue Blur-Flaechen auf
   fixierten Elementen, weil sie auf Android-Tablets Repaint-Streifen erzeugen.
   Der Verlauf verschwindet im gescrollten Zustand, dort traegt die helle
   Flaeche den Kontrast. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 190%;
  background: linear-gradient(180deg, rgba(10, 44, 28, 0.82) 0%, rgba(10, 44, 28, 0.55) 50%, rgba(10, 44, 28, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.45s ease;
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header.is-scrolled {
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(14, 59, 38, 0.08);
  color: var(--forest);
  padding: 0.7rem var(--pad);
}

.brand { display: flex; align-items: center; gap: 0.8rem; }
/* Bildmarke 154.733 x 77.624 (Ratio 1.9934). Breite bleibt bewusst bei 40px,
   damit sich die Kopfzeile horizontal nicht veraendert; height:auto entfernt
   nur den toten Raum, den der alte 40x40-Kasten mit object-fit offenliess. */
.brand-mark { width: 40px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  padding: 0.6rem 1.4rem;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  transition: background 0.3s ease, color 0.3s ease;
}
.nav-cta:hover { background: var(--green-light); border-color: var(--green-light); color: var(--forest-deep) !important; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) clamp(4rem, 10vh, 7rem);
  color: var(--off);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  /* 02.08.2026 verstaerkt. Das Hero-Foto hat eine helle gelbe Hauswand genau
     dort, wo Kicker und erste Titelzeile stehen. Gemessen lag der Kicker bei
     2,1:1, noetig sind 4,5:1. Der seitliche Verlauf reicht jetzt weiter nach
     rechts, weil die Kickerzeile breiter ist als der alte Verlauf dunkel war. */
  background:
    linear-gradient(180deg, rgba(10, 44, 28, 0.42) 0%, rgba(10, 44, 28, 0.26) 35%, rgba(10, 44, 28, 0.58) 75%, rgba(10, 44, 28, 0.86) 100%),
    linear-gradient(100deg, rgba(14, 59, 38, 0.82) 0%, rgba(14, 59, 38, 0.52) 42%, rgba(14, 59, 38, 0.12) 68%, rgba(14, 59, 38, 0) 84%);
}

.hero-content { max-width: 1400px; width: 100%; margin: 0 auto; }

/* Der Kicker der Startseite steht ueber der hellsten Stelle des Hero-Fotos
   (gelbe Hauswand). Mit --green-pale blieb er auch nach mehreren Overlay-
   Stufen bei rund 4,0:1, noetig sind 4,5:1 - er ist mit 13,6 px fett kein
   grosser Text. Weiter abdunkeln haette das Foto flau gemacht, deshalb hier
   Weiss wie beim Titel darunter. Auf allen anderen Seiten bleibt der gruene
   Kicker, dort ist der Wert unkritisch. */
.hero .hero-kicker { color: #FFFFFF; }

.hero-kicker {
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* 02.08.2026 von --green-light (#9DBA3B) auf --green-pale geaendert.
     Der Kicker ist mit 11,5 bis 13,6 px fett kein grosser Text und braucht
     nach WCAG 4,5:1. Ueber hellen Fotoflaechen lag #9DBA3B bei 3,2 bis 3,8.
     Auf den dunklen Heroes ohne Foto war der alte Wert unkritisch (6,8),
     das hellere Gruen ist dort ebenfalls einwandfrei. */
  color: var(--green-pale);
  margin-bottom: 1.6rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 10.5vw, 10rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--green-light);
}
.hero-line { display: block; overflow: hidden; }
.hero-line > span { display: inline-block; will-change: transform; }

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  max-width: 34rem;
  opacity: 0.92;
  margin-bottom: 2.6rem;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 2.1rem;
  background: var(--green-light);
  color: var(--forest-deep);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-radius: 100px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-cta svg { transition: transform 0.3s ease; }
.hero-cta:hover { background: var(--off); }
.hero-cta:hover svg { transform: translateX(4px); }

.hero-scroll {
  position: absolute;
  right: var(--pad);
  bottom: clamp(4rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.hero-scroll-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0.8;
}
.hero-scroll-line {
  width: 1.5px; height: 64px;
  background: rgba(245, 243, 238, 0.35);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--green-light);
  animation: scrollPulse 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollPulse {
  0% { top: -100%; }
  55% { top: 0; }
  100% { top: 100%; }
}

/* ---------- Manifest ---------- */

.manifest {
  background: var(--off);
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
}
.manifest-inner { max-width: 1100px; margin: 0 auto; }
.manifest-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 2.2rem;
}
.manifest-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--forest);
}
.manifest-text .w { opacity: 0.14; transition: opacity 0.3s linear; }
.reduced-motion .manifest-text .w { opacity: 1; }
.manifest-note {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(20, 33, 26, 0.72);
}

/* ---------- Marquee ---------- */

.marquee-clip {
  overflow: hidden;
  background: var(--off);
  padding: var(--pad);
}
.marquee {
  background: var(--forest);
  color: var(--off);
  overflow: hidden;
  padding: 1.4rem 0;
  clip-path: polygon(0 9%, 100% 0, 100% 91%, 0 100%);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  white-space: nowrap;
}
.marquee-track i {
  font-style: normal;
  color: var(--green-light);
  font-size: 1.4rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.reduced-motion .marquee-track { animation: none; }

/* ---------- Projekte (horizontal) ---------- */

.projects { background: var(--off-2); position: relative; }
.projects-pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(4rem, 8vh, 6rem) 0;
}
.projects-head { padding: 0 var(--pad); margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }

.projects-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
}

.project-card {
  position: relative;
  width: clamp(300px, 38vw, 560px);
  flex-shrink: 0;
}
.project-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--warm-gray);
}
.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .project-media img { transform: scale(1.02); }
.reduced-motion .project-media img { transform: none; }

.project-info { padding: 1.4rem 0.4rem 0; }
.project-info h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  color: var(--forest);
  line-height: 1.15;
}
.project-meta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-top: 0.5rem;
}
.project-detail {
  font-size: 0.92rem;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}
/* 03.08.2026 Kontrast. Die Nummer stand als 41,6 bis 64 px grosse Ziffer in
   --green-light mit opacity 0.9 ohne eigene Flaeche direkt ueber dem Projekt-
   foto. Gemessen je Element auf dem Foto: Minimum 1,00 bis 1,32 zu 1, Median
   1,21 bis 5,69; bei 390 px fielen alle sechs durch. Verlangt sind 3:1 (grosser
   Text). DESIGN.md benennt genau diesen Fall: --green-light haelt auf hellen
   Fotoflaechen nicht, dafuer gibt es --green-pale.
   Loesung: eigene opake Flaeche in --forest-deep, Ziffer in --green-pale. Das
   ist fotounabhaengig und misst 12,7:1. Kein Blur, kein Verlauf, keine
   Glaskachel - eine flache Marke, wie sie DESIGN.md zulaesst. */
.project-index {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1;
  padding: 0.34em 0.5em;
  border-radius: 12px;
  background: var(--forest-deep);
  color: var(--green-pale);
  pointer-events: none;
}

.project-endcard {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 420px);
  background: var(--forest);
  color: var(--off);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
}
.endcard-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-light);
}
.endcard-text {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  opacity: 0.9;
}
.endcard-link {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--green-light);
  padding-bottom: 0.3rem;
  transition: color 0.3s ease;
}
.endcard-link:hover { color: var(--green-light); }

/* ---------- Prozess ---------- */

.process {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
  background: var(--off);
  align-items: start;
}
.process-sticky {
  position: sticky;
  top: 16vh;
}
.process-lead {
  margin-top: 1.8rem;
  font-size: 1.05rem;
  color: rgba(20, 33, 26, 0.7);
  max-width: 26rem;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vh, 7rem);
}
.process-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--warm-gray);
  clip-path: inset(0 0 0 0);
}
.process-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.process-step figcaption { padding: 1.6rem 0.2rem 0; position: relative; }
.process-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--green-ink);
  letter-spacing: 0.1em;
}
.process-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  color: var(--forest);
  margin: 0.3rem 0 0.5rem;
}
.process-step figcaption p {
  color: rgba(20, 33, 26, 0.68);
  max-width: 30rem;
}

/* ---------- Zahlen: Baustein entfernt am 03.08.2026 ----------
   Hier standen .stats / .stats-grid / .stat / .stat-value / .stat-label:
   vier gleich breite Spalten auf dunkelgruener Vollbreite, je duenne Linie
   oben, grosse Zahl in --green-light, darunter Mikro-Versalie. Das ist genau
   die Kennzahlen-Kachelreihe im SaaS-Muster, die DESIGN.md unter Verbote
   ausschliesst. Die Startseite fuehrt die vier Angaben jetzt im vorhandenen
   Baustein .facts als Nachweisliste. Nicht wieder einfuehren. */

/* ---------- Leistungen ---------- */

.services {
  position: relative;
  padding: clamp(6rem, 14vh, 11rem) var(--pad);
  background: var(--off);
}
.services-head { margin-bottom: clamp(3rem, 7vh, 5rem); }

.services-list { border-top: 1px solid rgba(14, 59, 38, 0.15); }
.service-row a {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1fr) 3rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3.5vh, 2.6rem) 0.5rem;
  border-bottom: 1px solid rgba(14, 59, 38, 0.15);
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease;
}
.service-row a:hover { padding-left: 1.5rem; background: rgba(157, 186, 59, 0.07); }
.service-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--green-ink);
}
.service-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.05;
  color: var(--forest);
  letter-spacing: -0.015em;
  transition: color 0.3s ease;
}
.service-row a:hover .service-name { color: var(--green); }
.service-desc {
  font-size: 0.95rem;
  color: var(--ink-mute);
}
.service-arrow {
  font-size: 1.5rem;
  color: var(--green);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-row a:hover .service-arrow { transform: translateX(8px); }

.service-preview {
  position: fixed;
  z-index: 60;
  top: 0; left: 0;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  box-shadow: 0 30px 60px rgba(10, 44, 28, 0.35);
}
.service-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- Kontakt / Footer ---------- */

.contact {
  background: var(--forest-deep);
  color: var(--off);
  padding: clamp(6rem, 14vh, 10rem) var(--pad) 2.5rem;
}
.contact-inner { max-width: 1400px; margin: 0 auto; }

.contact-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 1.5rem 0 3rem;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.4rem;
  background: var(--green-light);
  color: var(--forest-deep);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  border-radius: 100px;
  transition: background 0.3s ease;
}
.contact-cta:hover { background: var(--off); }
.contact-cta svg { transition: transform 0.3s ease; }
.contact-cta:hover svg { transform: translateX(4px); }
.contact-tel {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 400;
  border-bottom: 1.5px solid rgba(157, 186, 59, 0.5);
  padding-bottom: 0.25rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-tel:hover { color: var(--green-light); border-color: var(--green-light); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2.5rem, 6vh, 4rem) 0;
  border-top: 1px solid rgba(245, 243, 238, 0.14);
}
.contact-grid h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 1.1rem;
}
.contact-grid p, .contact-grid address {
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.8;
  opacity: 0.85;
}
.contact-grid a { border-bottom: 1px solid rgba(245, 243, 238, 0.3); transition: color 0.3s ease, border-color 0.3s ease; }
.contact-grid a:hover { color: var(--green-light); border-color: var(--green-light); }

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 243, 238, 0.14);
  font-size: 0.85rem;
  opacity: 0.7;
}
.footer-mark { width: 48px; height: auto; flex: none; order: 1; }
.footer-bar > p { order: 2; margin-right: auto; }
/* Umbruch noetig, seit "Ueber mich" als dritter Eintrag dazugekommen ist:
   drei Links passen auf 320 px sonst nicht nebeneinander. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.9rem 1.8rem; margin-left: auto; order: 3; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease; }
.footer-legal a:hover { color: var(--green-light); }

@media (max-width: 520px) {
  .footer-bar { align-items: flex-start; column-gap: 0.9rem; }
  .footer-bar > p { min-width: 0; flex: 1; }
  .footer-legal { width: 100%; margin-left: 0; justify-content: flex-start; }
}

/* ---------- Reveal-Grundzustand (JS animiert) ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(40px); }
.js.reduced-motion [data-reveal] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .process { grid-template-columns: 1fr; }
  .process-sticky { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .service-row a { grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; }
  .service-row a > span { min-width: 0; }
  .service-desc { display: none; }
  .service-preview { display: none; }
}

@media (max-width: 768px) {
  .hero-scroll { display: none; }

  /* Horizontale Sektion → vertikal */
  .projects-pin { min-height: 0; }
  .projects-track {
    flex-direction: column;
    width: auto;
    gap: 3.5rem;
  }
  .project-card, .project-endcard { width: 100%; }
}

@media (max-width: 520px) {
  .brand-sub { display: none; }
  .service-row a { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .service-name { font-size: 1.45rem; hyphens: auto; overflow-wrap: break-word; }
  .service-arrow { display: none; }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Website v1 — Unterseiten-Komponenten
   (angehängt an die Startseiten-Basis)
   ============================================================ */

/* ---------- Mobile Navigation (Burger) ---------- */

.nav-toggle {
  display: none;
  min-height: 44px;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 100px;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(245, 243, 238, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--forest);
    box-shadow: 0 20px 40px rgba(10, 44, 28, 0.18);
    padding: 0.6rem var(--pad) 1.2rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    display: block !important;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid rgba(14, 59, 38, 0.12);
  }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .site-nav .nav-cta {
    margin-top: 0.9rem;
    text-align: center;
    border-color: var(--forest);
  }
}

/* ---------- Seiten-Hero (Unterseiten) ---------- */

.page-hero {
  position: relative;
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* padding-top 02.08.2026 ergaenzt. Der Seitenkopf ist position:fixed und
     deckt den Hero ab. Solange der Herotext kurz war, sass er dank flex-end
     unten und die Ueberdeckung fiel nicht auf. Auf der Kontaktseite ist der
     Text hoch genug, um den Hero zu fuellen - dort lag der Kicker hinter dem
     Logo und die erste Titelzeile hinter der Navigation. Mit Freiraum oben
     waechst der Hero stattdessen mit. Gemessen: Kopfhoehe 72 px. */
  padding: clamp(6rem, 14vh, 9rem) var(--pad) clamp(3rem, 7vh, 5rem);
  color: var(--off);
  overflow: hidden;
  background: var(--forest-deep);
}
.page-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf 02.08.2026 verstaerkt: ueber einem Foto reichte der vorherige Verlauf
   (0.45 / 0.15 / 0.82) fuer die Lesbarkeit von Kicker und Titel nicht aus.
   Gemessen wurde der echte Hintergrund bei ausgeblendetem Text. */
/* 03.08.2026 mittlere Stufe von 0.54 auf 0.58 angehoben, obere und untere Stufe
   unveraendert. Bei 390 px erreichte der Kicker "Leistungen" auf
   /leistungen/spielplaetze/ nur 4,47:1 statt 4,5:1 (Text --green-pale, 11,5 px
   fett, gemessener Untergrund rgb(94,114,96)). Zuerst wurde die obere Stufe
   angehoben, das brachte nur 4,48: Der Kicker sitzt bei 390 px auf etwa 57
   Prozent der Herohoehe, also unterhalb des 38-Prozent-Stopps, und haengt damit
   an der mittleren Stufe. Der Fehlbetrag ist klein, aber die Zielgruppe sind
   oeffentliche Auftraggeber, die selbst an Standards gebunden sind. Nach der
   Aenderung mit p5-kontrast-alle.mjs bei 1440 und 390 px neu gemessen. */
.page-hero .hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 44, 28, 0.62) 0%, rgba(10, 44, 28, 0.58) 38%, rgba(10, 44, 28, 0.90) 100%);
}
.page-hero--plain { min-height: 46svh; }
.page-hero-content { position: relative; z-index: 1; max-width: 1400px; width: 100%; margin: 0 auto; }
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}
.page-hero-title em { font-style: italic; font-weight: 400; color: var(--green-light); }
.page-hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 500;
  max-width: 40rem;
  opacity: 0.92;
}

/* ---------- Fließbereiche ---------- */

.page-section { padding: clamp(4rem, 10vh, 7.5rem) var(--pad); }
.page-section--alt { background: var(--off-2); }
.page-section-inner { max-width: 1400px; margin: 0 auto; }
.prose { max-width: 46rem; }
.prose p { margin-bottom: 1.2rem; color: rgba(20, 33, 26, 0.78); }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--forest);
  line-height: 1.15;
  margin: 2.2rem 0 1rem;
}
.prose h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.prose h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { list-style: none; margin: 0 0 1.2rem; }
.prose ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  color: rgba(20, 33, 26, 0.78);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.55rem; height: 2px;
  background: var(--green-light);
}
/* 03.08.2026 von --green auf --green-ink gezogen. Gemessen mit
   work/bausteine-einbau-2026-08-03/kontrast-flach.mjs: --green erreichte
   auf --off zwar 4,83:1, auf dem --off-2-Grund eines .page-section--alt
   aber nur 4,45:1. Genau dort standen vier Textlinks live unter dem
   Mindestwert: leistungen/, leistungen/spielplaetze/, ueber-mich/ und
   projekte/uniklinik-dresden-haus-21/. Mit --green-ink sind es 5,89:1
   (--off) und 5,44:1 (--off-2). Rein farblich, keine Geometrieaenderung. */
.prose a { color: var(--green-ink); border-bottom: 1px solid rgba(25, 107, 61, 0.45); }
.prose a:hover { color: var(--forest); border-color: var(--forest); }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Karten-Grid (Projektübersicht, Teaser) ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
}
@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-grid { grid-template-columns: 1fr; } }
/* Vier Leistungsbereiche: eine Reihe statt 3+1 mit Waisenkarte. */
@media (min-width: 1025px) { .cards-grid--four { grid-template-columns: repeat(4, 1fr); } }

.card { position: relative; display: block; }
.card-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--warm-gray);
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-media img { transform: scale(1.01); }
.reduced-motion .card-media img { transform: none; }
.card-info { padding: 1.2rem 0.3rem 0; }
.card-info h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  color: var(--forest);
  line-height: 1.18;
}
.card-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-top: 0.45rem;
}
.card-detail { font-size: 0.92rem; color: var(--ink-mute); margin-top: 0.35rem; }

.group-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  color: var(--forest);
  letter-spacing: -0.015em;
  margin: clamp(3rem, 7vh, 5rem) 0 clamp(1.6rem, 3vh, 2.4rem);
}
.group-title:first-of-type { margin-top: 0; }

/* ---------- Faktenblock (Projektseiten) ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid rgba(14, 59, 38, 0.15);
  border-bottom: 1px solid rgba(14, 59, 38, 0.15);
  padding: clamp(1.8rem, 4vh, 2.8rem) 0;
}
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }
.facts > div { min-width: 0; }
.fact-value { overflow-wrap: break-word; }
.fact-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 0.5rem;
}
.fact-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--forest);
  line-height: 1.3;
}

/* ---------- Galerie (Projektseiten) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery-img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--warm-gray);
}
.gallery-img img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  padding: 0.8rem 0.2rem 0;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.gallery--plan .gallery-img { background: #fff; }
.gallery--plan .gallery-img img { object-fit: contain; }

/* ---------- Zurück-Link / Pager ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 1.8rem;
  transition: color 0.3s ease;
}
.back-link:hover { color: var(--forest); }
.back-link svg { transition: transform 0.3s ease; }
.back-link:hover svg { transform: translateX(-4px); }

/* ---------- Leistungslisten auf Unterseiten ---------- */

/* BESTAND, 03.08.2026 eingeordnet. Nicht fuer neue Abschnitte verwenden.
   Diese Liste ist heute auf den Leistungsseiten im Einsatz und bleibt
   funktionsfaehig, damit sich am bestehenden Rendering nichts aendert.
   Fuer NEUE Inhalte gibt es am Dateiende zwei genauere Bausteine:
     .phases     fuer eine Abfolge  (HOAI-Leistungsphasen, Ablauf)
     .spec-list  fuer ein Register  (DIN-Normen, Ergebnisliste)
   Bitte nicht zwei Systeme parallel fuer dieselbe Aussage fuehren. Wenn eine
   Seite umgestellt wird, dann vollstaendig. */
.phase-list { border-top: 1px solid rgba(14, 59, 38, 0.15); }
.phase-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.1rem 0.3rem;
  border-bottom: 1px solid rgba(14, 59, 38, 0.15);
  align-items: baseline;
}
.phase-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--green-ink);
}
/* Sicherheitsnetz gegen Seitwaertsscrollen: In der schmalen 1fr-Spur der
   Zeile passen lange Komposita wie "Landschaftsarchitektur" auf 320 px nicht.
   Weiche Trennstriche im Text greifen zuerst, "anywhere" faengt den Rest. */
.phase-name { font-weight: 600; color: var(--forest); overflow-wrap: anywhere; }
.phase-desc { grid-column: 2; color: var(--ink-mute); font-size: 0.95rem; }

/* ---------- Kontaktformular (geführt) ---------- */

.guide-form {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  box-shadow: 0 24px 60px -30px rgba(10, 44, 28, 0.25);
}
.guide-form fieldset { border: 0; margin-bottom: 2rem; }
.guide-form fieldset:last-of-type { margin-bottom: 0; }
.guide-form legend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--forest);
  margin-bottom: 1.1rem;
}
.form-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  color: var(--green);
  margin-right: 0.5rem;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border: 1.5px solid rgba(14, 59, 38, 0.25);
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.chip input:checked + span {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--off);
}
.chip input:focus-visible + span { outline: 2px solid var(--green-light); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.form-field input,
.form-field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--off);
  border: 1.5px solid rgba(14, 59, 38, 0.18);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(157, 186, 59, 0.25);
}
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 1.05rem 2.2rem;
  background: var(--green);
  color: var(--off);
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.form-submit:hover { background: var(--forest); }
/* 03.08.2026 von 0.6 auf --ink-mute (0.68) gezogen. Gemessen: 0.6 erreichte
   auf seinem Grund 4,42:1 und lag damit unter dem Mindestwert, 0.68 liegt
   bei 5,30:1. Rein farblich, keine Geometrieaenderung. */
.form-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-mute); max-width: 34rem; }
/* Hinweis zum Ausschlusskriterium: erscheint nur bei privat + Flaeche unter 100 m². */
.form-hint {
  display: none;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: rgba(157, 186, 59, 0.14);
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(20, 33, 26, 0.8);
}
.form-hint.is-visible { display: block; }

/* ---------- Rechtstexte ---------- */

.legal address { font-style: normal; }
.legal dl { margin: 0 0 1.2rem; }
.legal dt { font-weight: 700; color: var(--forest); }
.legal dd { margin: 0 0 0.8rem; color: rgba(20, 33, 26, 0.78); }

/* ---------- Kompakter Footer (Kontaktseite) ---------- */

.footer-slim {
  background: var(--forest-deep);
  color: var(--off);
  padding: 2.5rem var(--pad);
}
.footer-slim .footer-bar { max-width: 1400px; margin: 0 auto; border-top: 0; padding-top: 0; }


/* ============================================================
   BAUSTEINE 03.08.2026
   Ergaenzung fuer den Inhaltsausbau der Unterseiten.

   Grundsatz: keine zweite Farbwelt und kein zweites Raster. Alle
   Farben stammen aus den Tokens oben, der Seitenrand bleibt --pad,
   der Radius bleibt --radius. Kein backdrop-filter auf fixierten
   oder klebenden Elementen (siehe Verbote in DESIGN.md). Bewegt
   wird ausschliesslich transform und color, nie eine
   Layout-Eigenschaft.

   Inhalt
     0  Ankerversatz unter dem fixierten Kopf
     1  Rechtstexte: Seitenleiste mit Inhaltsverzeichnis
     2  Handlungsaufforderungen in drei Staerken
     3  Bild-Text-Block, wechselseitig
     4  Ablauf: Abfolge mit Nummernschiene
     5  Register: Normen, Ergebnisse, Begriffe
     6  Frage-Antwort-Block
     7  Bewegung zuruecknehmen

   Abnahmeseite: _bausteine.html (nur lokal, steht in
   deploy/.vercelignore und wird vor dem Deploy geloescht).
   ============================================================ */


/* ------------------------------------------------------------
   0  Ankerversatz unter dem fixierten Kopf

   WIRKT GLOBAL, nicht nur in den Rechtstexten. Ohne diese Regel
   landet jedes Sprungziel hinter dem 75 px hohen fixierten Kopf.
   Bewusst eng gefasst statt [id] pauschal, damit Formularfelder
   und Skript-gesteuerte scrollIntoView-Aufrufe unberuehrt bleiben.
   ------------------------------------------------------------ */

h2[id], h3[id], section[id], footer[id], .faq-item[id] {
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}


/* ------------------------------------------------------------
   1  Rechtstexte: Seitenleiste mit Inhaltsverzeichnis
      Einsatz: impressum/, datenschutz/

      Wofuer: Impressum und Datenschutz haben 5 beziehungsweise 8
      Abschnitte und heute keinen Einstieg. Wer eine bestimmte
      Angabe sucht, muss scrollen und lesen.

      Ohne JavaScript benutzbar: das <details> traegt im Markup das
      Attribut open, das Verzeichnis steht also auf jeder Breite
      offen und ist voll bedienbar. toc.js klappt es unterhalb von
      900 px zu und markiert den laufenden Abschnitt. Das Skript
      ist Verbesserung, nicht Voraussetzung.
   ------------------------------------------------------------ */

/* minmax(0, 1fr) statt der Voreinstellung: Rasterspalten haben von
   sich aus min-width:auto und schrumpfen nicht unter die
   min-content-Breite ihres Inhalts. Ein einziges langes Kompositum
   in einer Ueberschrift zieht sonst die ganze Spur auf und erzeugt
   Seitwaertsscrollen. Auf 320 px genau daran gescheitert, gemessen
   am Wort Programmbibliotheken (min-content 301 px bei 280 px
   verfuegbarer Breite). */
.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(12.5rem, 16rem) minmax(0, 46rem);
  }
}

/* Sobald ein Inhaltsverzeichnis danebensteht, muss die Ueberschrift
   die Orientierung nicht mehr allein tragen. Die 2,4rem aus .prose
   wirken im schmaleren Textfeld eines Rechtstextes wie eine
   Werbeueberschrift. 1,75rem haelt mit Faktor 1,75 zum Fliesstext
   deutlich den Mindestsprung von 1,25 ein.
   ACHTUNG beim Wiederverwenden: diese Regel greift bei jedem .prose
   innerhalb eines .legal-layout, also auch auf einer spaeter
   hinzugefuegten Seite mit demselben Geruest. */
.legal-layout .prose h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  margin: 2.6rem 0 0.9rem;
}
.legal-layout .prose h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.legal-layout .prose h2:first-child { margin-top: 0; }
/* Sicherheitsnetz fuer Ueberschriften, an die niemand gedacht hat.
   Weiche Trennstriche im Quelltext greifen zuerst. */
.legal-layout .prose h2,
.legal-layout .prose h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.toc {
  font-size: 0.9rem;
  min-width: 0;
}

.toc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after {
  content: "";
  flex: none;
  width: 0.58rem;
  height: 0.58rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.16rem) rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toc[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.toc > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Ueberschrift der Seitenleiste auf breiten Schirmen. Dort ist das
   Verzeichnis immer offen, die Klappflaeche entfaellt. */
.toc-title {
  display: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 1rem;
}

/* Die beiden Breitenzustaende stehen bewusst NACH den Grundregeln.
   Media Queries erhoehen die Spezifitaet nicht, bei gleichem Gewicht
   gewinnt die spaetere Regel. Stuenden sie oben, wuerde das
   display:flex der Zusammenfassung das display:none ueberschreiben
   und die Zusammenfassung erschiene auch auf breiten Schirmen.
   Genau daran ist der erste Entwurf gescheitert. Wer diese Datei
   spaeter sortiert, baut den Fehler sonst unbemerkt wieder ein. */

/* Schmale Breiten: eigenstaendige Klappflaeche mit Rahmen statt
   Fuellung, damit sie auf --off und auf --off-2 gleich sitzt. */
@media (max-width: 899px) {
  .toc {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0 1.1rem;
  }
  .toc[open] { padding-bottom: 1.2rem; }
}

/* Breite Breiten: klebend, eigener Scrollbereich, kein Zuklappen.
   Kein backdrop-filter, siehe Verbote in DESIGN.md. */
@media (min-width: 900px) {
  .toc {
    position: sticky;
    top: calc(var(--header-h) + 1.6rem);
    max-height: calc(100svh - var(--header-h) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .toc > summary { display: none; }
  .toc-title { display: block; }
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

.toc-link {
  display: block;
  position: relative;
  padding: 0.44rem 0 0.44rem 1.05rem;
  color: var(--ink-mute);
  line-height: 1.45;
  transition: color 0.25s ease;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Laufende Markierung des aktiven Abschnitts. Nur transform wird
   bewegt, keine Layout-Eigenschaft. */
.toc-link::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--green-ink);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toc-link:hover { color: var(--forest); }
.toc-link.is-active { color: var(--forest); font-weight: 700; }
.toc-link.is-active::before { transform: scaleY(1); }
.toc-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }


/* ------------------------------------------------------------
   2  Handlungsaufforderungen in drei Staerken

   Warum drei: PRODUCT.md, Prinzip 3, verlangt auf jeder Seite einen
   sichtbaren naechsten Schritt. Derselbe laute Block auf jeder Seite
   und in jedem Zusammenhang waere Werbedruck, und die Zielgruppe
   liest nuechtern. Also eine Stufe je Ort:
     .cta-close   Seitenende, traegt die Seite
     .cta-inline  Seitenmitte, unterbricht den Lesefluss kaum
     .toc-cta     Seitenleiste der Rechtstexte, leiseste Stufe
   ------------------------------------------------------------ */

/* 2a  Ruhiger Abschluss am Seitenende.
       Einsatz: leistungen/*, projekte/*, projekte/, ueber-mich/
       Steht ueber dem dunklen Fussbereich und bleibt deshalb hell.
       Zweispaltig und asymmetrisch, keine Kachel, kein Rahmen,
       keine Fuellflaeche um den Text. */

.cta-close {
  background: var(--off-2);
  border-top: 1px solid var(--rule);
  padding: clamp(3.5rem, 11vh, 7.5rem) var(--pad);
}
/* Nehmen, wenn der Abschnitt davor bereits --off-2 traegt, sonst
   stossen zwei gleiche Flaechen ohne Kante aneinander. */
.cta-close--plain { background: var(--off); }

.cta-close-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: end;
}
@media (min-width: 880px) {
  .cta-close-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* max-width in ch statt rem: die Grenze soll an der Zeichenzahl
   haengen, nicht an der Schriftgroesse. Haelt den Titel bei 1440
   und bei 390 px zuverlaessig unter drei Zeilen. */
.cta-close-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--forest);
  max-width: 19ch;
  overflow-wrap: break-word;
}
/* Nachbreite fuer die Kursive: Fraunces laesst das kursive g weit nach
   rechts ausschwingen, weiter als seine Dickte. Der normale Wortabstand
   von 0,205em wird dadurch optisch aufgefressen, "Planung braucht" las
   sich bei 390 px wie ein Wort. Gemessen an der Wortkante, nicht geraten.
   0,08em stellt den Abstand optisch wieder her, ohne ihn zu uebertreiben. */
.cta-close-title em { font-style: italic; font-weight: 400; color: var(--green); margin-right: 0.08em; }

.cta-close-note {
  margin-top: 1.1rem;
  max-width: 36rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.cta-close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem 2rem;
  min-width: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
@media (min-width: 880px) {
  .cta-close-actions {
    align-self: stretch;
    justify-content: flex-end;
    padding: 0 0 0 clamp(2rem, 4vw, 4.5rem);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

.cta-close-primary .cta-btn { margin-top: 1.65rem; }
.cta-close-actions .cta-btn { flex: none; }
.cta-close-actions .cta-btn + .cta-tel {
  flex: 1 1 13rem;
  width: auto;
}
@media (max-width: 1199px) {
  .cta-close-actions:has(.cta-btn) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .cta-close-actions:has(.cta-btn) .cta-tel {
    flex: none;
    width: 100%;
  }
}

/* Kein white-space:nowrap. Ein langes Label soll umbrechen duerfen
   statt seine Spur zu sprengen. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 2.1rem;
  background: var(--green);
  color: var(--off);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  border-radius: 100px;
  transition: background 0.3s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-btn svg { flex: none; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.cta-btn:hover { background: var(--forest); }
.cta-btn:hover svg { transform: translateX(4px); }
.cta-btn:active { transform: translateY(1px); }
.cta-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.cta-tel {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--forest);
  border-bottom: 1.5px solid rgba(30, 122, 70, 0.45);
  padding-bottom: 0.2rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cta-tel:hover { color: var(--green-ink); border-color: var(--green-ink); }
.cta-tel:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }


/* 2b  Schmaler Einschub fuer die Seitenmitte.
       Einsatz: je einmal pro Leistungs- oder Projektseite, nicht
       oefter. Nur zwei Haarlinien, keine Fuellung, kein Radius,
       kein Knopf. Dadurch kein Bannercharakter. */

.cta-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem 2rem;
  align-items: baseline;
  margin: clamp(2.6rem, 6vh, 4.5rem) 0;
  padding: clamp(1.1rem, 2.5vh, 1.6rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .cta-inline { grid-template-columns: minmax(0, 1fr) auto; }
}
.cta-inline-text {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44rem;
}
.cta-inline-text strong { color: var(--forest); font-weight: 700; }
.cta-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-ink);
  transition: color 0.25s ease;
}
.cta-inline-link svg { flex: none; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.cta-inline-link:hover { color: var(--forest); }
.cta-inline-link:hover svg { transform: translateX(5px); }
.cta-inline-link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }


/* 2c  Leiseste Stufe, fuer die Seitenleiste der Rechtstexte.
       Sitzt unter dem Inhaltsverzeichnis, im selben <details>.
       Kicker, ein Satz, ein Textlink. Kein Knopf, keine Flaeche,
       damit sie neben einem Rechtstext nicht wirbt.
       NUR auf impressum/ und datenschutz/. Auf Leistungs- und
       Projektseiten greifen 2a und 2b. */

.toc-cta {
  margin-top: 1.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.toc-cta-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 0.6rem;
}
.toc-cta p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-bottom: 0.6rem;
}
.toc-cta p:last-child { margin-bottom: 0; }
.toc-cta a {
  font-weight: 700;
  color: var(--forest);
  border-bottom: 1px solid rgba(30, 122, 70, 0.45);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.toc-cta a:hover { color: var(--green-ink); border-color: var(--green-ink); }
.toc-cta a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }


/* ------------------------------------------------------------
   3  Bild-Text-Block, wechselseitig, mit Bildunterschrift
      Einsatz: leistungen/spielplaetze, leistungen/sportanlagen,
      leistungen/objekt-landschaftsplanung

      Wofuer: PRODUCT.md, Prinzip 2, das Foto ist das Argument. Die
      Leistungsseiten haben heute null Inhaltsbilder. Wachsen sie im
      Text, ohne Bilder zu bekommen, entstehen Textwuesten.

      Die Spalten sind bewusst nicht 1:1, und der Textblock steht auf
      breiten Schirmen etwas tiefer als das Bild. Das erzeugt den
      Versatz, den ein 50:50-Raster nicht hat. Jeder zweite Block
      bekommt --flip, sonst entsteht eine Leiter.

      ACHTUNG beim Einbau: .figure-duo und das bestehende .two-col
      sind zwei verschiedene Zweispaltenrhythmen. Pro Seite eines von
      beiden waehlen, nicht beide untereinander stellen.
   ------------------------------------------------------------ */

.figure-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.figure-duo + .figure-duo { margin-top: clamp(3.5rem, 9vh, 7rem); }

@media (min-width: 880px) {
  .figure-duo { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .figure-duo-body { padding-top: clamp(0.5rem, 3vh, 2.4rem); }
  .figure-duo--flip .figure-duo-media { order: 2; }
  .figure-duo--flip .figure-duo-body { order: 1; }
  /* Ein Hochformat in der breiten Spur wird sehr hoch: bei 1440 px waren
     es gemessene 878 px neben einem kurzen Textblock, der Abschnitt kippte
     dadurch optisch. Das Hochformat bekommt deshalb die schmalere Spur.
     Danach 708 px bei 1440, und der Text hat mehr Raum. Gemessen mit
     work/bausteine-einbau-2026-08-03/rahmen.mjs, nicht geschaetzt. */
  .figure-duo--portrait { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
}

.figure-duo-media { margin: 0; min-width: 0; }
/* Die Rahmenbox traegt ihr Seitenverhaeltnis selbst und hat
   zusaetzlich min-height. Damit kann sie einspaltig nicht auf null
   Hoehe zusammenfallen. Genau dieser Fehler hat in einem anderen
   Kundenprojekt ein Hero-Foto auf Mobilgeraeten unsichtbar gemacht:
   aspect-ratio-Box mit ausschliesslich absolut gesetzten Kindern. */
.figure-duo-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 12rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--off-2);
}
.figure-duo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fuer die beiden Hochformate im Bildbestand (1200 x 1600). */
.figure-duo--portrait .figure-duo-frame { aspect-ratio: 3 / 4; }
.figure-duo--wide .figure-duo-frame {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.figure-duo-media figcaption {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 34rem;
}

.figure-duo-body { min-width: 0; }
.figure-duo-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-ink);
  margin-bottom: 0.9rem;
}
.figure-duo-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--forest);
  margin: 0 0 1rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.figure-duo-body p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 1rem;
  max-width: 38rem;
}
.figure-duo-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Sportanlagen: breite Informationsarchitektur
   Vergleich, Kostentreiber und Regelwerk nutzen auf grossen Ansichten die
   gesamte Inhaltsbreite. Unterhalb der jeweiligen Komfortbreite werden die
   Bausteine wieder linear, ohne horizontales Scrollen.
   ------------------------------------------------------------ */
.sport-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.4rem;
  list-style: none;
}
.sport-scope-list li {
  position: relative;
  min-height: 48px;
  padding: 0.78rem 0.9rem 0.78rem 1.8rem;
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 10px;
  background: rgba(238, 242, 233, 0.62);
  color: var(--forest);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.4;
}
.sport-scope-list li::before {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-light);
  content: "";
  transform: translateY(-50%);
}
.sport-scope-list--stacked { margin-bottom: 1.4rem; }

.sport-surface-motif { opacity: 0.56; }
.sport-section-heading {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}
.sport-section-heading .section-label { margin-bottom: 1rem; }
.sport-section-heading .section-lead { margin: 0 0 1rem; }
.sport-section-heading > p:last-child {
  max-width: 48rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.sport-surface-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 5vh, 3.4rem);
}
.sport-surface-card {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 1px solid rgba(14, 59, 38, 0.14);
  border-radius: 18px;
  background: rgba(251, 251, 248, 0.9);
  box-shadow: 0 28px 68px -54px rgba(10, 44, 28, 0.56);
}
.sport-surface-card--lime {
  background: linear-gradient(145deg, rgba(247, 249, 239, 0.94), rgba(238, 242, 233, 0.92));
}
.sport-surface-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.sport-surface-head > span {
  flex: none;
  width: 2.4rem;
  padding-top: 0.1rem;
  color: var(--green-ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
}
.sport-surface-head p {
  margin-bottom: 0.25rem;
  color: var(--green-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sport-surface-head h3 {
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}
.sport-surface-facts { margin: 0; }
.sport-surface-facts > div {
  display: grid;
  grid-template-columns: minmax(6.8rem, 0.34fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.sport-surface-facts dt {
  color: var(--green-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sport-surface-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.sport-surface-cta { position: relative; z-index: 1; }
/* 30.09.2026 Nur noch ein belegtes Belagsbeispiel (Weida ist entfernt).
   Eine Karte in einem Zweierraster ließe rechts ein Loch. Die Karte nimmt
   deshalb die volle Breite, ihre Angaben stehen im Zweierraster. Sobald ein
   zweites Beispiel belegt ist, Modifier im HTML entfernen. */
.sport-surface-grid--einzeln { grid-template-columns: minmax(0, 1fr); }
/* 30.09.2026 Bei 320 px ragte der Seitentitel "Landschaftsplanung" als ein
   einziges Wort 49 px über seine Box und wurde am Rand abgeschnitten
   (Landschaftsplanung und Objekt- und Landschaftsplanung, bestand schon vor
   diesem Stand). Silbentrennung nur für lange Wörter statt kleinerer Schrift,
   damit die Titelstufe gleich bleibt. */
@media (max-width: 400px) {
  .page-hero-title { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}
.sport-surface-grid--einzeln .sport-surface-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .sport-surface-grid--einzeln .sport-surface-facts { grid-template-columns: minmax(0, 1fr); }
}

.sport-cost-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  padding: 1px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(14, 59, 38, 0.13);
  list-style: none;
}
.sport-cost-grid li {
  position: relative;
  min-width: 0;
  min-height: 14rem;
  padding: clamp(1.35rem, 2.8vw, 2rem);
  background:
    radial-gradient(circle at 100% 0, rgba(157, 186, 59, 0.09), transparent 38%),
    var(--off);
}
.sport-cost-grid li > span {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--green-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
}
.sport-cost-grid h3 {
  margin-bottom: 0.65rem;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
}
.sport-cost-grid p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}

.sport-standards-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.sport-standards-intro { max-width: none; }
.sport-standards-intro .section-label { margin-bottom: 1rem; color: var(--green-ink); }
.sport-standards-intro .section-lead { margin: 0 0 1.2rem; }
.sport-standards-note {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.sport-standards-note p { font-size: 0.9rem; }
.spec-list--sport-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  border-top: 0;
}
.spec-list--sport-grid .spec {
  display: block;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 14px;
  background: rgba(251, 251, 248, 0.72);
}
.spec-list--sport-grid .spec-id {
  margin-bottom: 0.7rem;
  color: var(--green-ink);
  font-size: 0.92rem;
}
.spec-list--sport-grid .spec-title { margin-bottom: 0.45rem; }

.sport-page .faq--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  max-width: none;
  border-top: 0;
}
.sport-page .faq--grid .faq-item { border-top: 1px solid var(--rule); }

@media (min-width: 700px) {
  .sport-cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sport-cost-grid li:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .sport-cost-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sport-cost-grid li { grid-column: span 2; }
  .sport-cost-grid li:nth-child(4),
  .sport-cost-grid li:last-child { grid-column: span 3; }
  .sport-standards-intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
@media (max-width: 1050px) {
  .sport-standards-layout { grid-template-columns: minmax(0, 1fr); }
  .sport-standards-intro { max-width: 48rem; }
}
@media (max-width: 860px) {
  .sport-surface-grid,
  .sport-page .faq--grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .spec-list--sport-grid { grid-template-columns: minmax(0, 1fr); }
  .sport-surface-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}
@media (max-width: 420px) {
  .sport-scope-list { grid-template-columns: minmax(0, 1fr); }
}


/* ------------------------------------------------------------
   4  Ablauf: Abfolge mit Nummernschiene
      Einsatz: leistungen/ (die neun HOAI-Leistungsphasen),
      leistungen/landschaftsplanung, Prozessteile.

      NUR fuer echte Abfolgen. Die Schiene liest sich als Reihenfolge,
      das waere bei einer Normenliste eine falsche Aussage. Dafuer
      gibt es Abschnitt 5.

      Markup ist ein <ol>, damit die Reihenfolge auch semantisch
      stimmt. Die sichtbare Nummer steht als <span class="phase-mark">
      im Markup und nicht als Listenzeichen. Nur so laesst sich eine
      Luecke abbilden, etwa HOAI 1 bis 3 und 5 bis 9. Die Luecke
      bleibt stehen und wird nicht aufgefuellt.

      Auf 320 px bleibt exakt dieselbe Anordnung, nur die Spurbreite
      schrumpft. Nichts bricht um, nichts stapelt.
   ------------------------------------------------------------ */

.phases {
  --phases-gutter: 2.5rem;
  --phases-bg: var(--off);
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .phases { --phases-gutter: 3.4rem; } }
/* Die Nummer deckt die Schiene ab und braucht dafuer denselben
   Grund wie der Abschnitt. Modifier passend zur Sektion setzen,
   sonst laeuft die Linie sichtbar durch die Ziffer. */
.phases--on-alt { --phases-bg: var(--off-2); }
.phases--on-white { --phases-bg: #fff; }

.phases::before {
  content: "";
  position: absolute;
  left: calc(var(--phases-gutter) / 2);
  top: 0.8em;
  bottom: 0.9em;
  width: 1px;
  background: var(--rule);
}

.phase {
  position: relative;
  padding-left: calc(var(--phases-gutter) + clamp(0.7rem, 2vw, 1.3rem));
  padding-bottom: clamp(1.6rem, 4vh, 2.6rem);
  min-width: 0;
}
.phase:last-child { padding-bottom: 0; }

.phase-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--phases-gutter);
  padding: 0.1rem 0 0.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--green-ink);
  background: var(--phases-bg);
}

.phase-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.25;
  color: var(--forest);
  margin: 0 0 0.35rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.phase-text {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 34rem;
}
/* Nur setzen, wo eine belegte Angabe dahintersteht. Kein Schmuck. */
.phase-note {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-ink);
  overflow-wrap: anywhere;
}
/* Kurzform ohne Beschreibungstext, etwa als Wiederholung auf einer
   Unterseite, die auf die ausfuehrliche Fassung verlinkt. */
.phases--compact .phase { padding-bottom: clamp(0.9rem, 2vh, 1.3rem); }
.phases--compact .phase-title { font-size: 1.02rem; font-family: var(--font-sans); font-weight: 600; }


/* ------------------------------------------------------------
   5  Register: Normen, Ergebnisse, Begriffe
      Einsatz: die Regelwerk-Abschnitte auf leistungen/spielplaetze,
      leistungen/sportanlagen, leistungen/objekt-landschaftsplanung.

      Unterschied zu Abschnitt 4: ein Register ist keine Abfolge.
      DIN EN 1176 kommt nicht vor DIN EN 1177, sie gelten
      nebeneinander. Deshalb keine Schiene, keine Zaehlung, nur
      Kennung und Erklaerung.

      Markup ist eine Definitionsliste, <dl> mit je einem <div
      class="spec"> um <dt> und <dd>. Das ist die genaue Semantik
      fuer Kennung und Erklaerung und in HTML5 zulaessig.

      TEXTREGEL, die hier leicht verletzt wird: Der Einleitungssatz
      ueber dem Register beschreibt den GEGENSTAND ("Fuer die Planung
      von Spielplaetzen gilt ..."), nie die Person ("Ich plane nach
      ..."). Der zweite Fall waere eine Aussage ueber die Arbeitsweise
      des Kunden, die nicht belegt ist. Ausgabestaende der Normen
      gehoeren nicht in den Text, sonst veraltet er von selbst.
   ------------------------------------------------------------ */

.spec-list {
  border-top: 1px solid var(--rule);
  max-width: 58rem;
  margin: 0;
}
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2.4rem;
  padding: clamp(1rem, 2.4vh, 1.5rem) 0.15rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
/* Erst ab 720 px zweispurig. Darunter wuerde die Kennung der
   Erklaerung zu viel Breite nehmen. */
@media (min-width: 720px) {
  .spec { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}

/* anywhere statt break-word: nur anywhere senkt auch die
   min-content-Breite und verhindert damit, dass eine lange Kennung
   wie DIN EN 1176-11 die Spur aufzieht. Die Kennung ist ein
   Blattelement, die Regel vererbt sich also nicht in den
   deutschen Fliesstext daneben. */
.spec-id {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--green-ink);
  overflow-wrap: anywhere;
}

.spec-def {
  margin: 0;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}
/* 08.09.2026 automatische Silbentrennung abgeschaltet.
   hyphens: auto lieferte in den Normentiteln zwei Sorten schlechter
   Trennung: "Ra-" / "sen und Saatarbeiten" (zwei Zeichen vor dem
   Strich) und "Vegetati-" / "onsflaechen" (falsche Fuge, richtig
   waere Vegetations-flaechen). Eine Mindestlaenge behebt nur die
   erste Sorte; die Trennstelle selbst waehlt der Browser.
   Gemessen ueber 4 Leistungsseiten und 8 Breiten von 320 bis 1440 px:
   ohne automatische Trennung 0 Trennstellen, 0 Ueberlauf und in der
   Spitze eine Zeile weniger als mit. Der Umbruch faellt dann auf die
   Wortgrenze, was bei Titeln aus mehreren Gliedern ohnehin besser
   liest. overflow-wrap bleibt als Notnagel fuer lange Einzelwoerter
   auf schmalen Geraeten. */
.spec-title {
  display: block;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 0.15rem;
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Register ohne Erklaerungstext, nur Kennung und Titel. */
.spec-list--tight .spec { padding: 0.7rem 0.15rem; }
/* 08.09.2026 Kante des Referenzregisters.
   .spec-list begrenzt auf 58rem. Das ist fuer Register mit Fliesstext
   richtig, hier aber nicht: im selben Abschnitt steht darunter der
   Fragenblock ueber die volle Breite. Bei 1440 px endete das Register
   damit bei 70 Prozent, der Fragenblock bei 100, und die Stufe
   dazwischen las sich wie ein abgeschnittener Block. Beide Bauteile
   bekommen dieselbe Kante. Die Kennungsspur bleibt bei 11rem, es
   entsteht also keine Zerrung zwischen Ort und Titel. */
.spec-list--tight { max-width: none; }


/* ------------------------------------------------------------
   6  Frage-Antwort-Block
      Einsatz: leistungen/ (Uebersicht), kontakt/, ueber-mich/

      details und summary, damit der Block ohne JavaScript
      vollstaendig bedienbar ist. Keine Hoehenanimation, es dreht
      sich nur das Zeichen. Reine Haarlinien, keine Kacheln.

      Zwei Regeln fuer den Inhalt:
      - Jede Antwort in Absaetze unter fuenf Zeilen zerlegen,
        gemessen bei 390 px, nicht nur bei 1440 px.
      - Wird der Block spaeter mit FAQPage-JSON-LD ausgezeichnet,
        muss der strukturierte Text WORTGLEICH mit dem sichtbaren
        sein. Zwei Fassungen derselben Antwort laufen sonst
        auseinander, sobald eine davon gepflegt wird.
   ------------------------------------------------------------ */

.faq {
  border-top: 1px solid var(--rule);
  max-width: 52rem;
}
.faq-item { border-bottom: 1px solid var(--rule); }

.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.9rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.6vh, 1.5rem) 0.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  line-height: 1.3;
  color: var(--forest);
  transition: color 0.25s ease;
  overflow-wrap: break-word;
  hyphens: auto;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--green-ink); }
.faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.faq-sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.32em;
}
.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: var(--green-ink);
  transform: translateY(-50%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-sign::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: translateY(-50%) rotate(0deg); }

.faq-body {
  padding: 0 0.15rem clamp(1.25rem, 3vh, 1.9rem);
  max-width: 46rem;
}
.faq-body p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul { list-style: none; margin: 0 0 0.9rem; }
.faq-body ul li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
}
.faq-body ul li:last-child { margin-bottom: 0; }
.faq-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 2px;
  background: var(--green-light);
}
.faq-body a { color: var(--green-ink); border-bottom: 1px solid rgba(30, 122, 70, 0.4); }
.faq-body a:hover { color: var(--forest); border-color: var(--forest); }


/* ------------------------------------------------------------
   7  Bewegung zuruecknehmen
      Der Block am Dateianfang deckt die Bausteine der Startseite ab.
      Diese Regel ergaenzt ihn um die neuen Uebergaenge.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .toc > summary::after,
  .toc-link,
  .toc-link::before,
  .cta-btn,
  .cta-btn svg,
  .cta-tel,
  .cta-inline-link,
  .cta-inline-link svg,
  .toc-cta a,
  .faq-q,
  .faq-sign::before,
  .faq-sign::after {
    transition: none;
  }
}

/* ==========================================================================
   Nachtrag 03.08.2026 - Hierarchie, Rhythmus und Kacheln ohne Foto
   Drei geprüfte Befunde aus der Prüfphase, hier zusammen abgelegt, damit
   nachvollziehbar bleibt, was warum dazugekommen ist.
   ========================================================================== */

/* ---------- Kachel ohne Foto ----------
   Zu zwei Einträgen lag kein Bildmaterial vor: Kamerer Turnhalle Weida
   (Fragenkatalog 01, Frage 6, seit 30.09.2026 von der Website genommen)
   und das Arbeitsfeld Landschaftsplanung
   (BILDZUORDNUNG-LEISTUNGEN-2026-08-02.md). Eine leere .card-media rendert
   als grauer Kasten in --warm-gray und liest sich neben drei Fotos wie ein
   Ladefehler. Statt der Lücke steht hier eine gesetzte Textkachel, die den
   Grund benennt. Ersetzt die früher inline gesetzten Werte an beiden Stellen.
   Gemessener Kontrast: Kicker in --green-light auf --forest 5,69:1, Fließtext
   in --green-pale auf --forest 10,83:1.
   Sobald Fotos vorliegen: Klasse entfernen, picture-Muster einsetzen. */
.card-media--ohne-foto {
  background: var(--forest);
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
}
.card-media--ohne-foto p { margin: 0; }
.card-media--ohne-foto .card-media-note {
  color: var(--green-pale);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Zweite Überschriftenstufe auf den Unterseiten ----------
   Gemessen bei 1440 px hatten alle Inhalts-H2 der Leistungs- und der
   Über-mich-Seite 36,8 oder 38,4 px. Sprung 1,03, DESIGN.md fordert
   mindestens 1,25. Die Startseite macht es richtig (37 / 80 / 115), die
   Projektseiten ebenfalls über .group-title.
   .section-lead übernimmt genau die Stufe von .group-title, die es im System
   schon gibt: 3,2rem gegen 2,4rem sind Faktor 1,33. Sie kennzeichnet die
   Hauptkapitel einer Seite, die erzählenden Zwischenblöcke bleiben klein. */
.prose h2.section-lead,
h2.section-lead {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* ---------- Abstandsstufen ----------
   Vorher hatte jede Sektion jeder Unterseite exakt 90/90 px Innenabstand, über
   14 Seiten kein einziger enger und kein einziger weiter Übergang. Dazu kamen
   20 wortgleiche Inline-Strings für den Blockabstand.
   Drei benannte Stufen ersetzen beides: dicht für einen Block, der zum Vorigen
   gehört, Zäsur vor einem Themenwechsel, dazwischen die vorhandene Grundstufe.
   Die Werte sind aus dem bestehenden System abgeleitet, nicht neu erfunden:
   dicht ist die halbe Grundstufe, Zäsur ihr Anderthalbfaches. */
.page-section--dicht { padding-top: clamp(2rem, 5vh, 3.75rem); }
.page-section--zaesur { padding-top: clamp(6rem, 15vh, 11.25rem); }

/* Blockabstände als Klassen statt als wiederholte Inline-Strings.
   Die Werte sind die drei, die im HTML ohnehin schon vorkamen. */
.abstand-normal { margin-top: clamp(2rem, 4.5vh, 3.2rem); }
.abstand-weit { margin-top: clamp(2.5rem, 6vh, 4rem); }
.abstand-zaesur { margin-top: clamp(3rem, 7vh, 4.5rem); }

/* ---------- Abschluss ruhiger als der Inhalt ----------
   Auf jeder Unterseite waren die beiden größten Überschriften Verkaufsblöcke:
   .cta-close-title mit 60,8 px und .contact-title mit 115,2 px, während die
   Inhaltsüberschriften bei 37 bis 38 px blieben. Beides steht am Seitenende
   direkt übereinander und trug dieselbe Telefonnummer.
   .cta-close kommt nur auf Unterseiten vor, deshalb genügt hier die Grundregel.
   Die Endkarte wird über .contact--quiet zurückgenommen; die Startseite behält
   ihren großen Abschluss, sie hat keinen .cta-close darüber.
   Nach der Änderung ist die größte Überschrift einer Unterseite wieder eine
   Inhaltsüberschrift. */
.cta-close-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

.contact--quiet .contact-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.15;
}
.contact-project-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin: 1.5rem 0 3rem;
}
.contact-project-lead .contact-title { margin: 0; }
.contact-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid rgba(245, 243, 238, 0.38);
  border-radius: 100px;
  background: var(--green-light);
  color: var(--forest-deep);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.contact-project-btn svg { flex: none; transition: transform 0.3s ease; }
.contact-project-btn:hover {
  border-color: var(--off);
  background: var(--off);
}
.contact-project-btn:hover svg { transform: translateX(4px); }
.contact-project-btn:active { transform: translateY(1px); }
.contact-project-btn:focus-visible { outline: 2px solid var(--off); outline-offset: 3px; }
@media (max-width: 520px) {
  .contact-project-lead { align-items: flex-start; }
}

/* ========================================================================== 
   Markenmotiv, mehrstufiges Formular und scrollender HOAI-Ablauf
   ========================================================================== */

/* ---------- Dezente Markenflächen auf bildfreien Abschnitten ---------- */
.page-section--motif {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-section--motif > .page-section-inner {
  position: relative;
  z-index: 1;
}
.section-motif {
  --variant-progress: 0.5;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.section-motif-grid {
  position: absolute;
  inset: -12%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(14, 59, 38, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 59, 38, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: translateY(calc((var(--variant-progress) - 0.5) * 24px));
}
.brand-fold {
  position: absolute;
  width: min(70vw, 980px);
  aspect-ratio: 2 / 1;
  opacity: 0.78;
  filter: drop-shadow(0 3px 0 rgba(255, 255, 252, 0.64));
  transform-origin: center;
}
.brand-fold i {
  --fold-x: 0px;
  --fold-y: 0px;
  position: absolute;
  inset: 0;
  display: block;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * var(--fold-x)),
    calc((var(--variant-progress) - 0.5) * var(--fold-y)),
    0
  );
}
.brand-fold i:nth-child(1) {
  --fold-x: -68px;
  --fold-y: 20px;
  background: rgba(151, 191, 13, 0.19);
  clip-path: polygon(0 42%, 70% 0, 96% 8%, 11% 49%);
}
.brand-fold i:nth-child(2) {
  --fold-x: -34px;
  --fold-y: 12px;
  background: rgba(0, 137, 69, 0.15);
  clip-path: polygon(11% 50%, 96% 9%, 100% 29%, 20% 57%);
}
.brand-fold i:nth-child(3) {
  --fold-x: 18px;
  --fold-y: -8px;
  background: rgba(151, 191, 13, 0.16);
  clip-path: polygon(20% 58%, 100% 30%, 84% 67%, 30% 65%);
}
.brand-fold i:nth-child(4) {
  --fold-x: 42px;
  --fold-y: -16px;
  background: rgba(190, 185, 172, 0.22);
  clip-path: polygon(30% 68%, 84% 69%, 69% 100%, 45% 88%);
}
.brand-fold i:nth-child(5) {
  --fold-x: 64px;
  --fold-y: -24px;
  background: rgba(0, 137, 69, 0.12);
  clip-path: polygon(45% 88%, 69% 100%, 61% 96%, 52% 91%);
}
.section-brand-fold { filter: drop-shadow(0 3px 0 rgba(255, 255, 252, 0.56)); }
.section-motif--fan .section-brand-fold--primary {
  top: 7%;
  left: -15%;
  width: min(64vw, 920px);
  opacity: 0.43;
  transform: translate3d(calc((var(--variant-progress) - 0.5) * 52px), calc((var(--variant-progress) - 0.5) * -32px), 0) rotate(-7deg);
}
.section-motif--fan .section-brand-fold--echo {
  right: -15%;
  bottom: 3%;
  width: min(43vw, 620px);
  opacity: 0.25;
  transform: translate3d(calc((var(--variant-progress) - 0.5) * -68px), calc((var(--variant-progress) - 0.5) * 38px), 0) rotate(171deg);
}
.section-motif-contours {
  position: absolute;
  right: -18%;
  bottom: -38%;
  width: min(68vw, 950px);
  aspect-ratio: 1.22;
  border-radius: 47% 53% 41% 59% / 56% 41% 59% 44%;
  background: repeating-radial-gradient(ellipse at 48% 46%, transparent 0 22px, rgba(25, 107, 61, 0.045) 23px 24px, transparent 25px 41px);
  transform: translate3d(calc((var(--variant-progress) - 0.5) * -42px), calc((var(--variant-progress) - 0.5) * 54px), 0) rotate(12deg);
}
.section-motif--layers .section-brand-fold--layers {
  top: -14%;
  right: -17%;
  width: min(74vw, 1020px);
  opacity: 0.38;
  transform: translate3d(calc((var(--variant-progress) - 0.5) * -58px), calc((var(--variant-progress) - 0.5) * 30px), 0) rotate(7deg);
}
.section-motif--layers .section-brand-fold--fragment {
  bottom: -20%;
  left: 16%;
  width: min(40vw, 560px);
  opacity: 0.2;
  transform: translate3d(calc((var(--variant-progress) - 0.5) * 70px), calc((var(--variant-progress) - 0.5) * -34px), 0) rotate(-176deg);
}
.section-motif-dots {
  position: absolute;
  right: 0;
  bottom: 4%;
  width: min(54vw, 760px);
  height: 70%;
  opacity: 0.36;
  background-image: radial-gradient(circle, rgba(25, 107, 61, 0.18) 1.3px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(100deg, transparent, #000 30%, #000 80%, transparent);
  mask-image: linear-gradient(100deg, transparent, #000 30%, #000 80%, transparent);
  transform: translate3d(calc((var(--variant-progress) - 0.5) * 44px), calc((var(--variant-progress) - 0.5) * -24px), 0);
}
.section-motif-axis {
  position: absolute;
  top: -10%;
  right: 24%;
  height: 120%;
  border-left: 1px dashed rgba(151, 191, 13, 0.34);
  transform: translateX(calc((var(--variant-progress) - 0.5) * -52px)) rotate(8deg);
}

/* ---------- Dunkelgruene Titelbereiche ----------
   Bildfreie Seitenkoepfe erhalten dieselbe Plan- und Faltensprache wie die
   Kontaktseite, aber deutlich leiser. Foto-Heros und der individuell
   gestaltete Kontakt-Hero bleiben davon bewusst ausgenommen. */
.page-hero--plain:not(.page-hero--brand-dark) {
  --dark-progress: 0.32;
  isolation: isolate;
  background:
    radial-gradient(circle at 77% 46%, rgba(30, 122, 70, 0.18), transparent 32%),
    linear-gradient(135deg, #082d1e, var(--forest-deep) 62%, #073522);
}
.page-hero--plain:not(.page-hero--brand-dark)::before {
  position: absolute;
  top: -38%;
  right: -7%;
  z-index: 0;
  width: min(72vw, 1060px);
  height: 156%;
  opacity: 0.76;
  background-image:
    linear-gradient(rgba(245, 243, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 238, 0.04) 1px, transparent 1px),
    repeating-radial-gradient(ellipse at 54% 52%, transparent 0 24px, rgba(245, 243, 238, 0.075) 25px 26px, transparent 27px 44px);
  background-size: 72px 72px, 72px 72px, auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 90%, transparent 100%);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -34px),
    calc((var(--dark-progress) - 0.5) * 48px),
    0
  ) rotate(7deg);
  pointer-events: none;
  content: "";
}
.page-hero--plain:not(.page-hero--brand-dark)::after {
  position: absolute;
  right: -10%;
  bottom: -32%;
  z-index: 0;
  width: min(55vw, 820px);
  aspect-ratio: 2 / 1;
  opacity: 0.54;
  background: linear-gradient(
    166deg,
    rgba(157, 186, 59, 0.32) 0 17%,
    transparent 17.5% 22%,
    rgba(30, 122, 70, 0.28) 22.5% 39%,
    transparent 39.5% 44%,
    rgba(245, 243, 238, 0.12) 44.5% 59%,
    transparent 59.5%
  );
  clip-path: polygon(0 39%, 88% 0, 100% 25%, 78% 72%, 29% 68%);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * 54px),
    calc((var(--dark-progress) - 0.5) * -30px),
    0
  ) rotate(-5deg);
  pointer-events: none;
  content: "";
}

/* ---------- Dunkelgruene Markenflaechen ----------
   Drei Verwandte statt eines wiederholten Bildes: der Kontakt-Hero zeigt den
   vollstaendigen Lageplan, der grosse Kontaktfuss nur Konturen und Falz, der
   schmale Fuss eine einzelne, sehr leise Signatur. */
.page-hero--brand-dark {
  --dark-progress: 0.18;
  min-height: clamp(34rem, 68svh, 46rem);
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 42%, rgba(25, 107, 61, 0.25), transparent 36%),
    linear-gradient(135deg, #06281a, var(--forest-deep) 58%, #073421);
}
.page-hero--brand-dark::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(6, 40, 26, 0.98) 0, rgba(6, 40, 26, 0.9) 42%, rgba(6, 40, 26, 0.25) 76%, transparent 100%);
  pointer-events: none;
  content: "";
}
.page-hero--brand-dark .page-hero-content {
  max-width: 1400px;
}
.page-hero--brand-dark .page-hero-content::before {
  display: block;
  width: clamp(5rem, 11vw, 9rem);
  height: 3px;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  background: var(--green-light);
  content: "";
}
.dark-plan {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.dark-plan-grid {
  position: absolute;
  top: -18%;
  right: -8%;
  width: 66%;
  height: 135%;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(245, 243, 238, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 238, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 90%, transparent);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -24px),
    calc((var(--dark-progress) - 0.5) * 46px),
    0
  ) rotate(3deg);
}
.dark-plan-contours {
  position: absolute;
  right: -17%;
  bottom: -42%;
  width: min(78vw, 1120px);
  aspect-ratio: 1.28;
  border-radius: 47% 53% 41% 59% / 56% 41% 59% 44%;
  opacity: 0.8;
  background: repeating-radial-gradient(ellipse at 48% 46%, transparent 0 23px, rgba(245, 243, 238, 0.1) 24px 25px, transparent 26px 43px);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -44px),
    calc((var(--dark-progress) - 0.5) * 64px),
    0
  ) rotate(11deg);
}
.dark-plan-parcels {
  position: absolute;
  top: -8%;
  right: -2%;
  width: min(43vw, 650px);
  height: 78%;
  border: 1px solid rgba(245, 243, 238, 0.14);
  border-radius: 8% 2% 22% 7%;
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * 38px),
    calc((var(--dark-progress) - 0.5) * -42px),
    0
  ) rotate(4deg);
}
.dark-plan-parcels i {
  position: absolute;
  display: block;
  border: 1px solid rgba(245, 243, 238, 0.15);
  background: rgba(245, 243, 238, 0.018);
}
.dark-plan-parcels i:nth-child(1) { top: 8%; right: 7%; width: 38%; height: 24%; }
.dark-plan-parcels i:nth-child(2) { top: 35%; left: 9%; width: 52%; height: 29%; border-radius: 26% 7% 20% 5%; background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(157, 186, 59, 0.07) 11px 12px); }
.dark-plan-parcels i:nth-child(3) { right: 4%; bottom: 9%; width: 39%; height: 27%; background: rgba(245, 243, 238, 0.06); }
.dark-plan-parcels i:nth-child(4) { bottom: 3%; left: 8%; width: 32%; height: 19%; transform: rotate(-5deg); }
.dark-plan-route {
  position: absolute;
  right: 2%;
  bottom: 10%;
  width: 40%;
  height: 34%;
  border-right: 2px dashed rgba(157, 186, 59, 0.5);
  border-bottom: 2px dashed rgba(157, 186, 59, 0.5);
  border-radius: 0 0 28% 0;
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -34px),
    calc((var(--dark-progress) - 0.5) * 26px),
    0
  ) rotate(-4deg);
}
.dark-plan-dots {
  position: absolute;
  top: 33%;
  right: 22%;
  width: 190px;
  height: 150px;
  opacity: 0.62;
  background-image: radial-gradient(circle, rgba(245, 243, 238, 0.34) 1.5px, transparent 1.8px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle, #000, transparent 74%);
  mask-image: radial-gradient(circle, #000, transparent 74%);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * 28px),
    calc((var(--dark-progress) - 0.5) * -38px),
    0
  );
}
.dark-plan-trees {
  position: absolute;
  inset: 0;
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -26px),
    calc((var(--dark-progress) - 0.5) * 36px),
    0
  );
}
.dark-plan-trees i {
  position: absolute;
  display: block;
  width: 54px;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 243, 238, 0.28);
  border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(157, 186, 59, 0.025);
}
.dark-plan-trees i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(157, 186, 59, 0.68);
  content: "";
  transform: translate(-50%, -50%);
}
.dark-plan-trees i:nth-child(1) { top: 10%; right: 9%; width: 42px; }
.dark-plan-trees i:nth-child(2) { top: 17%; right: 16%; width: 62px; }
.dark-plan-trees i:nth-child(3) { top: 36%; right: 9%; width: 128px; }
.dark-plan-trees i:nth-child(4) { right: 28%; bottom: 18%; width: 74px; }
.dark-plan-trees i:nth-child(5) { right: 22%; bottom: 9%; width: 50px; }
.dark-plan-trees i:nth-child(6) { right: 13%; bottom: 6%; width: 44px; }
.dark-plan-trees i:nth-child(7) { right: 5%; bottom: 20%; width: 58px; }
.dark-plan-fold {
  right: -17%;
  bottom: -15%;
  width: min(55vw, 820px);
  opacity: 0.38;
  filter: none;
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -66px),
    calc((var(--dark-progress) - 0.5) * 34px),
    0
  ) rotate(172deg);
}
.dark-plan-fold i:nth-child(1) { background: rgba(157, 186, 59, 0.28); }
.dark-plan-fold i:nth-child(2) { background: rgba(35, 145, 78, 0.26); }
.dark-plan-fold i:nth-child(3) { background: rgba(157, 186, 59, 0.23); }
.dark-plan-fold i:nth-child(4) { background: rgba(245, 243, 238, 0.12); }
.dark-plan-fold i:nth-child(5) { background: rgba(35, 145, 78, 0.2); }

/* Variante 2: grosse Kontaktfuesse – weichere Konturen, weniger Geometrie. */
.contact {
  --dark-progress: 0.5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.contact::before {
  position: absolute;
  right: -18%;
  bottom: -55%;
  z-index: 0;
  width: min(76vw, 1080px);
  aspect-ratio: 1.22;
  border-radius: 49% 51% 43% 57%;
  opacity: 0.52;
  background:
    radial-gradient(circle at 72% 26%, rgba(157, 186, 59, 0.15) 0 3px, transparent 4px),
    repeating-radial-gradient(ellipse at 51% 48%, transparent 0 25px, rgba(245, 243, 238, 0.075) 26px 27px, transparent 28px 46px);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * -40px),
    calc((var(--dark-progress) - 0.5) * 58px),
    0
  ) rotate(10deg);
  pointer-events: none;
  content: "";
}
.contact::after {
  position: absolute;
  right: -12%;
  top: 7%;
  z-index: 0;
  width: min(48vw, 720px);
  aspect-ratio: 2 / 1;
  opacity: 0.24;
  background: linear-gradient(168deg, rgba(157, 186, 59, 0.42), rgba(30, 122, 70, 0.24) 48%, rgba(245, 243, 238, 0.12) 49% 63%, transparent 64%);
  clip-path: polygon(0 38%, 88% 0, 100% 27%, 78% 70%, 28% 68%);
  transform: translate3d(
    calc((var(--dark-progress) - 0.5) * 52px),
    calc((var(--dark-progress) - 0.5) * -28px),
    0
  ) rotate(-6deg);
  pointer-events: none;
  content: "";
}
.contact-inner { position: relative; z-index: 1; }

/* Variante 3: schmaler Abschluss – nur eine angedeutete Falzkante. */
.footer-slim {
  --dark-progress: 0.5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.footer-slim::before {
  position: absolute;
  right: -8%;
  bottom: -120%;
  z-index: 0;
  width: min(52vw, 620px);
  aspect-ratio: 2 / 1;
  opacity: 0.2;
  background: linear-gradient(170deg, rgba(157, 186, 59, 0.5), rgba(30, 122, 70, 0.3) 45%, rgba(245, 243, 238, 0.16) 46% 58%, transparent 59%);
  clip-path: polygon(0 40%, 90% 0, 100% 27%, 74% 72%, 25% 67%);
  transform: translate3d(calc((var(--dark-progress) - 0.5) * -34px), 0, 0) rotate(-4deg);
  pointer-events: none;
  content: "";
}
.footer-slim .footer-bar { position: relative; z-index: 1; }

/* ---------- Planmotiv fuer breite Freiflaechen auf Leistungsdetails ----------
   Die Grafik sitzt bewusst nur dort, wo der Text bei grossen Viewports endet.
   Unter 1100 px verschwindet sie: Dort gibt es keine echte Freiflaeche mehr
   und Lesbarkeit ist wichtiger als Dekoration. */
.page-section--detail-motif {
  min-height: 46rem;
}
.section-motif--detail {
  left: 64%;
  background: radial-gradient(circle at 68% 48%, rgba(157, 186, 59, 0.075), transparent 58%);
}
.section-motif--detail .section-motif-grid {
  inset: -8% -20% -8% -5%;
  opacity: 0.42;
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 84%, transparent 100%);
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * -18px),
    calc((var(--variant-progress) - 0.5) * 34px),
    0
  ) rotate(-3deg);
}
.section-motif--detail .section-motif-contours {
  right: -34%;
  bottom: -12%;
  width: 130%;
  opacity: 0.86;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * -28px),
    calc((var(--variant-progress) - 0.5) * 46px),
    0
  ) rotate(16deg);
}
.section-brand-fold--detail {
  top: 24%;
  right: -28%;
  width: 128%;
  opacity: 0.38;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * -54px),
    calc((var(--variant-progress) - 0.5) * 28px),
    0
  ) rotate(-9deg);
}
.detail-motif-plan {
  position: absolute;
  top: 13%;
  right: 8%;
  width: 76%;
  height: 68%;
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 42% 13% 30% 17% / 18% 32% 13% 38%;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * 25px),
    calc((var(--variant-progress) - 0.5) * -30px),
    0
  ) rotate(7deg);
}
.detail-motif-plan::before,
.detail-motif-plan::after,
.detail-motif-plan i {
  position: absolute;
  display: block;
  border: 1px solid rgba(14, 59, 38, 0.12);
  content: "";
}
.detail-motif-plan::before {
  inset: 9% 12% 44% 9%;
  border-radius: 9% 28% 12% 20%;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(25, 107, 61, 0.035) 12px 13px);
}
.detail-motif-plan::after {
  right: 8%;
  bottom: 8%;
  width: 42%;
  height: 31%;
  border-radius: 38% 12% 26% 16%;
  background: rgba(25, 107, 61, 0.025);
}
.detail-motif-plan i:nth-child(1) { top: 13%; right: 7%; width: 28%; height: 29%; transform: rotate(-5deg); }
.detail-motif-plan i:nth-child(2) { bottom: 15%; left: 8%; width: 30%; height: 24%; transform: rotate(4deg); }
.detail-motif-plan i:nth-child(3) { top: 45%; left: 31%; width: 38%; border-width: 0 0 1px; border-style: dashed; border-color: rgba(151, 191, 13, 0.3); transform: rotate(-16deg); }
.detail-motif-trees {
  position: absolute;
  inset: 0;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * -22px),
    calc((var(--variant-progress) - 0.5) * 24px),
    0
  );
}
.detail-motif-trees i {
  position: absolute;
  display: block;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid rgba(14, 59, 38, 0.2);
  border-radius: 50%;
  background: rgba(245, 243, 238, 0.5);
  box-shadow: inset 0 0 0 13px rgba(157, 186, 59, 0.035);
}
.detail-motif-trees i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(14, 59, 38, 0.34);
  content: "";
  transform: translate(-50%, -50%);
}
.detail-motif-trees i:nth-child(1) { top: 9%; left: 22%; width: 74px; }
.detail-motif-trees i:nth-child(2) { top: 19%; right: 5%; width: 42px; }
.detail-motif-trees i:nth-child(3) { top: 47%; left: 2%; width: 48px; }
.detail-motif-trees i:nth-child(4) { right: 14%; bottom: 15%; width: 88px; }
.detail-motif-trees i:nth-child(5) { right: 2%; bottom: 7%; width: 45px; }
.section-motif--detail-b .section-brand-fold--detail {
  top: 42%;
  right: -19%;
  opacity: 0.33;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * 48px),
    calc((var(--variant-progress) - 0.5) * -32px),
    0
  ) rotate(168deg);
}
.section-motif--detail-b .detail-motif-plan {
  top: 8%;
  right: 4%;
  transform: translate3d(
    calc((var(--variant-progress) - 0.5) * -30px),
    calc((var(--variant-progress) - 0.5) * 24px),
    0
  ) rotate(-8deg);
}
.section-motif--detail-b .detail-motif-trees i:nth-child(1) { top: 15%; left: 4%; width: 48px; }
.section-motif--detail-b .detail-motif-trees i:nth-child(2) { top: 8%; right: 10%; width: 78px; }
.section-motif--detail-b .detail-motif-trees i:nth-child(3) { top: 54%; left: 23%; width: 66px; }
.section-motif--detail-b .detail-motif-trees i:nth-child(4) { right: 2%; bottom: 28%; width: 46px; }
.section-motif--detail-b .detail-motif-trees i:nth-child(5) { right: 19%; bottom: 8%; width: 82px; }

.card-media--ohne-foto.card-media--brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eef2e9;
}
.card-media--brand > p { position: relative; z-index: 2; }
.card-media--brand .hero-kicker {
  width: max-content;
  max-width: 100%;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--forest);
}
.card-media--brand .card-media-note { color: var(--forest); }
.brand-fold--card {
  --variant-progress: 0.6;
  z-index: 0;
  right: -47%;
  bottom: -5%;
  width: 150%;
  opacity: 0.88;
  transform: rotate(164deg);
}

/* ---------- Projektanfrage in vier Schritten ---------- */
.guide-form {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}
.guide-form form { padding: clamp(1.4rem, 4vw, 3rem); }
.wizard-progress-wrap {
  padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 251, 248, 0.96);
}
.progress-copy {
  margin-bottom: 1rem;
  color: var(--green-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}
.wizard-progress li {
  position: relative;
  min-width: 0;
}
.wizard-progress li:not(:last-child)::after {
  position: absolute;
  top: 17px;
  right: -50%;
  left: 50%;
  z-index: 0;
  height: 1px;
  background: var(--rule);
  content: "";
}
.wizard-progress li.is-complete:not(:last-child)::after { background: var(--green); }
.wizard-progress button {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 48px;
  justify-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
}
.wizard-progress button:not(:disabled) { cursor: pointer; }
.wizard-progress button:focus-visible { outline: 2px solid var(--green-light); outline-offset: 4px; border-radius: 8px; }
.wizard-progress button > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(14, 59, 38, 0.22);
  border-radius: 50%;
  background: #fff;
  color: var(--forest);
  font-size: 0.78rem;
  font-weight: 700;
}
.wizard-progress button > b { overflow: hidden; text-overflow: ellipsis; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.wizard-progress .is-current button > span { border-color: var(--forest); background: var(--forest); color: var(--off); }
.wizard-progress .is-complete button > span { border-color: var(--green); background: var(--green); color: #fff; }
.wizard-progress .is-current button { color: var(--forest); }

.guide-form .form-step { margin: 0; animation: form-step-in 0.35s ease both; }
.guide-form .form-step legend { margin-bottom: 0.4rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.step-lead { margin-bottom: 1.7rem; color: var(--ink-mute); font-size: 0.92rem; }
.question-block { margin-top: 1.7rem; }
.question-block:first-of-type { margin-top: 0; }
.question-label {
  margin-bottom: 0.75rem;
  color: var(--green-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.question-label > span,
.form-field label > span,
.privacy-check strong > span { color: #a24e34; }
.guide-form .chip span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.62rem 1.1rem;
}
.guide-form .chip input[type="checkbox"]:checked + span {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--off);
}
.field-error {
  margin-top: 0.45rem;
  color: #973c2d;
  font-size: 0.82rem;
  font-weight: 600;
}
.form-field [aria-invalid="true"] { border-color: #a24e34; box-shadow: 0 0 0 3px rgba(162, 78, 52, 0.12); }
.privacy-check-wrap {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.privacy-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  cursor: pointer;
}
.privacy-check input {
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  accent-color: var(--forest);
}
.privacy-check strong { display: block; color: var(--forest); font-size: 0.9rem; }
.privacy-check small { display: block; margin-top: 0.35rem; color: var(--ink-mute); font-size: 0.8rem; line-height: 1.55; }
.privacy-check-wrap .form-note a { color: var(--green-ink); border-bottom: 1px solid rgba(25, 107, 61, 0.4); }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.wizard-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.wizard-button[hidden],
.form-status[hidden],
.field-error[hidden],
.form-step[hidden] { display: none !important; }
.wizard-button--back { border: 1.5px solid rgba(14, 59, 38, 0.24); background: transparent; color: var(--forest); }
.wizard-button--next,
.wizard-button--submit { margin-left: auto; border: 1.5px solid var(--green); background: var(--green); color: #fff; }
.wizard-button:hover { transform: translateY(-1px); }
.wizard-button--next:hover,
.wizard-button--submit:hover { border-color: var(--forest); background: var(--forest); }
.wizard-button:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; }
.form-status {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--green);
  border-radius: 8px;
  background: rgba(157, 186, 59, 0.14);
  color: var(--forest);
  font-size: 0.88rem;
}
@keyframes form-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scrollende Visualisierung der Leistungsphasen ---------- */
.process-section {
  padding: clamp(4.5rem, 9vw, 8rem) var(--pad);
  background: var(--off);
}
.process-heading { max-width: 760px; margin: 0 auto clamp(3rem, 7vw, 5rem); }
.process-heading > p:not(.section-label) { margin-bottom: 0.8rem; color: var(--ink-soft); }
.process-heading > p:last-child { margin-bottom: 0; }
.process-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(440px, 1.14fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 174px;
  align-content: center;
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-top: 1px solid var(--rule);
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, padding 0.28s ease;
}
.process-list li:last-child { border-bottom: 1px solid var(--rule); }
.process-list li::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--green);
  content: "";
  opacity: 0;
  transform: scaleY(0.25);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.process-list li.is-active {
  padding-left: 1.15rem;
  border-color: transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 22px 55px -38px rgba(10, 44, 28, 0.55);
}
.process-list li.is-active::before { opacity: 1; transform: scaleY(1); }
.process-number { color: var(--green-ink); font-family: var(--font-display); font-size: 1rem; font-style: italic; }
.process-list h3 { margin: 0 0 0.45rem; color: var(--forest); font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 500; line-height: 1.12; hyphens: auto; overflow-wrap: break-word; }
.process-list p { margin: 0; color: var(--ink-mute); font-size: 0.94rem; }
.process-list li.is-past .process-number { color: var(--green); }
.process-visual { position: sticky; top: 100px; min-width: 0; }
.plan-card {
  --phase-progress: 11.111%;
  --plan-scale: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(700px, calc(100svh - 125px));
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(14, 59, 38, 0.17);
  border-radius: 22px;
  background: #f7f5ef;
  box-shadow: 0 32px 78px -42px rgba(10, 44, 28, 0.52);
}
.plan-toolbar {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--green-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-toolbar b { color: var(--forest); font-family: var(--font-display); font-size: 0.95rem; font-style: italic; font-weight: 400; letter-spacing: 0.04em; }
.plan-canvas { position: relative; min-height: 0; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(237, 234, 226, 0.5)); isolation: isolate; }
.plan-canvas::after { position: absolute; inset: 0; z-index: 30; border: 14px solid rgba(247, 245, 239, 0.72); pointer-events: none; content: ""; }
.plan-progress-fill { position: absolute; inset: 0 0 auto; z-index: -1; height: var(--phase-progress); background: linear-gradient(180deg, rgba(157, 186, 59, 0.08), rgba(30, 122, 70, 0.14)); transition: height 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.plan-grid-lines { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(14, 59, 38, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 59, 38, 0.07) 1px, transparent 1px); background-size: 28px 28px; transform: scale(var(--plan-scale)); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.plan-boundary { position: absolute; inset: 8% 9% 10% 10%; border: 2px solid rgba(14, 59, 38, 0.48); border-radius: 38% 18% 34% 20% / 22% 34% 18% 30%; transform: rotate(-3deg); }
.plan-boundary::before,
.plan-boundary::after { position: absolute; border: 1px dashed rgba(25, 107, 61, 0.36); border-radius: 50%; content: ""; }
.plan-boundary::before { inset: 9% 43% 55% 7%; }
.plan-boundary::after { inset: 58% 7% 8% 48%; }
.plan-layer { opacity: 0; transition: opacity 0.5s ease, filter 0.5s ease; }
.plan-layer.is-visible { opacity: 1; }
.plan-path { position: absolute; z-index: 3; top: 43%; left: -8%; width: 118%; height: 17%; border: 2px solid rgba(14, 59, 38, 0.38); border-radius: 46% 54% 44% 56%; background: #d9cdb5; transform: rotate(-12deg); box-shadow: inset 0 0 0 5px rgba(245, 243, 238, 0.72); }
.plan-path::after { position: absolute; inset: 42% 0 auto; border-top: 2px dashed rgba(14, 59, 38, 0.32); content: ""; }
.plan-lawn { position: absolute; z-index: 2; top: 12%; left: 12%; width: 47%; height: 38%; border: 2px solid rgba(14, 59, 38, 0.35); border-radius: 48% 32% 45% 28%; background: #cbd7aa; transform: rotate(5deg); }
.plan-zone { position: absolute; z-index: 4; border: 2px solid rgba(14, 59, 38, 0.5); background: rgba(157, 186, 59, 0.58); }
.plan-zone--play { top: 17%; right: 13%; width: 27%; aspect-ratio: 1; border-radius: 50% 42% 48% 37%; }
.plan-zone--sport { right: 17%; bottom: 14%; width: 38%; height: 21%; border-radius: 24px; background: rgba(30, 122, 70, 0.32); transform: rotate(7deg); }
.plan-swale { position: absolute; z-index: 3; bottom: 9%; left: 11%; width: 25%; height: 36%; border: 2px solid rgba(25, 107, 61, 0.5); border-radius: 50%; background: repeating-linear-gradient(110deg, rgba(30, 122, 70, 0.14) 0 5px, rgba(255, 255, 255, 0.1) 5px 10px); transform: rotate(-18deg); }
.plan-approval,
.plan-award { position: absolute; z-index: 12; display: grid; width: 50px; height: 50px; place-items: center; border: 2px solid var(--green); border-radius: 50%; background: var(--off); color: var(--green-ink); font-size: 1.35rem; font-weight: 800; box-shadow: 0 12px 28px -18px rgba(10, 44, 28, 0.6); }
.plan-approval { top: 12%; left: 48%; }
.plan-award { right: 9%; bottom: 31%; background: var(--forest); color: var(--off); }
.plan-dimensions { position: absolute; inset: 9%; z-index: 7; }
.plan-dimensions i { position: absolute; display: block; border-top: 1px solid var(--green-ink); }
.plan-dimensions i::before,
.plan-dimensions i::after { position: absolute; top: -4px; width: 1px; height: 8px; background: var(--green-ink); content: ""; }
.plan-dimensions i::before { left: 0; }
.plan-dimensions i::after { right: 0; }
.plan-dimensions i:nth-child(1) { top: 11%; left: 8%; width: 36%; transform: rotate(6deg); }
.plan-dimensions i:nth-child(2) { right: 7%; bottom: 14%; width: 31%; transform: rotate(7deg); }
.plan-dimensions i:nth-child(3) { bottom: 12%; left: 7%; width: 26%; transform: rotate(-18deg); }
.plan-documents { position: absolute; z-index: 10; top: 8%; right: 8%; width: 72px; height: 88px; }
.plan-documents i { position: absolute; inset: 0; border: 1.5px solid rgba(14, 59, 38, 0.48); border-radius: 7px; background: rgba(255, 255, 255, 0.88); box-shadow: 0 8px 18px -14px rgba(10, 44, 28, 0.7); }
.plan-documents i:nth-child(1) { transform: translate(-12px, 12px) rotate(-5deg); }
.plan-documents i:nth-child(2) { transform: translate(-6px, 6px) rotate(-2deg); }
.plan-documents i:nth-child(3)::before { position: absolute; top: 20px; right: 12px; left: 12px; height: 22px; border-top: 2px solid var(--green); border-bottom: 2px solid var(--rule); content: ""; }
.plan-build { position: absolute; z-index: 6; inset: 14% 12%; border-radius: 30% 18% 28% 22%; background: repeating-linear-gradient(45deg, transparent 0 9px, rgba(216, 138, 28, 0.2) 9px 13px); }
.plan-trees { position: absolute; z-index: 14; inset: 0; }
.plan-trees i { position: absolute; display: block; width: 42px; aspect-ratio: 1; border: 2px solid var(--forest); border-radius: 50%; background: rgba(157, 186, 59, 0.7); box-shadow: inset 0 0 0 8px rgba(245, 243, 238, 0.45), 0 7px 14px -11px rgba(10, 44, 28, 0.7); }
.plan-trees i:nth-child(1) { top: 14%; left: 17%; }
.plan-trees i:nth-child(2) { top: 27%; right: 17%; width: 34px; }
.plan-trees i:nth-child(3) { right: 25%; bottom: 16%; width: 46px; }
.plan-trees i:nth-child(4) { bottom: 12%; left: 19%; width: 35px; }
.plan-trees i:nth-child(5) { top: 55%; left: 47%; width: 30px; }
.plan-marker { position: absolute; z-index: 20; display: grid; width: 30px; height: 30px; place-items: center; border: 1.5px solid rgba(14, 59, 38, 0.34); border-radius: 50%; background: rgba(245, 243, 238, 0.92); color: var(--forest); font-size: 0.66rem; font-weight: 800; transform: translate(-50%, -50%) scale(0.84); transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; }
.plan-marker.is-past { border-color: var(--green); background: var(--green); color: #fff; transform: translate(-50%, -50%) scale(0.92); }
.plan-marker.is-active { border-color: var(--green-light); background: var(--forest); color: #fff; box-shadow: 0 0 0 7px rgba(157, 186, 59, 0.24); transform: translate(-50%, -50%) scale(1.18); }
.plan-caption { display: grid; min-height: 128px; align-content: center; padding: 1.15rem 1.35rem; border-top: 1px solid var(--rule); background: #fff; }
.plan-caption span { color: var(--green-ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.plan-caption strong { margin-top: 0.2rem; color: var(--forest); font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.1; }
.plan-caption small { margin-top: 0.3rem; color: var(--ink-mute); font-size: 0.82rem; }
.process-cta { margin-top: clamp(2.5rem, 6vw, 5rem); }

@media (max-width: 1024px) {
  .process-layout { grid-template-columns: minmax(320px, 0.9fr) minmax(380px, 1.1fr); gap: 2.2rem; }
}
@media (max-width: 1100px) {
  .page-section--detail-motif { min-height: 0; }
  .section-motif--detail { display: none; }
  .dark-plan-parcels { right: -12%; width: 56vw; }
  .dark-plan-fold { right: -25%; width: 68vw; }
}
@media (max-width: 768px) {
  .page-hero--plain:not(.page-hero--brand-dark)::before {
    top: -18%;
    right: -72%;
    width: 150vw;
    height: 128%;
    opacity: 0.48;
  }
  .page-hero--plain:not(.page-hero--brand-dark)::after {
    right: -54%;
    bottom: -8%;
    width: 118vw;
    opacity: 0.28;
  }
  .page-hero--brand-dark { min-height: 36rem; }
  .page-hero--brand-dark::after {
    background: linear-gradient(90deg, rgba(6, 40, 26, 0.98) 0, rgba(6, 40, 26, 0.9) 64%, rgba(6, 40, 26, 0.46) 100%);
  }
  .dark-plan { opacity: 0.74; }
  .dark-plan-grid { right: -58%; width: 115%; }
  .dark-plan-contours { right: -76%; bottom: -24%; width: 155vw; }
  .dark-plan-parcels { top: 4%; right: -54%; width: 96vw; height: 74%; }
  .dark-plan-route { right: -18%; width: 70%; }
  .dark-plan-dots { right: 2%; opacity: 0.35; }
  .dark-plan-fold { right: -61%; bottom: -3%; width: 116vw; opacity: 0.25; }
  .dark-plan-trees i:nth-child(1),
  .dark-plan-trees i:nth-child(2),
  .dark-plan-trees i:nth-child(5),
  .dark-plan-trees i:nth-child(6) { display: none; }
  .contact::before { right: -70%; width: 150vw; }
  .contact::after { right: -52%; width: 105vw; opacity: 0.16; }
  .footer-slim::before { right: -42%; width: 100vw; }
  .section-motif--fan .section-brand-fold--primary { left: -58%; width: 760px; opacity: 0.34; }
  .section-motif--fan .section-brand-fold--echo { right: -52%; width: 520px; }
  .section-motif--layers .section-brand-fold--layers { top: 2%; right: -60%; width: 760px; opacity: 0.31; }
  .section-motif--layers .section-brand-fold--fragment { left: -24%; width: 500px; }
  .section-motif-dots { width: 92%; opacity: 0.28; }
  .process-layout { display: flex; flex-direction: column; }
  .process-visual { top: calc(var(--header-h) + 0.4rem); z-index: 9; order: -1; width: 100%; }
  .plan-card { height: 390px; min-height: 390px; border-radius: 16px; }
  .plan-caption { min-height: 92px; padding: 0.8rem 1rem; }
  .process-list li { min-height: 158px; }
}
@media (max-width: 560px) {
  .page-hero--plain:not(.page-hero--brand-dark)::before {
    right: -112%;
    width: 190vw;
    opacity: 0.36;
  }
  .page-hero--plain:not(.page-hero--brand-dark)::after {
    right: -86%;
    bottom: -2%;
    width: 148vw;
    opacity: 0.2;
  }
  .page-hero--brand-dark { min-height: 34rem; }
  .page-hero--brand-dark .page-hero-content::before { width: 5rem; height: 2px; }
  .dark-plan-parcels,
  .dark-plan-route,
  .dark-plan-dots { display: none; }
  .dark-plan-contours { right: -108%; bottom: -12%; width: 190vw; opacity: 0.42; }
  .dark-plan-fold { right: -84%; bottom: 5%; width: 138vw; opacity: 0.18; }
  .dark-plan-trees i:nth-child(3) { top: 31%; right: -8%; width: 104px; }
  .dark-plan-trees i:nth-child(4) { right: 5%; bottom: 17%; width: 60px; }
  .dark-plan-trees i:nth-child(7) { right: -4%; bottom: 5%; width: 44px; }
  .wizard-progress button > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .wizard-button { width: 100%; }
  .wizard-button--next,
  .wizard-button--submit { margin-left: 0; }
  .process-section { padding-inline: 0.75rem; }
  .process-heading { padding-inline: 0.25rem; }
  .process-visual { top: calc(var(--header-h) + 0.2rem); }
  .plan-card { height: 318px; min-height: 318px; }
  .plan-toolbar { min-height: 42px; padding: 0.55rem 0.8rem; font-size: 0.58rem; }
  .plan-toolbar b { font-size: 0.78rem; }
  .plan-caption { min-height: 80px; padding: 0.6rem 0.85rem; }
  .plan-caption span { font-size: 0.58rem; }
  .plan-caption strong { font-size: 1.05rem; }
  .plan-caption small { display: none; }
  .plan-canvas::after { border-width: 8px; }
  .plan-marker { width: 26px; height: 26px; font-size: 0.58rem; }
  .plan-approval,
  .plan-award { width: 38px; height: 38px; font-size: 1rem; }
  .plan-documents { width: 55px; height: 66px; }
  .process-list li { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.7rem; min-height: 152px; padding-right: 0.35rem; }
  .process-list li.is-active { padding-left: 0.8rem; }
  .process-list h3 { font-size: 1.22rem; }
  .brand-fold--card { right: -68%; width: 190%; }
}
@media (max-width: 374px) {
  .guide-form form { padding: 1.2rem 1rem 1.35rem; }
  .wizard-progress-wrap { padding-inline: 0.85rem; }
  .guide-form .chip-row { gap: 0.5rem; }
  .guide-form .chip span { padding-inline: 0.85rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-fold,
  .brand-fold i,
  .section-motif-grid,
  .section-motif-contours,
  .section-motif-dots,
  .section-motif-axis,
  .detail-motif-plan,
  .detail-motif-trees,
  .plan-progress-fill,
  .plan-grid-lines,
  .plan-layer,
  .plan-marker,
  .process-list li,
  .process-list li::before,
  .wizard-button { transition: none; animation: none; }
}

/* ------------------------------------------------------------
   Gemeinsame Informationsarchitektur der Leistungsunterseiten
   ------------------------------------------------------------ */
.service-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.4rem;
  list-style: none;
}
.service-scope-list li {
  position: relative;
  min-height: 48px;
  padding: 0.78rem 0.9rem 0.78rem 1.8rem;
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 10px;
  background: rgba(238, 242, 233, 0.62);
  color: var(--forest);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.4;
}
.service-scope-list li::before {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-light);
  content: "";
  transform: translateY(-50%);
}

.service-section-heading {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}
.service-section-heading .section-label { margin-bottom: 1rem; }
.service-section-heading .section-lead { margin: 0 0 1rem; }
.service-section-heading > p:last-child {
  max-width: 48rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.service-section-copy {
  max-width: 48rem;
  color: var(--ink-soft);
}
.service-section-copy p { line-height: 1.75; }
.service-section-copy p + p { margin-top: 0.65rem; }
.service-section-heading--gallery {
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}
.service-section-heading a {
  color: var(--green-ink);
  border-bottom: 1px solid rgba(30, 122, 70, 0.38);
}
.service-card-section .section-motif { opacity: 0.56; }

.service-card-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: 1px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  list-style: none;
}
.service-card-grid > li,
.service-card-grid > .phase {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 14rem;
  padding: clamp(1.35rem, 2.8vw, 2rem);
  background:
    radial-gradient(circle at 100% 0, rgba(157, 186, 59, 0.09), transparent 38%),
    var(--off);
}
.service-card-grid > li > span {
  position: static;
  display: block;
  width: auto;
  margin-bottom: 1.5rem;
  padding: 0;
  background: transparent;
  color: var(--green-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  line-height: 1;
}
/* 08.09.2026 Ordnungsziffern im Kartenraster.
   Vorher erbten die Ziffern 1 bis 9 dieselbe Groesse wie die Kicker-
   Zeilen der uebrigen Karten: 16 px, Gewicht 300, kursiv. Neben einem
   Titel von rund 25 px las sich die Nummer wie eine Fussnote, obwohl
   sie das Ordnungsmerkmal des ganzen Abschnitts ist. Die Nummer traegt
   die Reihenfolge, also bekommt sie auch das Gewicht dafuer.
   Nur .phase-mark, nicht der allgemeine Kartenspan darueber: die
   uebrigen Karten (Startseite, Projekte, ueber-mich) fuehren dort
   Textkicker, die klein bleiben muessen.
   tabular-nums, damit die Ziffern ueber alle Karten auf derselben
   Breite sitzen und die Grundlinie nicht springt. */
.service-card-grid > .phase > .phase-mark {
  position: static;
  display: inline-block;
  width: auto;
  min-width: 1.5em;
  margin: 0 0 1.1rem;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid rgba(30, 122, 70, 0.28);
  background: transparent;
  color: var(--green-ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.1vw, 2.85rem);
  font-style: italic;
  font-weight: 300;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}
.service-card-grid h3,
.service-card-grid .phase-title {
  margin: 0 0 0.65rem;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.2;
}
.service-card-grid p,
.service-card-grid .phase-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.7;
}

.service-intro-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}
.service-summary-card {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(157, 186, 59, 0.11), transparent 42%),
    rgba(251, 251, 248, 0.88);
  box-shadow: 0 28px 68px -54px rgba(10, 44, 28, 0.56);
}
.service-summary-card > div {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}
.service-summary-card > div:first-child { padding-top: 0; border-top: 0; }
.service-summary-card > div:last-child { padding-bottom: 0; }
.service-summary-card dt {
  margin-bottom: 0.4rem;
  color: var(--green-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.service-summary-card dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* 08.09.2026 Spurbreite der Einleitungsspalte.
   Vorher 0.42fr. Gemessen ergab das 41 Zeichen pro Zeile bei 1440 px
   und 31 bei 1100 px. Fuer Fliesstext am Bildschirm gelten 60 bis 75
   Zeichen als Lesemass, 35 ist die Untergrenze fuer Telefone. Die
   Desktop-Spalte lag also unter dem Mobilwert. Folge war nicht zu viel
   Text, sondern eine zu schmale Spur: derselbe Absatz wurde zur hohen
   duennen Saeule und ueberragte das Register rechts um 147 px.
   Mit 0.66fr sind es rund 57 Zeichen, und die rechte Spalte behaelt
   genug Breite fuer zwei Kartenspuren. */
.service-standards-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(19rem, 0.66fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.service-standards-intro { max-width: none; }
.service-standards-intro .section-label {
  margin-bottom: 1rem;
  color: var(--green-ink);
}
.service-standards-intro .section-lead { margin: 0 0 1.2rem; }
/* Die Ueberschrift steht in einer schmalen Spur. "Zusammenarbeit" ist
   dort breiter als der Kasten und ragte bei 1100 px um 50 px heraus.
   Trennung erlauben statt den Text zu kuerzen. */
.service-standards-intro h2 {
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Nachsatz zum Abschnitt, kein zweiter Haupttext. Vorher stand er im
   selben Grad wie die Einleitung darueber und zog damit Gewicht auf
   eine Fussnote. */
.service-standards-note {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.service-standards-note p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-mute);
}
.spec-list--service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  border-top: 0;
}
.spec-list--service-grid .spec {
  display: block;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: 14px;
  background: rgba(251, 251, 248, 0.72);
}
.spec-list--service-grid .spec-id {
  margin-bottom: 0.7rem;
  color: var(--green-ink);
  font-size: 0.92rem;
}
.spec-list--service-grid .spec-title { margin-bottom: 0.45rem; }

/* 08.09.2026 Ungerade Kartenzahl im Zweispalter.
   Fuenf Karten auf zwei Spuren lassen unten rechts einen leeren Platz
   stehen. Fuer den Sonderfall drei gab es das Muster schon als
   --service-grid-three; die Zaehlung uebernimmt das jetzt selbst und
   gilt damit auch fuer fuenf, sieben und neun.
   :last-child:nth-child(odd) ist wahr, wenn das letzte Kind eine
   ungerade Ordnungszahl traegt, also bei ungerader Gesamtzahl.
   project-decision-grid ist ausgenommen, das laeuft auf drei Spuren
   und ist bei drei Karten voll. */
.spec-list--service-grid:not(.project-decision-grid) > .spec:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 1051px) {
  .service-standards-layout--cards-bottom > .spec-list--service-grid {
    align-self: end;
  }
}

.project-decision-heading {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.project-decision-heading .section-label {
  margin-bottom: 1rem;
  color: var(--green-ink);
}
.project-decision-heading .section-lead {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-display);
  line-height: 1.15;
}
.project-decision-heading > p {
  max-width: 44rem;
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.7;
}
.project-decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.about-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  grid-template-areas:
    "heading media"
    "cards media";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 5vh, 3.2rem);
  align-items: start;
}
.about-focus-heading {
  grid-area: heading;
  padding-top: 0;
}
.about-focus-media { grid-area: media; }
.about-focus-grid {
  grid-area: cards;
  margin-top: 0;
}
.about-focus-grid > li { min-height: 12rem; }

.services-showcase-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.services-showcase-grid .figure-duo {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(14, 59, 38, 0.11);
  border-radius: var(--radius);
  background: rgba(251, 251, 248, 0.76);
}
.services-showcase-grid .figure-duo-media {
  order: 0;
  width: 100%;
}
.services-showcase-grid .figure-duo-frame {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.services-showcase-grid .figure-duo-media figcaption {
  max-width: none;
  margin: 0;
  padding: 0.8rem clamp(1.25rem, 2.4vw, 1.7rem);
}
.services-showcase-grid .figure-duo-body {
  flex: 1;
  order: 1;
  padding: clamp(1.25rem, 2.4vw, 1.7rem);
}
.services-showcase-grid .figure-duo-body h2 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.planning-comparison-heading {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.planning-comparison-heading .section-label {
  margin-bottom: 1rem;
  color: var(--green-ink);
}
.planning-comparison-heading h2 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.planning-comparison-heading > p {
  max-width: 43rem;
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  line-height: 1.75;
}
.planning-comparison-grid {
  gap: 1rem;
  align-items: stretch;
}
.planning-comparison-card.prose {
  display: flex;
  flex-direction: column;
  max-width: none;
  min-height: 25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid rgba(14, 59, 38, 0.13);
  border-radius: var(--radius);
  background: rgba(251, 251, 248, 0.72);
}
.planning-comparison-index {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--green-ink);
  font-family: var(--font-display);
  font-style: italic;
}
.planning-comparison-card.prose h3 {
  margin: 0 0 1.15rem;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
}
.planning-comparison-card .planning-comparison-action {
  margin-top: auto;
  padding-top: 1.5rem;
}

.service-detail-page .faq--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  max-width: none;
  border-top: 0;
}
.service-detail-page .faq--grid .faq-item { border-top: 1px solid var(--rule); }
/* 08.09.2026 Wie beim Register: drei Fragen auf zwei Spuren lassen
   rechts unten einen leeren Platz. Die letzte Frage nimmt dann die
   volle Breite. Bei vier Fragen aendert sich nichts. */
.service-detail-page .faq--grid > .faq-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .service-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-list--service-grid-three .spec:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .service-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-standards-intro {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}
@media (max-width: 1050px) {
  .service-standards-layout { grid-template-columns: minmax(0, 1fr); }
  .service-standards-intro { max-width: 48rem; }
  .project-decision-heading { grid-template-columns: minmax(0, 1fr); }
  .about-focus-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "media"
      "cards";
  }
  .planning-comparison-heading { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .service-detail-page .faq--grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .service-intro-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .spec-list--service-grid { grid-template-columns: minmax(0, 1fr); }
  .spec-list--service-grid-three .spec:last-child { grid-column: auto; }
}
@media (max-width: 420px) {
  .service-scope-list { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 700px) {
  .service-card-grid.about-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 880px) {
  .figure-duo--portrait .figure-duo-frame { aspect-ratio: 4 / 3; }
  .figure-duo > .card-media--ohne-foto { align-self: stretch; }
}

@media (min-width: 900px) {
  .services-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}