/* ===== fonts.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Schriften (self-hosted, DSGVO, kein externer Request)

   PAARUNG
   Display: Anybody   — markant, breiter Gewichtsbereich, von der
                        Bestandsseite übernommen (Wiedererkennung)
   Body:    Instrument Sans — ruhig, präzise, nicht abgenutzt

   Dateien liegen unter assets/fonts/ (woff2, latin + latin-ext).
   Vietnamese-Subset bewusst weggelassen (für DE nicht nötig).
   Von Bunny Fonts übernommen; woff2 self-hosted statt @import,
   damit kein render-blockierender Fremd-Request die Anzeige verzögert.
   Relativpfad ../fonts/ gilt auch aus dem CSS-Bundle (liegt in css/).
   ============================================================ */

/* ---- Anybody (Display) ---- */
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/anybody-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: 'Anybody'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/anybody-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+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/anybody-latin-500-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: 'Anybody'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/anybody-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/anybody-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: 'Anybody'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/anybody-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+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/anybody-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: 'Anybody'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/anybody-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+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Anybody'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(../fonts/anybody-latin-900-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: 'Anybody'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(../fonts/anybody-latin-ext-900-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Instrument Sans (Body) ---- */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-sans-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: 'Instrument Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/instrument-sans-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+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/instrument-sans-latin-500-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: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/instrument-sans-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: 'Instrument Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/instrument-sans-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+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Fallback-Metriken gegen Layout-Sprünge vor dem Fontladen (CLS). */
@font-face {
  font-family: "Anybody Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "Instrument Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 97%;
  ascent-override: 90%;
  descent-override: 22%;
}

/* ===== tokens.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Design-Tokens
   Schicht 1. Wird pro Kunde NICHT verändert.
   Kundenfarben kommen als Override aus kunde.json.

   RICHTUNG: warme Kacheln, weiche Kanten, ruhige Schatten.
   Vertrauensbildend statt experimentell — das passt zum
   Handwerksbetrieb und verkauft besser als Design-Akrobatik.
   ============================================================ */

:root {
  /* --- Marke: Fallback, pro Kunde überschrieben ------------- */
  --brand:            #006634;
  --brand-hell:       #0b8a45;
  --brand-kontrast:   #ffffff;

  /* --- Neutrale Skala, leicht warm gebrochen ---------------- */
  --ink:              #1f201b;
  --ink-leise:        #5a5b52;
  /* #8d8e83 lag bei 3,2:1 und damit unter WCAG AA. Labels und
     Meta-Text sind klein — sie brauchen mehr, nicht weniger. */
  --ink-still:        #6b6c62;
  --linie:            #e2e1d9;
  --linie-zart:       #edece5;
  --flaeche:          #f7f6f1;
  --flaeche-tief:     #edece5;
  --weiss:            #ffffff;
  --tinte:            #16170f;

  /* --- Typografie ------------------------------------------- */
  --font-head:        "Anybody", "Anybody Fallback", system-ui, sans-serif;
  --font-text:        "Instrument Sans", "Instrument Fallback", system-ui, sans-serif;

  --fs-mikro:   clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --fs-klein:   clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  --fs-basis:   clamp(1rem,      0.96rem + 0.19vw, 1.0625rem);
  --fs-gross:   clamp(1.125rem,  1.05rem + 0.33vw, 1.3125rem);
  --fs-lead:    clamp(1.1875rem, 1.06rem + 0.56vw, 1.5rem);
  --fs-h3:      clamp(1.25rem,   1.12rem + 0.58vw, 1.625rem);
  --fs-h2:      clamp(1.875rem,  1.48rem + 1.75vw, 3.125rem);
  --fs-h1:      clamp(2.375rem,  1.62rem + 3.35vw, 4.75rem);
  --fs-riesig:  clamp(3rem,      1.85rem + 5.1vw,  6.5rem);

  --lh-eng:     1.02;
  --lh-head:    1.1;
  --lh-mittel:  1.38;
  --lh-text:    1.62;

  --ls-eng:     -0.025em;
  --ls-normal:  -0.01em;
  --ls-weit:     0.14em;

  /* --- Rhythmus ---------------------------------------------- */
  --sp-3xs:  clamp(0.25rem,  0.24rem + 0.06vw,  0.3125rem);
  --sp-2xs:  clamp(0.5rem,   0.48rem + 0.12vw,  0.625rem);
  --sp-xs:   clamp(0.75rem,  0.71rem + 0.19vw,  0.9375rem);
  --sp-sm:   clamp(1rem,     0.94rem + 0.28vw,  1.25rem);
  --sp-md:   clamp(1.5rem,   1.41rem + 0.42vw,  1.875rem);
  --sp-lg:   clamp(2.25rem,  2.11rem + 0.63vw,  2.8125rem);
  --sp-xl:   clamp(3.5rem,   3.03rem + 2.08vw,  5rem);
  --sp-2xl:  clamp(5rem,     4.06rem + 4.17vw,  8rem);
  --sp-3xl:  clamp(7rem,     5.13rem + 8.33vw, 13rem);

  --sektion-y: var(--sp-2xl);

  /* --- Maße -------------------------------------------------- */
  --breite-eng:   38rem;
  --breite-text:  52rem;
  --breite:       78rem;
  --breite-weit:  90rem;
  --rand:         clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* --- Form: weiche Kanten ----------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-voll: 999px;

  /* --- Tiefe: ruhig, nie hart -------------------------------- */
  --schatten-sm: 0 1px 2px rgb(31 32 27 / 0.04),
                 0 2px 6px rgb(31 32 27 / 0.03);
  --schatten:    0 2px 6px rgb(31 32 27 / 0.05),
                 0 10px 28px rgb(31 32 27 / 0.07);
  --schatten-lg: 0 4px 10px rgb(31 32 27 / 0.05),
                 0 22px 56px rgb(31 32 27 / 0.12);

  /* --- Bewegung ---------------------------------------------- */
  --ease-aus:    cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-weich:  cubic-bezier(0.4, 0, 0.2, 1);

  --dauer-schnell: 180ms;
  --dauer:         320ms;
  --dauer-langsam: 700ms;

  --z-basis: 1;
  --z-sticky: 100;
  --z-overlay: 800;
  --z-modal: 900;
}

/* --- Feines Papierkorn für große Flächen -------------------- */
.hat-korn { position: relative; isolation: isolate; }
.hat-korn::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}
.hat-korn > * { position: relative; z-index: 1; }

/* --- Dunkle Sektionen --------------------------------------- */
.ist-dunkel {
  --ink:          #f4f3ec;
  --ink-leise:    #b4b5aa;
  --ink-still:    #909186;
  --linie:        rgb(255 255 255 / 0.15);
  --linie-zart:   rgb(255 255 255 / 0.08);
  --flaeche:      var(--tinte);
  --flaeche-tief: #20211a;
  --weiss:        #16170f;
  color: var(--ink);
  background: var(--flaeche);
}

/* ===== base.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Basis
   Reset, Typografie, Layout-Primitive. Schicht 1.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;

  /* clip statt hidden: erzeugt KEINEN Scroll-Container,
     position:sticky funktioniert weiter. Nötig, weil seitliche
     Reveals (translateX) sonst horizontal scrollen lassen. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Anker-Spruenge auf den Kunden-Onepagern (Musterseite + Hessenzaun) snug unter
   den sticky Header setzen. Gleiche Geometrie wie die Agentur-LP: derselbe
   geteilte Header und .sektion mit --sektion-y Top-Padding. Ohne Nudge ergaebe
   scroll-padding-top (96px) plus das grosszuegige Sektion-Padding einen zu
   grossen Abstand, die Ueberschrift saesse zu tief. Negatives scroll-margin
   zieht das Ziel hoch -> Ueberschrift knapp unter dem Header, exakt wie auf der
   LP (dort inline in front-page.php: #konfigurator,#preise,#kontakt). */
