/* ==========================================================================
   Dachfit – Prototyp
   Aufbau: 1. Tokens (Variablen aus Figma)  2. Basis  3. Layout  4. Komponenten
           5. Sektionen  6. Animationen  7. Responsive
   ========================================================================== */

/* 1. TOKENS – 1:1 aus den Figma-Variablen (Seite „Style“) ------------------ */
:root {
  --warm: #ffa600;
  --yellow: #ffbf00;
  --fresh: #fff2ca;
  --cold: #729cff;
  --kontrast: #0e0e0f;
  --cream: linear-gradient(180deg, #fff2ca 0%, #fffaed 100%);
  --inner-shadow: inset 0 0 40px 0 rgba(255, 166, 0, 0.3);

  /* Typo: Figma-Werte als Maximum, darunter skaliert es mit der Fensterbreite (clamp) */
  --fs-h1: clamp(38px, 3.7vw, 64px);
  --fs-h2: clamp(30px, 2.78vw, 48px);
  --fs-h3: clamp(23px, 1.85vw, 32px);
  --fs-lead: clamp(19px, 1.39vw, 24px);
  --fs-p: clamp(17px, 1.16vw, 20px);
  --fs-num: clamp(72px, 7.4vw, 128px);

  --pad: clamp(26px, 3.5vw, 60px);     /* Innenabstand Karten */
  --gap: 20px;                         /* Abstand zwischen Karten – auch um die Navbar */
  --nav-h: 57px;                       /* Höhe der Navbar */
  --mega-inset: 10px;                  /* Abstand Dropdown-Menü zum Fensterrand (rundum) */
  --radius: 30px;
  --radius-s: 10px;
  --container: 1400px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* weiches „ease-out-quint“ */
}

/* 2. BASIS ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-p);
  line-height: 1.2;
  color: var(--kontrast);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
em, .it { font-style: italic; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--cold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--yellow); }

.h1, .h2, .h3 { overflow-wrap: break-word; }
.h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 700; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 700; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; }
.kicker { font-size: var(--fs-h3); font-style: italic; font-weight: 400; }
.lead { font-size: var(--fs-lead); font-weight: 700; }
.light { font-weight: 300; }
.regular { font-weight: 400; }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width: min(var(--container), 100% - 32px); margin-inline: auto; position: relative; }
.section { padding-block: clamp(60px, 5.8vw, 100px); }
.section-head { text-align: center; margin-bottom: clamp(36px, 3.5vw, 60px); }
.section-head .h1 { display: block; }
.section-head .sub { display: block; font-size: var(--fs-h2); font-style: italic; font-weight: 400; line-height: 1.4; }

.row { display: flex; gap: var(--gap); }
.row > * { flex: 1 1 0; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

/* 4. KOMPONENTEN ----------------------------------------------------------- */

/* Karte – Grundform. Varianten über Modifier-Klassen (BEM-Schreibweise: block--variante) */
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --card-gap: 40px;
  gap: var(--card-gap);
  padding: var(--pad);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .4s;
}
.card > * { position: relative; z-index: 1; flex-shrink: 0; max-width: 100%; }
/* Einheitliche Abstände in ALLEN Kacheln – unabhängig vom Grundabstand (--card-gap) der Kachel:
   Subheadline (Kicker) → Headline = 20px, Headline → Inhalt = 20px.
   Trick: margin-top = Wunschabstand − Kachel-Abstand (gleicht den gap der Kachel aus). */
.card { --head-gap: 20px; --kicker-gap: 20px; }   /* Kicker-Abstand = wie im Projekte-Slider */
.card > :is(.h1, .h2, .h3) + :is(p, ul, dl, .checks, .facts) { margin-top: calc(var(--head-gap) - var(--card-gap)); }
.card > .kicker + :is(.h1, .h2, .h3) { margin-top: calc(var(--kicker-gap) - var(--card-gap)); }
/* Ausnahme: die großen Einstiegs-Kacheln (Hero) behalten ihre großzügigen Abstände */
.hero__intro > *, .hero__top > * { margin-top: 0 !important; }
.card .push { margin-top: auto; }          /* schiebt Buttons an das Kartenende */
/* Innerer Schatten aus Figma („inner-shadow“) als eigene Ebene */
.card--cream::after, .card--yellow::after, .card--soft::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--inner-shadow); transition: box-shadow .5s var(--ease); z-index: 2;
}
.card--cream { background: var(--cream); }
/* Pink-Variante (Test auf Startseiten-Hero) – gleicher Aufbau wie cream: Verlauf + innerer Schatten */
.card--pink { background: linear-gradient(180deg, #ffd3e6 0%, #fff0f6 100%); }
.card--pink::after { box-shadow: inset 0 0 40px 0 rgba(255, 64, 150, .28); }
.card--pink::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), transparent 60%); }
.card--yellow { background: var(--yellow); }
.card--warm { background: var(--warm); }
.card--cold { background: var(--cold); }
.card--dark { background: var(--kontrast); color: var(--fresh); }
.card--soft { background: rgba(255, 166, 0, 0.2); }

/* Licht-Effekt: folgt der Maus auf hellen Karten (Position kommt per JS als --mx/--my) */
.card--cream::before, .card--yellow::before, .card--soft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .75), transparent 60%);
  transition: opacity .4s;
}
.card--yellow::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 242, 202, .55), transparent 60%); }
.card.is-hover::before { opacity: 1; }

/* Hover: Karte hebt sich leicht an */
.card--lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(255, 140, 0, .55); }
.card--lift:hover::after { box-shadow: inset 0 0 60px 0 rgba(255, 166, 0, .45); }

