/* ==========================================================================
   Vorbesichtigt — Seitenlayout (nutzt ausschließlich Tokens)
   ========================================================================== */

section { position: relative; }
.section-head { display: grid; gap: var(--spacing-18); margin-bottom: var(--spacing-54); max-width: 900px; }
.section-head__sub { max-width: 560px; }
.on-dark { background: var(--surface-dark); color: var(--text-on-dark); }

/* ---------- Topbar ---------- */
.topbar__inner {
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-18);
  min-height: 52px; padding-block: var(--spacing-8);
}
.topbar p { color: var(--text-on-dark-muted); }
@media (max-width: 560px) { .topbar__more { display: none; } .topbar .btn { padding: 8px 14px; font-size: 14px; } }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 0%, transparent);
  transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--shadow-subtle-2);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); height: 72px; }
.logo { display: inline-flex; align-items: center; gap: var(--spacing-10); text-decoration: none; font-size: 17px; font-weight: var(--weight-heading); letter-spacing: -0.03em; }
.logo__mark { width: 36px; height: 36px; transition: transform var(--dur-slow) var(--ease-out); }
.logo:hover .logo__mark { transform: translateY(-2px) rotate(-4deg); }
.nav__links { display: flex; gap: var(--spacing-6); }
.nav__links a {
  padding: 9px 14px; border-radius: var(--radius-pills);
  font-size: 15px; text-decoration: none; color: var(--text);
  transition: background var(--dur-fast) ease;
}
.nav__links a:hover { background: var(--tint); }
.nav__cta { padding: 11px 16px; }
@media (max-width: 860px) { .nav__links { display: none; } }

/* ---------- Einstieg (Standbild) ----------
   Foto in voller Breite, Text links darüber. Keine Bewegung: Der frühere
   scrollgesteuerte Film ist gemessen an der Bildanzahl gescheitert (zu wenige
   verschiedene Bilder je Sekunde bei Lesetempo), Überblenden erzeugte
   Doppelkonturen. Lesbarkeit kommt allein aus der Wolke hinter dem Text.
--------------------------------------------------------------------- */
.einstieg {
  position: relative; isolation: isolate; overflow: hidden; background: #000;
  min-height: clamp(560px, 88vh, 960px); min-height: clamp(560px, 88svh, 960px);
  display: grid; align-items: stretch;
}
.einstieg__stage { position: absolute; inset: 0; z-index: 0; }
.einstieg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.einstieg__layer {
  position: relative; z-index: 1; height: 100%;
  display: grid; align-items: center; justify-items: start;
  padding-block: clamp(96px, 12vh, 160px);
}
.einstieg__copy { display: grid; gap: var(--spacing-14); max-width: 640px; }

/* Die Wolke: mehrere weiche Kreise, stark geweichzeichnet – keine Kante, kein Kasten. */
.einstieg__cloud {
  position: absolute; z-index: -1; pointer-events: none;
  left: -18vw; width: min(108vw, 1180px);
  top: 50%; height: min(96vh, 900px); transform: translateY(-50%);
  background:
    radial-gradient(46% 40% at 32% 44%, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0) 72%),
    radial-gradient(34% 46% at 50% 58%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 74%),
    radial-gradient(58% 32% at 24% 66%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 76%),
    radial-gradient(30% 34% at 44% 32%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 78%);
  filter: blur(34px);
}

.einstieg__eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(12px, 1.15vw, 16px); letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.einstieg__title {
  font-size: clamp(44px, 7.2vw, 116px); font-weight: var(--weight-heading, 700);
  line-height: 0.82; letter-spacing: -0.042em; color: #fff; max-width: 17ch;
  text-wrap: balance;
}
.einstieg__lede { font-size: clamp(16px, 1.4vw, 18px); color: rgba(255, 255, 255, 0.78); max-width: 44ch; }
.einstieg__guarantee {
  font-size: clamp(16px, 1.4vw, 18px); color: #fff; max-width: 44ch;
  border-left: 2px solid var(--color-sky-blue); padding-left: var(--spacing-12);
}
.einstieg__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-10); margin-top: var(--spacing-6); }
.einstieg__todo { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8em; opacity: 0.7; margin-left: 0.4em; }
.btn--on-hero { color: #fff; border-color: rgba(255, 255, 255, 0.45); background: transparent; }
.btn--on-hero:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.einstieg__credit {
  position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 3vh, 28px); z-index: 1;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 860px) { .einstieg__title { max-width: 14ch; } }

