/* ==========================================================================
   TERSUM Facility Management Süd
   Farbwelt aus dem Logo: Grün #0a7431 für Flächen und Schrift auf
   Weiß, daraus abgestuft hellere und dunklere Töne (siehe :root).
   Zwei Schriften: Bricolage Grotesque (Überschriften), DM Sans (Text).
   ========================================================================== */

/* --- Schriften (lokal gehostet, swap) ------------------------------------ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-v17-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Grundwerte ----------------------------------------------------------- */

:root {
  /* Alle Grüntöne im selben Farbton #0a7431 (142°), nur heller oder
     dunkler abgestuft. Das Grün im TERSUM-Logo ist #027b2b (140°) und
     damit praktisch derselbe Farbton, nur etwas kräftiger; die Palette
     bleibt deshalb unverändert. Kontrast (WCAG): Weiß auf --gruen
     5,91:1, Weiß auf --gruen-dunkel 7,97:1, --gruen auf --gruen-zart
     5,56:1, --gruen-hell auf --gruen-nacht 7,81:1. */
  --gruen:        #0a7431;   /* Logo-Grün: Aktionen, Links, Flächen mit weißer Schrift */
  --gruen-rgb:    10, 116, 49;
  --gruen-dunkel: #055e25;   /* Hover */
  --gruen-hell:   #2fc667;   /* Akzente auf dunklem Grund */
  --gruen-hell-rgb: 47, 198, 103;
  --gruen-tief:   #072c15;   /* Kontaktband */
  --gruen-nacht:  #071e10;   /* Fußbereich, Bühne, Bildabdunkelung */
  --gruen-nacht-rgb: 7, 30, 16;
  --gruen-zart:   #f2faf5;   /* zarte Flächen */
  --gruen-zart-hover: #e6f5ec;
  --gruen-rand:   #cee8d8;

  --text:         #16201a;
  --text-leise:   #57675b;
  --weiss:        #ffffff;
  --flaeche:      #f5f9f6;
  --rand:         #e0ebe4;

  --schrift-kopf: 'Bricolage Grotesque', system-ui, sans-serif;
  --schrift-text: 'DM Sans', system-ui, sans-serif;

  --radius:       18px;
  --radius-gross: 28px;
  --schatten:     0 1px 2px rgba(22, 32, 26, .05), 0 10px 30px rgba(22, 32, 26, .07);
  --schatten-hoch:0 2px 4px rgba(22, 32, 26, .06), 0 22px 48px rgba(22, 32, 26, .12);

  --bahn-max:     1240px;
  --luft:         clamp(64px, 9vw, 128px);
}

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

html {
  scroll-behavior: smooth;
  /* Abstand, den ein angesprungener Anker vom oberen Rand haelt. Er soll
     genau das ausgleichen, was dort stehen bleibt - und das ist nur der
     klebende Kopfbereich. Der klebt erst ab 78em (.kopf), darunter steht
     er fest in der Seite und scrollt mit weg. Hier galten die 96 px
     trotzdem ueberall: am Handy landete eine Gebietskachel 120 px unter
     dem Fensterrand (96 + 24 px scroll-margin der Kachel), also hinter
     einem Streifen aus nichts. Gemessen auf einsatzgebiet/ bei 320, 375,
     768, 1024, 1248 und 1440 px.
     Ab 78em klebt der Kopf und ist gemessen 85,00 px hoch (bei 1248,
     1366, 1440 und 1920 px derselbe Wert).

     Gemessen wird gegen die gruene Linie, also die Oberkante der weissen
     Karte in der Kachel - die Kachel selbst beginnt 56 bis 60 px
     darueber, das ist ihr padding-top, und darin steht nichts. Gewuenscht
     sind 16 px zwischen Kopf und gruener Linie. Die Rechnung:
     scroll-padding-top + scroll-margin-top der Kachel (24) + ihr
     padding-top (60) - Kopfhoehe (85) = 16, also 17 px.

     Die Kachel-Oberkante liegt damit 41 px unter dem Fensterrand und
     verschwindet hinter dem Kopf. Das ist Absicht: dort ist nur ihr
     Innenabstand, und ihre hauchduenne Trennlinie steht ohnehin nur
     zwischen zwei Kacheln.

     Unter 1333 px ist das padding-top der Kachel kleiner (56,16 px statt
     60), dort bleiben 12,2 statt 16 px. Voherige Fassungen dieses Werts:
     96, 85, 109 und 73 px. */
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 78em) { html { scroll-padding-top: 17px; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: clamp(16px, .4vw + 15px, 17.5px);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.symbolvorrat { position: absolute; }

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
  /* Lange deutsche Woerter sauber mit Trennstrich umbrechen, nie mittendrin.
     Voraussetzung ist lang="de" im html-Tag. Zusaetzlich stehen im Markup
     weiche Trennstellen (­) in den laengsten Woertern. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  /* Erst ab 13 Zeichen trennen und nie kuerzer als vier Zeichen abtrennen,
     damit kurze Woerter wie "Winterdienst" ganz bleiben. */
  hyphenate-limit-chars: 13 4 4;
}

h1 { font-size: clamp(1.9rem, 5.6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.7rem); }
h3 { font-size: clamp(1.14rem, 1.4vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gruen); }

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

.bahn {
  width: 100%;
  max-width: var(--bahn-max);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 720px) { .bahn { padding-inline: 32px; } }

.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nur-fuer-screenreader:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  margin: 0; padding: 10px 16px;
  clip-path: none;
  background: var(--gruen);
  color: #fff;
  border-radius: 10px;
  z-index: 200;
}

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

.vorspann {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gruen);
  margin: 0 0 .9rem;
}
.vorspann--hell { color: var(--gruen-hell); }
@media (max-width: 519px) {
  .vorspann { font-size: .72rem; letter-spacing: .11em; }
}

