/* Kerstens Kamine – Website. Schrift: Gotham (eigene Dateien, kein externer Dienst). */

@font-face { font-family: "Gotham"; src: url("../fonts/gotham-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/gotham-book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/gotham-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/gotham-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../fonts/gotham-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --bg: #ffffff;
  --text: #151413;
  --leise: #57534e;
  --sehr-leise: #a5a29c;
  --fuellen-start: #706b64;   /* Wort-Füll-Effekt: Startfarbe noch lesbar (Kontrast ≥ 4,5:1, Website-Check) */
  --grau: #f4f3f0;
  --grau-2: #ebe9e4;
  --rand: #e4e2dd;
  --dunkel: #151413;
  --glut: #e0561f;          /* Akzent aus dem Flammen-Logo */
  --glut-hell: #f39a2b;
  --braun: #6b5b45;
  --radius: 24px;
  --radius-s: 14px;
  --seite-max: 1720px;   /* Die Seite wird nicht breiter (Ultra-Breitbild): rechts und links bleibt ruhiger Rand */
  --rahmen: min(1360px, calc(100vw - 2 * var(--rand-abstand)));
  --rand-abstand: clamp(16px, 4vw, 48px);
  --kopf-h: 76px;
  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.18);
  --weich: cubic-bezier(.22, 1, .36, 1);
  --federnd: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
.dunkel {
  --bg: #0b0b0b;
  --text: #f4f2ee;
  --leise: #a9a49c;
  --sehr-leise: #6d6962;
  --fuellen-start: #908b85;
  --grau: #171615;
  --grau-2: #222120;
  --rand: #2b2a28;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
html { background: #ecebe7; }   /* Fläche außerhalb der Seite auf sehr breiten Bildschirmen */
.dunkel { background: #050505; }
body {
  margin: 0 auto; max-width: var(--seite-max); background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 0 80px rgba(0,0,0,.06);
  font-family: "Gotham", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400; font-size: 18px; line-height: 1.6; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--glut); color: #fff; }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; border-radius: 6px; }

.sprung { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--dunkel); color: #fff; padding: 10px 16px; border-radius: 99px; }
.sprung:focus { left: 16px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rahmen { width: var(--rahmen); margin-inline: auto; }
.rahmen-schmal { width: min(920px, calc(100vw - 2 * var(--rand-abstand))); margin-inline: auto; }
.abschnitt { padding-block: clamp(64px, 10vw, 140px); }
.abschnitt-voll { padding-inline: clamp(8px, 1.4vw, 20px); padding-block: clamp(24px, 4vw, 48px); }
.mitte { text-align: center; }
.leise { color: var(--leise); }
.klein { font-size: 14px; }

/* ── Typografie ── */
.etikett { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.etikett::before { content: ""; width: 22px; height: 2px; background: var(--glut); border-radius: 2px; }
.titel-xl { font-size: clamp(40px, 7vw, 104px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.titel-l { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.titel-m { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; }
.titel-s { font-size: 20px; letter-spacing: -.02em; }
.h1-klein { font-size: 14px; font-weight: 500; color: var(--leise); letter-spacing: 0; margin-bottom: 12px; }

/* ── Knöpfe ── */
.knopf {
  --k-bg: var(--dunkel); --k-text: #fff; --k-hover: var(--glut);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  background: var(--k-bg); color: var(--k-text); font-weight: 500; font-size: 16px; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; transition: transform .5s var(--weich), box-shadow .5s var(--weich), color .4s, border-color .4s;
}
.knopf::before {   /* Füllung steigt beim Überfahren wie eine Flamme von unten auf */
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 120%, var(--k-hover) 0 55%, transparent 56%);
  transform: translateY(105%); transition: transform .6s var(--weich);
}
.knopf:hover::before, .knopf:focus-visible::before { transform: translateY(0); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(224, 86, 31, .7); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf .pfeil { font-style: normal; display: inline-block; transition: transform .5s var(--federnd); }
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf-dunkel { --k-bg: var(--dunkel); --k-text: #fff; }
.knopf-hell { --k-bg: #fff; --k-text: var(--dunkel); --k-hover: var(--glut); }
.knopf-hell:hover { color: #fff; }
.knopf-leer { --k-bg: transparent; --k-text: var(--text); border-color: var(--rand); }
.knopf-leer:hover { color: #fff; border-color: var(--glut); }
.knopf-leer-hell { --k-bg: transparent; --k-text: #fff; border-color: rgba(255,255,255,.3); }
.knopf-glas, .knopf-glas-leer { --k-text: #fff; --k-bg: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.knopf-glas-leer { --k-bg: rgba(0,0,0,.18); --k-hover: #fff; }
.knopf-glas-leer:hover { color: var(--dunkel); }
.knopf-klein { min-height: 42px; padding: 0 20px; font-size: 14px; }
.knopf-breit { width: 100%; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.rund-knopf { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rand); background: var(--bg); cursor: pointer; font-size: 18px; transition: background .3s, color .3s, transform .4s var(--federnd), border-color .3s; }
.rund-knopf:hover { background: var(--dunkel); color: #fff; border-color: var(--dunkel); transform: scale(1.08); }
.rund-knopf:disabled { opacity: .35; pointer-events: none; }
.dunkel .rund-knopf:hover { background: #fff; color: #000; }

.pille { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--leise); transition: background .3s, color .3s; }
.pille:hover { color: var(--text); background: var(--grau); }
.pille[aria-current="page"] { color: var(--text); background: var(--grau-2); }
.pille-rand { border: 1px solid var(--rand); color: var(--text); height: 38px; }
.pille-rand:hover { background: var(--dunkel); color: #fff; border-color: var(--dunkel); }

/* ── Kopfzeile ── */
/* Schwebende Glasleiste: liegt über dem Inhalt, zeichnet ihn stark weich, heller Glasrand */
.kopf {
  --glas: rgba(255,255,255,.38); --glas-rand: rgba(255,255,255,.65); --glas-glanz: rgba(255,255,255,.75);
  position: fixed; z-index: 50; top: max(12px, env(safe-area-inset-top));
  /* iPhone im Querformat: nicht unter die Kamera-Aussparung (safe-area) */
  left: max(clamp(10px, 1.6vw, 24px), calc(50% - var(--seite-max) / 2 + 24px), env(safe-area-inset-left)); right: max(clamp(10px, 1.6vw, 24px), calc(50% - var(--seite-max) / 2 + 24px), env(safe-area-inset-right));
  height: calc(var(--kopf-h) - 16px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 10px 0 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--glas), rgba(255,255,255,.16));
  border: 1px solid var(--glas-rand);
  box-shadow: inset 0 1px 0 var(--glas-glanz), inset 0 -1px 0 rgba(255,255,255,.12), 0 10px 40px -12px rgba(0,0,0,.25);
  backdrop-filter: blur(28px) saturate(1.9) brightness(1.04); -webkit-backdrop-filter: blur(28px) saturate(1.9) brightness(1.04);
  transition: transform .6s var(--weich), background .5s, border-color .5s, box-shadow .5s, color .4s;
}
.kopf::before {   /* feiner Lichtreflex auf dem Glas */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.18) 100%);
  mix-blend-mode: soft-light;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav-rechts { justify-content: flex-end; gap: 6px; }
.marke { display: grid; }
.marke img { grid-area: 1 / 1; height: 38px; width: auto; transition: transform .5s var(--federnd), opacity .4s; }
.marke .logo-hell { opacity: 0; }
.marke:hover img { transform: scale(1.04); }
/* Glasleiste im Apple-Stil („Liquid Glass“): durchscheinend, stark weichgezeichnet, mit Lichtkante oben,
   Brechungs-Saum am Rand und weichem Schatten. Menüpunkte als ruhige Schrift; eine Glasblase (.nav-licht) gleitet
   zum Menüpunkt unter der Maus bzw. zur aktuellen Seite. */
.kopf:not(.kopf-focus) {
  --glas: rgba(255,255,255,.42); --glas-rand: rgba(255,255,255,.55); --glas-glanz: rgba(255,255,255,.95);
  padding: 0 8px; border-radius: 26px; border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.40) 55%, rgba(255,255,255,.50) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),            /* Lichtkante oben */
    inset 0 -1px 0 rgba(255,255,255,.45),             /* Lichtkante unten (Linsenrand) */
    inset 0 0 0 1px rgba(255,255,255,.30),            /* Glasrand */
    inset 0 -16px 28px -18px rgba(255,255,255,.6),    /* Aufhellung am unteren Rand wie bei dickem Glas */
    inset 0 16px 28px -18px rgba(255,255,255,.35),
    0 1px 0 rgba(0,0,0,.04), 0 18px 44px -18px rgba(30,20,10,.38);
  /* Safari: Weichzeichner; Chromium/Edge/Firefox: zusätzlich Linsenbrechung an den Kanten (SVG-Filter in index.php) */
  -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.05);
  backdrop-filter: url(#glas-brechung) blur(14px) saturate(1.9) brightness(1.05);
}
.kopf:not(.kopf-focus).ueber-dunkel {   /* über dunklen Bildern: Glas etwas milchiger, Schrift bleibt dunkel und lesbar */
  background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.64) 55%, rgba(255,255,255,.72) 100%);
}
.kopf:not(.kopf-focus)::before {   /* schräger Glanz wie auf gewölbtem Glas */
  display: block; mix-blend-mode: normal; opacity: 1;
  background: linear-gradient(112deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255,.10) 78%, rgba(255,255,255,.40) 100%);
}
.kopf:not(.kopf-focus)::after {    /* dunkler Brechungssaum, der die Kante „dick“ wirken lässt */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(60,40,20,.06), inset 0 -2px 6px -4px rgba(60,40,20,.18);
}
.kopf .nav { position: relative; gap: 2px; isolation: isolate; }
.nav-licht {
  position: absolute; z-index: -1; top: 50%; left: 0; height: 44px; width: 0; margin-top: -22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.28);
  opacity: 0; transition: transform .45s var(--weich), width .45s var(--weich), opacity .3s;
}
.kopf .pille { height: 44px; padding: 0 18px; border-radius: 16px; background: none; color: #1a1816; font-weight: 500; font-size: 17px; letter-spacing: -.005em; text-shadow: 0 1px 0 rgba(255,255,255,.6); transition: color .3s; }
.kopf .pille:hover, .kopf .pille[aria-current="page"] { background: none; color: #000; }
.kopf .pille { position: relative; }
.kopf .pille-focus img { height: 22px; filter: brightness(0); opacity: .78; transition: opacity .3s; }
.kopf .pille-focus:hover img, .kopf .pille-focus[aria-current="page"] img { opacity: 1; }
.kopf:not(.kopf-focus) .marke img { height: 40px; }
.kopf:not(.kopf-focus) .knopf-klein { min-height: 46px; border-radius: 16px; padding: 0 24px; font-size: 16.5px; --k-bg: rgba(21,20,19,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(0,0,0,.5); backdrop-filter: blur(10px); }
.kopf:not(.kopf-focus) .menue-knopf { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff; backdrop-filter: blur(10px); }
/* Focus-Seite: dunkles Glas */
.kopf-focus { background: linear-gradient(180deg, rgba(40,38,36,.55), rgba(12,12,12,.45)); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px -18px rgba(0,0,0,.7); border-radius: 26px; }
/* Focus-Seite (schwarz): dunkles Glas */
.kopf.auf-dunkel { --glas: rgba(14,13,12,.78); --glas-rand: rgba(255,255,255,.14); --glas-glanz: rgba(255,255,255,.12); color: #fff; border-radius: 22px; }
.kopf.auf-dunkel::before { display: none; }
.kopf-focus { background: linear-gradient(180deg, rgba(20,19,18,.82), rgba(10,10,10,.72)); }
/* Platz für die schwebende Leiste */
main { padding-top: var(--kopf-h); }
.seite-start main, .seite-focus main, .seite-verwaltung main { padding-top: 0; }
.seite-start .hero { padding-top: clamp(8px, 1.4vw, 20px); }
.seite-start .hero-titel { top: calc(var(--kopf-h) + 4%); }
.pille-focus img { height: 21px; width: auto; filter: invert(1); opacity: .8; transition: opacity .3s; }
.pille-focus:hover img, .pille-focus[aria-current="page"] img { opacity: 1; }
.menue-knopf { display: none; }

/* Mobilmenü */
.menue {
  position: fixed; inset: 0; z-index: 45; background: var(--bg);
  padding: calc(var(--kopf-h) + 12px) var(--rand-abstand) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow-y: auto;
  clip-path: circle(0 at calc(100% - 40px) 38px); transition: clip-path .7s var(--weich);
}
.menue[hidden] { display: flex; visibility: hidden; }
.menue.offen { clip-path: circle(150% at calc(100% - 40px) 38px); visibility: visible; }
.menue-liste { display: flex; flex-direction: column; }
.menue-liste a {
  display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--rand);
  font-size: clamp(26px, 7.5vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--weich), transform .6s var(--weich), color .3s;
  transition-delay: calc(.12s + var(--i) * .045s);
}
.menue-liste .nr { font-size: 12px; letter-spacing: .06em; color: var(--sehr-leise); width: 22px; font-weight: 400; }
.menue-liste .pfeil { margin-left: auto; font-size: 20px; color: var(--sehr-leise); transition: transform .4s var(--federnd), color .3s; }
.menue-liste a:active .pfeil, .menue-liste a:hover .pfeil { transform: translateX(6px); color: var(--glut); }
.menue-liste a[aria-current="page"] { color: var(--glut); }
.menue-liste .menue-logo { height: 1.5em; width: auto; margin-block: -.3em; filter: brightness(0); }   /* Focus als Logo statt Wort (Inhaber 21.10.2026) */
.dunkel .menue-liste .menue-logo { filter: brightness(0) invert(1); }
.menue-fuss { display: grid; gap: 14px; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--weich), transform .6s var(--weich); transition-delay: calc(.12s + var(--i) * .045s); }
.menue.offen .menue-liste a, .menue.offen .menue-fuss { opacity: 1; transform: none; }
.schnell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.schnell-knopf { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--radius-s); background: var(--grau); font-size: 13px; font-weight: 500; transition: background .3s, transform .3s; }
.schnell-knopf:active { transform: scale(.96); background: var(--grau-2); }
.schnell-knopf svg { width: 22px; height: 22px; fill: var(--glut); }
.menue-zeiten { font-size: 13px; color: var(--leise); text-align: center; margin: 0; }
body.menue-auf { overflow: hidden; }

/* ── Hero (Startseite) ── */
.hero-bereich { position: relative; }
.hero { padding: 0 clamp(8px, 1.4vw, 20px); }
.hero-buehne {
  position: relative; height: calc(100svh - 2 * clamp(8px, 1.4vw, 20px)); min-height: 560px;
  border-radius: calc(var(--radius) + 6px); overflow: hidden; color: #fff; background: #1b1714;
  transform-origin: 50% 0; will-change: transform;
}
.hero-medien, .hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.laeuft { opacity: 1; }
/* Vorlade-Balken für große Hintergrundvideos (site.js): unbestimmt laufend, sobald der Ladestand bekannt ist füllt er sich */
.video-lade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.video-lade.aktiv { opacity: 1; }
.video-lade.fertig { opacity: 0; }
.video-lade i { position: absolute; inset: 0 auto 0 0; width: 40%; background: var(--glut); box-shadow: 0 0 10px var(--glut); animation: lade-balken 1.2s ease-in-out infinite; }
.video-lade.mit-stand i { width: 100%; animation: none; transform-origin: left; transform: scaleX(var(--stand, 0)); transition: transform .4s ease; }
.hero-medien { transform: scale(1.12); animation: hero-rein 2.4s var(--weich) forwards; }
@keyframes hero-rein { to { transform: scale(1); } }
.hero-verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.65) 100%); }
.hero-titel { position: absolute; inset: 9% 4% auto 4%; margin: 0; font-weight: 700; font-size: clamp(46px, 9.4vw, 156px); line-height: .95; letter-spacing: -.045em; text-shadow: 0 6px 40px rgba(0,0,0,.25); }
.hero-titel .hero-zeile { transform: translate(calc(var(--mx, 0px) + var(--sx, 0px)), var(--my, 0px)); transition: transform .6s var(--weich); }   /* --mx/--my: Maus, --sx: beim Scrollen gleiten die Zeilen auseinander */
.hero-poster, .hero-video { transform: scale(var(--hs, 1)); transform-origin: 50% 40%; }   /* --hs: das Bild wächst, während sich die Bühne beim Scrollen zusammenzieht */
.hero-medien { transition: transform .8s var(--weich); }
.hero-zeile { display: block; }
.hero-zeile-2 { text-align: right; margin-top: .12em; }
.hero-unten { position: absolute; left: 4%; bottom: 6%; max-width: 520px; }
.hero-etikett { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.hero-text { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; margin-bottom: 22px; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-hinweis { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 38px; margin-left: -12px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 12px; }
.scroll-hinweis span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: rollen 1.8s ease-in-out infinite; }
@keyframes rollen { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ── Einleitung ── */
.einleitung { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 20px); padding-top: clamp(40px, 6vw, 80px); }
.einleitung-karte { background: var(--grau); border-radius: var(--radius); padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.einleitung-karte p { max-width: 520px; }
.einleitung-karte { grid-column: 1; grid-row: 1; }
.einleitung-bild-2 { grid-column: 2; grid-row: 1 / span 2; min-height: 100%; }
.einleitung-bild-1 { grid-column: 1; grid-row: 2; aspect-ratio: 4/3; }
.bild-rund { border-radius: var(--radius); overflow: hidden; background: var(--grau); }
.bild-rund img { width: 100%; height: 100%; object-fit: cover; }

/* ── Statement: Wörter füllen sich beim Scrollen ── */
.statement-text { font-size: clamp(26px, 4vw, 54px); line-height: 1.18; letter-spacing: -.03em; font-weight: 500; text-align: center; margin: 0; }
.statement-text .akzent { color: var(--glut); }
[data-fuellen] .wort { color: var(--fuellen-start); transition: color .35s, opacity .35s; }
[data-fuellen] .wort.an { color: inherit; opacity: 1; }
[data-fuellen] .akzent .wort.an { color: var(--glut); }

/* ── Kopfzeilen von Abschnitten ── */
.kopfzeile { margin-bottom: clamp(32px, 4vw, 56px); padding-top: 18px; border-top: 1px solid var(--rand); }
.kopfzeile-inhalt { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.kopfzeile-inhalt > :first-child { margin: 0; }
.kopfzeile-text { max-width: 380px; margin: 0; }
.kopfzeile-mitte { text-align: center; border-top: 0; }
.kopfzeile-mitte .etikett { justify-content: center; }

/* ── Karussell ── */
.karussell { position: relative; }
.karussell-spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 330px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding-bottom: 6px; scrollbar-width: none; cursor: grab;
}
.karussell-spur::-webkit-scrollbar { display: none; }
.karussell-spur.ziehen { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.karussell-spur.ziehen a { pointer-events: none; }
.karussell-spur > * { scroll-snap-align: start; }
.karussell-steuerung { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.karussell-fortschritt { flex: 1; height: 2px; background: var(--rand); border-radius: 2px; overflow: hidden; }
.karussell-fortschritt span { display: block; height: 100%; width: 20%; background: var(--text); border-radius: 2px; transition: transform .3s var(--weich), width .3s; transform-origin: 0 0; }
.pfeile { display: flex; gap: 8px; }

.produkt-karte { position: relative; display: block; aspect-ratio: 3/4.3; border-radius: var(--radius); overflow: hidden; color: #fff; background: #222; isolation: isolate; }
.produkt-karte figure, .produkt-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produkt-karte img { transition: transform 1.2s var(--weich), filter .6s; }
.produkt-karte::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 100%); transition: opacity .5s; }
.produkt-karte:hover img { transform: scale(1.07); }
.produkt-karte-text { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; }
.produkt-karte h3 { font-size: 22px; margin-bottom: 6px; }
.produkt-karte p { font-size: 15px; line-height: 1.45; margin: 0; color: rgba(255,255,255,.82); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--weich), opacity .5s; }
.produkt-karte:hover p, .produkt-karte:focus-visible p { max-height: 80px; opacity: 1; }
.karte-pfeil { position: absolute; top: 18px; right: 18px; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.35); transform: rotate(-45deg) scale(.8); opacity: 0; transition: transform .5s var(--federnd), opacity .4s, background .3s; }
.produkt-karte:hover .karte-pfeil { transform: rotate(-45deg) scale(1); opacity: 1; }
.karte-pfeil:hover { background: var(--glut); }

/* ── Ablauf ── */
.ablauf-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.ablauf-skizze { position: sticky; top: calc(var(--kopf-h) + 40px); opacity: .9; }
.ablauf-liste { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.ablauf-schritt { display: grid; grid-template-columns: 56px 1fr 96px; grid-template-rows: auto 1fr; column-gap: 24px; padding: 30px 0; border-top: 1px solid var(--rand); position: relative; }
.ablauf-schritt::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0; background: var(--text); transition: width 1.2s var(--weich) .2s; }
.ablauf-schritt.sichtbar::before { width: 100%; }
.ablauf-nr { grid-row: span 2; font-size: 13px; color: var(--glut); font-weight: 500; padding-top: 8px; }
.ablauf-schritt h3 { font-size: clamp(22px, 2.3vw, 32px); margin-bottom: 10px; }
.ablauf-schritt p { grid-column: 2; margin: 0; max-width: 520px; }
.ablauf-bild { grid-column: 3; grid-row: 1 / span 2; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; }
.ablauf-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); }
.ablauf-schritt:hover .ablauf-bild img { transform: scale(1.12) rotate(2deg); }

/* ── Vollbild-Abschnitte (Warum, CTA, Einblick) ── */
.warum-buehne, .cta-buehne, .einblick-buehne { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; color: #fff; }
.warum-bild, .cta-bild, .einblick-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.warum-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(var(--z, 1.15)); }
.warum-video.laeuft { opacity: 1; }
/* Abschluss-Aufruf: Standbild bleibt, an der Feuerstelle brennt die Flammen-Schleife (Lage in % des Bildes: --fx/--fy Mitte, --fw Breite, --fh = halbe Höhe je Breite).
   Bild und Flammen liegen in einer gemeinsamen Box mit dem Seitenverhältnis des Bildes (--br), die den Rahmen wie object-fit: cover füllt – so bleiben sie bei jedem Zuschnitt deckungsgleich. */
.cta-medien { position: absolute; inset: 0; overflow: hidden; }
.cta-bildbox { position: absolute; left: 50%; top: 50%; min-width: 100%; min-height: 100%; aspect-ratio: var(--br, 16 / 9); transform: translate(-50%, -50%) scale(var(--z, 1.15)); transition: transform .2s linear; }
.cta-bildbox .cta-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
.cta-flammen { position: absolute; left: calc(var(--fx, 50%) - var(--fw, 20%) / 2); top: calc(var(--fy, 50%) - var(--fw, 20%) * var(--fh, .96)); width: var(--fw, 20%); aspect-ratio: 1; object-fit: cover; mix-blend-mode: screen; filter: contrast(1.25) brightness(.95); opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 70%); }
.cta-flammen.laeuft { opacity: 1; }
.warum-buehne::after, .cta-buehne::after, .einblick-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.7) 100%); }
.warum-inhalt, .cta-inhalt, .einblick-inhalt { position: relative; z-index: 1; padding: clamp(28px, 6vw, 80px); max-width: 1180px; }
.warum-inhalt .titel-xl, .cta-inhalt .titel-xl, .einblick-inhalt .titel-xl { font-size: clamp(38px, 6.4vw, 96px); }
.warum-inhalt { margin-inline: auto; text-align: center; }
.warum-inhalt p, .cta-inhalt p, .einblick-inhalt p { font-size: 19px; color: rgba(255,255,255,.9); max-width: 600px; margin-inline: inherit; }
.warum-inhalt p { margin-inline: auto; }
[data-zoom] { overflow: hidden; }
[data-zoom] img { transform: scale(var(--z, 1.15)); transition: transform .2s linear; }

/* ── Kundenstimmen ── */
.stimmen-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.stimmen-slider { position: relative; min-height: 280px; }
.zitat-zeichen { position: absolute; top: -60px; right: 0; font-size: 160px; line-height: 1; color: var(--grau-2); font-weight: 900; }
.stimme { margin: 0; position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s var(--weich); pointer-events: none; }
.stimme.aktiv { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.stimme p { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; }
.stimme footer { color: var(--leise); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.stimme footer b { color: var(--text); font-weight: 500; }
.sterne { color: var(--glut-hell); letter-spacing: .1em; font-size: 13px; }
.stimmen-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.stimmen-fuss .pfeile { margin-left: auto; }
.faq-entwurf summary::after { content: "Entwurf – nur für Sie sichtbar, bitte prüfen"; font-size: 12px; font-weight: 500; color: #a3400f; background: #fff3e8; padding: 4px 10px; border-radius: 99px; margin-left: auto; margin-right: 12px; white-space: nowrap; }

/* ── Laufbänder (Marken, Einblicke) ── */
.marken { padding-block: clamp(40px, 6vw, 72px); border-block: 1px solid var(--rand); }
.laufband { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband-spur { display: flex; width: max-content; animation: laufen var(--dauer, 60s) linear infinite; }
.laufband-spur.gesteuert { animation: none; will-change: transform; }   /* mit JS: Grundtempo + Schub beim Scrollen, Neigung in Scrollrichtung */
.laufband[data-richtung="-1"] .laufband-spur { animation-direction: reverse; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
@keyframes laufen { to { transform: translateX(-50%); } }
.marke-logo { width: 280px; height: 130px; margin-right: 16px; display: grid; place-items: center; flex: none; }
.marke-logo img { width: auto; height: auto; max-width: 260px; max-height: 104px; transition: transform .6s var(--weich); }   /* dauerhaft in Originalfarben */   /* Logodateien sind einheitlich 600×240, Schriftzug darin nach optischer Masse normiert (tools/website_logos.py) */
.marke-logo:hover img { transform: scale(1.05); }   /* ruhig: nur leicht größer, ohne Nachfedern */
.einblicke .kopfzeile { margin-bottom: 36px; }
.laufband-bilder { --dauer: 80s; margin-bottom: 32px; }
.einblick { width: clamp(200px, 22vw, 300px); aspect-ratio: 4/5; margin-right: 14px; border-radius: 18px; overflow: hidden; flex: none; }
.einblick img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); }
.einblick:hover img { transform: scale(1.08); }

/* ── FAQ ── */
.faq-liste { border-top: 1px solid var(--rand); }
.faq-eintrag { border-bottom: 1px solid var(--rand); }
.faq-eintrag summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 4px; cursor: pointer; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.02em; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary i { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rand); transition: background .3s, transform .5s var(--federnd); }
.faq-eintrag summary i::before, .faq-eintrag summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .4s var(--weich); }
.faq-eintrag summary i::after { transform: rotate(90deg); }
.faq-eintrag[open] summary i { background: var(--dunkel); color: #fff; transform: rotate(180deg); }
.faq-eintrag[open] summary i::after { transform: rotate(0); }
.faq-antwort { color: var(--leise); padding: 0 60px 24px 4px; animation: aufklappen .5s var(--weich); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-8px); } }

.faq-mehr { margin-top: 36px; }
.faq-frage { font: inherit; letter-spacing: inherit; margin: 0; }
.faq-gruppe { margin: 0 0 18px; }
.abschnitt-klein { padding-block: clamp(32px, 5vw, 64px); }
.kopfzeile-text-breit { max-width: 640px; }

/* ── Aktuelles ── */
.beitrag-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.beitrag-karte { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.beitrag-karte figure { aspect-ratio: 16/10; margin-bottom: 6px; }
.beitrag-karte img { transition: transform 1s var(--weich); }
.beitrag-karte:hover img { transform: scale(1.05); }
.beitrag-karte time { font-size: 13px; color: var(--leise); }
.beitrag-karte h3 { font-size: 22px; margin: 0; transition: color .3s; }
.beitrag-karte:hover h3 { color: var(--glut); }
.beitrag-karte p { margin: 0; }
.beitrag-karte.entwurf { opacity: .6; }
.beitrag-kurz { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: var(--leise); }
.beitrag-bild { aspect-ratio: 21/9; }
.beitrag-text p, .beitrag-text li { font-size: 17px; color: var(--text); }
.beitrag-text ol { padding-left: 1.3em; }
.beitrag-text h3 { margin: 1.6em 0 .4em; }
.beitrag-grafik { margin: 1.6em 0; border-radius: 16px; overflow: hidden; }
.beitrag-grafik img { display: block; width: 100%; height: auto; }
.beitrag-video { margin-top: 28px; margin-bottom: 8px; }
.beitrag-video video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 16px; background: #1a1a1a; }
.beitrag-video figcaption { margin-top: 10px; font-size: 14px; }
.beitrag-fuss { padding-bottom: 32px; }
.entwurf-hinweis { padding: 10px 16px; border-radius: 12px; background: #fff3e8; color: #a3400f; font-size: 14px; font-weight: 500; }

/* ── Seitenköpfe ── */
.seitenkopf { padding-top: clamp(48px, 8vw, 110px); padding-bottom: clamp(32px, 4vw, 56px); }
.seitenkopf .kopfzeile-inhalt { align-items: flex-end; }
.seitenkopf-bild { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 72px); align-items: center; }   /* Text mittig zum Bild: Einleitung bleibt im sofort sichtbaren Bereich */
.seitenkopf-figur { aspect-ratio: 4/5; max-height: min(640px, 66vh); justify-self: end; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.breitbild { aspect-ratio: 21/9; }

/* ── Produkte ── */
.produkt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); padding-block: clamp(16px, 2vw, 28px); scroll-margin-top: calc(var(--kopf-h) + 24px); }
.produkt-medien { display: flex; flex-direction: column; gap: 24px; }
.produkt-bild { aspect-ratio: 4/3.2; }
/* Hochformat-Fotos mit dem Wichtigen oben (Schornsteinmündung, Focus-Rauchrohr): oben ausrichten, Scroll-Zoom von oben – sonst fehlt das Rohr */
.produkt-bild img[src*="hst-brunner-104"], .produkt-bild img[src*="0d9cb5"] { object-position: 50% 4%; transform-origin: 50% 0; }
.produkt-kurz { padding: 0 8px; }
.produkt-unter { font-size: 17px; font-weight: 500; margin-bottom: 10px; }
.produkt-zaehler { font-size: 34px; color: var(--sehr-leise); letter-spacing: -.03em; margin: 12px 0 0; }
.produkt-zaehler b { color: var(--text); font-weight: 500; }
.karte-grau { background: var(--grau); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 44px); }
.karte-grau h4, .produkt-mehr h4 { font-size: 17px; margin: 22px 0 6px; }
.karte-dunkel { background: var(--dunkel); color: #fff; border-radius: var(--radius); padding: clamp(24px, 3.4vw, 44px); }
.karte-dunkel p { color: rgba(255,255,255,.75); }
.karte-rand { border: 1px solid var(--rand); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 44px); background: var(--bg); }
.haken-liste { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 8px; }
.haken-liste li { position: relative; padding-left: 28px; color: var(--leise); }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%; background: var(--glut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.produkt-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.abverkauf { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 22px 28px; border-radius: var(--radius); background: var(--grau); margin-block: 32px; }
.abverkauf p { margin: 0; font-weight: 500; }
.marken-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.marken-raster li { height: 116px; display: grid; place-items: center; padding: 16px 22px; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--rand); overflow: hidden; transition: border-color .3s, box-shadow .4s, transform .5s var(--federnd); }
.marken-raster li:hover { border-color: transparent; box-shadow: var(--schatten); transform: translateY(-3px); }
.marken-raster img { width: auto; height: auto; max-width: 100%; max-height: 76px; transition: transform .6s var(--weich); }   /* dauerhaft in Originalfarben */
.marken-raster li:hover img { transform: scale(1.05); }
.dunkel .marken-raster li { background: #fff; }

/* ── Service ── */
.schritte-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.schritt-karte { background: var(--grau); border-radius: var(--radius); padding: 30px 28px 34px; position: relative; overflow: hidden; transition: transform .6s var(--weich), background .4s; }
.schritt-karte::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(224,86,31,.18), transparent 70%); opacity: 0; transition: opacity .5s; }
.schritt-karte:hover { transform: translateY(-4px); background: var(--grau-2); }
.schritt-karte:hover::after { opacity: 1; }
.schritt-nr { display: block; font-size: 44px; font-weight: 300; letter-spacing: -.04em; color: var(--sehr-leise); margin-bottom: 28px; line-height: 1; }
.wartung-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.wartung-skizze { grid-column: 1 / -1; max-height: 340px; overflow: hidden; border-radius: var(--radius); display: grid; place-items: center; }
.wartung-skizze img { max-height: 340px; width: auto; }
.logo-369 { width: 140px; margin-bottom: 18px; background: #fff; border-radius: 12px; padding: 10px 14px; }
.ersatzteile-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.ersatzteile-bild { aspect-ratio: 1; background: #fff; border: 1px solid var(--rand); }   /* BRUNNER-Explosionszeichnung: dunkle Linien auf Weiß */
.ersatzteile-bild img { object-fit: contain; }

/* ── Über uns ── */
.reise { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.reise-lead { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; }
.reise-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reise-bilder figure { aspect-ratio: 3/4; }
.reise-bilder figure:first-child { grid-column: span 2; aspect-ratio: 16/10; }
.schritte-3 { grid-template-columns: repeat(3, 1fr); }
.team-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 14px; }
.person figure { aspect-ratio: 4/5; margin-bottom: 16px; }
.person img { transition: transform 1s var(--weich), filter .6s; filter: grayscale(.25); }
.person:hover img { transform: scale(1.05); filter: none; }
.person h3 { font-size: 20px; margin-bottom: 2px; }
.person p { margin-bottom: 8px; }
.person-kontakt { display: grid; gap: 2px; font-size: 14px; }
.person-kontakt a { color: var(--leise); transition: color .3s; width: fit-content; }
.person-kontakt a:hover { color: var(--glut); }

/* ── Kontakt & Formulare ── */
.kontakt-raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(16px, 3vw, 40px); align-items: start; padding-top: 0; }
.kontakt-info { display: grid; gap: 14px; position: sticky; top: calc(var(--kopf-h) + 20px); }
.kontakt-info .titel-s { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--leise); margin: 22px 0 6px; }
.kontakt-info .titel-s:first-child { margin-top: 0; }
.kontakt-info p { margin-bottom: 0; }
.gross-link { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.kontakt-info .knopf { margin-top: 24px; }
.kontakt-bild { aspect-ratio: 16/10; }
.formular { display: grid; gap: 22px; }
.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld { display: grid; gap: 6px; }
.feld-breit { grid-column: 1 / -1; }
.feld > span { font-size: 13px; font-weight: 500; color: var(--leise); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--rand); background: var(--grau);
  font-size: 16px; transition: border-color .3s, background .3s, box-shadow .3s; appearance: none; -webkit-appearance: none;
}
.feld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%236e6b67' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; padding-right: 40px; }
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--text); background: var(--bg); box-shadow: 0 0 0 4px rgba(224,86,31,.12); }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: #d03b3b; }
.feld-dunkel input { background: var(--bg); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--leise); cursor: pointer; }
.haken input { width: 22px; height: 22px; flex: none; accent-color: var(--glut); margin-top: 1px; }
.haken a { text-decoration: underline; text-underline-offset: 3px; }
.haken.fehler span { color: #b3261e; }
.upload-feld { display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--rand); border-radius: var(--radius-s); text-align: center; cursor: pointer; transition: border-color .3s, background .3s; }
.upload-feld:hover, .upload.ziel .upload-feld { border-color: var(--glut); background: rgba(224,86,31,.04); }
.upload-feld svg { width: 30px; height: 30px; fill: var(--glut); margin-bottom: 4px; }
.upload-feld span { font-size: 13px; color: var(--leise); }
.upload-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.upload-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--grau); font-size: 14px; }
.upload-liste .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-liste .zustand { font-size: 12px; color: var(--leise); }
.upload-liste .ok { color: #0a7d32; }
.upload-liste .fehler { color: #b3261e; }
.upload-liste button { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--leise); }
.upload-balken { width: 60px; height: 4px; border-radius: 4px; background: var(--grau-2); overflow: hidden; }
.upload-balken i { display: block; height: 100%; background: var(--glut); width: 0; transition: width .2s; }
.hinweis-box { padding: 18px 20px; border-radius: var(--radius-s); background: var(--grau); font-size: 14px; }
.hinweis-box p { margin-bottom: 8px; }
.hinweis-box .haken-liste { margin: 0; }
.formular-meldung { margin: 0; font-weight: 500; min-height: 1.4em; }
.formular-meldung.ok { color: #0a7d32; }
.formular-meldung.fehler { color: #b3261e; }
.formular.gesendet .feld-raster, .formular.gesendet .upload, .formular.gesendet .hinweis-box, .formular.gesendet .haken, .formular.gesendet button { display: none; }
.formular.gesendet .formular-meldung { font-size: 22px; padding: 32px 0; animation: aufklappen .6s var(--weich); }
.knopf.laedt { pointer-events: none; opacity: .7; }
.knopf.laedt span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: drehen .7s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* ── Anleitungen ── */
.download-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.download-karte { display: flex; flex-direction: column; height: 100%; padding: 30px; border-radius: var(--radius); background: var(--grau); transition: background .4s, transform .6s var(--weich), color .4s; }
.download-karte:hover { background: var(--dunkel); color: #fff; transform: translateY(-4px); }
.download-karte:hover .leise { color: rgba(255,255,255,.7); }
.download-symbol svg { width: 34px; height: 34px; fill: var(--glut); margin-bottom: 28px; }
.download-mehr { margin-top: auto; padding-top: 12px; font-weight: 500; font-size: 14px; }
.download-mehr i { font-style: normal; display: inline-block; transition: transform .4s var(--federnd); }
.download-karte:hover .download-mehr i { transform: translate(4px, -2px); }
/* Service-Portal-Kacheln (Service-Seite): Strich-Symbole statt gefüllter Icons */
.portal-raster { grid-template-columns: repeat(4, 1fr); }
.portal-symbol svg { fill: none; stroke: var(--glut); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-raster .download-karte { padding: 26px; }
@media (max-width: 1000px) { .portal-raster { grid-template-columns: repeat(2, 1fr); } }
/* Instagram-Beiträge im Laufband (echt oder Beispiel) */
.einblick-beitrag { display: block; position: relative; color: #fff; }
.einblick-beitrag figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 16px 16px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); font-size: 14px; line-height: 1.4; display: grid; gap: 4px; }
.einblick-beitrag figcaption small { font-size: 12px; opacity: .75; }
.einblick-beitrag::before { content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.9); border-radius: 6px; box-shadow: inset 0 0 0 3.5px transparent; z-index: 1; }
.einblick-beitrag::after { content: ""; position: absolute; top: 17px; right: 17px; width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; z-index: 1; }
/* WhatsApp-Knopf unten rechts */
.wa-schwebend { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 55; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 14px; border-radius: 99px; background: #0f8043; color: #fff; font-weight: 500; font-size: 15px; box-shadow: 0 12px 30px -10px rgba(15,128,67,.7), 0 1px 0 rgba(255,255,255,.3) inset; transition: transform .4s var(--federnd), box-shadow .4s; }
.wa-schwebend svg { width: 24px; height: 24px; fill: #fff; }
.wa-schwebend:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 36px -12px rgba(15,128,67,.8); }
@media (max-width: 760px) { .wa-schwebend span { display: none; } .wa-schwebend { padding: 0; width: 50px; justify-content: center; bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px)); right: max(14px, env(safe-area-inset-right)); } }
/* Fester WhatsApp-Knopf darf am Seitenende nichts verdecken: Platz unter der Fußzeile freihalten */
body:has(.wa-schwebend) .fuss { padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 76px); }
/* Solange der Cookie-Hinweis offen ist, liegt der WhatsApp-Knopf sonst über „Alle akzeptieren“ */
body:has(.einwilligung:not([hidden])) .wa-schwebend { opacity: 0; visibility: hidden; pointer-events: none; }
.stand { color: var(--sehr-leise); }
/* Terminanfrage */
.termin-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px, 3vw, 40px); align-items: start; }
.termin-wahl { padding: clamp(22px, 3vw, 36px); }
.termin-schritt { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.termin-schritt h2 { margin: 0; }
.termin-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--dunkel); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 500; flex: none; }
.kalender { margin-bottom: 30px; }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kalender-kopf b { font-size: 18px; font-weight: 500; }
.kalender-wochentage, .kalender-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kalender-wochentage span { text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding: 4px 0; }
.kal-tag { position: relative; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--rand); background: #fff; font: inherit; font-size: 15px; cursor: pointer; transition: background .25s, transform .3s var(--federnd), border-color .25s; }
.kal-tag small { position: absolute; right: 5px; bottom: 4px; font-size: 10px; color: var(--glut); font-weight: 500; }
.kal-tag.frei { border-color: #cfe8d6; background: #f1faf3; }
.kal-tag.frei:hover { transform: scale(1.06); border-color: var(--glut); }
.kal-tag.aktiv { background: var(--dunkel); color: #fff; border-color: var(--dunkel); } .kal-tag.aktiv small { color: var(--glut-hell); }
.kal-tag:disabled { cursor: default; color: var(--sehr-leise); background: var(--grau); border-color: transparent; }
.kal-tag.voll { text-decoration: line-through; }
.kal-tag.kurz { background: #fff7f2; border-color: #f3cdb8; color: var(--leise); }   /* innerhalb der Bearbeitungszeit: nur telefonisch */
.kal-tag.kurz small { color: #a3400f; font-size: 11px; }
.kal-tag.kurz:hover { border-color: var(--glut); transform: scale(1.06); }
.termin-kurzfristig { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: #fff7f2; border: 1px solid #f3cdb8; color: #5a2d12; font-size: 15px; line-height: 1.5; animation: seite-rein .4s var(--weich); }
.termin-kurzfristig p { margin: 0 0 12px; }
.termin-kurzfristig[hidden] { display: none; }
.zeit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zeit-chip { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--rand); background: #fff; font: inherit; font-size: 15px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--federnd); }
.zeit-chip:hover { border-color: var(--glut); transform: translateY(-1px); }
.zeit-chip[aria-pressed="true"] { background: var(--glut); border-color: var(--glut); color: #fff; }
.termin-auswahl { padding: 12px 16px; border-radius: 12px; background: var(--grau); margin: 0 0 18px; font-size: 15px; }
.termin-auswahl.fertig { background: #f1faf3; color: #1f5a31; }
@media (min-width: 1001px) { .termin-wahl { position: sticky; top: calc(var(--kopf-h) + 24px); } }   /* Kalender bleibt beim Ausfüllen der langen Checkliste sichtbar */
/* Checkliste für zu Hause (Terminanfrage, Schritt 4) */
.cl-start { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rand); }
.cl-einleitung { margin: -6px 0 18px; }
.cl-block { padding: 18px 18px 6px; border-radius: 16px; background: var(--grau); margin-bottom: 14px; }
.cl-titel { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--glut); margin: 0 0 12px; }
.cl-raster { margin-bottom: 8px; }
.cl-block .feld input, .cl-block .feld textarea { background: #fff; }
.cl-masse { display: flex; align-items: center; gap: 8px; } .cl-masse input { min-width: 0; flex: 1; } .cl-masse i { font-style: normal; color: var(--leise); }
.cl-haken { grid-column: 1 / -1; margin: 0; }
.cl-frage { border: 0; padding: 0; margin: 0 0 14px; }
.cl-frage legend { font-size: 15px; font-weight: 500; margin-bottom: 8px; padding: 0; }
.cl-optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-option { position: relative; cursor: pointer; }
.cl-option input { position: absolute; opacity: 0; pointer-events: none; }
.cl-option span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 99px; border: 1px solid var(--rand); background: #fff; font-size: 15px; transition: background .2s, border-color .2s, color .2s; }
.cl-option input[type=checkbox] + span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--sehr-leise); flex: none; }
.cl-option input:checked + span { background: var(--dunkel); border-color: var(--dunkel); color: #fff; }
.cl-option input[type=checkbox]:checked + span::before { border-color: #fff; background: var(--glut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3 7 11l5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.cl-option input:focus-visible + span { outline: 2px solid var(--glut); outline-offset: 2px; }
.cl-option:hover span { border-color: var(--glut); }
.cl-frage.fehler legend { color: #c0392b; } .cl-frage.fehler .cl-option span { border-color: #e7a59c; }
.cl-block .upload { margin-bottom: 14px; }
.cl-asbest { margin: 4px 0 12px; }
.termin-infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.termin-annahme { padding: 16px 20px; border-radius: 14px; margin-bottom: 24px; background: #f1faf3; color: #1f5a31; }
.termin-annahme.fehler { background: #fff3e8; color: #a3400f; }
.kontakt-termin p { color: rgba(255,255,255,.8); }
@media (max-width: 1000px) { .termin-raster { grid-template-columns: 1fr; } .termin-infos { grid-template-columns: 1fr; } }
/* Cookie-Hinweis – erscheint nur, wenn unter Verwaltung → Schnittstellen Google/Meta eingetragen sind */
.einwilligung { position: fixed; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 60; max-width: 600px; margin-inline: auto; padding: 20px 22px; border-radius: 20px; color: var(--text);
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.05); font-size: 15px; line-height: 1.5; animation: seite-rein .5s var(--weich); }
.einwilligung p { margin: 0 0 14px; } .einwilligung a { text-decoration: underline; }
.einwilligung-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.einwilligung .knopf { min-height: 44px; font-size: 15px; padding-inline: 18px; }

/* ── Rechtstexte ── */
.rechtstext { padding-top: 0; }
.rechtstext h2 { font-size: 22px; margin: 2em 0 .6em; }
.rechtstext p, .rechtstext li { color: var(--leise); }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; }   /* Unterstrich-Linien und E-Mail-Adressen im Widerrufsformular am Handy */
.seite-agb .seitenkopf .titel-xl, .seite-widerruf .seitenkopf .titel-xl, .seite-versand-zahlung .seitenkopf .titel-xl, .seite-datenschutz .seitenkopf .titel-xl { font-size: clamp(30px, 8.4vw, 96px); hyphens: auto; overflow-wrap: break-word; }
.rechtstext ul { padding-left: 20px; }
.nicht-gefunden { min-height: 50vh; }

/* ── Fußzeile ── */
.fuss { margin-top: clamp(24px, 4vw, 48px); padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow: hidden; }
.fuss-wort { font-size: clamp(64px, 19vw, 300px); font-weight: 900; letter-spacing: -.05em; line-height: .78; text-align: center; color: var(--grau-2); user-select: none; white-space: nowrap; margin-bottom: clamp(16px, 3vw, 40px); }
.fuss-wort .buchstabe { display: inline-block; transform: translateY(60%); opacity: 0; transition: transform 1.1s var(--weich), opacity .8s; transition-delay: calc(var(--b) * .05s); }
.fuss-wort.sichtbar .buchstabe { transform: none; opacity: 1; }
.fuss-raster { display: grid; grid-template-columns: .9fr 1.2fr 1fr 1.6fr; gap: 32px; padding-block: 36px; border-top: 1px solid var(--rand); font-size: 15.5px; }
.fuss-titel { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; }
.fuss-spalte p, .fuss-spalte a { color: var(--leise); }
.fuss-spalte a:hover { color: var(--glut); }
.newsletter-titel { font-size: clamp(22px, 2.2vw, 30px); text-transform: none; letter-spacing: -.025em; margin-bottom: 8px; }
.newsletter-zeile { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; }
.newsletter-zeile .feld { flex: 1; }
.newsletter .klein { margin-top: 8px; }
.newsletter .klein a { text-decoration: underline; }
.newsletter .formular-meldung { margin-top: 8px; font-size: 14px; }
.fuss-unten { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--rand); color: var(--leise); }
.fuss-unten p { margin: 0; }
.sozial { display: flex; gap: 8px; }
.sozial a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--grau); transition: background .3s, transform .4s var(--federnd); }
.sozial a:hover { background: var(--dunkel); transform: translateY(-3px); }
.sozial a:hover svg { fill: #fff; }
.sozial svg { width: 18px; height: 18px; fill: var(--text); transition: fill .3s; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.fuss-links a { white-space: nowrap; }
@media (max-width: 760px) { .fuss-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; width: 100%; font-size: 14px; } .fuss-links a { padding: 4px 0; } }   /* Handy: alle Links gleichmäßig in zwei Spalten, gut antippbar */
.fuss-links a:hover { color: var(--text); }

/* ── Focus (dunkel) ── */
.kopf-focus { grid-template-columns: 1fr auto 1fr; padding-left: 22px; }
.zurueck { font-size: 14px; color: rgba(255,255,255,.75); transition: color .3s; }
.zurueck:hover { color: #fff; }
.marke-focus { display: flex; align-items: center; gap: 12px; }
.marke-focus .focus-logo { height: 30px; width: auto; filter: brightness(0) invert(1); }
.marke-focus .by { font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.marke-focus img:last-child { height: 30px; width: auto; }
.kopf-focus .knopf { justify-self: end; }
.kopf-focus-rechts { justify-self: end; display: flex; align-items: center; gap: 10px; }   /* Sprachwahl + Beratung zusammen rechts in der Leiste (vorher rutschte „Beratung“ in eine 2. Zeile) */
.focus-hero { position: relative; height: 100svh; min-height: 560px; display: grid; place-items: center; overflow: hidden; color: #fff; }
.focus-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.focus-hero-schleier { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.7)); }
.focus-etikett { position: absolute; top: calc(var(--kopf-h) + 32px); left: 4%; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); }
.focus-titel { position: relative; width: 92%; margin: 0; font-size: clamp(40px, 8vw, 128px); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; }
.runter { position: absolute; bottom: 28px; left: 50%; width: 48px; height: 48px; margin-left: -24px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; animation: wippen 2.2s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateY(8px); } }
.focus-intro { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.focus-person figure { aspect-ratio: 3/4; margin: 0 0 14px; }
.focus-lead { font-size: clamp(24px, 3vw, 40px); line-height: 1.28; letter-spacing: -.025em; }
.focus-akzent { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; color: var(--leise); }
.focus-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.6vw, 20px); align-items: start; padding-top: 0; }
.focus-g { aspect-ratio: 3/2; margin: 0; }
.focus-satz { grid-column: 1 / -1; max-width: 46ch; margin: clamp(14px, 3vw, 40px) 0; padding: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.4; color: var(--text); }
.focus-satz-gross { max-width: none; text-align: center; font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -.03em; padding-top: 24px; }
.focus-punkte ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rand); }
.focus-punkte li { padding: 28px 24px 28px 0; display: grid; gap: 10px; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; }
.focus-punkte li span { font-size: 13px; color: var(--glut); }
.focus-punkte b { font-weight: 500; }
.focus-kollektion { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.focus-kollektion-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.focus-kollektion-bilder figure { aspect-ratio: 2/3; }
.focus-kollektion-bilder figure:nth-child(2) { transform: translateY(-36px); }
.focus-partner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.focus-partner figure { aspect-ratio: 4/3; }
.focus-lead-klein { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; letter-spacing: -.02em; }
.reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.reiter-knopf { height: 44px; padding: 0 20px; border-radius: 99px; border: 1px solid var(--rand); background: transparent; cursor: pointer; font-weight: 500; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; transition: background .3s, color .3s, border-color .3s; }
.reiter-knopf small { font-size: 11px; color: var(--sehr-leise); }
.reiter-knopf[aria-selected="true"] { background: #fff; color: #000; border-color: #fff; }
.reiter-knopf:hover { border-color: var(--leise); }
.modell-gruppe:not([hidden]) { animation: aufklappen .6s var(--weich); }
.modell-karte { display: flex; flex-direction: column; }
.modell-karte figure { aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: var(--grau); margin-bottom: 14px; }
.modell-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); }
.modell-karte:hover img { transform: scale(1.06); }
.modell-karte h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.modell-karte p { font-size: 14px; color: var(--leise); margin-bottom: 8px; }
.modell-link { margin-top: auto; font-size: 14px; font-weight: 500; color: var(--glut-hell); }
.modell-link span { display: inline-block; transition: transform .4s var(--federnd); }
.modell-link:hover span { transform: translateX(4px); }
.dunkel .karussell-fortschritt span { background: #fff; }
.dunkel .marke-logo img, .dunkel .marken-raster img { mix-blend-mode: normal; }
.dunkel .fuss-wort { color: #1a1918; }

/* ── Animationen beim Scrollen (nur mit JavaScript aktiv) ── */
.js [data-erscheinen] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--weich), transform 1.1s var(--weich); transition-delay: var(--v, 0s); }
.js [data-erscheinen].sichtbar { opacity: 1; transform: none; }
.js [data-woerter] .wort-maske { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-woerter] .wort { display: inline-block; transform: translateY(105%); transition: transform 1s var(--weich); transition-delay: calc(var(--w) * .06s + var(--v, 0s)); }
.js [data-woerter].sichtbar .wort { transform: none; }
[data-parallax] { will-change: transform; }

/* ── Ofen-Finder ── */
.finder { padding-bottom: clamp(40px, 6vw, 80px); }
.finder-schritte { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; counter-reset: f; }
.finder-schritte li { counter-increment: f; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 99px; background: var(--grau); font-size: 14px; font-weight: 500; color: var(--leise); transition: background .3s, color .3s; }
.finder-schritte li::before { content: counter(f, decimal-leading-zero); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; color: var(--sehr-leise); transition: background .3s, color .3s; }
.finder-schritte li.an { background: var(--dunkel); color: #fff; }
.finder-schritte li.an::before { background: var(--glut); color: #fff; }
.finder-schritte li.fertig::before { background: var(--glut); color: #fff; content: "✓"; }
.finder-buehne { position: relative; border: 1px solid var(--rand); border-radius: var(--radius); padding: clamp(22px, 3.4vw, 44px); background: var(--bg); overflow: hidden; }
.finder-schritt { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.finder-schritt.an { display: block; animation: finder-rein .55s var(--weich); }
@keyframes finder-rein { from { opacity: 0; transform: translateX(28px); } }
.finder-schritt legend { margin-bottom: 8px; padding: 0; }
.finder-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.finder-wahl-klein { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.finder-karte, .finder-chip { position: relative; display: block; cursor: pointer; border-radius: 18px; border: 1.5px solid var(--rand); background: var(--grau); transition: border-color .3s, transform .4s var(--federnd), box-shadow .4s, background .3s; }
.finder-karte input, .finder-chip input { position: absolute; opacity: 0; pointer-events: none; }
.finder-karte { padding: 10px 10px 18px; overflow: hidden; }
.finder-karte figure { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.finder-karte img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); }
.finder-karte:hover img { transform: scale(1.06); }
.finder-karte b, .finder-chip b { display: block; font-weight: 500; font-size: 17px; padding: 0 6px; }
.finder-karte span, .finder-chip span { display: block; font-size: 13px; color: var(--leise); padding: 2px 6px 0; }
.finder-chip { padding: 16px 16px 16px 50px; }
.finder-chip::before { content: ""; position: absolute; left: 16px; top: 20px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sehr-leise); background: #fff; transition: background .25s, border-color .25s, box-shadow .25s; }
.finder-chip:has(input[type=checkbox])::before { border-radius: 7px; }
.finder-karte:hover, .finder-chip:hover { border-color: var(--text); transform: translateY(-2px); box-shadow: var(--schatten); }
.finder-karte:has(:checked), .finder-chip:has(:checked) { border-color: var(--glut); background: #fff7f2; box-shadow: 0 0 0 4px rgba(224,86,31,.12); }
.finder-chip:has(:checked)::before { background: var(--glut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border-color: var(--glut); }
.finder-karte:has(:checked)::after { content: "✓"; position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--glut); color: #fff; display: grid; place-items: center; font-size: 15px; animation: aufklappen .3s var(--federnd); }
.finder-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rand); }
.finder-leiste .knopf:disabled { opacity: .4; pointer-events: none; }
.finder-treffer { flex: 1; text-align: center; font-size: 14px; }
.finder-ergebnis .kopfzeile { margin-top: 12px; }
.finder-sortierung select { margin-left: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rand); background: var(--bg); font: inherit; font-size: 14px; }
.finder-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.finder-treffer-karte { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); border: 1px solid var(--rand); overflow: hidden; background: var(--bg); opacity: 0; transform: translateY(20px); transition: opacity .6s var(--weich), transform .7s var(--weich), box-shadow .4s; transition-delay: var(--v, 0s); }
.finder-treffer-karte.sichtbar { opacity: 1; transform: none; }
.finder-treffer-karte:hover { box-shadow: var(--schatten); }
.finder-bild { position: relative; display: block; aspect-ratio: 1; background: #fff; padding: 16px; }
.finder-bild { overflow: hidden; }
.finder-bild img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; transition: transform .8s var(--weich); }   /* fest im Feld (Safari, siehe .shop-zub-bild) */
.finder-treffer-karte:hover .finder-bild img { transform: scale(1.05); }
.finder-band { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 99px; background: var(--glut); color: #fff; font-size: 12px; font-weight: 500; }
.finder-text { padding: 16px 18px 18px; display: grid; gap: 4px; border-top: 1px solid var(--rand); }
.finder-text h3 { font-size: 19px; margin: 0; }
.finder-text p { margin: 0; }
.finder-preis { font-size: 18px; font-weight: 500; margin-top: 4px; }
.finder-preis-anfrage { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: .02em; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; opacity: .75; }
.finder-links { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; font-weight: 500; }
.finder-links a:first-child { color: var(--leise); }
.finder-links a:hover { color: var(--glut); }
.finder-hinweis { margin-top: 40px; }

/* Ofen-Finder-Teaser auf der Startseite (dunkel, mit Glutfunken) */
.finder-teaser-karte { position: relative; overflow: hidden; border-radius: var(--radius); background: radial-gradient(120% 90% at 85% 110%, #4a2410 0%, #1a1412 45%, #0f0e0d 100%); color: #fff; padding: clamp(40px, 7vw, 110px) clamp(24px, 5vw, 80px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: end; }
.finder-teaser-inhalt { position: relative; z-index: 1; max-width: 680px; }
.finder-teaser-inhalt p { color: rgba(255,255,255,.75); font-size: 17px; max-width: 520px; }
.finder-teaser-inhalt .titel-xl { font-size: clamp(38px, 6vw, 92px); }
.etikett-hell { color: rgba(255,255,255,.7); }
.finder-teaser-schritte { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-self: end; width: min(100%, 300px); }
.finder-teaser-schritte li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); font-weight: 500; transform: translateX(var(--x, 0)); }
.finder-teaser-schritte li:nth-child(2) { --x: 14px; } .finder-teaser-schritte li:nth-child(3) { --x: 28px; } .finder-teaser-schritte li:nth-child(4) { --x: 42px; }
.finder-teaser-schritte b { font-size: 12px; color: var(--glut-hell); font-weight: 500; }
.glut { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ── Projekte ── */
.projekt-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
.projekt-raster .projekt:nth-child(3n+2) { margin-top: 48px; }
.projekt a { display: block; }
.projekt-bild { aspect-ratio: 4/5; margin-bottom: 14px; }
.projekt-bild img { transition: transform 1s var(--weich); }
.projekt:hover .projekt-bild img { transform: scale(1.05); }
.projekt-text h2, .projekt-text h3 { margin: 4px 0 6px; }
.projekt-text p:last-child { margin: 0; }
.projekt-meta { margin-bottom: 0; }
.projekt.weg { display: none; }
.schritte-4 { grid-template-columns: repeat(4, 1fr); }
.region-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.region-orte { font-size: 17px; line-height: 1.6; }
.region-raster .karte-grau p { margin-bottom: .6em; }
.region-raster .karte-grau .titel-s { margin-top: 18px; }
.region-raster .karte-grau .titel-s:first-child { margin-top: 0; }
.region-raster .knopf-reihe { margin-top: 20px; }

/* ── Modellseiten (/oefen) ── */
.brotkrumen { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--leise); margin-bottom: 28px; }
.brotkrumen a:hover { color: var(--glut); }
.brotkrumen span:last-child { color: var(--text); }
.modell-marken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.modell-marken a { display: grid; gap: 6px; height: 100%; padding: 20px 22px; border-radius: var(--radius-s); border: 1px solid var(--rand); background: var(--bg); transition: border-color .3s, box-shadow .4s, transform .5s var(--federnd); }
.modell-marken a:hover { border-color: transparent; box-shadow: var(--schatten); transform: translateY(-3px); }
.modell-marken-logo { height: 54px; display: flex; align-items: center; margin-bottom: 6px; }
.modell-marken-logo img { max-height: 54px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.modell-marken b { font-size: 19px; font-weight: 500; }
.modell-marke-logo { max-height: 70px; max-width: 200px; width: auto; height: auto; margin-bottom: 22px; }
.finder-text h3 a:hover { color: var(--glut); }
.modell-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.modell-bild { margin: 0; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid var(--rand); background: #fff; padding: clamp(16px, 3vw, 40px); position: sticky; top: calc(var(--kopf-h, 80px) + 20px); }
.modell-bild { overflow: hidden; }
.modell-bild > img { position: absolute; inset: clamp(16px, 3vw, 40px); width: calc(100% - 2 * clamp(16px, 3vw, 40px)); height: calc(100% - 2 * clamp(16px, 3vw, 40px)); object-fit: contain; }   /* fest im Feld (Safari) */
.modell-bildspalte { position: sticky; top: calc(var(--kopf-h, 80px) + 20px); align-self: start; }
.modell-bildspalte .modell-bild { position: relative; top: auto; }
.modell-wechsler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.modell-wechsler .pille { cursor: pointer; font: inherit; font-size: 14px; height: auto; min-height: 38px; padding-block: 7px; line-height: 1.35; border-radius: 19px; }   /* lange Ausführungsnamen brechen auf dem Handy um, ohne sich zu überlappen */
.modell-wechsler .pille[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.modell-info .titel-l { margin: 0 0 18px; }
.modell-text { font-size: 18px; line-height: 1.55; margin: 0 0 26px; }
.modell-fakten, .modell-liste { margin: 0 0 28px; display: grid; border-top: 1px solid var(--rand); }
.modell-fakten div, .modell-liste div { display: grid; grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rand); }
.modell-fakten dt, .modell-liste dt { color: var(--leise); }
.modell-fakten dd, .modell-liste dd { margin: 0; font-weight: 500; overflow-wrap: break-word; hyphens: auto; }   /* lange Wörter wie „Leistungserklärung/Datenblatt“ sprengten am Handy die Breite */
.modell-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius-s); margin-bottom: 28px; }
.modell-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
.modell-tabelle th, .modell-tabelle td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.modell-tabelle thead th { background: var(--grau); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--leise); white-space: nowrap; }
.modell-tabelle tbody th { font-weight: 500; }
.modell-tabelle td { white-space: nowrap; }
.modell-tabelle tbody tr:last-child > * { border-bottom: 0; }
.modell-weitere { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); margin-bottom: 12px; }
.modell-optionen { margin: 0; padding-left: 18px; columns: 1; line-height: 1.7; }
.modell-preishinweis { margin-top: 8px; max-width: 760px; }
/* Ofen-Finder: Gebäude-Frage und Neubau-Empfehlung */
.finder-unterfrage { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin: 26px 0 -6px; }
.finder-tipp { margin: 18px 0 0; padding: 16px 20px; border-radius: var(--radius-s); background: #fff7f2; border: 1px solid rgba(224,86,31,.25); line-height: 1.55; animation: finder-rein .45s var(--weich); }
.finder-chip.empfohlen { border-color: rgba(224,86,31,.45); }
.finder-chip.empfohlen::after { content: "Empfohlen"; position: absolute; top: -10px; right: 14px; padding: 2px 10px; border-radius: 99px; background: var(--glut); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.finder-marken a { text-decoration: underline; text-decoration-color: var(--rand); text-underline-offset: 3px; }
.finder-marken a:hover { color: var(--glut); }
/* Zeitleiste „Unsere Geschichte“ (Über uns) */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.zeitleiste::before { display: none; }
/* Linie je Eintrag statt einer durchgehenden Linie: bleibt auch bei umgebrochenen Zeilen (2024, Heute) sichtbar */
.zeitleiste li::after { content: ""; position: absolute; top: 9px; left: 16px; right: -16px; height: 2px; background: linear-gradient(90deg, var(--glut), var(--rand)); border-radius: 2px; }
.zeitleiste li:last-child::after, .zeitleiste li:nth-child(5n)::after { right: 0; }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste li { position: relative; padding-top: 34px; }
.zeitleiste li::before { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--glut); }
.zeitleiste-jahr { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.zeitleiste p { margin: 0; color: var(--leise); }
@media (max-width: 1100px) {
  .zeitleiste { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .zeitleiste li:nth-child(5n)::after { right: -16px; }
  .zeitleiste li:nth-child(3n)::after { right: 0; }
  .zeitleiste li:last-child::after { display: none; }
}
@media (max-width: 760px) {
  .modell-kopf, .modell-weitere { grid-template-columns: 1fr; }
  .modell-bild { position: relative; top: auto; aspect-ratio: 4/3; }
  .modell-bildspalte { position: static; }
  .modell-text { font-size: 16px; }
  .modell-tabelle { font-size: 14px; min-width: 760px; }
  .modell-tabelle tbody th { min-width: 210px; }
  .modell-fakten div, .modell-liste div { grid-template-columns: 42% minmax(0, 1fr); gap: 12px; }
  .zeitleiste { grid-template-columns: 1fr; gap: 0; padding-left: 28px; }
  .zeitleiste::before { display: block; left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--glut), var(--rand)); }
  .zeitleiste li { padding: 0 0 24px; }
  .zeitleiste li::before { left: -28px; }
  .zeitleiste li::after { display: none !important; }
}

/* ── Effekte 2.0 ── */
/* Seitenwechsel: Inhalt gleitet weich aus und ein */
/* (keine Transformation auf <body> – sonst scrollt die fixierte Glasleiste mit) */
.js main, .js .fuss { animation: seite-rein .7s var(--weich); }
@keyframes seite-rein { from { opacity: 0; transform: translateY(12px); } }
body.verlassen main, body.verlassen .fuss { opacity: 0; transform: translateY(-10px); transition: opacity .32s ease, transform .32s var(--weich); pointer-events: none; }
body.verlassen .kopf { opacity: 0; transition: opacity .3s ease; }
/* Scroll-Fortschritt in der Glasleiste */
.kopf .fortschritt { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--glut), var(--glut-hell)); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; opacity: .9; pointer-events: none; }
/* Bild-Enthüllung von unten (clip-path) */
.js [data-reveal] { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.1s var(--weich); }
.js [data-reveal] img { transform: scale(1.18); transition: transform 1.4s var(--weich); }
.js [data-reveal].sichtbar { clip-path: inset(0 0 0 0 round var(--radius)); }
.js [data-reveal].sichtbar img { transform: scale(1); }
/* 3D-Neigung von Karten zur Maus */
[data-neigen] { transform-style: preserve-3d; transition: transform .5s var(--weich); will-change: transform; }
[data-neigen].aktiv { transition: transform .08s linear; }
/* Wachsen beim Scrollen: große Flächen und Abschnittstitel kommen etwas kleiner herein und wachsen auf volle Größe (JS setzt --s) */
.js [data-wachsen] { transform: scale(var(--s, 1)); transform-origin: var(--ursprung, 50% 50%); will-change: transform; }
.js h2[data-wachsen] { --ursprung: 0 100%; }
.js .kopfzeile-mitte h2[data-wachsen] { --ursprung: 50% 100%; }
/* Lichtschein folgt der Maus auf dunklen Flächen */
.lichtschein { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,160,80,.16), transparent 60%); opacity: 0; transition: opacity .6s; mix-blend-mode: screen; }
.warum-buehne:hover .lichtschein, .cta-buehne:hover .lichtschein, .einblick-buehne:hover .lichtschein, .finder-teaser-karte:hover .lichtschein { opacity: 1; }
/* Produktseite: Karten stapeln sich beim Scrollen */
@media (min-width: 901px) {
  .produkt-liste .produkt { position: sticky; top: calc(var(--kopf-h) + 8px); background: var(--bg); border-radius: var(--radius); transform-origin: 50% 0; transition: transform .2s linear, filter .2s linear; }
}
/* Hero: leichte Mausbewegung */
.hero-titel, .hero-mini-anker { will-change: transform; }