/* Button mit Pfeil. Der Pfeil ist das Figma-SVG, als Maske eingefärbt (currentColor-Trick) */
.btn {
  --btn-bg: var(--warm); --arrow: var(--kontrast);
  position: relative; display: inline-flex; align-items: center; gap: 20px;
  padding: 20px 30px; border-radius: var(--radius-s);
  background: var(--btn-bg); font-weight: 700; font-size: var(--fs-p); line-height: 1;
  white-space: nowrap; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
}
.btn::after {
  content: ""; width: 24px; height: 15px; flex: none; background: var(--arrow);
  -webkit-mask: url(../assets/b7c9f.svg) center / contain no-repeat; mask: url(../assets/b7c9f.svg) center / contain no-repeat;
  transition: transform .45s var(--ease);
}
/* Glanz, der beim Hover einmal durchläuft */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(14, 14, 15, .45); }
.btn:hover::after { transform: translateX(6px); }
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--soft { --btn-bg: rgba(255, 166, 0, .2); }
.btn--soft:hover { --btn-bg: rgba(255, 166, 0, .38); }
.btn--ghost { --btn-bg: rgba(14, 14, 15, .1); --arrow: var(--yellow); }
.btn--ghost:hover { --btn-bg: rgba(14, 14, 15, .18); }
.btn--ghost-warm { --btn-bg: rgba(14, 14, 15, .1); --arrow: var(--warm); }
.btn--yellow { --btn-bg: var(--yellow); --arrow: #161819; color: #161819; font-size: 18px; }
.btn--icon { padding: 30px; justify-content: center; gap: 0; }
.btn--icon.prev::after { transform: scaleX(-1); }
.btn--icon.prev:hover::after { transform: scaleX(-1) translateX(6px); }

/* Fortschrittsbalken (orange) */
.progress { width: 100%; height: 10px; border-radius: 10px; background: rgba(255, 166, 0, .4); overflow: hidden; }
.progress > span {
  display: block; height: 100%; width: var(--value, 25%); background: var(--warm); border-radius: inherit;
  transform-origin: left; transition: width .9s var(--ease);
}
.progress--light { background: rgba(255, 166, 0, .35); }

/* Auswahl-Kacheln (Haustyp, Bauteil …) */
.tiles { display: flex; gap: 5px; width: 100%; }
.tiles--2x2 { display: grid; grid-template-columns: 1fr 1fr; }
.tile {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 15px; height: 173px; padding: 10px; border-radius: var(--radius-s);
  background: rgba(14, 14, 15, .1); font-size: 18px; text-align: center; line-height: 1.15;
  transition: background-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tiles--2x2 .tile { height: 120px; }
.tiles--2x2 .tile img { width: 60px; height: 45px; }
.tile img { width: 80px; height: 60px; transition: transform .5s var(--ease); }
.tile:hover { background: rgba(255, 242, 202, .45); transform: translateY(-4px); box-shadow: 0 14px 26px -16px rgba(14, 14, 15, .5); }
.tile:hover img { transform: translateY(-6px) scale(1.08) rotate(-3deg); }
.tile.is-selected { background: var(--warm); }
.tile.is-selected img { transform: scale(1.1); }

/* Checklisten */
.checks { display: flex; flex-direction: column; gap: 40px; list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 20px; font-weight: 700; font-size: var(--fs-lead); }
.checks img { width: 50px; height: 50px; flex: none; }
.checks--s { gap: 30px; }
.checks--s li { gap: 10px; font-size: var(--fs-p); }
.checks--s img { width: 20px; height: 20px; }
.checks--m { gap: 30px; }
.checks--m li { font-size: var(--fs-p); }
.checks--m img { width: 35px; height: 35px; }
.checks .it { font-weight: 400; }
.checks b + .it, .checks .it + b { margin-left: .25em; }

/* Definitionsliste (Verfahren: Kerndämmung …) */
/* gap: Zeilenabstand | Spaltenabstand */
.facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 20px; width: 100%; margin: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
.facts--tight { gap: 6px 20px; }

/* Bild-Kachel */
.media { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; background: var(--fresh); }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.media:hover img { transform: scale(1.04); }
.media--r10 { border-radius: var(--radius-s); }

/* Akkordeon (FAQ) – das Auf/Zu macht CSS über grid-template-rows 0fr → 1fr */
.accordion { display: flex; flex-direction: column; gap: 5px; }
.acc { border-radius: var(--radius); background: var(--kontrast); color: var(--fresh); transition: background-color .3s, transform .4s var(--ease); }
.acc__q {
  width: 100%; display: flex; align-items: center; gap: 40px; padding: 40px; text-align: left;
  font-size: var(--fs-h3); font-style: italic; color: var(--warm);
}
.acc__q span { flex: 1; }
.acc__q::after {
  content: ""; width: 23px; height: 23px; flex: none; background: var(--yellow);
  -webkit-mask: url(../assets/9246a.svg) center / contain no-repeat; mask: url(../assets/9246a.svg) center / contain no-repeat;
  transition: transform .5s var(--ease);
}
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc__a > div { overflow: hidden; }
.acc__a p { padding: 0 40px 40px; max-width: 900px; font-size: var(--fs-p); line-height: 1.4; opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease); }
.acc.is-open .acc__a { grid-template-rows: 1fr; }
.acc.is-open .acc__a p { opacity: 1; transform: none; transition-delay: .12s; }
.acc.is-open .acc__q::after { transform: rotate(135deg); }
.acc:hover { transform: translateX(6px); }
.accordion--light .acc { background: var(--fresh); color: var(--kontrast); }
.accordion--light .acc__q { color: var(--kontrast); }
.accordion--light .acc__q::after { background: var(--warm); }

/* 5. HEADER & MEGA-MENÜ ---------------------------------------------------- */
.site-header { position: fixed; inset: var(--gap) 0 auto; z-index: 50; transition: transform .5s var(--ease); pointer-events: none; }
.site-header.is-hidden { transform: translateY(calc(-100% - 30px)); }
.nav { display: flex; gap: 5px; pointer-events: auto; }
.nav__bar {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 30px; height: var(--nav-h); border-radius: var(--radius-s); background: var(--kontrast);
  transition: box-shadow .4s;
}
.is-scrolled .nav__bar { box-shadow: 0 16px 40px -20px rgba(14, 14, 15, .7); }
.nav__logo img { width: 81px; height: 31px; object-fit: cover; transition: transform .4s var(--ease); }
.nav__logo:hover img { transform: scale(1.06) rotate(-2deg); }
.nav__links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; display: inline-block; padding: 18px 0; line-height: 1.2; font-size: 18px; font-weight: 400; color: var(--fresh); white-space: nowrap; transition: color .25s; }
/* Hover & aktiv: nur Einfärbung, keine Unterstreichung */
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link.is-current { color: var(--yellow); }
.nav__cta { height: var(--nav-h); padding-block: 0; }
.nav__burger { display: none; }

