/* Königs Entrümpelung — main.css
   Alle Werte aus DESIGN-BRIEF.md. Ein Design-System für index, impressum, datenschutz, 404. */

/* ── Schriften (self-hosted, OFL; heruntergeladen von fonts.bunny.net) ── */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-600-normal.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-800-normal.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: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-latin-400-normal.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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-latin-700-normal.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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ── Tokens ── */
:root {
  --gruen: #1b4a03;          /* gemessen: Median der Tintenpixel von marke/logo.jpg */
  --gruen-tief: #0f2a03;
  --gruen-zeichen: #2c6410;   /* nur für das große Zeichen im Hero, eine Stufe heller als --gruen */
  --papier: #f5f4ee;
  --papier-2: #e8ebdf;
  --tinte: #17220f;
  --tinte-dim: #4b5544;
  --kreide: #f5f4ee;
  --kreide-dim: #b9c4ab;
  --salbei: #a7bd8c;
  --feldkante: #6f7a67;
  --haarlinie: rgba(23, 34, 15, 0.18);

  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Helvetica Neue', sans-serif;
  --fs-slogan: clamp(4rem, 1rem + 6vw, 8.75rem);
  --fs-h2: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-lead: clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --lh-body: 1.6;
  --lh-tight: 1.04;

  --ease: cubic-bezier(0.52, 0.01, 0.08, 1);
  --radius: 14px;
  --rand: clamp(1rem, 2.5vw, 2.5rem);
  --pad-l: clamp(5rem, 9vw, 8.5rem);
  --pad-s: clamp(3.5rem, 6vw, 5rem);
  --kopf-h: 6rem;
  --leiste-h: 0px;
}

/* ── Grundlage ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tinte);
  background: var(--papier);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; hyphens: manual; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
p, .lead { hyphens: auto; text-wrap: pretty; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
[id] { scroll-margin-top: calc(var(--kopf-h) + 12px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  /* fixed: auch wenn der Fokus am Seitenende auf ihn zurückspringt, steht er im Bild */
  position: fixed; left: 1rem; top: 0.75rem; z-index: 300;
  padding: 0.75rem 1.1rem; border-radius: var(--radius);
  background: var(--gruen); color: var(--kreide); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
main#main:focus, main#main:focus-visible { outline: none; }

:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.kontakt :focus-visible, .fuss :focus-visible { outline-color: var(--salbei); }

/* ── Knöpfe ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none;
  background: transparent;
  touch-action: manipulation;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.09s var(--ease);
}
.knopf--primaer { background: var(--gruen); color: var(--kreide); }
.knopf--hell { background: var(--kreide); color: var(--gruen); }
.knopf--klein { min-height: 2.75rem; padding: 0.55rem 1.2rem; font-size: 1rem; }
.knopf--gross { min-height: 3.75rem; padding: 1rem 1.6rem; font-size: 1.1875rem; }
.knopf__glyphe { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.18s var(--ease); }
/* Zweiter Weg auf Grün (WhatsApp, Hero und Kontaktband): Rand statt Fläche, der Anruf bleibt der volle Knopf */
.knopf--rand { color: var(--kreide); box-shadow: inset 0 0 0 2px var(--kreide); }
.knopf:active { transform: scale(0.97); }

.textlink {
  display: inline-block; padding-block: 0.4rem;
  font-weight: 700; color: var(--gruen);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.16s var(--ease), color 0.16s var(--ease);
  touch-action: manipulation;
}
.textlink--hell { color: var(--kreide); }
.textlink:active { color: var(--gruen-tief); }
.nav__link:active { color: var(--gruen-tief); }
a.kontakt__zeile:active { color: var(--kreide-dim); }
.seite a:not(.knopf):active { color: var(--gruen-tief); }
.textlink--hell:active { color: var(--kreide-dim); }

/* ── Kopf: hide-reveal ── */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--kopf-h);
  background: var(--papier);
  border-bottom: 1px solid var(--haarlinie);
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease);
}
.kopf.ist-unten { box-shadow: 0 0.5rem 1.5rem -1rem rgba(15, 42, 3, 0.45); }
/* Weggeschoben ohne Schatten: der Schatten ragt 16 px unter die Leiste und stand sonst
   als grauer Streifen am oberen Bildschirmrand */
