@import url('../fonts/fonts.css');

/* ============================================================
   Grün und Rein GbR
   Konventioneller Aufbau, seriöse Anmutung.
   Niveau gemessen an etablierten Gebäudedienstleistern.
   ============================================================ */

:root {
  --gruen:        #157a3c;   /* Marke und Handlung, 5.4:1 gegen Weiß */
  --gruen-dunkel: #10331f;   /* Fußbereich, dunkle Flächen */
  --gruen-tief:   #0f5c2c;   /* Hover */
  --gruen-blass:  #dfece3;   /* ruhige Abschnittsflächen */
  --gruen-linie:  #c6ddce;

  --grund:        #f4f7f4;
  --grund-ruhig:  #dce8df;

  --text:         #17211c;
  --text-leise:   #505c55;
  --text-hell:    #eef3ef;

  --linie:        #e2e7e3;

  --schatten-s:   0 1px 2px rgba(23,33,28,.05), 0 4px 12px -4px rgba(23,33,28,.07);
  --schatten-m:   0 2px 6px rgba(23,33,28,.05), 0 18px 44px -16px rgba(23,33,28,.16);
  /* Aufklapptafeln sollen angesetzt wirken, nicht schweben:
     enger Radius, dafür bestimmter. */
  --schatten-klapp: 0 2px 5px rgba(23,33,28,.11);

  --radius:       14px;
  --radius-s:     10px;

  --rand:  clamp(1.15rem, 4vw, 2.5rem);
  --bahn:  min(1180px, 100% - var(--rand) * 2);

  --schrift: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Farbige Tiefe: ein feines Raster und Lichtschein aus den Ecken.
     Beides liegt als Hintergrundbild auf der Fläche, ohne zusätzliche
     Elemente. Die Deckung bleibt so gering, dass kein Kontrast leidet. */
  --schein-dunkel: radial-gradient(60% 52% at 6% -10%, rgba(64,190,110,.17), rgba(64,190,110,0) 62%),
                   radial-gradient(46% 44% at 102% 6%, rgba(233,120,56,.09), rgba(233,120,56,0) 64%),
                   radial-gradient(52% 50% at 88% 110%, rgba(44,150,84,.13), rgba(44,150,84,0) 64%);
  --schein-mass: auto, auto, auto;

  /* Trennkante mit Lichtpunkt in der Mitte */
  --kante: linear-gradient(90deg, rgba(21,122,60,0), rgba(21,122,60,.42) 50%, rgba(21,122,60,0));

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-variation-settings: 'wght' 400;
  font-size: 1.0625rem;              /* 17px, wie bei den Vorbildern */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--gruen); color: #fff; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.sprung {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 100; background: var(--gruen); color: #fff;
  padding: .8rem 1.5rem; text-decoration: none; border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-variation-settings: 'wght' 600;
}
.sprung:focus { translate: -50% 0; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  font-variation-settings: 'wght' 700;
  line-height: 1.18;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 1.45rem + 1.9vw, 2.75rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); line-height: 1.3; }

p { margin: 0 0 1rem; }
.fliess { max-width: 60ch; text-wrap: pretty; }
.leise  { color: var(--text-leise); }

a { color: var(--gruen); text-underline-offset: 3px; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .97rem; font-variation-settings: 'wght' 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }

.knopf--voll { background: var(--gruen); color: #fff; box-shadow: var(--schatten-s); }
.knopf--voll:hover { background: var(--gruen-tief); }

.knopf--rand { background: #fff; color: var(--text); border-color: var(--linie); box-shadow: var(--schatten-s); }
.knopf--rand:hover { border-color: var(--gruen); color: var(--gruen); }

.knopf--hell { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.38); }
.knopf--hell:hover { background: rgba(255,255,255,.24); }

.knopf--klein { padding: .6rem 1.1rem; font-size: .9rem; }

/* ---------- Kopfleiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf__reihe {
  width: var(--bahn); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.5rem;
}
.kopf__logo { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.kopf__logo img { height: 2.5rem; width: auto; }

.kopf__nav { display: flex; align-items: center; gap: .35rem; }
.kopf__nav a {
  color: var(--text); text-decoration: none;
  font-size: .95rem; font-variation-settings: 'wght' 500;
  padding: .5rem .8rem; border-radius: var(--radius-s);
}
.kopf__nav a:hover { background: var(--gruen-blass); color: var(--gruen-tief); }
.kopf__nav a[aria-current="page"] { color: var(--gruen); font-variation-settings: 'wght' 600; }

.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text); text-decoration: none;
  font-size: .97rem; font-variation-settings: 'wght' 600;
  padding: .5rem .5rem;
}
.kopf__tel svg { width: 1.1em; height: 1.1em; color: var(--gruen); }
.kopf__tel:hover { color: var(--gruen); }

@media (max-width: 560px)  { .kopf__tel span { display: none; } }

/* ---------- Abschnitte ---------- */

.block { padding: clamp(3.25rem, 6vw, 5.5rem) 0; }
.block--ruhig { background: var(--grund-ruhig); }
.block--blass { background: var(--gruen-blass); }
.block--dunkel { background: var(--gruen-dunkel); color: var(--text-hell); }
.block--dunkel h2, .block--dunkel h3 { color: #fff; }
.block--dunkel .leise { color: rgba(238,243,239,.82); }

.bahn { width: var(--bahn); margin-inline: auto; }

.block__kopf { max-width: 60ch; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.block__kopf p { margin-top: .85rem; margin-bottom: 0; }
.block__kopf--mitte { margin-inline: auto; text-align: center; }

/* ---------- Titelbereich ---------- */

.titel {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--linie);
}
.titel__gitter {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 900px) { .titel__gitter { grid-template-columns: 1fr; } }

.titel h1 span { color: var(--gruen); }
.titel__text { font-size: 1.15rem; color: var(--text-leise); margin: 1.15rem 0 1.85rem; max-width: 52ch; }
.titel__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }

.titel__bild {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten-m);
  aspect-ratio: 4 / 3;
}
.titel__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vertrauensleiste ---------- */

.merkmale {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.merkmal { display: flex; gap: .85rem; align-items: flex-start; }
.merkmal__icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--gruen-blass); color: var(--gruen);
  display: grid; place-items: center;
}
.merkmal__icon svg { width: 1.3rem; height: 1.3rem; }
.merkmal h3 { font-size: 1rem; margin-bottom: .2rem; }
.merkmal p { font-size: .95rem; color: var(--text-leise); margin: 0; }

/* ---------- Karten ---------- */

.karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
}

