/* Bazid Daoud GaLaBau, Version n4 "Ruhe und Strenge".
   Leitreferenz marktessier.com (grosse stille Typografie, Statement-Band),
   Nebenreferenzen huntergreen.nyc (dunkelgruene Vollflaeche, Off-White-Baender)
   und enea.ch (kleine leise Nav, stiller Fuss). */

/* ---------- Schriften, nur selbst gehostet ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ---------- Grundwerte ---------- */
:root {
  --marke: #599D08;
  --lime: #84CC11;
  --tanne: #0A680A;
  --tanne-tief: #085508;
  --mint: #F1FFF3;
  --nacht: #1B2314;
  --tinte: #20261A;
  --text: #333333;
  --leise: #5D6A52;
  --linie: #E3E7DD;
  --flaeche: #F5F6F2;
  --papier: #FFFFFF;

  /* Abstands-Skala, ausnahmslos */
  --a4: 4px; --a8: 8px; --a12: 12px; --a16: 16px; --a24: 24px;
  --a32: 32px; --a48: 48px; --a64: 64px; --a96: 96px; --a128: 128px; --a160: 160px;
  --sek-eng: var(--a48);
  --sek-mittel: var(--a96);
  --sek-normal: 112px;
  --sek-weit: var(--a160);

  /* Radien nach Bedeutung */
  --r-knopf: 6px;
  --r-feld: 10px;
  --r-bild: 14px;

  /* Schatten, gestaffelt und gruen getoent */
  --sch-zart: 0 1px 3px rgba(24, 42, 12, 0.10);
  --sch-panel: 0 2px 8px rgba(24, 42, 12, 0.07), 0 20px 48px rgba(24, 42, 12, 0.10);
  --sch-cta: 0 2px 4px rgba(12, 40, 8, 0.20), 0 10px 24px rgba(12, 40, 8, 0.22), 0 28px 56px rgba(12, 40, 8, 0.16);
  --sch-dock: 0 4px 12px rgba(15, 40, 10, 0.16), 0 22px 52px rgba(15, 40, 10, 0.24);

  --e: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rand: clamp(20px, 3.4vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.springer, .knopf, .pfeillink, .pfeillink svg, .kopf-nav a, .burger span, .reihe, .gebiet-tel, .chip span, .feld input, .feld textarea, .ig-gitter img, .fuss-spalte a, .dock-knopf {
  transition-duration: 180ms;
  transition-timing-function: var(--e);
}
input, textarea, select, button { color: inherit; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
img:not([src$='.svg']) { filter: contrast(1.03) saturate(1.05); }
a { color: var(--tanne); text-decoration: none; }
h1, h2, h3 { font-family: 'Outfit', 'Poppins', sans-serif; color: var(--tinte); }
h1 { font-size: clamp(42px, 5.4vw, 76px); font-weight: 620; line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.lauf { max-width: 58ch; }
::selection { background: var(--lime); color: var(--nacht); }
:focus-visible { outline: 2px solid var(--tanne); outline-offset: 2px; }

.mitte { max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }
.schmal { max-width: 760px; margin-inline: auto; padding-inline: var(--rand); }

.springer {
  position: absolute; left: var(--a16); top: -64px; z-index: 60;
  background: var(--tinte); color: #fff; padding: var(--a12) var(--a16);
  border-radius: var(--r-knopf);
}
.springer:focus { top: var(--a16); }
.mittel { max-width: 1000px; margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a8);
  min-height: 48px; padding: var(--a12) var(--a24);
  border-radius: var(--r-knopf); border: 1px solid transparent;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition-property: background-color, color, border-color, transform, box-shadow;
}
.knopf-voll { background: var(--tanne); color: #fff; }
.knopf-voll:hover { background: var(--tanne-tief); transform: translateY(-1px); }
.knopf-lime { background: var(--lime); color: var(--nacht); box-shadow: var(--sch-cta); }
.knopf-lime:hover { background: #79BC0E; transform: translateY(-1px); }
.knopf-zart { background: var(--papier); color: var(--tinte); border-color: var(--linie); }
.knopf-zart:hover { border-color: var(--tanne); color: var(--tanne); }
.knopf-geist { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.44); }
.knopf-geist:hover { border-color: #fff; background: rgba(255, 255, 255, 0.10); }
.knopf-gross { min-height: 56px; padding: var(--a16) var(--a32); font-size: 16px; }

.pfeillink {
  display: inline-flex; align-items: center; gap: var(--a8);
  min-height: 44px; font-weight: 500; color: var(--tanne);
  transition-property: color;
}
.pfeillink svg { transition-property: transform; }
.pfeillink:hover { color: var(--tanne-tief); }
.pfeillink:hover svg { transform: translateX(4px); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier); border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: var(--a32); padding-block: var(--a12); }
.kopf-logo img { width: 152px; height: 96px; }
.kopf-nav { display: flex; gap: var(--a24); margin-left: var(--a16); }
.kopf-nav a {
  color: var(--text); font-size: 15px; letter-spacing: 0.01em;
  padding-block: var(--a12); transition-property: color;
}
.kopf-nav a:hover { color: var(--tanne); }
.kopf-hand { display: flex; align-items: center; gap: var(--a12); margin-left: auto; }
.burger {
  display: none; flex-direction: column; gap: 6px; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie); border-radius: var(--r-knopf); cursor: pointer;
}
.burger span { width: 20px; height: 2px; background: var(--tinte); transition-property: transform, opacity; }
.burger[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobilnav { display: none; border-top: 1px solid var(--linie); background: var(--papier); }
.mobilnav a { display: block; padding: var(--a12) var(--rand); color: var(--tinte); font-size: 17px; }
.mobilnav a + a { border-top: 1px solid var(--linie); }

/* ---------- Hero ---------- */
.held { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden; }
.held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.held-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 24, 10, 0.78), rgba(16, 24, 10, 0.28) 52%, rgba(16, 24, 10, 0.06));
}
.held-inhalt { position: relative; width: 100%; padding-block: var(--a96) var(--a64); }
.held h1 { color: #fff; max-width: 12ch; }
.held-satz { color: rgba(255, 255, 255, 0.92); font-size: 18px; max-width: 54ch; margin-top: var(--a16); }
.held-hand { display: flex; flex-wrap: wrap; gap: var(--a16); margin-top: var(--a32); }

/* ---------- Statement ---------- */
.satz { background: var(--flaeche); padding-block: var(--sek-mittel); }
.satz-gross {
  font-family: 'Outfit', 'Poppins', sans-serif; font-weight: 540;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--tinte);
}
.satz-wer { margin-top: var(--a16); color: var(--leise); font-size: 15px; }

/* ---------- Gewerke ---------- */
.gewerke { padding-block: var(--sek-normal); background: var(--papier); }
.gewerke-raster { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: var(--a64); align-items: start; }
.gewerke-links { position: sticky; top: 128px; }
.vorzeile { color: var(--marke); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; margin-bottom: var(--a8); }
.gewerke-links h2 { margin-bottom: var(--a16); }
.gewerke-links .lauf { color: var(--leise); margin-bottom: var(--a24); }
.gewerke-liste { border-top: 1px solid var(--linie); }
.reihe {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--a16);
  padding-block: var(--a24); border-bottom: 1px solid var(--linie);
  transition-property: background-color;
}
.reihe:hover { background: var(--mint); }
.reihe-nr { font-family: 'Outfit', 'Poppins', sans-serif; font-variant-numeric: tabular-nums; color: var(--leise); font-size: 15px; padding-top: var(--a4); }
.reihe-text h3 { margin-bottom: var(--a4); }
.reihe-text p { color: var(--leise); font-size: 15px; max-width: 58ch; }
.reihe-gross { padding-block: var(--a32); }
.reihe-gross h3 { font-size: 26px; }
.reihe-gross p { color: var(--text); font-size: 16px; }
.reihe-bild { margin-top: var(--a24); border-radius: var(--r-bild); width: 100%; }

/* ---------- Bildmoment ---------- */
.moment { position: relative; }
.moment img { width: 100%; height: 64vh; object-fit: cover; }
.moment-zeile {
  position: absolute; right: var(--a24); top: var(--a24);
  background: rgba(18, 26, 12, 0.72); color: #fff;
  font-size: 13px; padding: var(--a8) var(--a16); border-radius: var(--r-knopf);
}

/* ---------- Wer macht das ---------- */
.wer { padding-block: 0 var(--sek-normal); background: var(--papier); }
.wer-panel {
  background: var(--papier); border-radius: var(--r-bild);
  box-shadow: var(--sch-panel);
  margin-top: -72px; position: relative;
  padding: var(--a48);
  display: grid; grid-template-columns: 1fr 0.55fr; gap: var(--a64); align-items: start;
}
.wer-text h2 { margin-bottom: var(--a24); }
.wer-text .lauf + .lauf { margin-top: var(--a16); }
.wer-meta { margin-top: var(--a24); padding-top: var(--a24); border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; }
.wer-bilder { position: relative; }
.wer-foto { border-radius: var(--r-bild); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.wer-portrait {
  position: absolute; left: -40px; bottom: -28px;
  width: 168px; height: 168px; border-radius: var(--r-feld);
  border: 4px solid #fff; box-shadow: var(--sch-zart);
}

/* ---------- Fakten, dicht ---------- */
.fakten { background: var(--flaeche); padding-block: var(--sek-eng); }
.fakten-reihe { display: flex; flex-wrap: wrap; }
.fakt { flex: 1 1 180px; padding-inline: var(--a24); padding-block: var(--a8); }
.fakt + .fakt { border-left: 1px solid var(--linie); }
.fakt:first-child { padding-left: 0; }
.fakt-zahl {
  display: block; font-family: 'Outfit', 'Poppins', sans-serif;
  font-size: 34px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--tinte); font-variant-numeric: tabular-nums;
}
.fakt-name { color: var(--leise); font-size: 14px; }