.kopf.ist-weg { transform: translateY(-100%); box-shadow: none; }
.kopf__innen {
  height: 100%; max-width: 90rem; margin: 0 auto; padding-inline: var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.marke { display: flex; align-items: center; gap: 0.9rem; color: var(--gruen); text-decoration: none; min-height: 2.75rem; }
.marke__zeichen { width: 4.5rem; height: 2.66rem; flex: none; }
.marke__text { display: grid; line-height: 1; }
.marke__name { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.04em; }
.marke__zusatz { font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.28em; margin-top: 0.2rem; }
.marke__ort { font-size: 0.8125rem; color: var(--tinte-dim); margin-top: 0.45rem; letter-spacing: 0; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.nav__liste { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__link {
  position: relative; display: inline-block; padding-block: 0.6rem;
  text-decoration: none; font-weight: 700; color: var(--tinte);
}
/* Aktiv-Indikator (Regel 89): kleine Krone über dem Wort, kein Unterstrich */
.nav__link::before {
  content: ''; position: absolute; left: 50%; top: -0.15rem;
  width: 0.85rem; height: 0.62rem; margin-left: -0.425rem;
  background: var(--gruen);
  -webkit-mask: url(../../favicon.svg) center / contain no-repeat;
  mask: url(../../favicon.svg) center / contain no-repeat;
  opacity: 0; transform: translateY(0.25rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav__link[aria-current="true"] { color: var(--gruen); }
.nav__link[aria-current="true"]::before { opacity: 1; transform: none; }

/* ── Hero: ganz in Logo-Grün, links die Zeile, rechts Krone und Wagen groß und leise
   (Runde 5, Tim 04.10.: die Handyfotos des Betriebs tragen keinen Aufmacher; sie stehen
   eine Bildschirmhöhe tiefer im Regler, wo der Vergleich ihre Aufgabe ist) ── */
.hero {
  position: relative;
  min-height: min(100svh, 64rem);
  /* Text fluchtet mit der Marke im Kopf (Satzbreite 90rem), auch auf 1536 und 1920 px */
  --hero-pl: calc(max(0px, (100% - 90rem) / 2) + var(--rand));
  /* Textspalte schmaler als die Hälfte, das Zeichen nimmt den Rest: kein 50/50-Split
     (Brief Runde 1: editorial-asymmetrisch; Visual-QA Runde 1, L6) */
  --hero-text: min(38rem, 40vw);
  padding: var(--kopf-h) var(--rand) 0 var(--hero-pl);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem);
  isolation: isolate; overflow: clip;
  background: var(--gruen); color: var(--kreide);
}
.hero :focus-visible { outline-color: var(--kreide); }
.hero__medium {
  /* rechts endet die Spalte an derselben Kante wie der Anruf-Knopf im Kopf (Satzbreite 90rem) */
  position: absolute; top: var(--kopf-h); right: var(--hero-pl); bottom: 0; left: calc(var(--hero-pl) + var(--hero-text) + 2rem);
  z-index: -1; pointer-events: none;
}
/* Das Zeichen aus dem Logo, eine Stufe heller als der Grund: Fläche, keine Aussage (aria-hidden).
   Ganz sichtbar und mittig in der rechten Spalte, auf Höhe des Textblocks. Angeschnitten am
   rechten Rand lief es über die Satzbreite hinaus und wirkte verrutscht (Tim, 04.10.) */
.hero__zeichen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(100%, 44rem); height: auto; aspect-ratio: 1250 / 740;
  color: var(--gruen-zeichen);
}
.hero__inhalt {
  grid-column: 1 / -1; width: var(--hero-text); align-self: center;
  padding: clamp(2rem, 6vh, 4.5rem) clamp(1rem, 3vw, 3.5rem) clamp(2rem, 6vh, 4.5rem) 0;
}
.hero__titel { display: flex; flex-direction: column; gap: clamp(0.9rem, 2.2vh, 1.6rem); }
.hero__slogan { font-size: var(--fs-slogan); line-height: 0.9; letter-spacing: -0.035em; color: var(--kreide); }
.hero__lead { margin-top: 0.75rem; max-width: 30rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--kreide-dim); hyphens: manual; }
/* Runde 12: der erste Satz trägt das Angebot, der zweite folgt leiser */
.hero__lead--erst { margin-top: clamp(1.1rem, 2.8vh, 1.75rem); color: var(--kreide); }
/* Runde 12b (Tim, 27.10.: „sehr viele Zeilen untereinander"): am Desktop eine breitere Textspalte,
   jeder Satz zwei statt drei Zeilen. Bleibt unter der halben Breite (kein 50/50-Split, Runde 1).
   Unter 64em gilt weiter 30rem: Telefon quer steht das Zeichen ab Rand + 31rem daneben. */
@media (min-width: 64em) {
  .hero { --hero-text: min(46rem, 46vw); }
  .hero__lead { max-width: 42rem; }
}
/* Schnell · Zuverlässig · Gründlich: drei Wörter, getrennt durch das kleine Feld der Ablauf-Punkte */
.hero__werte {
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  font-weight: 700; font-size: var(--fs-body); color: var(--kreide);
}
.hero__werte span { display: inline-flex; align-items: center; gap: 0.9rem; }
.hero__werte span + span::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--salbei); }
/* bis 360 px: enger, damit die drei Wörter in einer Zeile bleiben und kein Feld eine Zeile anführt (LOW-03) */
@media (max-width: 23.5em) {
  .hero__werte { column-gap: 0.55rem; }
  .hero__werte span { gap: 0.55rem; }
  .hero__werte span + span::before { width: 0.4rem; height: 0.4rem; }
}
.hero__aktion {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
}

/* Das Zeichen wird beim Laden einmal von links nach rechts freigelegt: derselbe Schnitt, der eine
   Bildschirmhöhe tiefer als Regler zwischen Vorher und Nachher steht */
@media (prefers-reduced-motion: no-preference) {
  .hero__zeichen { animation: freilegen 1.4s var(--ease) 0.15s both; }
}
@keyframes freilegen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Druck: Chrome und Safari lassen Hintergründe weg, Kreide stünde dann auf weißem Papier
   (Delta-Review LOW-01). Gedruckt wird der Hero dunkel auf hell, ohne das Zeichen. */
@media print {
  .hero { background: none; color: var(--tinte); }
  .hero__lead { color: var(--tinte-dim); }
  .hero__slogan, .hero__lead--erst, .hero__werte { color: var(--tinte); }
  /* Trennfelder sind Hintergründe: ohne exact fielen sie weg (Code-Review Runde 12 LOW-01) */
  .hero__werte span + span::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: var(--gruen); }
  .hero .hero__zeichen { display: none; } /* .hero davor: die Tablet-Regel weiter unten setzt display: block */
  .hero { min-height: 0; padding-bottom: 2rem; }
  /* echter Rand statt box-shadow: Schatten druckt nicht in jedem Browser (Delta-Review LOW-02) */
  .hero .knopf--hell { background: none; color: var(--gruen); border: 2px solid var(--gruen); padding: calc(1rem - 2px) calc(1.6rem - 2px); }
  .hero .textlink--hell { color: var(--gruen); }
  .hero .knopf--rand { color: var(--gruen); box-shadow: none; border: 2px solid var(--gruen); padding: calc(1rem - 2px) calc(1.6rem - 2px); }
  /* Kontaktband ebenso dunkel auf hell: die Nummern sind das, was man ausdruckt (Code-Review Runde 12 LOW-02) */
  .kontakt { background: none; color: var(--tinte); }
  .kontakt__text h2, .kontakt__zeile { color: var(--tinte); }
  .kontakt__unterzeile { color: var(--tinte-dim); }
  .kontakt__symbol { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kontakt .knopf--hell, .kontakt .knopf--rand { background: none; color: var(--gruen); box-shadow: none; border: 2px solid var(--gruen); padding: calc(0.8rem - 2px) calc(1.6rem - 2px); }
  .kontakt .textlink--hell { color: var(--gruen); }
}

