/* Petrichor Home Staging – Website
   Welt: ruhiges Verkaufsexposé. Nebelweiß als Grund, Petrichor Grün als Markenfläche, Salbei als Band,
   Electric Purple nur für Handlung. Stand 13.10.2026, Regeln in DESIGN.md.
*/

@font-face { font-family: "NOW"; src: url("/assets/fonts/now-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "NOW"; src: url("/assets/fonts/now-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "NOW"; src: url("/assets/fonts/now-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Marke */
  --green: #49625f;
  --green-900: #2f403e;
  --green-800: #3c524f;
  --green-600: #5a7572;
  --green-100: #dce3e2;
  --green-50: #edf1f0;
  --sage: #a5b5b3;
  --sage-dark: #95a7a4;
  --fog: #f4f6f5;
  --white: #ffffff;
  --ink: #2a2e2d;
  --ink-600: #4a4f4d;
  --ink-400: #6e736f;
  --purple: #5b11ff;
  --purple-pressed: #4a0dd6;
  --line: #d2dad8;
  --line-soft: #e2e7e6;

  /* Schrift */
  --font-display: "NOW", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(2.6rem, 1.4rem + 4.6vw, 4.25rem);
  --fs-h2: clamp(1.85rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8rem;

  /* Raum */
  --gutter: clamp(16px, 4vw, 64px);
  --wrap: 1240px;
  --section-y: clamp(72px, 9vw, 136px);
  --radius: 12px;
  --radius-heft: 10px;

  /* Tiefe: getönte, weiche Schatten */
  --shadow-heft: 0 2px 4px rgba(42, 46, 45, 0.08), 0 18px 40px -8px rgba(42, 46, 45, 0.28);
  --shadow-heft-lift: 0 4px 8px rgba(42, 46, 45, 0.1), 0 30px 60px -10px rgba(42, 46, 45, 0.34);
  --shadow-soft: 0 1px 2px rgba(42, 46, 45, 0.06), 0 10px 28px -6px rgba(42, 46, 45, 0.14);

  /* Band für Kennzahlen und Preise: ruhige Salbei-Fläche */
  --band: #dce3e2;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* Werte für das Regler-Panel (Phase 6) */
  --hero-gap: clamp(32px, 5vw, 80px);
  --hero-top: clamp(28px, 5vw, 72px);
  --raum-breite: 100%;
}

/* Feinjustierung von Fabian (Regler-Panel, 13.10.2026), gilt ab 821 px; das Handy behält seine fließenden Werte */
@media (min-width: 821px) {
  :root {
    --section-y: 136px;
    --hero-top: 72px;
    --hero-gap: 80px;
    --h1-gap: 53px;
    --fs-h1: 53px;
    --fs-h2: 40px;
    --fs-lead: 20.5px;
    --raum-breite: 100%;
    --raum-x: 0px;
    --raum-y: 47px;
    --faelle-gap: 25px;
    --wrap: 1240px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  font-feature-settings: "lnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
p, ul, ol, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--fog); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--sage) var(--fog); }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--fs-h1); line-height: 1.04; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 62ch; }
.lead { font-size: var(--fs-lead); color: var(--ink-600); line-height: 1.55; }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-600); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--fog); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* Ortsmarke über der H1: nur im ersten Bildschirm, Pflicht aus texte.md */
.ort-marke { font: 300 0.8125rem/1.2 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: var(--radius); border: 0;
  background: var(--purple); color: #fff; text-decoration: none; cursor: pointer;
  font: 700 1rem/1.1 var(--font-body); letter-spacing: 0.005em; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(42, 46, 45, 0.12), 0 10px 22px -10px rgba(91, 17, 255, 0.55);
  transition: background-color 160ms var(--ease-std), transform 160ms var(--ease-std), box-shadow 160ms var(--ease-std);
}
.btn:hover { background: var(--purple-pressed); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(42, 46, 45, 0.14), 0 14px 28px -10px rgba(91, 17, 255, 0.6); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; box-shadow: none; }
/* Auf Grün nie Lila: Nebelweiß mit Anthrazit */
.section--green .btn, .on-green .btn, .btn--light { background: var(--fog); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); }
.section--green .btn:hover, .on-green .btn:hover, .btn--light:hover { background: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--sage); box-shadow: none; }
.btn--ghost:hover { background: var(--white); border-color: var(--green); }
.textlink { color: var(--purple); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(91, 17, 255, 0.35); text-underline-offset: 0.25em; }
.textlink:hover { text-decoration-color: currentColor; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 246, 245, 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); box-shadow: 0 6px 20px -16px rgba(42, 46, 45, 0.4); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo { display: block; flex: none; }
.logo img { width: auto; height: 46px; }
.main-nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.main-nav a { position: relative; text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink); padding: 8px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: background 200ms; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); transition: transform 220ms var(--ease-out); }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }
.cta-short { display: none; }