.mega {
  /* füllt immer den ganzen Viewport – rundum derselbe Abstand zum Rand */
  position: fixed; inset: var(--mega-inset); z-index: 40;
  border-radius: var(--radius); background: var(--cream); box-shadow: var(--inner-shadow), 0 40px 80px -30px rgba(14, 14, 15, .35);
  /* Eingefahren: komplett nach oben aus dem Bild geschoben */
  transform: translateY(calc(-100% - var(--mega-inset) - 40px)); visibility: hidden;
  /* Schließen: Dropdown fährt zuerst hoch, die Ellipse folgt danach */
  transition: transform .7s cubic-bezier(.6, 0, .4, 1), visibility 0s .7s;
}
/* Öffnen: Dropdown startet etwas später als die Ellipse und läuft ihr hinterher */
.mega.is-open { transform: none; visibility: visible; transition: transform 1.1s var(--ease) .3s, visibility 0s; }
/* Inhalt: max. so hoch wie bisher (843px), vertikal mittig im Dropdown.
   Trick: top + bottom gleich groß, feste Höhe, margin auto → zentriert */
.mega__panel {
  --edge: calc(var(--gap) * 2 + var(--nav-h) - var(--mega-inset));   /* Platz unter der Navbar, oben wie unten */
  position: absolute; inset: var(--edge) 0; margin-block: auto; display: none; gap: 60px;
  height: min(843px, 100% - var(--edge) * 2);
  padding: 0 max(20px, calc((100% - var(--container)) / 2));
}
.mega__panel.is-active { display: flex; }
.mega__visual { flex: 0 0 min(50%, 834px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mega__group { display: flex; flex-direction: column; gap: 40px; }
/* Panels mit nur einer Link-Spalte: Bildbereich zu Links = 3 : 2 (:has = „enthält“) */
.mega__panel:has(.mega__cols > .mega__col:only-child) .mega__visual { flex-basis: calc((100% - 60px) * 3 / 5); }
.mega__visual .media { flex: 1; }
.mega__cards { display: flex; gap: 20px; min-height: 290px; }
.mega__cards .card { flex: 1; --card-gap: 24px; padding: 44px; border-radius: var(--radius); }
.mega__cards .card .h2 { font-size: clamp(30px, 2.5vw, 44px); }
.mega__cols { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 40px 60px; min-width: 0; }
.mega__col { display: flex; flex-direction: column; gap: 10px; }
.mega__col .label { padding-bottom: 20px; font-style: italic; color: var(--warm); font-size: 20px; }
.mega__col a { position: relative; padding: 5px 0; font-size: clamp(19px, 1.4vw, 26px); font-weight: 700; white-space: nowrap; width: fit-content; transition: transform .4s var(--ease), color .3s; }
.mega__col a::before { content: "→"; position: absolute; left: -28px; opacity: 0; color: var(--warm); transition: opacity .3s, transform .4s var(--ease); transform: translateX(-8px); }
.mega__col a:hover { transform: translateX(28px); color: #6b4600; }
.mega__col a:hover::before { opacity: 1; transform: none; }
.mega__panel.is-active .mega__visual, .mega__panel.is-active .mega__col { animation: megaIn .9s var(--ease) .45s both; }
.mega__panel.is-active .mega__col:nth-child(2) { animation-delay: .52s; }
.mega__panel.is-active .mega__col:nth-child(3) { animation-delay: .59s; }
.mega__plz { width: 100%; height: 53px; border: 0; border-radius: var(--radius-s); padding: 0 19px; font: inherit; font-size: 20px; background: #fff; }
.mega__stars { display: flex; gap: 8px; justify-content: center; margin-top: auto; }
.mega__stars i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 166, 0, .35); }
.mega__stars i:first-child { background: var(--warm); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-14px); } }
/* Ellipse hinter dem Dropdown – Verlauf aus der Ablauf-Sektion (blau → orange).
   Sie ist deutlich größer als der Viewport (160vw × 180vh), damit sie ausgefahren
   auch die Ecken abdeckt. Eingefahren wartet sie komplett oberhalb des Fensters. */
.mega-ellipse {
  /* sehr flach: 3× so breit wie das Fenster → Unterkante ist nur ein leichter Bogen */
  position: fixed; z-index: 30; left: -100vw; top: -15vh; width: 300vw; height: 130vh;
  border-radius: 50%; background: linear-gradient(180deg, var(--warm) 0%, var(--cold) 100%);
  transform: translateY(-125vh); visibility: hidden; pointer-events: none;
  transition: transform .9s cubic-bezier(.6, 0, .4, 1) .35s, visibility 0s 1.25s;
}
.mega-ellipse.is-on {
  transform: none; visibility: visible; pointer-events: auto;
  transition: transform 1.2s cubic-bezier(.22, .9, .3, 1), visibility 0s;
}

/* 6. SEKTIONEN ------------------------------------------------------------- */