/* ── Vorher/Nachher: eine Bühne, ein Regler, vier Räume zur Wahl ── */
/* Bühne und Text als EINE Komposition in der Mitte, nicht an zwei Rändern */
.vn-bereich {
  max-width: 90rem; margin: 0 auto;
  padding: var(--pad-l) var(--rand);
  display: grid; grid-template-columns: auto minmax(0, 32rem); grid-template-rows: auto auto;
  justify-content: center; column-gap: clamp(2.5rem, 7vw, 7rem);
}
.vn-buehne {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  /* so hoch, dass die ganze Bühne mit Bildunterschrift in den Bildschirm passt */
  width: clamp(22rem, calc((100svh - var(--kopf-h) - 7rem) * 0.75), 36rem);
  display: grid;
}
.vn-bereich__text { grid-column: 2; grid-row: 1; align-self: end; }
.vn-bereich__text > h2 { max-width: 10ch; }
.vn-bereich__text > p { margin-top: 1.25rem; max-width: 30rem; color: var(--tinte-dim); }

.vn-wahl { display: none; margin-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--haarlinie); }
.js .vn-wahl { display: grid; }
.vn-wahl__knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0.7rem 0;
  border-bottom: 1px solid var(--haarlinie);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem);
  text-align: left; color: var(--tinte-dim);
  touch-action: manipulation;
  transition: color 0.2s var(--ease);
}
/* Zeiger: ein kleines grünes Feld im Radius der Seite, das am gewählten Raum aufgeht */
.vn-wahl__knopf::after {
  content: ''; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 4px;
  background: var(--gruen); opacity: 0; transform: scale(0.3);
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
/* kein Einrücken per padding: das animierte eine Layout-Eigenschaft und schob die Zeile (Regel 24/52) */
.vn-wahl__knopf[aria-pressed="true"] { color: var(--gruen); }
.vn-wahl__knopf[aria-pressed="true"]::after { opacity: 1; transform: none; }
.vn-wahl__knopf:active { color: var(--gruen-tief); }
.vn-bereich__hinweis { grid-column: 2; grid-row: 2; align-self: start; margin-top: 1.5rem; font-size: var(--fs-small); color: var(--tinte-dim); }

.vn { min-width: 0; }
.vn + .vn { margin-top: 2rem; } /* ohne JS stehen alle vier untereinander */
.js .vn-buehne > .vn {
  grid-area: 1 / 1; margin-top: 0;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.js .vn:not(.ist-aktiv) { opacity: 0; visibility: hidden; }
.js .vn.ist-aktiv { transition: opacity 0.35s var(--ease), visibility 0s; }

.vn__rahmen {
  --p: 50;
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--papier-2);
  user-select: none; -webkit-user-select: none;
  container-type: inline-size; /* 1cqw = 1 % der Bühnenbreite, für die Knauf-Klemme */
}
/* Senkrecht scrollt die Seite, waagerecht zieht der Finger den Regler */
/* pan-y zuerst allein: wer den Doppelwert nicht kennt, verwirft die Zeile, und dann gälte auto (Runde 12) */
.js .vn__rahmen { touch-action: pan-y; touch-action: pan-y pinch-zoom; cursor: ew-resize; }
.vn__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.vn__bild--nachher { z-index: 0; }
.vn__bild--vorher { z-index: 1; clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); }
/* 1-px-Kante ÜBER den Bildern, damit helle Nachher-Fotos nicht ins Papier laufen */
.vn__rahmen::after { content: ''; position: absolute; inset: 0; z-index: 4; box-shadow: inset 0 0 0 1px var(--feldkante); pointer-events: none; }

.vn__marke {
  position: absolute; top: 0.75rem; z-index: 2;
  padding: 0.35rem 0.6rem; border-radius: 6px;
  background: rgba(245, 244, 238, 0.94); color: var(--tinte);
  font-size: 0.875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0;
  pointer-events: none;
}
/* Das Schild geht weg, sobald der Regler darüberläuft */
.vn__marke--vorher { left: 0.75rem; opacity: clamp(0, (var(--p) - 16) / 8, 1); }
.vn__marke--nachher { right: 0.75rem; opacity: clamp(0, (84 - var(--p)) / 8, 1); }

.vn__regler {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none;
  display: none; /* ohne JS bewegt der Regler nichts: dann auch kein unsichtbarer Fokus (2.4.7) */
}
.js .vn__regler { display: block; }
.vn__griff { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); z-index: 3; width: 0; pointer-events: none; }
.vn__griff::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: var(--kreide); box-shadow: 0 0 0 1px rgba(15, 42, 3, 0.28);
}
/* Die Linie steht exakt bei --p; der Knauf samt Fokusring bleibt an den Enden (Pos1/Ende)
   ganz im Rahmen statt halb abgeschnitten (Code-Review Runde 1, LOW-02) */
.vn__knauf {
  position: absolute; top: 50%;
  left: clamp(calc(2.25rem - var(--p) * 1cqw), 0px, calc(100cqw - 2.25rem - var(--p) * 1cqw));
  width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  display: none; place-items: center;
  border: 2px solid var(--kreide); border-radius: var(--radius);
  background: var(--gruen); color: var(--kreide);
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(15, 42, 3, 0.6);
  transition: transform 0.18s var(--ease);
}
.js .vn__knauf { display: grid; }
.vn__knauf svg { width: 1.4rem; height: 0.7rem; }
.vn__rahmen.ist-gezogen .vn__knauf { transform: scale(1.08); }
.vn__regler:focus-visible + .vn__griff .vn__knauf { outline: 3px solid var(--gruen); outline-offset: 3px; box-shadow: 0 0 0 9px var(--kreide); }
.vn__fuss { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }

/* ── Was wir räumen (Runde 2): Bento aus drei Fotokarten und einer Markenkarte ──
   Desktop 3 Spalten: Wohnung groß links über zwei Reihen, Haushalt und Entrümpelung daneben,
   Entsorgung als breite grüne Karte mit der Bildmarke. Text liegt unten auf einem Verlauf
   in Gruen-tief, damit er auf jedem Foto lesbar bleibt. */
.leistungen { padding: var(--pad-l) var(--rand); }
.leistungen__kopf, .leistungen__feld { max-width: calc(90rem - 2 * var(--rand)); margin-inline: auto; }
/* Überschrift und Einleitung untereinander, links auf der Kante der Karten (Runde 3: rechts oben
   schwebte der Satz ohne Bezug zur Überschrift, auf breiten Bildschirmen höher als sie) */
.leistungen__kopf .lead { margin-top: 1.25rem; max-width: 40rem; font-size: var(--fs-lead); color: var(--tinte-dim); hyphens: manual; }
/* Runde 12b (Tim, 27.10.: „riesiger Textblock"): am Desktop breiter gesetzt, vier statt sechs Zeilen;
   bleibt unter der Überschrift auf der Kartenkante (Runde 3) */
@media (min-width: 64em) {
  /* balance: bei 1024–1120 px stand „für Ihr Anliegen." allein in Zeile 4 (16 % Füllung, Regel 191);
     pretty half nicht, balance hält vier Zeilen und die Kastenhöhe auf jeder Breite (Visual-QA 12b) */
  .leistungen__kopf .lead { max-width: 58rem; line-height: 1.55; text-wrap: balance; }
}
.leistungen__feld {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(17rem, 22rem);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.leistung {
  /* clip statt hidden: kein Scroll-Container, die Karte wächst mit vergrößerter Schrift
     (aspect-ratio behält seine Mindesthöhe aus dem Inhalt; Code-Review Runde 2 MEDIUM-02) */
  position: relative; isolation: isolate; overflow: clip;
  display: flex; align-items: flex-end;
  border-radius: var(--radius);
  background: var(--gruen-tief); color: var(--kreide);
}
.leistung--gross { grid-row: span 2; }
.leistung--marke { grid-column: span 2; background: var(--gruen); }
.leistung__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.leistung__text { width: 100%; padding: clamp(1.25rem, 2.2vw, 2rem); }
/* Der Verlauf hängt am TEXTBLOCK, nicht an der Kartenhöhe: unter jeder Glyphe liegt mindestens
   88 % Gruen-tief, auch wenn der Text bei 320 px oder vergrößerter Schrift höher wird
   (Code-Review Runde 2 HIGH-02, Regel 171). Darüber läuft er auf 3rem ins Foto aus. */
.leistung--foto .leistung__text {
  padding-top: calc(clamp(1.25rem, 2.2vw, 2rem) + 3rem);
  background: linear-gradient(to top, rgba(15, 42, 3, 0.94) 0%, rgba(15, 42, 3, 0.88) calc(100% - 3rem), rgba(15, 42, 3, 0) 100%);
}
/* 1024–1200 px: die Zellen sind fast quadratisch, Bügelbrett und Kommode stehen links im Foto */
.leistung--foto:not(.leistung--gross) .leistung__bild { object-position: 30% 50%; }
/* Haushalt: das Bügelbrett steht ganz links im Foto. Bei 30 % blieb davon um 1024 px nur ein
   Streifen am Rand; bei 15 % stehen Bügelbrett und Koffer von 390 bis 1920 px im Bild
   (Visual-QA Runde 2) */
.leistung--foto:not(.leistung--gross) .leistung__bild--haushalt { object-position: 15% 50%; }
.leistung h3 { font-size: clamp(1.5rem, 1rem + 1.3vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; color: var(--kreide); }
.leistung--gross h3 { font-size: clamp(1.75rem, 1rem + 2vw, 3rem); }
.leistung p { margin-top: 0.5rem; max-width: 26rem; color: var(--kreide-dim); hyphens: manual; }
/* Die Bildmarke (Krone auf dem Wagen) groß und leise in der grünen Karte: Entsorgung ist der Wagen */
.leistung__zeichen {
  position: absolute; z-index: -1; right: clamp(1rem, 3vw, 2.5rem); top: 50%;
  width: min(50%, 26rem); height: auto; aspect-ratio: 1250 / 740;
  transform: translateY(-50%);
  color: rgba(245, 244, 238, 0.2);
}
/* Gartenpflege (24.10.2026): Stockfoto, bis ein Gartenfoto des Betriebs da ist. Die Schubkarre
   steht im oberen Drittel rechts der Mitte, der Textverlauf deckt nur Rasen */
.leistung__bild--garten { object-position: 60% 30%; }

/* ── Ablauf (Runde 2): eine durchgehende Linie verbindet die Punkte. Sie wächst beim Scrollen
   (--fortschritt 0…1, per JS aus der Lage gerechnet), und jeder Schritt wird freigelegt, wenn
   die Linie seinen Punkt erreicht (.ist-an). Ohne JS und bei reduzierter Bewegung: alles da. */
.ablauf {
  background: var(--papier-2);
  padding: var(--pad-s) var(--rand);
}
.ablauf > h2, .ablauf__liste { max-width: calc(90rem - 2 * var(--rand)); margin-inline: auto; }
.ablauf__liste {
  --spalt: clamp(1.5rem, 3vw, 3rem);
  --fortschritt: 1;
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 2.5rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt);
}
/* Schiene (blass) und Linie (grün) von der Mitte des ersten bis zur Mitte des letzten Punkts */
.ablauf__liste::before, .ablauf__liste::after {
  content: ''; position: absolute; z-index: 0;
  top: calc(0.5rem - 1px); left: 0.5rem; right: calc((100% - 2 * var(--spalt)) / 3 - 0.5rem);
  height: 2px;
  background: var(--haarlinie);
}
.ablauf__liste::after {
  background: var(--gruen);
  transform-origin: 0 50%; transform: scaleX(var(--fortschritt));
}
/* z-index 1: falls container-type einen eigenen Stapelkontext bildet (ältere Engines), bleiben die Punkte über der Linie (LOW-06) */
.ablauf__schritt { position: relative; z-index: 1; container-type: inline-size; }
.ablauf__punkt {
  position: absolute; z-index: 1; top: -2.5rem; left: 0;
  width: 1rem; height: 1rem; border-radius: 4px;
  background: var(--papier-2); box-shadow: inset 0 0 0 2px var(--feldkante);
  /* weich und mit einem Hauch Nachschwingen, wenn die Linie ankommt (Runde 3) */
  transition: background-color 0.45s ease, box-shadow 0.45s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ablauf__schritt.ist-an .ablauf__punkt, .ablauf__liste:not([data-ablauf-bereit]) .ablauf__punkt {
  background: var(--gruen); box-shadow: inset 0 0 0 2px var(--gruen);
}
/* Runde 12: „Terminvereinbarung." (10,4 em breit) passt in jede Spalte, statt am Desktop umzubrechen; 9,4cqi = Spaltenbreite / 10,6 */
.ablauf__wort { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); font-size: min(clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem), 9.4cqi); line-height: 1; color: var(--gruen); margin-bottom: 0.75rem; hyphens: manual; }
.ablauf__schritt p:not(.ablauf__wort) { color: var(--tinte-dim); max-width: 26rem; hyphens: manual; }
/* Freilegen: Die Maske steht FEST am Absatz (unten 0,3em Luft für Unterlängen wie das g in
   „Räumung."), die innere Zeile fährt von unten herein. Vorher lag clip-path auf dem bewegten
   Element und wechselte nach none, das interpoliert nicht (Code-Review Runde 2 HIGH-01). */