@media (max-width: 900px) {
  .site-header .wrap { min-height: 64px; }
  .logo img { height: 38px; }
  .menu-toggle { display: inline-flex; }
  .main-nav { position: fixed; inset: 64px 0 auto 0; background: var(--fog); border-bottom: 1px solid var(--line-soft); padding: 8px var(--gutter) 24px; box-shadow: 0 24px 40px -24px rgba(42, 46, 45, 0.4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 180ms, transform 220ms var(--ease-out), visibility 0s 220ms; }
  .menu-open .main-nav { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms, transform 220ms var(--ease-out); }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: block; padding: 14px 0; font-size: 1.125rem; border-bottom: 1px solid var(--line-soft); }
  .main-nav a::after { display: none; }
}
@media (max-width: 520px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .logo img { height: 34px; }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section--white { background: var(--white); }
.section--sunken { background: var(--green-50); }
.section--ink { background: var(--ink); color: var(--fog); }
.section--ink h2, .section--ink h3 { color: var(--fog); }
.section--green, .on-green { background: var(--green); color: var(--fog); }
.section--green h2, .section--green h3 { color: var(--fog); }
.section-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p { margin-top: 18px; }
.section-head--center { margin-inline: auto; text-align: center; }
/* Wabenmuster als leise Textur auf Markenflächen (Waben fünfmal so groß wie im Design System, Fabian 11.10.2026; dort später nachziehen) */
.honeycomb::before { content: ""; position: absolute; inset: 0; background: url("/assets/img/marke/waben-sage-gross.svg") 0 0 / 330px 190.55px; opacity: 0.12; pointer-events: none; }
.honeycomb > * { position: relative; }

/* Video statt Wabenmuster als Hintergrund (Ablauf auf der Startseite) */
.section--video { overflow: hidden; isolation: isolate; }
.hintergrund-video { position: absolute; inset: 0; z-index: -1; background: var(--green-900); }
.hintergrund-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hintergrund-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47, 64, 62, 0.88) 0%, rgba(47, 64, 62, 0.84) 100%); }

/* ---------- Kennzahlen-Band ---------- */
.kennzahlen { position: relative; background: var(--band); color: var(--ink); }
.kennzahlen .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.kennzahl { padding: 30px 24px 28px 0; }
.kennzahl + .kennzahl { padding-left: 28px; border-left: 1px solid rgba(42, 46, 45, 0.14); }
.kennzahl dt { font: 700 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; color: var(--green-900); }
.kennzahl dd { margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--ink); }
@media (max-width: 900px) {
  .kennzahlen .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl dt { font-size: clamp(1.35rem, 0.9rem + 2.4vw, 1.9rem); white-space: normal; }
  .kennzahl { padding: 22px 12px 20px 0; }
  .kennzahl + .kennzahl { padding-left: 0; border-left: 0; }
  .kennzahl:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(42, 46, 45, 0.14); }
  .kennzahl:nth-child(n + 3) { border-top: 1px solid rgba(42, 46, 45, 0.14); }
}

/* ---------- Erster Bildschirm: gezeichneter Raum ---------- */
.hero { position: relative; padding-top: var(--hero-top); }
.hero > .wrap { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--hero-gap); align-items: center; padding-bottom: clamp(40px, 5vw, 72px); }
.hero h1 { margin: 18px 0 var(--h1-gap, 20px); }
.hero .lead { max-width: 30em; }
.haken { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.haken li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.haken svg { width: 22px; height: 22px; margin-top: 2px; color: var(--green); }
.hero__beleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; font-size: 0.9375rem; color: var(--ink); }
.hero__beleg .sterne svg { width: 16px; height: 16px; }
.hero__region { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-600); max-width: 30rem; }
.bewertung { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: var(--ink-600); text-decoration: none; }
.bewertung:hover b { text-decoration: underline; }
.sterne { display: flex; gap: 2px; color: var(--green); }
.sterne svg { width: 16px; height: 16px; }
.bewertung b { color: var(--ink); }

.raum { position: relative; width: var(--raum-breite); justify-self: end; left: var(--raum-x, 0px); top: var(--raum-y, 0px); }
.raum__knopf { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; box-shadow: 0 2px 4px rgba(42, 46, 45, 0.06), 0 28px 60px -18px rgba(42, 46, 45, 0.35); }
.raum__bild { width: 100%; height: auto; border-radius: 14px; }
.moebel { transform-box: view-box; will-change: transform, opacity; }
.raum__licht { opacity: 0.4; transition: opacity 900ms var(--ease-out); }
.ist-eingerichtet .raum__licht { opacity: 1; }
.raum__hinweis { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(42, 46, 45, 0.78); color: var(--fog); font: 500 0.8125rem/1 var(--font-body); white-space: nowrap; transition: opacity 300ms; }
.raum__hinweis::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.ist-eingerichtet .raum__hinweis, .raum.hat-bewegung .raum__hinweis { opacity: 0; }
.play { position: absolute; left: 50%; top: 46%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--fog); display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(42, 46, 45, 0.45); transform: scale(0.6); opacity: 0; transition: transform 500ms var(--ease-out), opacity 300ms; }
.play svg { width: 28px; height: 28px; margin-left: 4px; color: var(--ink); }
.video-pill { position: absolute; left: 16px; bottom: 16px; background: var(--fog); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 700 0.875rem/1 var(--font-body); box-shadow: 0 6px 16px -8px rgba(42, 46, 45, 0.4); opacity: 0; transform: translateY(6px); transition: opacity 300ms 150ms, transform 400ms var(--ease-out) 150ms; }
.ist-eingerichtet .play { transform: scale(1); opacity: 1; }
.ist-eingerichtet .video-pill { opacity: 1; transform: none; }
.raum__knopf:hover .play { transform: scale(1.07); }
.raum__knopf:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }

@media (max-width: 1000px) {
  .hero > .wrap { grid-template-columns: 1fr; }
  .raum { justify-self: stretch; max-width: 640px; }
}
@media (max-width: 640px) {
  .hero h1 { margin: 14px 0 16px; }
  .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}