/* Hero */
/* Abstand oben = Rand → Navbar (gap) + Navbar + Navbar → Inhalt (gap) */
.hero { padding-top: calc(var(--gap) * 2 + var(--nav-h)); padding-bottom: var(--gap); }
.hero__grid { display: flex; gap: var(--gap); min-height: clamp(720px, calc(100svh - var(--gap) * 4 - var(--nav-h)), 986px); }
.hero__intro { flex: 0 0 50.2%; gap: clamp(40px, 5vw, 80px); }
.hero__side { flex: 1; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.hero__side .media { flex: 1; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; }
.hero--split .hero__grid { flex-direction: column; }
.hero--split .hero__top { flex: 1; flex-direction: row; align-items: center; gap: clamp(30px, 5vw, 80px); }
.hero--split .hero__top > :first-child { flex: 0 0 min(600px, 45%); display: flex; flex-direction: column; gap: 40px; }
.hero--split .hero__bottom { flex: 1; display: flex; gap: var(--gap); min-height: 0; }
.hero--split .hero__bottom > * { flex: 1 1 0; min-width: 0; }
.hero__note { min-height: 1.2em; font-size: var(--fs-p); font-weight: 700; }

/* Hintergrund-Formen (Figma „Union“): blau→orange Kapsel bzw. Kuppel hinter Sektionen */
.blob { position: relative; isolation: isolate; overflow-x: clip; }
.blob__bg { position: absolute; z-index: -1; left: -28.07vw; width: 156.13vw; top: 0; bottom: 0; pointer-events: none; }
.blob__bg img { width: 100%; height: 100%; }
.blob--dome .blob__bg { left: -13.9vw; width: 127.7vw; top: 0; bottom: 0; }

/* Schritte „So einfach gehts“: Karten stapeln sich beim Scrollen (position: sticky) */
.steps { display: flex; flex-direction: column; gap: var(--gap); }
.step {
  position: sticky; top: calc(110px + var(--i, 0) * 22px);
  display: flex; align-items: center; gap: 40px; padding: 60px 60px 60px 80px;
  border-radius: var(--radius); background: var(--kontrast); color: var(--fresh);
  box-shadow: 0 -20px 40px -30px rgba(0, 0, 0, .6);
  transform-origin: top center;
  will-change: transform, filter, opacity;
}
.js .step.is-settled { transition: none; }
.step__num { flex: 0 0 140px; font-size: var(--fs-num); font-weight: 700; color: var(--warm); line-height: 1; }
.step__text { flex: 1; font-size: var(--fs-h3); font-weight: 700; }
.step__text em { display: block; font-weight: 400; color: var(--warm); }
.step .media { flex: 1; height: 305px; border-radius: var(--radius-s); }
/* Wärmebild: nur rechte Bildhälfte zeigen, ohne Verzerren (cover = füllt, behält Seitenverhältnis) */
.step .media--crop img { object-fit: cover; object-position: 100% 50%; scale: 1.12; transform-origin: right center; }   /* leichter Zoom blendet den Rand des Normalfotos aus */

/* Kosten-Beispiele */
/* Preisbeispiel-Kacheln: kompakte Abstände zwischen den Textelementen */
.cost { --card-gap: 14px; }
.cost .kicker { font-size: var(--fs-p); }   /* Subheadline (Außenwand, Dachboden …) in normaler Textgröße */
/* Bild oben in der Kachel, 21:9, mit abgerundeten Ecken */
.cost__img { width: 100%; aspect-ratio: 21 / 9; border-radius: 16px; overflow: hidden; margin-bottom: 6px; background: rgba(255, 242, 202, .4); }
.cost__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cost:hover .cost__img img { transform: scale(1.06); }
.cost__total { margin-top: auto; min-height: 0; width: 100%; display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--radius-s); background: var(--warm); font-weight: 700; }
.cost__total strong { font-size: var(--fs-h3); white-space: nowrap; }

/* Kosten-Check (Mehrschritt-Rechner) */
.check__stage { position: relative; width: 100%; display: grid; }
.check__step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 40px; transition: opacity .45s, transform .6s var(--ease); }
.check__step[hidden] { display: flex; position: absolute; inset: 0 0 auto; visibility: hidden; opacity: 0; transform: translateX(40px); pointer-events: none; }
.check__step.is-leaving { opacity: 0; transform: translateX(-40px); }
.check__q { font-size: var(--fs-lead); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.check__back { font-size: 16px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; opacity: .75; }
.check__back:hover { opacity: 1; }
.range { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.range__val { font-size: var(--fs-h2); font-weight: 700; }
.range input { width: 100%; accent-color: var(--warm); height: 28px; }
.result { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius-s); background: rgba(255, 242, 202, .4); }
.result__big { font-size: var(--fs-h2); font-weight: 700; }
.result small { font-size: 15px; opacity: .75; }
.result .cost__total { margin: 0; }

/* Projekte-Slider */
/* Slides liegen in derselben Grid-Zelle übereinander → Höhe = längster Slide, nichts springt */
.slider__slides { display: grid; width: 100%; }
.slider__slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 20px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s, transform .6s var(--ease), visibility 0s .6s; }
.slider__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .15s, transform .7s var(--ease) .15s, visibility 0s; }
.slider__media { min-height: clamp(240px, 22vw, 360px); }
.slider__media .slider__img { opacity: 0; transform: scale(1.06); transition: opacity .8s, transform 1.4s var(--ease); }
.slider__media .slider__img.is-active { opacity: 1; transform: scale(1); }
.slider__nav { display: flex; gap: var(--gap); }
.slider__nav .btn { flex: 1; box-shadow: var(--inner-shadow); }

/* Bewertungen – Endlos-Laufband (Marquee) */
.marquee { overflow: hidden; margin-inline: calc(50% - 50vw); padding-block: 10px; mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--gap); width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.review { width: clamp(300px, 26vw, 450px); flex: none; }
.review img { width: 175px; height: 35px; }
.review p { font-style: italic; }
.review strong { display: block; margin-top: 1.2em; font-style: normal; }
.rating-star { display: inline-block; width: .62em; height: .6em; margin: 0 .18em; vertical-align: .02em; animation: spin 6s var(--ease) infinite; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes spin { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(144deg); } }

