/* ==========================================================================
   ein Segen sein — Stylesheet
   Gestaltet für ältere und wenig technikaffine Menschen, ansprechend für alle.
   Grundsätze: grosse Schrift, hoher Kontrast (WCAG AAA), grosse Klickflächen,
   keine Hover-only-Funktionen, keine externen Ressourcen.
   ========================================================================== */

:root {
  /* Schriftgrösse-Stufen werden per JS auf dieses Merkmal gesetzt (20/23/26px) */
  --basis: 20px;

  /* Alle Textfarben erreichen >= 7:1 (WCAG AAA) auf Papier, Karte und Salbei.
     Die Aquarelltöne wurden dafür leicht abgedunkelt (siehe .claude/DESIGN.md §2). */
  --dunkel:      #263621;   /* Waldgrün – Titel, dunkle Flächen; 7.2:1 auf Ocker */
  --dunkel-weich:#3c5230;
  --gold:        #e9bc5c;   /* warmes Ocker wie das Laub */
  --gold-hell:   #f0cd7f;   /* Hover der Ocker-Knöpfe: heller statt dunkler, damit der Text lesbar bleibt */
  --gold-dunkel: #cf9b2c;   /* nur Schmuck (Sterne), nicht für Text */
  --akzent:      #794118;   /* Rehbraun – Links/Aktionen, 7.1:1 auf Salbei */
  --akzent-hover:#5f3312;   /* Hover dunkler statt heller, damit der Kontrast nicht sinkt */
  --himmel:      #e4edf2;
  --hintergrund: #fbf8ef;   /* Aquarellpapier */
  --karte:       #fffdf7;
  --ruhe:        #eef2e2;   /* Salbei-Lasur für abgesetzte Abschnitte */
  --linie:       #e0d9c3;
  --text:        #272a22;
  --text-leise:  #4e5045;   /* 7.2:1 auf Salbei */

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

  --breite: 1260px;
  --radius: 22px;
  --schatten: 0 2px 4px rgba(38,54,33,.06), 0 10px 28px rgba(38,54,33,.09);
  --organisch: 42px 18px 38px 22px / 26px 40px 20px 36px; /* leicht unregelmässige, "handgemalte" Ecken */
}

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

html {
  font-size: var(--basis);
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem; /* damit Sprungziele nicht unter dem Kopf landen */
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--hintergrund);
}

/* ---------- Grundtypografie ---------- */
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.22; color: var(--dunkel); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h4 { font-size: 1.15rem; }
p, li { max-width: 65ch; }
p { margin: 0 0 1em; }

a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: .09em; }
a:hover { color: var(--akzent-hover); }

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
a.skip:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 1rem 1.5rem;
  overflow: visible; clip: auto; clip-path: none;
  background: var(--dunkel); color: #fff; font-weight: 700; text-decoration: none;
  border-radius: 10px; outline: 3px solid var(--gold); outline-offset: 2px;
}

.leise { color: var(--text-leise); }
.zentriert { text-align: center; }
.zentriert p, .zentriert li { margin-inline: auto; }