.fuehrungstext {
  font-size: clamp(1.02rem, .5vw + .92rem, 1.18rem);
  color: var(--text-leise);
  max-width: 62ch;
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .86em 1.5em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.knopf .sym { width: 1.15em; height: 1.15em; flex: none; }
.knopf--klein { padding: .68em 1.15em; font-size: .93rem; }

.knopf--gruen {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
  box-shadow: 0 8px 20px rgba(var(--gruen-rgb), .22);
}
.knopf--gruen:hover {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
  transform: translateY(-2px);
}

.knopf--rand {
  background: #fff;
  border-color: var(--gruen-rand);
  color: var(--text);
}
.knopf--rand:hover { border-color: var(--gruen); color: var(--gruen); transform: translateY(-2px); }

.knopf--weiss { background: #fff; border-color: #fff; color: var(--gruen-tief); }
.knopf--weiss:hover { background: var(--gruen-zart-hover); border-color: var(--gruen-zart-hover); transform: translateY(-2px); }

/* Heller Umriss fuer dunkle Flaechen */
.knopf--klar {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(4px);
}
.knopf--klar:hover { border-color: #fff; background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sym {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bildrahmen. Ruhige Flaeche ohne Muster: sie ist waehrend des Ladens
   kurz zu sehen und soll dabei nicht auffallen. Das Streifenmuster steht
   nur noch dort, wo wirklich etwas fehlt - .bild__platzhalter,
   .leerflaeche und .platzhalter. */
.bild {
  position: relative;
  overflow: hidden;
  background-color: var(--flaeche);
  border-radius: var(--radius);
}
.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bildausschnitt fuer hohe Vorlagen etwas nach unten ziehen */
.bild--tief img  { object-position: 50% 72%; }
.bild--unten img { object-position: 50% 78%; }

/* --- Hinweisbanner (Pflegebereich) -----------------------------------------
   Erscheint nur, wenn im Pflegebereich ein Text aktiv ist. Ohne Text gibt es
   kein Element und damit auch keinen Abstand. */

.hinweisbanner {
  background: var(--gruen-tief);
  color: #fff;
}
.hinweisbanner__text {
  margin: 0 auto;
  max-width: 1100px;
  padding: 12px 20px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

/* --- Kopfbereich ---------------------------------------------------------- */

.kopf {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
  z-index: 100;
}
.kopf__reihe {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 14px 0;
}
.kopf__logo { display: block; justify-self: start; }
/* Feste Hoehe, Breite richtet sich danach. Die Bilddatei ist 1024 px breit
   und damit auch auf hochaufloesenden Bildschirmen scharf. */
.kopf__logo img { height: clamp(36px, 8vw, 46px); width: auto; }

.navi ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi a {
  display: block;
  padding: 6px 0;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: .97rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navi a:hover { color: var(--gruen); border-bottom-color: var(--gruen); }

.kopf__telefon {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.kopf__telefon .sym { color: var(--gruen); width: 20px; height: 20px; }
.kopf__nummer { display: block; font-weight: 500; font-size: 1.02rem; line-height: 1.25; white-space: nowrap; }
.kopf__zeiten { display: block; font-size: .76rem; color: var(--text-leise); line-height: 1.25; }

@media (max-width: 559px) {
  .kopf__reihe { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .kopf__knopf { justify-self: stretch; justify-content: center; order: 2; }
}

@media (max-width: 77.99em) {
  .kopf__knopf { padding: .72em 1.1em; font-size: .92rem; }
  .kopf__telefon { grid-column: 1 / -1; order: 3; }
  .navi {
    grid-column: 1 / -1;
    order: 4;
    border-top: 1px solid var(--rand);
    padding-top: 8px;
  }
}

@media (min-width: 78em) {
  .kopf { position: sticky; top: 0; }
  .kopf__reihe {
    grid-template-columns: auto 1fr auto auto;
    justify-content: stretch;
    gap: 24px;
    padding: 16px 0;
  }
  .navi ul { gap: 20px; }
  .kopf__knopf { justify-self: end; }
}

/* --- Bühne (Bild über die volle Breite, Text darüber) --------------------- */

.buehne {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(470px, 66vh, 660px);
  padding: clamp(44px, 7vw, 92px) 0;
  overflow: hidden;
  background: var(--gruen-nacht);
}
.buehne__bild {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.buehne__bild img { object-position: 50% 62%; }

/* Weicher Verlauf hinter dem Text, damit die Schrift ruhig steht. */
.buehne__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(var(--gruen-nacht-rgb), .62) 0%, rgba(var(--gruen-nacht-rgb), .72) 55%, rgba(var(--gruen-nacht-rgb), .86) 100%);
}
@media (min-width: 820px) {
  .buehne__schleier {
    background:
      linear-gradient(100deg, rgba(var(--gruen-nacht-rgb), .9) 0%, rgba(var(--gruen-nacht-rgb), .8) 32%,
                              rgba(var(--gruen-nacht-rgb), .38) 60%, rgba(var(--gruen-nacht-rgb), .06) 88%),
      linear-gradient(to top, rgba(var(--gruen-nacht-rgb), .45), rgba(var(--gruen-nacht-rgb), 0) 45%);
  }
}

.buehne__inhalt { position: relative; }
.buehne__text { max-width: 44rem; color: #fff; }
.buehne h1 { color: #fff; margin-bottom: .45em; text-wrap: pretty; }

/* Dreizeilige Ueberschrift der Startseite: ein h1, drei Zeilen mit
   abnehmender Groesse.

   Vorher hingen Zeile 2 und 3 als em an der h1-Groesse, mit einem max()
   als Mindestwert. Das ist im schmalen Bereich zusammengelaufen: Zeile 1
   schrumpft dort mit der Breite, die beiden anderen bleiben auf ihrem
   Mindestwert stehen. Gemessen stand es bei 320 bis 400 px auf
   27,5 / 20 / 16,8 px - die Stufe von Zeile 1 auf 2 war nur noch 27
   Prozent statt 38 am Rechner, bei gleicher Strichstaerke 800 fuer alle
   drei. Das liest sich als "gleich gross".

   Jetzt hat jede Zeile ihre eigene clamp(), unabhaengig voneinander und
   direkt an der Fensterbreite. Die drei Kurven laufen parallel, deshalb
   bleibt die Stufung auf jeder Breite erhalten: Zeile 1 auf 2 zwischen
   25 und 38 Prozent, Zeile 2 auf 3 zwischen 20 und 26 Prozent.

   Die Untergrenze von Zeile 1 ist gemessen: Bei 320 px passt
   "Facility Management" bis 26 px in eine Zeile, bei 360 px bis 29,5 px.
   1.5rem (24 px) bleibt darunter, die Zeile ist ab 320 px einzeilig.

   Nach dem Entwurf des Kunden gibt es nur ZWEI Groessen: Zeile 2 und 3
   sind gleich gross, der Unterschied entsteht allein ueber die
   Strichstaerke.

   Zeile 3 steht deshalb in der Textschrift, nicht in der
   Ueberschriftenschrift: Von Bricolage Grotesque sind nur die Schnitte
   700 und 800 geladen. Ein font-weight: 400 darauf wuerde der Browser
   auf den naechstliegenden Schnitt abbilden, also wieder auf 700 - die
   Zeile saehe aus wie Zeile 2. DM Sans bringt einen echten normalen
   Schnitt mit, damit ist der Unterschied tatsaechlich sichtbar. */
.buehne__titel { display: block; }
.buehne__titel-1,
.buehne__titel-2,
.buehne__titel-3 { display: block; line-height: 1.12; }
.buehne__titel-1 { font-size: clamp(1.5rem,  5.6vw,  3.4rem); font-weight: 800; }
.buehne__titel-2 { font-size: clamp(1.12rem, 3.45vw, 2.1rem); font-weight: 700; margin-top: .18em; }
.buehne__titel-3 {
  font-size: clamp(1.12rem, 3.45vw, 2.1rem);   /* gleiche Groesse wie Zeile 2 */
  font-family: var(--schrift-text);
  font-weight: 400;
  margin-top: .22em;
}

/* Kurzer gruener Strich zwischen Ueberschrift und Absatz. Die Breite ist
   ein Drittel der Textspalte, also rund ein Drittel der Ueberschrift, und
   waechst und schrumpft mit ihr. Als Prozentwert kann er nie aus der
   Buehne ragen; die Obergrenze haelt ihn am grossen Bildschirm kurz. */
.buehne__strich {
  display: block;
  width: 33%;
  max-width: 220px;
  height: 3px;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
  background: var(--gruen-hell);
  border-radius: 2px;
}
.buehne__unter {
  font-size: clamp(1.02rem, .6vw + .92rem, 1.22rem);
  color: rgba(255, 255, 255, .88);
  max-width: 42ch;
  margin-bottom: 1.8em;
}

/* --- Buehne auf kleinen Geraeten: die beiden Knoepfe in den ersten
   Bildschirm holen ----------------------------------------------------
   Gemessen: Ohne diese Regeln liegen sie auf einem 812 px hohen Telefon
   30 px unterhalb der Kante. Zwei Hebel, beide nur unter 560 px, am
   Rechner aendert sich nichts.

   1. Der Absatz steht auf 1rem statt rund 1,06rem. Das klingt wenig,
      bringt aber eine ganze Zeile weniger (sechs statt fuenf) und damit
      den groessten Teil des Gewinns.
   2. Die Abstaende zwischen Zeile, Ueberschrift, Absatz und Knoepfen
      ruecken enger zusammen.

   Das Polster der Buehne bleibt bewusst unangetastet: Sobald die beiden
   Hebel greifen, ist die Buehne ohnehin so hoch wie ihre Mindesthoehe,
   ein kleineres Polster braechte dann gar nichts mehr - und ein
   kleineres min-height waere genau das, was die Buehne gedraengt
   aussehen liesse. Die Luft ringsum bleibt daher bei 88 px wie bisher. */
@media (max-width: 559px) {
  .buehne .vorspann { margin-bottom: .5em; }
  .buehne h1        { margin-bottom: .3em; }
  .buehne__unter    { font-size: 1rem; margin-bottom: 1.15em; }
}

/* --- Vorteilsleiste ------------------------------------------------------- */

.vorteile {
  background: var(--gruen-zart);
  border-bottom: 1px solid var(--gruen-rand);
  padding: clamp(22px, 3vw, 34px) 0;
}
.vorteile__liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) { .vorteile__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .vorteile__liste { grid-template-columns: repeat(4, 1fr); } }

.vorteile__punkt {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
  font-size: .98rem;
}
.vorteile__punkt .sym { color: var(--gruen); }

/* --- Abschnittsgerüst ----------------------------------------------------- */

.block { padding: var(--luft) 0; }
.block--flaeche { background: var(--flaeche); }

/* Zwei Bloecke, die inhaltlich zusammengehoeren (Gebietsseite: Karte mit
   Ortsliste und darunter der Gebietstext), stehen dichter beieinander:
   der obere ohne Abstand nach unten, der untere mit einem kleinen statt
   dem vollen Abschnittsabstand. */
.block--anschluss-unten { padding-bottom: 0; }
.block--anschluss-oben  { padding-top: clamp(26px, 3.2vw, 44px); }

.block__kopf { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 52px); }
.block__kopf--mitte { margin-inline: auto; text-align: center; }
/* Kopf, auf den direkt die Knopfreihe folgt: dazwischen reicht weniger Luft */
.block__kopf--schluss { margin-bottom: clamp(22px, 2.6vw, 32px); }
.block__kopf--mitte .fuehrungstext { margin-inline: auto; }

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

/* Kachelreihen der Leistungen (.kacheln auf der Startseite,
   .leistungsliste unter dienstleistungen/): Flex mit Umbruch statt Grid,
   damit eine unvollstaendige letzte Reihe MITTIG steht und keine Luecke
   rechts bleibt. Jede Kachel ist genau eine Spalte breit – auch in der
   letzten Reihe. Die Spaltenzahl steht nur in --spalten je Breakpoint;
   die Anzahl der Leistungen spielt keine Rolle. */
.kacheln,
.leistungsliste,
.gebiet__karten {
  --spalten: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kacheln > li,
.leistungsliste > li,
.gebiet__karten > li {
  flex: 0 0 calc((100% - (var(--spalten) - 1) * var(--abstand)) / var(--spalten));
  min-width: 0;
}

.kacheln { --abstand: clamp(16px, 1.8vw, 24px); }
@media (min-width: 560px)  { .kacheln { --spalten: 2; } }
/* Ab 900 px drei Spalten, auch am Desktop (bei sechs Leistungen 3 + 3) */
@media (min-width: 900px)  { .kacheln { --spalten: 3; } }

/* Querkachel "Individuelle Anfrage" unter den Leistungskacheln */
.anfrage-kachel {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 38px);
  background: var(--gruen-zart);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius);
}
.anfrage-kachel__marke {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(22, 32, 26, .12);
  color: var(--gruen);
}
.anfrage-kachel__marke .sym { width: 26px; height: 26px; }
.anfrage-kachel__text h2,
.anfrage-kachel__text h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); margin: 0 0 .35em; }
.anfrage-kachel__text p { margin: 0; color: var(--text-leise); max-width: 62ch; }
.anfrage-kachel__knopf { justify-self: start; }
@media (min-width: 760px) {
  .anfrage-kachel { grid-template-columns: auto 1fr auto; gap: 26px; }
  .anfrage-kachel__knopf { justify-self: end; }
}
.leistungsliste + .anfrage-kachel { margin-top: 0; }
.kacheln + .anfrage-kachel + .knopf-reihe { margin-top: clamp(28px, 3vw, 40px); }

/* Bild-Platzhalter einer Leistung ohne Bild (siehe leistung_bild()) */
.bild__platzhalter {
  position: absolute;
  inset: 0;
  background-color: var(--gruen-zart);
  background-image: repeating-linear-gradient(135deg,
      rgba(var(--gruen-rgb), .06) 0 12px, rgba(var(--gruen-rgb), 0) 12px 24px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5em;
  color: var(--text-leise);
  font-size: .85rem;
}
.bild__platzhalter .sym { width: 30px; height: 30px; color: var(--gruen); opacity: .5; }

.kachel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-rand); }

.kachel__bild {
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

.kachel__koerper {
  position: relative;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kachel__marke {
  position: absolute;
  top: -26px;
  left: 24px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(22, 32, 26, .16);
  color: var(--gruen);
}
.kachel__marke .sym { width: 26px; height: 26px; }

.kachel h3 { margin: 6px 0 .7em; }

.kachel__punkte {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--text-leise);
  font-size: .96rem;
}
.kachel__punkte li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
.kachel__punkte .sym { width: 18px; height: 18px; color: var(--gruen); margin-top: .3em; }

/* In der Fuenferreihe wird es enger: kleinere Schrift und Abstaende. */
@media (min-width: 1180px) {
  .kachel__koerper { padding: 24px 20px 22px; }
  .kachel__marke { top: -23px; left: 20px; width: 46px; height: 46px; }
  .kachel__marke .sym { width: 23px; height: 23px; }
  .kachel h3 { font-size: 1.05rem; margin: 4px 0 .65em; min-height: 2.2em; }
  .kachel__punkte { font-size: .875rem; gap: 7px; margin-bottom: 1.3em; }
  .kachel__punkte li { grid-template-columns: 16px 1fr; gap: 8px; }
  .kachel__punkte .sym { width: 16px; height: 16px; }
  .kachel .mehr { font-size: .9rem; }
}

.mehr {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  align-self: flex-start;
  color: var(--gruen);
  font-weight: 500;
  font-size: .96rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.mehr .sym { width: 16px; height: 16px; transition: transform .2s; }
.mehr:hover { border-bottom-color: var(--gruen); }
.mehr:hover .sym { transform: translateX(4px); }

.hinweis-zeile {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: .9rem;
  color: var(--text-leise);
}

/* --- Für wen wir arbeiten ------------------------------------------------- */

.zielgruppen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 820px) { .zielgruppen { grid-template-columns: repeat(3, 1fr); } }

.zielgruppe {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 28px 26px;
}
.zielgruppe__marke {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--gruen-zart);
  color: var(--gruen);
}
.zielgruppe h3 { margin-bottom: .55em; }
@media (min-width: 820px) { .zielgruppe h3 { min-height: 2.2em; } }
.zielgruppe p { color: var(--text-leise); font-size: .96rem; }

/* --- Region / Über uns ---------------------------------------------------- */

.region__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .region__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.region__bild {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch);
}
.region__bild img { object-position: 50% 40%; }
.region__figur { margin: 0; }
/* Schriftzug auf dem Bild, unten links auf dunklem Verlauf */
.region__schriftzug {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 3vw, 32px) clamp(18px, 2.6vw, 28px);
  background: linear-gradient(to top, rgba(var(--gruen-nacht-rgb), .82), rgba(var(--gruen-nacht-rgb), 0));
  color: #fff;
  font-family: var(--schrift-kopf);
  font-weight: 800;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.region__unterschrift {
  margin-top: 14px;
  color: var(--text-leise);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.region__punkte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 26px;
  list-style: none;
  margin: 2em 0;
  padding: 0;
}
@media (min-width: 620px) { .region__punkte { grid-template-columns: 1fr 1fr; } }

.region__punkt {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: center;
}
.region__punkt .marke {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gruen-zart);
  color: var(--gruen);
}
.region__punkt .marke .sym { width: 20px; height: 20px; }
.region__punkt strong { display: block; font-weight: 500; font-size: .98rem; }