.karte {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--schatten-s);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.karte:hover {
  box-shadow: var(--schatten-m); border-color: var(--gruen-linie);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { a.karte:hover { transform: none; } }

.karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--gruen-blass); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.karte__inhalt { padding: clamp(1.15rem, 2vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.karte__inhalt h3 { margin-bottom: .5rem; }
.karte__inhalt p { color: var(--text-leise); font-size: .97rem; margin-bottom: 1rem; }

.karte__liste { margin: 0 0 1.15rem; padding: 0; list-style: none; font-size: .95rem; }
.karte__liste li { display: flex; gap: .5rem; padding: .18rem 0; color: var(--text-leise); }
.karte__liste svg { width: 1.05em; height: 1.05em; color: var(--gruen); flex: none; margin-top: .32em; }

.karte__mehr {
  margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  color: var(--gruen); font-variation-settings: 'wght' 600; font-size: .95rem;
}
.karte__mehr svg { width: 1em; height: 1em; transition: translate .16s ease; }
a.karte:hover .karte__mehr svg { translate: 3px 0; }

/* ---------- Ablauf ---------- */

.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.schritt { position: relative; padding-top: 3.4rem; }
.schritt__nr {
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--gruen); color: #fff;
  display: grid; place-items: center;
  font-variation-settings: 'wght' 700; font-size: 1.05rem;
}
.schritt h3 { margin-bottom: .45rem; }
.schritt p { color: var(--text-leise); margin: 0; font-size: .97rem; }

/* ---------- Leistungsdetail ---------- */

.punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(1.1rem, 2vw, 1.75rem); }
.punkt {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.5rem);
}
.block--ruhig .punkt, .block--blass .punkt { background: #fff; }
.punkt h3 { margin-bottom: .5rem; }
.punkt p { color: var(--text-leise); font-size: .97rem; margin: 0; }

/* ---------- Einsatzgebiete ---------- */

.orte { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.orte li {
  padding: .45rem .95rem; border: 1px solid var(--gruen-linie); border-radius: 999px;
  background: #fff; font-size: .93rem; color: var(--text-leise);
}

/* ---------- Notariate ---------- */

.hinweisfeld {
  background: #fff; border: 1px solid var(--gruen-linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  box-shadow: var(--schatten-s);
}
@media (max-width: 800px) { .hinweisfeld { grid-template-columns: 1fr; } }
.hinweisfeld p:last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */

.anfrage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
@media (max-width: 920px) { .anfrage { grid-template-columns: 1fr; } }

.formular {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.25rem); box-shadow: var(--schatten-s);
}

.feldgruppe { border: 0; padding: 0; margin: 0 0 1.5rem; }
.feldgruppe legend { padding: 0; margin-bottom: .7rem; font-variation-settings: 'wght' 600; font-size: .97rem; }

.wahlfeld { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .5rem; }
.wahl {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: #fff; cursor: pointer;
  font-size: .95rem;
  transition: border-color .14s ease, background-color .14s ease;
}
.wahl:hover { border-color: var(--gruen-linie); background: var(--gruen-blass); }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl__kasten {
  flex: none; width: 1.2rem; height: 1.2rem; margin-top: .12rem;
  border: 1.5px solid #b6c1ba; border-radius: 5px; background: #fff;
  display: grid; place-items: center;
}
.wahl__kasten .sym { width: .85rem; height: .85rem; color: #fff; opacity: 0; }
.wahl input:checked + .wahl__kasten { background: var(--gruen); border-color: var(--gruen); }
.wahl input:checked + .wahl__kasten .sym { opacity: 1; color: #fff; }
.wahl:has(input:checked) { border-color: var(--gruen); background: var(--gruen-blass); }
.wahl input:focus-visible + .wahl__kasten { outline: 3px solid var(--gruen); outline-offset: 2px; }

.feld { display: block; margin-bottom: 1.1rem; }
.feld > span { display: block; margin-bottom: .35rem; font-size: .95rem; font-variation-settings: 'wght' 600; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .72rem .9rem;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: #fff; color: var(--text);
  caret-color: var(--gruen);
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld input::placeholder, .feld textarea::placeholder { color: #8a948d; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gruen); }
.feld__paar { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 520px) { .feld__paar { grid-template-columns: 1fr; } }

/* Zusammenfassung neben dem Formular */
.zusammenfassung {
  position: sticky; top: 6rem;
  background: var(--gruen-blass); border: 1px solid var(--gruen-linie);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (max-width: 920px) { .zusammenfassung { position: static; } }
.zusammenfassung h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.zusammenfassung ul {
  margin: 0 0 1.25rem; padding: 0; list-style: none;
  font-size: .95rem; min-height: 4.5rem;
}
.zusammenfassung li { display: flex; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--gruen-linie); }
.zusammenfassung li:last-child { border-bottom: 0; }
.zusammenfassung li svg { width: 1em; height: 1em; color: var(--gruen); flex: none; margin-top: .35em; }
.zusammenfassung .leer { color: var(--text-leise); }
.zusammenfassung .knopf { width: 100%; margin-bottom: .55rem; }
.zusammenfassung__hinweis { font-size: .86rem; color: var(--text-leise); margin: .85rem 0 0; }

/* ---------- Fragen ---------- */

.frage { border-bottom: 1px solid var(--linie); }
.frage__text { max-width: 62ch; text-wrap: pretty; }
.frage summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.15rem 3rem 1.15rem 0;
  font-variation-settings: 'wght' 600; font-size: 1.05rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: .65rem; top: 50%; translate: 0 -50%;
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen);
  rotate: 45deg; transition: rotate .18s ease;
}
.frage[open] summary::after { rotate: -135deg; }
.frage summary:hover { color: var(--gruen); }
.frage__text { padding: 0 2.5rem 1.35rem 0; margin: 0; color: var(--text-leise); max-width: 74ch; }

/* ---------- Fuß ---------- */

.fuss { background: var(--gruen-dunkel); color: var(--text-hell); padding: clamp(3rem, 5vw, 4.5rem) 0 1.75rem; }
.fuss a { color: rgba(238,243,239,.86); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss h3 { font-size: .95rem; color: #fff; margin-bottom: .9rem; letter-spacing: .01em; }

.fuss__gitter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 2.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(238,243,239,.18);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .95rem; }
.fuss address { font-style: normal; font-size: .95rem; line-height: 1.7; color: rgba(238,243,239,.86); }
.fuss__logo { height: 2.6rem; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .95; }
.fuss__schluss {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .88rem; color: rgba(238,243,239,.62);
}
.fuss__schluss p { margin: 0; }

/* ---------- Rechtsdokumente ---------- */

.dokument { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.dokument__bahn { width: min(46rem, 100% - var(--rand) * 2); margin-inline: auto; }
.dokument h2 {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  margin: 2.5rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--linie);
}
.dokument h3 { margin: 1.6rem 0 .45rem; font-size: 1.05rem; }
.dokument p, .dokument li { color: var(--text-leise); max-width: 70ch; }
.dokument ul { padding-left: 1.2rem; }
.dokument li { margin-bottom: .3rem; }
.dokument address { font-style: normal; }

.merker {
  background: #fff8e6; border: 1px solid #e3c87d;
  border-radius: var(--radius-s); padding: 1.15rem 1.35rem; margin: 1.5rem 0;
}
.merker p { color: #5c4611; margin: .4rem 0 0; }
.merker strong { color: #3d2f08; }
.merker__titel {
  display: flex; align-items: center; gap: .5rem;
  color: #3d2f08; margin: 0 0 .15rem;
  font-size: .97rem; font-variation-settings: 'wght' 700;
}
.merker__titel .sym { width: 1.1rem; height: 1.1rem; color: #b07d0a; }

/* ============================================================
   Erweiterungen: Vertrauen, Symbolauswahl, Bewegung
   ============================================================ */

/* ---------- Symbolvorrat ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sym { width: 1em; height: 1em; flex: none; }

/* ---------- Vertrauen: die Inhaber ---------- */

.inhaber {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 880px) { .inhaber { grid-template-columns: 1fr; } }

.inhaber__bild {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-m);
  aspect-ratio: 5 / 4;
}
.inhaber__bild img { width: 100%; height: 100%; object-fit: cover; }

.inhaber__namen {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.35rem 0 0; padding: 0; list-style: none;
}
.inhaber__namen li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem .5rem .55rem;
  background: #fff; border: 1px solid var(--gruen-linie); border-radius: 999px;
  font-size: .95rem; font-variation-settings: 'wght' 600;
}
.inhaber__initial {
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--gruen); color: #fff;
  display: grid; place-items: center;
  font-size: .82rem; font-variation-settings: 'wght' 700;
}

/* ---------- Vertrauensbelege ---------- */

.belege { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.beleg {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.15rem, 2vw, 1.5rem);
  box-shadow: var(--schatten-s);
}
.beleg__kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.beleg__icon {
  width: 2.2rem; height: 2.2rem; border-radius: var(--radius-s); flex: none;
  background: var(--gruen-blass); color: var(--gruen);
  display: grid; place-items: center;
}
.beleg__icon .sym { width: 1.25rem; height: 1.25rem; }
.beleg h3 { font-size: 1rem; }
.beleg p { color: var(--text-leise); font-size: .95rem; margin: 0; }

/* ---------- Symbolauswahl im Formular ---------- */

.objekte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .55rem; }
.objekt {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .95rem .6rem;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: #fff; cursor: pointer; text-align: center;
  font-size: .9rem; line-height: 1.3;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.objekt:hover { border-color: var(--gruen-linie); background: var(--gruen-blass); }
.objekt input { position: absolute; opacity: 0; width: 0; height: 0; }
.objekt .sym { width: 1.6rem; height: 1.6rem; color: var(--text-leise); transition: color .14s ease; }
.objekt:has(input:checked) { border-color: var(--gruen); background: var(--gruen-blass); font-variation-settings: 'wght' 600; }
.objekt:has(input:checked) .sym { color: var(--gruen); }
.objekt:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Leistungswahl mit Symbol */
.wahl > .sym { width: 1.15rem; height: 1.15rem; color: var(--text-leise); margin-top: .12rem; }
.wahl:has(input:checked) > .sym { color: var(--gruen); }

/* ---------- Fortschritt im Anfragebogen ---------- */

.fortschritt { margin-bottom: 1.35rem; }
.fortschritt__schiene {
  height: 6px; border-radius: 999px; background: var(--linie); overflow: hidden;
}
.fortschritt__balken {
  height: 100%; width: 100%; border-radius: 999px;
  background: var(--gruen);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { .fortschritt__balken { transition: none; } }
.fortschritt p { margin: .55rem 0 0; font-size: .88rem; color: var(--text-leise); }

/* ---------- Mobiler Handlungsbalken ---------- */

.handleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: .5rem;
  padding: .6rem calc(.6rem + env(safe-area-inset-left, 0px))
           calc(.6rem + env(safe-area-inset-bottom, 0px)) calc(.6rem + env(safe-area-inset-right, 0px));
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(150%) blur(10px);
  border-top: 1px solid var(--linie);
  translate: 0 110%;
  transition: translate .26s cubic-bezier(.22,.7,.3,1);
}
.handleiste.sichtbar { translate: 0 0; }
.handleiste .knopf { flex: 1; padding: .8rem .6rem; font-size: .93rem; }
@media (max-width: 760px) { .handleiste { display: flex; } body { padding-bottom: 4.6rem; } }
@media (prefers-reduced-motion: reduce) { .handleiste { transition: none; } }

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Ausgangszustand ist sichtbar: ohne JS bleibt alles lesbar */
  .js .steigt {
    opacity: 1;
    translate: 0 12px;
    filter: blur(1px);
  }
  .js .steigt.da {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition: translate .55s cubic-bezier(.16,.84,.3,1), filter .35s ease-out;
  }
  /* gestaffelt, damit die Karten als Reihe lesen statt als Blockeinblendung */
  .js .steigt.da:nth-child(2) { transition-delay: .07s; }
  .js .steigt.da:nth-child(3) { transition-delay: .14s; }
  .js .steigt.da:nth-child(4) { transition-delay: .21s; }

  .titel__bild img { transition: scale .7s cubic-bezier(.16,.84,.3,1); }
  .titel:hover .titel__bild img { scale: 1.02; }

  .karte__bild img { transition: scale .55s cubic-bezier(.16,.84,.3,1); }
  a.karte:hover .karte__bild img { scale: 1.045; }

  .merkmal__icon, .beleg__icon { transition: scale .2s cubic-bezier(.2,1.1,.4,1); }
  .merkmal:hover .merkmal__icon, .beleg:hover .beleg__icon { scale: 1.08; }
}

/* ---------- Ortsliste erweitert ---------- */

.gebiet { margin-bottom: 1.9rem; }
.gebiet:last-of-type { margin-bottom: 1.25rem; }
.gebiet h3 {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.02rem; margin-bottom: .8rem;
}
.gebiet h3 .sym { width: 1.15rem; height: 1.15rem; color: var(--gruen); }

/* ============================================================
   Auszeichnungen, Zusagen, Galerie, Abschluss
   ============================================================ */

/* ---------- Pillen und Marken ---------- */

.pille {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .82rem; font-variation-settings: 'wght' 600;
  line-height: 1.4; white-space: nowrap;
}
.pille .sym { width: .95rem; height: .95rem; }

.pille--gruen  { background: var(--gruen-blass); color: var(--gruen-tief); }
.pille--voll   { background: var(--gruen); color: #fff; }
.pille--hell   { background: rgba(255,255,255,.16); color: #fff; }

.pillen { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ---------- Zusagestreifen ---------- */

.zusagen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr));
  gap: 1px; background: var(--gruen-linie);
  border: 1px solid var(--gruen-linie); border-radius: var(--radius);
  overflow: hidden; margin-top: 1.9rem;
}
.zusage {
  background: #fff; padding: 1.05rem 1.15rem;
  display: flex; gap: .7rem; align-items: flex-start;
}
.zusage__icon {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--gruen); color: #fff;
  display: grid; place-items: center;
}
.zusage__icon .sym { width: 1rem; height: 1rem; color: #fff; }
.zusage b { display: block; font-size: .95rem; font-variation-settings: 'wght' 700; }
.zusage > div span { display: block; font-size: .86rem; color: var(--text-leise); margin-top: .1rem; }

/* ---------- Vorteile ---------- */

.vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: clamp(1.1rem, 2vw, 1.75rem); }
.vorteil {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.5vw, 1.85rem);
  box-shadow: var(--schatten-s);
}
.vorteil__zahl {
  position: absolute; top: -.6rem; right: .55rem;
  font-size: 4.5rem; line-height: 1;
  font-variation-settings: 'wght' 800;
  color: var(--gruen-blass);
  pointer-events: none; user-select: none;
}
.vorteil h3 { margin-bottom: .55rem; position: relative; }
.vorteil p { color: var(--text-leise); font-size: .97rem; margin: 0; position: relative; }

/* ---------- Ablauf als Strecke ---------- */

.strecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: clamp(1.1rem, 2vw, 1.6rem); }
.etappe { position: relative; padding-top: 3.5rem; display: flex; flex-direction: column; }
.etappe::before {
  content: ''; position: absolute; top: 1.3rem; left: 3.1rem; right: -1.2rem;
  height: 2px; background: var(--gruen-linie);
}
.etappe:last-child::before { display: none; }
@media (max-width: 700px) { .etappe::before { display: none; } }
.etappe__nr {
  position: absolute; top: 0; left: 0;
  width: 2.65rem; height: 2.65rem; border-radius: 50%;
  background: var(--gruen); color: #fff;
  display: grid; place-items: center;
  font-variation-settings: 'wght' 700; font-size: 1.02rem;
  box-shadow: 0 0 0 5px var(--grund);
}
.etappe h3 { margin-bottom: .4rem; }
.etappe p { color: var(--text-leise); font-size: .95rem; margin: 0 0 .85rem; }
.etappe .pille { align-self: flex-start; margin-top: auto; }
.block--ruhig .etappe__nr { box-shadow: 0 0 0 5px var(--grund-ruhig); }
.block--blass .etappe__nr { box-shadow: 0 0 0 5px var(--gruen-blass); }