.ablauf__schritt > p { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
.ablauf__zeile { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* Die Linie gleitet per JS (kein CSS-Übergang obendrauf). Die Zeilen laufen weich aus (0,7 s,
     ausrollende Kurve statt der Seitenkurve mit ihrem späten Ruck), der Satz folgt dem Wort mit
     0,1 s Abstand (Runde 3: „smoother und angenehmer"; Runde 4: 0,9 → 0,7 s, „früher") */
  .ablauf__zeile { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .ablauf__schritt > p + p .ablauf__zeile { transition-delay: 0.1s; }
  .ablauf__schritt.ist-an .ablauf__punkt { transform: scale(1.2); }
  /* Noch nicht erreicht: die Zeile steckt ganz unter der Maskenkante, kein Ausblenden */
  .ablauf__liste[data-ablauf-bereit] .ablauf__schritt:not(.ist-an) .ablauf__zeile { transform: translateY(140%); }
}
.ablauf__liste.ohne-uebergang .ablauf__zeile, .ablauf__liste.ohne-uebergang .ablauf__punkt { transition: none !important; }
@media print {
  .ablauf__zeile { transform: none !important; }
  .ablauf__liste::after { transform: none !important; }
  .ablauf__punkt { background: var(--gruen) !important; box-shadow: inset 0 0 0 2px var(--gruen) !important; }
}

/* ── Kontakt: das dunkle Band ── */
.kontakt {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--gruen-tief); color: var(--kreide);
}
.kontakt__bild { position: relative; min-height: 100%; }
.kontakt__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.kontakt__text { padding: var(--pad-s) var(--rand); align-self: center; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kontakt__text h2 { max-width: 16ch; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); }
.kontakt__unterzeile { margin-top: 0.9rem; font-size: var(--fs-lead); color: var(--kreide-dim); text-wrap: balance; }
/* Runde 12 (Tim): Nummern, E-Mail und Region in EINEM Format wie auf der Visitenkarte —
   rundes Feld mit Zeichen, daneben der Wert, alle gleich groß. Die Liste steht als Block
   mittig, die Zeilen darin linksbündig, damit die Zeichen eine Spalte bilden. */
.kontakt__liste { margin-top: 1.75rem; display: grid; gap: 0.35rem; text-align: left; }
.kontakt__zeile {
  display: flex; align-items: center; gap: 0.9rem; min-height: 3rem;
  /* Anzeigeschrift: die Null der Fließtextschrift ist durchgestrichen und wirkt in Nummern wie ein Ø */
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem); line-height: 1.3;
  color: var(--kreide); text-decoration: none;
  transition: color 0.16s var(--ease);
}
.kontakt__symbol {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--salbei); color: var(--gruen-tief);
}
.kontakt__symbol svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  a.kontakt__zeile:hover > span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
}
.kontakt__aktion { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.5rem; }

/* ── Fuß ── */
.fuss { background: var(--gruen-tief); color: var(--kreide-dim); border-top: 1px solid rgba(245, 244, 238, 0.12); }
.fuss__innen {
  max-width: 90rem; margin: 0 auto; padding: 2.5rem var(--rand) calc(2.5rem + var(--leiste-h));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
}
.fuss__marke { display: flex; align-items: center; gap: 1rem; line-height: 1.35; }
.fuss__marke strong { color: var(--kreide); font-family: var(--font-display); font-weight: 600; }
.fuss__zeichen { width: 4rem; height: 2.4rem; color: var(--kreide); flex: none; }
.fuss__links { display: flex; gap: 1.5rem; }
.fuss__klein { font-size: var(--fs-small); }

/* ── Feste Leiste (mobil) ── */
.leiste { display: none; }
/* ── WhatsApp-Blase (Regel 214, Baustein whatsapp-blase.css) ──
   Telefon bleibt primär, die Blase ist der zweite Weg. Abweichungen vom Baustein auf Tims Wunsch
   (Runde 8, 18.10.2026): unten LINKS und auf jeder Breite sichtbar, immer an derselben Stelle.
   Wo die Leiste steht (--leiste-h > 0), sitzt die Blase fest darüber — auch wenn die Leiste gerade
   eingefahren ist, damit sie nicht springt. */