/* ---------- Kundenstimmen ---------- */
.stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.stimme { display: flex; flex-direction: column; background: var(--fog); border-radius: var(--radius); overflow: hidden; }
.stimme__video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: var(--green-800); overflow: hidden; }
.stimme__video img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.stimme__video:hover img { transform: scale(1.03); }
.stimme .play { opacity: 1; transform: none; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.stimme__video:hover .play { transform: scale(1.07); }
.stimme blockquote { padding: 26px 28px 8px; font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.35 var(--font-display); color: var(--ink); }
.stimme figcaption { padding: 6px 28px 28px; font-size: 0.875rem; color: var(--ink-600); }
.stimme figcaption b { color: var(--ink); }
.stimmen-bewertung { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.logos { margin-top: clamp(48px, 6vw, 80px); }
.logos h3 { font: 500 0.95rem/1.4 var(--font-body); color: var(--ink-600); margin-bottom: 26px; letter-spacing: 0; }
.logos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 34px 4%; }
.logos li { display: flex; align-items: center; justify-content: center; height: 68px; flex: 0 0 12.5%; }
.logos img { max-height: 54px; max-width: 100%; width: auto; filter: grayscale(1) contrast(0.9) brightness(1.05); opacity: 0.62; transition: opacity 200ms; }
.logos img.hoch { max-height: 66px; }
.logos img.breit { max-height: 34px; }
.logos img[alt*="Domino"] { opacity: 0.4; }
.logos li:hover img { opacity: 0.9; }
@media (max-width: 1000px) { .logos li { flex-basis: 20%; } }
@media (max-width: 720px) {
  .stimmen { grid-template-columns: 1fr; }
  .logos ul { gap: 22px 4%; } .logos li { flex-basis: 21%; height: 44px; }
  .logos img { max-height: 30px; } .logos img.breit { max-height: 20px; } .logos img.hoch { max-height: 40px; }
}

/* ---------- Problem (dunkel) ---------- */
.problem { overflow: hidden; }
.problem .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.problem__text { display: grid; gap: 18px; color: var(--green-100); font-size: 1.0625rem; }
.problem__text h2 { margin-bottom: 8px; }
.problem__zitat { font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2rem)/1.2 var(--font-display); color: var(--fog); padding: 4px 0 4px 0; }
.problem__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.problem__bild figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--fog); }
@media (max-width: 860px) { .problem .wrap { grid-template-columns: 1fr; } }

/* ---------- Vorher-Nachher-Regler ---------- */
.vergleich { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--green-900); user-select: none; -webkit-user-select: none; touch-action: pan-y; aspect-ratio: 1000 / 521; --pos: 50%; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vergleich .vergleich__vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--fog); box-shadow: 0 0 0 1px rgba(42, 46, 45, 0.1); pointer-events: none; }
.vergleich__griff { position: absolute; top: 50%; left: var(--pos); width: 58px; height: 64px; margin: -32px 0 0 -29px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: ew-resize; filter: drop-shadow(0 8px 16px rgba(42, 46, 45, 0.35)); }
.vergleich__griff svg { width: 58px; height: 64px; }
.vergleich__griff:focus-visible { outline: none; }
.vergleich__griff:focus-visible svg .wabe-flaeche { fill: var(--purple); }
.vergleich__griff:focus-visible svg .wabe-pfeil { stroke: #fff; }
.vergleich__marke { position: absolute; top: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(42, 46, 45, 0.78); color: var(--fog); font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.02em; pointer-events: none; }
.vergleich__marke--vorher { left: 14px; }
.vergleich__marke--nachher { right: 14px; background: rgba(244, 246, 245, 0.92); color: var(--ink); }
.vergleich-hinweis { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.875rem; color: var(--ink-600); }
.vergleich-hinweis svg { width: 18px; height: 18px; color: var(--green); }
/* Ohne JavaScript: beide Bilder nebeneinander */
.no-js .vergleich { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.no-js .vergleich img { position: static; clip-path: none; }
.no-js .vergleich__griff, .no-js .vergleich__linie { display: none; }

.loesung__gross { margin-bottom: clamp(48px, 6vw, 88px); }
.loesung__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.loesung__text { display: grid; gap: 18px; }
.leistungen { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-soft); position: relative; }
.leistungen h3 { margin-bottom: 18px; }
.leistungen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.leistungen li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.leistungen li:first-child { border-top: 0; }
.leistungen svg { width: 22px; height: 22px; color: var(--green); margin-top: 1px; }
.hinweis-bautraeger { padding: 18px 20px; border-radius: var(--radius); background: var(--green-50); color: var(--ink); font-size: 0.9375rem; }
.paar-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(48px, 6vw, 80px); }
.paar-karte figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-600); }
.paar-karte figcaption b { color: var(--ink); font: 700 1.0625rem/1.3 var(--font-display); }
.beleg { margin-top: 28px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-600); max-width: 60rem; }
.beleg b { color: var(--ink); }
@media (max-width: 860px) {
  .loesung__grid, .paar-karten { grid-template-columns: 1fr; }
}