.intro { padding-block: clamp(48px, 7vw, 88px); }

/* ---------- Hero (Altbestand, weiter genutzt von .intro) ---------- */
.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); }
.hero__title { margin-top: var(--spacing-30); max-width: 12ch; }
.hero__row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) auto; align-items: end;
  gap: var(--spacing-36); margin-top: clamp(36px, 5vw, 64px);
}
.hero__lede { max-width: 620px; color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-10); }
.hero__shot {
  position: relative; margin: clamp(48px, 6vw, 80px) 0 0; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: var(--radius-specialty); box-shadow: var(--shadow-subtle);
  background: var(--surface-warm);
}
.hero__shot img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(calc(1.07 - var(--p, 0) * 0.07)); /* ruhiger Zoom beim Scrollen */
}
.hero__shot-chip {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 8px 14px; border-radius: var(--radius-pills);
  background: rgba(253, 253, 247, 0.88); box-shadow: var(--shadow-subtle-2);
  font-size: var(--text-caption); line-height: 1.2;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 620px) { .hero__shot { aspect-ratio: 4 / 3; } }

.hero__facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24);
  margin-top: clamp(56px, 7vw, 96px); padding-top: var(--spacing-24);
  border-top: 1px solid var(--border);
  font-size: var(--text-body-sm);
}
.hero__facts li { display: grid; gap: var(--spacing-6); }
.hero__fact-k { font-size: var(--text-caption-sm); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 860px) {
  .hero__row { grid-template-columns: 1fr; }
.hero__facts { grid-template-columns: 1fr; gap: var(--spacing-16); }
}

/* ---------- Build: Grundriss → 3D ---------- */
.build { height: 360vh; }
.build__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 72px; }
.build__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.build__copy { display: grid; gap: var(--spacing-30); }
.build__title .inline-render { width: 0.9em; }

.build__ticks { position: relative; display: flex; gap: var(--spacing-24); padding-bottom: var(--spacing-12); font-size: var(--text-caption); }
.build__tick { color: var(--text-subtle); transition: color var(--dur-base) ease; }
.build__tick.is-active { color: var(--text); }
.build__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.build__bar span { position: absolute; inset: 0; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.build__steps { display: grid; }
.step {
  grid-area: 1 / 1; display: grid; gap: var(--spacing-12); align-content: start;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity var(--dur-base) ease, transform var(--dur-slow) var(--ease-out);
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }

.build__stage {
  position: relative; height: min(76vh, 640px);
  background: var(--surface-warm);
  border-radius: var(--radius-specialty);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}
.stage__chip {
  position: absolute; left: 18px; top: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 8px 14px; border-radius: var(--radius-pills);
  background: rgba(253, 253, 247, 0.85); box-shadow: var(--shadow-subtle-2);
  font-size: var(--text-caption); line-height: 1.2;
}
.stage__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.stage__chip.is-live .stage__dot { animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 5px rgba(0, 150, 247, 0.2); } }
.stage__scale {
  position: absolute; right: 22px; bottom: 20px; z-index: 3;
  display: flex; align-items: center; gap: 8px; font-size: var(--text-caption-sm); color: var(--text-muted);
  opacity: calc(1 - var(--t1, 0) * 2);
}
.stage__scale span { display: block; width: 40px; height: 6px; border: 1px solid currentColor; border-top: 0; }

@media (max-width: 900px) {
  .build { height: 320vh; }
  .build__sticky { align-items: flex-start; padding-top: 88px; }
  .build__grid { grid-template-columns: 1fr; gap: var(--spacing-18); }
  .build__copy { gap: var(--spacing-16); }
  .build__title { font-size: 34px; }
  .build__steps .t-subheading { font-size: 21px; }
  .build__steps .t-body { font-size: var(--text-body-sm); }
  .build__stage { height: 46svh; min-height: 300px; }
}