#zaunkonfigurator, #systeme, #arbeiten, #faq, #kontakt { scroll-margin-top: -90px; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-basis);
  line-height: var(--lh-text);
  color: var(--ink);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { background: var(--flaeche-tief); }

/* Browser-Voreinstellungen, die Ausrichtung zerstören:
   blockquote und figure haben 40 px Seitenrand, dl/dd ebenfalls. */
figure, blockquote, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* --- Überschriften ------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

/* KEINE Silbentrennung, nirgends. Ein Trennstrich mitten im Wort
   ("Kostenlo-ses") wirkt immer nach Notlösung.
   overflow-wrap fängt überlange Komposita trotzdem ab — es
   bricht ohne Bindestrich um. */
* { hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, h4, p, li, dd, summary { overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-eng);  letter-spacing: var(--ls-eng); font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-eng); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-head); letter-spacing: var(--ls-normal); }
h4 { font-size: var(--fs-gross); line-height: var(--lh-mittel); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sp-sm); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* --- Textbausteine ------------------------------------------ */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-mittel);
  color: var(--ink-leise);
  max-width: var(--breite-text);
}
.lead--breit { max-width: 46ch; }

/* Kurzes Wort über der Headline. Ohne Strich davor — der wirkte
   wie ein Fremdkörper und zog die Zeile aus der Fluchtlinie. */
.label {
  font-size: var(--fs-mikro);
  font-weight: 700;
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--brand);
}

.leise { color: var(--ink-leise); }
.still { color: var(--ink-still); font-size: var(--fs-klein); }

/* --- Layout-Primitive --------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.wrap--weit { max-width: var(--breite-weit); }
.wrap--text { max-width: var(--breite-text); }
.wrap--eng  { max-width: var(--breite-eng); }

.sektion { padding-block: var(--sektion-y); }
.sektion--knapp { padding-block: var(--sp-xl); }
.sektion--satt  { padding-block: var(--sp-3xl); }
.sektion--flaeche { background: var(--flaeche); }

.stack > * + * { margin-top: var(--fluss, var(--sp-sm)); }
.stack--eng  { --fluss: var(--sp-xs); }
.stack--weit { --fluss: var(--sp-md); }
.stack--satt { --fluss: var(--sp-lg); }

.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }

.raster {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }

/* Sektionskopf: einheitlicher Rhythmus über alle Sektionen */
.kopf { max-width: var(--breite-text); }
.kopf .label { margin-bottom: var(--sp-sm); }
.kopf .lead  { margin-top: var(--sp-sm); }
.kopf + *    { margin-top: var(--sp-xl); }

/* --- Buttons ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  padding: 0.95em 1.75em;
  border-radius: var(--radius-voll);
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dauer) var(--ease-aus),
              color var(--dauer) var(--ease-aus),
              border-color var(--dauer) var(--ease-aus),
              transform var(--dauer-schnell) var(--ease-aus),
              box-shadow var(--dauer) var(--ease-aus);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--voll {
  background: var(--brand);
  color: var(--brand-kontrast);
  box-shadow: var(--schatten-sm);
}
.btn--voll:hover { background: var(--brand-hell); box-shadow: var(--schatten); }

.btn--marke { background: var(--brand); color: var(--brand-kontrast); box-shadow: var(--schatten-sm); }
.btn--marke:hover { background: var(--brand-hell); box-shadow: var(--schatten); }

.btn--dunkel { background: var(--ink); color: var(--weiss); }
.btn--dunkel:hover { background: var(--brand); color: var(--brand-kontrast); }

.btn--linie { border-color: var(--linie); color: var(--ink); }
.btn--linie:hover { border-color: var(--ink); background: var(--ink); color: var(--weiss); }

.btn--blank { padding-inline: 0; color: var(--brand); box-shadow: none; }
.btn--blank:hover { transform: none; text-decoration: underline; }

/* --- Karte: das Grundmuster --------------------------------- */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--sp-lg);
  transition: border-color var(--dauer) var(--ease-aus),
              box-shadow var(--dauer) var(--ease-aus),
              transform var(--dauer) var(--ease-aus);
}
.karte--hebt:hover {
  border-color: transparent;
  box-shadow: var(--schatten-lg);
  transform: translateY(-4px);
}

/* --- Fokus --------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ===== motion.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Bewegung (Schicht 1)
   Reine CSS-Übergänge. Keine Bibliothek, kein Scroll-Hijack.

   SICHERHEITSREGEL
   Startzustände greifen nur bei <html class="js"> und nicht
   .motion-aus. Ohne JS ist die Seite vollständig sichtbar.
   ============================================================ */

.js:not(.motion-aus) [data-reveal] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-aus), transform 0.7s var(--ease-aus);
  transition-delay: var(--verzug, 0ms);
}
.js:not(.motion-aus) [data-reveal="hoch"]   { transform: translateY(24px); }
.js:not(.motion-aus) [data-reveal="runter"] { transform: translateY(-18px); }
.js:not(.motion-aus) [data-reveal="links"]  { transform: translateX(24px); }
.js:not(.motion-aus) [data-reveal="rechts"] { transform: translateX(-24px); }
.js:not(.motion-aus) [data-reveal="zoom"]   { transform: scale(0.97); }
.js:not(.motion-aus) [data-reveal="blende"] { transform: none; }

.js:not(.motion-aus) [data-reveal].ist-da { opacity: 1; transform: none; }

/* Opt-out: sofort sichtbar, keine Einblendung (z.B. Karten, die auf hellem
   Bild sonst kurz transparent wirken). autoAuszeichnen ueberspringt es, weil
   das Attribut gesetzt ist. */
.js:not(.motion-aus) [data-reveal="aus"] { opacity: 1; transform: none; transition: none; }

/* --- Kinder nacheinander ------------------------------------ */
.js:not(.motion-aus) [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-aus), transform 0.65s var(--ease-aus);
  transition-delay: calc(var(--i, 0) * var(--schritt, 80ms));
}
.js:not(.motion-aus) [data-stagger].ist-da > * { opacity: 1; transform: none; }

/* --- Bildenthüllung ----------------------------------------- */
.bild-reveal { position: relative; overflow: hidden; }
.js:not(.motion-aus) .bild-reveal::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--flaeche-tief);
  transform-origin: right;
  transition: transform 0.9s var(--ease-aus);
}
.js:not(.motion-aus) .bild-reveal.ist-da::after { transform: scaleX(0); }
.js:not(.motion-aus) .bild-reveal img {
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-aus);
}
.js:not(.motion-aus) .bild-reveal.ist-da img { transform: none; }

/* --- Hero: bewusst KEINE Einblende-Animation ----------------
   Das Hero-Bild ist das LCP-Element (Largest Contentful Paint).
   Eine Entry-Animation darauf — Fade wie Zoom — verzögert das LCP
   messbar um Sekunden: der Browser wertet erst den stabilen
   Endzustand der Animation als LCP, und da motion.js die Klasse
   `.js` erst spät setzt, startet die Animation verspätet.
   Passt ohnehin zum Grundsatz oben: was über der Falz steht, ist
   sofort da. Die Scroll-Reveals UNTER der Falz bleiben unberührt. */