/* ---------- Kopfbereich ---------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,239,.96);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(140%) blur(6px);
}
.kopf-innen { display: flex; align-items: center; gap: .75rem; min-height: 4.6rem; padding-block: .6rem; }

.marke { font-family: var(--serif); font-size: 1.25rem; font-weight: 700; color: var(--dunkel); text-decoration: none; line-height: 1.1; flex: 0 0 auto; }
.marke span { display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-leise); margin-top: .25rem; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.hauptnav ul { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.hauptnav a {
  display: block; padding: .6rem .7rem; color: var(--dunkel); text-decoration: none;
  font-weight: 600; font-size: .82rem; border-radius: 999px; white-space: nowrap;
}
.hauptnav a:hover { background: var(--ruhe); color: var(--dunkel); }

/* Schriftgrössen-Schalter */
.schrift { display: flex; align-items: center; gap: .25rem; }
.schrift-titel { font-size: .7rem; font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.schrift button {
  width: 2.3rem; height: 2.3rem; min-height: 0; font-family: var(--serif); font-weight: 700;
  border: 1px solid var(--linie); background: var(--karte); color: var(--dunkel);
  border-radius: 50%; cursor: pointer; line-height: 1; padding: 0;
}
.schrift button:hover { background: var(--ruhe); }
.schrift button[aria-pressed="true"] { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }
.schrift .s1 { font-size: .8rem; } .schrift .s2 { font-size: 1rem; } .schrift .s3 { font-size: 1.2rem; }

/* Menüschalter (mobil) */
.menu-schalter {
  display: none; align-items: center; gap: .5rem;
  background: var(--dunkel); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: .9rem; font-weight: 700; padding: .75rem 1rem; min-height: 3rem; cursor: pointer;
}
.menu-schalter .balken { display: inline-block; width: 1.1rem; height: 2px; background: #fff; position: relative; }
.menu-schalter .balken::before, .menu-schalter .balken::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; }
.menu-schalter .balken::before { top: -6px; } .menu-schalter .balken::after { top: 6px; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.5rem; padding: .9rem 1.6rem;
  font: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer; text-align: center;
  transition: transform .12s ease, background-color .12s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(1px); }
.knopf-primaer { background: var(--dunkel); color: #fff; }
.knopf-primaer:hover { background: #1e2d1a; color: #fff; }
.knopf-gold { background: var(--gold); color: var(--dunkel); }
.knopf-gold:hover { background: var(--gold-hell); color: var(--dunkel); }
.knopf-rand { background: var(--karte); color: var(--dunkel); border-color: var(--dunkel); }
.knopf-rand:hover { background: var(--dunkel); color: #fff; }
.knopf-klein { min-height: 3rem; padding: .7rem 1.1rem; font-size: .92rem; }
.knopf-voll { width: 100%; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

.telefon-knopf { white-space: nowrap; }

/* ---------- Abschnitte ---------- */
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sek-weiss { background: var(--karte); }
.sek-ruhe  { background: var(--ruhe); }
.sek-dunkel { background: var(--dunkel); color: #eef0e6; }
.sek-dunkel h2, .sek-dunkel h3 { color: #fff; }
.sek-dunkel a { color: var(--gold); }

.sek-kopf { max-width: 62ch; margin-bottom: 2.6rem; }
.sek-kopf.zentriert { margin-inline: auto; text-align: center; }
/* Einleitungen in normaler Textfarbe: in Grau wirkten sie blass und die
   Titel darüber verloren ihren Halt. */
.sek-kopf p { font-size: 1.1rem; line-height: 1.6; color: var(--text); }
.sek-dunkel .sek-kopf p { color: #d5dbc8; }

.augenbraue {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: .7rem;
}
.sek-dunkel .augenbraue { color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center; overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--himmel) url("../img/hero-himmel.jpg") center top / cover no-repeat;
}
.hero-karte {
  position: relative; z-index: 1;
  max-width: 50rem; margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.8rem);
  background: rgba(255,253,247,.9); border-radius: var(--organisch);
  box-shadow: var(--schatten);
}
/* Die Landschaft mit den Rehen: auf schmalen Bildschirmen auf die Mitte
   zugeschnitten, damit beide Rehe sichtbar bleiben. Oben weich auslaufend. */
.hero-landschaft {
  width: 100%; height: clamp(11rem, 27vw, 23rem); margin-top: clamp(-4rem, -5vw, -1.5rem);
  object-fit: cover; object-position: 52% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%);
          mask-image: linear-gradient(180deg, transparent 0, #000 28%);
}
.hero-karte p { margin-inline: auto; }
.hero .knopf-reihe { justify-content: center; }
.hero-gitter { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.hero p.vorspann { font-size: 1.18rem; }
.hero .leitsatz {
  font-family: var(--serif); font-style: italic; font-size: 1.22rem; color: var(--dunkel);
  border: 0; padding: 0 0 .9rem; margin: 1.6rem auto 0; max-width: 34ch;
  text-wrap: balance; /* Zeilen gleich lang statt einzelnes Wort auf der zweiten Zeile */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M1 5c10-5 20-5 30 0s20 5 30 0 20-5 30 0 18 4 28 0' fill='none' stroke='%23e9bc5c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center bottom / 9rem 8px no-repeat;
}
.hero-bild { border-radius: var(--organisch); overflow: hidden; box-shadow: var(--schatten); }
.hero-hinweis { margin-top: 1.1rem; font-size: .95rem; color: var(--text-leise); }

/* ---------- Vertrauensleiste ---------- */
.vertrauen { background: var(--dunkel); color: #fff; padding-block: 1.6rem; }
.vertrauen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .9rem 2rem; }
.vertrauen li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; font-size: .98rem; max-width: none; }
.haken { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--gold); }

/* ---------- Karten ---------- */
.karten { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Ohne min-width:0 erzwingt der laengste Inhalt die Spaltenbreite und das Raster laeuft ueber. */
.karten > *, .leistungen > *, .referenzen > *, .fuss-gitter > *,
.hero-gitter > *, .preis-gitter > *, .team-gitter > *, .kontakt-gitter > *,
.flyer-gitter > *, .termin > * { min-width: 0; }
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--schatten);
}
.sek-weiss .karte { background: var(--hintergrund); }
.karte h3 { margin-top: 0; }
.karte ul { margin: 0; padding-left: 1.2rem; }
.karte li { margin-bottom: .45rem; }
.karte li:last-child { margin-bottom: 0; }
.karte-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; background: var(--gold); color: var(--dunkel);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;
}

/* ---------- Leistungen ---------- */
.leistungen { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
.leistungen { gap: 2rem 2.2rem; }
/* Früher neun einzelne Kästen mit Rand: das wirkte zerhackt. Jetzt nur ein
   kurzer Farbstrich über jedem Eintrag, der Abschnitt bleibt eine Fläche. */
.leistung { padding-top: 1rem; border-top: 3px solid var(--bereich, var(--gold)); }
.leistung h3, .leistung h4 { font-size: 1.2rem; margin: 0 0 .35rem; }
.leistung p { margin: 0; }

/* ---------- Preis ---------- */
.preis-gitter { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.preis-zahl { font-family: var(--serif); font-size: clamp(2.4rem, 2rem + 2.5vw, 3.4rem); font-weight: 700; color: var(--dunkel); line-height: 1.1; }
.preis-zusatz { font-size: 1rem; color: var(--text-leise); }
.hinweis-box { background: var(--gold); color: var(--dunkel); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem); }
.hinweis-box h3 { margin-top: 0; }
.hinweis-box ul { padding-left: 1.2rem; }
.hinweis-box a { color: #4a230a; }  /* 7.7:1 auf Ocker */
.preis-hinweis { padding-top: 1rem; border-top: 3px solid var(--gold); }
.preis-hinweis h3 { font-size: 1.3rem; margin: 0 0 .6rem; }
.preis-hinweis p:last-child { margin-bottom: 0; }

/* ---------- Zwei Angebotsbereiche: gleicher Aufbau, eigene Akzentfarbe ----------
   Regel (DESIGN.md §4): Der Bereichsname IST der Titel. Kein Etikett plus
   zweite Überschrift darunter, sonst steht dasselbe zweimal und der Titel geht unter. */
.bereich-alltag  { --bereich: var(--gold);  --bereich-hell: #fbefd3; --bereich-text: var(--dunkel); }
.bereich-technik { --bereich: #3f6e8c;      --bereich-hell: var(--himmel); --bereich-text: #1f3f55; }

.bereiche { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; }
.bereiche > * { min-width: 0; }
.bereiche-preise { align-items: start; }
.bereich {
  display: flex; flex-direction: column;
  background: var(--karte); border: 1px solid var(--linie); border-top: 6px solid var(--bereich);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--schatten);
}
.bereich > ul { margin: 0 0 1.8rem; }
.bereich > .knopf { margin-top: auto; align-self: flex-start; }
.bereich .preis-zahl { margin: .2rem 0 .5rem; }

/* Kopf eines Bereichs: Linien-Symbol im Farbkreis + Bereichsname als Titel */
.bereich-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: .8rem; }
.bereich-kopf h3, .bereich-kopf h4 { margin: 0; color: var(--bereich-text); }
.bereich-kopf h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); }
.bereich-symbol {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--bereich-hell); color: var(--bereich-text); box-shadow: inset 0 0 0 2px var(--bereich);
}
.bereich-symbol svg { width: 1.7rem; height: 1.7rem; }
.bereich-lead { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.2rem; }

/* Aufzählung mit Haken in Bereichsfarbe statt Standardpunkten */
.haken-liste { list-style: none; padding: 0; margin: 0; }
.haken-liste li { position: relative; padding-left: 2rem; margin-bottom: .55rem; line-height: 1.55; max-width: none; }
.haken-liste li:last-child { margin-bottom: 0; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 1.2rem; height: 1.2rem;
  background: var(--bereich-text, var(--dunkel));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Detailblöcke #alltag / #technik */
.bereich-block + .bereich-block { margin-top: clamp(3.5rem, 7vw, 5rem); }
.bereich-block > .bereich-kopf { margin-bottom: .6rem; }
.bereich-block > .bereich-lead { max-width: 62ch; margin-bottom: 2rem; }
.bereich-verweis { margin: 2rem 0 0; font-size: 1.08rem; font-weight: 600; }

/* Einstiegspaket gehört in die Technik-Preisbox (Entscheid der Betreiber,
   ADR-021): Fläche in Bereichsfarbe ohne eigenen Rahmen. */
.preis-paket { margin-top: 1rem; padding: 1.2rem 1.4rem; background: var(--bereich-hell); border-radius: 16px; }
.preis-paket h4 { font-size: 1.2rem; margin: 0; color: var(--bereich-text); }
.preis-paket .preis-zusatz { margin-bottom: .8rem; }
.preis-bedingungen { margin-top: 2rem; }

/* ---------- Schutz-Block ---------- */
.schutz-liste { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.schutz-liste li { display: flex; gap: .85rem; align-items: flex-start; font-size: 1.03rem; max-width: none; }
.nie {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: var(--dunkel);
  font-weight: 700; font-size: .95rem; margin-top: .1rem;
}
.rueckruf {
  background: var(--gold); color: var(--dunkel); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem); font-size: 1.12rem; font-weight: 600; max-width: 60ch;
}
.rueckruf strong { display: block; font-family: var(--serif); font-size: 1.3rem; margin-bottom: .4rem; }
.rueckruf a { color: #4a230a; font-weight: 700; }

/* ---------- Termine ---------- */
.termine { display: grid; gap: 1.2rem; }
.termin {
  display: grid; grid-template-columns: 1fr; gap: .4rem 1.5rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem 1.6rem;
}
.termin-datum {
  font-family: var(--serif); font-weight: 700; color: var(--akzent); font-size: 1.05rem; white-space: nowrap;
}
.termin h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.termin p { margin: 0; color: var(--text-leise); }
.termin-ort { font-weight: 600; color: var(--dunkel); }
.keine-termine { max-width: 62ch; }

/* ---------- Referenzen ---------- */
.zitat-gross {
  font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-style: italic;
  line-height: 1.45; color: var(--dunkel); max-width: 38ch; margin: 0;
}
.zitat-gross cite { display: block; font-family: var(--sans); font-style: normal; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-leise); margin-top: 1rem; }
.referenzen { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.referenz { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.sterne { color: var(--gold-dunkel); font-size: 1.15rem; letter-spacing: .1em; margin-bottom: .6rem; }
.referenz blockquote { margin: 0 0 1.2rem; font-size: 1rem; }
.referenz blockquote p:last-child { margin-bottom: 0; }
.referenz footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie); font-weight: 700; color: var(--dunkel); font-size: .95rem; }
.referenz footer span { display: block; font-weight: 400; color: var(--text-leise); font-size: .88rem; }

/* ---------- Team ---------- */
.team-gitter { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.team-bild { border-radius: var(--organisch); overflow: hidden; box-shadow: var(--schatten); }
.person { margin-bottom: 1.8rem; }
.person h3 { margin-bottom: .3rem; }
.person .rolle { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); margin: 0 0 .6rem; }

/* ---------- Einzugsgebiet ---------- */
/* Karte als Bild statt Google-Embed (keine externen Ressourcen); ohne eigenen Rahmen,
   nur die organische Ecke wie die Fotos, damit es eine Rahmenebene bleibt. */
.gebiet-karte { margin: 0; max-width: 30rem; border-radius: var(--organisch); overflow: hidden; box-shadow: var(--schatten); background: var(--hintergrund); }
.gebiet-karte img { display: block; width: 100%; height: auto; }
/* Legende der zwei Zonen; Farben = Füllung im Kartenbild (.claude/einzugsgebiet.py) auf Papier */
.gebiet-legende { list-style: none; margin: 0; padding: .9rem 1.2rem 0; }
.gebiet-legende li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .5rem; line-height: 1.5; max-width: none; }
.gebiet-legende .zone { flex: 0 0 auto; width: 1.6rem; height: 1.1rem; margin-top: .2rem; border: 2px solid var(--dunkel); border-radius: 4px; }
.zone-inklusive  { background: rgba(60, 82, 48, .34); }
.zone-zusaetzlich { background: rgba(60, 82, 48, .12); }
/* Quellenhinweis, von der OSM-Lizenz (ODbL) verlangt */
.gebiet-karte figcaption { padding: .2rem 1.2rem .6rem; font-size: .8rem; line-height: 1.4; color: var(--text-leise); text-align: right; }
.gebiet-liste { margin: 1.2rem 0 1.4rem; }
/* Zwischen 900 und 1199 px wäre die Kartenspalte zu schmal und die Ortsnamen zu klein:
   dort Karte unter der Liste, bis 30rem breit. */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-gitter.gebiet-gitter { grid-template-columns: 1fr; }
}

/* ---------- Häufige Fragen ---------- */
.fragen { max-width: 820px; }
.frage { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; margin-bottom: .9rem; }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem; min-height: 3.5rem; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; color: var(--dunkel); list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font-family: var(--serif); font-size: 1.7rem; line-height: 1; color: var(--akzent); flex: 0 0 auto; }
.frage[open] summary::after { content: "–"; }
.frage summary:hover { background: var(--ruhe); border-radius: 18px; }
.frage .antwort { padding: 0 1.4rem 1.3rem; }
.frage .antwort p:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.kontakt-gitter { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.kontakt-wege { display: grid; gap: 1rem; }
.kontakt-weg {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.8rem, 3vw, 1.1rem); text-decoration: none;
  background: var(--karte); border: 2px solid var(--dunkel); border-radius: var(--radius);
  /* schmal weniger Innenabstand: sonst passt die Telefonnummer bei 360 px und
     grösster Schrift nicht auf eine Zeile */
  padding: 1.2rem clamp(1rem, 5vw, 1.4rem); min-height: 5rem; color: var(--dunkel);
}
.kontakt-weg:hover { background: var(--dunkel); color: #fff; }
.kontakt-weg:hover .kw-klein { color: #d5dbc8; }
.kontakt-weg svg { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; }
.kw-klein { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise); }
.kw-gross { display: block; font-size: 1.2rem; font-weight: 700; font-family: var(--serif); word-break: break-word; }

form .feld { margin-bottom: 1.2rem; }
form label { display: block; font-weight: 700; margin-bottom: .4rem; color: var(--dunkel); }
form .hilfe { font-weight: 400; font-size: .88rem; color: var(--text-leise); display: block; }
input[type="text"], input[type="email"], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: .85rem 1rem; min-height: 3.4rem;
  background: var(--karte); border: 2px solid var(--linie); border-radius: 16px;
}
input:focus, textarea:focus { border-color: var(--dunkel); }
textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.formular-hinweis { font-size: .95rem; color: var(--text-leise); margin-top: 1rem; }
.formular-hinweis strong { color: var(--dunkel); }