/* ---------- Ablauf als Strecke ---------- */
.ablauf__zeit { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 22px; padding: 14px 20px; border-radius: var(--radius); background: var(--fog); color: var(--ink); }
.ablauf__zeit b { font: 700 1.25rem/1.2 var(--font-display); }
.strecke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: schritt; }
.strecke::before { content: ""; position: absolute; left: 28px; width: 80%; top: 27px; height: 2px; background: rgba(244, 246, 245, 0.25); }
.strecke__fortschritt { position: absolute; left: 28px; top: 27px; height: 2px; width: calc(80% * var(--fortschritt, 0)); background: var(--fog); transition: width 200ms linear; }
.schritt { position: relative; padding-right: 22px; }
.schritt__nr { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--green-800); border: 2px solid rgba(244, 246, 245, 0.35); font: 700 1.25rem/1 var(--font-display); color: var(--fog); transition: background 300ms, border-color 300ms, color 300ms; }
.schritt.ist-erreicht .schritt__nr { background: var(--fog); color: var(--green); border-color: var(--fog); }
.schritt h3 { margin-top: 22px; font-size: 1.25rem; }
.schritt p { margin-top: 10px; font-size: 1rem; color: var(--fog); }
.schritt--zeit .schritt__nr { box-shadow: 0 0 0 6px rgba(244, 246, 245, 0.12); }
@media (max-width: 960px) {
  .strecke { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .strecke::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px !important; height: auto; }
  .strecke__fortschritt { left: 27px; top: 28px; width: 2px; height: calc((100% - 56px) * var(--fortschritt, 0)); }
  .schritt { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; padding-right: 0; }
  .schritt h3 { margin-top: 12px; }
  .schritt p { grid-column: 2; margin-top: 6px; }
  .schritt__nr { grid-row: span 2; }
}

/* ---------- Erstgespräch: Was, Wie, Nutzen ---------- */
.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.kachel { position: relative; background: var(--white); border-radius: var(--radius); padding: 28px 26px 30px; box-shadow: var(--shadow-soft); }
.kachel__symbol { width: 52px; height: 52px; border-radius: 14px; background: var(--green-50); display: grid; place-items: center; color: var(--green); margin-bottom: 20px; }
.kachel__symbol svg { width: 28px; height: 28px; }
.kachel h3 { margin-bottom: 10px; }
.kachel p { color: var(--ink-600); font-size: 0.9375rem; }
.kachel--betont { background: var(--green); color: var(--fog); }
.kachel--betont h3 { color: var(--fog); }
.kachel--betont p { color: var(--green-100); }
.kachel--betont .kachel__symbol { background: rgba(244, 246, 245, 0.14); color: var(--fog); }
@media (max-width: 860px) { .dreier { grid-template-columns: 1fr; } }

/* ---------- Über uns ---------- */
.team { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.team__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.team__bilder figure:nth-child(2) { margin-top: 48px; }
.portraet { position: relative; }
.portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
/* Porträts im Wabenrahmen wie die Bildmarke: Sechseck mit Spitze oben, dahinter versetzt eine Salbei-Wabe */
.portraet__wabe { --sechseck: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); position: relative; width: 100%; aspect-ratio: 0.866; filter: drop-shadow(0 4px 8px rgba(47, 64, 62, 0.08)); }
.portraet__wabe::before { content: ""; position: absolute; inset: 0; clip-path: var(--sechseck); background: var(--sage, #a5b5b3); transform: translate(3.5%, 2.5%); }
.portraet__wabe::after { content: ""; position: absolute; inset: 0; clip-path: var(--sechseck); background: var(--green); }
.portraet__wabe img { position: absolute; z-index: 1; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); aspect-ratio: auto; object-fit: cover; object-position: var(--fokus, 50%) 30%; clip-path: var(--sechseck); border-radius: 0; box-shadow: none; }
.portraet:has(.portraet__wabe) figcaption { text-align: center; margin-top: 18px; }
.portraet figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--ink-600); line-height: 1.4; }
.portraet figcaption b { display: block; color: var(--ink); font: 700 1.0625rem/1.3 var(--font-display); }
.team__text { display: grid; gap: 18px; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }


/* ---------- FAQ ---------- */
.faq-liste { display: grid; gap: 10px; }
.faq-item { background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(42, 46, 45, 0.05); transition: box-shadow 200ms; }
.faq-item[open] { box-shadow: var(--shadow-soft); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; font: 700 1.0625rem/1.35 var(--font-display); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2349625f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 250ms var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green); }
.faq-answer { padding: 0 24px 22px; color: var(--ink-600); max-width: 68ch; }
.faq-answer a { color: var(--purple); font-weight: 700; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .section-head { position: sticky; top: 110px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .section-head { position: static; } }

/* ---------- Abschluss-Band ---------- */
.abschluss { position: relative; overflow: hidden; }
.abschluss .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px 64px; align-items: center; }
.abschluss h2 { max-width: 20ch; }
.abschluss p { margin-top: 16px; color: var(--green-100); max-width: 40rem; }
.abschluss .cta-row { margin-top: 0; }
@media (max-width: 860px) { .abschluss .wrap { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #c9d1cf; font-size: 0.9375rem; }
.site-footer .wrap { padding-block: 56px 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.site-footer img { height: 46px; width: auto; margin-bottom: 20px; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer a { color: var(--fog); text-decoration-color: rgba(244, 246, 245, 0.35); }
.site-footer a:hover { text-decoration-color: currentColor; }
.site-footer h2 { font: 700 0.9375rem/1.3 var(--font-display); color: var(--fog); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer button.linkartig { background: none; border: 0; padding: 0; color: var(--fog); text-decoration: underline; text-decoration-color: rgba(244, 246, 245, 0.35); cursor: pointer; text-underline-offset: 0.2em; }
.footer-unten { }
.footer-unten .wrap { padding-block: 0 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; grid-template-columns: none; font-size: 0.8125rem; color: #9aa09c; }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Video-Overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(28, 31, 30, 0.88); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s 250ms; }
.overlay.ist-offen { opacity: 1; visibility: visible; transition: opacity 250ms; }
.overlay__box { position: relative; width: min(1100px, 100%); }
.overlay__video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.overlay__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.overlay__zu { position: absolute; right: 0; top: -54px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fog); cursor: pointer; display: grid; place-items: center; }
.overlay__zu svg { width: 20px; height: 20px; }
.overlay__hinweis { color: var(--fog); padding: 32px; text-align: center; display: grid; place-items: center; height: 100%; }

/* ---------- Unterseiten: Kopf ---------- */
.seitenkopf { padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); position: relative; }
.seitenkopf .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--hero-gap); align-items: center; }
.seitenkopf h1 { margin: 16px 0 var(--h1-gap, 20px); }
.seitenkopf .lead + .lead { margin-top: 14px; }
.seitenkopf--schmal .wrap { grid-template-columns: minmax(0, 46rem); }
.seitenkopf__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.seitenkopf__bild figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--ink-600); }
.seitenkopf__bild figcaption b { color: var(--ink); }
@media (max-width: 900px) {
  .seitenkopf .wrap { grid-template-columns: 1fr; }
  .seitenkopf__bild { max-width: 520px; }
}