.wa-blase {
  position: fixed; z-index: 91;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + clamp(1rem, 2.4vw, 2rem));
  width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: transform 160ms var(--ease), opacity 0.38s var(--ease), visibility 0s linear 0s;
  box-shadow: 0 0 0 2px var(--gruen);
}
/* Visual-QA Runde 12: solange die Blase auf dem Hero-Inhalt läge, ist sie weg (main.js, ueber-hero) */
.js .wa-blase.ueber-hero { opacity: 0; visibility: hidden; transition: transform 160ms var(--ease), opacity 0.38s var(--ease), visibility 0s linear 0.38s; }
.wa-blase svg { width: 32px; height: 32px; }
.wa-blase:focus-visible { outline: 3px solid var(--gruen); outline-offset: 0; box-shadow: 0 0 0 6px #fff; }
.wa-blase:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .wa-blase:hover { transform: scale(1.06); } }

@media print { .wa-blase { display: none !important; } }

/* ── Rechtsseiten und 404 ── */
.seite { max-width: 46rem; margin: 0 auto; padding: calc(var(--kopf-h) + clamp(2.5rem, 6vw, 4.5rem)) var(--rand) var(--pad-l); }
.seite h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); }
.seite h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-top: 2.5rem; margin-bottom: 0.6rem; font-weight: 600; letter-spacing: -0.01em; }
.seite p, .seite li { margin-top: 0.5rem; color: var(--tinte); max-width: 40rem; }
.seite ul { padding-left: 1.2rem; list-style: disc; }
.seite .unterzeile { color: var(--tinte-dim); margin-top: 0.75rem; }
.seite a:not(.knopf) { color: var(--gruen); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
/* Ziele im Fließtext der Rechtsseiten: Telefon und Mail stehen allein in ihrer Zeile, sie brauchen 24 px (WCAG 2.5.8) */
.seite p a:not(.knopf) { display: inline-block; padding-block: 0.25rem; }
.pflicht {
  margin-top: 0.6rem; padding: 0.75rem 1rem;
  border: 1px dashed var(--feldkante); border-radius: 0.5rem;
  background: var(--papier-2); color: var(--tinte); font-size: var(--fs-small);
}
.leer { padding: calc(var(--kopf-h) + var(--pad-l)) var(--rand) var(--pad-l); max-width: 46rem; margin: 0 auto; }
.leer h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5rem); }
.leer p { margin-top: 1rem; color: var(--tinte-dim); max-width: 32rem; }
.leer .knopf-reihe { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }

/* ── Hover nur für Zeigegeräte (Regel 39) ── */
@media (hover: hover) and (pointer: fine) {
  .knopf--primaer:hover { background: var(--gruen-tief); }
  .knopf--hell:hover { background: var(--papier-2); color: var(--gruen-tief); }
  .knopf--rand:hover { background: rgba(245, 244, 238, 0.12); }
  .knopf:hover .knopf__glyphe { transform: rotate(-12deg); }
  .textlink:hover { text-decoration-thickness: 4px; }
  .nav__link:hover { color: var(--gruen); }
  .vn-wahl__knopf[aria-pressed="false"]:hover { color: var(--gruen); }
  .seite a:not(.knopf):hover { text-decoration-thickness: 4px; }
}

/* ── Tablet ── */
@media (max-width: 63.99em) {
  .nav__liste { display: none; }
  :root { --fs-slogan: clamp(3.25rem, 1rem + 11vw, 6rem); }

  /* Hero ab hier gestapelt: erst die Zeile, darunter das Zeichen, ganz sichtbar und rechtsbündig
     mit dem Text. Es steht unter den Knöpfen und schiebt nichts aus dem ersten Bildschirm. */
  .hero { display: flex; flex-direction: column; min-height: 0; padding-inline: 0; }
  .hero__medium { order: 2; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 0; width: 100%; padding-bottom: 1.25rem; }
  .hero__zeichen { position: relative; top: auto; left: auto; transform: none; display: block; width: min(70%, 22rem); margin: 0 var(--rand) 0 auto; }
  /* stretch: im Spalten-Flex zentrierte align-self:center den Block waagerecht (Code-Review MEDIUM-03) */
  .hero__inhalt { align-self: stretch; width: auto; padding: clamp(1.5rem, 4vw, 2.5rem) var(--rand) clamp(2rem, 5vw, 3rem); }

  .vn-buehne { width: min(calc(50vw - var(--rand)), calc((100svh - var(--kopf-h) - 7rem) * 0.75)); }

  .leistungen__feld { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, 19rem); }
  /* oben rechts: mittig lief der Wagen zwischen 48 und 64em unter Überschrift und Satz (MEDIUM-01) */
  .leistung__zeichen { top: 1.25rem; transform: none; width: 36%; }
}