/* „Was bringt Sie zu uns?“ */
.intent__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.intent__opt {
  padding: 22px 18px; border-radius: var(--radius-s); background: rgba(14, 14, 15, .08); font-weight: 700; font-size: var(--fs-p); text-align: center;
  transition: background-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.intent__opt:hover { background: rgba(255, 242, 202, .55); transform: translateY(-3px); box-shadow: 0 12px 24px -16px rgba(14, 14, 15, .5); }
.intent__opt.is-selected { background: var(--warm); }
.intent__next { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.intent__next:not(.is-on) { display: none; }   /* Nachricht + Button erst nach der Auswahl */
.intent__next.is-in { animation: megaIn .6s var(--ease) both; }
.intent__msg { font-size: var(--fs-p); }
@media (max-width: 760px) { .intent__opts { grid-template-columns: 1fr; } }

/* Vergleich (Innen / Kern / Außen) */
.compare .card { --card-gap: 5px; }
.pill { width: 100%; padding: 12px; border-radius: var(--radius-s); background: rgba(255, 242, 202, .4); font-weight: 700; transition: transform .4s var(--ease), background-color .3s; }
.pill.is-good { background: var(--fresh); }
.pill em { font-weight: 400; }
.compare .card:hover .pill { transform: translateX(4px); }
.compare .card:hover .pill:nth-child(3) { transition-delay: .03s; } .compare .card:hover .pill:nth-child(4) { transition-delay: .06s; }
.compare .card:hover .pill:nth-child(5) { transition-delay: .09s; } .compare .card:hover .pill:nth-child(6) { transition-delay: .12s; }

/* Ablauf Kerndämmung: Mauer bleibt stehen (sticky), Schritte scrollen vorbei */
.process { display: flex; gap: 40px; align-items: flex-start; }
.process__visual { flex: 1; position: sticky; top: 0; padding: 180px 60px 40px; }

/* 3D-Version (js/wall3d.js): füllt die ganze Bildschirmhöhe und bleibt stehen, während die Schritte scrollen */
.process__visual.is-3d { height: 100svh; padding: 0; }
.process__visual.is-3d .wall { display: none; }                 /* 2D-Grafik bleibt als Fallback im HTML */
/* Canvas ist größer als der Bildbereich (nach rechts unter die Kacheln und bis zum unteren Rand),
   damit der Schatten der Mauer nie abgeschnitten wird. Die Kamera rechnet trotzdem mit dem Bildbereich. */
.wall3d__canvas { position: absolute; top: -12%; left: -10%; width: 160%; height: 130%; display: block; pointer-events: none; }
.wall3d__hud {
  position: absolute; left: 0; bottom: calc(var(--gap) * 2); display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 14px; border-radius: 99px; background: var(--kontrast); color: var(--fresh);
  box-shadow: 0 16px 30px -18px rgba(14, 14, 15, .8); font-size: 16px;
}
.wall3d__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warm); color: var(--kontrast); font-weight: 700; font-size: 14px; }
.wall3d__label { font-style: italic; min-width: 12ch; }
.wall3d__dots { display: flex; gap: 6px; }
.wall3d__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 242, 202, .25); transition: background-color .4s, transform .4s var(--ease); }
.wall3d__dots i.is-on { background: var(--warm); }
.wall3d__hud.is-swap .wall3d__num, .wall3d__hud.is-swap .wall3d__label { animation: hudSwap .5s var(--ease); }
@keyframes hudSwap { from { opacity: 0; transform: translateY(8px); } }
.wall { position: relative; aspect-ratio: 465 / 635; width: 100%; transition: transform .8s var(--ease); }
.wall img { position: absolute; width: auto; height: auto; }
.wall__fill {
  position: absolute; inset: 4.88% 13.33% 12.2% 33.33%; z-index: 0;
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0); transition: clip-path .2s linear;
  background: repeating-radial-gradient(circle at 30% 30%, #fff2ca 0 3px, #ffd36b 3px 6px);
  -webkit-mask: url(../assets/b4e86.svg) center / 100% 100% no-repeat; mask: url(../assets/b4e86.svg) center / 100% 100% no-repeat;
}
.wall__holes { position: absolute; inset: 20% 30% 15% 5%; z-index: 3; pointer-events: none; }
.wall__holes i {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--kontrast); box-shadow: 0 0 0 3px rgba(255, 166, 0, .6);
  transform: scale(0); transition: transform .5s var(--ease), background-color .5s;
}
.wall[data-step="3"] .wall__holes i, .wall[data-step="4"] .wall__holes i { transform: scale(1); }
.wall[data-step="5"] .wall__holes i { transform: scale(1); background: #ffe7a3; box-shadow: none; }
.wall__scope { position: absolute; z-index: 4; width: 34%; aspect-ratio: 1; left: 40%; top: 32%; border-radius: 50%; border: 6px solid var(--kontrast); background: radial-gradient(circle, rgba(114, 156, 255, .25), rgba(14, 14, 15, .55)); opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s var(--ease); }
.wall[data-step="1"] .wall__scope { opacity: 1; transform: scale(1); }
.wall__heat { position: absolute; z-index: 4; inset: 8% 25% 0 0; border-radius: 12px; mix-blend-mode: multiply; opacity: 0; transition: opacity .6s; background: radial-gradient(60% 40% at 40% 45%, #ff3d00, #ffb300 50%, #729cff 90%); }
.wall[data-step="2"] .wall__heat { opacity: .75; }
.process__steps { flex: 0 0 48%; display: flex; flex-direction: column; gap: 10px; padding-top: 100px; }
/* Halte-Modus (Desktop, gesetzt von js/wall3d.js): Die Sektion wird höher (--hold-h), die Kachel-Spalte
   bleibt stehen und JS verschiebt die Kacheln: aktive Kachel hängt mittig und driftet langsam, dann gleitet die nächste nach. */
/* Bühne: Animation + Kacheln bleiben gemeinsam mittig im Fenster stehen (Höhe --stage-h, Abstand oben --stick-top). */
.process.is-hold { height: var(--hold-h); overflow-y: clip; }   /* nichts ragt aus der Sektion heraus */
.process.is-hold .process__visual, .process.is-hold .process__steps { position: sticky; top: var(--stick-top); height: var(--stage-h); }
.process.is-hold .process__steps { padding-top: 0; z-index: 1; }
/* Optional: Nachbar-Kacheln oben/unten weich ausblenden – dazu diese Zeile wieder einkommentieren:
.process.is-hold .process__steps { -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); } */
.process.is-hold .wall3d__hud { bottom: -64px; }   /* Schritt-Anzeige knapp unter der Bühne, nicht über der Wand */
.process.is-hold .process__track { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.pstep { flex-direction: column; align-items: flex-start; --card-gap: 40px; padding: 60px 60px 60px 80px; transform: scale(.97); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.pstep > * { opacity: .35; transition: opacity .5s; }
.pstep.is-active { transform: none; box-shadow: 0 30px 60px -30px rgba(14, 14, 15, .8); }
.pstep.is-active > * { opacity: 1; }
.pstep .step__num { font-size: clamp(64px, 5.6vw, 96px); flex: none; }
.pstep .step__text { font-size: var(--fs-h3); }

/* Festpreis-Leiste */
.included { align-items: center; text-align: center; }
.included ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.included li { display: flex; align-items: center; gap: 15px; font-weight: 700; text-align: left; }
.included img { width: 30px; height: 30px; }

/* Footer */
.footer-wrap { padding-top: clamp(120px, 11.6vw, 200px); }
.footer { margin-top: var(--gap); --card-gap: 80px; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 40px; width: 100%; }
.footer__cols > div { flex: 1 1 230px; display: flex; flex-direction: column; }
.footer__logo { width: 151px; height: 57px; object-fit: cover; margin-bottom: 40px; }
.footer .hl { color: var(--yellow); font-weight: 700; }
.footer a { width: fit-content; transition: color .25s, transform .3s var(--ease); }
.footer__cols a:hover { color: var(--yellow); transform: translateX(4px); }
.footer address { font-style: normal; }
.footer u { text-underline-offset: 3px; }
.footer__regions { color: var(--warm); }
.footer__partner { width: 193px; height: 77px; object-fit: cover; margin-top: 20px; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px 0 40px; }
.legal a:hover { text-decoration: underline; }

/* 7. ANIMATIONEN BEIM SCROLLEN ----------------------------------------------
   Elemente mit [data-reveal] starten unsichtbar; JS setzt .is-in, sobald sie im Bild sind. */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal="left"] { transform: translateX(-50px); }
.js [data-reveal="right"] { transform: translateX(50px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Headline-Zeilen fahren von unten ein */
.js .hero__title .line > span { transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .is-loaded .hero__title .line > span { transform: none; }
.js .hero .media img { transform: scale(1.15); transition: transform 2.2s var(--ease); }
.js .is-loaded .hero .media img { transform: scale(1); }
.js .hero .media:hover img { transform: scale(1.04); }

@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-reveal], .js .hero__title .line > span, .js .hero .media img { opacity: 1; transform: none; }
}

/* 8. RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 1280px) {
  .nav__links { gap: 14px; }
  .nav__link { font-size: 16px; }
  .mega__visual { flex-basis: 52%; }
  .mega__cols { gap: 36px; flex-wrap: wrap; align-content: flex-start; }
}
@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; align-items: center; gap: 10px; color: var(--fresh); font-weight: 700; font-size: 16px; padding: 10px 0; }
  .nav__burger i { width: 26px; height: 2px; background: var(--yellow); position: relative; transition: background-color .3s; }
  .nav__burger i::before, .nav__burger i::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--yellow); transition: transform .4s var(--ease); }
  .nav__burger i::before { top: -8px; } .nav__burger i::after { top: 8px; }
  .nav__burger[aria-expanded="true"] i { background: transparent; }
  .nav__burger[aria-expanded="true"] i::before { transform: translateY(8px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i::after { transform: translateY(-8px) rotate(-45deg); }
  .mega { overflow-y: auto; }
  .mega__panel { position: static; height: auto; margin: 0; flex-direction: column; padding: 30px 26px 40px; gap: 30px; }
  .mega__tabs { padding: 96px 26px 0; }
  .mega__col a { white-space: normal; }
  .mega__panel:not(.is-active) { display: none; }
  .mega__visual { display: none; }
  .mega__tabs { display: flex !important; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero__grid, .hero--split .hero__bottom { height: auto; flex-direction: column; }
  .hero__intro { flex-basis: auto; }
  .hero__side .media, .hero--split .hero__bottom .media { min-height: 340px; flex: none; }
  .hero--split .hero__top { flex-direction: column; align-items: flex-start; }
  .row.wrap-md { flex-direction: column; }
  /* Im Spalten-Layout feste Breiten aus dem Desktop (auch Inline-Styles) aufheben */
  .row.wrap-md > *, .hero--split .hero__bottom > * { flex: none !important; width: 100%; }
  .row.wrap-md > .media { min-height: 320px; }
  .process { flex-direction: column; }
  .process__visual { position: relative; padding: 20px 22% 40px; width: 100%; }
  /* Mobil: 3D-Fenster klebt oben, die Schritte laufen darunter durch */
  .process__visual.is-3d { flex: none; position: sticky; top: calc(var(--nav-h) + var(--gap) * 2); z-index: 2; height: 46svh; border-radius: var(--radius); background: var(--cream); box-shadow: var(--inner-shadow), 0 20px 40px -24px rgba(14, 14, 15, .5); }
  .process__visual.is-3d .wall3d__canvas { left: 0; width: 100%; height: 100%; }
  .process__visual.is-3d .wall3d__hud { left: 12px; bottom: 12px; font-size: 14px; padding: 8px 12px 8px 8px; }
  .process__visual.is-3d .wall3d__dots { display: none; }
  .process__steps { flex-basis: auto; padding-top: 0; }
  .pstep, .pstep > * { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .h1, .h2, .h3 { hyphens: auto; }   /* Silbentrennung nur auf kleinen Bildschirmen */
  :root { --gap: 14px; --radius: 22px; }
  .grid-3, .grid-2, .tiles--2x2 { grid-template-columns: 1fr; }
  .row { flex-direction: column; }
  .row > * { flex: none !important; width: 100%; }
  .tiles { flex-wrap: wrap; }
  .tile { flex: 1 1 40%; height: 130px; }
  .step { flex-direction: column; align-items: flex-start; padding: 30px; gap: 20px; position: relative; top: auto; }
  .step__num { flex: none; }
  .step .media { width: 100%; flex: none; height: 220px; }
  .acc__q { padding: 26px; gap: 20px; }
  .acc__a p { padding: 0 26px 26px; }
  .pstep { padding: 30px; }
  .facts { grid-template-columns: 110px 1fr; }
  .btn { white-space: normal; }
  .marquee__track { animation-duration: 35s; }
}
.mega__tabs { display: none; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; }
.mega__tabs button { padding: 10px 16px; border-radius: 99px; background: rgba(255, 166, 0, .2); font-weight: 700; }
.mega__tabs button[aria-selected="true"] { background: var(--warm); }
.process__track { display: flex; flex-direction: column; gap: 10px; }

/* Flache Hintergrund-Form (Kerndämmung): per CSS statt gestrecktem SVG.
   border-radius „50% / --cap“ = Ecken als flache Ellipse → oben und unten ein leichter Bogen
   mit fester Höhe, egal wie hoch die Sektion wird. */
.blob--flat .blob__bg { --cap: clamp(80px, 8vw, 140px); background: linear-gradient(180deg, var(--cold) 0%, var(--warm) 100%); border-radius: 50% / var(--cap); }

/* Bauteil-Kacheln mit ruhigem Struktur-Foto (Klinker, Ziegel, Holz …).
   ::before = Foto (zoomt beim Hover), ::after = dunkler Verlauf für lesbare weiße Schrift.
   Das Foto kommt pro Kachel über eine Klasse (tex-…), siehe unten. */
.card--photo { background: var(--kontrast); color: #fff; }
.card--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--bg) center / cover no-repeat; transition: transform 1.4s var(--ease); }
.card--photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(165deg, rgba(14, 14, 15, .42) 0%, rgba(14, 14, 15, .78) 100%); transition: background .5s; }
.card--photo:hover::before { transform: scale(1.07); }
.card--photo:hover::after { background: linear-gradient(165deg, rgba(14, 14, 15, .32) 0%, rgba(14, 14, 15, .72) 100%); box-shadow: none; }
.card--photo .h3 { color: var(--yellow); }
.card--photo .btn--soft { --btn-bg: rgba(255, 255, 255, .16); --arrow: var(--yellow); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card--photo .btn--soft:hover { --btn-bg: rgba(255, 255, 255, .26); }
/* Struktur-Fotos (Magnific, siehe assets/img/BILDNACHWEIS.md) */
.tex-aussenwand { --bg: url(../assets/img/tex-aussenwand.jpg); }
.tex-dachboden { --bg: url(../assets/img/tex-dachboden.jpg); }
.tex-dachschraege { --bg: url(../assets/img/tex-dachschraege.jpg); }
.tex-flachdach { --bg: url(../assets/img/tex-flachdach.jpg); }
.tex-gewerbe { --bg: url(../assets/img/tex-gewerbe.jpg); }

/* ==========================================================================
   EINSTIEG STARTSEITE: großes Bild auf voller Container-Breite + Claim
   ========================================================================== */
.intro { padding-top: calc(var(--gap) * 2 + var(--nav-h)); }
.intro__stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); background: #1c130c;
  height: clamp(520px, calc(100svh - var(--gap) * 3 - var(--nav-h) - 70px), 900px);   /* etwas niedriger als das Fenster */
}
.intro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; z-index: -2; }
.js .intro__img { transform: scale(1.1); transition: transform 2.6s var(--ease); }
.js .is-loaded .intro__img { transform: scale(1); }
/* Überlagerung: 20°-Verlauf, dunkelt nur die Ecke unten links (Claim) ab – ab 42 % sind die Farben wieder satt */
.intro__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(20deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.32) 18%, rgba(0, 0, 0, 0) 42%);
}
.intro__content { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); max-width: 980px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; color: #fff; }
.intro__claim { font-size: clamp(48px, 6vw, 104px); line-height: .98; font-weight: 700; letter-spacing: -0.02em; }
.intro__claim em { font-weight: 400; color: var(--yellow); }
/* Glas-Button für dunkle Hintergründe */
.btn--glass { --btn-bg: rgba(255, 255, 255, .16); --arrow: var(--yellow); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { --btn-bg: rgba(255, 255, 255, .26); }

/* Die frühere Hero-Sektion steht jetzt an zweiter Stelle */
.hero--after { padding-top: var(--gap); }
.js .is-loaded .hero--after .hero__title .line > span { transform: translateY(110%); }
.js .is-loaded .hero--after .hero__title.is-in .line > span { transform: none; }

@media (max-width: 760px) {
  .intro__img { object-position: 62% 50%; }
  .intro__stage { height: max(560px, calc(100svh - var(--gap) * 3 - var(--nav-h))); }
  .intro__content { gap: 20px; }
}

/* ==========================================================================
   „Warum Kerndämmung?“ – Karten-Fächer (Seite Außenwand)
   Mitte groß und vorne. Die äußeren Karten stehen kleiner, leicht gedreht und
   ein Stück hinter der Mitte. --p (0 → 1) setzt JS beim Scrollen:
   je weiter man scrollt, desto mehr kommen die äußeren Karten hervor.
   Nur auf breiten Bildschirmen – darunter stehen die Karten normal untereinander.
   ========================================================================== */
@media (min-width: 1101px) {
  .compare__deck { --p: 0; align-items: center; padding-block: 30px; }
  .compare__deck > .card { transition: box-shadow .5s var(--ease); will-change: transform, opacity; }
  .compare__deck > :nth-child(2) {
    z-index: 3; transform: scale(1.07);
    box-shadow: 0 40px 80px -30px rgba(255, 140, 0, .9), 0 0 0 1px rgba(255, 255, 255, .25) inset;
  }
  .compare__deck > :nth-child(1), .compare__deck > :nth-child(3) {
    z-index: 1; opacity: calc(.5 + var(--p) * .5);
    filter: saturate(calc(.75 + var(--p) * .25));
  }
  /* flach gedreht (keine 3D-Verzerrung): unten nach innen, oben schaut die Karte weiter heraus */
  .compare__deck > :nth-child(1) {
    transform-origin: 50% 100%;
    transform: translateX(calc((1 - var(--p)) * 36% + 14%)) rotate(calc(-2.5deg - (1 - var(--p)) * 3deg)) scale(calc(.82 + var(--p) * .06));
  }
  .compare__deck > :nth-child(3) {
    transform-origin: 50% 100%;
    transform: translateX(calc((1 - var(--p)) * -36% - 14%)) rotate(calc(2.5deg + (1 - var(--p)) * 3deg)) scale(calc(.82 + var(--p) * .06));
  }
}

/* ==========================================================================
   SEITE ANFRAGE & FORMULARE (anfrage.html, js/funnels.js)
   ========================================================================== */
.fx-intro { flex-direction: row; align-items: center; gap: clamp(30px, 5vw, 80px); }
.fx-intro__text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.fx-note { flex: 0 0 min(460px, 40%); display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 20px; background: rgba(255, 166, 0, .14); }
.fx-note__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9a5d00; }
.fx-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-weight: 700; }
.fx-rules li { display: flex; gap: 10px; align-items: center; }
.fx-rules img { width: 20px; height: 20px; }
.fx-jump { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fx-jump a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: var(--radius-s); background: var(--kontrast); color: var(--fresh); font-weight: 700; transition: transform .35s var(--ease), background-color .3s; }
.fx-jump a b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--warm); color: var(--kontrast); font-size: 14px; flex: none; }
.fx-jump a:hover { transform: translateY(-3px); background: #26262a; }

.fx-block { padding-block: clamp(30px, 3vw, 50px); }
.fx-block .row { align-items: stretch; }
.fx-info { flex: 0 0 42% !important; }
.fx-num { font-size: clamp(56px, 5vw, 88px); font-weight: 700; line-height: .9; color: var(--warm); }
.fx-steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.fx-meta { font-size: 17px; line-height: 1.4; }
.fx-where { margin-top: auto; font-size: 15px; padding-top: 14px; border-top: 1px solid rgba(14, 14, 15, .12); width: 100%; color: rgba(14, 14, 15, .7); }
.fx-map { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fx-map li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--radius-s); background: rgba(255, 166, 0, .14); font-weight: 700; }
.fx-map li span:last-child { font-weight: 400; }
.fx-common { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; background: rgba(255, 166, 0, .14); font-size: 17px; line-height: 1.4; }

