@charset "UTF-8";
/* =========================================================================
   Grünpflege Reisch — Stylesheet
   Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Typografie · 5 Layout
           6 Schnittkante · 7 Kopf/Navigation · 8 Hero · 9 Bausteine
           10 Formular · 11 Fuß · 12 Bewegung
   ========================================================================= */

/* 1 — Schriften ---------------------------------------------------------- */
/* Selbst gehostet. Kein Google-Fonts-CDN: das überträgt die IP-Adresse der
   Besucher in die USA und ist in Deutschland abmahnfähig
   (LG München I, Urteil vom 20.01.2022, Az. 3 O 17493/20). */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson";
  src: url("../fonts/atkinson-next-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson";
  src: url("../fonts/atkinson-next-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2 — Tokens ------------------------------------------------------------- */
:root {
  /* Farbe. Sechs benannte Werte, alles andere ist daraus gemischt. */
  --c-morgentau:     #F3F1EA;  /* Dunst über Rasen — Seitengrund */
  --c-schnittgut:    #16211A;  /* nasses Schnittgut — Text, dunkle Flächen */
  --c-rasenschatten: #2E4A38;  /* Grasnarbe im Schatten — Flächen, Buttons */
  --c-werkzeugstahl: #5C645F;  /* angelaufene Klinge — Sekundärtext, Linien */
  --c-feuchte-erde:  #7A4A2E;  /* Erde unter der Narbe — Akzent, Fehler */
  --c-schnittkante:  #C4D468;  /* frische Schnittfläche — NUR Linie */

  /* Abgeleitet, keine eigenen Tokens */
  --f-flaeche:  color-mix(in oklab, var(--c-morgentau) 93%, var(--c-werkzeugstahl));
  --f-linie:    color-mix(in oklab, var(--c-morgentau) 66%, var(--c-werkzeugstahl));
  --f-linie-zart: color-mix(in oklab, var(--c-morgentau) 86%, var(--c-werkzeugstahl));

  /* Rollen */
  --f-grund:   var(--c-morgentau);
  --f-text:    var(--c-schnittgut);
  --f-text-2:  var(--c-werkzeugstahl);
  --f-fokus:   var(--c-feuchte-erde);

  /* Typografie */
  --schrift-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --schrift-body: "Atkinson", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-h1:      clamp(1.95rem, 1.35rem + 1.9vw, 3.3rem);
  --t-h2:      clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem);
  --t-h3:      clamp(1.25rem, 1.15rem + 0.42vw, 1.5rem);
  --t-lead:    clamp(1.125rem, 1.06rem + 0.28vw, 1.3rem);
  --t-body:    clamp(1.0625rem, 1.03rem + 0.14vw, 1.125rem);
  --t-meta:    0.9375rem;
  --t-eyebrow: 0.8125rem;
  --t-tel:     clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);

  /* Raum */
  --r-1: 0.25rem; --r-2: 0.5rem;  --r-3: 0.75rem; --r-4: 1rem;
  --r-5: 1.5rem;  --r-6: 2rem;    --r-7: 3rem;    --r-8: 4rem;
  --r-sektion: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);

  --breite-max:  72rem;
  --breite-text: 38rem;
  --rand: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);

  --radius: 2px;
  --kopf-hoehe: 4.5rem;
  --anrufleiste: 3.5rem;

  /* Bewegung */
  --dauer: 280ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dauer-mikro: 160ms;
}

/* 3 — Grundlagen -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  background: var(--f-grund);
  color: var(--f-text);
  font-family: var(--schrift-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--f-flaeche); }

:focus-visible {
  outline: 3px solid var(--f-fokus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-schnittkante); color: var(--c-schnittgut); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: var(--rand); top: -100%; z-index: 100;
  background: var(--c-schnittgut); color: var(--c-morgentau);
  padding: var(--r-3) var(--r-4); border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
  transition: top var(--dauer-mikro) var(--kurve);
}
.sprungmarke:focus { top: var(--r-3); }

/* 4 — Typografie -------------------------------------------------------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.h1, h1 {
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 1;   /* an — aber nur hier */
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.021em;
}
.h2, h2 {
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 0;   /* überall sonst aus */
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.014em;
}
.h3, h3 {
  font-family: var(--schrift-body);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.005em;
}
.lead { font-size: var(--t-lead); line-height: 1.5; }
.meta { font-size: var(--t-meta); color: var(--f-text-2); }