/* --- Sticky Kopfleiste -------------------------------------- */
.kopfleiste {
  position: sticky; top: 0; z-index: var(--z-sticky);
  /* padding bewusst NICHT animiert: sonst blitzt beim Hochscrollen ein weißer
     Rahmen auf, weil die animierte Kopfhöhe den negativen Hero-Rand kurz
     unterschreitet. Höhe springt, Hintergrund und Schatten faden weiter. */
  transition: background var(--dauer) var(--ease-aus),
              box-shadow var(--dauer) var(--ease-aus);
}
.kopfleiste.ist-geschrumpft {
  background: color-mix(in srgb, var(--weiss) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--linie);
  padding-block: var(--sp-xs);
}

.zaehler { font-variant-numeric: tabular-nums; }

/* ============================================================
   Reduzierte Bewegung: alles sichtbar, nichts bewegt sich.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .bild-reveal::after { display: none; }
  .js .bild-reveal img { transform: none !important; animation: none !important; }
  .js .hero__bild img { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== blocks.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Blöcke (Schicht 2)
   Setzt _system/ voraus. Pro Kunde nicht verändern.

   CONVERSION-REGEL
   Alles oberhalb der Falz ist sofort sichtbar. Hero-Headline,
   Hero-CTA und Telefonnummer bekommen NIE ein data-reveal.
   ============================================================ */

/* ------------------------------------------------------------
   KOPFLEISTE
   ------------------------------------------------------------ */
.kopfleiste { padding-block: var(--sp-sm); }
.kopf-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); }

/* Originallogo des Kunden. Der Hintergrund ist transparent
   freigestellt, damit es über dem dunklen Hero funktioniert;
   dort wird es zusätzlich weiß eingefärbt. */
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img {
  height: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  width: auto;
  /* Pflicht bei freigestellten Logos: die globale Anti-Flimmer-
     Fläche aus base.css füllt sonst die transparenten Bereiche,
     und der Weiß-Filter über dem Hero macht daraus einen Block. */
  background: none;
  transition: filter var(--dauer) var(--ease-aus);
}
/* Sehr breite Wortmarken (hier 9:1) drängen auf dem Handy den
   Menü-Button an den Rand. Dort über die Breite begrenzen,
   Höhe folgt. */
@media (max-width: 30rem) {
  .marke img { height: auto; width: min(11rem, 47vw); }
}
/* Wortmarke als Rückfall, wenn kein Logo vorliegt */
.marke b {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-gross); letter-spacing: var(--ls-eng); color: var(--ink);
}

.haupt-nav { display: flex; align-items: center; gap: var(--sp-md); }

/* :not(.btn) ist Pflicht: .haupt-nav a (0,2,0) schlägt sonst
   .btn--voll (0,1,0) und färbt die CTA-Beschriftung grau. */
.haupt-nav a:not(.btn) {
  font-size: var(--fs-klein); text-decoration: none; color: var(--ink-leise);
  transition: color var(--dauer) var(--ease-aus);
}
.haupt-nav a:not(.btn):hover { color: var(--ink); }

.tel-link {
  display: inline-flex; align-items: center; gap: 0.5ch;
  font-weight: 600; text-decoration: none; font-size: var(--fs-klein);
  font-variant-numeric: tabular-nums;
}

.kopfleiste--ueber-hero:not(.ist-geschrumpft) .marke b,
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .haupt-nav a:not(.btn),
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .tel-link { color: #fff; }

/* Weißer Header über hellem Himmel (Wolken) braucht einen sanften dunklen
   Rückhalt. Weicher Verlauf, der unter dem Header ausläuft (keine harte Kante),
   nur im Über-Hero-Zustand. Beim Scrollen (--fest/geschrumpft) übernimmt der
   weiße Blur-Grund. */
.kopfleiste--ueber-hero:not(.ist-geschrumpft)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 2.5rem); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(10 12 8 / 0.42) 0%, rgb(10 12 8 / 0.22) 45%, transparent 100%);
}