/* ---------- Galerie ---------- */

.galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(.8rem, 1.6vw, 1.15rem);
}
.galerie figure {
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--linie); background: #fff;
  box-shadow: var(--schatten-s);
}
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie figcaption {
  padding: .7rem .9rem; font-size: .88rem; color: var(--text-leise);
  display: flex; align-items: center; gap: .45rem;
}
.galerie figcaption .sym { width: .95rem; height: .95rem; color: var(--gruen); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .galerie img { transition: scale .6s cubic-bezier(.16,.84,.3,1); }
  .galerie figure:hover img { scale: 1.05; }
}

/* ---------- Bewertungsstelle ---------- */

.bewertung {
  border: 1px dashed var(--gruen-linie); border-radius: var(--radius);
  background: var(--gruen-blass); padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
}
.bewertung p { color: var(--text-leise); max-width: 56ch; margin-inline: auto; }
.bewertung p:last-child { margin-bottom: 0; }

/* ---------- Abschlussblock ---------- */

.abschluss {
  background: var(--gruen-dunkel); color: var(--text-hell);
  border-radius: var(--radius);
  padding: clamp(1.9rem, 4.5vw, 3.25rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center;
}
@media (max-width: 820px) { .abschluss { grid-template-columns: 1fr; } }
.abschluss h2 { color: #fff; margin-bottom: .75rem; }
.abschluss p { color: rgba(238,243,239,.86); margin-bottom: 0; }
.abschluss__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }
.abschluss__knoepfe .knopf--voll { background: #fff; color: var(--gruen-dunkel); }
.abschluss__knoepfe .knopf--voll:hover { background: var(--gruen-blass); }

/* ---------- Auszeichnung auf Karten ---------- */

.karte { position: relative; }
.karte__marke {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  color: var(--gruen-tief);
  box-shadow: var(--schatten-s);
}
.karte__fuss {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding-top: .9rem; margin-top: .9rem;
  border-top: 1px solid var(--linie);
}

/* ============================================================
   Bildkarten: Bild trägt die Karte, Text liegt darauf
   ============================================================ */

:root { --radius-karte: 16px; }

.bildkarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.bildkarte {
  position: relative; display: block;
  border-radius: var(--radius-karte);
  overflow: hidden;
  min-height: 31rem;
  text-decoration: none; color: #fff;
  border: 1px solid var(--linie);
  background: var(--gruen-dunkel);
  isolation: isolate;
}

.bildkarte__bild {
  position: absolute; inset: 0; z-index: 0;
}
.bildkarte__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Schleier: unten dicht, oben klar, damit das Motiv sichtbar bleibt */
.bildkarte__schleier {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(8, 26, 15, .95) 0%,
    rgba(8, 26, 15, .90) 30%,
    rgba(8, 26, 15, .70) 46%,
    rgba(8, 26, 15, .34) 60%,
    rgba(8, 26, 15, .10) 78%,
    rgba(8, 26, 15, 0) 100%);
}

.bildkarte__inhalt {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  min-height: 31rem;
}
.bildkarte__inhalt h3 { color: #fff; font-size: 1.42rem; margin-bottom: .45rem; }
.bildkarte__inhalt > p { color: rgba(255,255,255,.88); font-size: .97rem; margin: 0 0 1rem; }

.bildkarte__marke {
  position: absolute; top: clamp(1rem, 2vw, 1.25rem); left: clamp(1rem, 2vw, 1.25rem);
  z-index: 3;
  background: rgba(255,255,255,.94);
  color: var(--gruen-tief);
  backdrop-filter: blur(6px);
}

.bildkarte__liste { list-style: none; margin: 0 0 1.15rem; padding: 0; font-size: .94rem; }
.bildkarte__liste li {
  display: flex; gap: .5rem; padding: .2rem 0;
  color: rgba(255,255,255,.9);
}
.bildkarte__liste .sym { width: 1.05em; height: 1.05em; color: #9fdcb4; flex: none; margin-top: .3em; }

.bildkarte__mehr {
  display: inline-flex; align-items: center; gap: .45rem;
  font-variation-settings: 'wght' 600; font-size: .97rem;
  color: #fff;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.22);
}
.bildkarte__mehr .sym { width: 1.05em; height: 1.05em; }

@media (prefers-reduced-motion: no-preference) {
  .bildkarte__bild img { transition: scale .65s cubic-bezier(.16,.84,.3,1); }
  .bildkarte__schleier { transition: opacity .35s ease; }
  .bildkarte__mehr .sym { transition: translate .22s cubic-bezier(.2,.8,.3,1); }
  .bildkarte:hover .bildkarte__bild img,
  .bildkarte:focus-visible .bildkarte__bild img { scale: 1.06; }
  .bildkarte:hover .bildkarte__mehr .sym { translate: 4px 0; }
}
.bildkarte:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* Karten und Radien auf das Maß der Referenzklasse bringen */
.karte, .punkt, .beleg, .vorteil, .formular, .zusammenfassung,
.galerie figure, .abschluss, .titel__bild, .inhaber__bild {
  border-radius: var(--radius-karte);
}

/* ============================================================
   Einsatzgebietskarte — selbst gezeichnet, keine fremden Kartendaten
   ============================================================ */

.kartenfeld {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: clamp(.9rem, 2vw, 1.5rem);
  box-shadow: var(--schatten-s);
  margin-bottom: 1.9rem;
}

.karte { display: block; width: 100%; height: auto; }

.k-achse {
  stroke: var(--gruen); stroke-width: 1.4;
  stroke-dasharray: 5 6; opacity: .45;
}

.k-sitz  { fill: var(--gruen); stroke: #fff; stroke-width: 3; }
.k-gross { fill: var(--gruen-tief); stroke: #fff; stroke-width: 2.5; }
.k-ort   { fill: #8fbba1; }

.k-puls { fill: none; stroke: var(--gruen); stroke-width: 1.6; opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  .k-puls { transform-origin: center; transform-box: fill-box; animation: puls 3.4s ease-out infinite; }
  @keyframes puls {
    0%   { scale: .55; opacity: .55; }
    70%  { scale: 1.25; opacity: 0; }
    100% { scale: 1.25; opacity: 0; }
  }
}

.k-nam {
  font-family: var(--schrift); font-size: 12px;
  fill: var(--text-leise);
}
.k-nam--sitz  { font-size: 19px; font-weight: 700; fill: var(--gruen-tief); }
.k-nam--gross { font-size: 15px; font-weight: 600; fill: var(--text); }

.karten-legende {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin-top: .85rem; padding-top: .9rem;
  border-top: 1px solid var(--linie);
  font-size: .88rem; color: var(--text-leise);
}
.karten-legende span { display: inline-flex; align-items: center; gap: .45rem; }
.karten-legende i { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.karten-legende .l-sitz  { background: var(--gruen); }
.karten-legende .l-gross { background: var(--gruen-tief); }
.karten-legende .l-ort   { background: #8fbba1; }

@media (max-width: 620px) {
  .k-nam { font-size: 15px; }
  .k-nam--sitz { font-size: 23px; }
  .k-nam--gross { font-size: 19px; }
}

/* Einsatzflächen: Hülle um die Orte, keine amtlichen Kreisgrenzen */
.k-flaeche { stroke: var(--gruen); stroke-width: 1.6; stroke-linejoin: round; }
.k-flaeche--enz { fill: url(#f-enz); stroke-opacity: .55; }
.k-flaeche--ka  { fill: url(#f-ka);  stroke-opacity: .32; stroke-dasharray: 7 5; }

.k-gebiet {
  font-family: var(--schrift); font-size: 13px;
  font-weight: 600; letter-spacing: .04em;
  fill: var(--gruen-tief); fill-opacity: .72;
  text-transform: uppercase;
}
@media (max-width: 620px) { .k-gebiet { font-size: 17px; } }

/* ---------- Echte Kartenansicht auf Zuruf ---------- */

.karte-schalter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
  padding-top: 1rem; margin-top: 1rem;
  border-top: 1px solid var(--linie);
}
.karte-schalter p {
  margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 52ch;
}
.karte-schalter .knopf { flex: none; }

#karte-echt {
  height: clamp(20rem, 48vw, 30rem);
  border-radius: var(--radius-karte);
  overflow: hidden;
  background: var(--gruen-blass);
}
#karte-echt:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Beschriftung der beiden Schwerpunkte in der echten Karte */
.leaflet-tooltip.karte-schild {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--gruen-linie);
  border-radius: 999px;
  box-shadow: var(--schatten-s);
  color: var(--gruen-tief);
  font-family: var(--schrift);
  font-size: .82rem;
  font-variation-settings: 'wght' 700;
  padding: .2rem .7rem;
}
.leaflet-tooltip.karte-schild::before { display: none; }
.leaflet-container { font-family: var(--schrift); }
.leaflet-popup-content { font-size: .93rem; line-height: 1.5; }

.karte-fehler {
  margin: .85rem 0 0; padding: .8rem 1rem;
  background: #fff8e6; border: 1px solid #e3c87d; border-radius: var(--radius-s);
  color: #5c4611; font-size: .9rem;
}

/* ============================================================
   Anfrageformular mit Leistungsauswahl
   ============================================================ */

.schritt-feld { margin-bottom: 1.75rem; }

.feld__gross {
  display: block;
  font-size: 1.05rem;
  font-variation-settings: 'wght' 700;
  margin-bottom: .6rem;
  color: var(--text);
}
fieldset > legend.feld__gross { padding: 0; margin-bottom: .7rem; }

.feld__hilfe {
  margin: .5rem 0 0;
  font-size: .88rem;
  color: var(--text-leise);
}

#f-leistung {
  width: 100%; font: inherit; font-size: 1.02rem;
  padding: .85rem .95rem;
  border: 1.5px solid var(--gruen-linie); border-radius: var(--radius-s);
  background: #fff; color: var(--text);
  font-variation-settings: 'wght' 600;
}
#f-leistung:focus { border-color: var(--gruen); }
#f-leistung optgroup { font-variation-settings: 'wght' 700; color: var(--gruen-tief); }
#f-leistung option { font-variation-settings: 'wght' 400; color: var(--text); }

/* Detailfelder je Leistung */
.detailfelder {
  background: var(--gruen-blass);
  border: 1px solid var(--gruen-linie);
  border-radius: var(--radius-s);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  margin-bottom: 1.75rem;
}
.detailfelder__titel {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem;
  font-size: .97rem; font-variation-settings: 'wght' 700;
  color: var(--gruen-tief);
}
.detailfelder__titel .sym { width: 1.15rem; height: 1.15rem; }
.detailfelder .feld > span,
.detailfelder legend { font-size: .93rem; }
.detailfelder .feld:last-child,
.detailfelder .feldgruppe:last-child { margin-bottom: 0; }
.detailfelder .feld input,
.detailfelder .feld select { background: #fff; }

/* Zahlenfeld mit Einheit */
.feld__eingabe { position: relative; display: block; }
.feld--zahl .feld__eingabe input { padding-right: 3.4rem; }
.feld__einheit {
  position: absolute; right: .9rem; top: 50%; translate: 0 -50%;
  font-size: .9rem; color: var(--text-leise); pointer-events: none;
}
/* Pfeilchen der Zahlenfelder ausblenden, die Einheit steht dort */
.feld--zahl input::-webkit-outer-spin-button,
.feld--zahl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.feld--zahl input[type=number] { -moz-appearance: textfield; }

.feldgruppe--eng { margin-bottom: 1.1rem; }
.wahlfeld--eng { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.wahlfeld--eng .wahl { padding: .55rem .7rem; font-size: .92rem; }

/* Wenn JavaScript läuft, blenden wir die nicht gewählten Gruppen weich ein */
@media (prefers-reduced-motion: no-preference) {
  .js .detailfelder { animation: feldEin .28s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes feldEin {
    from { opacity: 0; translate: 0 -6px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ============================================================
   Kopfzeile: Aufklappmenüs zu den Leistungsseiten
   ============================================================ */

.menue { position: relative; display: flex; align-items: center; }

.menue__kopf {
  color: var(--text); text-decoration: none;
  font-size: .95rem; font-variation-settings: 'wght' 500;
  padding: .5rem .35rem .5rem .8rem; border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.menue__schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 2rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-leise);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.menue__schalter .sym { width: .95rem; height: .95rem; transition: rotate .18s ease; }
.menue__schalter[aria-expanded="true"] .sym { rotate: 180deg; }

.menue:hover .menue__kopf,
.menue:focus-within .menue__kopf,
.menue:hover .menue__schalter,
.menue:focus-within .menue__schalter { background: var(--gruen-blass); color: var(--gruen-tief); }
.menue__kopf[aria-current="page"] { color: var(--gruen); font-variation-settings: 'wght' 600; }

.menue__klapp {
  position: absolute; top: calc(100% + .45rem); left: 0; z-index: 60;
  min-width: 17rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-klapp);
  padding: .45rem;
  display: none;
}
.menue:hover .menue__klapp,
.menue:focus-within .menue__klapp,
.menue__schalter[aria-expanded="true"] + .menue__klapp { display: block; }

.menue__klapp a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: var(--radius-s);
  color: var(--text); text-decoration: none;
  font-size: .94rem; font-variation-settings: 'wght' 500;
  white-space: nowrap;
}
.menue__klapp a:hover { background: var(--gruen-blass); color: var(--gruen-tief); }
.menue__klapp a[aria-current="page"] { background: var(--gruen-blass); color: var(--gruen); font-variation-settings: 'wght' 600; }
.menue__klapp .sym { width: 1.1rem; height: 1.1rem; color: var(--gruen); flex: none; }

.menue__uebersicht {
  font-variation-settings: 'wght' 700 !important;
  border-bottom: 1px solid var(--linie);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  margin-bottom: .3rem; padding-bottom: .7rem !important;
}

@media (prefers-reduced-motion: no-preference) {
  .menue__klapp { animation: klappAuf .16s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes klappAuf {
    from { opacity: 0; translate: 0 -5px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* ============================================================
   Anfrageformular in Stufen
   ============================================================ */

.stufe { position: relative; padding-bottom: 1.9rem; }
.stufe:last-child { padding-bottom: 0; }

/* Verbindungslinie zwischen den Nummernkreisen */
.stufe::before {
  content: ''; position: absolute;
  left: 1.1rem; top: 2.6rem; bottom: .55rem;
  width: 2px; background: var(--linie);
}
.stufe:last-child::before { display: none; }

.stufe__kopf {
  display: flex; align-items: flex-start; gap: .9rem;
  margin-bottom: 1.1rem;
}
.stufe__nr {
  position: relative; z-index: 1; flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: #fff; color: var(--text-leise);
  border: 2px solid var(--linie);
  display: grid; place-items: center;
  font-variation-settings: 'wght' 700; font-size: .95rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.stufe__titel { font-size: 1.08rem; margin: .12rem 0 .2rem; }
.stufe__text { margin: 0; font-size: .92rem; color: var(--text-leise); max-width: 58ch; }
.stufe__inhalt { padding-left: 3.1rem; }
@media (max-width: 560px) {
  .stufe::before { display: none; }
  .stufe__inhalt { padding-left: 0; }
}

/* Die Stufe, in der gerade gearbeitet wird */
.stufe:focus-within .stufe__nr {
  background: var(--gruen); border-color: var(--gruen); color: #fff;
}
/* Ausgefüllte Stufe */

.stufe .feld:last-child,
.stufe .feldgruppe:last-child { margin-bottom: 0; }

/* Leistungsverweise auf der Startseite */

/* ============================================================
   Radaransicht: zwei Zentren, je eine umlaufende Linie
   ============================================================ */

.radarfeld {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: clamp(.9rem, 2vw, 1.5rem);
  box-shadow: var(--schatten-s);
  margin-bottom: 1.9rem;
}
.radar { display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; }

.rd-scheibe { fill: var(--gruen); fill-opacity: .045; }
.rd-ring    { fill: none; stroke: var(--gruen); stroke-opacity: .16; stroke-width: 1; }
.rd-ring--aussen { stroke-opacity: .34; stroke-dasharray: 4 5; }

.rd-linie  { stroke: var(--gruen); stroke-width: 1.8; stroke-linecap: round; opacity: .75; }
.rd-spitze { fill: var(--gruen); opacity: .9; }

.rd-sitz  { fill: var(--gruen); stroke: #fff; stroke-width: 3; }
.rd-gross { fill: var(--gruen-tief); stroke: #fff; stroke-width: 2.5; }
.rd-punkt { fill: var(--gruen); opacity: .32; }
.rd-welle { fill: none; stroke: var(--gruen); stroke-width: 1.5; opacity: 0; }

.rd-nam {
  font-family: var(--schrift); font-size: 12.5px;
  fill: var(--text-leise); opacity: .5;
}
.rd-nam--sitz  { font-size: 18px; font-weight: 700; fill: var(--gruen-tief); opacity: 1; }
.rd-nam--gross { font-size: 16px; font-weight: 700; fill: var(--gruen-tief); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .rd-arm { animation: rd-dreh 8s linear infinite; }
  .rd-arm--ka { animation-delay: -4s; }
  @keyframes rd-dreh { to { transform: rotate(360deg); } }

  .rd-punkt:not(.rd-sitz):not(.rd-gross) { animation: rd-blitz 8s linear infinite; }
  @keyframes rd-blitz {
    0%   { opacity: 1; }
    5%   { opacity: .92; }
    24%  { opacity: .5; }
    100% { opacity: .32; }
  }

  .rd-welle {
    transform-box: fill-box; transform-origin: center;
    animation: rd-welle 8s linear infinite;
  }
  @keyframes rd-welle {
    0%   { opacity: .75; scale: .5; }
    13%  { opacity: 0;  scale: 3.2; }
    100% { opacity: 0;  scale: 3.2; }
  }

  .rd-nam:not(.rd-nam--sitz):not(.rd-nam--gross) { animation: rd-schrift 8s linear infinite; }
  @keyframes rd-schrift {
    0%   { opacity: 1; }
    6%   { opacity: .95; }
    32%  { opacity: .62; }
    100% { opacity: .5; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-arm { display: none; }
  .rd-punkt { opacity: .9; }
  .rd-nam { opacity: .85; }
  .rd-welle { display: none; }
}

@media (max-width: 680px) {
  .rd-nam { font-size: 15px; }
  .rd-nam--sitz { font-size: 21px; }
  .rd-nam--gross { font-size: 19px; }
}


/* ---------- Bausteine auf dunklem Grund ---------- */

.block--dunkel .galerie figure {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.block--dunkel .galerie figcaption { color: rgba(238,243,239,.86); }
.block--dunkel .galerie figcaption .sym { color: #9fdcb4; }

.block--dunkel .etappe__nr {
  background: #9fdcb4; color: var(--gruen-dunkel);
  box-shadow: 0 0 0 5px var(--gruen-dunkel);
}
.block--dunkel .etappe::before { background: rgba(255,255,255,.18); }
.block--dunkel .etappe p { color: rgba(238,243,239,.82); }
.block--dunkel .etappe .pille--gruen {
  background: rgba(255,255,255,.12); color: #bfe8cd;
}
.block--dunkel .block__kopf p.leise { color: rgba(238,243,239,.78); }

/* ---------- Farbige Tiefe auf den Abschnittsflächen ---------- */

/* Farbe entsteht aus drei Dingen: den dunkelgrünen Bändern, den leicht
   getönten Zwischenflächen und einem weichen Lichtschein, der nur im
   Titelbereich und auf den dunklen Bändern liegt. Kein Muster, keine
   Textur — die Flächen bleiben ruhig. */
/* Die Hintergrundfarbe steht immer ausdrücklich dabei. Ein Verlauf ohne
   eigene Grundfarbe liegt sonst auf einem undefinierten Untergrund — das
   ist sowohl rechnerisch als auch beim Drucken unsauber. */
.block { background-color: var(--grund); }

.block--ruhig { background-color: var(--grund-ruhig); }
.block--blass { background-color: var(--gruen-blass); }
.block--dunkel { background-color: var(--gruen-dunkel); }

.block--ruhig, .block--blass {
  background-image: var(--kante);
  background-size: 100% 1px;
  background-position: top center;
  background-repeat: no-repeat;
}

.block--dunkel {
  background-image: var(--kante), var(--schein-dunkel);
  background-size: 100% 1px, var(--schein-mass);
  background-position: top center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Der Titelbereich bekommt den Schein etwas kräftiger, er trägt die Seite an. */
.titel {
  background-color: var(--grund);
  background-image:
    radial-gradient(62% 56% at 4% -12%, rgba(21,122,60,.15), rgba(21,122,60,0) 62%),
    radial-gradient(44% 44% at 106% 4%, rgba(191,61,11,.085), rgba(191,61,11,0) 64%),
    radial-gradient(52% 50% at 88% 112%, rgba(15,92,44,.13), rgba(15,92,44,0) 64%);
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}

/* ---------- Zweispaltiger Abschnitt mit Belegtafel ---------- */

.zweispalt {
  display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
@media (max-width: 880px) { .zweispalt { grid-template-columns: 1fr; } }

.zweispalt__text .block__kopf { margin-bottom: 1.25rem; }
.zweispalt__text p:last-child { margin-bottom: 0; }

.belegtafel {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-karte);
  background: rgba(255,255,255,.055);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.belegtafel__kopf {
  margin: 0 0 1.1rem; font-weight: 700; font-size: .95rem;
  letter-spacing: .01em; color: #fff;
}

.belegliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.belegliste li { display: flex; gap: .85rem; align-items: flex-start; }
.belegliste__icon {
  flex: none; width: 2rem; height: 2rem; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(159,220,180,.16); color: #bfe8cd;
}
.belegliste__icon .sym { width: 1.05rem; height: 1.05rem; }
.belegliste strong {
  display: block; color: #fff; font-size: .95rem; margin-bottom: .18rem;
}
.belegliste span > strong + * { margin: 0; }
.belegliste li > span:last-child { font-size: .9rem; line-height: 1.5; color: rgba(238,243,239,.82); }

/* ---------- Notariate: juristische Ruhe statt Werbekarte ---------- */

.notarbereich {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.notarbereich::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 84% 30%, rgba(159,220,180,.12), rgba(16,51,31,0) 38%);
  pointer-events: none;
}
.notarbereich .bahn { position: relative; }
.notarbereich__zeichen {
  position: absolute;
  right: clamp(-1.5rem, 1vw, .5rem);
  top: clamp(-4.5rem, -5vw, -2.25rem);
  color: #fff;
  opacity: .065;
  font-family: var(--schrift);
  font-variation-settings: 'wght' 700;
  font-size: clamp(15rem, 31vw, 31rem);
  line-height: .72;
  user-select: none;
  pointer-events: none;
}
.notarbereich .zweispalt { position: relative; z-index: 1; }
.notarbereich .zweispalt__text {
  padding-top: clamp(.25rem, 1vw, .75rem);
}
.notarbereich .block__kopf h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 1.45rem + 2vw, 3.4rem);
  line-height: 1.05;
}
.notarmerkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.35rem 0 1.5rem;
  padding: 0;
  list-style: none;
}
.notarmerkmale li {
  padding: .48rem .8rem;
  border: 1px solid rgba(191,232,205,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #dff3e6;
  font-size: .88rem;
  font-variation-settings: 'wght' 600;
}
.notarbereich .belegtafel {
  background: rgba(255,255,255,.075);
  border-color: rgba(191,232,205,.24);
}
.notarbereich .belegtafel__kopf {
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.notarbereich .belegliste li {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.notarbereich .belegliste li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.notarbereich .zusagen {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
  background: transparent;
  border: 0;
  overflow: visible;
  margin-top: 0;
}
.notarbereich .zusage {
  min-height: 100%;
  padding: 1.15rem;
  border: 1px solid rgba(191,232,205,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.075) !important;
}
.notarbereich .zusage b { color: #fff; }
.notarbereich .zusage > div span { color: rgba(238,243,239,.82); }
.notarbereich .zusage__icon {
  background: rgba(159,220,180,.16);
  color: #bfe8cd;
}
@media (max-width: 880px) {
  .notarbereich__zeichen {
    right: -1rem;
    top: -1rem;
    font-size: clamp(13rem, 58vw, 22rem);
  }
  .notarbereich .block__kopf h2 { max-width: 16ch; }
  .notarbereich .nt__oben {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
  }
  .notarbereich .nt__handlung { justify-self: start; }
  .notarbereich .zusagen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .notarbereich .zusagen { grid-template-columns: 1fr; }
}

/* ---------- Einsatzgebiete: Karte und Ortsnetz als ein klares System ---------- */

#gebiete {
  background-color: var(--grund-ruhig);
  background-image:
    radial-gradient(50% 38% at 100% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 72%),
    var(--kante);
  background-size: auto, 100% 1px;
  background-position: 0 0, top center;
  background-repeat: no-repeat;
}
#gebiete .block__kopf {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(18rem, 1.2fr);
  align-items: end;
  gap: 1.5rem;
  max-width: none;
}
#gebiete .block__kopf p { max-width: 48ch; justify-self: end; }

#gebiete .kartenfeld {
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--grund);
  box-shadow: 0 22px 55px -34px rgba(15,51,31,.52);
}
#gebiete .rp-buehne {
  margin: 0;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  padding: clamp(1.8rem, 3.5vw, 3rem);
}
#gebiete .rp-gitter { grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); }
#gebiete .rp-feld { width: min(112%, 34rem); }
#gebiete .rp-radar { margin-right: clamp(-2.5rem, -3vw, -.75rem); }
#gebiete .karte-schalter {
  margin: 0;
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  border-top: 0;
  background: var(--grund);
}

.gebietsnetz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid rgba(15,92,44,.18);
  border-radius: var(--radius-karte);
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 48px -38px rgba(15,51,31,.55);
}
.gebietsnetz .gebiet {
  margin: 0;
  padding: clamp(1.35rem, 2.7vw, 2rem);
}
.gebietsnetz .gebiet + .gebiet { border-left: 1px solid rgba(15,92,44,.16); }
.gebiet__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  margin-bottom: 1.15rem;
}
.gebiet__icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  box-shadow: 0 9px 22px -13px rgba(15,92,44,.75);
}
.gebiet__icon .sym { width: 1.2rem; height: 1.2rem; }
.gebietsnetz .gebiet h3 {
  display: block;
  margin: 0 0 .18rem;
  font-size: clamp(1.25rem, 1.05rem + .65vw, 1.65rem);
  line-height: 1.2;
}
.gebiet__kopf p {
  margin: 0;
  color: var(--text-leise);
  font-size: .88rem;
}
.gebietsnetz .orte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1rem;
  margin: 0;
}
.gebietsnetz .orte li {
  position: relative;
  min-width: 0;
  padding: .55rem .2rem .55rem .9rem;
  border: 0;
  border-bottom: 1px solid rgba(15,92,44,.12);
  border-radius: 0;
  background: transparent;
  color: var(--text-leise);
  font-size: .84rem;
  line-height: 1.35;
}
.gebietsnetz .orte li::before {
  content: '';
  position: absolute;
  left: .05rem;
  top: 1.02rem;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--gruen);
}
.gebietsabschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-karte);
  background: var(--gruen-dunkel);
  color: var(--text-hell);
}
.gebietsabschluss p { margin: 0; }
.gebietsabschluss .leise { color: rgba(238,243,239,.84); }
.gebietsabschluss .knopf--rand {
  border-color: rgba(255,255,255,.25);
  background: #fff;
  color: var(--gruen-dunkel);
  white-space: nowrap;
}

/* Das neue Entrümpelungsmotiv bleibt auch im schmalen Kartenzuschnitt lesbar. */
.bildkarten .bildkarte:nth-child(3) .bildkarte__bild img { object-position: 58% center; }

/* Entrümpelung: dieselbe starke Bildsprache und Flächenwirkung wie auf der Startseite. */
.titel--entruempelung .titel__bild img { object-position: 58% center; }
.entruempelung-umfang .block__kopf { max-width: 68ch; }
.punkte--leistung { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.punkt--leistung {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 17rem;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  overflow: hidden;
  border: 0;
  background: var(--gruen-dunkel);
  color: var(--text-hell) !important;
  box-shadow: 0 22px 45px -34px rgba(15,51,31,.75);
  transition: transform .2s ease, box-shadow .2s ease;
}
.punkt--leistung:nth-child(2) { background: var(--gruen-tief); }
.punkt--leistung::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -5rem;
  width: 14rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255,255,255,.035);
}
.punkt--leistung .beleg__kopf { align-items: center; }
.punkt--leistung .beleg__icon { background: rgba(255,255,255,.13); color: #fff; }
.punkt--leistung h3 { color: #fff; font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem); }
.punkt--leistung p { max-width: 50ch; color: rgba(238,243,239,.84); }
.punkt--leistung p:last-child { margin-top: auto !important; padding-top: 1.5rem; }
.punkt--leistung .karte__mehr { color: #fff; }
.punkt--leistung:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 55px -36px rgba(15,51,31,.9);
}

.entr-zielgruppen .punkte {
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--gruen-linie);
  border-radius: var(--radius-karte);
  background: #fff;
  box-shadow: 0 18px 42px -36px rgba(15,51,31,.55);
}
.entr-zielgruppen .punkt {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.entr-zielgruppen .punkt + .punkt { border-left: 1px solid var(--linie); }
.entr-zielgruppen .punkt:first-child {
  background: var(--gruen-dunkel);
  color: var(--text-hell);
}
.entr-zielgruppen .punkt:first-child p { color: rgba(238,243,239,.82); }
.entr-zielgruppen .punkt:first-child .beleg__icon { background: rgba(255,255,255,.13); color: #fff; }
.entr-zielgruppen .punkt:first-child h3 { color: #fff; }

/* Einsatzgebiete: eigener regionaler Auftakt statt einer leeren Textfläche. */
.einsatz-hero {
  position: relative;
  isolation: isolate;
  min-height: 24rem;
  overflow: hidden;
  border-radius: var(--radius-karte);
  background: var(--gruen-dunkel);
  box-shadow: var(--schatten-m);
  color: var(--text-hell);
}
.einsatz-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -3rem;
  top: -1rem;
  width: 21rem;
  aspect-ratio: 1;
  border: 1px solid rgba(159,220,180,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(159,220,180,.07), 0 0 0 8rem rgba(159,220,180,.035);
}
.einsatz-hero::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 42px 42px;
}
.einsatz-hero__stationen {
  position: absolute;
  inset: clamp(2rem, 4vw, 3rem);
  display: grid;
  align-content: center;
  gap: 1.25rem;
}
.einsatz-hero__station {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  max-width: 21rem;
}
.einsatz-hero__station + .einsatz-hero__station::before {
  content: '';
  position: absolute;
  left: .4rem;
  bottom: calc(100% + .08rem);
  width: 1px;
  height: 1.15rem;
  background: rgba(159,220,180,.45);
}
.einsatz-hero__station > span {
  width: .85rem;
  height: .85rem;
  border: 2px solid #9fdcb4;
  border-radius: 50%;
  background: var(--gruen-dunkel);
}
.einsatz-hero__station--sitz > span {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.12);
}
.einsatz-hero__station b { display: block; color: #fff; font-size: 1.12rem; }
.einsatz-hero__station small { color: rgba(238,243,239,.72); font-size: .86rem; }
.einsatz-hero > p {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  color: rgba(238,243,239,.72);
  font-size: .84rem;
}

.region-logik__gitter {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.region-logik__kopf { max-width: 34rem; }
.region-logik__kopf h2 { color: #fff; }
.region-logik__kopf p { margin-top: 1rem; color: rgba(238,243,239,.72); }
.region-logik__punkte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.17);
}
.region-logik__punkte > div { padding: 1.35rem 1.25rem 0 0; }
.region-logik__punkte > div + div { padding-left: 1.25rem; border-left: 1px solid rgba(255,255,255,.13); }
.region-logik__punkte span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #9fdcb4;
}
.region-logik__punkte span .sym { width: 1.15rem; height: 1.15rem; }
.region-logik__punkte h3 { color: #fff; font-size: 1.02rem; }
.region-logik__punkte p { margin: .55rem 0 0; color: rgba(238,243,239,.72); font-size: .9rem; }

@media (max-width: 940px) {
  #gebiete .block__kopf { grid-template-columns: 1fr; }
  #gebiete .block__kopf p { justify-self: start; }
  .gebietsnetz { grid-template-columns: 1fr; }
  .gebietsnetz .gebiet + .gebiet {
    border-left: 0;
    border-top: 1px solid rgba(15,92,44,.16);
  }
  .entr-zielgruppen .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entr-zielgruppen .punkt:nth-child(3) { border-left: 0; border-top: 1px solid var(--linie); }
  .entr-zielgruppen .punkt:nth-child(4) { border-top: 1px solid var(--linie); }
  .region-logik__gitter { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #gebiete .rp-gitter { grid-template-columns: 1fr; }
  #gebiete .rp-radar { margin-right: 0; }
  #gebiete .rp-feld { width: 100%; }
}
@media (max-width: 620px) {
  .punkte--leistung { grid-template-columns: 1fr; }
  .punkt--leistung { min-height: 15rem; }
  .entr-zielgruppen .punkte { grid-template-columns: 1fr; }
  .entr-zielgruppen .punkt + .punkt,
  .entr-zielgruppen .punkt:nth-child(3) { border-left: 0; border-top: 1px solid var(--linie); }
  .region-logik__punkte { grid-template-columns: 1fr; }
  .region-logik__punkte > div + div { padding-left: 0; border-top: 1px solid rgba(255,255,255,.13); border-left: 0; }
  .gebietsnetz .orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gebietsabschluss { align-items: stretch; flex-direction: column; }
  .gebietsabschluss .knopf { width: 100%; }
}

/* Fußzeilen-Verweise brauchen eine Tippfläche von mindestens 24px Höhe. */
.fuss ul a, .fuss__schluss a {
  display: inline-block;
  padding-block: .3rem;
}

/* ---------- Häufige Fragen auf dunklem Grund ---------- */

.block--dunkel .frage {
  border-color: rgba(255,255,255,.16);
}
.block--dunkel .frage summary { color: #fff; }
.block--dunkel .frage summary::after { color: #9fdcb4; }
.block--dunkel .frage__text { color: rgba(238,243,239,.84); }
.block--dunkel .frage[open] summary { color: #bfe8cd; }

/* ============================================================
   Kopfzeile unterwegs
   Steht bewusst am Dateiende: die Regeln müssen die Menü-Regeln
   weiter oben überschreiben.
   ============================================================ */

/* Der Schalter erscheint erst, wenn die Navigation nicht mehr in die
   Zeile passt. Darüber ist er überflüssig. */
.kopf__schalter { display: none; }
.kopf__navanfrage { display: none; }

@media (max-width: 1000px) {
  .kopf__schalter {
    display: grid; place-content: center; gap: 5px;
    width: 2.75rem; height: 2.75rem; flex: none;
    border: 1px solid var(--linie); border-radius: var(--radius-s);
    background: #fff; cursor: pointer; padding: 0;
  }
  .kopf__balken {
    display: block; width: 1.15rem; height: 2px; border-radius: 2px;
    background: var(--text);
  }
  .kopf__schalter[aria-expanded="true"] { background: var(--gruen-blass); border-color: var(--gruen-linie); }

  /* Die Navigation wird zur aufklappbaren Tafel unter der Kopfzeile. */
  .kopf__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten-klapp);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--rand) 1.15rem;
    max-height: calc(100dvh - 4.5rem); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .kopf__nav[data-offen="ja"] { display: flex; }

  .kopf__nav > .menue { display: block; border-top: 1px solid var(--linie); }
  .kopf__nav > .menue:first-child { border-top: 0; }
  .kopf__nav > a {
    padding: .85rem .25rem; border-top: 1px solid var(--linie);
    font-size: 1rem; border-radius: 0;
  }
  .kopf__navanfrage {
    display: block; color: var(--gruen) !important;
    font-variation-settings: 'wght' 600;
  }

  /* Untermenüs stehen offen: unterwegs ist Platz genug und ein zweiter
     Klick pro Gewerk wäre nur im Weg. */
  .menue__schalter { display: none; }
  .menue__kopf {
    display: block; padding: .85rem .25rem .35rem;
    font-size: 1rem; font-variation-settings: 'wght' 650;
  }
  .menue__klapp {
    display: block !important; position: static; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: 0; background: none;
    padding: 0 0 .7rem; min-width: 0; margin: 0;
  }
  .menue__klapp a {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .25rem .55rem 1rem; font-size: .95rem;
    color: var(--text-leise); border-radius: var(--radius-s);
  }
  .menue__klapp a .sym { width: 1.05rem; height: 1.05rem; color: var(--gruen); flex: none; }
  /* Der Gewerkname ist hier schon der Verweis auf die Übersichtsseite —
     ein zweiter Eintrag "Übersicht ..." wäre doppelt gemoppelt. */
  .menue__klapp a.menue__uebersicht { display: none; }
  .menue__kopf[aria-current="page"] { color: var(--gruen); }
}

/* Fließtext, der mittig im Abschnitt steht */
.fliess--mitte { margin-inline: auto; text-align: center; }

/* ============================================================
   Anfragebogen: Schrittleiste und Steuerung
   ============================================================ */

.stufenleiste {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  counter-reset: none;
}
.stufenleiste__punkt { flex: 1 1 auto; min-width: 5.5rem; }

.stufenleiste__knopf {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  padding: .6rem .7rem; border: 0; border-radius: var(--radius-s);
  background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .86rem; color: var(--text-leise);
  border-top: 2px solid var(--linie);
  border-radius: 0;
}
.stufenleiste__zahl {
  flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gruen-blass); color: var(--gruen-tief);
  font-size: .78rem; font-variation-settings: 'wght' 700;
}
.stufenleiste__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stufenleiste__punkt.ist-hier .stufenleiste__knopf {
  border-top-color: var(--gruen); color: var(--text);
  font-variation-settings: 'wght' 600;
}
.stufenleiste__punkt.ist-hier .stufenleiste__zahl {
  background: var(--gruen); color: #fff;
}
.stufenleiste__punkt.ist-fertig .stufenleiste__knopf { border-top-color: var(--gruen-linie); }
.stufenleiste__punkt.ist-fertig .stufenleiste__zahl {
  background: var(--gruen-tief); color: #fff;
}
.stufenleiste__knopf:hover { color: var(--text); background: var(--gruen-blass); }
.stufenleiste__knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

@media (max-width: 560px) {
  .stufenleiste__name { display: none; }
  .stufenleiste__punkt { min-width: 0; }
  .stufenleiste__knopf { justify-content: center; padding: .6rem .3rem; }
}

.stufen-steuerung {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.stufen-steuerung .knopf { flex: 0 0 auto; }
#stufe-weiter { margin-left: auto; }

/* Gruppierte Leistungskacheln in Schritt 1 */
.wahlgruppe + .wahlgruppe { margin-top: 1.35rem; }
.wahlgruppe__titel {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; font-size: .9rem;
  font-variation-settings: 'wght' 650; color: var(--text);
}
.wahlgruppe__titel .sym { width: 1.05rem; height: 1.05rem; color: var(--gruen); }

.stufe__hinweis {
  margin: 0; padding: 1.1rem 1.25rem;
  background: var(--gruen-blass); border-radius: var(--radius-s);
  color: var(--text-leise); font-size: .95rem;
}

/* Die Sendeknöpfe treten erst im letzten Schritt hervor */
#absenden-bereich { opacity: .55; transition: opacity .25s ease; }
#absenden-bereich.ist-bereit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #absenden-bereich { transition: none; }
}

/* ============================================================
   Einsatzgebietskarte als Radarband
   Technik nach dem Vorbild einer Wettbewerbsseite nachgebaut: der
   Suchkegel ist ein conic-gradient auf einem runden Element, die
   Ortsnamen stehen in Großbuchstaben und leuchten auf, wenn der Kegel
   sie überstreicht. Farben, Orte und Texte sind die eigenen.
   Umlauf 12,5 s (vom Nutzer so gewählt), Kegel 30 Grad.
   ============================================================ */

@keyframes rd-dreh2  { to { rotate: 360deg; } }
@keyframes rd-blip   { 0%, 3% { opacity: 1; } 26% { opacity: .38; } 100% { opacity: .38; } }
@keyframes rd-welle2 { 0% { scale: .5; opacity: .6; } 26% { scale: 3.4; opacity: 0; } 100% { scale: 3.4; opacity: 0; } }

.rp-buehne {
  position: relative; overflow: hidden; isolation: isolate;
  margin: calc(-1 * clamp(.9rem, 2vw, 1.5rem));
  border-radius: var(--radius-karte);
  background: var(--gruen-dunkel);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  color: var(--text-hell);
}

.rp-raster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, rgba(255,255,255,0) 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, rgba(255,255,255,0) 1px);
  background-size: 46px 46px, 46px 46px;
}
.rp-schein {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(50% 50% at 10% 0%, rgba(64,190,110,.30), rgba(64,190,110,0) 60%),
                    radial-gradient(45% 45% at 100% 30%, rgba(233,120,56,.10), rgba(233,120,56,0) 62%);
}

.rp-gitter {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
}
.rp-titel {
  margin: 0; color: #fff; text-transform: uppercase;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); line-height: 1.12;
  letter-spacing: -.01em; font-variation-settings: 'wght' 700;
}
.rp-fliess {
  margin: .9rem 0 0; max-width: 42ch; font-size: .98rem; line-height: 1.6;
  color: rgba(238,243,239,.86);
}
.rp-fussnote { margin: 1.1rem 0 0; font-size: .84rem; color: rgba(238,243,239,.66); }

.rp-radar { position: relative; margin-right: clamp(-5rem, -6vw, -2rem); }
.rp-feld { position: relative; width: 118%; aspect-ratio: 1; margin-inline: auto; }

.rp-scheibe { position: absolute; border-radius: 50%; }
.rp-scheibe::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(159,220,180,.22);
  background: radial-gradient(circle, rgba(64,190,110,.09), rgba(64,190,110,0) 70%);
}
.rp-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(159,220,180,.16); }

.rp-kegel {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(64,190,110,.60) 0deg, rgba(64,190,110,.14) 11deg,
                             rgba(64,190,110,0) 30deg);
}

.rp-blip {
  position: absolute; translate: -50% -50%; z-index: 2;
  display: grid; place-items: center; width: 0; height: 0;
}
.rp-punkt { grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%; background: #9fdcb4; }
.rp-welle {
  grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid #9fdcb4; opacity: 0;
}
.rp-nam {
  position: absolute; top: 10px; left: 50%; translate: -50% 0;
  white-space: nowrap; text-transform: uppercase;
  font-size: 11.5px; font-variation-settings: 'wght' 700; letter-spacing: .025em;
  color: rgba(207,224,214,.92);
}

/* Der Sitz ist durch Größe, Weiß und einen massiven Ring ausgezeichnet.
   Ein farbiger Schein ohne Versatz wäre Dekoration, kein Tiefensystem. */
.rp-blip--sitz .rp-punkt {
  width: 13px; height: 13px; background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.14);
}
.rp-blip--sitz .rp-nam { color: #fff; font-size: 13px; top: 14px; }
.rp-blip--gross .rp-punkt { width: 10px; height: 10px; background: #cdeed9; }
.rp-blip--gross .rp-nam { color: #cdeed9; font-size: 12.5px; top: 12px; }

@media (max-width: 860px) {
  .rp-gitter { grid-template-columns: 1fr; }
  .rp-radar { margin-right: 0; }
  .rp-feld { width: 100%; max-width: 460px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rp-kegel { animation: rd-dreh2 12.5s linear infinite; }
  .rp-kegel--ka { animation-delay: -6.25s; }
  .rp-blip:not(.rp-blip--sitz) { animation: rd-blip 12.5s linear infinite; }
  .rp-welle { animation: rd-welle2 12.5s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-kegel, .rp-welle { display: none; }
  .rp-blip { opacity: 1 !important; }
}

/* Lage der Ortsnamen: beim Erzeugen wird geprüft, welche Seite frei ist. */
.rp-nam { position: absolute; }
.rp-nam--unten  .rp-nam { top: 10px;    left: 50%; translate: -50% 0; }
.rp-nam--unten2 .rp-nam { top: 23px;    left: 50%; translate: -50% 0; }
.rp-nam--oben   .rp-nam { bottom: 11px; left: 50%; translate: -50% 0; }
.rp-nam--oben2  .rp-nam { bottom: 24px; left: 50%; translate: -50% 0; }
.rp-nam--rechts .rp-nam { left: 9px;    top: 50%;  translate: 0 -50%; }
.rp-nam--links  .rp-nam { right: 9px;   top: 50%;  translate: 0 -50%; }

/* Nach dem Messen ordnet karte.js jeden Namen kollisionsfrei an. Weit
   versetzte Beschriftungen bleiben mit einer feinen Linie ihrem Ort zugeordnet. */
.rp-feld.ist-geordnet .rp-blip::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: var(--rp-linie, 0);
  height: 1px;
  transform: rotate(var(--rp-winkel, 0));
  transform-origin: 0 50%;
  background: rgba(159,220,180,.34);
  pointer-events: none;
}
.rp-feld.ist-geordnet .rp-nam {
  inset: auto;
  left: 0;
  top: 0;
  translate: -50% -50%;
  transform: translate(var(--rp-label-x, 0), var(--rp-label-y, 18px));
}
.rp-feld.ist-geordnet .rp-blip[data-label-versteckt='true'] .rp-nam { opacity: 0; }
.rp-feld.ist-geordnet .rp-blip[data-label-versteckt='true']:is(:hover, :focus-visible) .rp-nam {
  opacity: 1;
  z-index: 5;
  padding: .28rem .42rem;
  border-radius: var(--radius-s);
  background: var(--gruen-dunkel);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.8);
}

@media (max-width: 520px) {
  .rp-blip--ort .rp-nam { font-size: 9.5px; letter-spacing: .01em; }
  .rp-blip--gross .rp-nam { font-size: 10.5px; }
  .rp-blip--sitz .rp-nam { font-size: 11px; }
}

/* Jeder Ort ist ein Verweis auf seinen Abschnitt in den Einsatzgebieten. */
a.rp-blip { text-decoration: none; cursor: pointer; }
a.rp-blip .rp-punkt { transition: scale .14s ease, background-color .14s ease; }
a.rp-blip:hover .rp-nam,
a.rp-blip:focus-visible .rp-nam { color: #fff; opacity: 1; }
a.rp-blip:hover .rp-punkt,
a.rp-blip:focus-visible .rp-punkt { background: #fff; scale: 1.5; }
a.rp-blip:focus-visible { outline: 3px solid #9fdcb4; outline-offset: 6px; border-radius: 4px; }
a.rp-blip:hover { animation-play-state: paused; }

/* Der Sitz sitzt in der Mitte und ist der größte Punkt der Karte. */
.rp-blip--sitz .rp-punkt { width: 15px; height: 15px; }

/* Ein angesprungener Ort in der Liste wird kurz hervorgehoben. */
.orte li:target {
  background: var(--gruen-blass); color: var(--gruen-tief);
  border-radius: var(--radius-s); outline: 2px solid var(--gruen);
  outline-offset: 2px;
}

/* ---------- Ortsseiten ---------- */

/* Jeder Ortsname führt zu seiner eigenen Seite. */
.orte a { color: inherit; text-decoration: none; }
.orte a:hover, .orte a:focus-visible { color: var(--gruen-tief); text-decoration: underline; text-underline-offset: .18em; }
.orte a[aria-current="page"] { color: var(--gruen-tief); font-variation-settings: 'wght' 700; }
.orte li:has(> a[aria-current="page"]) { background: var(--gruen-blass); }
.orte li:has(> a:only-child) { padding: 0; }
.orte li > a:only-child { display: block; padding: .45rem .95rem; }
.gebietsnetz .orte li:has(> a:only-child) { padding: 0; }
.gebietsnetz .orte li > a:only-child { padding: .55rem .2rem .55rem .9rem; }

/* Der Ort der geöffneten Seite leuchtet im Radar dauerhaft. */
.rp-blip.ist-hier { opacity: 1 !important; animation: none !important; }
.rp-blip.ist-hier .rp-punkt { background: #fff; scale: 1.6; }
.rp-blip.ist-hier .rp-nam { color: #fff; opacity: 1 !important; }

.vor-ort__nachbarn { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.vor-ort__nachbarn h3 { font-size: 1rem; margin: 0 0 .9rem; }
.vor-ort__nachbarn .orte { margin: 0; }

/* ============================================================
   Umbau 26.09.2026 nach dem Vorbild ruempelpeter.de
   Übernommen ist die Machart, die Farben bleiben unsere:
   Dunkelgrün trägt Kopf und Bänder, das helle Markengrün ist die
   Akzentfarbe für Augenbrauen, Symbole und "Mehr erfahren".
   ============================================================ */

:root {
  --akzent:      #82c364;   /* Markengrün der Wortmarke, auf Dunkel 8:1 */
  --akzent-hell: #a9dc8e;
  --kopf-hoch:   6.4rem;
  --kopf-flach:  4.4rem;
  --gleiten:     cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Seitenwechsel ohne Aufblitzen ----------
   Beide Seiten tragen dieselbe Kopfleiste; sie bleibt stehen, nur der
   Inhalt blendet über. Browser ohne Unterstützung wechseln wie bisher. */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: seiteAus .16s ease both; }
  ::view-transition-new(root) { animation: seiteEin .34s var(--gleiten) both; }
  ::view-transition-group(kopf) { animation-duration: .3s; }
  @keyframes seiteAus { to { opacity: 0; } }
  @keyframes seiteEin { from { opacity: 0; translate: 0 12px; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Kopfleiste: dunkel, großes Logo, flacher beim Scrollen ---------- */
.kopf {
  background: rgba(16, 51, 31, .97);
  border-bottom: 1px solid rgba(130, 195, 100, .5);
  box-shadow: 0 12px 32px -14px rgba(6, 22, 12, .55);
}
.kopf__reihe { min-height: var(--kopf-hoch); transition: min-height .3s var(--gleiten); }
.kopf__logo img { height: 4rem; transition: height .3s var(--gleiten); }
.kopf--klein .kopf__reihe { min-height: var(--kopf-flach); }
.kopf--klein .kopf__logo img { height: 2.7rem; }
.kopf :where(a, button):focus-visible { outline-color: var(--akzent); }

.kopf__tel { color: #fff; }
.kopf__tel svg { color: var(--akzent); }
.kopf__tel:hover { color: var(--akzent-hell); }
.kopf .knopf--voll { background: var(--akzent); color: var(--gruen-dunkel); }
.kopf .knopf--voll:hover { background: var(--akzent-hell); }

@media (min-width: 1001px) {
  .kopf__nav > a, .kopf__nav .menue__kopf { color: #fff; font-variation-settings: 'wght' 650; }
  .kopf__nav .menue__schalter { color: rgba(255, 255, 255, .72); }
  .kopf__nav > a:hover,
  .kopf__nav .menue:hover .menue__kopf, .kopf__nav .menue:focus-within .menue__kopf,
  .kopf__nav .menue:hover .menue__schalter, .kopf__nav .menue:focus-within .menue__schalter {
    background: rgba(255, 255, 255, .1); color: #fff;
  }
  .kopf__nav > a[aria-current="page"], .kopf__nav .menue__kopf[aria-current="page"] { color: var(--akzent); }
}
@media (max-width: 1000px) {
  :root { --kopf-hoch: 5.2rem; --kopf-flach: 4.1rem; }
  .kopf__logo img { height: 3.2rem; }
  .kopf--klein .kopf__logo img { height: 2.4rem; }
  .kopf__schalter { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
  .kopf__schalter[aria-expanded="true"] { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
  .kopf__balken { background: #fff; }
  .kopf__nav { max-height: calc(100dvh - var(--kopf-flach)); }
}
@media (max-width: 420px) {
  .kopf .knopf--klein { padding: .55rem .8rem; }
}

/* ---------- Überschriften: kleine Augenbraue, große Zeile ---------- */
.augenbraue {
  margin: 0 0 .75rem;
  font-size: .78rem; line-height: 1.3; letter-spacing: .17em; text-transform: uppercase;
  font-variation-settings: 'wght' 700;
  color: var(--gruen);
}
.block--dunkel .augenbraue, .abschluss .augenbraue { color: var(--akzent); }

h1,
.augenbraue + h2 {
  text-transform: uppercase;
  font-variation-settings: 'wght' 850, 'wdth' 112;
  letter-spacing: -.012em;
  line-height: 1.02;
  hyphens: auto;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.1rem); }
.titel__knoepfe .knopf { padding-inline: 1.15rem; }
.augenbraue + h2 { font-size: clamp(1.8rem, 1.25rem + 2.3vw, 3rem); }
.notarbereich .augenbraue + h2 { font-size: clamp(1.8rem, 1.25rem + 2.3vw, 3rem); }
.abschluss .augenbraue + h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
.titel__text { margin-top: 1.1rem; }

/* ---------- Knöpfe: kräftiger, in Großbuchstaben ---------- */
.knopf {
  border-radius: 10px;
  text-transform: uppercase; letter-spacing: .035em;
  font-size: .88rem; font-variation-settings: 'wght' 750;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, translate .15s ease;
}
.knopf:hover { translate: 0 -1px; }
.knopf--voll { box-shadow: 0 8px 20px -8px rgba(21, 122, 60, .6); }

/* ---------- Leistungsband: alle Einzelleistungen als Kacheln ---------- */
.lkarten {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
}
.lkarten__titel {
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 1.1rem;
  font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  font-variation-settings: 'wght' 700; color: var(--akzent);
}
.lkarte {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, translate .2s var(--gleiten);
}
.lkarte:hover, .lkarte:focus-visible {
  background: rgba(255, 255, 255, .085); border-color: rgba(130, 195, 100, .6); translate: 0 -3px;
}
.lkarte__icon {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-bottom: 1rem;
  border-radius: 10px; background: rgba(130, 195, 100, .14); color: var(--akzent);
}
.lkarte__icon .sym { width: 1.3rem; height: 1.3rem; }
.lkarte__gewerk {
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  font-variation-settings: 'wght' 650; color: rgba(238, 243, 239, .58);
}
.lkarte h3 {
  margin: .3rem 0 .45rem; color: #fff;
  text-transform: uppercase; font-size: .96rem; line-height: 1.2; hyphens: manual;
  font-variation-settings: 'wght' 800, 'wdth' 104;
}
.lkarte p { margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.5; color: rgba(238, 243, 239, .78); }
.lkarte__mehr {
  margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  font-variation-settings: 'wght' 750; color: var(--akzent);
}
.lkarte__mehr .sym { width: 1em; height: 1em; transition: translate .2s var(--gleiten); }
.lkarte:hover .lkarte__mehr .sym { translate: 3px 0; }
.lkarte[aria-current="page"] { background: rgba(130, 195, 100, .13); border-color: var(--akzent); }
.lkarte[aria-current="page"] .lkarte__mehr { color: #fff; }

/* Die Bildkarten der Startseite stehen jetzt auf dunklem Grund. */
.leistungsband .bildkarte { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .6); }

/* ---------- Notariate: Streifen-Fassung ----------
   Aus der Live-Sitzung d0a84028 (Entwurf 2) in feste Regeln übernommen:
   der Zusagenstreifen aus dem Titelbereich, hell auf dunklem Band. */
.nt__oben {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: end;
}
.nt__tafelkopf {
  margin: clamp(1.8rem, 4vw, 3rem) 0 1.2rem;
  font-size: .95rem; font-variation-settings: 'wght' 700; color: #fff;
}
.nt__handlung { margin: 0; }
@media (max-width: 860px) {
  .nt__oben { grid-template-columns: 1fr; align-items: start; }
}
.notarbereich.nt--streifen h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.nt--streifen .zusagen {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.16);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.nt--streifen .zusage { border-color: rgba(255,255,255,.16); }
.nt--streifen .zusage b { color: #fff; }
.nt--streifen .zusage > div > span { color: rgba(238,243,239,.82); }
.nt--streifen .zusage__icon { background: rgba(159,220,180,.16); color: #bfe8cd; }

/* Einsatzgebiete-Kopf ist ein Raster (Überschrift links, Text rechts):
   die Augenbraue gehört in die linke Spalte über die Überschrift. */
#gebiete .block__kopf { row-gap: .75rem; }
@media (min-width: 941px) {
  #gebiete .block__kopf { grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); }
}
#gebiete .block__kopf h2 { hyphens: manual; }
#gebiete .block__kopf .augenbraue { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
#gebiete .block__kopf h2 { grid-column: 1; grid-row: 2; }
#gebiete .block__kopf p.leise { grid-column: 2; grid-row: 2; }
@media (max-width: 940px) {
  #gebiete .block__kopf .augenbraue,
  #gebiete .block__kopf h2,
  #gebiete .block__kopf p.leise { grid-column: 1; grid-row: auto; }
}

/* ---------- Notariate: fünf Zusagen als gleich gebaute Karten ----------
   Symbol oben, Überschrift in einer Zeile, Text darunter. Alle Karten sind
   gleich hoch, die Überschriften stehen dadurch auf einer Linie. */
.notarbereich .zusagen.zusagen--notar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1rem);
  background: none; border: 0; border-radius: 0; overflow: visible;
  margin-top: 0;
}
.zusagen--notar .zusage {
  position: relative;
  flex-direction: column; gap: 0;
  padding: 1.4rem 1.3rem 1.35rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.13);
  overflow: hidden;
  transition: border-color .2s ease, translate .2s var(--gleiten), background-color .2s ease;
}
.zusagen--notar .zusage::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--akzent), rgba(130,195,100,0));
}
.zusagen--notar .zusage:hover { border-color: rgba(130,195,100,.55); translate: 0 -3px; }
.notarbereich .zusagen--notar .zusage__icon {
  width: 2.7rem; height: 2.7rem; border-radius: 10px; margin-bottom: 1.1rem;
  background: rgba(130,195,100,.15); color: var(--akzent);
}
.notarbereich .zusagen--notar .zusage__icon .sym { width: 1.3rem; height: 1.3rem; color: var(--akzent); }
.notarbereich .zusagen--notar .zusage b {
  font-size: .86rem; line-height: 1.25; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .02em;
  font-variation-settings: 'wght' 800, 'wdth' 100;
  color: #fff;
}
.notarbereich .zusagen--notar .zusage > div > span {
  margin-top: .55rem; font-size: .9rem; line-height: 1.5;
  color: rgba(238,243,239,.78);
}
@media (max-width: 1199px) {
  .notarbereich .zusagen.zusagen--notar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zusagen--notar .zusage:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .notarbereich .zusagen.zusagen--notar { grid-template-columns: 1fr; }
}

.notarbereich .nt__tafelkopf {
  font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  font-variation-settings: 'wght' 700; color: var(--akzent);
}

/* Radar größer: mehr Spalte, größere Scheibe. Die Bühne schneidet über-
   stehende Ränder ab, das wirkt wie hineingezoomt. */
@media (min-width: 941px) {
  #gebiete .rp-gitter { grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); }
  #gebiete .rp-feld { width: min(126%, 54rem); margin-inline: 0; }
  #gebiete .rp-radar { margin-right: 0; margin-top: -1.5rem; margin-bottom: max(-26rem, -37%); }
  #gebiete .rp-gitter { align-items: start; }
  #gebiete .rp-text { align-self: center; margin-bottom: -6rem; }
}
@media (max-width: 940px) {
  #gebiete .rp-feld { width: 108%; max-width: 560px; margin-left: -4%; }
  #gebiete .rp-radar { margin-bottom: -8%; }
}

/* ---------- Anfrage direkt senden ---------- */
html:not(.js) #btn-senden { display: none; }
#btn-senden[disabled] { opacity: .7; cursor: progress; translate: none; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.senden-status {
  margin: .9rem 0 0; padding: .75rem .95rem; border-radius: var(--radius-s);
  font-size: .93rem; line-height: 1.45; border: 1px solid var(--linie); background: #fff;
}
.senden-status--laeuft { color: var(--text-leise); }
.senden-status--ok { background: var(--gruen-blass); border-color: var(--gruen-linie); color: var(--gruen-tief); font-variation-settings: 'wght' 600; }
.senden-status--fehler { background: #fdf1ec; border-color: #f0c9b8; color: #8a3413; }
.senden-status--fehler a { color: inherit; font-variation-settings: 'wght' 650; }

/* ---------- Kleine Handys (iPhone SE & Co.) ----------
   Hauptüberschrift so groß, dass "Entrümpelung" in eine Zeile passt; nur
   sehr lange Wörter (ab 13 Zeichen) dürfen noch getrennt werden. Die Knöpfe
   im Titel stehen kompakt: Anruf über die volle Breite, darunter zwei. */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.45rem, 7.4vw, 2.1rem);
    font-variation-settings: 'wght' 850, 'wdth' 100;
    hyphenate-limit-chars: 13 6 6;
  }
  .titel { padding-top: 1.6rem; }
  .titel__text { font-size: 1.02rem; margin: .9rem 0 1.3rem; }
  .titel__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .titel__knoepfe .knopf { padding-inline: .6rem; font-size: .8rem; }
  .titel__knoepfe .knopf:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .titel__gitter { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .titel__knoepfe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Anfragebogen auf schmalen Handys: nie breiter als der Bildschirm. */
@media (max-width: 920px) { .anfrage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .knopf { white-space: normal; text-align: center; }
  .titel .pille { white-space: normal; max-width: 100%; }
}
@media (max-width: 480px) {
  .augenbraue + h2 { font-size: clamp(1.4rem, 6.6vw, 1.85rem); hyphenate-limit-chars: 13 6 6; }
  #gebiete .block__kopf h2 { hyphens: auto; }
}

/* Ortsseiten: Quellenzeile unter "Sperrmüll und Grünschnitt in …" */
.entsorgung__quellen { margin-top: clamp(1.1rem, 2vw, 1.5rem); font-size: .88rem; }
.entsorgung__quellen a { color: inherit; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }

/* Anfragebogen: Hinweis bei fehlender Pflichtangabe (Leistung, Ort) */
.feld-fehler { margin: .45rem 0 0; color: #8a3413; font-size: .9rem; font-variation-settings: 'wght' 600; }
.feld-fehler--oben { margin: 0 0 1rem; padding: .7rem .9rem; background: #fdf1ec; border: 1px solid #f0c9b8; border-radius: .6rem; }
.feld input[aria-invalid="true"] { border-color: #c4572e; box-shadow: 0 0 0 3px rgba(196, 87, 46, .16); }