.eyebrow {
  display: block;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f-text-2);
  margin-bottom: var(--r-3);
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

.textblock > * + * { margin-top: var(--r-4); }
.textblock h2 + p, .textblock h3 + p { margin-top: var(--r-3); }
.textblock ul { padding-left: 1.1em; }
.textblock li + li { margin-top: var(--r-2); }

/* 5 — Layout ------------------------------------------------------------ */
.huelle {
  width: min(100% - var(--rand) * 2, var(--breite-max));
  margin-inline: auto;
}
.huelle--schmal { max-width: var(--breite-text); }

.sektion {
  position: relative;
  padding-block: var(--r-sektion);
  --kante-oben: var(--f-grund);
}
.sektion--flaeche { background: var(--f-flaeche); --kante-oben: var(--f-flaeche); }
.sektion--dunkel {
  background: var(--c-schnittgut);
  color: var(--c-morgentau);
  --kante-oben: var(--c-schnittgut);
  --f-text-2: color-mix(in oklab, var(--c-morgentau) 68%, var(--c-schnittgut));
  --f-fokus: var(--c-schnittkante);
}

/* Mähbahnen. Wenn man sie bewusst sieht, sind sie zu stark. */
.sektion--gemaeht::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 clamp(2.5rem, 5vw, 4.5rem),
    rgba(22, 33, 26, 0.011) clamp(2.5rem, 5vw, 4.5rem) clamp(5rem, 10vw, 9rem)
  );
  pointer-events: none;
}
.sektion--dunkel.sektion--gemaeht::before {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 clamp(2.5rem, 5vw, 4.5rem),
    rgba(243, 241, 234, 0.015) clamp(2.5rem, 5vw, 4.5rem) clamp(5rem, 10vw, 9rem)
  );
}
.sektion > .huelle { position: relative; z-index: 1; }

.raster { display: grid; gap: var(--r-5); }
@media (min-width: 45em) { .raster--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 38em) { .raster--2 { grid-template-columns: repeat(2, 1fr); } }

.sektionskopf { max-width: 34rem; margin-bottom: var(--r-7); }
.sektionskopf p { margin-top: var(--r-4); color: var(--f-text-2); }

/* 6 — Signature: die Schnittkante --------------------------------------- */
/* Wird von site.js befüllt. Ohne JS bleibt die Haarlinie als Grenze stehen. */
[data-kante] {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 14px;
  z-index: 3;
  pointer-events: none;
  border-bottom: 1px solid var(--f-linie-zart);
}
[data-kante].kante--bereit { border-bottom: 0; }

