/* ══════════════════════════════════════════════════════════════
   SCHRIFTEN — lokal ausgeliefert (schriften/), keine Anfrage mehr
   an Google Fonts. Enthält nur den "latin"-Auszug (U+0000–00FF und
   verwandte Zeichen) — für deutsche Inhalte ausreichend und deutlich
   kleiner als der vollständige Zeichensatz. Erscheinungsbild und
   Gewichte entsprechen exakt den bisherigen Google-Fonts-Dateien.
   ══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url("schriften/archivo.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 400;
  font-display:swap;
  src:url("schriften/newsreader.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════
   FARBE — warmes Off-White, dunkles Grün-Anthrazit,
   Tillmanns-Grün #2BAA02 nur als Akzent
   ══════════════════════════════════════════════════════════════ */
:root{
  --papier:   #FAF9F5;
  --papier-2: #F2F1E9;
  --tinte:    #101710;
  --text:     #3B4336;
  --grau:     #6F7668;
  --linie:    #E2E1D7;
  --linie-2:  #CFCFC2;
  --kante:    rgba(16,23,16,.09);

  --marke:      #2BAA02;
  --marke-text: #1C7203;
  --warnung:    #A32C12;
  --marke-weich:rgba(43,170,2,.22);
  --auf-marke:  #0A1204;

  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;

  --spur: clamp(1.15rem, 5vw, 4rem);
  --max:  1200px;
  --luft-s: clamp(2.6rem, 6vw, 4.5rem);
  --luft-m: clamp(4rem, 9vw, 7.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0C100B; --papier-2:#131810; --tinte:#F0F1EA; --text:#C3C8BA;
    --grau:#909788; --linie:#242A1D; --linie-2:#39402E;
    --kante:rgba(240,241,234,.12); --marke-text:#6BDB35; --marke-weich:rgba(95,212,43,.26);
    --warnung:#F08A6C;
  }
}
:root[data-theme="dark"]{
  --papier:#0C100B; --papier-2:#131810; --tinte:#F0F1EA; --text:#C3C8BA;
  --grau:#909788; --linie:#242A1D; --linie-2:#39402E;
  --kante:rgba(240,241,234,.12); --marke-text:#6BDB35; --marke-weich:rgba(95,212,43,.26);
  --warnung:#F08A6C;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scrollbar-gutter:stable; }

/* Das display:none, das der Browser [hidden] mitgibt, wird von jeder
   Klassenregel mit display überstimmt. Diese Zeile verhindert, dass
   ausgeblendete Bereiche trotzdem sichtbar bleiben. */
[hidden]{ display:none !important; }
body{
  background:var(--papier); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--marke); color:var(--auf-marke); }
:focus-visible{ outline:2px solid var(--marke); outline-offset:3px; }
img{ max-width:100%; display:block; }

.bahn{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--spur); }

/* ── Typografie ─────────────────────────────────────────────── */
h1,h2,h3{ margin:0; color:var(--tinte); font-weight:600; }
.eyebrow{ font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--grau); margin:0; }
.titel-gross{ font-size:clamp(2.35rem,6.4vw,4.6rem); line-height:1.02; letter-spacing:-.032em; text-wrap:balance; }
.titel-mittel{ font-size:clamp(1.65rem,3.6vw,2.5rem); line-height:1.12; letter-spacing:-.024em; text-wrap:balance; }
.titel-klein{ font-size:1.06rem; line-height:1.32; letter-spacing:-.012em; }
p{ margin:0; }
.text{ color:var(--text); max-width:60ch; }
.text + .text{ margin-top:.9em; }
.text-klein{ font-size:.93rem; line-height:1.6; color:var(--grau); margin:0; max-width:48ch; }