/* --- Einsatzgebiet -------------------------------------------------------- */

.gebiet__karten { --abstand: clamp(16px, 2vw, 24px); }   /* Aufbau siehe .kacheln */
@media (min-width: 620px)  { .gebiet__karten { --spalten: 2; } }
@media (min-width: 1040px) { .gebiet__karten { --spalten: 3; } }

.gebiet__karte {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rand);
  border-top: 3px solid var(--gruen-hell);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--schatten);
}
.gebiet__karte h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .8em;
}
.gebiet__karte h3 .sym { width: 20px; height: 20px; color: var(--gruen); }

/* Startseite: ganze Kachel ist Link auf den Abschnitt unter einsatzgebiet/ */
.gebiet__karte--link {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.gebiet__karte--link h3 { color: var(--text); }
.gebiet__mehr {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  align-self: flex-start;
  color: var(--gruen);
  font-weight: 500;
  font-size: .96rem;
  border-bottom: 2px solid transparent;
}
.gebiet__mehr .sym { width: 16px; height: 16px; transition: transform .2s; }
.gebiet__karte--link:hover,
.gebiet__karte--link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--gruen-rand);
  border-top-color: var(--gruen);
}
.gebiet__karte--link:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: var(--radius); }
.gebiet__karte--link:hover .gebiet__mehr,
.gebiet__karte--link:focus-visible .gebiet__mehr { border-bottom-color: var(--gruen); }
.gebiet__karte--link:hover .gebiet__mehr .sym,
.gebiet__karte--link:focus-visible .gebiet__mehr .sym { transform: translateX(4px); }

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.orte li {
  background: var(--gruen-zart);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .87rem;
  color: var(--text-leise);
}

.merker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 10px 18px;
  background: #fff;
  border: 1px dashed var(--gruen-rand);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--text-leise);
}
.merker .sym { width: 18px; height: 18px; color: var(--gruen); }

/* --- So einfach geht's ---------------------------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px) { .schritte { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .schritte { grid-template-columns: repeat(4, 1fr); } }

.schritt {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 26px 24px;
}
.schritt__zahl {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.schritt h3 { margin-bottom: .5em; }
.schritt p { color: var(--text-leise); font-size: .95rem; }

/* Feine Verbindungslinie zwischen den Schritten */
@media (min-width: 1000px) {
  .schritte > li:not(:last-child) .schritt::after {
    content: "";
    position: absolute;
    top: 46px;
    left: 100%;
    width: clamp(16px, 2vw, 24px);
    border-top: 1px dashed var(--gruen-rand);
  }
}

/* --- Kontaktband ---------------------------------------------------------- */

.kontakt {
  background-color: var(--gruen-tief);
  background-image:
    radial-gradient(1000px 420px at 12% -10%, rgba(var(--gruen-hell-rgb), .34), transparent 70%),
    radial-gradient(760px 420px at 96% 110%, rgba(var(--gruen-hell-rgb), .18), transparent 70%);
  color: #fff;
  padding: var(--luft) 0;
}
.kontakt h2 { color: #fff; }
.kontakt__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 900px) {
  .kontakt__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
.kontakt__text { color: rgba(255, 255, 255, .8); max-width: 44ch; }

.kontakt__wege {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) { .kontakt__wege { grid-template-columns: 1fr 1fr; } }

.weg {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, transform .2s;
}
a.weg:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); }
.weg .marke {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gruen-hell);
  color: var(--gruen-nacht);
}
.weg .marke .sym { width: 22px; height: 22px; }
.weg small { display: block; font-size: .78rem; color: rgba(255, 255, 255, .72); }
.weg b { font-weight: 500; font-size: 1.02rem; }

/* Kachel mit Kopfzeile und Inhalt darunter (Formular, Geschäftszeiten) */
.weg--stapel {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
}
.weg__kopf { display: flex; align-items: center; gap: 14px; }
.weg--stapel .knopf { align-self: flex-start; }
.weg__notiz {
  display: block;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
}
.weg__notiz a { color: rgba(255, 255, 255, .92); }

.zeiten dl { margin: 0; width: 100%; }
.zeiten__zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .93rem;
}
.zeiten__zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.zeiten__zeile dt { margin: 0; color: rgba(255, 255, 255, .78); }
.zeiten__zeile dd { margin: 0; font-weight: 500; }

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

.fuss {
  background: var(--gruen-nacht);
  color: rgba(255, 255, 255, .74);
  padding: clamp(48px, 6vw, 72px) 0 0;
  font-size: .95rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 48px);
}
@media (min-width: 620px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) {
  .fuss__raster {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* Der Hinweis auf das Einsatzgebiet steht unter den rechtlichen Seiten und
   soll sich von ihnen absetzen. */
.fuss__gebiet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.fuss__gebiet .sym { width: 18px; height: 18px; flex: none; color: var(--gruen-hell); }

.fuss__logo { display: inline-block; }
.fuss__logo img { height: clamp(44px, 9vw, 56px); width: auto; }

/* Rueckfallebene: falls das helle Logo auf dem dunklen Grund doch nicht
   gefaellt, traegt diese Platte die normale Fassung. */
.logo-platte {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
}
.logo-platte img { height: clamp(40px, 9vw, 52px); width: auto; }

.fuss__satz { margin-top: 18px; max-width: 34ch; }
.fuss .fuss__social { display: flex; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; }
.fuss .fuss__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--gruen-hell);
  transition: background .2s ease, border-color .2s ease;
}
.fuss .fuss__social a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.fuss .fuss__social .sym { width: 19px; height: 19px; }
.fuss__satz--eng { margin-top: 14px; }

.fuss h4 { color: #fff; margin-bottom: 1em; }

.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }

.fuss__kontakt li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.fuss__kontakt .sym { width: 18px; height: 18px; color: var(--gruen-hell); margin-top: .22em; }

.fuss__schluss {
  margin-top: clamp(38px, 5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 20px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: rgba(255, 255, 255, .58);
}
.fuss__rechtliches { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss__platzhalter em { font-style: normal; opacity: .72; }

/* --- Einblenden beim Scrollen -------------------------------------------- */

html.js .auf {
  opacity: 0;
  transform: translateY(22px);
}
html.js .auf.sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .7, .3, 1);
}
html.js .staffel > *:nth-child(2).auf.sichtbar { transition-delay: .07s; }
html.js .staffel > *:nth-child(3).auf.sichtbar { transition-delay: .14s; }
html.js .staffel > *:nth-child(4).auf.sichtbar { transition-delay: .21s; }
html.js .staffel > *:nth-child(5).auf.sichtbar { transition-delay: .28s; }
html.js .staffel > *:nth-child(6).auf.sichtbar { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .auf,
  html.js .auf.sichtbar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .knopf:hover, .kachel:hover, a.weg:hover,
  .gebiet__karte--link:hover, .gebiet__karte--link:focus-visible { transform: none; }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .kopf { position: static; }
  .kachel, .gebiet__karte, .schritt, .zielgruppe { break-inside: avoid; }
}

/* ===========================================================================
   Unterseiten
   Alles ab hier kam mit dem Umbau zur mehrseitigen Fassung dazu.
   =========================================================================== */

/* --- Kopf: aktiver Menuepunkt und mehr Platz fuer sieben Punkte ----------- */

.navi a.navi__aktiv { color: var(--gruen); border-bottom-color: var(--gruen); }

/* Sieben Menuepunkte brauchen mehr Platz als die vier des ersten Entwurfs:
   zwischen 1120 und 1399 px werden Logo, Abstaende und Telefonblock knapper
   gehalten, damit das Menue in einer Zeile bleibt. */
/* Sieben Menuepunkte brauchen mehr Platz als die vier des ersten Entwurfs.
   Die Bahn ist auf 1240 px begrenzt, breitere Fenster bringen also keinen
   zusaetzlichen Platz: Logo, Abstaende und Telefonblock bleiben auf allen
   Breiten knapper, damit das Menue in einer Zeile steht. Unterhalb von
   1200 px bekommt das Menue wie gehabt eine eigene Zeile. */
@media (min-width: 78em) {
  /* Die Kopfbahn waechst mit der Schrifteinstellung mit: 77,5rem sind bei
     normaler Grundschrift genau die 1240px der uebrigen Bahnen, bei
     groesserer Schrift entsprechend mehr. Ohne das schaltet der
     Umschaltpunkt oben auf eine Reihe, waehrend der Platz dafuer gleich
     bliebe. rem und nicht em, weil body die Schriftgroesse in px setzt -
     em wuerde hier mit 17,5px statt mit der Grundschrift rechnen. */
  .kopf .bahn { max-width: 77.5rem; }
  /* Die Menuereihe fuellt ihre Spalte aus: was uebrig bleibt, verteilt
     sich gleichmaessig auf die fuenf Luecken ('space-between'). Die
     14 px sind damit nur noch das Mindestmass, unter das die Punkte
     nicht zusammenruecken - gebraucht wird es allein bei 1248 px, wo
     die Spalte am knappsten ist. Gezeichnet werden daraus 17,2 px bei
     1248 px, 20,4 bei 1280 und 22,8 ab 1320 px, wo das Logo um die
     vollen 48 px nach links getreten ist. Ein fester Umschaltpunkt fuer
     20 px ist damit ueberfluessig: die Verteilung liefert ab 1280 px von
     selbst mehr. Schriftgroesse bleibt 0,94rem. */
  .navi ul { gap: 14px; justify-content: space-between; }
  .navi a { font-size: .94rem; }
  .kopf__logo img { height: 52px; }
  /* Hier standen 22 px Abstand zwischen Logo und Menue, aus der Leerflaeche
     rechts neben dem letzten Menuepunkt. Diese Flaeche ist mit "Unsere
     Kunden" aufgebraucht, der Abstand faellt deshalb weg; die 18 px
     Reihenluecke (.kopf__reihe, weiter unten) trennen Logo und Menue
     weiterhin.

     Zusaetzlich tritt das Logo nach links aus der Flucht des uebrigen
     Seiteninhalts heraus - in den Rand der Kopfbahn und, wo das Fenster
     breiter ist als die Bahn, darueber hinaus. Der negative Rand
     verkleinert die Gitterspalte des Logos, und genau diese Breite
     bekommt die Menuespalte dazu (sie ist die 1fr-Spalte).

     Der Weg ist das, was links neben dem Logo frei ist: 32 px Bahnrand
     plus die halbe Differenz zwischen Fenster und Bahn (50vw - 620px).
     Gemessen sind das 36 px bei 1248 px Fensterbreite, 52 bei 1280,
     95 bei 1366 und 132 bei 1440. Davon bleiben 16 px als Abstand zum
     Fensterrand stehen - daher 50vw - 604px -, und bei 48 px ist
     Schluss: mehr braucht das Menue nicht, und ein Logo, das noch
     weiter aussen steht, sieht nach Versehen aus statt nach Absicht.
     (50vw zaehlt die Scrollleiste mit; steht eine da, faellt der
     Abstand zum Fensterrand um deren Breite kleiner aus, bleibt aber
     positiv.) */
  .kopf__logo {
    margin-right: 0;
    margin-left: calc(-1 * clamp(0px, 50vw - 604px, 48px));
  }
  .kopf__zeiten { display: none; }   /* Zeiten stehen im Kontaktbereich */
  .kopf__nummer { font-size: .96rem; }
  .kopf__telefon { gap: 8px; }
  .kopf__telefon .sym { width: 18px; height: 18px; }
  .kopf__knopf { padding: .72em 1.15em; font-size: .93rem; }
  .kopf__reihe { gap: 18px; }
}


/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.seitenkopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  padding: clamp(36px, 5vw, 72px) 0 clamp(30px, 4vw, 58px);
}
.seitenkopf h1 { margin-bottom: .35em; text-wrap: pretty; }
.seitenkopf .fuehrungstext { max-width: 62ch; }

/* --- Schmale Textspalte --------------------------------------------------- */

.text-spalte { max-width: 68ch; }
/* Knopfreihe am Ende einer Textspalte braucht Luft zum letzten Absatz */
.text-spalte .knopf-reihe { margin-top: clamp(26px, 3vw, 36px); }
.text-spalte h2 { margin-top: 1.6em; }
.text-spalte h2:first-child { margin-top: 0; }

/* --- Markierter Platzhalter ----------------------------------------------- */

.platzhalter {
  margin: 1.2em 0;
  padding: 18px 20px;
  border: 1px dashed var(--gruen-rand);
  border-radius: var(--radius);
  background-color: var(--gruen-zart);
  background-image: repeating-linear-gradient(135deg,
      rgba(var(--gruen-rgb), .05) 0 14px, rgba(var(--gruen-rgb), 0) 14px 28px);
  color: var(--text-leise);
  font-size: .95rem;
}
.platzhalter b {
  display: block;
  margin-bottom: .3em;
  color: var(--gruen);
  font-family: var(--schrift-kopf);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.platzhalter--mitte { text-align: center; max-width: 46ch; margin-inline: auto; }
/* Platzhalter innerhalb einer Kachel: knapper, damit die Kachel nicht
   auseinanderlaeuft (Gebietsseiten einsatzgebiet/<gebiet>/). */
.platzhalter--knapp {
  display: block;
  margin: 0 0 1.2em;
  padding: 12px 14px;
  font-size: .88rem;
}
.platzhalter--knapp b { font-size: .72rem; }

/* Pfeil nach links, z. B. am Ruecklink "Alle Gebiete ansehen" */
.sym--zurueck { transform: rotate(180deg); }

/* --- Haekchenliste -------------------------------------------------------- */

.hakenliste {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hakenliste li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 1rem;
}
.hakenliste .sym { width: 20px; height: 20px; color: var(--gruen); margin-top: .18em; }
/* Der Knopf darunter braucht Luft, sonst klebt er an der Zeile. */
.hakenliste--schluss + .knopf-reihe { margin-top: clamp(26px, 3.2vw, 40px); }
.hakenliste--schluss {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rand);
  font-weight: 500;
}

/* --- Knopfreihe mittig ---------------------------------------------------- */

.knopf-reihe--mitte { justify-content: center; }

/* --- Uebersicht der Leistungen -------------------------------------------- */

.leistungsliste {
  --abstand: clamp(18px, 2vw, 26px);
  margin: 0 0 clamp(32px, 4vw, 52px);   /* Aufbau siehe .kacheln */
}
@media (min-width: 640px)  { .leistungsliste { --spalten: 2; } }
@media (min-width: 1040px) { .leistungsliste { --spalten: 3; } }

.leistungsliste__eintrag {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.leistungsliste__eintrag:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--gruen-rand);
}
.leistungsliste__bild {
  display: block;
  border-radius: 0;
  aspect-ratio: 4 / 3;
}
/* Ohne Bild (Gebietsseiten einsatzgebiet/<gebiet>/): Die Marke sitzt dann
   oben im Kasten statt ueber der Bildkante - sonst wuerde sie der
   Kastenrand abschneiden. */