.kante__form { position: absolute; inset: 0; width: 100%; height: 100%; }
.kante__form path.fuellung { fill: var(--kante-oben); }
.kante__form path.spur {
  fill: none;
  stroke: var(--f-linie-zart);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sektion--dunkel .kante__form path.spur {
  stroke: color-mix(in oklab, var(--c-schnittgut) 78%, var(--c-morgentau));
}

/* Der bewegte Teil: Fenster verschiebt sich, Inhalt rechnet gegen.
   Nur transform — keine Breiten-, clip-path- oder stroke-Animation. */
.kante__fenster {
  position: absolute; inset: 0;
  overflow: hidden;
  transform: translate3d(calc((var(--kante-p, 0) - 1) * 100%), 0, 0);
}
.kante__innen {
  position: absolute; inset: 0;
  transform: translate3d(calc((1 - var(--kante-p, 0)) * 100%), 0, 0);
}
.kante__innen svg { width: 100%; height: 100%; }
.kante__innen path {
  fill: none;
  stroke: var(--c-schnittkante);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

/* 7 — Kopf und Navigation ----------------------------------------------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in oklab, var(--c-morgentau) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r-4);
  height: var(--kopf-hoehe);
  transition: height var(--dauer) var(--kurve);
}
/* Fixierter Kopf liegt außerhalb des Flusses — die Höhenänderung
   verschiebt keinen Inhalt und verursacht kein Layout-Shift. */
.kopf--kompakt { border-bottom-color: var(--f-linie); }
.kopf--kompakt .kopf__innen { height: 3.5rem; }
.kopf--kompakt .marke__name { font-size: 1.0625rem; }

.marke {
  display: inline-flex; align-items: baseline; gap: 0.55rem;
  text-decoration: none; white-space: nowrap;
}
.marke__name {
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 0;
  font-weight: 600; font-size: 1.1875rem; line-height: 1;
  letter-spacing: -0.01em;
  transition: font-size var(--dauer) var(--kurve);
}
.marke__ort { font-size: var(--t-eyebrow); color: var(--f-text-2); letter-spacing: 0.06em; text-transform: uppercase; }

.nav { display: none; }
@media (min-width: 56em) {
  .nav { display: flex; align-items: center; gap: var(--r-5); }
  .nav a { text-decoration: none; font-size: var(--t-meta); padding-block: var(--r-2); position: relative; }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px;
    background: var(--c-schnittkante);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dauer-mikro) var(--kurve);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

.kopf__tel { display: inline-flex; }
.kopf__tel .knopf { min-height: 2.75rem; padding-inline: var(--r-4); }
.kopf__tel .tel-text { display: none; }
@media (min-width: 56em) {
  .kopf__tel .knopf { min-height: 3rem; padding-inline: var(--r-5); }
  .kopf__tel .tel-text { display: inline; }
}

/* Anruf-Leiste, mobil, immer sichtbar */
.anrufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  background: var(--c-rasenschatten);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -1px 0 rgba(22, 33, 26, 0.18);
}
.anrufleiste a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--anrufleiste);
  color: var(--c-morgentau);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.anrufleiste a:active { background: color-mix(in oklab, var(--c-rasenschatten) 86%, black); }
@media (min-width: 56em) { .anrufleiste { display: none; } }
body { padding-bottom: calc(var(--anrufleiste) + env(safe-area-inset-bottom, 0)); }
@media (min-width: 56em) { body { padding-bottom: 0; } }