/* ---------- Flyer ---------- */
.flyer-gitter { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.flyer {
  display: flex; gap: 1.2rem; align-items: center; text-decoration: none;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem;
  color: var(--dunkel);
}
.fuss .flyer { color: var(--dunkel); }  /* sonst gilt .fuss a (weiss) auf heller Karte */
.flyer:hover { border-color: var(--dunkel); }
.flyer img { width: 68px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); flex: 0 0 auto; }
.flyer .ft { font-weight: 700; font-family: var(--serif); font-size: 1.1rem; display: block; }
.flyer .fk { font-size: .88rem; color: var(--text-leise); }

/* ---------- Fuss ---------- */
.fuss { background: var(--dunkel); color: #d5dbc8; padding-block: 3.5rem 2rem; }
.fuss h2, .fuss h3 { color: #fff; font-size: 1.15rem; }
.fuss a { color: #fff; }
.fuss-gitter { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .6rem; }
.sozial { display: flex; flex-wrap: wrap; gap: .7rem; }
.sozial a {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  border: 1px solid #62785a; border-radius: 999px; padding: .7rem 1rem; min-height: 3rem; font-weight: 600; font-size: .92rem;
}
.sozial a:hover { background: var(--dunkel-weich); }
.sozial svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.fuss-unten { border-top: 1px solid #4b6143; padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; font-size: .9rem; }
.fuss-unten p { margin: 0; }

/* ---------- Feste Anrufleiste (mobil) ---------- */
.ruf-leiste {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--dunkel); border-top: 2px solid var(--gold);
  padding: .6rem; gap: .6rem;
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.ruf-leiste a { flex: 1 1 0; min-height: 3.4rem; font-size: .98rem; }

/* ==========================================================================
   Ab hier: grössere Bildschirme
   ========================================================================== */
@media (min-width: 560px) {
  .karten, .leistungen, .referenzen, .flyer-gitter { grid-template-columns: repeat(2, 1fr); }
  .vertrauen ul { grid-template-columns: repeat(2, 1fr); }
  .termin { grid-template-columns: 11rem 1fr; }
  .schutz-liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .hero-gitter { grid-template-columns: 1.05fr .95fr; }
  .karten { grid-template-columns: repeat(3, 1fr); }
  .leistungen { grid-template-columns: repeat(3, 1fr); }
  .referenzen { grid-template-columns: repeat(3, 1fr); }
  .vertrauen ul { grid-template-columns: repeat(4, 1fr); }
  .preis-gitter { grid-template-columns: 1.1fr .9fr; }
  .bereiche { grid-template-columns: repeat(2, 1fr); }
  .team-gitter { grid-template-columns: .85fr 1.15fr; }
  .kontakt-gitter { grid-template-columns: .9fr 1.1fr; }
  .fuss-gitter { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* Mobiles Menü / Anrufleiste unterhalb 1200px */
@media (max-width: 1199px) {
  .menu-schalter { display: inline-flex; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--karte); border-bottom: 2px solid var(--dunkel);
    box-shadow: 0 14px 28px rgba(40,41,46,.18); padding: .8rem clamp(1rem, 4vw, 2.5rem) 1.4rem;
  }
  .hauptnav.offen { display: block; }
  /* Bei grosser Schrift wird das Menue laenger als der Bildschirm. Ohne
     eigene Scrollmoeglichkeit waeren die unteren Eintraege dann nicht mehr
     erreichbar - ausgerechnet fuer die Nutzerinnen und Nutzer, die die
     grosse Schrift gewaehlt haben. */
  .hauptnav {
    max-height: calc(100vh - 9.5rem); max-height: calc(100dvh - 9.5rem);
    overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1.6rem;
  }
  /* Ist das Menue offen, wuerde die feste Anrufleiste die letzten
     Eintraege verdecken. Sie wird so lange ausgeblendet; der Platz
     oben ist ohnehin schon reserviert, falls :has() fehlt. */
  body:has(.hauptnav.offen) .ruf-leiste { display: none; }
  .hauptnav ul { flex-direction: column; gap: 0; }
  .hauptnav a { padding: 1rem .4rem; font-size: 1.05rem; border-bottom: 1px solid var(--linie); border-radius: 0; }
  .kopf-innen { position: relative; flex-wrap: wrap; }
  .schrift-titel { display: none; }
  .kopf .telefon-knopf { display: none; } /* unten in der festen Leiste vorhanden */
  .ruf-leiste { display: flex; }
  body { padding-bottom: 5rem; }
}

@media (max-width: 400px) {
  .knopf { width: 100%; }
  .knopf-reihe { gap: .7rem; }
  .ruf-leiste a { font-size: .9rem; padding-inline: .5rem; }
}

/* ==========================================================================
   Drucken — die Zielgruppe druckt Seiten aus und legt sie neben das Telefon
   ========================================================================== */
@media print {
  :root { --basis: 12pt; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .kopf, .ruf-leiste, .menu-schalter, .schrift, .hauptnav, .skip, form, .knopf-reihe, .sozial { display: none !important; }
  section { padding-block: .8rem; break-inside: avoid; }
  .sek-dunkel, .vertrauen, .fuss { background: #fff !important; color: #000 !important; }
  .sek-dunkel h2, .sek-dunkel h3, .fuss h3, .fuss a { color: #000 !important; }
  .karte, .bereich, .referenz, .termin, .frage { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .bereich-symbol { display: none; }
  .frage .antwort { display: block !important; }
  a { color: #000; text-decoration: underline; }
  .hero-bild, .team-bild, .flyer img, .bild-schmuck { display: none; }
  /* Kontaktangaben gross und zuoberst */
  .druck-kontakt { display: block !important; border: 3px solid #000; padding: 1rem; margin-bottom: 1rem; font-size: 1.4em; font-weight: 700; text-align: center; }
}
.druck-kontakt { display: none; }

/* ==========================================================================
   Korrekturen aus der Messung bei 360 / 1024 / 1280 px
   ========================================================================== */

/* Die Flyer stehen im Fuss in einer schmalen Spalte. Zweispaltig erzwaengen
   sie dort eine Mindestbreite, die das ganze Fussraster ueberlaufen liess. */
.fuss .flyer-gitter { grid-template-columns: 1fr; }
.flyer .ft, .flyer .fk { overflow-wrap: anywhere; }

/* E-Mail-Adressen und lange Woerter duerfen umbrechen statt auszubrechen */
.fuss li, .kw-gross, .kontakt-weg { overflow-wrap: anywhere; }
/* Telefonnummer nie zerreissen: passt sie nicht neben das Symbol, rutscht der
   ganze Textblock darunter (flex-wrap in .kontakt-weg) */
.kw-nr { white-space: nowrap; overflow-wrap: normal; }

@media (min-width: 900px) {
  /* Hero-Bild praesenter: es stand vorher als kleine Flaeche neben viel Text */
  .hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
  /* Der Schriftschalter darf den Platz fuer die Navigation nicht wegnehmen */
  .schrift-titel { display: none; }
}
@media (min-width: 1360px) {
  .schrift-titel { display: inline; }
}

/* Deutsche Komposita ("Datenschutzerklaerung", "Finanzierungskampagne") sind
   laenger als eine schmale Zeile und duerfen umbrechen, damit sie die
   Seitenbreite nicht sprengen. Aber OHNE automatische Silbentrennung: die
   setzte in Titeln Trennstriche an Stellen wie "Zu-hause", was auf einer
   Seite fuer aeltere Menschen unnoetig stockend zu lesen ist. Gebraucht wird
   ein Umbruch nur im Notfall, und zwar ohne Strich. Wo eine Trennung wirklich
   sinnvoll ist, wird sie im Text von Hand mit ­ gesetzt. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: manual; }
p, li, td, dd, dt, blockquote, summary, label { overflow-wrap: break-word; }

/* [hidden] muss staerker sein als die display-Regel der Schaltflaechen,
   sonst erscheint "Link kopieren" auch ohne JavaScript. */
[hidden] { display: none !important; }

/* Der klebende Kopf belegte auf dem Telefon zwei hohe Reihen und damit zu viel
   Bildschirm. Kompakter, ohne die Bedienelemente zu verkleinern. */
@media (max-width: 1199px) {
  .kopf-innen { min-height: 0; padding-block: .45rem; gap: .5rem .6rem; }
  .marke span { display: none; }
  .marke { font-size: 1.15rem; }
  .schrift button { width: 2.1rem; height: 2.1rem; }
  .menu-schalter { padding: .6rem .9rem; min-height: 2.8rem; }
  .kopf-rechts { gap: .35rem; }
}

/* Der Schriftschalter sitzt auf dem Telefon im Menü statt im klebenden Kopf.
   Dort fehlte der Platz, und der Kopf brauchte sonst zwei Reihen. */
.schrift-mobil { display: none; }
.schrift-titel-mobil { font-weight: 700; font-size: .95rem; color: var(--dunkel); margin-right: .5rem; }
@media (max-width: 1199px) {
  .kopf-rechts .schrift { display: none; }
  .schrift-mobil { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding-top: 1rem; }
  .schrift-mobil button { width: 2.8rem; height: 2.8rem; }
}

/* ==========================================================================
   Natur-Akzente passend zum Aquarell (Rehe, Wiese, Vögel)
   ========================================================================== */
.hero-bild, .bild-schmuck { border-radius: var(--organisch); }
.karte:nth-child(3n+2), .referenz:nth-child(3n+2) { border-radius: 26px 18px 30px 20px; }
.karte:nth-child(3n+3), .referenz:nth-child(3n+3) { border-radius: 18px 30px 20px 26px; }

/* Kleines Blatt vor den Überzeilen */
.augenbraue::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20C4 10 10 4 21 3c-1 11-7 17-17 17z' fill='%237f9a4a'/%3E%3Cpath d='M4 20 15 9' stroke='%23fbf8ef' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero .augenbraue::before { display: none; }

/* Sanfte Hügel-Kante über dunklen, waldgrünen Flächen */
.vertrauen, .sek-dunkel, .fuss { position: relative; }
.vertrauen::before, .sek-dunkel::before, .fuss::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(18px, 3vw, 34px); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C120 6 260 4 390 18s250 22 390 8 300-26 420-8V40z' fill='%23263621'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.hero + .vertrauen::before { display: none; }

/* Fliegende Vögel im Fussbereich */
.fuss::after {
  content: ""; position: absolute; right: clamp(1rem, 6vw, 5rem); top: 1.6rem; width: 7rem; height: 3rem; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 48' fill='none' stroke='%23e9bc5c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 20q6-7 12 0q6-7 12 0M44 8q5-6 10 0q5-6 10 0M78 30q6-7 12 0q6-7 12 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Abgesetzte Abschnitte mit leichter Aquarell-Lasur */
.sek-ruhe { background: radial-gradient(ellipse at 15% 0%, rgba(228,237,242,.9), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(233,188,92,.12), transparent 50%), var(--ruhe); }

@media print {
  .vertrauen::before, .sek-dunkel::before, .fuss::before, .fuss::after, .augenbraue::before, .hero-landschaft { display: none !important; }
  .hero { background: none !important; }
}

@media (max-width: 559px) {
  /* Auf dem Telefon kostet jede verschachtelte Fläche Textbreite:
     Symbole kleiner, Innenabstände knapper. */
  .bereich-symbol { width: 2.6rem; height: 2.6rem; }
  .bereich-symbol svg { width: 1.4rem; height: 1.4rem; }
  .bereich-kopf { gap: .7rem; }
  .hero { padding-top: 1.2rem; }
  .hero-karte { padding: 1.4rem 1.1rem; }
  .hero .knopf-reihe .knopf { width: 100%; }
}

/* Unterseiten ohne Rehlandschaft brauchen unten wieder Luft */
.hero:not(:has(.hero-landschaft)) { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }