/* ============================================================
   Bazid Daoud GaLaBau, Version N5 "Galerie"
   Richtung: bildstark, ruhige Flaechen, klare Kanten.
   Leitreferenz: kleinherenbrink-gartenbau.de (Referenz-Raster,
   Bild traegt, Typografie ordnet sich unter).
   Nebenreferenz: enea.ch (ruhiger Kopf, Bild mit Rand,
   weisse Karte ueberlappt das Foto).
   ============================================================ */

/* ---------- Schriften, nur selbst gehostet ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var.woff2') format('woff2');
  font-weight: 300 800;
  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;
}

/* ---------- System ---------- */
:root {
  /* Marke */
  --marke: #599D08;
  --marke-lime: #84CC11;
  --marke-tief: #0A680A;
  --marke-mint: #F1FFF3;
  --flaeche-nacht: #07380B;

  /* Wirkung */
  --tinte: #1D2916;
  --text: #333333;
  --text-leise: #5C6553;
  --linie: #E3E8DE;
  --linie-dunkel: rgba(241, 255, 243, 0.22);
  --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;

  /* Radien nach Bedeutung: Flaechen bleiben eckig */
  --r-knopf: 2px;
  --r-feld: 4px;
  --r-chip: 8px;
  --r-rund: 999px;

  /* Schatten, gestaffelt nach Wichtigkeit */
  --schat-weich: 0 1px 2px rgba(20, 40, 10, 0.06), 0 10px 24px rgba(20, 40, 10, 0.07);
  --schat-karte: 0 12px 32px rgba(15, 30, 8, 0.10), 0 2px 6px rgba(15, 30, 8, 0.06);
  --schat-cta: 0 2px 4px rgba(7, 52, 9, 0.28), 0 12px 28px rgba(7, 52, 9, 0.20);
  --schat-dock: 0 2px 4px rgba(15, 30, 8, 0.10), 0 8px 18px rgba(15, 30, 8, 0.14), 0 24px 48px rgba(15, 30, 8, 0.16);

  /* Bewegung */
  --weich: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-mikro: 180ms;
  --t-basis: 600ms;

  /* Breiten */
  --breit: 1240px;
  --schmal: 760px;
  --rand: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--marke-tief); text-decoration: none; }
h1, h2, h3 { font-family: 'Outfit', sans-serif; color: var(--tinte); }
h1 { font-size: clamp(38px, 4.2vw, 60px); font-weight: 640; line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(27px, 2.4vw, 34px); font-weight: 620; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
p  { max-width: 34rem; }

.wrap { max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.wrap-schmal { max-width: var(--schmal); margin-inline: auto; padding-inline: var(--rand); }

/* einheitliche Fototonung */
.foto { filter: contrast(1.03) saturate(1.05); }

/* Reveal nur mit JS, ohne JS bleibt alles sichtbar */
.js .zeig { opacity: 0; transform: translateY(22px); transition: opacity var(--t-basis) var(--weich), transform var(--t-basis) var(--weich); }
.js .zeig.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeig { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition-duration: 1ms !important; }
}

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a8);
  font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600;
  min-height: 48px; padding-inline: var(--a24);
  border: 0; border-radius: var(--r-knopf); cursor: pointer;
  transition: background-color var(--t-mikro) var(--weich), transform var(--t-mikro) var(--weich);
}
.knopf-voll { background: var(--marke-tief); color: #fff; box-shadow: var(--schat-cta); }
.knopf-voll:hover { background: #085508; transform: translateY(-2px); }
.knopf-hell { background: #fff; color: var(--marke-tief); border: 1px solid var(--linie); }
.knopf-hell:hover { border-color: var(--marke-tief); }
.knopf-zeile { background: none; color: var(--marke-tief); padding-inline: var(--a4); min-height: 44px; }
.knopf-zeile:hover { color: var(--marke); }
.knopf svg { flex: 0 0 auto; }

/* ---------- Kopf ---------- */
.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: 1344px; margin-inline: auto; padding-inline: var(--rand);
  display: flex; align-items: center; gap: var(--a32);
  padding-block: var(--a12);
}
.kopf-logo img { width: 133px; height: 84px; }
.kopf-nav { display: flex; gap: var(--a8); margin-inline: auto; }
.kopf-nav a {
  color: var(--tinte); font-size: 16px; font-weight: 500;
  padding: var(--a12) var(--a16); border-radius: var(--r-knopf);
  transition: background-color var(--t-mikro) var(--weich), border-color var(--t-mikro) var(--weich);
}
.kopf-nav a:hover { background: var(--marke-mint); color: var(--marke-tief); }
.kopf-aktionen { display: flex; align-items: center; gap: var(--a12); }
.kopf .knopf-hell { min-height: 44px; font-size: 15px; }
.kopf .knopf-voll { min-height: 44px; font-size: 15px; box-shadow: none; }

/* ---------- Held: Bild mit Rand, Karte ueberlappt (enea) ---------- */
.held { padding-inline: var(--a48); }
.held-bild { position: relative; }
.held-bild img { width: 100%; height: 76vh; object-fit: cover; object-position: 50% 42%; }
.held-karte {
  position: relative; z-index: 2;
  background: var(--papier); box-shadow: var(--schat-karte);
  max-width: 620px;
  margin-top: -128px; margin-left: var(--a48);
  padding: var(--a48);
}
.held-karte .blatt { width: 44px; height: 39px; margin-bottom: var(--a24); }
.held-karte p { margin-top: var(--a16); color: var(--text); }
.held-tasten { display: flex; flex-wrap: wrap; gap: var(--a16); margin-top: var(--a32); }

/* ---------- Arbeiten: gestaffeltes Raster (kleinherenbrink) ---------- */
.arbeiten { padding-block: var(--a96); }
.arbeiten-kopf { max-width: var(--schmal); margin-bottom: var(--a64); }
.arbeiten-kopf .zeile { display: flex; align-items: baseline; gap: var(--a16); }
.arbeiten-kopf p { margin-top: var(--a12); color: var(--text-leise); }
.spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--a48); }
.spalte { display: flex; flex-direction: column; gap: var(--a64); }
.spalte-2 { padding-top: var(--a64); }
.spalte-3 { padding-top: var(--a128); }
.arbeit { display: flex; flex-direction: column; }
.arbeit-bild { overflow: hidden; }
.arbeit-bild img { width: 100%; height: auto; transition: transform var(--t-basis) var(--weich); }
.arbeit:hover .arbeit-bild img { transform: scale(1.04); }
.arbeit h3 { margin-top: var(--a16); }
.arbeit p { margin-top: var(--a8); font-size: 15px; line-height: 1.6; color: var(--text-leise); }
.arbeit-mehr {
  display: inline-flex; align-items: center; gap: var(--a8);
  margin-top: var(--a12); min-height: 44px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--marke-tief); align-self: flex-start;
}
.arbeit-mehr svg { transition: transform var(--t-mikro) var(--weich); }
.arbeit-mehr:hover svg { transform: translateX(4px); }

/* ---------- Bildmoment: randlos ---------- */
.moment { position: relative; }
.moment img { width: 100%; height: 62vh; object-fit: cover; }
.moment-zeile {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(9, 26, 6, 0.62), rgba(9, 26, 6, 0));
  padding: var(--a96) var(--a48) var(--a24);
}
.moment-zeile p { color: #fff; font-size: 15px; max-width: none; }

/* ---------- Wer macht das (Mint-Flaeche) ---------- */
.wer { background: var(--marke-mint); padding-block: var(--a96); }
.wer-innen { display: grid; grid-template-columns: 1.38fr 1fr; gap: var(--a96); align-items: center; }
.wer-text h2 { max-width: 20ch; }
.wer-text .stimme {
  font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 600;
  color: var(--marke-tief); line-height: 1.3; margin-top: var(--a24); max-width: 24ch;
}
.wer-text p { margin-top: var(--a16); }
.wer-fakten { margin-top: var(--a32); border-top: 1px solid var(--linie); padding-top: var(--a24); display: grid; gap: var(--a8); font-size: 15px; }
.wer-fakten div { display: flex; gap: var(--a12); align-items: center; color: var(--text); }
.wer-fakten svg { color: var(--marke-tief); flex: 0 0 auto; }
.wer-bilder { position: relative; }
.wer-bilder .gross { width: 100%; height: auto; }
.wer-bilder .portrait {
  position: absolute; left: -64px; bottom: -32px;
  width: 180px; height: 180px; object-fit: cover;
  border: 6px solid #FFFFFF; box-shadow: var(--schat-weich);
}

/* ---------- Bewertungen ---------- */
.rezension { padding-block: var(--a96); }
.rez-kopf { display: flex; align-items: flex-end; gap: var(--a48); flex-wrap: wrap; margin-bottom: var(--a48); }
.rez-wert { display: flex; align-items: center; gap: var(--a24); }
.rez-wert .g { width: 56px; height: 56px; }
.rez-zahl {
  font-family: 'Outfit', sans-serif; font-size: clamp(64px, 7vw, 96px);
  font-weight: 640; line-height: 1; color: var(--tinte);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.rez-neben { color: var(--text-leise); font-size: 15px; max-width: 22rem; }
.rez-neben strong { color: var(--tinte); }
.rez-reihe {
  display: flex; gap: var(--a24);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  padding-bottom: var(--a16);
  margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand);
}
.rez {
  flex: 0 0 380px; scroll-snap-align: start;
  border: 1px solid var(--linie); padding: var(--a24);
  display: flex; flex-direction: column; gap: var(--a12);
  background: var(--papier);
}
.rez .sterne { color: #F5B301; }
.rez p { font-size: 15px; line-height: 1.65; }
.rez footer { margin-top: auto; padding-top: var(--a12); border-top: 1px solid var(--linie); display: flex; align-items: center; gap: var(--a12); font-size: 13.5px; color: var(--text-leise); }
.rez footer .g { width: 18px; height: 18px; }
.rez footer strong { color: var(--tinte); font-weight: 600; }
.rez-hinweis { margin-top: var(--a12); font-size: 13.5px; color: var(--text-leise); }

/* ---------- Social: Instagram und TikTok getrennt ---------- */
.social { padding-block: var(--a64) var(--a96); }
.social-innen { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--a48); align-items: stretch; }
.ig-panel { border: 1px solid var(--linie); padding: var(--a32); }
.ig-kopfzeile { display: flex; align-items: center; gap: var(--a16); flex-wrap: wrap; }
.ig-kopfzeile img { width: 64px; height: 64px; border-radius: var(--r-rund); }
.ig-name { font-family: 'Outfit', sans-serif; font-weight: 620; color: var(--tinte); font-size: 18px; line-height: 1.2; }
.ig-handle { font-size: 14px; color: var(--text-leise); }
.ig-zahlen { display: flex; gap: var(--a24); margin-left: auto; font-size: 14px; color: var(--text-leise); }
.ig-zahlen strong { display: block; font-family: 'Outfit', sans-serif; font-size: 22px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ig-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a8); margin-top: var(--a24); }
.ig-feed a { display: block; overflow: hidden; }
.ig-feed img { width: 100%; height: auto; transition: transform var(--t-basis) var(--weich); }
.ig-feed a:hover img { transform: scale(1.04); }
.ig-fuss { display: flex; align-items: center; gap: var(--a16); margin-top: var(--a24); flex-wrap: wrap; }
.ig-fuss .knopf-voll { box-shadow: none; }
.ig-fuss p { font-size: 13.5px; color: var(--text-leise); max-width: 24rem; }
.tt-panel {
  background: var(--flaeche-nacht); color: var(--marke-mint);
  padding: var(--a32); display: flex; flex-direction: column; gap: var(--a16);
}
.tt-panel h3 { color: #fff; }
.tt-panel .handle { font-size: 14px; color: var(--marke-lime); }
.tt-panel img { width: 100%; max-width: 220px; height: auto; margin-block: var(--a8); }
.tt-panel p { font-size: 14px; color: rgba(241, 255, 243, 0.75); }
.tt-panel .knopf { background: #fff; color: var(--flaeche-nacht); margin-top: auto; align-self: flex-start; }
.tt-panel .knopf:hover { background: var(--marke-mint); }

/* ---------- Einsatzgebiet: Markenflaeche, schmal und dicht ---------- */
.gebiet { background: var(--marke-tief); color: var(--marke-mint); padding-block: var(--a48); }
.gebiet-innen { display: grid; gap: var(--a12); }
.gebiet h2 { color: #fff; font-size: 27px; }
.gebiet-orte { font-family: 'Outfit', sans-serif; font-size: clamp(21px, 2vw, 27px); font-weight: 600; color: #fff; max-width: none; }
.gebiet-orte span { color: var(--marke-lime); }
.gebiet-neben { font-size: 14px; color: rgba(241, 255, 243, 0.85); display: flex; flex-wrap: wrap; gap: var(--a4) var(--a24); align-items: center; }
.gebiet-neben a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Anfrage: Hoehepunkt mit Atempause ---------- */
.anfrage { padding-block: var(--a160) var(--a128); }
.anfrage-innen { display: grid; grid-template-columns: 1fr 0.55fr; gap: var(--a96); align-items: start; }
.anfrage h2 { font-size: clamp(30px, 2.9vw, 40px); }
.anfrage-kopftext { margin-top: var(--a12); color: var(--text-leise); }
.dialog { margin-top: var(--a48); border: 1px solid var(--linie); }
.dialog-stand { display: flex; border-bottom: 1px solid var(--linie); }
.dialog-stand span {
  flex: 1; padding: var(--a12) var(--a16); font-size: 13.5px; font-weight: 500;
  color: var(--text-leise); border-right: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.dialog-stand span:last-child { border-right: 0; }
.dialog-stand span.aktiv { color: var(--marke-tief); background: var(--marke-mint); font-weight: 600; }
.dialog-stand span.fertig { color: var(--marke-tief); }
.schritt { padding: var(--a32); }
.js .schritt { display: none; }
.js .schritt.aktiv { display: block; }
.schritt legend, .schritt .frage { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 620; color: var(--tinte); margin-bottom: var(--a16); }
.chips { display: flex; flex-wrap: wrap; gap: var(--a12); }
.chip {
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
  min-height: 48px; padding-inline: var(--a16);
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--r-chip);
  cursor: pointer; display: inline-flex; align-items: center;
  transition: background-color var(--t-mikro) var(--weich), border-color var(--t-mikro) var(--weich);
}
.chip:hover { border-color: var(--marke-tief); }
.chip.an { background: var(--marke-tief); border-color: var(--marke-tief); color: #fff; }
.feld { display: grid; gap: var(--a4); margin-top: var(--a16); }
.feld label { font-size: 14px; font-weight: 500; color: var(--tinte); }
.feld input, .feld textarea {
  font: inherit; font-size: 16px; color: var(--tinte);
  padding: var(--a12) var(--a16); border: 1px solid var(--linie); border-radius: var(--r-feld);
  background: #fff; width: 100%;
}
.feld input:focus, .feld textarea:focus { outline: 2px solid var(--marke-tief); outline-offset: 1px; border-color: var(--marke-tief); }
.dialog-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--a16); padding: var(--a16) var(--a32) var(--a32); }
.dialog-fehler { color: #A33403; font-size: 14px; padding-inline: var(--a32); display: none; }
.dialog-fehler.zeigen { display: block; }
.zusammenfassung { background: var(--marke-mint); padding: var(--a16); font-size: 14px; display: grid; gap: var(--a4); margin-bottom: var(--a16); }
.zusammenfassung b { color: var(--marke-tief); font-weight: 600; }
.dialog-danke { padding: var(--a32); display: none; }
.dialog-danke.zeigen { display: block; }
.dialog-danke h3 { color: var(--marke-tief); }
.dialog-danke p { margin-top: var(--a8); font-size: 15px; }
.vorschau-hinweis {
  margin-top: var(--a24); border: 1px dashed var(--marke-tief); border-radius: var(--r-feld);
  padding: var(--a12) var(--a16); font-size: 13.5px; color: var(--marke-tief); background: var(--marke-mint);
}
.wege { border: 1px solid var(--linie); padding: var(--a32); display: grid; gap: var(--a16); }
.wege h3 { font-size: 18px; }
.wege a.knopf { justify-content: flex-start; }
.wege .zeile { display: flex; gap: var(--a12); align-items: center; font-size: 15px; color: var(--text); }
.wege .zeile svg { color: var(--marke-tief); flex: 0 0 auto; }
.wege .klein { font-size: 13.5px; color: var(--text-leise); }

/* ---------- Fuss ---------- */
.fuss { background: var(--flaeche-nacht); color: var(--marke-mint); padding-block: var(--a96) var(--a48); }
.fuss-innen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--a64); }
.fuss-logo img { width: 216px; height: 136px; }
.fuss-logo p { margin-top: var(--a24); font-size: 14px; color: rgba(241, 255, 243, 0.75); max-width: 26rem; }
.fuss h3 { color: #fff; font-size: 16px; margin-bottom: var(--a16); }
.fuss ul { list-style: none; display: grid; gap: var(--a4); }
.fuss a { color: rgba(241, 255, 243, 0.85); display: inline-flex; align-items: center; min-height: 44px; }
.fuss a:hover { color: var(--marke-lime); }
.fuss address { font-style: normal; font-size: 15px; color: rgba(241, 255, 243, 0.85); display: grid; gap: var(--a4); }
.fuss-social { display: flex; gap: var(--a12); margin-top: var(--a16); }
.fuss-social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie-dunkel); border-radius: var(--r-knopf); color: #fff;
  transition: border-color var(--t-mikro) var(--weich), color var(--t-mikro) var(--weich);
}
.fuss-social a:hover { border-color: var(--marke-lime); color: var(--marke-lime); }
.fuss-unten {
  margin-top: var(--a64); padding-top: var(--a24); border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: var(--a24); align-items: center;
  font-size: 13.5px; color: rgba(241, 255, 243, 0.65);
}
.fuss-unten .platzhalter { color: rgba(241, 255, 243, 0.85); }

/* ---------- Dock rechts unten ---------- */
.dock { position: fixed; right: var(--a24); bottom: var(--a24); z-index: 50; }
.dock-auf {
  width: 64px; height: 64px; border-radius: var(--r-rund); cursor: pointer;
  border: 3px solid #FFFFFF;
  background: var(--flaeche-nacht) url('../img/face.jpg') center / cover no-repeat;
  box-shadow: var(--schat-dock);
  transition: transform var(--t-mikro) var(--weich);
}
.dock-auf:hover { transform: translateY(-2px); }
.dock-panel {
  position: absolute; right: 0; bottom: 80px; width: 340px;
  background: #fff; border: 1px solid var(--linie); box-shadow: var(--schat-dock);
  display: none;
}
.dock-panel.offen { display: block; }
.dock-kopf { display: flex; align-items: center; gap: var(--a12); padding: var(--a16); background: var(--marke-mint); }
.dock-kopf .bild { width: 44px; height: 44px; border-radius: var(--r-rund); background: url('../img/face.jpg') center / cover no-repeat; flex: 0 0 auto; }
.dock-kopf b { font-family: 'Outfit', sans-serif; color: var(--tinte); display: block; line-height: 1.2; }
.dock-kopf span { font-size: 13.5px; color: var(--text-leise); }
.dock-zu { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--tinte); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dock-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a8); padding: var(--a16); }
.dock-aktionen .knopf { font-size: 14px; min-height: 44px; box-shadow: none; }
.dock-social { display: flex; gap: var(--a8); padding: 0 var(--a16) var(--a12); }
.dock-social a {
  flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--a8);
  border: 1px solid var(--linie); border-radius: var(--r-knopf); color: var(--tinte); font-size: 13.5px;
}
.dock-social a:hover { border-color: var(--marke-tief); color: var(--marke-tief); }
.dock-form { border-top: 1px solid var(--linie); padding: var(--a16); }
.dock-form .frage { font-size: 14px; font-weight: 600; color: var(--tinte); margin-bottom: var(--a8); font-family: 'Outfit', sans-serif; }
.dock-form .chips { gap: var(--a8); }
.dock-form .chip { min-height: 44px; font-size: 13.5px; padding-inline: var(--a12); }
.dock-form .feld { margin-top: var(--a12); }
.dock-form .knopf { width: 100%; margin-top: var(--a12); box-shadow: none; }
.dock-form .hinweis { display: none; margin-top: var(--a12); font-size: 13px; color: var(--marke-tief); background: var(--marke-mint); padding: var(--a8) var(--a12); border-radius: var(--r-feld); }
.dock-form .hinweis.zeigen { display: block; }

/* ============================================================
   Breiten 1024 / 768 / 390
   ============================================================ */
@media (max-width: 1120px) {
  .kopf-nav { display: none; }
  .kopf-innen { gap: var(--a16); }
  .kopf-aktionen { margin-left: auto; }
  .wer-innen { grid-template-columns: 1fr; gap: var(--a64); }
  .wer-bilder { max-width: 480px; }
  .wer-bilder .portrait { left: auto; right: -16px; }
  .social-innen { grid-template-columns: 1fr; }
  .tt-panel { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tt-panel img { max-width: 132px; }
  .anfrage-innen { grid-template-columns: 1fr; gap: var(--a64); }
  .fuss-innen { grid-template-columns: 1fr 1fr; gap: var(--a48); }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 96px; }
  .held { padding-inline: var(--a16); }
  .held-bild img { height: 62vh; }
  .held-karte { margin-left: 0; margin-top: -64px; padding: var(--a24); }
  .spalten { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); gap: var(--a24); margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand) ; padding-bottom: var(--a16); }
  .spalte { display: contents; }
  .arbeit { flex: 0 0 300px; scroll-snap-align: start; }
  .arbeit-bild img { height: 240px; object-fit: cover; }
  .gebiet-innen { flex-direction: column; align-items: flex-start; gap: var(--a16); }
  .gebiet-neben { margin-left: 0; }
  .moment-zeile { padding: var(--a64) var(--a24) var(--a16); }
  .rez { flex-basis: 320px; }
}

@media (max-width: 480px) {
  :root { --rand: 16px; }
  .kopf-logo img { width: 95px; height: 60px; }
  .kopf .knopf-hell span { display: none; }
  .kopf .knopf-hell { padding-inline: var(--a12); }
  .held-karte { margin-top: -48px; }
  .held-tasten .knopf { width: 100%; }
  .rez { flex-basis: 84vw; }
  .ig-zahlen { margin-left: 0; width: 100%; }
  .ig-panel { padding: var(--a16); }
  .tt-panel { padding: var(--a16); }
  .anfrage { padding-block: var(--a96) var(--a64); }
  .dialog-stand span { padding: var(--a8); font-size: 12px; }
  .schritt { padding: var(--a16); }
  .dialog-fuss { padding: var(--a12) var(--a16) var(--a16); }
  .dialog-fehler { padding-inline: var(--a16); }
  .fuss-innen { grid-template-columns: 1fr; }
  .dock { right: var(--a12); bottom: var(--a12); }
  .dock-panel { width: calc(100vw - 32px); max-width: 344px; }
}