/* ---------- Listen, Preise ---------- */
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }
.liste-haken { list-style: none; padding: 0; margin: 0; display: grid; }
.liste-haken li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.liste-haken li:first-child { border-top: 0; }
.liste-haken svg { width: 22px; height: 22px; color: var(--green); margin-top: 1px; }
.on-green .liste-haken li, .section--green .liste-haken li { border-color: rgba(244, 246, 245, 0.16); }
.section--green .liste-haken svg { color: var(--fog); }
.aufpreis { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-soft); }
.aufpreis h3 { margin-bottom: 14px; }
.aufpreis dl { display: grid; gap: 0; }
.aufpreis dl div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.aufpreis dl div:first-child { border-top: 0; }
.aufpreis dt { font-weight: 500; }
.aufpreis dd { font: 700 1rem/1.3 var(--font-display); white-space: nowrap; text-align: right; }
.aufpreis dd small { display: block; font: 400 0.75rem/1.3 var(--font-body); color: var(--ink-600); white-space: normal; }
.preis-ab { display: inline-flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-radius: var(--radius); background: var(--band); color: var(--ink); margin-top: 8px; }
.preis-ab b { font: 700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--font-display); }
.preis-ab span { font-size: 0.875rem; }
.zahlen-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: var(--radius); overflow: hidden; background: var(--band); }
.zahlen-band div { padding: 26px 24px; }
.zahlen-band div + div { border-left: 1px solid rgba(42, 46, 45, 0.16); }
.zahlen-band b { display: block; font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--font-display); }
.zahlen-band span { display: block; margin-top: 10px; font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 760px) { .zahlen-band { grid-template-columns: 1fr; } .zahlen-band div + div { border-left: 0; border-top: 1px solid rgba(42, 46, 45, 0.16); } }
.quelle { margin-top: 16px; font-size: 0.875rem; color: var(--ink-600); line-height: 1.5; }