.leistungsliste--ohne-bild .leistungsliste__marke {
  position: static;
  margin-bottom: 14px;
}
.leistungsliste--ohne-bild .leistungsliste__koerper { padding-top: 24px; }
.leistungsliste__koerper {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 24px;
}
.leistungsliste__marke {
  position: absolute;
  top: -26px;
  left: 24px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--gruen);
  color: #fff;
  box-shadow: var(--schatten);
}
.leistungsliste__marke .sym { width: 26px; height: 26px; }
.leistungsliste__name {
  display: block;
  margin: 6px 0 .5em;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: clamp(1.14rem, 1.4vw, 1.35rem);
  letter-spacing: -.01em;
  line-height: 1.22;
}
.leistungsliste__kurz {
  display: block;
  margin-bottom: 1.2em;
  color: var(--text-leise);
  font-size: .96rem;
}
.leistungsliste__eintrag:hover .mehr { border-bottom-color: var(--gruen); }
.leistungsliste__eintrag:hover .mehr .sym { transform: translateX(4px); }

/* --- Einzelne Leistungsseite ---------------------------------------------- */

.leistung__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 52px);
  align-items: start;
}
@media (min-width: 900px) {
  .leistung__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.leistung__bild { aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .leistung__bild { position: sticky; top: 104px; } }
/* Textspalte der Leistungsseite: mehrere Zwischenueberschriften (Wortlaut der
   alten Seite), daher kleiner als Abschnittsueberschriften und mit Luft davor */
.leistung__text h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  margin: 1.5em 0 .7em;
}
.leistung__text > :first-child { margin-top: 0; }
.leistung__text p { max-width: 62ch; }

/* Ausfuehrlicher Textabschnitt unter den Kacheln der Leistungsuebersicht.
   Gleiche Zeilenlaenge und Ueberschriftengroesse wie die Textspalte der
   Leistungsseiten, damit beide Abschnitte gleich lesen. */
.uebersicht__text { margin-top: clamp(36px, 4vw, 64px); }
.uebersicht__text h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  margin: 0 0 .7em;
}
.uebersicht__text p { max-width: 62ch; }

/* --- Kontaktband auf den Unterseiten -------------------------------------- */

.band {
  background-color: var(--gruen-tief);
  background-image:
    radial-gradient(1000px 420px at 12% -10%, rgba(var(--gruen-hell-rgb), .34), transparent 70%),
    radial-gradient(760px 420px at 96% 110%, rgba(var(--gruen-hell-rgb), .18), transparent 70%);
  color: #fff;
  padding: clamp(46px, 6vw, 84px) 0;
}
.band h2 { color: #fff; }
.band__inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 900px) {
  .band__inhalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .band .knopf-reihe { justify-content: flex-end; }
}
.band__text { color: rgba(255, 255, 255, .8); max-width: 46ch; }

/* --- Bilderraster (Referenzen) -------------------------------------------- */

.bilderraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 520px) { .bilderraster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .bilderraster { grid-template-columns: repeat(3, 1fr); } }

.bilderraster__feld { margin: 0; }
/* Festes Seitenverhaeltnis: ein Bild kann einzeln getauscht werden, ohne dass
   sich am Layout etwas verschiebt. */
.bilderraster__feld .bild {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rand);
}
/* Startseite "Einblicke" mit gepflegten Bildern: etwas Luft zum Knopf,
   weil die Bildunterschriften bis an ihn heranreichen. */
.bilderraster + .knopf-reihe { margin-top: clamp(28px, 3vw, 40px); }
.bilderraster__feld figcaption {
  margin-top: .6em;
  font-size: .85rem;
  color: var(--text-leise);
}

/* --- Kunden ---------------------------------------------------------------
   Das Raster steht bereit. Ein Eintrag entsteht spaeter durch einen Datensatz
   mit Logo, Name und Link – am Aufbau muss dafuer nichts geaendert werden.  */

.kundenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kunde {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: var(--text);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.kunde:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-rand); }
.kunde--ohne-link:hover { transform: none; box-shadow: var(--schatten); border-color: var(--rand); }
/* Feste Hoehe statt festem Seitenverhaeltnis: So erscheinen ein breites
   Schriftlogo und ein quadratisches Zeichen etwa gleich gross. Ist ein Logo
   sehr breit, begrenzt die Kachelbreite die Hoehe. */
.kunde__logo {
  display: grid;
  place-items: center;
  min-height: 64px;
  background: none;
  border-radius: 0;
}
.kunde__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 64px;
  object-fit: contain;
}
/* Ohne Logo traegt der Name die Flaeche. Gleiche Hoehe wie ein Logo,
   damit die Kacheln einer Reihe gleich hoch bleiben. */
.kunde__logo--schrift {
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  letter-spacing: -.01em;
  text-align: center;
  color: var(--gruen-tief);
}
.kunde__name { font-weight: 500; font-size: .96rem; text-align: center; }
/* Satz zur Zusammenarbeit unter dem Namen */
.kunde__text {
  display: block;
  color: var(--text-leise);
  font-size: .92rem;
  line-height: 1.55;
}
.kunden__hinweis {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  color: var(--text-leise);
  font-size: .95rem;
}

/* --- Kundenleiste auf der Startseite --------------------------------------
   Laeuft durch, Inhalt und Aussehen wie auf kunden/ (inc/kundenband.php).

   Gleich hohe Karten: Die Leiste ist ein Flexraster, die Karten strecken
   sich auf die Hoehe der hoechsten. Massgebend ist FIT IN Lindau - der
   Satz dort ist mit 151 Zeichen gut doppelt so lang wie der kuerzeste.
   Abgeschnitten wird nichts: ein halber Satz mit Auslassungspunkten liest
   sich schlechter als etwas Luft unter den kurzen Texten. Der Text sitzt
   deshalb oben in der Karte, der Rest bleibt frei. */
.kundenband { padding: var(--luft) 0; }
.kundenband__titel { text-align: center; margin-bottom: clamp(26px, 3vw, 40px); }
.kundenband .vorspann { text-align: center; }

/* Das Fenster schneidet ab, der Lauf darin ist breiter als die Seite.
   Waagrecht wird gescrollt statt nur geschnitten: die Scrollleiste zeigt,
   dass sich die Leiste von Hand bewegen laesst - in der laufenden wie in
   der ruhigen Fassung. Senkrecht bleibt es bei hidden, sonst gaebe der
   Schatten der Karten eine zweite Leiste. */
.kundenband__fenster { overflow-x: auto; overflow-y: hidden; }

.kundenband__lauf {
  --kundenband-luecke: clamp(14px, 1.8vw, 24px);
  display: flex;
  align-items: stretch;
  gap: var(--kundenband-luecke);
  width: max-content;
  list-style: none;
  margin: 0;
  /* Platz fuer Schatten und das Anheben beim Hover, sonst wird beides
     vom Fenster abgeschnitten. */
  padding: 6px clamp(20px, 4vw, 32px);
  /* Die Runde dauert so lange, wie die Leiste Karten hat: je Karte
     8,57 s ('--kundenband-takt'). Das war die Geschwindigkeit bei sieben
     Karten und 60 s fester Dauer, rund 38 px je Sekunde bei 1440 px.
     Die Kartenzahl setzt inc/kundenband.php als '--kundenband-karten';
     ohne sie bleibt es bei sieben. So laeuft die Leiste mit jedem neuen
     Kunden gleich schnell, statt mit jedem Kunden schneller zu werden. */
  animation: kundenband-lauf calc(var(--kundenband-karten, 7) * var(--kundenband-takt, 8.57s))
             linear infinite;
}

/* Verschoben wird um genau eine Listenlaenge. Das sind die halbe Breite
   des Laufs plus eine halbe Luecke: in der halben Breite steckt nur die
   Haelfte der Luecke zwischen den beiden Faellen. Ohne diese Korrektur
   springt das Bild bei jedem Durchlauf um eine halbe Luecke. */
@keyframes kundenband-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--kundenband-luecke) / 2)); }
}

.kundenband__karte {
  flex: 0 0 clamp(236px, 72vw, 300px);
  display: flex;
}
.kundenband__karte .kunde { width: 100%; }
/* Der Satz steht oben; die Karte ist so hoch wie die hoechste der Reihe. */
.kundenband__karte .kunde__text { margin-bottom: auto; }

/* Anhalten bei Hover, Fokus und beim Antippen. Ohne JavaScript. */
.kundenband:hover .kundenband__lauf,
.kundenband:focus-within .kundenband__lauf { animation-play-state: paused; }
.kundenband:has(:active) .kundenband__lauf { animation-play-state: paused; }

/* Ruhige Fassung: keine Bewegung, dafuer waagrecht wischbar. Gilt bei
   prefers-reduced-motion und sobald jemand mit der Tastatur hineingeht
   (Klasse aus inc/kundenband.php) - dann kann der Browser das fokussierte
   Element auch wirklich ins Bild holen. Die zweite, nur gespiegelte
   Fassung der Liste verschwindet dabei, sonst stuende jeder Kunde zweimal
   im Wischbereich. */