.editorial{
  font-family:var(--serif); font-optical-sizing:auto; font-weight:350;
  font-size:clamp(1.12rem,1.7vw,1.3rem); line-height:1.66;
  color:var(--text); max-width:52ch; margin:0;
}
.haltungssatz{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,3.8vw,2.7rem); line-height:1.26;
  letter-spacing:-.015em; color:var(--tinte); max-width:20ch; margin:0;
}
mark{
  background:linear-gradient(90deg,transparent 0%,var(--marke-weich) 8%,var(--marke-weich) 92%,transparent 100%);
  background-repeat:no-repeat; background-size:100% .3em; background-position:0 86%; color:inherit;
}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.875rem; font-weight:600;
  text-decoration:none; cursor:pointer; padding:.82rem 1.3rem; border-radius:2px;
  background:var(--marke); color:var(--auf-marke); border:1px solid var(--marke);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .22s;
}
.knopf:hover{ transform:translateY(-1px); opacity:.92; }
.knopf .pfeil{ transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.knopf:hover .pfeil{ transform:translateX(3px); }
.knopf.still{ background:transparent; color:var(--tinte); border-color:var(--linie-2); }
.knopf.still:hover{ border-color:var(--tinte); opacity:1; }

.textlink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.875rem; font-weight:600; color:var(--marke-text); text-decoration:none;
  padding-bottom:.15rem; box-shadow:inset 0 -1px 0 var(--marke-weich);
  transition:box-shadow .22s; background:none; border:0; cursor:pointer;
  font-family:var(--sans);
}
.textlink:hover{ box-shadow:inset 0 -1px 0 var(--marke); }
.textlink .pfeil{ transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.textlink:hover .pfeil{ transform:translateX(3px); }

/* ── Kopfzeile ──────────────────────────────────────────────── */
.kopf{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:var(--papier);
  background:color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding-block:.5rem; }
.wortmarke{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--tinte); }
.wortmarke::before{ content:""; width:15px; height:15px; flex:none; background:var(--marke); border-radius:1px; }
.wortmarke span{ font-weight:700; font-size:.98rem; letter-spacing:-.012em; line-height:1; }

.hauptnav{ display:none; gap:clamp(1rem,2.2vw,1.85rem); }
@media (min-width:920px){ .hauptnav{ display:flex; align-items:center; } }
.hauptnav a{
  font-size:.855rem; color:var(--text); text-decoration:none; padding-block:.25rem;
  box-shadow:inset 0 -1px 0 transparent; transition:color .2s, box-shadow .2s;
}
.hauptnav a:hover{ color:var(--tinte); box-shadow:inset 0 -1px 0 var(--marke); }
.hauptnav a[aria-current="page"]{ color:var(--tinte); font-weight:600; box-shadow:inset 0 -1px 0 var(--marke); }

.kopf-rechts{ display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.2rem); }
.rufnummer{
  font-size:.875rem; font-weight:600; color:var(--tinte); text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--linie-2); padding-bottom:.12rem; transition:box-shadow .2s;
}
.rufnummer:hover{ box-shadow:inset 0 -1px 0 var(--marke); }
.kopf-cta{ display:none; }
@media (min-width:1080px){ .kopf-cta{ display:inline-flex; padding:.6rem 1rem; font-size:.82rem; } }

.menuknopf{
  display:inline-flex; align-items:center; gap:.4rem; appearance:none; background:none; cursor:pointer;
  border:1px solid var(--linie-2); border-radius:2px; padding:.42rem .7rem;
  font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--tinte); transition:border-color .2s;
}
.menuknopf:hover{ border-color:var(--tinte); }
.menuknopf .balken{ display:grid; gap:3px; }
.menuknopf .balken i{ display:block; width:14px; height:1.5px; background:var(--tinte); transition:transform .25s cubic-bezier(.2,.7,.3,1), opacity .2s; }
/* Geöffnet: die drei Balken werden zum Schließen-Kreuz, statt dass der
   Knopf unverändert aussieht, während sich das Menü darunter öffnet. */
.menuknopf[aria-expanded="true"] .balken i:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
.menuknopf[aria-expanded="true"] .balken i:nth-child(2){ opacity:0; }
.menuknopf[aria-expanded="true"] .balken i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){ .menuknopf .balken i{ transition:none; } }
@media (min-width:920px){ .menuknopf{ display:none; } }

.mobilnav{ border-top:1px solid var(--linie); background:var(--papier); }
.mobilnav ul{ list-style:none; margin:0; padding:.5rem var(--spur) 1.1rem; max-width:var(--max); margin-inline:auto; display:grid; gap:.1rem; }
.mobilnav a{ display:block; padding:.65rem 0; font-size:1rem; font-weight:500; color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie); }
.mobilnav li:last-child a{ border-bottom:0; padding-top:1rem; }
.mobilnav .knopf{ width:100%; justify-content:center; border-bottom:0; }
@media (min-width:920px){ .mobilnav{ display:none; } }