/* ── Telefon ── */
@media (max-width: 47.99em) {
  :root {
    --kopf-h: 4.25rem;
    --leiste-h: 4.75rem;
  }
  .nav { display: none; }
  .marke__zeichen { width: 3.6rem; height: 2.13rem; }
  .marke__name { font-size: 1.25rem; }
  .marke__ort { display: none; }

  .hero__lead { font-size: 1.0625rem; }
  .hero__aktion { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .hero__aktion .knopf { width: 100%; }
  .hero__aktion .textlink { align-self: center; }

  /* Erst Text und Raumwahl, darunter die Bühne in voller Breite */
  .vn-bereich { display: flex; flex-direction: column; align-items: stretch; padding-top: var(--pad-s); }
  .vn-buehne { order: 1; width: 100%; margin-top: 1.75rem; }
  .vn-bereich__hinweis { order: 2; margin-top: 1rem; }
  .vn-bereich__text > h2 { max-width: none; }
  .js .vn-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; border-top: 0; }
  .vn-wahl__knopf {
    justify-content: center; min-height: 3rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--feldkante); border-radius: var(--radius);
    font-size: 1.0625rem; text-align: center;
  }
  .vn-wahl__knopf::after { display: none; }
  .vn-wahl__knopf[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: var(--kreide); }

  /* Telefon: eine Spalte, Fotokarten 1:1, die große 4:5, die Markenkarte so hoch wie ihr Text */
  .leistungen__feld { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .leistung--foto { aspect-ratio: 1 / 1; } /* 4:3 ließ über dem Textblock nur ein Drittel Foto */
  .leistung--gross { grid-row: auto; aspect-ratio: 4 / 5; }
  .leistung--marke { grid-column: auto; min-height: 15rem; }
  /* oben rechts und kleiner: in 13rem Höhe lief der Wagen durch die Überschrift */
  .leistung__zeichen { top: 1.25rem; right: 1.25rem; transform: none; width: 45%; }

  /* Ablauf senkrecht: Punkte links, die Linie läuft nach unten. --l-ende (JS) = Abstand vom
     letzten Punkt bis zum Listenende, ohne JS reicht sie bis ganz unten */
  .ablauf__liste { --punkt-y: 0.375rem; grid-template-columns: 1fr; gap: 2.25rem; padding-top: 0; padding-left: 2.25rem; }
  .ablauf__liste::before, .ablauf__liste::after {
    top: calc(var(--punkt-y) + 0.5rem); bottom: var(--l-ende, 0px); left: calc(0.5rem - 1px); right: auto;
    width: 2px; height: auto;
  }
  .ablauf__liste::after { transform-origin: 50% 0; transform: scaleY(var(--fortschritt)); }
  .ablauf__punkt { top: var(--punkt-y); left: -2.25rem; }

  .kontakt { grid-template-columns: 1fr; }
  .kontakt__bild { aspect-ratio: 4 / 3; }

  .fuss__innen { flex-direction: column; align-items: flex-start; }
}

/* Telefon quer ab 48em: Kopf in Telefon-Form (nur Marke), sonst stünde „Anrufen" in Kopf
   UND Leiste (Brief E7; Delta-Review 2 MEDIUM-01, Visual-QA Lauf 3) */
@media (min-width: 48em) and (max-width: 63.99em) and (max-height: 30em) {
  :root { --kopf-h: 4.25rem; }
  .nav, .marke__ort { display: none; }
  .marke__zeichen { width: 3.6rem; height: 2.13rem; }
  .marke__name { font-size: 1.25rem; }
}

/* Telefon quer: die 3:4-Bühne fest 15rem breit (240 × 320 px), sonst 158 px schmal (Tablet-Band)
   oder 2,3 Bildschirmhöhen hoch (Telefon-Regel) (Code-Review Runde 1, MEDIUM-01). Kompromiss: bei
   375 px Höhe ist der Streifen zwischen Kopf und Leiste nur 231 px hoch, die Bühne wird dort
   gescrollt; kleiner wäre der Knauf ein Drittel der Bildbreite (Delta-Review LOW-01). */
@media (max-width: 63.99em) and (max-height: 30em) {
  /* feste Breite: in der auto-Spalte des Rasters (ab 48em) kollabierte min(100%, …) auf 133 px */
  .vn-buehne { width: 15rem; }
  /* Quer steht die Leiste sofort: Slogan an der Höhe, damit „Platz für Neues!"
     im ersten Bildschirm über der Leiste steht (Regel 95; Visual-QA Runde 1) */
  .hero__zeichen { width: min(50%, 20rem); }
  .hero__inhalt { padding-top: 1rem; }
  :root { --fs-slogan: min(clamp(3.25rem, 1rem + 11vw, 6rem), 15svh); }
}
/* Telefon quer ab 40em: das Zeichen steht rechts NEBEN Satz und Knöpfen wie auf dem Desktop, nicht
   darunter. Gestapelt war die rechte Hälfte des ersten Bildschirms leer und unter den Knöpfen kam
   ein 250 px hoher grüner Block mit dem Zeichen klein in der Ecke (Visual-QA Runde 5, 844 × 390,
   736 × 414). Die Textspalte endet spätestens bei Rand + 30rem (Sätze), die Knöpfe stehen
   nebeneinander und damit ebenfalls links davon. */
@media (min-width: 40em) and (max-width: 63.99em) and (max-height: 30em) {
  .hero__medium {
    position: absolute; top: var(--kopf-h); right: var(--rand); bottom: 0; left: calc(var(--rand) + 31rem);
    width: auto; padding: 0; z-index: -1;
  }
  /* ganz sichtbar und mittig in der Spalte wie auf dem Desktop (Tim, 04.10.: angeschnitten wirkte
     es verrutscht); höchstens 24rem, sonst stieß die Krone bei 1000 × 460 fast an den Kopf */
  .hero__zeichen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100%, 24rem); margin: 0; }
  /* höchstens 30rem: mit Ersatzschrift bricht „Kontakt speichern" um, statt unter das Zeichen zu laufen */
  .hero__aktion { flex-direction: row; align-items: center; gap: 0.5rem 1.5rem; max-width: 30rem; }
  .hero__aktion .knopf { width: auto; }
}
/* Tablet hochkant (48–64em): das Zeichen eine Stufe größer. Mit 22rem stand es klein in der
   rechten Ecke und ließ unter den Knöpfen ein leeres Feld von rund 490 × 270 px (Visual-QA
   Runde 5, 768 × 1024); jetzt trägt es die untere Hälfte des Heros wie auf dem Desktop. */
@media (min-width: 48em) and (max-width: 63.99em) and (min-height: 48em) {
  .hero__zeichen { width: min(66%, 32rem); }
}
@media (max-width: 47.99em) and (max-height: 30em) {
  .vn-buehne { max-width: 100%; margin-inline: auto; }
}

/* Telefon quer im breiten Raster (48–64em, Höhe bis 30em): nach der Sprungmarke „Ablauf" muss die
   ganze Liste über die feste Leiste passen, sonst würden Satz 2 und 3 hinter ihr freigelegt
   (Visual-QA Runde 4: Liste 220–359 px, Leiste ab 314 px). Weniger Luft über der Liste, rund 56 px. */