/* ---------- Schritt-Formulare (Fragebogen, Rechner, Projektanfrage) ---------- */
.formular-heft { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-heft); overflow: hidden; max-width: 760px; }
.formular-heft__kopf { padding: 22px clamp(20px, 4vw, 40px) 0; }
.fortschritt { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.875rem; color: var(--ink-600); }
.fortschritt__balken { height: 8px; border-radius: 999px; background: var(--green-50); margin-top: 10px; overflow: hidden; }
.fortschritt__balken span { display: block; height: 100%; border-radius: inherit; background: var(--green); width: var(--fortschritt, 12%); transition: width 400ms var(--ease-out); }
.formular-heft form { padding: 28px clamp(20px, 4vw, 40px) clamp(24px, 4vw, 36px); }
.schritt-panel { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt-panel[hidden] { display: none; }
.schritt-panel legend, .schritt-panel .frage { display: block; padding: 0; font: 700 clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem)/1.2 var(--font-display); margin-bottom: 22px; text-wrap: balance; }
.wahl { display: grid; gap: 10px; }
.wahl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 560px) { .wahl--2 { grid-template-columns: 1fr; } .wahl--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--fog); cursor: pointer; font-weight: 500; transition: border-color 150ms, background 150ms, box-shadow 150ms; }
.option:hover { border-color: var(--sage); background: var(--white); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__punkt { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sage); background: var(--white); display: grid; place-items: center; transition: border-color 150ms; }
.option__punkt::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform 180ms var(--ease-out); }
.option input[type="checkbox"] + .option__punkt { border-radius: 5px; }
.option input[type="checkbox"] + .option__punkt::after { border-radius: 2px; }
.option:has(input:checked) { border-color: var(--green); background: var(--green-50); box-shadow: inset 0 0 0 1px var(--green); }
.option input:checked + .option__punkt { border-color: var(--green); }
.option input:checked + .option__punkt::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.option--mitte { justify-content: center; }
.feld { display: grid; gap: 8px; }
.felder { display: grid; gap: 18px; }
.felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .felder--2 { grid-template-columns: 1fr; } }
.feld label, .feld .label { font-weight: 700; font-size: 0.9375rem; }
.feld .optional { font-weight: 400; color: var(--ink-600); }
.feld input, .feld textarea, .feld select { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); font-size: 1rem; transition: border-color 150ms, box-shadow 150ms; caret-color: var(--green); }
.feld textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.feld input:hover, .feld textarea:hover { border-color: var(--sage); }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(73, 98, 95, 0.2); }
.feld input::placeholder, .feld textarea::placeholder { color: #767b78; }
.feld .hilfe, .schritt-panel .hilfe { font-size: 0.875rem; color: var(--ink-600); line-height: 1.5; }
.einheit { position: relative; }
.einheit input { padding-right: 56px; }
.einheit span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-600); font-weight: 500; pointer-events: none; }
.fehler { display: none; margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: #f7ebe8; color: #8a3324; font-size: 0.9375rem; font-weight: 500; }
.fehler.ist-sichtbar { display: block; }
[aria-invalid="true"] { border-color: #9e3b2c !important; }
.formular-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; flex-wrap: wrap-reverse; }
.formular-nav .zurueck { background: none; border: 0; padding: 10px 0; color: var(--ink-600); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.formular-nav .zurueck[hidden] { display: none; }
.formular-nav .btn { margin-left: auto; }
.datenschutz-hinweis { margin-top: 20px; font-size: 0.875rem; color: var(--ink-600); line-height: 1.5; }
.datenschutz-hinweis a { color: var(--ink); }
.einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 18px; font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
.einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.erfolg { padding: clamp(24px, 4vw, 40px); }
.erfolg h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.erfolg p { margin-top: 12px; color: var(--ink-600); }


.formular-seite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.formular-seite__text { display: grid; gap: 16px; position: sticky; top: 110px; }
.formular-seite__text h1 { margin: 10px 0 var(--h1-gap, 6px); }
.ansprechpartner { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.ansprechpartner img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.ansprechpartner p { font-size: 0.875rem; color: var(--ink-600); line-height: 1.45; }
.ansprechpartner b { color: var(--ink); }
@media (max-width: 900px) { .formular-seite { grid-template-columns: 1fr; } .formular-seite__text { position: static; } }

/* Rechner-Ergebnis */
.ergebnis { padding: clamp(24px, 4vw, 40px); }
.ergebnis__preis { display: grid; gap: 6px; padding: 24px; border-radius: var(--radius); background: var(--green); color: var(--fog); }
.ergebnis__preis h3 { color: var(--fog); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.ergebnis__preis p { color: var(--green-100); font-size: 0.9375rem; }
.aufstellung { margin-top: 20px; display: grid; }
.aufstellung div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 0.9375rem; }
.aufstellung div:first-child { border-top: 0; }
.aufstellung dd { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aufstellung dt small { display: block; color: var(--ink-600); font-size: 0.875rem; }
.ergebnis .notiz { margin-top: 18px; font-size: 0.875rem; color: var(--ink-600); }

/* ---------- Vorher-Nachher-Seite ---------- */
.raum-gruppe + .raum-gruppe, .cta-row + .raum-gruppe { margin-top: clamp(64px, 8vw, 112px); }
.raum-gruppe h2 { margin-bottom: 28px; }
.paar-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) { .paar-liste { grid-template-columns: 1fr; } }

/* ---------- Jobs ---------- */
.stellen { display: grid; gap: 18px; }
.stelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 28px clamp(20px, 3vw, 36px); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-soft); text-decoration: none; transition: transform 200ms var(--ease-out), box-shadow 200ms; position: relative; overflow: hidden; }
.stelle:hover { transform: translateY(-2px); box-shadow: var(--shadow-heft); }
.stelle h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); }
.stelle h2 span { font-weight: 300; }
.stelle p { margin-top: 8px; color: var(--ink-600); }
.stelle .textlink { white-space: nowrap; }
@media (max-width: 700px) { .stelle { grid-template-columns: 1fr; } }
.job-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px) clamp(32px, 6vw, 96px); }
.job-inhalt section h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 16px; }
@media (max-width: 860px) { .job-inhalt { grid-template-columns: 1fr; } }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 72ch; }
.rechtstext h1 { margin-bottom: var(--h1-gap, 20px); }
.rechtstext h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.rechtstext p, .rechtstext ul { margin-bottom: 14px; }
.platzhalter-hinweis { padding: 18px 20px; border-radius: var(--radius); background: var(--green-50); font-size: 0.9375rem; }