/* ── Seitenwechsel ──────────────────────────────────────────── */
main{ animation:seiteAuf .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes seiteAuf{ from{ opacity:.001; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ main{ animation:none; } }

/* ── Topografie als gezielter Randakzent ──────────────────────
   Ein kleiner Ausschnitt im Hero, ein Übergang auf der Startseite
   und zwei thematisch passende Leistungsköpfe. Text und Bilder
   bleiben außerhalb der gezeichneten Fläche. */
.hero{ position:relative; padding-block:var(--luft-s) var(--luft-m); overflow:hidden; }
#gelaende, .gelaende{ position:absolute; pointer-events:none; }
.hero #gelaende{
  top:0; right:0; width:min(34%,520px); height:clamp(260px,37vw,450px);
  opacity:.50;
  -webkit-mask-image:radial-gradient(ellipse 94% 90% at 98% 18%,#000 0%,#000 26%,transparent 78%);
  mask-image:radial-gradient(ellipse 94% 90% at 98% 18%,#000 0%,#000 26%,transparent 78%);
}
.seitenkopf.mit-gelaende{ position:relative; overflow:hidden; }
.seitenkopf.mit-gelaende > .bahn{ position:relative; z-index:1; }
.seitenkopf .gelaende-ruhig{
  top:0; right:0; width:min(36%,510px); height:clamp(180px,26vw,280px);
  opacity:.34;
  -webkit-mask-image:radial-gradient(ellipse 95% 105% at 100% 0%,#000 0%,#000 25%,transparent 80%);
  mask-image:radial-gradient(ellipse 95% 105% at 100% 0%,#000 0%,#000 25%,transparent 80%);
}
.gelaende-abschnitt{ position:relative; overflow:hidden; }
.gelaende-abschnitt > .bahn{ position:relative; z-index:1; }
.gelaende-abschnitt .gelaende-uebergang{
  top:0; right:0; width:min(38%,520px); height:min(280px,32%);
  opacity:.30;
  -webkit-mask-image:radial-gradient(ellipse 95% 105% at 100% 0%,#000 0%,transparent 84%);
  mask-image:radial-gradient(ellipse 95% 105% at 100% 0%,#000 0%,transparent 84%);
}
.gelaende-mobil{ display:none; }
@media (max-width:680px){
  .hero #gelaende{ width:48%; height:220px; opacity:.37; }
  .seitenkopf .gelaende-ruhig{ width:46%; height:155px; opacity:.27; }
  .gelaende-abschnitt .gelaende-uebergang{ width:45%; height:145px; opacity:.24; }
}
@media (max-width:919px){
  .seitenkopf .gelaende-mobil, #ablauf .gelaende-mobil, #kontakt .gelaende-mobil{
    display:block; top:0; right:0; width:min(42%,230px); height:155px;
    opacity:.40;
    -webkit-mask-image:radial-gradient(ellipse 95% 100% at 100% 0%,#000 0%,#000 25%,transparent 82%);
    mask-image:radial-gradient(ellipse 95% 100% at 100% 0%,#000 0%,#000 25%,transparent 82%);
  }
  #ablauf,#kontakt{ position:relative; overflow:hidden; scroll-margin-top:72px; }
  #ablauf > .bahn,#kontakt > .bahn{ position:relative; z-index:1; }
}
.hero .bahn{ position:relative; z-index:1; }
.hero h1{ margin-top:clamp(.9rem,2vw,1.4rem); }
.hero .editorial{ margin-top:clamp(1.1rem,2.4vw,1.7rem); }
.hero-knoepfe{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:clamp(1.5rem,3vw,2.1rem); }

.grossbild{
  margin-top:clamp(2.2rem,5vw,3.6rem);
  aspect-ratio:1000/424; overflow:hidden;
  background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--kante);
}
@media (max-width:680px){ .grossbild{ aspect-ratio:4/3; } }
.grossbild img{ width:100%; height:100%; object-fit:cover; object-position:46% center; }

/* ── Kennzahlen ─────────────────────────────────────────────── */
.zahlen{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.4rem) clamp(1.5rem,4vw,3.5rem);
  margin:var(--luft-s) 0 0; padding-top:clamp(1.4rem,3vw,2rem); border-top:1px solid var(--linie);
}
@media (min-width:760px){ .zahlen{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.zahl dt{ font-size:clamp(1.5rem,2.8vw,1.95rem); font-weight:600; line-height:1.05; letter-spacing:-.028em; color:var(--tinte); font-variant-numeric:tabular-nums; }
.zahl dd{ margin:.3rem 0 0; font-size:.875rem; color:var(--grau); line-height:1.45; }

/* ── Blöcke ─────────────────────────────────────────────────── */
.block{ padding-block:var(--luft-m); }
.block.ruhig{ background:var(--papier-2); }
.block-kopf{ margin-bottom:clamp(1.8rem,4vw,3rem); }
.block-kopf .eyebrow{ margin-bottom:.85rem; }

.haltung{ display:grid; gap:clamp(1.8rem,4vw,3.4rem); }
@media (min-width:880px){ .haltung{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.argumente{ display:grid; gap:clamp(1.3rem,2.6vw,1.8rem); }
.argument{ padding-top:1rem; border-top:1px solid var(--linie); }
.argument h3{ margin-bottom:.35rem; }

/* ── Projekte ───────────────────────────────────────────────── */
.projekte{ display:grid; gap:var(--luft-s); }
.projekt{ display:grid; gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }
@media (min-width:900px){
  .projekt{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
  .projekt:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); }
  .projekt:nth-child(even) .projekt-bild{ order:2; }
}
.projekt-bild{ overflow:hidden; aspect-ratio:3/2; background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--kante); }
.projekt-bild img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1); }
.projekt:hover .projekt-bild img{ transform:scale(1.025); }
.projekt-text h3{ margin-bottom:.55rem; }
.projekt-ort{ font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grau); margin:0 0 .75rem; }
.projekt-text .text-klein{ margin-bottom:1.1rem; }

/* ── Leistungen ─────────────────────────────────────────────── */
.leistungen{ display:grid; gap:0; border-top:1px solid var(--linie); }
@media (min-width:720px){ .leistungen{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4.5rem); } }
@media (min-width:1040px){ .leistungen{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.leistung{ padding-block:clamp(1.25rem,2.6vw,1.7rem); border-bottom:1px solid var(--linie); }
.leistung h3{ margin-bottom:.3rem; }

/* ── Ablauf ─────────────────────────────────────────────────── */
.ablauf{ display:grid; gap:0; list-style:none; margin:0; padding:0; }
@media (min-width:820px){ .ablauf{ grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(1.4rem,3vw,2.6rem); } }
.schritt{ padding-block:clamp(1.2rem,2.4vw,1.6rem); border-top:1px solid var(--linie); }
@media (max-width:819px){ .schritt:last-child{ border-bottom:1px solid var(--linie); } }
.schritt-nr{ font-size:.8rem; font-weight:600; letter-spacing:.08em; color:var(--marke-text); font-variant-numeric:tabular-nums; display:block; margin-bottom:.5rem; }
.schritt h3{ margin-bottom:.3rem; }

/* ── Unternehmen ────────────────────────────────────────────── */
.betrieb{ display:grid; gap:clamp(1.6rem,4vw,3.2rem); align-items:center; }
@media (min-width:900px){ .betrieb{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); } }
.betrieb-bild{ overflow:hidden; aspect-ratio:3/2; background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--kante); }
.betrieb-bild.breit{ aspect-ratio:16/9; }
.betrieb-bild img{ width:100%; height:100%; object-fit:cover; }

/* ── Kontakt ────────────────────────────────────────────────── */
.kontakt{ display:grid; gap:clamp(2rem,5vw,4rem); }
@media (min-width:900px){ .kontakt{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.daten{ display:grid; gap:1.1rem; margin-top:clamp(1.6rem,3vw,2.2rem); }
.datum{ display:grid; gap:.1rem; text-decoration:none; color:var(--tinte); }
.datum .eyebrow{ font-size:.67rem; }
.datum-wert{ font-size:1.12rem; font-weight:600; letter-spacing:-.012em; font-variant-numeric:tabular-nums; justify-self:start; box-shadow:inset 0 -1px 0 transparent; transition:box-shadow .2s,color .2s; }
a.datum:hover .datum-wert{ color:var(--marke-text); box-shadow:inset 0 -1px 0 var(--marke); }

.formular{ display:grid; gap:.95rem; }
.feld{ display:grid; gap:.35rem; }
.feld label{ font-size:.8rem; font-weight:600; color:var(--text); }
.feld input,.feld textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--tinte);
  background:var(--papier); border:1px solid var(--linie-2); border-radius:2px;
  padding:.7rem .8rem; width:100%; transition:border-color .2s;
}
.feld input:focus,.feld textarea:focus{ border-color:var(--marke); outline:none; }
.feld textarea{ resize:vertical; min-height:6.5rem; }
.formular-fuss{ display:grid; justify-items:start; gap:.8rem; margin-top:.4rem; }
.formular-hinweis{ font-size:.78rem; color:var(--grau); max-width:48ch; margin:0; line-height:1.5; }

/* Honigtopf: für Menschen unerreichbar, für Maschinen verlockend.
   Bewusst nicht display:none — das erkennen die Skripte.          */
.falle{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;
}

.feld-fehler{ font-size:.74rem; color:var(--warnung); margin:0; letter-spacing:.005em; }
.feld.fehlt input,.feld.fehlt textarea{ border-color:var(--warnung); }

.zustimmung{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.55rem .65rem; align-items:start; }
.zustimmung input{ width:1rem; height:1rem; margin:.3rem 0 0; accent-color:var(--marke); }
.zustimmung label{ font-size:.79rem; line-height:1.55; color:var(--grau); }
.zustimmung a{ color:var(--marke-text); text-decoration:none; box-shadow:inset 0 -1px 0 var(--marke-weich); }
.zustimmung a:hover{ box-shadow:inset 0 -1px 0 var(--marke); }
.zustimmung.fehlt label{ color:var(--warnung); }

.formular-status{
  font-size:.85rem; line-height:1.55; margin:0; padding:.72rem .9rem;
  border:1px solid var(--linie-2); border-left:2px solid var(--warnung);
  background:var(--papier-2); color:var(--text); max-width:48ch;
}
.formular-status.gut{ border-left-color:var(--marke); }

/* Bestätigung nach dem Absenden — muss ins Auge fallen, sonst klickt
   man ein zweites Mal. */
.dank{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem;
  align-items:start; padding:clamp(1.1rem,2.6vw,1.5rem);
  border:1px solid var(--linie-2); border-left:2px solid var(--marke);
  background:var(--papier-2);
}
.dank .titel-klein{ color:var(--tinte); }
.dank-haken{
  display:grid; place-items:center; width:2.2rem; height:2.2rem;
  border-radius:50%; background:var(--marke); color:var(--auf-marke);
}

/* Ladezustand des Knopfes */
.knopf .laden{
  display:none; width:.85em; height:.85em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:dreh .7s linear infinite;
}
.knopf[data-laeuft] .laden{ display:block; }
.knopf[data-laeuft] .pfeil{ display:none; }
.knopf:disabled{ cursor:default; opacity:.78; }
.knopf:disabled:hover{ transform:none; }
@keyframes dreh{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .knopf .laden{ animation-duration:1.6s; } }

/* ══════════════════════════════════════════════════════════════
   UNTERSEITEN
   ══════════════════════════════════════════════════════════════ */
.seitenkopf{ padding-block:clamp(2.2rem,5vw,3.6rem) clamp(1.6rem,3.4vw,2.6rem); }
.seitenkopf .titel-mittel{ margin-top:.8rem; }
.seitenkopf .text{ margin-top:1.1rem; }

/* Leistungsgruppen */
.gruppe{ margin-top:var(--luft-s); }
.gruppe > .eyebrow{ padding-bottom:.9rem; border-bottom:1px solid var(--linie-2); margin-bottom:0; }
.gruppe-liste{ display:grid; gap:0; }
@media (min-width:820px){ .gruppe-liste{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4rem); } }
/* Ungerade Anzahl (z. B. fünf Kernbereiche, fünf weitere Leistungen):
   das letzte Element bekommt sonst eine Zeile für sich allein und hängt
   optisch links. Stattdessen die Zeile mittig statt einseitig füllen —
   gleiche Kartenbreite wie die übrigen, nur zentriert. */
@media (min-width:820px){
  .gruppe-liste > .posten:last-child:nth-child(odd){
    grid-column: 1 / -1;
    max-width: calc(50% - clamp(2rem,5vw,4rem)/2);
    margin-inline: auto;
  }
}
.posten{ padding-block:clamp(1.2rem,2.4vw,1.6rem); border-bottom:1px solid var(--linie); }
.posten h3{ margin-bottom:.35rem; }
.posten ul{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .4rem; }
.posten li{ font-size:.78rem; color:var(--grau); border:1px solid var(--linie); border-radius:2px; padding:.24rem .55rem; }

/* Projektseite */
.projektblock{ padding-block:var(--luft-m); border-top:1px solid var(--linie); }
.projektblock:first-of-type{ border-top:0; padding-top:var(--luft-s); }
.projekt-kopf{ display:grid; gap:clamp(1.2rem,3vw,2.6rem); margin-bottom:clamp(1.6rem,3.5vw,2.4rem); }
@media (min-width:880px){ .projekt-kopf{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.leistungsliste{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.35rem .4rem; }
.leistungsliste li{ font-size:.78rem; color:var(--text); border:1px solid var(--linie-2); border-radius:2px; padding:.26rem .6rem; }

/* Schlagwörter beleben: beim Überfahren wächst das Markengrün von der
   Mitte nach außen in die Fassung, die Schrift wird dunkel. Dieselbe
   Logik wie auf dem Firmenschild — dunkel auf Grün, niemals weiß. */
.leistungsliste li,
.posten li{
  position:relative; z-index:0; overflow:hidden;
  transition:color .22s ease, border-color .22s ease;
}
.leistungsliste li::before,
.posten li::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--marke);
  transform:scale(0); transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.leistungsliste li:hover,
.posten li:hover{ color:var(--auf-marke); border-color:var(--marke); }
.leistungsliste li:hover::before,
.posten li:hover::before{ transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .leistungsliste li::before,.posten li::before{ transition:none; }
}

.hauptbild{ overflow:hidden; aspect-ratio:3/2; background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--kante); }
.hauptbild img{ width:100%; height:100%; object-fit:cover; }

.strecke{ display:grid; gap:clamp(.5rem,1.2vw,.8rem); margin-top:clamp(.6rem,1.4vw,.9rem); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:720px){ .strecke{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.strecke figure{ margin:0; }
/* Bildrahmen: feste Proportion, damit Kacheln im Raster gleich hoch
   bleiben, egal welches Seitenverhältnis das Foto mitbringt. */
.rahmen{ overflow:hidden; aspect-ratio:4/3; background:var(--papier-2); box-shadow:inset 0 0 0 1px var(--kante); }
.rahmen img{ width:100%; height:100%; object-fit:cover; }
.strecke img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.strecke figure:hover img{ transform:scale(1.04); }
.strecke figcaption{ font-size:.75rem; color:var(--grau); margin-top:.45rem; line-height:1.4; }

/* Partner */
.partner{ display:grid; gap:0; border-top:1px solid var(--linie); margin-top:1.4rem; }
@media (min-width:720px){ .partner{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,5vw,4rem); } }
.partner-eintrag{ padding-block:1.15rem; border-bottom:1px solid var(--linie); }
.partner-eintrag h3{ font-size:.98rem; margin-bottom:.2rem; }
.partner-eintrag p{ font-size:.86rem; color:var(--grau); line-height:1.55; }
.partner-eintrag a{ color:var(--marke-text); text-decoration:none; }
.partner-eintrag a:hover{ box-shadow:inset 0 -1px 0 var(--marke); }

/* Rechtstexte */
.rechtstext{ max-width:70ch; }
.rechtstext h3{ margin:1.8rem 0 .5rem; font-size:1rem; }
.rechtstext p{ margin-bottom:.9rem; font-size:.95rem; line-height:1.7; }
.rechtstext dl{ margin:0 0 1.4rem; display:grid; gap:.35rem; font-size:.95rem; }
.rechtstext dt{ font-weight:600; color:var(--tinte); }
.rechtstext dd{ margin:0 0 .5rem; }
/* Ohne diese Regel fallen Telefon-/E-Mail-/Google-Links in den
   Rechtstexten auf die blaue Standardfarbe des Browsers zurück, da sie
   hier ohne eigene Klasse (z. B. .textlink) im Fließtext stehen. */
.rechtstext a{ color:var(--marke-text); text-decoration:underline; text-decoration-color:var(--marke-weich); text-underline-offset:2px; }
.rechtstext a:hover{ text-decoration-color:var(--marke-text); }

/* ── Fusszeile ──────────────────────────────────────────────── */
.fuss{ border-top:1px solid var(--linie); padding-block:clamp(2.2rem,5vw,3.2rem) 1.4rem; }
.fuss-raster{ display:grid; gap:clamp(1.5rem,3.2vw,2.6rem); }
@media (min-width:720px){ .fuss-raster{ grid-template-columns:1.5fr 1fr 1fr; } }
.fuss .eyebrow{ margin-bottom:.8rem; }
.fuss address{ font-style:normal; font-size:.92rem; line-height:1.7; color:var(--text); }
.fuss a{ color:var(--text); text-decoration:none; transition:color .2s; cursor:pointer; }
.fuss a:hover{ color:var(--marke-text); }
.fuss ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; font-size:.92rem; }
.fuss-ende{
  margin-top:clamp(1.8rem,4vw,2.6rem); padding-top:1.1rem; border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; justify-content:space-between; font-size:.78rem; color:var(--grau);
}

/* ── Bewegung ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .auf{ animation:auf .7s cubic-bezier(.2,.7,.3,1) both; }
  .auf-2{ animation-delay:.06s; } .auf-3{ animation-delay:.12s; } .auf-4{ animation-delay:.18s; }
  @supports (animation-timeline: view()){
    .grossbild img, .betrieb-bild img, .hauptbild img{
      animation:wandern linear both; animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    @keyframes wandern{
      from{ transform:translate3d(0,-1.8%,0) scale(1.05); }
      to  { transform:translate3d(0, 1.8%,0) scale(1.05); }
    }
  }
}
@keyframes auf{ from{ opacity:.001; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ── Bildvergrößerung ───────────────────────────────────────────
   Klick auf ein Foto zeigt es in seiner echten Größe. Nie darüber
   hinaus — ein hochskaliertes Bild sieht schlechter aus als ein
   kleines.                                                        */
.grossbild img, .hauptbild img, .projekt-bild img,
.rahmen img, .betrieb-bild img{ cursor:zoom-in; }

.lupe{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(3.2rem,7vw,4.5rem) clamp(1rem,4vw,3rem);
  background:rgba(8,12,8,.93); opacity:0; transition:opacity .25s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.lupe[data-auf]{ opacity:1; }
.lupe figure{ margin:0; display:grid; gap:.85rem; justify-items:center; max-height:100%; }
.lupe img{
  display:block; width:auto; height:auto; max-width:100%; max-height:76vh;
  object-fit:contain; box-shadow:0 20px 70px rgba(0,0,0,.55);
  transform:scale(.975); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.lupe[data-auf] img{ transform:none; }
.lupe figcaption{
  color:#D9DDD3; font-size:.8rem; line-height:1.55; max-width:64ch;
  text-align:center; text-wrap:balance;
}
.lupe-zu, .lupe-pfeil{
  position:absolute; display:grid; place-items:center; cursor:pointer;
  width:2.7rem; height:2.7rem; border-radius:50%; font:inherit; font-size:1.15rem;
  line-height:1; color:#F0F1EA; background:rgba(255,255,255,.06);
  border:1px solid rgba(240,241,234,.26);
  transition:border-color .2s, background .2s, color .2s;
}
.lupe-zu:hover, .lupe-pfeil:hover{
  border-color:var(--marke); background:var(--marke); color:var(--auf-marke);
}
.lupe-zu{ top:clamp(.7rem,2vw,1.5rem); right:clamp(.7rem,2vw,1.5rem); }
.lupe-pfeil{ top:50%; margin-top:-1.35rem; }
.lupe-pfeil.zurueck{ left:clamp(.6rem,2vw,1.8rem); }
.lupe-pfeil.vor{ right:clamp(.6rem,2vw,1.8rem); }
body.lupe-offen{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .lupe, .lupe img{ transition:none; } }

/* ── Hinweisfenster ─────────────────────────────────────────────
   Datenschutzhinweise über dem Formular, damit bereits getippte
   Eingaben nicht verloren gehen.                                  */
.hinweis-fenster{
  margin:auto; padding:0; border:none; border-radius:2px;
  width:min(58ch, calc(100vw - 2rem));
  background:var(--papier); color:var(--text);
  box-shadow:0 24px 70px rgba(8,12,8,.38);
}
.hinweis-fenster::backdrop{ background:rgba(8,12,8,.58); }
.hinweis-kopf{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:clamp(1.1rem,3vw,1.6rem) clamp(1.1rem,3vw,1.6rem) .95rem;
  border-bottom:1px solid var(--linie);
}
.hinweis-zu{
  flex:none; width:2rem; height:2rem; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font:inherit; font-size:.85rem; line-height:1;
  color:var(--text); background:none; border:1px solid var(--linie-2);
  transition:border-color .2s, background .2s, color .2s;
}
.hinweis-zu:hover{ border-color:var(--marke); background:var(--marke); color:var(--auf-marke); }
.hinweis-text{
  display:grid; gap:.85rem; max-height:58vh; overflow:auto;
  padding:clamp(1.1rem,3vw,1.6rem);
}
.hinweis-text p{ font-size:.87rem; line-height:1.66; }
.hinweis-text strong{ color:var(--tinte); font-weight:600; }
.hinweis-text a{ color:var(--marke-text); text-decoration:none; box-shadow:inset 0 -1px 0 var(--marke-weich); }
.hinweis-fuss{
  margin:0; font-size:.8rem;
  padding:0 clamp(1.1rem,3vw,1.6rem) clamp(1.1rem,3vw,1.6rem);
}
.hinweis-fuss a{ color:var(--marke-text); text-decoration:none; box-shadow:inset 0 -1px 0 var(--marke-weich); }
.hinweis-fuss a:hover, .hinweis-text a:hover{ box-shadow:inset 0 -1px 0 var(--marke); }

/* ── Fusszeile: Datenschutz-Einstellungen ────────────────────────
   Sieht wie die übrigen Fusszeilen-Links aus, ist aber ein Knopf,
   weil er kein Ziel ansteuert, sondern den Zustimmungsdialog öffnet. */
.fuss button.fuss-knopf{
  appearance:none; -webkit-appearance:none;
  display:inline; font:inherit; font-size:inherit; color:var(--text);
  text-decoration:none; background:none; border:0; padding:0; margin:0;
  cursor:pointer; text-align:left; transition:color .2s;
}
.fuss button.fuss-knopf:hover{ color:var(--marke-text); }

/* ── Datenschutz-Einstellungen ───────────────────────────────────
   Eigene, schlichte Zustimmungslösung (zustimmung.js). Keine
   Drittanbieter-Bibliothek, kein Cookie-Wall, kein Layout-Sprung —
   die Leiste liegt fest über dem Inhalt und verschiebt nichts.     */
.zst-leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--papier); border-top:1px solid var(--linie-2);
  box-shadow:0 -16px 44px rgba(8,12,8,.14);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.zst-leiste-innen{
  padding-block:clamp(1.1rem,2.6vw,1.5rem);
  display:grid; gap:1rem; align-items:center;
}
@media (min-width:860px){
  .zst-leiste-innen{ grid-template-columns:minmax(0,1fr) auto; gap:2.2rem; }
}
.zst-text{ font-size:.85rem; line-height:1.62; color:var(--text); max-width:62ch; margin:0; }
.zst-text .textlink{ font-size:.85rem; }
/* Mobil: alle drei Schaltflächen untereinander, gleich breit — so ist
   die Reihung unabhängig vom jeweiligen Textumbruch-Verhalten des
   Browsers immer sauber zentriert, auch bei drei statt zwei Einträgen
   pro Zeile (manche Browser lassen ein einzeln umgebrochenes Element
   sonst nur halb so breit stehen). Ab 600px wieder nebeneinander. */
.zst-knoepfe{ display:flex; flex-direction:column; gap:.6rem; }
.zst-knoepfe .knopf{ justify-content:center; white-space:nowrap; }
@media (min-width:600px){
  .zst-knoepfe{ flex-direction:row; flex-wrap:wrap; }
  .zst-knoepfe .knopf{ flex:none; }
}

@media (prefers-reduced-motion:no-preference){
  .zst-leiste{ animation:zstAuf .5s cubic-bezier(.2,.7,.3,1) both; }
}
@keyframes zstAuf{ from{ opacity:.001; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .zst-leiste{ transition:none; } }

/* Einstellungsdialog: nutzt dieselbe .hinweis-fenster-Hülle wie die
   Datenschutzhinweise über dem Formular. */
.zst-kategorie{ padding-block:.95rem; border-top:1px solid var(--linie); }
.zst-kategorie:first-child{ border-top:0; padding-top:0; }
.zst-kategorie-kopf{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.zst-kategorie-titel{ font-size:.92rem; font-weight:600; color:var(--tinte); }
.zst-immer{ font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grau); }
.zst-schalter{ width:1.2rem; height:1.2rem; accent-color:var(--marke); cursor:pointer; flex:none; }
/* Trennlinie über den Aktionen: macht die Grenze zum darüber liegenden,
   bei Bedarf scrollbaren Kategorien-Text sichtbar, statt dass er dort
   unvermittelt endet. */
.zst-fenster-fuss{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem .8rem;
  border-top:1px solid var(--linie); padding-top:clamp(1.1rem,3vw,1.6rem); margin-top:.2rem;
}

/* ── Brotkrumen ─────────────────────────────────────────────────
   Dezente Wegleitung auf den Leistungs-Detailseiten, zusätzlich zur
   unsichtbaren BreadcrumbList (siehe Seiten-Ende). Bewusst klein und
   ruhig gehalten, kein eigenes Kastendesign. */
.brotkrumen{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45em;
  font-size:.78rem; color:var(--grau); margin-bottom:.9rem;
}
.brotkrumen a{ color:var(--grau); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.brotkrumen a:hover{ color:var(--marke-text); border-color:var(--marke-weich); }
.brotkrumen [aria-current]{ color:var(--text); }
.brotkrumen .trenner{ opacity:.55; }