/* Über dem dunklen Hero wird das Logo weiß gefärbt: brightness(0)
   macht alles schwarz, invert(1) daraus reines Weiß. Kein
   zweites Bildasset nötig. */
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .marke img {
  filter: brightness(0) invert(1);
}
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .btn--linie { border-color: rgb(255 255 255 / 0.45); color: #fff; }
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .btn--linie:hover { background: #fff; color: var(--ink); }

.nav-schalter { display: none; }

@media (max-width: 60rem) {
  .haupt-nav { display: none; }
  .nav-schalter {
    display: inline-flex; align-items: center; gap: 0.6ch;
    font-size: var(--fs-mikro); font-weight: 600;
    letter-spacing: var(--ls-weit); text-transform: uppercase;
  }
  .kopfleiste.ist-offen .haupt-nav {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; inset: 100% 0 auto;
    padding: var(--sp-md) var(--rand) var(--sp-lg);
    background: var(--weiss); border-top: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }
  .kopfleiste.ist-offen .haupt-nav a { color: var(--ink); font-size: var(--fs-gross); }
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  position: relative;
  /* Ziel war: die helle Sektion darunter ist beim ersten Blick
     nicht angeschnitten. Ein fester Wert von 820 px erreicht das
     nur auf Bildschirmen bis 820 px Höhe — auf einem 900er blieben
     80 px Weiß sichtbar. Deshalb volle Bildschirmhöhe.
     svh statt vh: auf Mobilgeräten zählt die sichtbare Höhe ohne
     ein- und ausfahrende Browserleiste. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  /* 1px Überlappung nach oben, damit kein Sub-Pixel-Spalt (weißer Rand)
     zwischen Kopfleiste und Hero aufblitzt. Fallback 6rem deckt die
     maximale Kopf-Höhe, bis motion.js --kopf-hoehe exakt setzt. */
  margin-top: calc(var(--kopf-voll, var(--kopf-hoehe, 6rem)) * -1 - 1px);
  padding-top: var(--kopf-voll, var(--kopf-hoehe, 6rem));
  overflow: hidden;
  isolation: isolate;
}
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Zwei Verläufe statt einem.

   Ein reiner Verlauf von unten müsste rund 76 % Deckung haben,
   damit weißer Text auf hellem Himmel WCAG AA erreicht — dann
   ist das Foto praktisch schwarz.

   Stattdessen: seitlich abdunkeln, wo der Text steht, und nach
   rechts auslaufen lassen. Die Textspalte bekommt Kontrast,
   das Bild bleibt auf der rechten Hälfte sichtbar. */
.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  /* Heller abgestimmt auf das helle Tages-Hero: nur so viel seitliche
     Abdunklung, dass die weiße Schrift links lesbar bleibt, rechts/oben
     bleibt das sonnige Bild frei. */
  background:
    linear-gradient(to right,
      rgb(10 12 8 / 0.80) 0%, rgb(10 12 8 / 0.63) 26%,
      rgb(10 12 8 / 0.30) 50%, transparent 76%),
    linear-gradient(to top,
      rgb(10 12 8 / 0.30) 0%, rgb(10 12 8 / 0.04) 42%, transparent 68%);
}
@media (max-width: 56rem) {
  /* Auf dem Handy füllt der Text die volle Breite, dann muss
     der seitliche Verlauf durchgehend dunkel sein. */
  .hero__schleier {
    background:
      linear-gradient(to right, rgb(10 12 8 / 0.66) 0%, rgb(10 12 8 / 0.56) 100%),
      linear-gradient(to top, rgb(10 12 8 / 0.42) 0%, rgb(10 12 8 / 0.12) 60%, transparent 88%);
  }
  /* Auf dem Handy KEINE volle Bildschirmhöhe: der Hero richtet sich nach dem
     Inhalt. So sieht man oben etwas Zaun, darunter Inhalt und Buttons, dann
     folgt direkt die nächste Sektion — auf jeder Bildschirmhöhe gleich, ohne
     überschüssigen Leerraum oben (align-items:end) oder unten (center). */
  .hero {
    min-height: 0;
    align-items: start;
  }
}

/* .hero__inhalt ist ein .wrap und behält dessen volle Breite.
   Eine eigene max-width würde den Block per margin-inline:auto
   zentrieren und aus der Fluchtlinie kippen. Kinder begrenzen. */
.hero__inhalt { padding-block: var(--sp-2xl) var(--sp-xl); color: #fff; }
.hero__inhalt > * { max-width: 44rem; }
.hero__inhalt > .hero__aktionen,
.hero__inhalt > .hero__merkmale { max-width: none; }

.hero__inhalt .label {
  color: #fff;
  /* Rückversicherung gegen helle Bildstellen unter dem Label */
  text-shadow: 0 1px 12px rgb(10 12 8 / 0.6);
}

/* Zusätzlich an die Bildschirmhöhe gekoppelt: sonst wird der
   Hero auf 16:9-Monitoren höher als ein Bildschirm und schiebt
   den CTA unter die Falz. */
.hero h1 {
  font-size: min(var(--fs-h1), 12vh);
  color: #fff;
  margin-top: var(--sp-md);
}

.hero__lead {
  margin-top: var(--sp-md);
  font-size: var(--fs-lead); line-height: var(--lh-mittel);
  color: rgb(255 255 255 / 0.84); max-width: 40ch;
}
.hero__aktionen { margin-top: var(--sp-lg); display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.hero__aktionen .btn--linie { border-color: rgb(255 255 255 / 0.5); color: #fff; }
.hero__aktionen .btn--linie:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Gleiches Raster wie das Zahlenband darunter, damit beide
   Zeilen auf denselben Spalten sitzen. Vorher flex mit
   Umbruch — die Haken standen links gedrängt, die Zahlen
   darunter über die volle Breite verteilt. */
/* Drei gleich breite Felder, Inhalt jeweils mittig darin.
   Eine einzige Trennlinie über der ganzen Reihe — keine
   Striche pro Feld. */
.hero__merkmale {
  margin-top: var(--sp-lg); padding: var(--sp-md);
  display: grid; gap: var(--sp-md);
  grid-template-columns: repeat(3, 1fr);
  font-size: var(--fs-klein); color: rgb(255 255 255 / 0.96);
  list-style: none;
  /* leichte schwarze Hinterlegung, damit die weisse Schrift auf dem jetzt
     hellen Hero (heller Bildunterrand) lesbar bleibt */
  background: rgb(10 12 8 / 0.42);
  border-radius: var(--radius);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}
.hero__merkmale li {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2xs); text-align: center;
}
.hero__merkmale svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--brand-hell); }

@media (max-width: 48rem) {
  .hero__merkmale { grid-template-columns: 1fr; gap: var(--sp-xs); }
  .hero__merkmale li { justify-content: flex-start; text-align: left; }
}

/* ------------------------------------------------------------
   ZAHLENBAND
   ------------------------------------------------------------ */
/* Drei gleiche Spalten, Inhalt mittig darin. Keine Striche:
   die Kacheln stehen für sich, die Symmetrie trägt die Reihe. */
.zahlen-band { display: grid; gap: var(--sp-md); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 48rem) { .zahlen-band { grid-template-columns: 1fr; gap: var(--sp-lg); } }
.zahl-kachel { text-align: center; }
.zahl-kachel b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); line-height: 1;
  letter-spacing: var(--ls-eng); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* NUR direktes Kind: sonst trifft die Regel auch den .zaehler
   im <b> und schrumpft die Zahl auf Label-Größe. */
.zahl-kachel > span {
  display: block; margin-top: var(--sp-2xs);
  margin-inline: auto; max-width: 26ch;
  color: var(--ink-leise); font-size: var(--fs-klein);
}

/* ------------------------------------------------------------
   LEISTUNGSKACHELN
   ------------------------------------------------------------ */
.leistung {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: var(--weiss); border: 1px solid var(--linie);
  text-decoration: none; color: inherit;
  transition: border-color var(--dauer) var(--ease-aus),
              box-shadow var(--dauer) var(--ease-aus),
              transform var(--dauer) var(--ease-aus);
}
.leistung:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--schatten-lg); }

.leistung__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--flaeche-tief); }
.leistung__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-aus);
}
.leistung:hover .leistung__bild img { transform: scale(1.06); }

.leistung__text { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-2xs); flex: 1; }
.leistung__text p { color: var(--ink-leise); font-size: var(--fs-klein); }
.leistung__fuss {
  margin-top: auto; padding-top: var(--sp-sm);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm);
}
.leistung__preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.leistung__mehr { color: var(--brand); font-weight: 600; font-size: var(--fs-klein); }

.merkmal-neu {
  position: absolute; top: var(--sp-sm); left: var(--sp-sm); z-index: 2;
  background: var(--brand); color: #fff;
  font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  padding: 0.35em 0.85em; border-radius: var(--radius-voll);
}

/* ------------------------------------------------------------
   SPLIT
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--sp-xl); }
.split__bild { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.split__bild img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 56rem) {
  /* stretch statt center: ein Bild, das kürzer ist als die
     Textspalte, lässt die Sektion kippen. */
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-2xl); align-items: stretch; }
  .split--gedreht .split__bild { order: 2; }
  .split__bild { aspect-ratio: auto; min-height: 26rem; height: 100%; }
  .split > .stack { align-self: center; }
}

/* Weißer Haken im grünen Kreis. Der Kreis trägt die Farbe über
   currentColor, der Haken bleibt weiß. */
.punkte { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-md); }
.punkte li {
  display: flex; gap: var(--sp-sm); align-items: flex-start;
  font-size: var(--fs-basis); line-height: var(--lh-mittel); color: var(--ink-leise);
}
.punkte svg {
  flex: none; width: 1.5rem; height: 1.5rem;
  margin-top: 0.06em; color: var(--brand);
}

/* Abstand zum Absatz darüber: die Liste stieß direkt an den
   Lead-Text, der durch seine große Zeilenhöhe ohnehin viel
   Fläche hat. */
.stack > .punkte { margin-top: var(--sp-lg); }

/* ------------------------------------------------------------
   STIMMEN
   ------------------------------------------------------------ */