@media (min-width: 48em) and (max-width: 63.99em) and (max-height: 30em) {
  .ablauf { padding-top: 1.5rem; }
  .ablauf__liste { margin-top: 1rem; }
  .ablauf > h2 { font-size: 2rem; }
}

/* Feste Leiste: Telefon hochkant UND quer. Quer (Höhe unter 30em) liegt der Anruf-Knopf des
   Heros unter der Falz und die Navigation ist ausgeblendet (Delta-Review LOW-03) */
@media (max-width: 47.99em), (max-width: 63.99em) and (max-height: 30em) {
  :root { --leiste-h: 4.75rem; }
  /* Fokus nicht unter der Leiste (WCAG 2.4.11): der Browser hält beim Tabben diesen Abstand zum unteren Rand */
  html { scroll-padding-bottom: calc(var(--leiste-h) + 1rem + env(safe-area-inset-bottom)); }
  .leiste {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: calc(var(--leiste-h) + env(safe-area-inset-bottom));
    padding: 0.7rem var(--rand) calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--papier); border-top: 1px solid var(--haarlinie);
  }
  .leiste .knopf { flex: 1 1 auto; }
  .leiste .textlink { flex: none; white-space: nowrap; }
  .leiste { transition: transform 0.38s var(--ease), visibility 0s linear 0s; }
  .js .leiste:not(.ist-da) { transform: translateY(110%); visibility: hidden; transition: transform 0.38s var(--ease), visibility 0s linear 0.38s; }
  /* Blase kommt und geht mit der Leiste (Tim, 24.10.2026): Über der eingefahrenen Leiste schwebte
     sie im Hero auf dem Lead (quer) und auf „Leer geräumt.“ (412 px), Visual-QA OV-1. Die Stelle
     bleibt dieselbe. Am Kontaktband ist die Leiste weg, dort trägt das Band selbst WhatsApp. */
  .wa-blase { transition: transform 160ms var(--ease), opacity 0.38s var(--ease), visibility 0s linear 0s; }
  .js .leiste:not(.ist-da) ~ .wa-blase { opacity: 0; visibility: hidden; transition: transform 160ms var(--ease), opacity 0.38s var(--ease), visibility 0s linear 0.38s; }
  html:not(.js) .hero { padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom)); }
}

/* Reduzierte Bewegung: steht hinter der Leisten-Regel, damit deren Blasen-transition sie nicht überschreibt */
@media (prefers-reduced-motion: reduce) { .wa-blase, .js .leiste:not(.ist-da) ~ .wa-blase, .js .wa-blase.ueber-hero { transition: none; } .wa-blase:hover, .wa-blase:active { transform: none; } }

/* 320–360 px: „Anrufen" + „Kontakt speichern" passen mit 16 px Rand nebeneinander (Delta-Review 3,
   Visual-QA Lauf 4: Link endete bei 321 von 320 px) */
@media (max-width: 22.5em) {
  .vn-wahl__knopf { font-size: 1rem; padding-inline: 0.5rem; }
  .leiste { gap: 0.75rem; }
  .leiste .knopf { padding-inline: 1rem; }
}
/* 404 ist kürzer als der Bildschirm: Fuß an den unteren Rand, statt über hellem Streifen zu schweben (Visual-QA Lauf 6) */
body.seite-404 { min-height: 100svh; display: flex; flex-direction: column; }
.seite-404 main { flex: 1 0 auto; }

/* Die 404 hat ihren eigenen Anruf-Knopf über der Falz; hochkant kommt die Leiste dort nicht, also
   keine Reserve. Quer (Höhe bis 30em) kann sie kommen (Kopf verdeckt den Knopf) → Reserve bleibt. */
/* Startseite hochkant: am Seitenende steht der Anruf-Knopf des Kontaktbands frei, die Leiste kommt
   dort nicht mehr (Visual-QA Runde 1) → keine Reserve unter der ©-Zeile (Delta-Review LOW-03) */
@media (min-height: 30.01em) {
  /* nur mit JS: ohne JS steht die Leiste immer und braucht die Reserve (Delta-Review 2 LOW-02) */
  .js .seite-404 .fuss__innen, .js .seite-start .fuss__innen { padding-bottom: 2.5rem; }
}
/* Startseite quer ab 48em: Kontaktband zweispaltig, sein Anruf-Knopf steht am Seitenende frei,
   die Leiste kommt dort nicht → keine Reserve (Visual-QA Lauf 2: 844 × 390 hatte 127 px Leere
   unter der ©-Zeile). Unter 48em quer (667 × 375) bleibt sie: dort steht die Leiste am Ende. */
@media (min-width: 48em) and (max-height: 30em) {
  .js .seite-start .fuss__innen { padding-bottom: 2.5rem; }
}

@media (max-width: 30em) {
  .knopf { width: 100%; }
  .kopf .knopf, .leiste .knopf { width: auto; }
  /* große Knöpfe schmaler gepolstert, damit sie auch bei 320 px einzeilig bleiben */
  .knopf--gross { padding-inline: 1rem; font-size: 1.0625rem; }
  .kontakt__aktion { flex-direction: column; align-items: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Startseite: am Seitenende liegt nichts unter der WhatsApp-Blase (Runde 8). Reserve = Abstand der
   Blase + 60 px + 1rem Luft; schlägt die Leisten-Reserven oben (:root.js hebt die Spezifität über
   .js .seite-start .fuss__innen) */
.seite-start .fuss__innen, :root.js .seite-start .fuss__innen {
  padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom) + clamp(1rem, 2.4vw, 2rem) + 60px + 1rem);
}
/* Wo am Seitenende der Anruf-Knopf des Kontaktbands frei steht, ist die Leiste weg und mit ihr seit
   24.10. auch die Blase → keine Reserve (Telefon hochkant; quer 48–64em). Code-Review Delta 2 LOW-A */
@media (max-width: 47.99em) and (min-height: 30.01em), (min-width: 48em) and (max-width: 63.99em) and (max-height: 30em) {
  :root.js .seite-start .fuss__innen { padding-bottom: 2.5rem; }
}