/* ---------- Bewegung ---------- */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); }
.js .zeigen.ist-da { opacity: 1; transform: none; }
.js .zeigen[data-verzug="1"] { transition-delay: 80ms; }
.js .zeigen[data-verzug="2"] { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .zeigen { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .overlay, .btn { display: none !important; }
}

/* Strecke mit vier Schritten (Seite kostenlos) */
.strecke--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strecke--4::before { width: 75%; }
.strecke--4 .strecke__fortschritt { width: calc(75% * var(--fortschritt, 0)); }
@media (max-width: 960px) { .strecke--4 { grid-template-columns: 1fr; } }

/* Play-Knopf im Raum in Signalfarbe, mit ruhigem Puls (Fabians Wunsch: wird sonst übersehen) */
.raum .play { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--purple); box-shadow: 0 16px 34px -10px rgba(91, 17, 255, 0.6); }
.raum .play svg { color: #fff; width: 32px; height: 32px; }
.raum .play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; }
.raum.ist-eingerichtet .play::before { animation: puls 2.4s var(--ease-out) 600ms infinite; }
.raum__knopf:hover .play { background: var(--purple-pressed); }
.raum .video-pill { background: var(--purple); color: #fff; }
@keyframes puls { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }
@media (max-width: 640px) { .raum .play { width: 72px; height: 72px; margin: -36px 0 0 -36px; } }

/* ---------- Spezialfälle: sechs Bildkacheln ---------- */
.faelle__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--faelle-gap, clamp(14px, 2vw, 24px)); }
.fall { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--green-800); box-shadow: var(--shadow-soft); }
.fall img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.faelle__liste > li { display: flex; }
.fall { flex: 1; }
.faelle__liste > li:has(.fall--gross) { grid-column: span 2; grid-row: span 2; }
.fall--gross { aspect-ratio: auto; min-height: 320px; }
.fall--gross img { position: absolute; inset: 0; }
.fall--gross .fall__text b { font-size: 1.375rem; }
.fall:hover img { transform: scale(1.045); }
.fall__text { position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; gap: 2px; padding: 14px 18px 15px; border-radius: 10px; background: rgba(244, 246, 245, 0.95); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(42, 46, 45, 0.45); transition: background 200ms; }
.fall__text b { font: 700 1.2rem/1.2 var(--font-display); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fall__text b::after { content: ""; flex: none; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349625f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 250ms var(--ease-out); }
.fall:hover .fall__text b::after { transform: translateX(4px); }
.fall__text span { font-size: 0.875rem; color: var(--ink-600); line-height: 1.35; }
.fall:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
@media (max-width: 900px) { .faelle__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faelle__liste > li:has(.fall--gross) { grid-row: auto; } .fall--gross { aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 560px) { .faelle__liste { grid-template-columns: 1fr; } .faelle__liste > li:has(.fall--gross) { grid-column: auto; } .fall--gross { aspect-ratio: 4 / 3; } }

/* ---------- Google-Bewertungen ---------- */
.google { margin-bottom: clamp(40px, 5vw, 64px); }
.google__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 24px; }
.google__note { display: flex; align-items: baseline; gap: 6px; }
.google__note b { font: 700 2.6rem/1 var(--font-display); color: var(--green-900); }
.google__note span { color: var(--ink-600); }
.google__kopf p { font-size: 0.9375rem; color: var(--ink-600); }
.google__kopf .sterne svg { width: 18px; height: 18px; }
.google__kopf .textlink { margin-left: auto; }
.google__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.google-karte { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: var(--radius); background: var(--fog); }
.google-karte__kopf { display: flex; align-items: center; justify-content: space-between; }
.google-karte__quelle { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-600); }
.google-karte blockquote { font-size: 0.9375rem; line-height: 1.55; color: var(--ink); flex: 1; }
.google-karte figcaption { font-size: 0.875rem; color: var(--ink-600); }
.google-karte figcaption b { color: var(--ink); }
@media (max-width: 960px) { .google__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .google__karten { grid-template-columns: 1fr; } .google__kopf .textlink { margin-left: 0; } }

/* ---------- Studienzahlen, zählen beim Erscheinen hoch ---------- */
.studie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 80px); border-radius: var(--radius); background: var(--band); overflow: hidden; }
.studie__zahl { position: relative; padding: 28px; }
.studie__zahl + .studie__zahl { border-left: 1px solid rgba(42, 46, 45, 0.14); }
.studie__zahl b { display: block; font: 700 clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem)/1 var(--font-display); color: var(--green-900); font-variant-numeric: tabular-nums; }
.studie__zahl span { display: block; margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; max-width: 22rem; }
@media (max-width: 760px) { .studie { grid-template-columns: 1fr; } .studie__zahl + .studie__zahl { border-left: 0; border-top: 1px solid rgba(42, 46, 45, 0.14); } }

/* ---------- Spezialfall-Seiten ---------- */
.fall-stimme { padding-block: clamp(40px, 5vw, 64px); }
.zitat-gross { max-width: 56rem; display: grid; gap: 14px; }
.zitat-gross .google-karte__kopf { justify-content: flex-start; gap: 14px; }
.zitat-gross blockquote { font: 500 clamp(1.2rem, 1rem + 0.8vw, 1.6rem)/1.4 var(--font-display); color: var(--ink); }
.zitat-gross figcaption { color: var(--ink-600); }
.bewertungs-zeile { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.stimme--breit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: 1000px; }
.stimme--breit .stimme__video { height: 100%; }
@media (max-width: 760px) { .stimme--breit { grid-template-columns: 1fr; } }
.fall-text { display: grid; gap: 16px; font-size: 1.0625rem; }
.fall-text .cta-row { margin-top: 12px; }
.section--green .loesung-nach { margin-top: 18px; color: var(--green-100); }
.quelle--hell { color: var(--green-100); }
.quelle--hell a { color: var(--fog); }
.galerie__bilder { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(10px, 1.5vw, 18px); }
.galerie__bilder img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.galerie figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-600); }
@media (max-width: 760px) { .galerie__bilder { grid-template-columns: 1fr 1fr; } .galerie__bilder img:first-child { grid-column: 1 / -1; } }