/* 8 — Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: var(--kopf-hoehe);
  --kante-oben: var(--f-grund);
}
.hero__bild {
  position: relative;
  overflow: hidden;
  background: var(--f-flaeche);
  /* Feste Hoehe statt Seitenverhaeltnis: haelt das Falz-Budget auf 375x667
     ein und verhindert Layout-Shift, weil die Hoehe nicht vom Bild kommt. */
  height: clamp(10rem, 30vh, 17rem);
}
.hero__bild picture { display: block; width: 100%; height: 100%; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__bild .parallax {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: var(--parallax-will, auto);
}

.hero__bild { margin-inline: calc(var(--rand) * -1); }
.hero__tafel {
  position: relative;
  background: var(--f-grund);
  margin-inline: calc(var(--rand) * -1);
  padding: var(--r-5) var(--rand) var(--r-6);
  margin-top: -1.75rem;
  border-radius: var(--radius);
}
.hero__tafel .tel-gross { margin-bottom: var(--r-5); }
.hero__tafel h1 { margin-bottom: var(--r-5); }
.hero__strich {
  width: 4.5rem; height: 2px;
  background: var(--c-schnittkante);
  margin-bottom: var(--r-4);
}
.hero__gebiet { font-size: var(--t-meta); color: var(--f-text-2); margin-bottom: var(--r-4); }
.hero__gebiet strong { color: var(--f-text); font-weight: 700; }
.hero__aktionen { display: flex; flex-direction: column; gap: var(--r-3); }

@media (min-width: 56em) {
  .hero { padding-top: 0; }
  .hero__gitter {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
    min-height: min(86vh, 44rem);
  }
  .hero__tafel {
    grid-column: 1; grid-row: 1;
    margin-inline: 0;
    margin-top: 0;
    padding: calc(var(--kopf-hoehe) + var(--r-6)) var(--r-6) var(--r-6) 0;
    background: none;
  }
  .hero__bild {
    grid-column: 2; grid-row: 1;
    margin-inline: 0;
    height: min(86vh, 44rem);
    border-radius: var(--radius);
  }
  .hero__tafel h1 { margin-bottom: var(--r-5); }
  .hero__aktionen { flex-direction: row; align-items: center; gap: var(--r-5); }
  .hero__bild--voll { margin-right: min(0px, calc((100vw - var(--breite-max)) / -2)); }
}
@media (min-width: 72em) {
  .hero__tafel { padding-right: var(--r-7); }
}

/* 9 — Bausteine --------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.75rem var(--r-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--c-rasenschatten);
  color: var(--c-morgentau);
  font-family: inherit; font-size: 1.0625rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dauer-mikro) var(--kurve),
              transform var(--dauer-mikro) var(--kurve);
}
.knopf:hover { background: color-mix(in oklab, var(--c-rasenschatten) 88%, black); }
.knopf:active { transform: translateY(1px); }
.knopf--linie {
  background: none;
  color: var(--f-text);
  border-color: var(--c-werkzeugstahl);
}
.knopf--linie:hover { background: none; border-color: var(--f-text); }
.sektion--dunkel .knopf--linie { color: var(--c-morgentau); border-color: color-mix(in oklab, var(--c-morgentau) 45%, transparent); }
.sektion--dunkel .knopf--linie:hover { border-color: var(--c-schnittkante); }
.knopf--breit { width: 100%; }
.knopf svg { flex: none; }

.textlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  white-space: nowrap;
  font-weight: 700; text-decoration: none;
  padding-block: var(--r-2);
}
.textlink span.pfeil {
  display: inline-block;
  transition: transform var(--dauer-mikro) var(--kurve);
}
.textlink:hover span.pfeil { transform: translateX(4px); }
.textlink u { text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

/* Leistungskacheln — Fotos, keine Icons. */
.kachel {
  display: flex; flex-direction: column;
  background: var(--f-grund);
  border: 1px solid var(--f-linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dauer-mikro) var(--kurve),
              border-color var(--dauer-mikro) var(--kurve);
}
.kachel__bild { overflow: hidden; background: var(--f-flaeche); }
.kachel__bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform var(--dauer) var(--kurve);
}
.kachel__text { padding: var(--r-5); display: flex; flex-direction: column; gap: var(--r-3); flex: 1; }
.kachel__text p { color: var(--f-text-2); }
.kachel__text .textlink { margin-top: auto; }
.kachel:hover { transform: translateY(-2px); border-color: var(--f-linie); }
.kachel:hover .kachel__bild img { transform: scale(1.024); }

/* Ablauf */
.ablauf { counter-reset: schritt; display: grid; gap: var(--r-6); }
@media (min-width: 45em) { .ablauf { grid-template-columns: repeat(3, 1fr); gap: var(--r-7); } }
.schritt { position: relative; padding-top: var(--r-5); border-top: 2px solid var(--f-linie); }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: block;
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 0;
  font-weight: 600; font-size: 2.5rem; line-height: 1;
  color: var(--c-feuchte-erde);
  margin-bottom: var(--r-3);
}
.schritt h3 { margin-bottom: var(--r-3); }
.schritt p { color: var(--f-text-2); }

/* Einsatzgebiet */
.gebiet { display: grid; gap: var(--r-6); align-items: start; }
@media (min-width: 52em) { .gebiet { grid-template-columns: 1fr 1.1fr; gap: var(--r-8); } }
.ortsliste {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-3);
}
.ortsliste li {
  font-size: var(--t-meta);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--f-linie);
  border-radius: var(--radius);
  background: var(--f-grund);
}
.ortsliste li.ist-sitz { border-color: var(--c-rasenschatten); font-weight: 700; }
.karte { width: 100%; height: auto; border-radius: var(--radius); background: var(--f-grund); border: 1px solid var(--f-linie-zart); }
.karte .flaeche { fill: color-mix(in oklab, var(--c-rasenschatten) 12%, transparent); stroke: var(--c-rasenschatten); stroke-width: 1.5; stroke-dasharray: 6 5; }
.karte .strasse { stroke: var(--f-linie); stroke-width: 1.5; fill: none; }
.karte .punkt { fill: var(--c-werkzeugstahl); }
.karte .punkt--sitz { fill: var(--c-feuchte-erde); }
/* Halo in der Kartenfarbe: die Beschriftung stanzt sich aus der
   gestrichelten Gebietslinie aus, statt darauf zu liegen. */