.kundenband--halt .kundenband__fenster,
.kundenband--halt .kundenband__lauf { scroll-behavior: auto; }
.kundenband--halt .kundenband__fenster {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.kundenband--halt .kundenband__lauf {
  animation: none;
  transform: none;
  width: auto;
}
.kundenband--halt .kundenband__karte { scroll-snap-align: center; }
.kundenband--halt .kundenband__karte[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kundenband__fenster {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .kundenband__lauf { animation: none; transform: none; width: auto; }
  .kundenband__karte { scroll-snap-align: center; }
  .kundenband__karte[aria-hidden="true"] { display: none; }
}

.leerflaeche {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: clamp(220px, 30vw, 340px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--gruen-rand);
  border-radius: var(--radius-gross);
  background-color: var(--gruen-zart);
  background-image: repeating-linear-gradient(135deg,
      rgba(var(--gruen-rgb), .05) 0 14px, rgba(var(--gruen-rgb), 0) 14px 28px);
}
.leerflaeche .sym { width: 34px; height: 34px; color: var(--gruen); opacity: .5; }
.leerflaeche .platzhalter { background: none; border: 0; padding: 0; margin: 0; }

/* --- Über uns ------------------------------------------------------------- */

/* Foto oben: festes Format 3:2, leer als markierte Fläche */
.foto {
  aspect-ratio: 3 / 2;
  margin: 0 0 clamp(28px, 4vw, 44px);
  border-radius: var(--radius-gross);
}
.foto.leerflaeche { min-height: 0; align-content: center; }

/* Sprungziele: zusaetzlicher Abstand, weil noch nicht eingeblendete
   Abschnitte (.auf) beim Sprung um 22px verschoben sind */
.text-spalte h2[id] { scroll-margin-top: 24px; }

.leistungs-links .marke {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gruen-zart);
  color: var(--gruen);
}
.leistungs-links .marke .sym { width: 21px; height: 21px; }

/* Leistungen als verlinkte Liste */
.leistungs-links {
  list-style: none;
  margin: 1.4em 0;
  padding: 0;
  border-top: 1px solid var(--rand);
}
.leistungs-links a {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rand);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.leistungs-links a:hover { color: var(--gruen); }
.leistungs-links__pfeil { width: 20px; height: 20px; color: var(--gruen); transition: transform .2s ease; }
.leistungs-links a:hover .leistungs-links__pfeil { transform: translateX(3px); }

/* --- Einsatzgebiet: Karte ------------------------------------------------- */

.karte {
  margin: 0 0 clamp(34px, 4.5vw, 60px);
  padding: clamp(16px, 2.4vw, 30px);
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}
/* Gesamtkarte und Gebietskarten: inc/karte.svg und inc/karten/*.svg aus
   tools/karte-bauen.py. Gebiet gruen mit dunkler Aussenkontur, angrenzende
   Kreise hell, Orte als Punkte, Gebietsnamen als dunkler Pin. */
.gk { display: block; width: 100%; height: auto; margin-inline: auto; }
/* Bezugspunkt fuer die Sprechblase, die darueber liegt. */
.karte--gesamt { position: relative; }
.karte--gesamt .gk { max-width: 960px; }
/* Grund des Kartenbildes; die Nachbarkreise liegen darauf und heben sich
   durch ihre Umrisslinie ab. */
.gk__grund { fill: #f4f6f4; }
.gk__see { fill: #dbeaf3; stroke: #b9d5e6; stroke-width: 1; }
.gk__nachbar { fill: #f4f6f4; stroke: #cfd8d2; stroke-width: 1; stroke-linejoin: round; }
.gk__kontur { fill: none; stroke: var(--gruen); stroke-width: 4; stroke-linejoin: round; }
.gk__gebiet { fill: #a5d4b7; }
.gk__innengrenze { fill: none; stroke: var(--gruen); stroke-width: .8; stroke-opacity: .45; stroke-linejoin: round; }
/* Die Schriftgroessen stehen im SVG (tools/karte-bauen.py), damit sie zu
   der Groesse passen, mit der die Namen gesetzt wurden. */
.gk text { font-family: var(--schrift-text); paint-order: stroke; stroke-linejoin: round; }
/* Kontrast (WCAG AA): Nachbarnamen 4,62:1, Bodensee 4,67:1 */
.gk__nachbarname { fill: #66726b; stroke: #f4f6f4; stroke-width: 3px; }
.gk__wasser { fill: #4a6a7e; font-style: italic; stroke: #dbeaf3; stroke-width: 3px; }
.gk__leitlinie { fill: none; stroke: var(--text-leise); stroke-width: .8; }
.gk__ort { fill: var(--gruen); stroke: #fff; stroke-width: 2; }
.gk__ortname { fill: var(--text); font-weight: 500; stroke: #fff; stroke-width: 3.5px; }
/* gruener Rand: weiss allein hebt sich von der Gebietsflaeche nur mit
   1,65:1 ab, mit Rand sind es 3,57:1 */
.gk__schild { fill: #fff; stroke: var(--gruen); stroke-width: 1; }
.gk__schild + .gk__ortname { stroke: none; }
/* Firmensitz: Ring statt Punkt, dazu ein weisses Schild mit gruenem Rand
   wie bei den Orten, aber fett - gruenes Schild heisst Gebiet, weisses
   Schild heisst Ort. Kontrast der Schrift auf Weiss 13,6:1. */
.gk__sitz circle { fill: var(--gruen); stroke: #fff; stroke-width: 3; }
.gk__sitz .gk__sitz-kern { fill: #fff; stroke: none; }
.gk__sitzschild { fill: #fff; stroke: var(--gruen); stroke-width: 1.5; }
.gk__sitzname { fill: var(--gruen-tief); font-weight: 700; stroke: none; }
/* Schild im Logo-Gruen, weisse Schrift: 5,91:1 */
.gk__pin rect { fill: var(--gruen); }
.gk__pin text { fill: #fff; font-weight: 700; stroke: none; }

/* --- Orte als Sprung zum Gebiet ------------------------------------------
   Auf der Gesamtkarte fuehrt jeder Ortspunkt zum Abschnitt seines Gebiets
   weiter unten auf derselben Seite. Der Punkt selbst bleibt, wie er ist;
   getroffen wird ein unsichtbarer Kreis darum (.gk__ortziel aus
   tools/karte-bauen.py).

   Der Radius steht hier und nicht im SVG, weil die Karte mitwaechst: ein
   fester Wert in Karteneinheiten waere am Handy zu klein und am PC
   riesig. Die Stufen sind so gewaehlt, dass die Trefferflaeche ueberall
   mindestens 44 x 44 px misst - gemessen am jeweils schmalsten Fenster
   der Stufe:
     bis  30em: 320 px Fenster, Karte 304 px, Massstab 0,317 -> 44 px
     ab   30em: 480 px Fenster, Karte 464 px, Massstab 0,483 -> 44 px
     ab   48em: 768 px Fenster, Karte 665 px, Massstab 0,693 -> 47 px
     ab 68,75em: Karte auf vollen 960 px, Massstab 1,0       -> 44 px
   Innerhalb eines Gebiets duerfen sich die Flaechen ueberlappen - alle
   Punkte eines Gebiets fuehren zum selben Abschnitt. An einer
   Gebietsgrenze kann ein Fingertipp beim Nachbarn landen; das ist der
   Preis fuer eine Flaeche, die man ueberhaupt treffen kann. */
/* Geteilt durch den Zoomfaktor ('--zoom' setzt inc/kartenzoom.php am
   Kartenfenster): die Flaeche waechst sonst beim Aufziehen mit und
   verschluckte noch mehr Nachbarpunkte. So bleibt sie auf dem Schirm
   gleich gross, und vergroessert trifft man genauer. */
.gk__ortziel { fill: transparent; r: calc(70px / var(--zoom, 1)); }
@media (min-width: 30em)    { .gk__ortziel { r: calc(46px / var(--zoom, 1)); } }
@media (min-width: 48em)    { .gk__ortziel { r: calc(34px / var(--zoom, 1)); } }
@media (min-width: 68.75em) { .gk__ortziel { r: calc(22px / var(--zoom, 1)); } }

/* Dasselbe fuer die Gebietsschilder: ein Schild ist am Handy nur rund
   17 px hoch, die durchsichtige Flaeche darum macht daraus gut 45 px.
   Sie steht als Rechteck im SVG (PIN_ZIEL in tools/karte-bauen.py) und
   wird beim Aufziehen bewusst NICHT verkleinert - vergroessert liegen
   die Schilder ohnehin weit auseinander. */
.gk__pinziel { fill: transparent; }

.gk__ortlink, .gk__namelink, .gk__pinlink { cursor: pointer; }

/* Das Schild selbst zeigt Hover und Fokus, nicht die unsichtbare
   Flaeche: ein outline am <a> zoege sich um einen Kasten von Daumengroesse. */
.gk__pinlink:hover .gk__pin rect { fill: var(--gruen-tief); }
.gk__pinlink:focus { outline: none; }
.gk__pinlink:focus-visible .gk__pin rect {
  fill: var(--gruen-tief);
  stroke: #fff;
  stroke-width: 3;
}

.gk__ortlink:hover .gk__ort { fill: var(--gruen-tief); }
.gk__namelink:hover .gk__ortname { fill: var(--gruen); }

/* Sichtbarer Fokus: der Punkt waechst und bekommt einen dunklen Ring.
   Ein outline am <a> zoege sich um die unsichtbare Trefferflaeche und
   waere ein Kreis von der Groesse eines Daumens. */
.gk__ortlink:focus { outline: none; }
.gk__ortlink:focus-visible .gk__ort {
  r: 13px;
  fill: var(--gruen-tief);
  stroke: #fff;
  stroke-width: 4;
}

/* Auf schmalen Schirmen gilt der zweite Beschriftungssatz: groessere
   Schrift, damit die verkleinerte Karte lesbar bleibt (siehe
   tools/karte-bauen.py). Jede Kartenart schaltet dort um, wo ihre eigene
   Schrift zu klein wird - die beiden Punkte liegen weit auseinander:

   Gebietskarten stehen ab 56em zweispaltig neben der Liste und sind dann
   rund 430 px breit; ihre PC-Schrift kommt mit gut 12 px an. Unter 40em
   wird die Karte einspaltig und schmaler, ab da der Handysatz.

   Die Gesamtkarte dagegen erreicht ihre vollen 960 px erst bei rund
   1100 px Fensterbreite. Darunter schrumpft sie mit: gemessen 909 px bei
   1024, 665 px bei 768 und 566 px bei 640 - die Ortsnamen kommen dort mit
   11,8 / 8,7 / 7,4 px an. Deshalb gilt fuer sie der Handysatz bis 1100 px
   und nicht erst ab Telefongroesse. */
.gk__schmal { display: none; }

/* --- Gebietskarten -------------------------------------------------------- */
@media (max-width: 39.9375em) {
  .karte--gebiet .gk__breit { display: none; }
  .karte--gebiet .gk__schmal { display: inline; }
  .karte--gebiet .gk__ort { r: 6.5px; stroke-width: 2.5; }
}

/* --- Gesamtkarte ----------------------------------------------------------
   Unter 1100 px hat die Karte zwei Beschriftungsstaende, umgeschaltet nach
   dem Zoomfaktor (inc/kartenzoom.php setzt data-satz):

     knapp  bei ganzer Ansicht bis Faktor 2,5
            neun Gebietsschilder, je Gebiet ein Ankerort, der
            Ausgangspunkt - bei 375 px mit 12 px lesbar
     voll   ab Faktor 2,5
            alle 70 Ortsnamen und die neun Schilder, wie am PC

   Beide Saetze wachsen mit dem Zoom; ihr Groessenverhaeltnis ist fest
   (rund 2,56 zu 1). Der Wechsel macht die Schrift also immer kleiner -
   die Schwelle bestimmt nur, wie gross der volle Satz dabei ist. Bei 2,5
   sind es 11,7 px bei 375 px Fensterbreite. Begruendung und Messwerte
   stehen bei den Schwellen in inc/kartenzoom.php.

   Ohne JavaScript gibt es kein Zoomen; dann gilt dauerhaft der knappe
   Satz, sonst stuenden dort 70 Namen mit 4,7 px. Die beiden Regelsaetze
   unten stehen deshalb jeweils doppelt: einmal fuer den gezoomten Stand
   und einmal fuer den Fall ohne JavaScript. */
@media (max-width: 1100px) {
  html:not(.js) .karte--gesamt .gk__breit,
  .kartenzoom[data-satz="knapp"] .gk__breit { display: none; }
  html:not(.js) .karte--gesamt .gk__schmal,
  .kartenzoom[data-satz="knapp"] .gk__schmal { display: inline; }
  /* Im knappen Satz sind die Hinweislinien stark verkleinert (1 Einheit
     entspricht bei 375 px Schirmbreite 0,37 px); ohne mehr Staerke waeren
     sie nicht zu sehen. Im vollen Satz stoerte dieselbe Staerke. */
  html:not(.js) .karte--gesamt .gk__leitlinie,
  .kartenzoom[data-satz="knapp"] .gk__leitlinie { stroke-width: 4; }
  html:not(.js) .karte--gesamt .gk__sitz circle,
  .kartenzoom[data-satz="knapp"] .gk__sitz circle { r: 10px; stroke-width: 4; }
  html:not(.js) .karte--gesamt .gk__sitz .gk__sitz-kern,
  .kartenzoom[data-satz="knapp"] .gk__sitz .gk__sitz-kern { display: none; }
  /* Die Punkte sind etwas groesser als am PC: bei 4,5 Einheiten waeren
     sie auf der eingepassten Karte nur 1,4 px gross. Beim Aufziehen
     naehern sie sich wieder dem PC-Wert an, sonst wuerden sie dort zu
     dominant - bei Faktor 3 waeren es sonst knapp 16 px. */
  .karte--gesamt .gk__ort { r: calc(4.5px + 2.5px / var(--zoom, 1)); stroke-width: 3; }
}

/* --- Kartenfenster zum Aufziehen und Schieben ------------------------------
   Das Fenster schneidet ab, die Flaeche darin wird verschoben und
   skaliert. Weil 'transform' die Hoehe im Layout nicht aendert, behaelt das
   Fenster die Hoehe der eingepassten Karte - es wird beim Vergroessern
   also nicht hoeher, und der Text darunter bleibt stehen. */
.kartenzoom { overflow: hidden; }
/* Kein 'will-change: transform'. Es stand hier und sollte das Schieben
   fluessiger machen, hat aber die Schrift unscharf gemacht: Mit
   will-change legt Chrome die Karte in eine eigene Kompositionsebene,
   rastert sie EINMAL bei Faktor 1 und skaliert danach nur noch dieses
   fertige Bild. Gemessen bei 375 px am selben Ausschnitt, Laplace-Varianz
   mit / ohne will-change: Faktor 1  3812 / 4129, Faktor 2  562 / 4141,
   Faktor 3  168 / 9819. Ohne will-change zeichnet Chrome das SVG bei
   jedem Faktor neu und erreicht damit genau die Schaerfe, die derselbe
   Ausschnitt ueber den viewBox hat (9801) - mehr ist nicht zu holen.
   Gekostet hat das nichts: 60 Zoom- und 60 Schiebeschritte brauchen
   16,5 bzw. 16,7 ms je Bild, mit will-change 16,7 ms, kein einziges
   Bild ueber 32 ms. */
.kartenzoom__flaeche { transform-origin: 0 0; }
.kartenzoom[data-zoom="ja"] { cursor: grab; }
.kartenzoom[data-zoom="ja"]:active { cursor: grabbing; }

/* Knopf und Hinweis erscheinen nur, wo es etwas zu bedienen gibt. */
.kartenzoom__bedienung { display: none; }
@media (max-width: 1100px) {
  html.js .kartenzoom__bedienung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 12px 0 0;
  }
}
.kartenzoom__hinweis { font-size: .8rem; color: var(--text-leise); }
/* Bei ganzer Ansicht gibt es nichts zurueckzusetzen. */
.kartenzoom__zurueck[disabled] { opacity: .45; cursor: default; }
.kartenzoom__zurueck[disabled]:hover { border-color: var(--gruen-rand); color: var(--text); transform: none; }

/* Am Handy nutzt die Gesamtkarte die volle Fensterbreite. Sie traegt dort
   neun Gebietsschilder und neun Ortsschilder; jeder Millimeter zaehlt.
   Statt 301 px sind es so 359 px - der Massstab steigt von 0,31 auf 0,37,
   und die Schrift darf im Erzeuger entsprechend kleiner stehen, was den
   Schildern Platz verschafft. Der Quellenvermerk behaelt seinen Rand,
   damit er nicht am Fensterrand klebt. */
/* Bis 44,9375em (719 px) hat .bahn seitlich 20 px Luft, darueber 32 px -
   deshalb endet dieser Block genau dort, sonst bliebe ein Rest stehen. */
@media (max-width: 44.9375em) {
  .karte--gesamt {
    margin-inline: -20px;   /* hebt die seitliche Luft von .bahn auf */
    padding: 8px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .karte--gesamt .karte__quelle { padding-inline: 12px; }
}

.karte__quelle {
  margin-top: clamp(10px, 1.4vw, 16px);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-leise);
  text-align: center;
}
/* Zwei Zeilen: Bereitsteller und Lizenz oben, die Datenquellen-URL
   darunter. Eigene Blockelemente statt <br>, damit jede Zeile fuer sich
   umbricht, wenn der Platz eng wird. balance verteilt die Woerter dabei
   gleichmaessig auf die Zeilen, statt eine letzte Zeile mit einem Wort
   stehen zu lassen. */
.karte__quelle-zeile { display: block; text-wrap: balance; }
.karte__quelle-zeile + .karte__quelle-zeile { margin-top: 3px; }
/* Das BKG gibt die Datenquellen-URL als vollen Text vor, 88 Zeichen ohne
   Leerstelle. Am Handy passt sie in keine Zeile, deshalb darf sie hier
   mitten im Wort umbrechen - sonst stuende sie ueber den Rand hinaus.
   balance ist dafuer das falsche Werkzeug und wird zurueckgenommen. */
.karte__quelle-url { overflow-wrap: anywhere; text-wrap: wrap; }
/* "dl-de/by-2-0" ist der vom BKG vorgegebene Lizenzvermerk und soll
   nicht am Bindestrich auseinandergerissen werden. Er ist kurz genug,
   dass er auch bei 320 px noch in eine Zeile passt. */
.karte__quelle-lizenz { white-space: nowrap; }
.karte__quelle a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.karte__quelle a:hover { color: var(--gruen); }

/* --- Einsatzgebiet: Ortssuche ------------------------------------------- */

/* Ohne JavaScript tut das Feld nichts, also erscheint es auch nicht. Die
   Klasse js setzt inc/kopf.php auf <html>. Siehe inc/ortssuche.php. */
.ortssuche { display: none; }
html.js .ortssuche {
  display: block;
  margin: clamp(26px, 3.4vw, 44px) 0 0;
  background: var(--gruen-zart);
  border: 1px solid var(--gruen-rand);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px);
}
.ortssuche__form { margin: 0; }
.ortssuche__feld-rahmen label { color: var(--text); font-size: 1rem; }

/* Feld und Knopf nebeneinander, am Handy untereinander. */
.ortssuche__zeile { display: grid; gap: 10px; }
@media (min-width: 560px) {
  .ortssuche__zeile { grid-template-columns: 1fr auto; align-items: start; }
}
.ortssuche__knopf { white-space: nowrap; }

.ortssuche__status {
  margin: 12px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.ortssuche__status:empty { display: none; }
/* Kein Treffer: derselbe Ton wie der Hinweis unter den Ortslisten, keine
   Warnfarbe - es ist kein Fehler, sondern eine Einladung zur Anfrage. */
.ortssuche__status--leer { color: var(--text); }

.ortssuche__liste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 22rem;
  overflow-y: auto;
}
.ortssuche__zeile-knopf {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 12px;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: #fff;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.ortssuche__zeile-knopf:hover { border-color: var(--gruen); background: var(--gruen-zart-hover); }
.ortssuche__zeile-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.ortssuche__ort { font-weight: 500; }
/* "bei Pfronten" unter dem Ortsnamen: erst damit ist zu erkennen, warum
   derselbe Name mehrfach in der Liste steht. */
.ortssuche__zusatz {
  grid-column: 1;
  font-size: .86rem;
  color: var(--text-leise);
}
.ortssuche__gebiet {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .86rem;
  color: var(--gruen);
  white-space: nowrap;
}
.ortssuche__quelle { margin: 14px 0 0; }

/* Angesprungenes Gebiet kurz hervorheben, damit nach dem Sprung klar ist,
   welcher Block gemeint war. JavaScript nimmt die Klasse nach 2,6 s
   wieder weg. */
.gebietsblock--treffer {
  outline: 3px solid var(--gruen);
  outline-offset: 10px;
  border-radius: var(--radius-gross);
  animation: treffer-ausblenden 2.6s ease-out forwards;
}
@keyframes treffer-ausblenden {
  0%, 55% { outline-color: var(--gruen); }
  100%    { outline-color: rgba(var(--gruen-rgb), 0); }
}
/* Der Block bekommt per JavaScript tabindex="-1" und Fokus, damit
   Screenreader nach dem Sprung an der richtigen Stelle weiterlesen. Der
   Rahmen des Browsers waere dort doppelt - die Hervorhebung oben zeigt die
   Stelle schon an. */
.gebietsblock[tabindex]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .gebietsblock--treffer { animation: none; }
}

/* --- Einsatzgebiet: ein Block je Gebiet ---------------------------------- */

.gebietsseite {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
}
.gebietsseite__liste {
  background: #fff;
  border: 1px solid var(--rand);
  border-top: 3px solid var(--gruen-hell);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--schatten);
}
.gebietsseite__liste h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin-bottom: .5em; }
.gebietsseite__liste p { color: var(--text-leise); margin-bottom: 0; }
.gebietsseite__liste .hakenliste {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rand);
}
/* Kleiner Hinweis unter der Ortsliste: die Liste nennt nur Beispiele. */
.gebietsseite__hinweis {
  margin: 14px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-leise);
}
/* Link von der Uebersicht auf die eigene Seite des Gebiets */
.gebietsseite__link { margin: 16px 0 0; }
.karte--gebiet { margin: 0; }

/* Am Handy bilden Ueberschrift, Karte und Ortsliste EINEN Kasten:
   Ueberschrift, Karte mit Quellenvermerk, Trennlinie, Satz, Orte.
   Im HTML bleibt die Ueberschrift das erste Element (sie wird also
   zuerst vorgelesen); "display: contents" loest den inneren Kasten der
   Textkarte nur optisch auf, damit sich seine Teile einzeln einordnen
   lassen, und der Kasten der Karte entfaellt zugunsten des aeusseren. */
@media (max-width: 899px) {
  .gebietsseite {
    gap: clamp(14px, 2.5vw, 20px);
    background: #fff;
    border: 1px solid var(--rand);
    border-top: 3px solid var(--gruen-hell);
    border-radius: var(--radius);
    padding: clamp(20px, 2.6vw, 30px);
    box-shadow: var(--schatten);
  }
  .gebietsseite__liste { display: contents; }
  .gebietsseite__liste h2 { order: 1; margin-bottom: 0; }
  .karte--gebiet {
    order: 2;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .gebietsseite__liste p {
    order: 3;
    padding-top: clamp(16px, 3vw, 22px);
    border-top: 1px solid var(--rand);
  }
  .gebietsseite__liste .hakenliste { order: 4; margin: 0; padding-top: 0; border-top: 0; }
  /* steht unter der Liste, ohne die Trennlinie des Satzes darueber
     (gleiche Genauigkeit wie die Regel fuer den Satz noetig) */
  .gebietsseite__liste .gebietsseite__hinweis { order: 5; padding-top: 0; border-top: 0; }
  .gebietsseite__liste .gebietsseite__link { order: 6; padding-top: 0; border-top: 0; }
  /* Die Kaesten trennen die Gebiete schon, die Linie dazwischen entfaellt */
  .gebietsblock + .gebietsblock { padding-top: 0; border-top: 0; }
}

/* Am PC nebeneinander: beide Spalten gleich hoch, die Karte mittig in
   ihrer Flaeche. Hohe Karten sind auf 560 px Hoehe begrenzt - genau die
   Hoehe, mit der sie gebaut werden (tools/karte-bauen.py), sie werden
   also nicht verkleinert und die Ortsnamen bleiben ueber 12 px.
   Die Breite wird im selben Verhaeltnis begrenzt ('--gk-seite' steht im
   SVG), damit neben einer hohen Karte kein leerer Streifen entsteht.
   Flachere Karten erreichen die Grenze nicht und fuellen die Spalte. */
@media (min-width: 900px) {
  .gebietsseite {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .karte--gebiet {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .karte--gebiet .gk {
    --gk-hoehe-max: 560px;
    max-height: var(--gk-hoehe-max);
    max-width: calc(var(--gk-hoehe-max) * var(--gk-seite, 99));
  }
  /* Bleibt im Kasten Luft, steht der Text mittig statt oben */
  .gebietsseite__liste {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Die Bloecke stehen untereinander, getrennt durch eine feine Linie.
   'pfad' aus $gebiete ist die Sprungmarke; scroll-margin haelt den
   Abstand zum Seitenkopf, wenn ein Anker angesprungen wird. */
.gebietsblock { scroll-margin-top: 24px; }
.gebietsblock + .gebietsblock {
  margin-top: clamp(34px, 4.5vw, 60px);
  padding-top: clamp(34px, 4.5vw, 60px);
  border-top: 1px solid var(--rand);
}
.gebietsblock + .hakenliste--schluss { margin-top: clamp(30px, 4vw, 48px); }

/* --- Kontaktseite --------------------------------------------------------- */

.kontaktseite {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .kontaktseite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.formular { display: grid; gap: 18px; }
.formular__hinweis {
  display: flex;
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--gruen-rand);
  border-radius: var(--radius);
  background: var(--gruen-zart);
  font-size: .9rem;
  color: var(--text-leise);
}
.formular__hinweis .sym { width: 18px; height: 18px; flex: none; color: var(--gruen); margin-top: .12em; }

.feld { display: grid; gap: 6px; }
.feld label { font-size: .92rem; font-weight: 500; }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: #fff;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--text);
}
.feld textarea { resize: vertical; min-height: 7em; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(var(--gruen-rgb), .16);
}
.feld-paar { display: grid; gap: 18px; }
@media (min-width: 560px) { .feld-paar { grid-template-columns: 1fr 1fr; } }

.feld--haken {
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
}
.feld--haken input { width: 20px; height: 20px; margin-top: .15em; accent-color: var(--gruen); }
.feld--haken label { font-weight: 400; font-size: .92rem; color: var(--text-leise); }

.formular__meldung {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--gruen-zart);
  border: 1px solid var(--gruen-rand);
  font-size: .93rem;
}

.kontaktwege {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Die Kontaktwege stehen hier auf hellem Grund, nicht im dunklen Band. */
.weg--hell {
  background: #fff;
  border-color: var(--rand);
  color: var(--text);
  box-shadow: var(--schatten);
}
a.weg--hell:hover { background: var(--gruen-zart); border-color: var(--gruen-rand); }
.weg--hell small { color: var(--text-leise); }
.weg--hell p { font-size: .96rem; color: var(--text-leise); }
.weg--hell .zeiten__zeile { border-bottom-color: var(--rand); }
.weg--hell .zeiten__zeile dt { color: var(--text-leise); }

/* --- Rechtliches im Fuss -------------------------------------------------- */

.fuss__rechtliches a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.fuss__rechtliches a:hover { color: #fff; text-decoration: underline; }

/* --- Bildflaechen als span ------------------------------------------------ */

span.bild { display: block; }

/* ===========================================================================
   Kontaktformular: Meldungen, Feldfehler, Falle fuer Bots
   =========================================================================== */

.meldung {
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: .96rem;
}
.meldung .sym { width: 20px; height: 20px; flex: none; margin-top: .12em; }
.meldung b { display: block; }

.meldung--gut {
  background: var(--gruen-zart);
  border: 1px solid var(--gruen-rand);
  color: var(--text);
}
.meldung--gut .sym { color: var(--gruen); }
.meldung--gut a { color: var(--gruen-dunkel); }

.meldung--schlecht {
  background: #fdf3f2;
  border: 1px solid #f0cfcb;
  color: #7a2318;
}
.meldung--schlecht .sym { color: #b3392a; }

.feld__pflicht { color: var(--gruen); font-weight: 500; }

.feld__fehler {
  display: block;
  margin-top: 4px;
  font-size: .88rem;
  color: #a33324;
}
.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: #c4584a;
  background: #fffafa;
}
.feld input[aria-invalid="true"]:focus,
.feld select[aria-invalid="true"]:focus,
.feld textarea[aria-invalid="true"]:focus {
  border-color: #a33324;
  box-shadow: 0 0 0 3px rgba(163, 51, 36, .16);
}

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

/* Falle fuer Bots: aus dem Blickfeld geschoben statt display:none, weil
   manche Bots ausgeblendete Felder erkennen und dann auslassen. Fuer
   Tastatur und Vorlesewerkzeuge ist das Feld ueber tabindex="-1" und
   aria-hidden ohnehin nicht erreichbar. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}