.stimme {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.stimme__sterne { display: flex; gap: 3px; color: #e0a500; }
.stimme p { font-size: var(--fs-gross); line-height: var(--lh-mittel); }
.stimme cite { font-style: normal; font-size: var(--fs-klein); color: var(--ink-still); margin-top: auto; }

/* ------------------------------------------------------------
   STIMMEN-LAUFBAND (Opt-in via stimmen_laufband, nur Musterseite)
   Zwei Reihen: obere laeuft nach links, untere nach rechts, langsam.
   Karten je Reihe doppelt gerendert (Klon aria-hidden) -> nahtlose
   Endlosschleife bei translateX(-50%).
   ------------------------------------------------------------ */
.stimmen-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.stimmen-spur {
  display: flex;
  width: max-content;
  align-items: stretch;
  will-change: transform;
  animation: stimmen-lauf 55s linear infinite;
}
.stimmen-spur + .stimmen-spur { margin-top: var(--sp-md); }
.stimmen-spur--rechts { animation-direction: reverse; }
.stimmen-band:hover .stimmen-spur,
.stimmen-band:focus-within .stimmen-spur { animation-play-state: paused; }
.stimmen-klon { display: contents; }
.stimmen-spur .stimme {
  flex: 0 0 min(19rem, 80vw);
  margin-inline-end: var(--sp-md);
}
@keyframes stimmen-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-spur { animation: none; }
  .stimmen-klon { display: none; }
  .stimmen-band {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ------------------------------------------------------------
   CTA-BAND
   ------------------------------------------------------------ */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band__bild { position: absolute; inset: 0; z-index: -2; }
.cta-band__bild img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(102deg, rgb(10 12 8 / 0.93) 0%, rgb(10 12 8 / 0.78) 54%, rgb(10 12 8 / 0.4) 100%);
}
.cta-band__inhalt { color: #fff; }
.cta-band__inhalt > * { max-width: 40rem; }
.cta-band__inhalt > .reihe { max-width: none; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgb(255 255 255 / 0.82); }
.cta-band .label { color: #fff; }
.cta-band .label::before { background: var(--brand-hell); }

/* Ohne diese Regel erbt der Linien-Button --ink und
   verschwindet auf dem dunklen Bild. */
.cta-band .btn--linie { border-color: rgb(255 255 255 / 0.5); color: #fff; }
.cta-band .btn--linie:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ------------------------------------------------------------
   VERSPRECHEN — Garantie und Zusagen als Kachelreihe
   50 % der Wettbewerber machen eine Garantieaussage (MUSTER.md)
   ------------------------------------------------------------ */
.versprechen { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.versprechen__kachel {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--sp-md);
  display: grid; gap: var(--sp-2xs); align-content: start;
}
.versprechen__kachel svg { width: 1.75rem; height: 1.75rem; color: var(--brand); }
.versprechen__kachel h3 { font-size: var(--fs-gross); }
.versprechen__kachel p { font-size: var(--fs-klein); color: var(--ink-leise); }

/* ------------------------------------------------------------
   FAQ — 47 % der Wettbewerber haben eine
   ------------------------------------------------------------ */
/* Volle Breite der Inhaltsspalte. Ab Tablet zweispaltig:
   Frage links, Antwort rechts — bei voller Breite würde eine
   einspaltige Antwort sonst über 120 Zeichen lang laufen. */
.faq { display: grid; max-width: none; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq details:first-child { border-top: 1px solid var(--linie); }

/* Zeilen über die volle Breite, Inhalt linksbündig darunter.

   Ein zweispaltiger Aufbau (Frage links, Antwort rechts) sah
   unsauber aus: unter der Frage blieb links ein großes leeres
   Feld stehen. Eine ruhige Liste trägt besser. */
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-lg); padding-block: var(--sp-md);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: 1.25;
  cursor: pointer; list-style: none;
  transition: color var(--dauer) var(--ease-aus);
}
.faq summary::-webkit-details-marker { display: none; }

/* Kreis mit Pfeil statt nacktem Winkel — gleiche Sprache wie
   die Haken in den Listen. */
.faq summary::after {
  content: ""; flex: none;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--linie); border-radius: 50%;
  background:
    linear-gradient(var(--brand), var(--brand)) center/0.75rem 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center/2px 0.75rem no-repeat;
  transition: transform var(--dauer) var(--ease-aus),
              border-color var(--dauer) var(--ease-aus),
              background-size var(--dauer) var(--ease-aus);
}
.faq details[open] summary::after {
  transform: rotate(180deg);
  border-color: var(--brand);
  background-size: 0.75rem 2px, 0 0;   /* Minus statt Plus */
}
.faq summary:hover { color: var(--brand); }
.faq summary:hover::after { border-color: var(--brand); }

.faq__antwort {
  padding-bottom: var(--sp-lg);
  color: var(--ink-leise);
  font-size: var(--fs-gross);
  line-height: var(--lh-mittel);
  /* Antworten laufen über die volle Sektionsbreite, einheitlich auf
     allen Seiten (LP, Musterzaun, Hessenzaun). */
  max-width: none;
}

/* ------------------------------------------------------------
   EINZUGSGEBIET — 62 % nennen es, meist nur pauschal.
   Ausgeschriebene Ortsnamen sind lokale Sichtbarkeit.

   Die Karte ist ein eigenes SVG, kein Google-Maps-Einbau:
   keine Fremdverbindung, kein Einwilligungsbanner, kein
   Ladeverzug. Sie zeigt Richtung und Entfernung schematisch,
   nicht die exakte Geografie — das ist ausgewiesen.
   ------------------------------------------------------------ */
.gebiet { display: grid; gap: var(--sp-xl); align-items: center; }
@media (min-width: 56rem) {
  .gebiet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-2xl); }
}

.karte { width: 100%; height: auto; display: block; }
.karte__ring { fill: none; stroke: var(--linie); stroke-width: 1; }
.karte__ring--satt { stroke: var(--linie); stroke-dasharray: 3 5; }
.karte__achse { stroke: var(--linie-zart); stroke-width: 1; }
.karte__km {
  font-family: var(--font-text); font-size: 9px;
  fill: var(--ink-still); letter-spacing: 0.08em;
}
.karte__ort circle { fill: var(--weiss); stroke: var(--brand); stroke-width: 1.75; }
.karte__ort text {
  font-family: var(--font-text); font-size: 10.5px; font-weight: 500;
  fill: var(--ink-leise);
}
.karte__ort:hover circle { fill: var(--brand); }
.karte__ort:hover text { fill: var(--ink); }
.karte__nadel { fill: var(--brand); }
.karte__heim {
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  fill: var(--ink); letter-spacing: -0.01em;
}
/* Einzugsgebiet-Karte: schmaler Rahmen, damit die Ringe fast bis zum Rand laufen */
#gebiet .karte { padding: .6rem; }
/* Radar-Sweep ueber der Einzugsgebiet-Karte (Sonar-/U-Boot-Optik) */
.karte__radar { transform-box: view-box; transform-origin: 210px 190px;
  animation: karte-radar 5s linear infinite; }
.karte__sweep { fill: url(#karteRadarFade); }
.karte__strahl { stroke: #43c76d; stroke-width: 1.6; opacity: .7; }
@keyframes karte-radar { to { transform: rotate(360deg); } }
.motion-aus .karte__radar { animation: none; }
.motion-aus .karte__sweep, .motion-aus .karte__strahl { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .karte__radar { animation: none; }
  .karte__sweep, .karte__strahl { opacity: 0; }
}

.orte { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); padding: 0; margin: 0; }
.orte li {
  list-style: none;
  padding: 0.45em 0.95em;
  border: 1px solid var(--linie); border-radius: var(--radius-voll);
  font-size: var(--fs-klein); color: var(--ink-leise);
  background: var(--weiss);
}

.anfahrt {
  display: grid; gap: var(--sp-2xs);
  margin-top: var(--sp-md); padding-top: var(--sp-md);
  border-top: 1px solid var(--linie);
  font-size: var(--fs-klein); color: var(--ink-leise);
}
.anfahrt strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------
   GALERIE
   ------------------------------------------------------------ */
.galerie { display: grid; gap: var(--sp-md); grid-template-columns: repeat(2, 1fr); }
/* Wrapper transparent: die Figuren sind normale Grid-Items (Tablet/Desktop) */
.galerie__lauf, .galerie__spur { display: contents; }
.galerie__klon { display: none; }   /* Klone nur fuer die Handy-Schleife */
@media (min-width: 56rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; }
  .galerie__gross { grid-column: span 2; grid-row: span 2; }
  .galerie__spur > figure:last-of-type { grid-column: span 2; }
}
@media (max-width: 40rem) {
  /* Handy: grosses Foto oben, darunter ein durchlaufendes Laufband, das an den
     Raendern ausblendet (wie das Bewertungs-Band) statt hart abgeschnitten. */
  .galerie { display: block; }
  /* .galerie .X statt .X: sonst schlaegt die spaetere Regel ".galerie figure
     { margin: 0 }" (Spezifitaet 0,1,1) unsere Abstaende und alles klebt. */
  .galerie .galerie__gross { display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: var(--sp-md); }
  /* Reihe bleibt INNERHALB der Seitenbreite (endet, wo das grosse Foto endet).
     Die Fotos fahren innerhalb dieser Grenze durch, kein Fade, Luft dazwischen. */
  .galerie__lauf { display: block; overflow: hidden; }
  .galerie__spur { display: flex; width: max-content; will-change: transform;
    animation: galerie-lauf 30s linear infinite; }
  .galerie__klon { display: contents; }
  .galerie__lauf:active .galerie__spur { animation-play-state: paused; }
  .galerie .galerie__spur figure { flex: 0 0 60vw; aspect-ratio: 4 / 3; margin-inline-end: var(--sp-md); }
}
@keyframes galerie-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
  .galerie__lauf { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .galerie__spur { animation: none; }
  .galerie__klon { display: none; }
}
.galerie figure { border-radius: var(--radius); overflow: hidden; margin: 0; }
.galerie img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   KONTAKT
   ------------------------------------------------------------ */
.kontakt-raster { display: grid; gap: var(--sp-xl); }
@media (min-width: 56rem) { .kontakt-raster { grid-template-columns: 1fr 1.1fr; gap: var(--sp-2xl); } }

.kontakt-daten { display: grid; gap: var(--sp-md); align-content: start; }
.kontakt-zeile { display: grid; gap: 0.15rem; }
.kontakt-zeile dt { font-size: var(--fs-mikro); letter-spacing: var(--ls-weit); text-transform: uppercase; color: var(--ink-still); }
.kontakt-zeile dd { margin: 0; font-size: var(--fs-gross); }
.kontakt-zeile dd a { text-decoration: none; }

.feld { display: grid; gap: var(--sp-3xs); }
.feld label { font-size: var(--fs-mikro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-still); }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: 0.85em 1em;
  border: 1px solid var(--linie); border-radius: var(--radius-sm);
  background: var(--weiss); color: var(--ink); font-size: var(--fs-basis);
  transition: border-color var(--dauer) var(--ease-aus), box-shadow var(--dauer) var(--ease-aus);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.feld textarea { resize: vertical; min-height: 6rem; }
.feld-paar { display: grid; gap: var(--sp-sm); }
@media (min-width: 34rem) { .feld-paar { grid-template-columns: 1fr 1fr; } }

/* Einwilligung (Datenschutz) an Formularen. Auf hellen Flaechen; die LP-Kontakt-
   variante (.kontakt-form .konsent) ueberschreibt fuer ihren dunklen Grund. */
.konsent { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  font-size: var(--fs-klein); line-height: var(--lh-mittel); color: var(--ink-leise); }
.konsent input { margin-top: .2rem; accent-color: var(--brand); }
.konsent a { color: var(--brand); text-decoration: underline; }

/* ------------------------------------------------------------
   FUSSZEILE
   ------------------------------------------------------------ */
.fuss { border-top: 1px solid var(--linie); padding-block: var(--sp-xl) var(--sp-lg); }
.fuss-raster { display: grid; gap: var(--sp-lg); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Verteiltes Footer-Layout (LP und Musterzaun): erste Box links, letzte rechts,
   gleichmäßige Abstände. Mobil mittig gestapelt. */
.fuss--verteilt .fuss-raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-xl) var(--sp-2xl); }
@media (max-width: 48rem){
  .fuss--verteilt .fuss-raster { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-xl); }
  .fuss--verteilt .fuss-marke p,
  .fuss--verteilt .fuss-kontakt { margin-inline: auto; }
  .fuss--verteilt .fuss-copy { text-align: center; }
}
.fuss h4 {
  font-family: var(--font-text); font-size: var(--fs-mikro);
  letter-spacing: var(--ls-weit); text-transform: uppercase;
  color: var(--ink-still); font-weight: 600;
}
.fuss ul { list-style: none; padding: 0; margin: var(--sp-xs) 0 0; display: grid; gap: var(--sp-2xs); }
.fuss a { color: var(--ink-leise); text-decoration: none; font-size: var(--fs-klein); }
.fuss a:hover { color: var(--ink); }
.fuss li span { color: var(--ink-leise); font-size: var(--fs-klein); } /* Demo: Rechtstext ohne Link */
.fuss-copy { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--linie); color: var(--ink-still); font-size: var(--fs-mikro); }