/* Formular-Karte (blau) */
.fx-form { gap: 20px; justify-content: flex-start; min-height: 560px; }
.fx-form > [data-funnel] { width: 100%; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.fx-title { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-title span { opacity: .6; }
.fx-view { display: flex; flex-direction: column; gap: 18px; flex: 1; animation: megaIn .5s var(--ease) both; }
.fx-q { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; }
.fx-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fx-opt {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; border-radius: var(--radius-s);
  background: rgba(14, 14, 15, .1); font-size: 18px; text-align: left; transition: background-color .25s, transform .35s var(--ease);
}
.fx-opt img { width: 48px; height: 36px; flex: none; transition: transform .4s var(--ease); }
.fx-opt:hover { background: rgba(255, 242, 202, .45); transform: translateY(-2px); }
.fx-opt:hover img { transform: scale(1.08) rotate(-3deg); }
.fx-opt.is-selected { background: var(--warm); }
.fx-opt.is-wide { grid-column: 1 / -1; justify-content: center; }
.fx-opts--tiles .fx-opt { flex-direction: column; justify-content: center; text-align: center; min-height: 120px; }
.fx-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fx-link { font-size: 16px; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.fx-link:hover { opacity: 1; }
.fx-back { align-self: flex-start; font-size: 15px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: rgba(14, 14, 15, .12); }
.btn:disabled { opacity: .45; pointer-events: none; }

.fx-contact { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.fx-contact .fx-hint { margin-top: -8px; }
.fx-field { display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: 15px; font-weight: 700; }
.fx-field i, .fx-radio i { font-weight: 400; opacity: .7; }
.fx-field :is(input, select, textarea) {
  width: 100%; border: 2px solid transparent; border-radius: var(--radius-s); padding: 14px 16px; font: inherit; font-size: 18px; font-weight: 400;
  background: #fff; color: var(--kontrast); transition: border-color .2s, box-shadow .2s;
}
.fx-field :is(input, select, textarea):focus { outline: none; border-color: var(--warm); box-shadow: 0 0 0 4px rgba(255, 166, 0, .25); }
.fx-field .is-invalid { border-color: #d93a1b; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.fx-hint { font-size: 15px; opacity: .85; }
.fx-radio { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; }
.fx-radio legend { width: 100%; margin-bottom: 6px; font-weight: 700; }
.fx-radio label span { display: inline-block; padding: 10px 16px; border-radius: 99px; background: rgba(14, 14, 15, .1); cursor: pointer; transition: background-color .2s; }
.fx-radio input { position: absolute; opacity: 0; pointer-events: none; }
.fx-radio input:checked + span { background: var(--warm); }
.fx-radio input:focus-visible + span { outline: 3px solid var(--fresh); }
.fx-captcha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: rgba(255, 255, 255, .55); font-size: 15px; }
.fx-captcha small { margin-left: auto; opacity: .6; }
.fx-captcha__box { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(14, 14, 15, .35); flex: none; }
.fx-captcha[data-state="busy"] .fx-captcha__box { border-color: var(--warm) transparent var(--warm) transparent; animation: spin 1s linear infinite; }
.fx-captcha[data-state="done"] .fx-captcha__box { border: 0; background: #2f9e44; box-shadow: inset 0 0 0 5px #2f9e44, inset 0 0 0 10px #fff; }
.fx-error { color: #8f1d06; font-weight: 700; font-size: 15px; min-height: 1.2em; }
.fx-legal { font-size: 13px; opacity: .75; }
.fx-legal a { text-decoration: underline; }

.fx-result { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fx-result .cost__total { margin: 0; }
.fx-person { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .55); }
.fx-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.fx-person div { display: flex; flex-direction: column; gap: 2px; }
.fx-person small { opacity: .6; font-size: 13px; }
.fx-person--big img { width: 84px; height: 84px; }
.fx-person--big b { font-size: var(--fs-h3); }
.fx-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; animation: megaIn .6s var(--ease) both; }
.fx-thanks details { width: 100%; padding: 16px 18px; border-radius: 16px; background: rgba(255, 242, 202, .45); font-size: 16px; }
.fx-thanks summary { font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.fx-thanks .facts { grid-template-columns: 150px 1fr; }

.fx-switch { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.fx-switch button { padding: 8px 14px; border-radius: 99px; background: rgba(14, 14, 15, .1); font-weight: 700; }
.fx-switch button.is-on { background: var(--kontrast); color: var(--fresh); }

.fx-todo ul { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.fx-todo li { position: relative; padding: 16px 18px 16px 50px; border-radius: var(--radius-s); background: rgba(255, 166, 0, .12); line-height: 1.35; }
.fx-todo li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(14, 14, 15, .35); }
.fx-todo li.is-done::before { border: 0; background: url(../assets/744d8.svg) center / contain no-repeat; }
.fx-todo li span { display: block; margin-top: 4px; font-size: 14px; opacity: .7; }
.fx-todo li:not(.is-done) span { color: #9a5d00; opacity: 1; font-weight: 700; }

@media (max-width: 1100px) {
  .fx-intro { flex-direction: column; align-items: stretch; }
  .fx-note { flex-basis: auto; }
  .fx-jump { grid-template-columns: repeat(3, 1fr); }
  .fx-info { flex-basis: auto !important; }
}
@media (max-width: 760px) {
  .fx-jump { grid-template-columns: 1fr 1fr; }
  .fx-grid, .fx-opts { grid-template-columns: 1fr; }
  .fx-form { min-height: 0; }
}