/* ---- 3D-Modell ---- */
.plan {
  --rx: 0; --rz: 0; --wall: 0; --tex: 0; --k: 1;
  position: absolute; left: 50%; top: 50%;
  width: 520px; height: 360px; margin: -180px 0 0 -260px;
  transform-style: preserve-3d;
  transform: perspective(2000px) translateY(calc(var(--t1, 0) * 24px)) scale(var(--k))
    rotateX(calc(var(--rx) * 1deg)) rotateZ(calc(var(--rz) * 1deg));
}
.plan * { transform-style: preserve-3d; }
.plan__floor { position: absolute; inset: 0; background: var(--color-parchment); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.plan__blueprint { position: absolute; inset: -40px; width: 600px; height: 440px; opacity: calc(1 - var(--tex)); overflow: visible; }
.room {
  position: absolute; opacity: var(--tex);
}
.room--wood {
  background:
    repeating-linear-gradient(90deg, rgba(90, 60, 20, 0.07) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, #dfc9a6, #d2b891);
}
.room--tile {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 22px),
    #eceae1;
}
.room--rug { background: rgba(55, 80, 51, 0.22); border-radius: 4px; }
.room__label {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) translateZ(1px);
  text-align: center; font-size: 11px; line-height: 1.35; letter-spacing: 0.02em; color: var(--text);
  opacity: calc(1 - var(--wall) * 0.6);
}
.room__label b { display: block; font-weight: var(--weight-heading); font-size: 12px; }
.fp { position: absolute; background: #111; transform: translateZ(0.5px); }
.fp--glass { background: transparent; border: 1px solid #111; }
.fp--glass::after { content: ""; position: absolute; inset: 1px; border-top: 1px solid #111; top: 50%; }

.wall { position: absolute; background: #fbfaf4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); backface-visibility: visible; }
.wall--x { transform-origin: 0 0; transform: rotateX(90deg) scaleY(var(--wall)); }
.wall--y { transform-origin: 0 0; transform: rotateY(-90deg) scaleX(var(--wall)); background: #efede3; }
.wall--glass { background: rgba(0, 150, 247, 0.16); box-shadow: inset 0 0 0 1px rgba(0, 120, 200, 0.5); }
.wall--low { --h: 1; }

.box { position: absolute; }
.box > i { position: absolute; display: block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.box .b-top { inset: 0; transform: translateZ(calc(var(--wall) * var(--bh) * 1px)); }
.box .b-n, .box .b-s { left: 0; width: 100%; height: calc(var(--bh) * 1px); transform-origin: 0 0; transform: rotateX(90deg) scaleY(var(--wall)); filter: brightness(0.94); }
.box .b-n { top: 0; } .box .b-s { top: 100%; }
.box .b-w, .box .b-e { top: 0; height: 100%; width: calc(var(--bh) * 1px); transform-origin: 0 0; transform: rotateY(-90deg) scaleX(var(--wall)); filter: brightness(0.86); }
.box .b-w { left: 0; } .box .b-e { left: 100%; }
.box > i { opacity: min(1, calc(var(--tex) * 1.4)); } /* Opacity nur auf Flächen – auf .box würde sie 3D flach drücken */

.cam { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: translateZ(2px); opacity: var(--cam, 0); }
.cam__cone {
  position: absolute; left: 0; top: -38px; width: 90px; height: 76px;
  transform-origin: 0 50%; transform: rotate(var(--ca, 0deg));
  background: linear-gradient(90deg, rgba(0, 150, 247, 0.45), rgba(0, 150, 247, 0));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.cam__dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--action); box-shadow: 0 0 0 3px #fff, var(--shadow-sm);
}
.cam-path { position: absolute; inset: 0; overflow: visible; transform: translateZ(1.5px); opacity: var(--cam, 0); }

/* ---------- Laufband ---------- */
.marquee { padding-block: var(--section-gap) 0; display: grid; gap: var(--spacing-12); }
.marquee__track { gap: 0.5em; align-items: center; white-space: nowrap; padding-block: 0.08em; }
.marquee__track i { width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--action); flex: none; }
.marquee__track--muted { color: var(--text-subtle); }
.marquee__track--muted i { background: var(--color-ash); }

/* ---------- Statement ---------- */
.statement { padding-block: var(--section-gap); }
.statement .container { display: grid; gap: var(--spacing-30); }
.statement__text { max-width: 22ch; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 900px) { .statement__text { max-width: 20ch; } }

/* ---------- Vorteile ---------- */
.benefits { padding-bottom: var(--section-gap); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); }
.benefit { display: grid; gap: var(--spacing-12); align-content: start; min-height: 280px; }
.benefit__icon { width: 40px; height: 40px; margin-bottom: auto; padding-bottom: var(--spacing-36); box-sizing: content-box; }
.benefit .t-subheading { font-size: 24px; letter-spacing: -0.03em; }
@media (max-width: 960px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .benefits__grid { grid-template-columns: 1fr; } .benefit { min-height: 0; } }

/* ---------- Rechner ---------- */
.calc { padding-bottom: var(--section-gap); }
.calc__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); padding: clamp(24px, 4vw, 54px); }
.calc__inputs { display: grid; gap: var(--spacing-30); align-content: center; }
.calc__field { display: grid; gap: var(--spacing-8); }
.calc__label { display: flex; justify-content: space-between; gap: var(--spacing-16); font-size: var(--text-body-sm); }
.calc__label output { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__result {
  display: grid; align-content: space-between; gap: var(--spacing-30);
  background: var(--color-parchment); border-radius: var(--radius-cards); box-shadow: var(--shadow-subtle);
  padding: clamp(24px, 3vw, 36px);
}
.calc__big {
  display: flex; align-items: baseline; gap: 0.12em;
  font-size: clamp(80px, 11vw, 160px); font-weight: var(--weight-light); line-height: 0.85; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.calc__unit { font-size: 0.24em; letter-spacing: -0.02em; color: var(--text-muted); }
.calc__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); padding-top: var(--spacing-18); border-top: 1px solid var(--border); }
.calc__split .t-subheading { font-size: 24px; }
@media (max-width: 860px) { .calc__card { grid-template-columns: 1fr; } }

/* ---------- Ablauf ---------- */
.process { padding-bottom: var(--section-gap); }
.process__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-24); padding-top: var(--spacing-36); }
.process__list::before, .process__list::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border);
}
.process__list::after { background: var(--action); transform-origin: 0 50%; transform: scaleX(calc((var(--p, 0) - 0.2) * 2.4)); height: 2px; top: -0.5px; }
.process__item { display: grid; gap: var(--spacing-12); align-content: start; position: relative; }
.process__item::before {
  content: ""; position: absolute; top: calc(-1 * var(--spacing-36) - 5px); left: 0;
  width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--text);
}
.process__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--text-subtle); font-weight: var(--weight-regular); }
.process__item .t-subheading { font-size: 24px; }
@media (max-width: 860px) {
  .process__list { grid-template-columns: 1fr; padding-top: 0; padding-left: var(--spacing-36); gap: var(--spacing-36); }
  .process__list::before, .process__list::after { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .process__list::after { width: 2px; transform-origin: 50% 0; transform: scaleY(calc((var(--p, 0) - 0.15) * 2)); }
  .process__item::before { left: calc(-1 * var(--spacing-36)); top: 4px; }
}

/* ---------- Zielgruppen ---------- */
.audience { padding-bottom: var(--section-gap); }
.audience__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-36); align-items: start; }
.audience__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-24); align-items: baseline;
  padding-block: var(--spacing-24); border-top: 1px solid var(--border);
}
.audience__list li:last-child { border-bottom: 1px solid var(--border); }
.audience__list .t-subheading { font-size: clamp(22px, 2.4vw, 30px); }
@media (max-width: 860px) {
  .audience__grid { grid-template-columns: 1fr; gap: 0; }
  .audience__list li { grid-template-columns: 1fr; gap: var(--spacing-6); }
}