/* ------------------------------------------------------------
   HOVER — nur für echte Zeigegeräte

   Ohne @media (hover: hover) bleiben Hover-Zustände auf
   Touchgeräten nach dem Antippen hängen. Alle Kachelflächen
   bekommen dieselbe Sprache: leicht anheben, Schatten, Rahmen
   zurücknehmen.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {

  /* Versprechen */
  .versprechen__kachel {
    transition: transform var(--dauer) var(--ease-aus),
                box-shadow var(--dauer) var(--ease-aus),
                border-color var(--dauer) var(--ease-aus);
  }
  .versprechen__kachel:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--schatten-lg);
  }
  .versprechen__kachel svg { transition: transform var(--dauer) var(--ease-aus); }
  .versprechen__kachel:hover svg { transform: scale(1.08); }

  /* Kundenstimmen */
  .stimme {
    transition: transform var(--dauer) var(--ease-aus),
                box-shadow var(--dauer) var(--ease-aus),
                border-color var(--dauer) var(--ease-aus);
  }
  .stimme:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--schatten-lg);
  }

  /* Galerie: Bild zoomt im Rahmen, Rahmen bleibt stehen */
  .galerie figure { overflow: hidden; }
  .galerie img { transition: transform 0.8s var(--ease-aus); }
  .galerie figure:hover img { transform: scale(1.05); }

  /* Ortschaften */
  .orte li {
    transition: border-color var(--dauer) var(--ease-aus),
                color var(--dauer) var(--ease-aus);
  }
  .orte li:hover { border-color: var(--brand); color: var(--ink); }

  /* Zahlen: dezent, sie sind nicht anklickbar */
  .zahl-kachel b { transition: color var(--dauer) var(--ease-aus); }
  .zahl-kachel:hover b { color: var(--brand); }

  /* Kontaktzeilen mit Telefonlink */
  .kontakt-zeile dd a { transition: color var(--dauer) var(--ease-aus); }
  .kontakt-zeile dd a:hover { color: var(--brand); }

  /* Fußzeile */
  .fuss a { transition: color var(--dauer) var(--ease-aus); }
}

/* ------------------------------------------------------------
   KI-HINWEIS (Art. 50 AI Act) — nur bei generierten Bildern
   ------------------------------------------------------------ */
.ki-hinweis {
  position: absolute; right: var(--sp-2xs); bottom: var(--sp-2xs); z-index: 3;
  background: rgb(0 0 0 / 0.55); color: #fff;
  font-size: 0.625rem; letter-spacing: 0.06em;
  padding: 0.25em 0.6em; border-radius: var(--radius-voll);
  backdrop-filter: blur(4px);
}