/* ── Tablet ── */
@media (max-width: 1100px) {
  .kopf:not(.kopf-focus) { grid-template-columns: 1fr auto 1fr; }   /* Logo mittig, Menüknopf rechts */
  .kopf-focus { grid-template-columns: auto 1fr auto; }
  .nav { display: none; }
  .marke { justify-self: start; }
  .kopf:not(.kopf-focus) .marke { grid-column: 2; justify-self: center; }
  .kopf:not(.kopf-focus) .menue-knopf { grid-column: 3; }
  .menue-knopf {
    display: grid; place-items: center; justify-self: end; position: relative; z-index: 60;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rand); background: var(--bg); cursor: pointer;
  }
  .menue-knopf span { position: absolute; left: 14px; right: 14px; height: 1.8px; border-radius: 2px; background: var(--text); transition: transform .5s var(--weich), top .3s; }
  .menue-knopf span:first-child { top: 19px; }
  .menue-knopf span:last-child { top: 27px; }
  .menue-knopf[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }
  .kopf.menue-offen { background: var(--bg); box-shadow: none; transform: none; }
  .schritte-raster, .wartung-raster, .download-raster, .schritte-3, .schritte-4, .projekt-raster, .finder-raster { grid-template-columns: repeat(2, 1fr); }
  .projekt-raster .projekt:nth-child(3n+2) { margin-top: 0; }
  .team-raster { grid-template-columns: repeat(3, 1fr); }
  .fuss-raster { grid-template-columns: repeat(3, 1fr); }
  .newsletter { grid-column: 1 / -1; }
  .kopf-focus { grid-template-columns: auto 1fr auto; gap: 10px; }   /* Zurück | Logo | Sprache + Beratung – alles in einer Zeile */
}
@media (max-width: 760px) { .kopf-focus .knopf { display: none; } .kopf-focus .marke-focus { justify-self: end; } }