/* ---------- FAQ ---------- */
.faq { padding-bottom: var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-36); align-items: start; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Kontakt ---------- */
.contact { padding-block: var(--section-gap); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact__grid > div { display: grid; gap: var(--spacing-24); }
.contact__sub { color: var(--text-on-dark-muted); max-width: 440px; }
.contact__logo { width: 84px; height: 84px; }
.eyebrow--dark { color: var(--text-on-dark-muted); }
.contact__form { display: grid; gap: var(--spacing-18); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-18); }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-18); margin-top: var(--spacing-6); }
.contact__note { color: var(--text-on-dark-muted); }
.contact__note.is-error { color: #ff8a5c; }
@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer { padding-top: var(--spacing-72); overflow: hidden; }
.footer__logo { width: 72px; height: 72px; margin: 0 auto var(--spacing-24); }
.footer__word {
  font-size: clamp(56px, 17vw, 250px); font-weight: var(--weight-light); line-height: 0.85;
  letter-spacing: calc(0.12em - var(--p, 0) * 0.18em);
  white-space: nowrap; text-align: center;
  transform: translateY(calc((1 - var(--p, 0)) * 30%));
  opacity: calc(0.2 + var(--p, 0));
}
.footer__bar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-16);
  padding-block: var(--spacing-30); margin-top: var(--spacing-30); border-top: 1px solid var(--border); color: var(--text-muted);
}
.footer__bar nav { display: flex; gap: var(--spacing-24); }
.footer__bar a { text-decoration: none; }
.footer__bar a:hover { color: var(--text); }