.karte text {
  font-family: var(--schrift-body); font-size: 11px; fill: var(--c-werkzeugstahl);
  paint-order: stroke; stroke: var(--f-grund); stroke-width: 3.5px; stroke-linejoin: round;
}
.karte text.ist-sitz { fill: var(--c-schnittgut); font-weight: 700; }

/* Vorher/Nachher — der orchestrierte Moment */
.wisch {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--f-flaeche);
  aspect-ratio: 3 / 2;
}
.wisch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wisch__fenster {
  position: absolute; inset: 0;
  overflow: hidden;
  transform: translate3d(calc((var(--wisch-p, 0) - 1) * 100%), 0, 0);
}
.wisch__innen {
  position: absolute; inset: 0;
  transform: translate3d(calc((1 - var(--wisch-p, 0)) * 100%), 0, 0);
}
.wisch__schnitt {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--wisch-p, 0) * 100%);
  width: 3px; margin-left: -1.5px;
  background: var(--c-schnittkante);
  opacity: var(--wisch-kante, 0);
  transition: opacity var(--dauer-mikro) linear;
}
.wisch__marke {
  position: absolute; z-index: 2; bottom: var(--r-4);
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: var(--radius);
  background: color-mix(in oklab, var(--c-schnittgut) 82%, transparent);
  color: var(--c-morgentau);
}
.wisch__marke--links { left: var(--r-4); }
.wisch__marke--rechts { right: var(--r-4); }

.zitat { display: grid; gap: var(--r-6); align-items: center; }
@media (min-width: 52em) { .zitat { grid-template-columns: 15rem 1fr; gap: var(--r-8); } }
.zitat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.zitat blockquote {
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 0;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.28;
  letter-spacing: -0.012em;
}
.zitat figcaption { margin-top: var(--r-5); font-size: var(--t-meta); color: var(--f-text-2); }

/* Kontaktblock */
.kontaktkarte {
  background: var(--f-grund);
  border: 1px solid var(--f-linie);
  border-radius: var(--radius);
  padding: var(--r-6) var(--r-5);
}
.sektion--dunkel .kontaktkarte {
  background: color-mix(in oklab, var(--c-schnittgut) 88%, var(--c-morgentau));
  border-color: color-mix(in oklab, var(--c-schnittgut) 74%, var(--c-morgentau));
}
.tel-gross {
  display: inline-block;
  font-family: var(--schrift-display);
  font-variation-settings: "WONK" 0;
  font-weight: 600;
  font-size: var(--t-tel);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border-bottom: 2px solid var(--c-schnittkante);
  padding-bottom: 0.1em;
}
.tel-gross:hover { border-bottom-width: 4px; }
.datenzeile { display: grid; gap: var(--r-1); margin-top: var(--r-5); font-size: var(--t-meta); }
.datenzeile dt { font-weight: 700; }
.datenzeile dd { margin: 0 0 var(--r-3); color: var(--f-text-2); }

/* 10 — Formular ---------------------------------------------------------- */
.formular { display: grid; gap: var(--r-5); }
@media (min-width: 40em) { .feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-5); } }

.feld { display: grid; gap: var(--r-2); }
.feld > label { font-weight: 700; font-size: var(--t-meta); }
 /* Hilfetext steht unter dem Feld: nur so fluchten zwei Felder nebeneinander,
    von denen eines einen Hinweis hat und das andere nicht. Fuer Screenreader
    bleibt die Zuordnung ueber aria-describedby erhalten. */
.feld .hilfe { font-size: var(--t-meta); color: var(--f-text-2); order: 4; }
.feld > label { order: 1; }
.feld input, .feld select, .feld textarea { order: 2; }
.feld .fehlertext { order: 3; }
.feldpaar > .feld { align-content: start; }