/* ---------- Bewertungen ---------- */
.stimmen { padding-block: var(--sek-normal); background: var(--papier); }
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--a16); margin-bottom: var(--a32); }
.stimmen-note { display: inline-flex; align-items: center; gap: var(--a8); color: var(--leise); font-size: 15px; }
.stimmen-note strong { color: var(--tinte); font-size: 17px; }
.g-logo { flex: none; }
.stimmen-band {
  list-style: none;
  display: flex; gap: var(--a24);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--a4);
  padding-bottom: var(--a16);
}
.stimme {
  flex: 0 0 380px; scroll-snap-align: start;
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  padding: var(--a24);
  display: flex; flex-direction: column; gap: var(--a16);
  background: var(--papier);
}
.stimme p { font-size: 15px; color: var(--text); }
.stimme-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--a12); border-top: 1px solid var(--linie); }
.stimme-name { font-weight: 600; color: var(--tinte); font-size: 14px; }
.stimme-zeit { color: var(--leise); font-size: 13px; }
.stimmen-hinweis { margin-top: var(--a8); color: var(--leise); font-size: 13px; }

/* ---------- Einsatzgebiet, Markenflaeche ---------- */
.gebiet { position: relative; background: var(--tanne); padding-block: var(--sek-normal); overflow: hidden; }
.gebiet-zeichen {
  position: absolute; right: -48px; top: -48px;
  width: 360px; height: 360px; opacity: 0.14; pointer-events: none;
}
.gebiet-raster { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--a96); position: relative; }
.gebiet-titel { color: #fff; margin-bottom: var(--a32); font-size: clamp(30px, 3.2vw, 42px); }
.orte { list-style: none; }
.orte li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--a16);
  padding-block: var(--a16); border-bottom: 1px solid rgba(241, 255, 243, 0.28);
}
.orte li:first-child { border-top: 1px solid rgba(241, 255, 243, 0.28); }
.ort-name { font-family: 'Outfit', 'Poppins', sans-serif; font-size: 27px; font-weight: 560; color: #fff; letter-spacing: -0.01em; }
.ort-info { color: var(--mint); font-size: 14px; text-align: right; }
.gebiet-satz { color: var(--mint); font-size: 16px; max-width: 42ch; }
.gebiet-tel {
  display: inline-block; margin-top: var(--a24);
  font-family: 'Outfit', 'Poppins', sans-serif; font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 620; color: #fff; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition-property: color;
}
.gebiet-tel:hover { color: var(--lime); }
.gebiet-zeiten { color: rgba(241, 255, 243, 0.82); font-size: 14px; margin-top: var(--a4); }
.gebiet-hand { display: flex; flex-wrap: wrap; gap: var(--a16); margin-top: var(--a32); }

/* ---------- Anfrage-Dialog ---------- */
.anfrage { padding-block: var(--sek-weit); background: var(--papier); }
.anfrage h2 { margin-bottom: var(--a8); }
.anfrage-satz { color: var(--leise); margin-bottom: var(--a48); }
.dialog-leiste {
  list-style: none; display: flex; gap: var(--a8);
  margin-bottom: var(--a32); flex-wrap: wrap;
}
.dialog-leiste li {
  display: inline-flex; align-items: center; gap: var(--a8);
  font-size: 13px; color: var(--leise);
  padding: var(--a4) var(--a12); border-radius: var(--r-knopf);
  border: 1px solid var(--linie); counter-increment: schritt;
}
.dialog-leiste li::before {
  content: attr(data-punkt);
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--linie); color: var(--tinte); font-size: 11px; font-weight: 600;
}
.dialog-leiste li.aktiv { border-color: var(--tanne); color: var(--tinte); }
.dialog-leiste li.aktiv::before { background: var(--tanne); color: #fff; }
.dialog-leiste li.fertig::before { background: var(--lime); color: var(--nacht); }
.schritt { border: 0; }
.schritt legend { font-family: 'Outfit', 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: var(--tinte); margin-bottom: var(--a24); }
.chips { display: flex; flex-wrap: wrap; gap: var(--a12); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 48px;
  padding: var(--a12) var(--a24);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font-size: 15px; color: var(--tinte); cursor: pointer;
  transition-property: border-color, background-color, color;
}
.chip:hover span { border-color: var(--tanne); }
.chip input:checked + span { background: var(--tanne); border-color: var(--tanne); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--tanne); outline-offset: 2px; }
.feld { margin-top: var(--a24); }
.feld label { display: block; font-size: 14px; font-weight: 500; color: var(--tinte); margin-bottom: var(--a8); }
.feld input, .feld textarea {
  width: 100%; padding: var(--a12) var(--a16);
  border: 1px solid var(--linie); border-radius: var(--r-feld);
  font: inherit; font-size: 15px; color: var(--tinte); background: var(--papier);
  transition-property: border-color;
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--tanne); }
.dialog-fazit { background: var(--mint); border-radius: var(--r-feld); padding: var(--a12) var(--a16); font-size: 14px; color: var(--tinte); margin-bottom: var(--a24); }
.dialog-fehler { color: #A03403; font-size: 14px; margin-top: var(--a16); }
.dialog-hand { display: flex; gap: var(--a12); margin-top: var(--a32); }
.dialog-hand .knopf-voll { margin-left: auto; }
.dialog-hinweis { margin-top: var(--a24); font-size: 13px; color: var(--leise); border-top: 1px solid var(--linie); padding-top: var(--a16); }
.erfolg { border: 1px solid var(--linie); border-radius: var(--r-bild); padding: var(--a48); background: var(--mint); color: var(--tinte); }
.erfolg svg { color: var(--tanne); margin-bottom: var(--a12); }
.erfolg h3 { margin-bottom: var(--a8); }

/* Ohne JavaScript: alle Schritte sichtbar, Blaetter-Knoepfe weg */
html:not(.js) .schritt[hidden] { display: block !important; }
html:not(.js) .schritt { margin-bottom: var(--a32); }
html:not(.js) [data-weiter], html:not(.js) [data-zurueck] { display: none; }
html:not(.js) [data-senden][hidden] { display: inline-flex !important; }
html:not(.js) .dialog-leiste { display: none; }
html:not(.js) .dialog-fazit { display: none !important; }

/* ---------- Social ---------- */
.einblicke { background: var(--flaeche); padding-block: var(--sek-normal); }
.einblicke h2 { margin-bottom: var(--a32); }
.einblicke-raster { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--a32); align-items: start; }
.ig-panel { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-bild); padding: var(--a32); }
.ig-kopf { display: flex; align-items: center; gap: var(--a16); flex-wrap: wrap; margin-bottom: var(--a24); }
.ig-avatar { width: 56px; height: 56px; border-radius: 50%; }
.ig-wer { display: flex; flex-direction: column; gap: 2px; }
.ig-wer strong { color: var(--tinte); font-size: 16px; }
.ig-handle { font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(var(--a8) * -1); }
.ig-zahlen { color: var(--leise); font-size: 13px; }
.ig-zahlen strong { color: var(--tinte); font-variant-numeric: tabular-nums; }
.ig-punkt { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--leise); vertical-align: middle; margin-inline: var(--a4); }
.ig-folgen { margin-left: auto; }
.ig-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a8); }
.ig-gitter a { display: block; border-radius: var(--r-knopf); overflow: hidden; }
.ig-gitter img { aspect-ratio: 1; object-fit: cover; transition-property: transform; }
.ig-gitter a:hover img { transform: scale(1.04); }
.ig-zeile { margin-top: var(--a16); color: var(--leise); font-size: 13px; }
.tt-panel {
  background: var(--nacht); color: #fff; border-radius: var(--r-bild);
  padding: var(--a32); display: flex; flex-direction: column; gap: var(--a16);
}
.tt-zeichen { color: #fff; }
.tt-handle { font-size: 17px; }
.tt-satz { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.tt-thumb { border-radius: var(--r-feld); aspect-ratio: 9 / 16; object-fit: cover; max-width: 220px; }
.tt-folgen { align-self: flex-start; }

/* ---------- Fuss ---------- */
.fuss { background: var(--nacht); color: rgba(255, 255, 255, 0.82); padding-block: var(--a96) var(--a48); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--a64); }
.fuss-marke img { width: 228px; height: 144px; margin-bottom: var(--a24); }
.fuss-marke p { font-size: 14px; }
.fuss-marke p + p { margin-top: var(--a12); }
.fuss-spalte h3 { color: #fff; font-size: 15px; margin-bottom: var(--a16); }
.fuss-spalte a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, 0.82); font-size: 14px; transition-property: color; }
.fuss-spalte a:hover { color: var(--lime); }
.fuss-social { display: flex; gap: var(--a12); margin-top: var(--a16); }
.fuss-social a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--r-knopf); }
.fuss-social a:hover { border-color: var(--lime); }
.fuss-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a12);
  margin-top: var(--a64); padding-top: var(--a24);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.fuss-platzhalter { color: rgba(255, 255, 255, 0.6); }

/* ---------- Schwebender Kontakt ---------- */
.dock { position: fixed; right: var(--a24); bottom: var(--a24); z-index: 55; }
.dock-knopf {
  display: flex; align-items: center; gap: var(--a12);
  border: 0; background: var(--tinte); color: #fff;
  padding: var(--a8) var(--a16) var(--a8) var(--a8);
  border-radius: 999px; cursor: pointer; box-shadow: var(--sch-dock);
  transition-property: transform, background-color;
}
.dock-knopf:hover { transform: translateY(-2px); }
.dock-gesicht {
  width: 44px; height: 44px; border-radius: 50%;
  background: url('../img/face.jpg') center / cover; border: 2px solid #fff;
}
.dock-wort { font-size: 15px; font-weight: 500; }
.dock-zu { display: none; }
.dock-knopf[aria-expanded='true'] .dock-zu { display: block; }
.dock-knopf[aria-expanded='true'] .dock-wort { display: none; }
.dock-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 344px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--r-bild);
  box-shadow: var(--sch-dock); padding: var(--a24);
}
.dock-kopf { display: flex; align-items: center; gap: var(--a12); margin-bottom: var(--a16); }
.dock-portrait { width: 48px; height: 48px; border-radius: 50%; background: url('../img/face.jpg') center / cover; flex: none; }
.dock-kopf strong { display: block; color: var(--tinte); font-size: 15px; }
.dock-kopf span { color: var(--leise); font-size: 13px; }
.dock-wege { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--a8); }
.dock-social { display: flex; gap: var(--a16); margin-top: var(--a12); font-size: 14px; }
.dock-social a { min-height: 44px; display: inline-flex; align-items: center; }
.dock-form { border-top: 1px solid var(--linie); margin-top: var(--a12); padding-top: var(--a12); }
.dock-frage { font-size: 14px; color: var(--tinte); margin-bottom: var(--a8); }
.chips-klein { gap: var(--a8); }
.chips-klein .chip span { min-height: 44px; padding: var(--a8) var(--a16); font-size: 14px; }
.dock-form .feld { margin-top: var(--a12); }
.dock-senden { width: 100%; margin-top: var(--a12); }
.dock-hinweis { margin-top: var(--a8); font-size: 13px; color: var(--leise); }

/* ---------- Reveal ---------- */
.js .zeig { opacity: 0; transform: translateY(18px); transition-property: opacity, transform; transition-duration: 600ms; transition-delay: calc(var(--d, 0) * 70ms); }
.js .zeig.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeig { opacity: 1; transform: none; transition: none; }
  .knopf, .pfeillink, .ig-gitter img { transition: none; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1100px) {
  .kopf-nav { display: none; }
  .burger { display: flex; }
  .mobilnav.offen { display: block; }
  .gewerke-raster { grid-template-columns: 1fr; gap: var(--a48); }
  .gewerke-links { position: static; }
  .gebiet-raster { grid-template-columns: 1fr; gap: var(--a64); }
  .einblicke-raster { grid-template-columns: 1fr; }
  .tt-panel { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tt-thumb { max-width: 160px; }
}
@media (max-width: 860px) {
  .wer-panel { grid-template-columns: 1fr; padding: var(--a32); gap: var(--a48); margin-top: -48px; }
  .wer-bilder { max-width: 420px; }
  .wer-portrait { left: auto; right: -12px; bottom: -24px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: var(--a48); }
  .stimme { flex-basis: 320px; }
  .moment img { height: 48vh; }
  .fakt { flex-basis: 40%; padding-block: var(--a12); }
  .fakt + .fakt { border-left: 0; }
  .fakt:nth-child(even) { border-left: 1px solid var(--linie); }
  .fakt:nth-child(3) { padding-left: 0; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 80px; }
  .kopf-logo img { width: 126px; height: 80px; }
  .kopf-tel-nr { display: none; }
  .kopf-tel { padding-inline: var(--a12); }
  .held { min-height: 78vh; }
  .held-satz { font-size: 16px; }
  .fakt { flex-basis: 40%; padding-block: var(--a12); }
  .fakt + .fakt { border-left: 0; }
  .fakt:nth-child(even) { border-left: 1px solid var(--linie); }
  .fakt:first-child { padding-left: 0; }
  .fakt:nth-child(3) { padding-left: 0; }
  .ig-folgen { margin-left: 0; width: 100%; }
  .ig-gitter { grid-template-columns: repeat(2, 1fr); }
  .dock { right: var(--a16); bottom: var(--a16); }
  .dock-panel { width: calc(100vw - 32px); right: 0; }
}
@media (max-width: 480px) {
  .fuss-raster { grid-template-columns: 1fr; }
  .stimme { flex-basis: 280px; }
  .knopf-gross { width: 100%; }
  .dialog-hand { flex-wrap: wrap; }
}