/* ---------- Preise ---------- */
.pricing { padding-block: clamp(64px, 9vw, 120px); }
.pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16);
}
.pricing__card { display: grid; gap: var(--spacing-8); align-content: start; }
.pricing__price {
  margin-top: var(--spacing-10);
  font-size: clamp(32px, 3.4vw, 44px); font-weight: var(--weight-light, 300);
  letter-spacing: -0.03em;
}
.pricing__note { max-width: 70ch; margin-top: var(--spacing-24); color: var(--text-subtle); }
@media (max-width: 860px) { .pricing__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ: Zwischenüberschrift im Akkordeon ---------- */
.accordion__group { margin-top: var(--spacing-30); padding-top: var(--spacing-18); border-top: 1px solid var(--line); }

/* ---------- Vorteile: Kernsatz ---------- */
.benefits__key { max-width: 44ch; color: var(--text); }

/* ---------- Rechner: Einordnung ---------- */
.calc__disclaimer { margin-top: var(--spacing-16); color: var(--text-subtle); max-width: 46ch; }

/* ---------- Kontakt: zusätzliche Felder ---------- */
.contact__direct { margin-top: var(--spacing-24); }
.btn--on-dark { color: var(--text-on-dark); border-color: rgba(255, 255, 255, 0.4); background: transparent; }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.field__hint { display: block; margin-top: var(--spacing-6); font-size: var(--text-caption-sm); color: var(--text-on-dark-muted); }
.field__opt { color: var(--text-on-dark-muted); font-weight: 400; }
.field--choice { border: 0; padding: 0; display: grid; gap: var(--spacing-8); }
.field--choice legend { padding: 0; }
.choice { display: inline-flex; align-items: center; gap: var(--spacing-8); margin-right: var(--spacing-16); font-size: 15px; }
.input--file { padding: 10px 12px; }
.contact__guarantee {
  margin-top: var(--spacing-8); padding-left: var(--spacing-12);
  border-left: 2px solid var(--color-sky-blue); color: var(--text-on-dark);
}

/* ---------- Rechtsseiten ---------- */
.legal { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.legal__inner { max-width: 74ch; display: grid; gap: var(--spacing-16); }
.legal__inner h1 { margin-bottom: var(--spacing-10); }
.legal__inner h2 { margin-top: var(--spacing-24); }
.legal__note {
  border-left: 2px solid var(--color-signal-orange, #ff4000);
  padding: var(--spacing-12) 0 var(--spacing-12) var(--spacing-16);
  background: var(--color-warm-sand, #f5f2de);
  border-radius: 0 var(--radius-card, 12px) var(--radius-card, 12px) 0;
  font-size: 15px;
}
.legal__quote {
  border-left: 2px solid var(--line); padding-left: var(--spacing-16);
  color: var(--text-subtle);
}

/* hidden-Attribut gewinnt gegen Komponenten-Display (z. B. .btn) */
[hidden] { display: none !important; }