.feld input, .feld select, .feld textarea {
  font-family: inherit;
  font-size: 1.0625rem;   /* nicht kleiner: iOS zoomt sonst beim Fokus */
  line-height: 1.5;
  color: var(--f-text);
  background: var(--f-grund);
  border: 1px solid var(--c-werkzeugstahl);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  min-height: 3.25rem;
  width: 100%;
  transition: border-color var(--dauer-mikro) var(--kurve),
              box-shadow var(--dauer-mikro) var(--kurve);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235C645F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--c-rasenschatten);
  box-shadow: inset 0 0 0 1px var(--c-rasenschatten);
}
.feld--fehler input, .feld--fehler select, .feld--fehler textarea {
  border-color: var(--c-feuchte-erde);
  box-shadow: inset 0 0 0 1px var(--c-feuchte-erde);
}
.fehlertext {
  display: none;
  font-size: var(--t-meta);
  font-weight: 700;
  color: var(--c-feuchte-erde);
}
.feld--fehler .fehlertext { display: flex; gap: 0.4rem; align-items: baseline; }

.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: var(--r-3); align-items: start; }
.zustimmung input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--c-rasenschatten);
  flex: none;
}
.zustimmung label { font-size: var(--t-meta); line-height: 1.55; font-weight: 400; }
.zustimmung.feld--fehler .fehlertext { grid-column: 1 / -1; }

/* Honigtopf: für Menschen unsichtbar, für Bots ein Feld wie jedes andere.
   Kein display:none — manche Bots ignorieren das gezielt. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.meldung {
  border-left: 3px solid var(--c-rasenschatten);
  background: var(--f-flaeche);
  padding: var(--r-5);
  border-radius: var(--radius);
}
.meldung--fehler { border-left-color: var(--c-feuchte-erde); }
.meldung h2, .meldung h3 { margin-bottom: var(--r-3); }
[hidden] { display: none !important; }

/* 11 — Fuß --------------------------------------------------------------- */
.fuss {
  background: var(--c-schnittgut);
  color: var(--c-morgentau);
  --f-text-2: color-mix(in oklab, var(--c-morgentau) 66%, var(--c-schnittgut));
  --f-fokus: var(--c-schnittkante);
  padding-block: var(--r-7) var(--r-6);
  font-size: var(--t-meta);
}
.fuss__gitter { display: grid; gap: var(--r-6); }
@media (min-width: 45em) { .fuss__gitter { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--r-7); } }
.fuss h2 { font-size: 1.0625rem; font-family: var(--schrift-body); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--r-4); }
.fuss ul { list-style: none; padding: 0; display: grid; gap: var(--r-2); }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.fuss__unten {
  margin-top: var(--r-7);
  padding-top: var(--r-5);
  border-top: 1px solid color-mix(in oklab, var(--c-schnittgut) 76%, var(--c-morgentau));
  display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-5);
  color: var(--f-text-2);
}

/* Rechtstexte */
.rechtstext { max-width: var(--breite-text); }
.rechtstext h2 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); margin-top: var(--r-7); }
.rechtstext h3 { margin-top: var(--r-5); }
.rechtstext > * + * { margin-top: var(--r-4); }
.auszufuellen {
  background: color-mix(in oklab, var(--c-feuchte-erde) 10%, var(--f-grund));
  border-left: 3px solid var(--c-feuchte-erde);
  padding: var(--r-4) var(--r-5);
  border-radius: var(--radius);
  font-size: var(--t-meta);
}
.auszufuellen strong { display: block; margin-bottom: var(--r-2); }
code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--f-flaeche);
  padding: 0.12em 0.35em;
  border-radius: var(--radius);
}

/* 12 — Bewegung ---------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve);
  transition-delay: var(--verzug, 0ms);
}
[data-reveal].ist-sichtbar { opacity: 1; transform: none; }
.js-aus [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__bild .parallax { transform: none !important; }
  .kante__fenster, .kante__innen { transform: none !important; }
  .wisch__fenster, .wisch__innen { transform: none !important; }
  .wisch__schnitt { opacity: 1 !important; left: 50% !important; }
  .kachel:hover { transform: none; }
  .kachel:hover .kachel__bild img { transform: none; }
}

@media print {
  .kopf, .anrufleiste, [data-kante], .wisch__fenster { display: none !important; }
  body { padding: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}