/* ===== konfigurator.css ===== */
/* ============================================================
   Lohleit Digitalsysteme — Konfigurator (Schicht 2)
   Das Stück, das den Auftrag holt. Alles andere ist Rahmen.

   Grundsatz: kein Schritt-für-Schritt-Assistent. Der Nutzer
   sieht alle Stellschrauben gleichzeitig und den Preis, der
   sich sofort mitbewegt. Jede Klickstrecke kostet Abbrecher.
   ============================================================ */

.konfig {
  display: grid;
  gap: var(--sp-xl);
  align-items: start;
}
@media (min-width: 62rem) {
  .konfig { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-2xl); }
}

/* ------------------------------------------------------------
   Auswahlgruppen
   ------------------------------------------------------------ */
.konfig__gruppe + .konfig__gruppe { margin-top: var(--sp-lg); }

.konfig__frage {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-sm); margin-bottom: var(--sp-sm);
}
.konfig__frage h3 {
  font-family: var(--font-text); font-weight: 600;
  font-size: var(--fs-mikro); letter-spacing: var(--ls-weit);
  text-transform: uppercase; color: var(--ink-still);
}
.konfig__wert {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-gross); font-variant-numeric: tabular-nums;
}

/* --- Zauntypen: Bildkacheln --------------------------------- */
.typen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xs); }
@media (max-width: 34rem) { .typen { grid-template-columns: repeat(2, 1fr); } }

.typ { position: relative; cursor: pointer; }
.typ input { position: absolute; opacity: 0; pointer-events: none; }

.typ__kachel {
  display: block; overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  transition: border-color var(--dauer) var(--ease-aus),
              box-shadow var(--dauer) var(--ease-aus),
              transform var(--dauer) var(--ease-aus);
}
.typ__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--flaeche-tief); }
.typ__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-aus), filter var(--dauer) var(--ease-aus);
  filter: saturate(0.72);
}
.typ__name {
  display: block; padding: var(--sp-xs);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-klein); line-height: 1.15;
  letter-spacing: var(--ls-normal);
}
.typ__ab { display: block; padding: 0 var(--sp-xs) var(--sp-xs); font-size: var(--fs-mikro); color: var(--ink-still); font-variant-numeric: tabular-nums; }

.typ:hover .typ__bild img { transform: scale(1.05); filter: saturate(1); }
.typ:hover .typ__kachel { border-color: transparent; box-shadow: var(--schatten); transform: translateY(-3px); }

.typ input:checked + .typ__kachel {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--schatten-sm);
}
.typ input:checked + .typ__kachel .typ__bild img { filter: saturate(1); }
.typ input:focus-visible + .typ__kachel { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- Schieberegler ------------------------------------------ */
.regler {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; background: var(--linie);
  cursor: pointer; margin-block: var(--sp-sm);
}
.regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 4px solid var(--weiss);
  box-shadow: 0 0 0 1px var(--ink);
  transition: transform var(--dauer-schnell) var(--ease-aus);
}
.regler::-webkit-slider-thumb:hover { transform: scale(1.14); }
.regler::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); border: 4px solid var(--weiss);
  box-shadow: 0 0 0 1px var(--ink); cursor: pointer;
}
.regler:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

.regler__skala {
  display: flex; justify-content: space-between;
  font-size: var(--fs-mikro); color: var(--ink-still);
  font-variant-numeric: tabular-nums;
}

/* --- Chips (Höhe) ------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.25rem; padding: 0.62em 1em;
  border: 1px solid var(--linie); border-radius: var(--radius-voll);
  background: var(--weiss);
  font-size: var(--fs-klein); font-weight: 500;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color var(--dauer) var(--ease-aus),
              background var(--dauer) var(--ease-aus),
              color var(--dauer) var(--ease-aus);
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--brand); color: var(--brand-kontrast); border-color: var(--brand); }
.chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }

/* --- Farben --------------------------------------------------*/
.farben { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.farbe { position: relative; text-align: center; }
.farbe input { position: absolute; opacity: 0; pointer-events: none; }
.farbe__punkt {
  display: block; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
  transition: transform var(--dauer) var(--ease-aus), box-shadow var(--dauer) var(--ease-aus);
}
.farbe:hover .farbe__punkt { transform: scale(1.08); }
.farbe input:checked + .farbe__punkt {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2px var(--weiss), 0 0 0 4px var(--ink);
}
.farbe input:focus-visible + .farbe__punkt { outline: 2px solid var(--brand); outline-offset: 6px; }
.farbe__name { display: block; margin-top: var(--sp-2xs); font-size: var(--fs-mikro); color: var(--ink-still); }

/* --- Extras: Schalterliste ---------------------------------- */
.extras { display: grid; }
.extra {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: var(--sp-sm); padding-block: var(--sp-sm);
  border-bottom: 1px solid var(--linie-zart);
  cursor: pointer;
}
.extra:first-child { border-top: 1px solid var(--linie-zart); }
.extra__text { font-size: var(--fs-klein); }
.extra__preis { font-size: var(--fs-klein); color: var(--ink-still); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 6.5rem; }
.extra input { position: absolute; opacity: 0; pointer-events: none; }

.schalter {
  flex: none; width: 2.75rem; height: 1.5rem;
  background: var(--linie); border-radius: var(--radius-voll);
  position: relative; transition: background var(--dauer) var(--ease-aus);
}
.schalter::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--weiss);
  transition: transform var(--dauer) var(--ease-aus);
}
.extra input:checked ~ .schalter { background: var(--brand); }
.extra input:checked ~ .schalter::after { transform: translateX(1.25rem); }
.extra input:focus-visible ~ .schalter { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ------------------------------------------------------------
   Preistafel — klebt mit, damit der Preis nie aus dem Blick geht
   ------------------------------------------------------------ */
.preistafel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--sp-lg);
  background: var(--weiss);
}
@media (min-width: 62rem) {
  .preistafel { position: sticky; top: calc(var(--kopf-hoehe, 5rem) + var(--sp-md)); }
}

.preistafel__kopf {
  font-size: var(--fs-mikro); letter-spacing: var(--ls-weit);
  text-transform: uppercase; color: var(--ink-still);
}
.preistafel__summe {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  line-height: 0.94; letter-spacing: var(--ls-knapp);
  font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2xs);
}
.preistafel__netto { font-size: var(--fs-klein); color: var(--ink-still); font-variant-numeric: tabular-nums; }

.preistafel__liste {
  margin-top: var(--sp-md); padding-top: var(--sp-md);
  border-top: 1px solid var(--linie);
  display: grid; gap: var(--sp-2xs);
  font-size: var(--fs-klein);
}
.preistafel__zeile { display: flex; justify-content: space-between; gap: var(--sp-sm); }
.preistafel__zeile span:first-child { color: var(--ink-leise); }
.preistafel__zeile span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.preistafel__zeile--summe {
  margin-top: var(--sp-2xs); padding-top: var(--sp-xs);
  border-top: 1px solid var(--linie); font-weight: 600;
}

.preistafel .btn { width: 100%; margin-top: var(--sp-md); }
.preistafel__hinweis { margin-top: var(--sp-sm); font-size: var(--fs-mikro); color: var(--ink-still); }

/* Preis blinkt kurz auf, wenn er sich ändert */
.preistafel__summe.ist-neu { animation: preis-puls 0.42s var(--ease-aus); }
@keyframes preis-puls {
  0%   { color: var(--brand); transform: translateY(-2px); }
  100% { color: var(--ink);   transform: none; }
}