/* ── Handy ── */
@media (max-width: 760px) {
  :root { --kopf-h: 66px; --radius: 20px; }
  body { font-size: 16px; }
  .marke img { height: 36px; }
  .hero { height: auto; min-height: 0; padding-inline: 8px; }
  .hero-buehne { height: calc(100svh - 16px); min-height: 560px; border-radius: 24px; }
  .hero-titel { inset: 7% 6% auto; font-size: clamp(44px, 13.5vw, 72px); text-align: left; }
  .hero-zeile-2 { text-align: left; }
  .hero-unten { left: 6%; right: 6%; bottom: 28px; max-width: none; }
  .hero-text { font-size: 16px; }
  .hero-knoepfe { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-knoepfe .knopf { width: 100%; }
  .scroll-hinweis { display: none; }
  .einleitung { grid-template-columns: 1fr; }
  .einleitung > * { grid-column: auto; grid-row: auto; }
  .einleitung-bild-2 { aspect-ratio: 4/5; min-height: 0; }
  .ablauf-raster, .stimmen-raster, .seitenkopf-bild, .produkt, .ersatzteile-raster, .reise, .kontakt-raster, .focus-intro, .focus-kollektion, .focus-partner { grid-template-columns: 1fr; }
  .ablauf-skizze, .stimmen-skizze { display: none; }
  .ablauf-schritt { grid-template-columns: 36px 1fr 64px; column-gap: 14px; padding: 22px 0; }
  .ablauf-bild { width: 64px; height: 64px; border-radius: 12px; }
  .karussell-spur { grid-auto-columns: 78%; margin-inline: calc(-1 * var(--rand-abstand)); padding-inline: var(--rand-abstand); scroll-padding-inline: var(--rand-abstand); }
  .karussell-steuerung { flex-wrap: wrap; gap: 16px; }
  .karussell-steuerung .knopf { order: 3; width: 100%; }
  .produkt-karte p { max-height: 80px; opacity: 1; }
  .karte-pfeil { opacity: 1; transform: rotate(-45deg) scale(.9); }
  .schritte-raster, .wartung-raster, .download-raster, .schritte-3 { grid-template-columns: 1fr; }
  .team-raster { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .beitrag-raster, .projekt-raster, .finder-raster, .region-raster, .schritte-4 { grid-template-columns: 1fr; }
  .projekt-raster .projekt:nth-child(3n+2) { margin-top: 0; }
  .finder-wahl { grid-template-columns: 1fr 1fr; gap: 8px; }
  .finder-karte b { font-size: 15px; }
  .finder-karte span { font-size: 12px; }
  .finder-teaser-karte { grid-template-columns: 1fr; }
  .finder-teaser-schritte { display: none; }
  .finder-buehne { padding: 18px 14px; }
  .finder-leiste .knopf { flex: 1; }
  .finder-treffer { width: 100%; order: -1; }
  .beitrag-bild { aspect-ratio: 4/3; }
  .person h3 { font-size: 17px; }
  .feld-raster { grid-template-columns: 1fr; }
  .kontakt-info { position: static; order: 2; }
  .formular { order: 1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .fuss-spalte:nth-child(3) { grid-column: 1 / -1; }
  .newsletter-zeile { flex-direction: column; align-items: stretch; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
  .faq-antwort { padding-right: 4px; }
  .breitbild { aspect-ratio: 4/3; }
  .focus-galerie { grid-template-columns: 1fr 1fr; }
  .focus-g { aspect-ratio: 4/5; }
  .focus-satz { grid-column: 1 / -1; }
  .focus-punkte ol { grid-template-columns: 1fr; }
  .focus-person { display: grid; grid-template-columns: 110px 1fr; gap: 0 16px; align-items: end; }
  .focus-person .etikett:first-child { grid-column: 1 / -1; }
  .focus-person figure { margin: 0; }
  .kopf-focus .zurueck { font-size: 0; }
  .kopf-focus .zurueck span { font-size: 22px; }
  .marke-focus img:last-child { height: 24px; }
  .warum-buehne, .cta-buehne, .einblick-buehne { min-height: 78svh; }
  .abverkauf { flex-direction: column; align-items: stretch; text-align: center; }
  .knopf { min-height: 54px; }
}

/* Tablet (iPad hochkant): Kontakt-/Ersatzteilformular neben der Infospalte wäre zu schmal – Auswahlfelder wurden abgeschnitten */
@media (max-width: 1000px) {
  .kontakt-raster { grid-template-columns: 1fr; }
  .kontakt-info { position: static; }
}
@media (max-width: 760px) {
  .finder-treffer { flex-basis: 100%; order: -1; text-align: center; }   /* Zähler „732 Modellreihen passen bisher“ in eigener Zeile über den Knöpfen */
  .knopf { white-space: normal; text-align: center; max-width: 100%; }   /* lange Beschriftungen („Alle Bewertungen bei Google ansehen“) umbrechen statt über den Rand zu laufen */
  .stimmen-fuss .knopf { flex: 1 1 100%; justify-content: center; }
}
/* Touch-Geräte (iPhone/iPad) kennen kein Überfahren: Markenlogos dort gleich farbig zeigen */
@media (hover: none) {
  .marke-logo img, .marken-raster img { filter: none; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-erscheinen], .js [data-woerter] .wort, .fuss-wort .buchstabe { opacity: 1; transform: none; }
  .js [data-reveal] { clip-path: none; } .js [data-reveal] img { transform: none; }
  .js [data-wachsen], .hero-poster { transform: none; }
  .glut, .lichtschein { display: none; }
  .laufband-spur { animation: none; }
  .hero-video { display: none; }
}


/* ───────── Focus: mehr Wirkung (Glut, Laufband, große Bilder, Zahlen) ───────── */
.focus-glut { position: absolute; inset: auto -10% -35% -10%; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(224,86,31,.55), rgba(224,86,31,.12) 45%, transparent 70%); mix-blend-mode: screen; animation: focus-glut 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes focus-glut { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } }
.focus-titel { text-shadow: 0 0 60px rgba(224,86,31,.45), 0 2px 30px rgba(0,0,0,.5); letter-spacing: -.02em; }
.focus-titel .hero-zeile-2 { background: linear-gradient(90deg, #fff 0%, #ffd9bf 45%, var(--glut) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.focus-band { overflow: hidden; background: #111; border-block: 1px solid rgba(255,255,255,.08); padding: clamp(14px, 2.4vw, 30px) 0; }
.focus-band-spur { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); width: max-content; animation: focus-band 38s linear infinite; }
.focus-band span { font-size: clamp(40px, 8vw, 112px); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); white-space: nowrap; }
.focus-band span:nth-of-type(odd) { color: #fff; -webkit-text-stroke: 0; }
.focus-band i { width: clamp(10px, 1.4vw, 18px); height: clamp(10px, 1.4vw, 18px); border-radius: 50%; background: var(--glut); box-shadow: 0 0 24px 4px rgba(224,86,31,.6); flex: none; }
@keyframes focus-band { to { transform: translateX(-50%); } }
.focus-lead { font-size: clamp(28px, 3.8vw, 54px); }
.focus-galerie .focus-g { overflow: hidden; border-radius: var(--radius); }
.focus-galerie .focus-g img { transition: transform 1.6s var(--weich); }
.focus-galerie .focus-g:hover img { transform: scale(1.06); }
/* Großes Bild: fast das Originalformat, damit der ganze Ofen samt Feuer zu sehen ist (kein Kino-Zuschnitt) */
.focus-galerie .focus-g-0 { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.focus-galerie .focus-g-0 img { object-position: 50% 80%; transform-origin: 50% 80%; animation: focus-zoom 18s ease-in-out infinite alternate; }
@keyframes focus-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }
.focus-punkte ol { border-top: 1px solid rgba(255,255,255,.25); }
.focus-punkte li { position: relative; padding-top: 38px; }
.focus-punkte li span { font-size: clamp(44px, 6vw, 88px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--glut); letter-spacing: -.03em; }
.focus-punkte li::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--glut); box-shadow: 0 0 14px rgba(224,86,31,.8); transition: width 1.1s var(--weich); }
.focus-punkte li.sichtbar::before, .focus-punkte li:hover::before { width: 64%; }
.focus-kollektion-bilder figure, .focus-partner figure { overflow: hidden; }
.focus-kollektion-bilder img, .focus-partner img { transition: transform 1.4s var(--weich); }
.focus-kollektion-bilder figure:hover img, .focus-partner figure:hover img { transform: scale(1.07); }
.focus-kollektion-bilder figure { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
/* Focus im Detail: Kennzahlen, Bauformen, Brennstoffe, Hinweise */
.focus-zahlen, .focus-bauformen, .focus-brennstoffe, .focus-hinweise, .focus-reihen { list-style: none; margin-left: 0; padding-left: 0; }
.focus-zahlen li, .focus-bauformen li, .focus-brennstoffe li, .focus-hinweise li, .focus-reihen li { list-style: none; }
.focus-reihen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.focus-reihen li { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.04); transition: border-color .4s, transform .5s var(--weich); }
.focus-reihen li:hover { border-color: var(--glut); transform: translateY(-4px); }
.focus-reihe-bild { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.focus-reihe-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.focus-reihe-bild img[src*="0d9cb5"] { object-position: 50% 0; transform-origin: 50% 0; }   /* Gyrofocus: oben ausrichten, damit das Rauchrohr sichtbar bleibt (Domofocus u. a. bleiben mittig) */
.focus-reihen li:hover .focus-reihe-bild img { transform: scale(1.05); }
.focus-reihe-text { padding: clamp(18px, 2vw, 28px); }
.focus-reihe-text h4 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; margin-bottom: 6px; }
.focus-reihe-meta { font-size: 13px; letter-spacing: .02em; color: var(--glut-hell); margin-bottom: 12px; }
.focus-reihe-text p:last-child { line-height: 1.55; opacity: .85; }
.focus-reihen-hinweis { margin-top: 20px; }
.focus-reihen-hinweis a { text-decoration: underline; text-underline-offset: 3px; }
.focus-detail-kopf { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 64px); }
.focus-detail-kopf .leise { margin-top: 20px; }
.focus-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); margin-bottom: clamp(40px, 6vw, 80px); border-top: 1px solid rgba(255,255,255,.25); padding-top: 28px; }
.focus-zahlen b { display: block; font-size: clamp(28px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(90deg, var(--glut), var(--glut-hell)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.focus-zahlen span { display: block; margin-top: 8px; font-size: 14px; opacity: .75; }
.focus-bauformen, .focus-brennstoffe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.focus-bauformen li, .focus-brennstoffe li { padding: clamp(20px, 2.4vw, 32px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.04); transition: border-color .4s, transform .5s var(--weich), background .4s; }
.focus-bauformen li:hover, .focus-brennstoffe li:hover { border-color: var(--glut); background: rgba(224,86,31,.08); transform: translateY(-4px); }
.focus-bauformen h3 { font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 10px; }
.focus-bauformen p, .focus-brennstoffe p { line-height: 1.55; }
.focus-bauformen .focus-modelle-zeile { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13.5px; opacity: .7; }
.focus-unter { margin: clamp(48px, 7vw, 96px) 0 24px; font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.02em; }
.focus-brennstoffe b { display: block; font-size: 20px; margin-bottom: 8px; color: var(--glut-hell); }
.focus-hinweise { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
.focus-hinweise li { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); line-height: 1.55; max-width: 80ch; }
.focus-hinweise b { color: var(--glut-hell); }
.focus-detail-cta { margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 960px) { .focus-bauformen, .focus-brennstoffe, .focus-reihen { grid-template-columns: 1fr 1fr; } .focus-zahlen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .focus-bauformen, .focus-brennstoffe, .focus-reihen { grid-template-columns: 1fr; }
  .focus-galerie .focus-g-0 { aspect-ratio: 3 / 2; }
  .focus-band span { -webkit-text-stroke-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .focus-glut, .focus-band-spur, .focus-galerie .focus-g-0 img { animation: none; }
}


/* ───────── Ausstellungsöfen markieren ───────── */
.finder-bild { position: relative; }
.ausst-plakette { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(21,20,19,.88); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; backdrop-filter: blur(8px); box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
.ausst-plakette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--glut); box-shadow: 0 0 10px 2px rgba(224,86,31,.7); animation: ausst-puls 2.4s ease-in-out infinite; }
@keyframes ausst-puls { 50% { opacity: .5; transform: scale(.8); } }
.ausst-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; color: var(--leise); }
.ausst-plakette-gross { position: static; font-size: 13.5px; }
.ausst-block .kopfzeile-inhalt { align-items: baseline; }
@media (prefers-reduced-motion: reduce) { .ausst-plakette::before { animation: none; } }

/* ── Shop-Katalog (Stufe 1: Katalog mit Filtern, Produktseite, „Angebot anfordern“) ── */
.shop { display: grid; grid-template-columns: 290px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding-bottom: clamp(40px, 6vw, 80px); }
.shop-filter { position: sticky; top: calc(var(--kopf-h, 80px) + 16px); max-height: calc(100vh - var(--kopf-h, 80px) - 32px); overflow: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--bg); }
.shop-filter-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font-weight: 600; cursor: pointer; list-style: none; border-bottom: 1px solid var(--rand); }
.shop-filter-kopf::-webkit-details-marker { display: none; }
.shop-filter-kopf b { font-size: 12px; font-weight: 500; color: var(--glut); }
.shop-filter-form { display: grid; gap: 4px; padding: 6px 18px 18px; }
.shop-filter-form fieldset { border: 0; border-bottom: 1px solid var(--rand); margin: 0; padding: 12px 0; display: grid; gap: 6px; }
.shop-filter-form legend { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); padding: 0; margin-bottom: 6px; }
.shop-filter-form .haken { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 15px; margin: 0; }
.shop-filter-form .haken small { color: var(--leise); font-size: 12px; }
.shop-filter-form .haken.leer { opacity: .4; }
.shop-facette-lang { max-height: 220px; overflow: auto; display: grid; gap: 6px; padding-right: 4px; }
.shop-zahlen { grid-template-columns: 1fr auto 1fr; align-items: center; }
.shop-zahlen legend { grid-column: 1 / -1; }
.shop-zahlen input, .shop-suche input { width: 100%; height: 40px; border: 1px solid var(--rand); border-radius: 10px; padding: 0 10px; font: inherit; background: var(--bg); color: var(--text); }
.shop-m2 { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.shop-zahlen small { grid-column: 1 / -1; }
.shop-suche { margin: 10px 0 4px; }
.shop-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.shop-sortierung { display: flex; align-items: center; gap: 8px; }
.shop-sortierung select { height: 40px; border: 1px solid var(--rand); border-radius: 10px; padding: 0 10px; font: inherit; background: var(--bg); color: var(--text); }
.shop-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-marken { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 !important; }
.shop-marken span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--grau); color: var(--leise); }
.mittig { text-align: center; margin: 24px 0; }
.shop-lade { display: grid; place-items: center; gap: 14px; padding: 60px 0; }
.shop-lade[hidden] { display: none; }
.lade-ring { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--rand); border-top-color: var(--glut); animation: drehen .8s linear infinite; }
.lade-balken { width: 180px; height: 4px; border-radius: 4px; background: var(--rand); overflow: hidden; }
.lade-balken i { display: block; width: 40%; height: 100%; background: var(--glut); border-radius: 4px; animation: lade-balken 1.2s ease-in-out infinite; }
@keyframes lade-balken { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
/* Produktseite */
.shop-ausfuehrung { font-weight: 500; margin: -8px 0 16px; }
.shop-varianten { margin-bottom: 16px; }
.shop-varianten select { width: 100%; height: 46px; border: 1px solid var(--rand); border-radius: 12px; padding: 0 12px; font: inherit; background: var(--bg); color: var(--text); }
.shop-preisbox { border: 1px solid var(--rand); border-radius: var(--radius); padding: clamp(16px, 2.4vw, 24px); margin-bottom: 24px; display: grid; gap: 8px; background: var(--grau); }
.shop-preis { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.shop-preis-anfrage { font-size: clamp(22px, 2.4vw, 28px); }
.shop-preisbox p { margin: 0; }
.shop-preisbox .knopf-reihe { margin-top: 8px; }
.shop-bald { margin-top: 4px !important; }
.shop-beschreibung p { max-width: 75ch; }
.shop-daten { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.shop-docs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.shop-docs a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; transition: border-color .3s, background .3s; }
.shop-docs a:hover { border-color: var(--glut); background: var(--grau); }
.shop-docs span { overflow-wrap: anywhere; }   /* lange Dokumentnamen (z. B. Bålstil) am Handy umbrechen */
.shop-daten > div { min-width: 0; }
.shop-docs svg { width: 20px; height: 20px; fill: none; stroke: var(--glut); stroke-width: 1.6; }
.shop-zubehoer h3 { margin: 24px 0 12px; }
.shop-zub-raster { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shop-zub { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--rand); border-radius: var(--radius-s); overflow: hidden; cursor: pointer; position: relative; transition: border-color .3s, box-shadow .3s; }
.shop-zub input { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; accent-color: var(--glut); z-index: 1; }
.shop-zub:has(input:checked) { border-color: var(--glut); box-shadow: 0 0 0 2px var(--glut) inset; }
.shop-zub-bild { aspect-ratio: 4/3; background: #fff; display: grid; place-items: center; padding: 10px; position: relative; overflow: hidden; min-height: 0; }
/* fest ins Feld gelegt – Safari löst max-height:100 % im Seitenverhältnis-Feld nicht auf, große Bilder ragten in den Text (iPhone 21.10.2026) */
.shop-zub-bild img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.shop-zub-text { padding: 10px 12px 12px; display: grid; gap: 2px; font-size: 14px; border-top: 1px solid var(--rand); }
.shop-zub-text b { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }   /* lange Zubehörnamen am Handy */
.shop-zub-text small { font-size: 12px; line-height: 1.3; }
.shop-zub-preis { font-weight: 600; margin-top: 4px; }
.shop-zub-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; padding: 16px 18px; border-radius: var(--radius-s); background: var(--grau); }
.shop-zub-fuss p { margin: 0; }
@media (max-width: 1100px) { .shop-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-zub-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .shop-filter { position: static; max-height: none; }
  .shop-daten { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .shop-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .shop-raster .finder-text { padding: 12px; }
  .shop-raster .finder-text h3 { font-size: 16px; }
  .shop-zub-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .shop-zub-fuss .knopf { width: 100%; justify-content: center; }
}

/* ── Shop: Warenkorb, Kasse, Bestellstatus, Rechtstexte ── */
.shop-korb-knopf { position: fixed; right: 18px; bottom: 86px; z-index: 40; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--dunkel); color: #fff; box-shadow: var(--schatten); font-weight: 500; }
.shop-korb-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shop-korb-knopf b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--glut); font-size: 12px; }
.shop-menge { display: inline-flex; align-items: center; border: 1px solid var(--rand); border-radius: 999px; overflow: hidden; height: 40px; }
.shop-menge button { width: 38px; height: 100%; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--text); }
.shop-menge button:hover { background: var(--grau); }
.shop-menge span { min-width: 28px; text-align: center; font-weight: 600; }
.shop-menge-gross { height: 52px; }
.shop-testband { display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 10px; background: #fff3cd; color: #6b4e00; font-size: 14px; font-weight: 500; }
.shop-hinweis { padding: 18px 20px; border-radius: var(--radius-s); background: var(--grau); display: grid; gap: 12px; justify-items: start; }
.shop-hinweis p { margin: 0; }
.shop-kasse-raster { display: grid; grid-template-columns: 1fr 380px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.shop-summe { position: sticky; top: calc(var(--kopf-h, 80px) + 16px); display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); }
.shop-summen { margin: 0; display: grid; gap: 8px; }
.shop-summen div { display: flex; justify-content: space-between; gap: 12px; }
.shop-summen dt { color: var(--leise); }
.shop-summen dt small { display: block; font-size: 12px; }
.shop-summen dd { margin: 0; font-weight: 500; white-space: nowrap; }
.shop-summen .shop-gesamt { border-top: 1px solid var(--rand); padding-top: 10px; font-size: 20px; }
.shop-summen .shop-gesamt dt, .shop-summen .shop-gesamt dd { color: var(--text); font-weight: 600; }
.shop-korb { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shop-korb-zeile { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--rand); border-radius: var(--radius-s); }
.shop-korb-zeile small { display: block; margin-top: 2px; }
.shop-korb-preis { white-space: nowrap; }
.shop-weg { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rand); background: none; cursor: pointer; font-size: 18px; color: var(--leise); }
.shop-weg:hover { border-color: var(--glut); color: var(--glut); }
.shop-korb-kurz { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.shop-korb-kurz li { display: flex; justify-content: space-between; gap: 12px; }
.shop-korb-kurz small { display: block; }
.shop-versandwahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.shop-versandwahl legend { font-weight: 600; margin-bottom: 6px; }
.shop-zahlarten { display: grid; gap: 10px; margin-bottom: 14px; }
.shop-zahlart { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--rand); border-radius: var(--radius-s); cursor: pointer; }
.shop-zahlart:has(input:checked) { border-color: var(--glut); box-shadow: 0 0 0 1px var(--glut) inset; }
.shop-zahlart input { accent-color: var(--glut); margin-top: 3px; }
.shop-zahlart small { display: block; margin-top: 2px; }
.shop-kasse .formular h2 { margin: 18px 0 10px; }
.shop-kasse .formular h2:first-child { margin-top: 0; }
.formular-meldung.fehler { color: #b42318; }
.shop-status-karte { padding: clamp(18px, 3vw, 32px); display: grid; gap: 12px; justify-items: start; }
.shop-status-karte p { margin: 0; }
.shop-formular-muster { padding: 18px 20px; display: grid; gap: 6px; }
.shop-formular-muster p { margin: 0; }
@media (max-width: 900px) {
  .shop-kasse-raster { grid-template-columns: 1fr; }
  .shop-summe { position: static; }
}
@media (max-width: 600px) {
  .shop-korb-zeile { grid-template-columns: 1fr auto; }
  .shop-korb-zeile .shop-menge { grid-column: 1; }
  .shop-korb-knopf span { display: none; }
}
.shop-kasse [hidden], .shop-artikel [hidden] { display: none !important; }   /* hidden schlägt die Raster-Regeln von .feld / .feld-raster */
.shop-zub-bild:has(.shop-zub-ohne) { background: var(--grau); }   /* Zubehör ohne Herstellerfoto: Platzhalter „Foto folgt“ */
.shop-zub-ohne { display: grid; justify-items: center; gap: 6px; color: var(--leise); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.shop-zub-ohne svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .6; }

/* ── Startseite: schräge Visitenkarte + runder Hinweis mit Geöffnet-Anzeige (Anregung Inhaber 21.10.2026, ohne Maus-Wackeln) ── */
.einleitung { position: relative; }
.visitenkarte-halter { position: absolute; right: clamp(24px, 8vw, 120px); bottom: clamp(-60px, -4vw, -28px); z-index: 3; width: min(340px, 82vw); }
.js .visitenkarte-halter[data-erscheinen] { transform: none; }   /* Bewegung übernimmt die Karte selbst */
.visitenkarte { --vk-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  padding: 7px; border-radius: 22px; background: #eef0ee; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -24px rgba(26,22,18,.45);
  transform: translateY(70px) rotate(-11deg); transition: transform 1.3s cubic-bezier(.18,1.35,.4,1); transition-delay: .45s; }
.visitenkarte-halter.sichtbar .visitenkarte { transform: rotate(-3deg); }
.vk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 16px 16px 4px 4px; background: #1d1b19; color: #fff;
  font: 600 11px/1 var(--vk-mono); letter-spacing: .12em; text-transform: uppercase; }