/* Bildwand der Spezialfall-Seiten: Mauerwerk aus Fotos, Klick öffnet die Lichtbox */
.bildwand { columns: 3 260px; column-gap: clamp(10px, 1.5vw, 16px); }
.bildwand__bild { display: block; margin-bottom: clamp(10px, 1.5vw, 16px); break-inside: avoid; border-radius: var(--radius); overflow: hidden; background: var(--green-50, #e8edec); cursor: zoom-in; }
.bildwand__bild img { display: block; width: 100%; height: auto; transition: transform 600ms var(--ease-out), filter 300ms; }
.bildwand__bild:hover img { transform: scale(1.03); }
.bildwand__bild:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.lichtbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(27, 31, 30, 0.94); color: var(--fog); }
.lichtbox::backdrop { background: rgba(27, 31, 30, 0.6); }
.lichtbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lichtbox__kopf { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 8px; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.lichtbox__buehne { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; }
.lichtbox__buehne img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; }
.lichtbox button { appearance: none; border: 0; background: rgba(244, 246, 245, 0.12); color: var(--fog); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.lichtbox button:hover { background: rgba(244, 246, 245, 0.22); }
.lichtbox button:focus-visible { outline: 3px solid var(--fog); outline-offset: 2px; }
.lichtbox__zurueck, .lichtbox__weiter { position: absolute; top: 50%; transform: translateY(-50%); }
.lichtbox__zurueck { left: 8px; } .lichtbox__weiter { right: 8px; }
.lichtbox__fuss { height: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) { .lichtbox__buehne { padding: 0 8px; } .lichtbox__zurueck, .lichtbox__weiter { top: auto; bottom: -56px; transform: none; } .lichtbox__fuss { height: calc(72px + env(safe-area-inset-bottom, 0px)); } }

/* Siegel und Plattformen im Footer (statische Logos, keine Widgets) */
.footer-siegel { border-bottom: 1px solid rgba(244, 246, 245, 0.12); }
.footer-siegel .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 20px; }
.footer-siegel span { font-size: 0.875rem; color: rgba(244, 246, 245, 0.7); }
.footer-siegel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer-siegel a { display: block; border-radius: 8px; opacity: 0.9; transition: opacity 200ms; }
.footer-siegel a:hover, .footer-siegel a:focus-visible { opacity: 1; }
.footer-siegel img { display: block; height: 64px; width: auto; margin: 0; }
@media (max-width: 560px) { .bildwand { columns: 2; } }
.footer-siegel img.siegel--flach { height: 32px; }

@media (max-width: 760px) { .google__karten > :nth-child(n+4) { display: none; } }

/* Erstgespräch als Textspalte */
.textspalte { border-top: 1px solid var(--line); }
.textspalte > div { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 12px clamp(24px, 4vw, 64px); padding-block: 28px; border-bottom: 1px solid var(--line); }
.textspalte h3 { margin: 0; }
.textspalte p { margin: 0; max-width: 42rem; font-size: 1.0625rem; color: var(--ink-600); }
@media (max-width: 760px) { .textspalte > div { grid-template-columns: 1fr; } }

/* Google-Logo klein */
.google-g { width: 16px; height: 16px; flex: none; }
.google-karte__quelle { display: inline-flex; align-items: center; gap: 6px; }
.google__quelle { display: inline-flex; align-items: center; gap: 6px; }

/* Header-Button auf dem Handy erst nach dem Hero */
@media (max-width: 760px) { .js.hero-cta:not(.hero-vorbei) .header-actions .btn { display: none; } }

/* Footer: soziale Profile */
.footer-siegel .sozial { gap: 8px 14px; }
.footer-siegel .sozial a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(244, 246, 245, 0.28); border-radius: 50%; color: var(--fog); }
.footer-siegel .sozial a:hover, .footer-siegel .sozial a:focus-visible { border-color: var(--fog); }
.footer-siegel .sozial svg { width: 20px; height: 20px; }

/* Bewertungszeile auf grünem Grund */
.abschluss .bewertung { color: var(--green-100); }
.abschluss .bewertung b { color: var(--fog); }
.abschluss .sterne { color: var(--fog); }
.bewertung .google-g { flex: none; }

/* ---------- Einwilligung (Cookie-Banner) ---------- */
.einwilligung { position: fixed; z-index: 90; left: var(--gutter); right: var(--gutter); bottom: 16px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(12px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.einwilligung.ist-offen { opacity: 1; transform: none; }
.einwilligung[hidden] { display: none; }
.einwilligung__box { pointer-events: auto; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--white); color: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-heft); padding: 22px 24px 20px; }
.einwilligung h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 8px; }
.einwilligung h2:focus { outline: none; }
.einwilligung p { font-size: var(--fs-small); line-height: 1.6; margin: 0; color: var(--ink); }
.einwilligung p a { color: var(--purple); }
.einwilligung__wahl { display: grid; gap: 10px; margin-top: 16px; }
.einwilligung__wahl[hidden] { display: none; }
.einwilligung__kat { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--fog); font-size: var(--fs-small); line-height: 1.5; cursor: pointer; }
.einwilligung__kat b { display: block; font-weight: 700; }
.einwilligung__kat input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--green); flex: none; }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.einwilligung__knoepfe .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 640px) { .einwilligung__knoepfe .btn { flex: 0 0 auto; } }
.overlay__einwilligung { overflow-y: auto; display: grid; gap: 16px; align-content: center; justify-items: start; height: 100%; padding: clamp(20px, 5vw, 48px); background: var(--green); color: var(--fog); }
.overlay__einwilligung p { margin: 0; max-width: 52ch; line-height: 1.6; }
.overlay__einwilligung a { color: var(--fog); }
.einwilligung__immer { display: flex; gap: 10px; align-items: center; font-size: var(--fs-small); cursor: pointer; }
.einwilligung__immer input { width: 18px; height: 18px; accent-color: var(--sage); }
.einwilligung__gleich, .einwilligung__gleich:hover { background: var(--green); color: var(--fog); box-shadow: none; }
.einwilligung__gleich:hover { background: #3d5350; }
.einwilligung__knoepfe [data-wahl="notwendig"], .einwilligung__knoepfe [data-wahl="alle"] { flex: 1 1 40%; }
.einwilligung__knoepfe [data-wahl="einstellungen"] { order: 3; flex-basis: 100%; }
@media (min-width: 640px) { .einwilligung__knoepfe [data-wahl="einstellungen"] { order: 0; flex-basis: auto; } .einwilligung__knoepfe [data-wahl="notwendig"], .einwilligung__knoepfe [data-wahl="alle"] { flex: 0 0 auto; min-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .einwilligung { transition: none; } }