/* Mobile Preisleiste am unteren Rand */
.preisleiste {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky);
  display: none; align-items: center; justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--rand);
  background: var(--weiss); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 24px rgb(31 32 27 / 0.1);
}
.preisleiste b { font-family: var(--font-head); font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.preisleiste small { display: block; font-size: var(--fs-mikro); color: var(--ink-still); }
@media (max-width: 62rem) {
  .preisleiste.ist-an { display: flex; }
  body:has(.preisleiste.ist-an) { padding-bottom: 5rem; }
}

/* ------------------------------------------------------------
   Vorführ-Schalter „Preise an/aus" (Demos: LP + Musterseite)
   ------------------------------------------------------------ */
.preistafel__schalter { margin-bottom: var(--sp-md); padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--linie); }
.preis-schalter__seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--flaeche-tief); }
.preis-schalter__seg button { flex: 1; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-weight: 600; color: var(--ink-leise); padding: .5rem .6rem; border-radius: 999px;
  transition: background .2s, color .2s; }
.preis-schalter__seg button.ist-aktiv { background: var(--brand); color: #fff; box-shadow: var(--schatten-sm); }
/* "Preise aus": Konfigurator läuft normal, es werden nur alle Preise ausgeblendet */
body.konfig-ohne-preis .typ__ab { display: none; }
body.konfig-ohne-preis .extra__preis { visibility: hidden; }
body.konfig-ohne-preis .preistafel__summe,
body.konfig-ohne-preis .preistafel__netto { display: none; }
body.konfig-ohne-preis .preisleiste > span { visibility: hidden; }

/* ------------------------------------------------------------
   Angebots-Overlay
   ------------------------------------------------------------ */
.angebot {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: var(--rand);
  background: rgb(12 13 10 / 0.62);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dauer) var(--ease-aus), visibility var(--dauer);
}
.angebot.ist-offen { opacity: 1; visibility: visible; }

.angebot__blatt {
  width: min(46rem, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--weiss);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-lg);
  padding: var(--sp-xl);
  transform: translateY(16px) scale(0.985);
  transition: transform var(--dauer-langsam) var(--ease-aus);
}
.angebot.ist-offen .angebot__blatt { transform: none; }

.angebot__kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-md); padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--ink);
}
.angebot__firma { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-eng); }
.angebot__logo { margin: 0; line-height: 1; }
.angebot__logo .marke-schrift__wort { font-size: 1.6rem; }
.angebot__meta { font-size: var(--fs-mikro); color: var(--ink-still); text-align: right; }

.angebot__titel { margin-top: var(--sp-lg); }

.angebot__tabelle { width: 100%; border-collapse: collapse; margin-top: var(--sp-md); font-size: var(--fs-klein); }
.angebot__tabelle th {
  text-align: left; font-weight: 600; font-size: var(--fs-mikro);
  letter-spacing: var(--ls-weit); text-transform: uppercase; color: var(--ink-still);
  padding-bottom: var(--sp-2xs); border-bottom: 1px solid var(--linie);
}
.angebot__tabelle td { padding-block: var(--sp-xs); border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
.angebot__tabelle td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.angebot__tabelle tr.summe td {
  border-bottom: 0; border-top: 1px solid var(--ink);
  padding-top: var(--sp-sm);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-gross);
}

.angebot__fuss { margin-top: var(--sp-lg); display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.angebot__schliessen {
  font-size: var(--fs-mikro); letter-spacing: var(--ls-weit);
  text-transform: uppercase; color: var(--ink-still);
}
.angebot__schliessen:hover { color: var(--ink); }

/* Platzhalter-Hinweis: solange die Preise nicht vom Betrieb
   bestätigt sind, muss das sichtbar sein. */
.angebot__platzhalter {
  margin-top: var(--sp-md); padding: var(--sp-sm);
  background: #fdf6e3; border: 1px solid #e8d9a8; color: #6b5518;
  font-size: var(--fs-mikro);
}

/* ------------------------------------------------------------
   Zwei-Schritt-Assistent im Overlay (Angebot -> Kontaktdaten)
   ------------------------------------------------------------ */
.angebot__fortschritt {
  display: flex; gap: var(--sp-md); margin: 0 0 var(--sp-md); padding: 0;
  list-style: none; font-size: var(--fs-mikro); font-weight: 700;
  letter-spacing: var(--ls-weit); text-transform: uppercase;
}
.af-step { display: flex; align-items: center; gap: .5rem; color: var(--ink-still); }
.af-step span {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; background: var(--flaeche-tief); color: var(--ink-still);
  font-variant-numeric: tabular-nums;
}
.angebot__fortschritt[data-schritt="1"] .af-step[data-step="1"],
.angebot__fortschritt[data-schritt="2"] .af-step[data-step="1"],
.angebot__fortschritt[data-schritt="2"] .af-step[data-step="2"] { color: var(--brand); }
.angebot__fortschritt[data-schritt="1"] .af-step[data-step="1"] span,
.angebot__fortschritt[data-schritt="2"] .af-step[data-step="1"] span,
.angebot__fortschritt[data-schritt="2"] .af-step[data-step="2"] span { background: var(--brand); color: #fff; }

.angebot__pane[hidden] { display: none; }
.angebot__kauf {
  margin-top: var(--sp-md); padding: var(--sp-sm) var(--sp-md);
  background: var(--flaeche-tief); border-radius: .6rem;
  color: var(--ink-leise); font-size: var(--fs-klein); line-height: var(--lh-mittel);
}
.angebot__zurueck {
  background: 0; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--ink-still); font-size: var(--fs-klein); margin-bottom: var(--sp-xs);
}
.angebot__zurueck:hover { color: var(--brand); }
.angebot__form { margin-top: var(--sp-md); display: grid; gap: var(--sp-md); }
.angebot__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.angebot__konsent { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  color: var(--ink-leise); font-size: var(--fs-klein); line-height: var(--lh-mittel); }
.angebot__konsent input { margin-top: .2rem; accent-color: var(--brand); }
.angebot__konsent a { color: var(--brand); text-decoration: underline; }

/* ===== marke.css ===== */
/* Hessenzaun — Markenwerte aus kunde.json.
   Einzige kundenspezifische Stildatei. Wird zuletzt eingebunden.

   ACHTUNG: Diese Datei überschreibt die System-Tokens. Was hier
   steht, gewinnt. Nur echte Markenwerte setzen, nichts kopieren,
   das im System besser aufgehoben ist. */

:root {
  /* Grün von der Bestandsseite übernommen (Wiedererkennung) */
  --brand:          #006634;
  --brand-hell:     #0b8a45;
  --brand-kontrast: #ffffff;

  /* Display-Schrift von der Bestandsseite.
     Die Body-Schrift kommt bewusst aus dem System (Instrument
     Sans) — Montserrat war der generische Anteil. */
  --font-head: "Anybody", "Anybody Fallback", system-ui, sans-serif;
}

/* Logo: fette zweifarbige Wortmarke mit Zaun-Akzent (zwei Entwurfsvarianten) */
.marke-schrift { display: inline-flex; align-items: flex-end; gap: .5rem; color: var(--ink); }
.marke-schrift__wort { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem;
  letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.mw-a { color: inherit; }
.mw-b { color: var(--brand); }
.marke-accent { flex: none; color: var(--brand); }
.marke-rail  { width: 1.3rem; height: 1.65rem; }
.marke-fence { width: 2rem; height: 1.55rem; }
/* Nur über dem Hero (Kopf nicht geschrumpft) ist der Text hell; sonst dunkel.
   "zaun" und der Akzent bleiben über ihr eigenes color:var(--brand) immer grün. */
.kopfleiste--ueber-hero:not(.ist-geschrumpft) .marke-schrift { color: #fff; }