.vk-status { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); letter-spacing: .06em; }
.vk-innen { background: #fff; border-radius: 4px 4px 16px 16px; padding: 16px 18px 18px; display: grid; gap: 10px; }
.vk-innen img { height: 34px; width: auto; }
.vk-tel { font: 600 clamp(22px, 2.2vw, 28px)/1.1 var(--vk-mono); letter-spacing: .02em; color: var(--text); }
.vk-tel:hover { color: var(--glut); }
.vk-zeilen { display: grid; gap: 8px; border-top: 1px dashed var(--rand); padding-top: 10px; }
.vk-zeilen small { display: block; font: 600 10px/1.2 var(--vk-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.vk-zeilen b { font-weight: 500; font-size: 13.5px; line-height: 1.35; }
/* grüner/oranger Punkt: geöffnet / geschlossen */
.offen-punkt { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #9a948c; flex: none; }
.offen .offen-punkt { background: #34c759; }
.offen .offen-punkt::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #34c759; opacity: 0; animation: offen-puls 2.2s ease-out infinite; }
@keyframes offen-puls { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.hero-pille { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 8px 15px 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
@media (max-width: 900px) {
  .visitenkarte-halter { position: relative; right: auto; bottom: auto; margin: -70px auto 10px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .visitenkarte { transform: rotate(-3deg); transition: none; } .offen .offen-punkt::after { animation: none; } }
.vk-kopf > span { white-space: nowrap; }
@media (max-width: 420px) { .vk-kopf { font-size: 9.5px; letter-spacing: .08em; padding: 9px 11px; } }

/* ── Startseite: Kennzahlen zum Hochzählen + drehender Stempel (Inhaber 21.10.2026, Anregung Studio Reibold) ── */
.kennzahlen { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); padding-block: clamp(8px, 2vw, 24px) clamp(40px, 6vw, 80px); }
.kennzahlen-liste { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kennzahlen-liste li { background: var(--grau); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 4px; }
.kennzahlen-liste b { font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; font-weight: 600; font-variant-numeric: tabular-nums; }
.kennzahlen-liste li:first-child b { color: var(--glut); }
.kennzahlen-liste span { font-weight: 600; margin-top: 6px; }
.kennzahlen-liste small { color: var(--leise); font-size: 14px; }
.stempel { position: relative; flex: none; width: clamp(130px, 13vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--dunkel); color: #fff; display: grid; place-items: center; text-decoration: none; transition: transform .5s var(--federnd); }
.stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: stempel-dreh 22s linear infinite; }
.stempel text { fill: currentColor; font-size: 15px; font-weight: 600; letter-spacing: .12em; }
.stempel-mitte { text-align: center; font-weight: 600; font-size: 15px; line-height: 1.15; }
.stempel-mitte i { display: block; font-style: normal; color: var(--glut-hell); font-size: 20px; margin-top: 2px; }
.stempel:hover { transform: scale(1.06); }
.stempel:hover svg { animation-duration: 9s; }
@keyframes stempel-dreh { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .kennzahlen { flex-direction: column; }
  .kennzahlen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .kennzahlen-liste small { font-size: 13px; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) { .stempel svg { animation: none; } }

/* ── Herstellerlogos: Infofenster mit Flagge und Eckdaten (Inhaber 21.10.2026) ── */
.marke-knopf { all: unset; box-sizing: border-box; width: 100%; height: 100%; display: grid; place-items: center; cursor: pointer; border-radius: inherit; }
.marke-knopf:focus-visible { outline: 2px solid var(--glut); outline-offset: 4px; }
.marken-raster li:has(.marke-knopf) { padding: 0; }
.marken-raster li:has(.marke-knopf) img { max-width: calc(100% - 44px); }
.marken-fenster { width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 760px); padding: 0; border: 0; border-radius: 28px; background: var(--bg); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); overflow: hidden; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s var(--weich), transform .45s var(--weich), overlay .45s allow-discrete, display .45s allow-discrete; }
.marken-fenster[open] { opacity: 1; transform: none; }
@starting-style { .marken-fenster[open] { opacity: 0; transform: translateY(18px) scale(.97); } }
.marken-fenster::backdrop { background: rgba(20,19,18,0); backdrop-filter: blur(0); transition: background .35s, backdrop-filter .35s, overlay .35s allow-discrete, display .35s allow-discrete; }
.marken-fenster[open]::backdrop { background: rgba(20,19,18,.45); backdrop-filter: blur(6px); }
@starting-style { .marken-fenster[open]::backdrop { background: rgba(20,19,18,0); backdrop-filter: blur(0); } }
.mf-inhalt { padding: clamp(22px, 4vw, 34px); overflow-y: auto; max-height: inherit; overscroll-behavior: contain; }
.mf-zu { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--grau); color: var(--text); font-size: 15px; cursor: pointer; z-index: 1; transition: background .2s; }
.mf-zu:hover { background: var(--grau-2); }
.mf-kopf { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.mf-logo { flex: none; width: 128px; height: 84px; border-radius: 18px; background: #fff; border: 1px solid var(--rand); display: grid; place-items: center; padding: 12px; }
.mf-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mf-titel h2 { margin: 0 0 6px; }
.mf-land { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 6px; border-radius: 99px; background: var(--grau); font-size: 14px; font-weight: 500; }
.mf-flagge { width: 24px; height: 16px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.mf-text { margin: 20px 0 0; line-height: 1.6; color: var(--leise); }
.mf-eckdaten { margin: 20px 0 0; display: grid; gap: 2px; border-radius: 18px; overflow: hidden; background: var(--rand); border: 1px solid var(--rand); }
.mf-eckdaten div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 16px; background: var(--grau); }
.mf-eckdaten dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--leise); }
.mf-eckdaten dt svg { width: 15px; height: 15px; fill: none; stroke: var(--glut); stroke-width: 2; }
.mf-eckdaten dd { margin: 0; font-weight: 500; font-size: 14.5px; }
.mf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.mf-web { margin-left: auto; font-size: 14px; color: var(--leise); text-decoration: none; }
.mf-web:hover { color: var(--glut); }
@media (max-width: 600px) {
  /* Handy: Fenster kommt als Blatt von unten */
  .marken-fenster { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 88vh; transform: translateY(100%); }
  .marken-fenster[open] { transform: none; }
  @starting-style { .marken-fenster[open] { transform: translateY(100%); } }
  .mf-inhalt { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .mf-logo { width: 100px; height: 70px; }
  .mf-eckdaten div { grid-template-columns: 1fr; gap: 2px; }
  .mf-knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
  .mf-web { margin: 4px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .marken-fenster, .marken-fenster::backdrop { transition: none; } }
html:has(.marken-fenster[open]) { overflow: hidden; }   /* Seite dahinter scrollt nicht mit */

/* ── Focus-Baureihen /focus/<reihe> + Übersicht „Modelle im Detail“ (Inhaber 21.10.2026) ── */
.fr-buehne { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(92svh, 900px); padding: calc(var(--kopf-h) + 40px) var(--rand-abstand) clamp(40px, 6vw, 80px); max-width: var(--seite-max); margin-inline: auto; }
.fr-buehne-glut { position: absolute; inset: auto -20% -40% 20%; height: 80%; background: radial-gradient(ellipse at 60% 100%, rgba(224,86,31,.45), rgba(224,86,31,.1) 45%, transparent 70%); pointer-events: none; animation: focus-glut 6s ease-in-out infinite; }
.fr-buehne-text { position: relative; width: auto; padding: 0; }
.fr-buehne-text { container-type: inline-size; width: 100%; }
.fr-buehne { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 760px) { .fr-buehne { grid-template-columns: minmax(0, 1fr); } }
.fr-titel { font-size: min(140px, calc(100cqi / (var(--l, 8) * .74))) !important; overflow-wrap: normal !important; }
.fr-buehne-bild.fr-foto img { inset: 0; width: 100%; height: 100%; object-fit: cover; animation: none; }
.fr-titel { font-size: clamp(52px, 9vw, 140px); font-weight: 700; letter-spacing: -.04em; line-height: .92; text-transform: uppercase; margin: 10px 0 14px; background: linear-gradient(90deg, #fff 0%, #ffd9bf 55%, var(--glut) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.fr-meta { color: var(--glut-hell); font-size: 15px; letter-spacing: .02em; margin: 0 0 16px; }
.fr-chips { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.fr-chips li { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-size: 13px; background: rgba(255,255,255,.04); }
.fr-chips .fr-chip-kw { border-color: var(--glut); color: #fff; background: rgba(224,86,31,.14); }
.fr-text { max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; opacity: .85; margin: 0 0 26px; }
.fr-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.fr-buehne-bild { position: relative; margin: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #2a2622, #0b0b0b 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 120px -40px rgba(224,86,31,.55); overflow: hidden; }
.fr-buehne-bild img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; animation: fr-schweben 7s ease-in-out infinite; }
@keyframes fr-schweben { 50% { transform: translateY(-10px); } }
.fr-sprung { position: sticky; top: calc(var(--kopf-h) + 8px); z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 6px; border-radius: 999px; background: rgba(20,19,18,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); width: max-content; max-width: calc(100vw - 2 * var(--rand-abstand)); scrollbar-width: none; }
.fr-sprung a { flex: none; padding: 8px 16px; border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.8); text-decoration: none; transition: background .3s, color .3s; }
.fr-sprung a:hover { background: rgba(255,255,255,.1); color: #fff; }
.fr-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fr-filter button { font: inherit; font-size: 14px; color: inherit; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: border-color .3s, background .3s; }
.fr-filter button small { opacity: .6; margin-left: 4px; }
.fr-filter button.aktiv, .fr-filter button:hover { border-color: var(--glut); background: rgba(224,86,31,.14); }
.fr-karten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.fr-karte { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); background: rgba(255,255,255,.035); overflow: hidden; display: flex; flex-direction: column; transition: border-color .4s, transform .5s var(--weich); }
.fr-karte:hover { border-color: var(--glut); transform: translateY(-4px); }
.fr-karte[hidden] { display: none; }
.fr-karte figure { position: relative; margin: 0; aspect-ratio: 4/3; background: radial-gradient(circle at 50% 40%, #fff, #e9e6e1); overflow: hidden; }
.fr-karte figure img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; transition: transform 1s var(--weich); }
.fr-karte:hover figure img { transform: scale(1.05); }
.fr-karte-b { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgba(20,19,18,.82); border-radius: 999px; padding: 5px 11px; }
.fr-karte-text { padding: clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fr-karte-text h3 { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; margin: 0; }
.fr-karte-ausf { font-size: 14px; opacity: .7; margin: 0; }
.fr-karte-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 6px 0 4px; }
.fr-karte-werte dt { font-size: 12px; opacity: .6; }
.fr-karte-werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fr-karte .modell-link { margin-top: auto; padding-top: 6px; color: var(--glut-hell); }
.fr-tabelle-halter { overflow-x: auto; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); }
.fr-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.fr-tabelle th, .fr-tabelle td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.fr-tabelle thead th { background: #151413; font-weight: 600; vertical-align: bottom; }
.fr-tabelle thead small { display: block; font-weight: 400; color: var(--glut-hell); font-size: 12px; }
.fr-tabelle tbody th { font-weight: 500; color: rgba(255,255,255,.7); position: sticky; left: 0; background: #0f0e0d; }
.fr-tabelle tbody tr:hover td { background: rgba(224,86,31,.07); }
.fr-dokumente { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.fr-dokumente a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-s); overflow: hidden; background: rgba(255,255,255,.035); transition: border-color .4s, transform .5s var(--weich); }
.fr-dokumente a:hover { border-color: var(--glut); transform: translateY(-4px); }
.fr-dok-bild { position: relative; display: block; aspect-ratio: 3/4; background: #f4f3f0; overflow: hidden; }
.fr-dok-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--weich); }
.fr-dokumente a:hover .fr-dok-bild img { transform: scale(1.04); }
.fr-dok-bild i { position: absolute; right: 10px; bottom: 10px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--glut); border-radius: 6px; padding: 4px 8px; }
.fr-dok-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.fr-dok-text small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--glut-hell); }
.fr-dok-text b { font-weight: 600; line-height: 1.3; }
.fr-dok-text em { font-style: normal; font-size: 13px; opacity: .6; margin-top: 4px; }
.fr-dok-hinweis { opacity: .85; }
.fr-dok-hinweis a { color: var(--glut-hell); text-decoration: underline; text-underline-offset: 3px; }
.fr-optionen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fr-optionen li { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; font-size: 14px; background: rgba(255,255,255,.035); }
.fr-cta { padding-inline: var(--rand-abstand); }
.fr-cta-karte { position: relative; overflow: hidden; max-width: var(--rahmen); margin: 0 auto; text-align: center; border-radius: calc(var(--radius) * 1.5); padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 80px); background: radial-gradient(ellipse at 50% 120%, #3a1d10, #111 65%); border: 1px solid rgba(255,255,255,.08); }
.fr-cta-karte > *:not(.focus-glut) { position: relative; }
.fr-cta-karte p:not(.etikett) { max-width: 52ch; margin: 18px auto 28px; opacity: .85; }
.fr-weiter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; padding-block: clamp(32px, 5vw, 64px); }
.fr-weiter a { text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; transition: border-color .4s; }
.fr-weiter a:last-child { text-align: right; }
.fr-weiter a:hover { border-color: var(--glut); }
.fr-weiter small { opacity: .6; font-size: 13px; }
.fr-weiter b { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.02em; }
.fr-weiter .fr-weiter-alle { justify-content: center; text-align: center; font-weight: 600; border-radius: 999px; }
/* Übersicht auf /focus */
.fr-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.fr-raster a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.035); transition: border-color .4s, transform .5s var(--weich); }
.fr-raster a:hover { border-color: var(--glut); transform: translateY(-4px); }
.fr-raster figure { position: relative; margin: 0; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #fff, #e6e2dc); overflow: hidden; }
.fr-raster figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.fr-raster a:hover figure img { transform: scale(1.06); }
.fr-raster-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.fr-raster-text b { font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.02em; }
.fr-raster-text small { font-size: 12.5px; color: var(--glut-hell); }
.fr-raster-text em { font-style: normal; font-size: 13px; opacity: .65; margin-top: 4px; }
.focus-reihe-link { color: inherit; text-decoration: none; }
.focus-reihe-link span { color: var(--glut); }
@media (max-width: 1000px) {
  .fr-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-dokumente, .fr-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fr-buehne { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--kopf-h) + 24px); }
  .fr-buehne-bild { order: -1; width: min(78vw, 360px); margin-inline: auto; }
  .fr-karten { grid-template-columns: 1fr; }
  .fr-dokumente, .fr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-weiter { grid-template-columns: 1fr 1fr; }
  .fr-weiter .fr-weiter-alle { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .fr-buehne-bild img, .fr-buehne-glut { animation: none; } }

/* ── Service: Planungsauftrag mit Planmappe (Beispielblätter medien/plan/, tools/website_planblaetter.py; Inhaber 21.10.2026) ── */
.planung-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 4vw, 48px); }
.planung-text { max-width: 58ch; margin-top: 16px; }
.planung-erstattung { position: relative; background: var(--grau); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); padding-right: clamp(80px, 9vw, 120px); }
.planung-erstattung-satz { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; margin: 0 0 8px; }
.planung-erstattung .knopf { margin-top: 14px; }
.planung-stempel { position: absolute; top: -18px; right: clamp(16px, 2vw, 26px); width: clamp(64px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; color: #fff; background: var(--glut); box-shadow: 0 14px 30px -12px rgba(224,86,31,.6); transform: rotate(-8deg); }
.planung-punkte { list-style: none; margin: 0 0 clamp(36px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.planung-punkte li { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-top: 2px solid var(--text); background: linear-gradient(var(--grau), var(--grau)) no-repeat 0 0 / 100% 0; transition: background-size .6s var(--weich); }
.planung-punkte li:hover { background-size: 100% 100%; }
.planung-nr { font-size: 12px; letter-spacing: .1em; color: var(--glut); font-weight: 600; }
.planung-punkte b { font-size: 17px; letter-spacing: -.01em; }
.planung-punkte .leise { font-size: 14.5px; line-height: 1.5; }
.planmappe-titel { margin: 0 0 18px; }
.planmappe-blaetter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.planmappe-blaetter li:nth-child(odd) { --dreh: -.6deg; }
.planmappe-blaetter li:nth-child(even) { --dreh: .5deg; --tief: 18px; }   /* Blätter leicht schräg wie in einer Mappe (Drehung am Link, das Einblenden steuert li) */
.planmappe-blaetter a { display: block; border-radius: 6px; overflow: hidden; background: #fbfaf6; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 22px 40px -24px rgba(0,0,0,.35); transform: rotate(var(--dreh, 0deg)) translateY(var(--tief, 0px)); transition: box-shadow .5s, transform .6s var(--weich); }
.planmappe-blaetter a:hover { transform: rotate(0deg) translateY(calc(var(--tief, 0px) - 6px)); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 30px 60px -26px rgba(0,0,0,.45); }
.planmappe-blaetter img { display: block; width: 100%; height: auto; }
.planmappe-hinweis { margin-top: clamp(28px, 3vw, 40px); }
/* Echte Planungen (22.10.2026): kleiner Blätterkatalog – 4 Spalten, alle Blätter im gleichen Papierformat, Projekt als Etikett */
.planmappe-blaetter:has(.planmappe-projekt) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planmappe-blaetter a:has(.planmappe-projekt) { position: relative; aspect-ratio: 4 / 3; }
.planmappe-blaetter a:has(.planmappe-projekt) img { width: 100%; height: 100%; object-fit: contain; padding: 10px 10px 30px; }
.planmappe-blaetter a[data-3d] img { object-fit: cover; padding: 0; }
.planmappe-projekt { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 11px; line-height: 1.3; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--dunkel, #111); box-shadow: 0 1px 4px rgba(0,0,0,.12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planmappe-projekt-leer { display: none; }
@media (max-width: 1000px) { .planmappe-blaetter:has(.planmappe-projekt) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .planung-punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .planung-kopf { grid-template-columns: minmax(0, 1fr); }
  .planung-erstattung { margin-top: 18px; }
  .planung-punkte { grid-template-columns: minmax(0, 1fr); }
  .planmappe-blaetter { grid-template-columns: minmax(0, 1fr); }
  .planmappe-blaetter li:nth-child(even) { --tief: 0px; }
}
@media (prefers-reduced-motion: reduce) { .planmappe-blaetter a { transform: none !important; } }

/* ── Focus-Baureihen, Ausbau: Stimmungsbild, Kerndaten, Galerie, Bauform-Gruppen (Inhaber 21.10.2026) ── */
.fr-buehne-band { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .32; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%, rgba(0,0,0,.6)); mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 55%, rgba(0,0,0,.6)); pointer-events: none; }
.fr-buehne::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.fr-buehne-text, .fr-buehne-bild { z-index: 1; }
.fr-designer { margin: -6px 0 18px; font-size: 14px; color: rgba(255,255,255,.7); letter-spacing: .02em; }
.fr-designer b { color: #fff; font-weight: 600; }
.fr-kenn-halter { position: relative; z-index: 2; margin-top: clamp(-56px, -4vw, -24px); margin-bottom: clamp(24px, 3.5vw, 44px); }
.fr-kenn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fr-kenn li { border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(20,19,18,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: clamp(16px, 2vw, 24px); display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 120px; }
.fr-kenn b { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; background: linear-gradient(90deg, #fff, var(--glut-hell)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr-kenn span { font-size: 13px; color: rgba(255,255,255,.62); }
.fr-kenn .fr-kenn-form { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 18px 10px 10px; }
.fr-kenn .fr-kenn-lang b { font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -.01em; }
.fr-kenn-form img { height: 100px; width: auto; border-radius: 14px; flex: none; }
.fr-kenn-form span { font-size: 15px; color: #fff; font-weight: 600; }
.fr-galerie { overflow: hidden; }
.fr-galerie-spur { display: flex; gap: clamp(10px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand-abstand); padding: 4px var(--rand-abstand) 8px; scrollbar-width: none; }
.fr-galerie-spur::-webkit-scrollbar { display: none; }
.fr-galerie-bild { flex: none; width: min(78vw, 720px); aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; background: #151413; border: 1px solid rgba(255,255,255,.08); }
.fr-galerie-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weich); }
.fr-galerie-bild:hover img, .fr-galerie-bild:focus-visible img { transform: scale(1.03); }
.fr-galerie-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.fr-gross { padding: 0; border: 0; background: transparent; max-width: min(94vw, 1600px); max-height: 92vh; overflow: visible; }
.fr-gross::backdrop { background: rgba(5,5,5,.86); backdrop-filter: blur(6px); }
.fr-gross img { display: block; max-width: min(94vw, 1600px); max-height: 88vh; border-radius: var(--radius-s); object-fit: contain; }
.fr-gross-zu { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 16px; cursor: pointer; }
.fr-karte figure { background: #151413; }
.fr-karte figure img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-dok-ohne { background: radial-gradient(circle at 50% 40%, #2a2622, #0f0e0d 70%); display: grid; place-items: center; }
.fr-dok-ohne .fr-dok-logo { position: static; width: 46%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.fr-filter-form { margin-bottom: 8px; }
.fr-form-gruppe[hidden] { display: none; }
.fr-form-gruppe .focus-unter { margin-top: clamp(24px, 4vw, 44px); }
.fr-raster-jahr { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #fff; background: rgba(20,19,18,.8); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 760px) {
  .fr-kenn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fr-kenn .fr-kenn-form { grid-column: 1 / -1; }
  .fr-kenn-form img { height: 80px; }
  .fr-kenn li { min-height: 96px; }
  .fr-gross-zu { top: 8px; right: 8px; }
}

/* ── Sprachwahl DE | EN | RU (Inhaber 21.10.2026) ── */
.nav .pille { white-space: nowrap; }   /* „Über uns“ nicht umbrechen, wenn die Sprachwahl daneben steht */
.sprachwahl { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--rand); background: rgba(255,255,255,.6); }
.sprachwahl a { font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 5px 8px; border-radius: 999px; color: var(--leise); text-decoration: none; transition: background .3s, color .3s; }
.sprachwahl a:hover { color: var(--text); }
.sprachwahl a[aria-current] { background: var(--dunkel); color: #fff; }
/* Kopfzeile: schmales Auswahlmenü statt drei Knöpfen */
.sprachwahl-auswahl { position: relative; }
.sprachwahl-auswahl summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 10px; border-radius: 14px; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #1a1816; user-select: none; transition: background .3s; }
.sprachwahl-auswahl summary::-webkit-details-marker { display: none; }
.sprachwahl-auswahl summary:hover, .sprachwahl-auswahl[open] summary { background: rgba(255,255,255,.5); }
.sprachwahl-auswahl summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .75; }
.sprachwahl-auswahl .pfeil { font-size: 10px; opacity: .55; transition: transform .3s; }
.sprachwahl-auswahl[open] .pfeil { transform: rotate(180deg); }
.sprachwahl-liste { position: absolute; top: calc(100% + 10px); right: 0; min-width: 170px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.96); border: 1px solid var(--rand); box-shadow: 0 18px 40px -14px rgba(0,0,0,.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 60; animation: sprachwahl-auf .2s ease-out; }
@keyframes sprachwahl-auf { from { opacity: 0; transform: translateY(-4px); } }
.sprachwahl-liste a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; font-size: 15px; color: var(--text); text-decoration: none; transition: background .2s; }
.sprachwahl-liste a b { font-size: 11px; letter-spacing: .08em; color: var(--leise); width: 20px; }
.sprachwahl-liste a:hover { background: rgba(0,0,0,.05); }
.sprachwahl-liste a[aria-current] { background: var(--dunkel); color: #fff; }
.sprachwahl-liste a[aria-current] b { color: rgba(255,255,255,.6); }
.sprachwahl-hell { margin-left: auto; margin-right: 10px; }
.sprachwahl-hell summary { color: rgba(255,255,255,.85); }
.sprachwahl-hell summary:hover, .sprachwahl-hell[open] summary { background: rgba(255,255,255,.1); }
.sprachwahl-hell .sprachwahl-liste { background: rgba(20,19,18,.94); border-color: rgba(255,255,255,.12); }
.sprachwahl-hell .sprachwahl-liste a { color: rgba(255,255,255,.85); }
.sprachwahl-hell .sprachwahl-liste a:hover { background: rgba(255,255,255,.08); }
.sprachwahl-hell .sprachwahl-liste a[aria-current] { background: #fff; color: #111; }
.sprachwahl-hell .sprachwahl-liste a[aria-current] b { color: #888; }
.sprachwahl-menue { margin-bottom: 18px; }
.sprachwahl-menue a { font-size: 14px; padding: 8px 14px; }
.dunkel .sprachwahl-menue { border-color: rgba(255,255,255,.2); background: transparent; }
.dunkel .sprachwahl-menue a[aria-current] { background: #fff; color: #111; }
@media (max-width: 1100px) { .nav-rechts .sprachwahl-auswahl { display: none; } }
/* Shop in der Kopfzeile: bei mittleren Breiten enger, damit das Logo frei bleibt */
@media (min-width: 1101px) and (max-width: 1400px) {
  .kopf .pille { padding: 0 11px; font-size: 16px; }
  .kopf:not(.kopf-focus) .knopf-klein { padding: 0 16px; font-size: 15.5px; }
  .sprachwahl-auswahl summary { padding: 0 7px; }
}
@media (max-width: 760px) { .sprachwahl-hell { display: none; } }

.rechtshinweis-sprache { margin-top: calc(var(--kopf-h) + 28px); margin-bottom: -40px; padding: 14px 18px; border-radius: var(--radius-s); background: var(--grau); font-size: 14px; color: var(--leise); position: relative; z-index: 1; }
.rechtshinweis-sprache a { text-decoration: underline; }

/* ── Prospekteschrank (Serviceportal) eingebettet im Ofen-Finder ── */
.schrank-rahmen { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); background: #f4efe8; box-shadow: var(--schatten); }
.schrank-rahmen iframe { display: block; width: 100%; height: 820px; border: 0; scroll-margin-top: calc(var(--kopf-h) + 16px); transition: height .4s var(--weich); }
.schrank-lade { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; background: #f4efe8; transition: opacity .4s var(--weich), visibility .4s; }
.schrank-rahmen.geladen .schrank-lade { opacity: 0; visibility: hidden; }
.schrank-link { margin-top: 10px; text-align: right; }
.schrank-link a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .schrank-rahmen iframe { height: 640px; } }
/* Sprachwechsel: Ladebild über der ganzen Seite */
.sprachwechsel { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(250,248,245,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s; }
.sprachwechsel.an { opacity: 1; }
.sprachwechsel p { margin: 0; font-size: 15px; color: var(--leise); letter-spacing: .02em; }

/* ── Motion Graphics ganze Website (Inhaber 21.10.2026): Feuer & Glut, gezeichnete Linien, Text, Bilder ── */
/* Etikett: die Glutlinie zeichnet sich, ein Funke glimmt am Ende */
.js .etikett::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--weich) .1s; }
.js .etikett.sichtbar::before { transform: none; animation: glut-linie 3.6s ease-in-out 1.2s infinite; }
.js .kopfzeile-mitte .etikett::before { transform-origin: center; }
@keyframes glut-linie { 0%, 100% { box-shadow: 0 0 0 rgba(224,86,31,0); } 50% { box-shadow: 0 0 10px 1px rgba(224,86,31,.55); } }
/* Abschnittslinie: zeichnet sich von links, ein Glutpunkt läuft mit und verglimmt */
.js .kopfzeile { border-top-color: transparent; position: relative; }
.js .kopfzeile::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rand); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--weich); }
.js .kopfzeile::after { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--glut); box-shadow: 0 0 12px 3px rgba(255,120,40,.7); opacity: 0; }
.js .kopfzeile.sichtbar::before { transform: none; }
.js .kopfzeile.sichtbar::after { animation: glut-lauf 1.6s var(--weich) forwards; }
.js .kopfzeile-mitte::before, .js .kopfzeile-mitte::after { display: none; }
@keyframes glut-lauf { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
/* Dunkle Bühnen: warmes Glühen am Boden, das langsam atmet wie Glut */
.glut-atem { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,110,30,.30), rgba(224,86,31,.10) 40%, transparent 70%); mix-blend-mode: screen; animation: glut-atmen 5.5s ease-in-out infinite; }
@keyframes glut-atmen { 0%, 100% { opacity: .55; transform: scaleY(1); } 35% { opacity: .9; transform: scaleY(1.06); } 60% { opacity: .65; } 80% { opacity: .85; transform: scaleY(1.03); } }
/* Flamme in Linien über dem Abschluss-Aufruf */
.linien-flamme { display: block; width: 44px; height: 60px; margin-bottom: 18px; overflow: visible; }
.linien-flamme path { fill: none; stroke: var(--glut-hell, #ff8a3d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cta-inhalt.sichtbar .linien-flamme path { transition: stroke-dashoffset 2.2s var(--weich); stroke-dashoffset: 0; }
.cta-inhalt.sichtbar .linien-flamme path + path { transition-delay: .6s; }
.cta-inhalt.sichtbar .linien-flamme { animation: flamme-flackern 2.8s ease-in-out 2.4s infinite; transform-origin: 50% 100%; }
@keyframes flamme-flackern { 0%, 100% { transform: scale(1, 1); filter: drop-shadow(0 0 4px rgba(255,120,40,.5)); } 30% { transform: scale(.97, 1.04); filter: drop-shadow(0 0 9px rgba(255,120,40,.8)); } 55% { transform: scale(1.02, .98); } 75% { transform: scale(.99, 1.03); filter: drop-shadow(0 0 6px rgba(255,120,40,.6)); } }
/* Bilder: Wischblende von unten, dabei langsam vom Zoom auf volle Größe */
.js [data-bild-auf] { clip-path: inset(100% 0 0 0); scale: 1.12; transition: clip-path 1.2s var(--weich), scale 1.8s var(--weich); }
.js [data-bild-auf].sichtbar { clip-path: inset(0 0 0 0); scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .etikett::before, .js .kopfzeile::before { transform: none; }
  .js .kopfzeile::after, .glut-atem { display: none; }
  .linien-flamme path { stroke-dashoffset: 0; }
  .js [data-bild-auf] { clip-path: none; scale: 1; }
}
.brotkrumen-kopf { margin-bottom: 0; padding-top: 22px; }
.seitenwahl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 34px; }
.seitenwahl .pille { min-width: 40px; justify-content: center; border: 1px solid var(--rand); }
/* Handy: Modellseite – Überschrift und Einleitung im ersten Bildschirm (SEO Above-the-Fold, 22.10.2026): Bild flacher, Ausführungen als waagerechte Leiste */
@media (max-width: 760px) {
  .modell-bild { aspect-ratio: 16 / 10; padding: 12px; }
  .modell-bild > img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .modell-wechsler { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .modell-wechsler .pille { flex: none; white-space: nowrap; }
  .modell-kopf { gap: 18px; }
  .modell-kopf > *, .modell-bildspalte { min-width: 0; }
  .modell-wechsler { max-width: 100%; }
}

/* ── Einleitung im sofort sichtbaren Bereich (SEO-Prüfung 21.10.2026, gemessen bei 1280×800 und 375×812) ── */
.focus-hero-text { position: relative; width: 92%; max-width: 640px; margin: 22px 0 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: rgba(255,255,255,.85); text-shadow: 0 1px 14px rgba(0,0,0,.65); }
html[lang="ru"] .seitenkopf-bild .titel-xl { font-size: clamp(34px, 5.2vw, 78px); }   /* russische Titel sind länger */
@media (max-width: 760px) {
  .fr-buehne-bild { width: min(46vw, 200px); }
  /* Modellseite: Bild → Name + Beschreibung → Ausführungswahl (sonst schiebt die Wahl den Text unter den Bildschirm) */
  .modell-bildspalte { display: contents; }
  .modell-kopf > .modell-bildspalte > .modell-bild, .modell-bild { order: 0; }
  .modell-info { order: 1; }
  .modell-wechsler { order: 2; margin-top: 0; }
}
.shop-alle-liste { columns: 3 240px; column-gap: 32px; margin-top: 16px; }
.shop-alle-liste li { break-inside: avoid; padding: 4px 0; }
.shop-alle-liste a:hover { color: var(--glut); }
/* Lange Wörter in Überschriften (z. B. „Wärmebetonverkleidung“, russische Komposita) dürfen auf dem Handy umbrechen statt die Seite zu verbreitern */
h1, h2, .titel-xl, .titel-l { overflow-wrap: break-word; hyphens: auto; }
.wort-maske, .wort { max-width: 100%; }
@media (max-width: 700px) { h1 .wort-maske, h1 .wort, h2 .wort-maske, h2 .wort { white-space: normal; overflow-wrap: anywhere; } }
/* Handy: Modellname und Beschreibungstext vor das große Bild, damit sie ohne Scrollen sichtbar sind */
@media (max-width: 760px) { .modell-kopf > .modell-info { order: -1; } .modell-kopf > .modell-bildspalte { order: 1; } }
/* Handy, Modellseiten: Kopfbereich enger, damit auch längere Beschreibungen im ersten Bildschirm Platz haben */
@media (max-width: 760px) {
  .modell .seitenkopf { padding-top: 18px; }
  .modell .brotkrumen { margin-bottom: 12px; font-size: 12px; }
  .modell-info .etikett { margin-bottom: 8px; }
  .modell-info .titel-l { font-size: clamp(24px, 7vw, 30px); line-height: 1.12; margin-bottom: 10px; }
  .modell-text { font-size: 15px; line-height: 1.42; margin-bottom: 14px; }
}
/* Übersetzte Seiten (EN/RU): Hinweis zur Übersetzung steht über dem Video-Bereich, dieser wird um dessen Höhe niedriger, damit Text und Pfeil im ersten Bildschirm bleiben */
.rechtshinweis-sprache ~ .focus-hero { height: calc(100svh - 96px); min-height: 480px; }
/* Handy: Video-Bereich der Focus-Seite beginnt unter der Kopfzeile (44 px, mit Übersetzungshinweis EN/RU 95 px) und ist um dieses Stück niedriger, damit Einleitung und Pfeil im ersten Bildschirm bleiben */
@media (max-width: 760px) {
  .focus-hero { height: calc(100svh - 48px); }
  html[lang="en"] .focus-hero, html[lang="ru"] .focus-hero { height: calc(100svh - 100px); }
}
/* Handy: Rechtstexte (Datenschutz, Impressum …) rücken näher an die Überschrift, damit der Text im ersten Bildschirm Platz hat */
@media (max-width: 760px) { .seitenkopf + .rechtstext { padding-top: 12px; } .seitenkopf:has(+ .rechtstext) .titel-xl { margin-bottom: 4px; } }
@media (max-width: 760px) { .seitenkopf:has(+ .rechtstext) { padding-bottom: 8px; } .rechtstext > h2:first-child, .rechtstext > h3:first-child { margin-top: 0; } }

/* Laptop-Höhe (z. B. 1366×768): Titel im Seitenkopf mit Bild etwas kleiner, damit die Einleitung sichtbar bleibt (/en/service lag bei 810 px) */
@media (min-width: 901px) and (max-height: 820px) { .seitenkopf-bild .titel-xl { font-size: clamp(34px, 5vw, 76px); } }


/* ── Gewinnspiel „Ihr Feuer, Ihr Gewinn“ (22.10.2026) ── */
.gewinnspiel-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 3vw, 36px); border-radius: var(--radius); background: linear-gradient(110deg, #1a1412, #2b1a12 55%, #4a2410); color: #fff; text-decoration: none; transition: transform .5s var(--weich), box-shadow .5s; }
.gewinnspiel-band:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(224,86,31,.55); }
.gewinnspiel-band-symbol svg { width: 34px; height: 46px; fill: var(--glut); filter: drop-shadow(0 0 14px rgba(224,86,31,.6)); }
.gewinnspiel-band-text { display: grid; gap: 4px; }
.gewinnspiel-band-text b { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.01em; }
.gewinnspiel-band-text span { color: rgba(255,255,255,.78); }
.gewinnspiel-band .knopf { background: #fff; color: #111; }
@media (max-width: 760px) { .gewinnspiel-band { grid-template-columns: auto 1fr; } .gewinnspiel-band .knopf { grid-column: 1 / -1; justify-self: start; } }
.gewinnspiel-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.gewinnspiel-schritte li { display: grid; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: var(--radius); background: var(--grau); }
.gewinnspiel-schritte b { font-size: clamp(30px, 3.4vw, 48px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--glut); }
@media (max-width: 760px) { .gewinnspiel-schritte { grid-template-columns: 1fr; } }
.gewinnspiel-bild { display: block; max-width: 1100px; margin-inline: auto; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); transition: transform .5s var(--weich); }
.gewinnspiel-bild:hover { transform: translateY(-3px); }
.gewinnspiel-bild img { display: block; width: 100%; height: auto; }
.gewinnspiel-formular { max-width: 860px; margin-inline: auto; scroll-margin-top: 100px; }
.gewinnspiel-bedingungen .text-spalte { max-width: 820px; display: grid; gap: 12px; font-size: 15px; line-height: 1.6; }

/* Zahlungsarten (24.10.2026): Logo-Leiste in der Fußzeile, Liste auf /versand-zahlung, Raten-Hinweis am Preis – nur aktive Mollie-Methoden */
.zahl-leiste { margin: 0 0 18px; text-align: center; }
.zahl-titel { margin: 0 0 8px; font-size: 13px; color: var(--leise); letter-spacing: .02em; }
.zahl-leiste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zahl-abzeichen { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #222; white-space: nowrap; }
.zahl-abzeichen img { height: 22px; width: auto; display: block; }
.zahl-abzeichen svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.zahl-liste { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.zahl-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.zahl-liste .zahl-abzeichen:empty { display: none; }
.raten-hinweis { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff6e8; border: 1px solid #f3d6a6; color: #3d2a0c; font-size: 14px; line-height: 1.4; text-align: left; }
.raten-hinweis img { height: 22px; width: auto; flex: none; margin-top: 1px; }
.raten-hinweis small { display: block; color: #6b5432; font-size: 12px; margin-top: 2px; }
.zahl-abzeichen .zl-karte { width: 38px; height: 24px; stroke: none; stroke-width: 0; }
/* Ratenrechner mit Pflichtangaben (§ 17 PAngV) */
.raten-rechner { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #f3d6a6; font-size: 14px; text-align: left; }
.rr-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.rr-wahl { display: flex; align-items: center; gap: 8px; margin: 0; }
.rr-wahl select { width: auto; min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(0,0,0,.2); font: inherit; background: #fff; }
.rr-rate { margin: 0; font-size: 15px; } .rr-rate b { font-size: 20px; }
.rr-pflicht { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: #5d5d5d; }