/* ==========================================================================
   Intarbad – Entwurf 4
   Basis: Entwurf 1 (klare Flächen, große Headlines, Linienraster)
   + Hausschrift Sofia Pro, Blau aus dem Logo dezent (wie Entwurf 2)
   ========================================================================== */

/* Sofia Pro ist lizenzpflichtig (Adobe Fonts / MyFonts). Sobald das Kit
   eingebunden ist, greift "sofia-pro" automatisch. Bis dahin: Outfit als
   geometrisch nahe Ersatzschrift. */
:root {
  --font: "sofia-pro-variable", "sofia-pro", "Sofia Pro", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg: #ffffff;
  --surface: #f4f5f5;
  --surface-2: #eceeee;
  --ink: #12181c;          /* Dunkel aus dem Logo */
  --soft: rgba(18, 24, 28, .68);
  --faint: rgba(18, 24, 28, .5);
  --line: rgba(18, 24, 28, .12);
  --line-strong: rgba(18, 24, 28, .24);
  --dark: #0d1215;
  --dark-2: #151c21;
  --on-dark: #eef1f2;
  --on-dark-soft: rgba(238, 241, 242, .7);
  --on-dark-line: rgba(238, 241, 242, .16);

  --blue: #438cc8;         /* Blau aus dem Logo – nur für Akzente/Flächen */
  --blue-ink: #2a6ca3;     /* abgedunkelt für Text auf Weiß (AA) */
  --blue-block: #2a6ca3;   /* gefüllte Fläche, in beiden Designs gleich: Weiß darauf 5,5 zu 1 */
  --blue-soft: rgba(67, 140, 200, .1);

  --header-h: 92px;
  --gutter: clamp(18px, 4vw, 64px);
  --max: 1520px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 2px;
}
@media (max-width: 900px) { :root { --header-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--blue); color: #fff; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout-Helfer ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 150px); }
.section--tight { padding-block: clamp(56px, 7vw, 100px); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark .eyebrow { color: var(--on-dark-soft); }
.section--dark .lead, .section--dark .muted { color: var(--on-dark-soft); }
.border-top { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--blue); }
.eyebrow--plain::before { display: none; }
.h-display { font-size: clamp(46px, 7.6vw, 128px); line-height: .95; letter-spacing: -.04em; }
.h1 { font-size: clamp(40px, 5.6vw, 92px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-size: clamp(34px, 4.2vw, 68px); }
.h3 { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.02em; line-height: 1.1; }
.h4 { font-size: 20px; letter-spacing: -.01em; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; color: var(--soft); max-width: 58ch; }
.muted { color: var(--soft); }
.small { font-size: 14px; }
.accent { color: var(--blue); }

.section-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px 64px; align-items: end;
  margin-bottom: clamp(40px, 5vw, 76px);
}
.section-head > div:first-child { display: grid; gap: 22px; }
.section-head .lead { justify-self: start; }
.section-head__side { display: grid; gap: 24px; justify-items: start; }
@media (max-width: 900px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: var(--bg); --b-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px; border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; border-radius: var(--radius);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:hover { --b-bg: var(--blue-ink); --b-bd: var(--blue-ink); }
.btn--blue { --b-bg: var(--blue); --b-bd: var(--blue); --b-fg: #fff; }
.btn--blue:hover { --b-bg: var(--blue-ink); --b-bd: var(--blue-ink); }
.btn--outline { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line-strong); }
.btn--outline:hover { --b-bg: var(--ink); --b-fg: #fff; --b-bd: var(--ink); }
.btn--light { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.btn--light:hover { --b-bg: var(--blue); --b-fg: #fff; --b-bd: var(--blue); }
.btn--ghost-light { --b-bg: rgba(255,255,255,.08); --b-fg: #fff; --b-bd: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost-light:hover { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 11.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .btn-row .btn { flex: 1 1 100%; } }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px; padding-bottom: 6px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong); transition: border-color .3s, color .3s, gap .35s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; }
.link-arrow:hover { border-color: var(--blue); color: var(--blue-ink); gap: 16px; }
.section--dark .link-arrow { border-color: var(--on-dark-line); }
.section--dark .link-arrow:hover { color: #fff; border-color: var(--blue); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(13, 18, 21, .28); }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 36px); }
.brand { flex: none; display: flex; align-items: center; }
/* Kundenwunsch 1: Logo deutlich größer als in Entwurf 1 (dort 27 px).
   Seit 24.09. wieder die Raute-Fassung: sie ist randlos beschnitten, die
   Wortmarke füllt 88 % der Bildhöhe statt 56 % wie bei der Wellen-Fassung.
   Die kleineren Werte ergeben dieselbe Schriftgröße wie zuvor. */
.brand img { height: 32px; width: auto; }
@media (max-width: 900px) { .brand img { height: 26px; } }

.main-nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.main-nav > ul { display: flex; align-items: stretch; gap: clamp(0px, .5vw, 10px); margin: 0; padding: 0; list-style: none; }
.main-nav > ul > li { position: static; display: flex; }
.nav-link {
  position: relative; display: inline-flex; white-space: nowrap; align-items: center; gap: 7px; padding: 0 clamp(6px, .7vw, 12px);
  font-size: 15px; font-weight: 500; letter-spacing: .005em; color: var(--ink); background: none; border: 0; cursor: pointer;
}
.nav-link svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.nav-link::after {
  content: ""; position: absolute; left: clamp(6px, .7vw, 12px); right: clamp(6px, .7vw, 12px); bottom: 26px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }

.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { display: flex; align-items: center; border: 1px solid var(--line); height: 42px; border-radius: var(--radius); }
.lang a { display: grid; place-items: center; min-width: 40px; height: 100%; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--faint); }
/* 29.10. (Chef von Liza): die aktive Sprache war mit --surface (#f4f5f5) auf dem fast
   weissen Kopf praktisch nicht zu sehen. Jetzt ein dunkles Feld mit weisser Schrift,
   das liest sich auf einen Blick und bleibt ruhig, weil daneben schon der blaue
   Anfrage-Knopf sitzt. */
.lang a[aria-current="true"] { color: var(--bg); background: var(--ink); font-weight: 600; }
.lang a:hover { color: var(--blue-ink); }
.lang-dd { position: relative; }
.lang-dd summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px; border: 1px solid var(--line); cursor: pointer; font-size: 12.5px; font-weight: 500; letter-spacing: .1em; border-radius: var(--radius); }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary svg { width: 14px; height: 14px; }
.lang-dd summary svg:last-child { width: 10px; height: 10px; transition: transform .3s; }
.lang-dd[open] summary svg:last-child { transform: rotate(180deg); }
.lang-dd .lang { position: absolute; right: 0; top: calc(100% + 6px); flex-direction: column; height: auto; background: #fff; box-shadow: 0 16px 30px -18px rgba(0,0,0,.35); z-index: 5; min-width: 150px; }
.lang-dd .lang a { justify-content: start; display: flex; gap: 10px; height: 42px; padding: 0 14px; letter-spacing: .04em; font-size: 14px; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; border-radius: var(--radius); place-items: center; }
.menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1280px) {
  .main-nav, .header-tools .btn--outline { display: none; }
  .menu-toggle { display: grid; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 560px) {
  .header-tools .lang-dd, .header-tools .btn--blue { display: none; }
}

/* Mega-Menü Badmöbel */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(13, 18, 21, .35);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .35s var(--ease), visibility 0s linear .35s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s var(--ease); }
.mega__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 48px; padding-block: 40px 48px; }
.mega__title { margin-bottom: 18px; }
.mega__collections { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mega-card { display: grid; gap: 10px; }
.mega-card__img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.mega-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mega-card:hover img { transform: scale(1.06); }
.mega-card strong { font-weight: 500; font-size: 17px; }
.mega-card span { font-size: 12.5px; color: var(--faint); }
.mega__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mega__list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; transition: color .3s; }
.mega__list a small { display: block; font-size: 13px; font-weight: 400; color: var(--faint); margin-top: 2px; }
.mega__list a:hover { color: var(--blue-ink); padding-left: 8px; }
.mega__list svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.mega__feature { position: relative; display: flex; align-items: flex-end; min-height: 260px; padding: 26px; color: #fff; overflow: hidden; background: var(--dark); }
.mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .8s var(--ease); }
.mega__feature::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,18,21,0) 30%, rgba(13,18,21,.82)); }
.mega__feature:hover img { transform: scale(1.05); }
.mega__feature > div { position: relative; z-index: 2; display: grid; gap: 8px; }
.mega__feature strong { font-size: 26px; font-weight: 500; letter-spacing: -.02em; }

/* Mobiles Menü */
.drawer {
  position: fixed; inset: 0; z-index: 120; background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
.drawer__head { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); flex: none; }
.drawer__body { overflow-y: auto; padding-block: 12px 40px; flex: 1; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { list-style: none; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer__link { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 26px; font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--line); }
.drawer details .drawer__link { border-bottom: 0; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer summary svg, .drawer__link svg { width: 20px; height: 20px; flex: none; transition: transform .3s; }
.drawer__foot .h4 { font-weight: 500; }
.drawer__sub { display: grid; gap: 0; padding: 0 0 18px; }
.drawer__sub p { margin: 12px 0 4px; }
.drawer__sub a { padding: 9px 0; font-size: 17px; color: var(--soft); }
.drawer__foot { display: grid; gap: 16px; padding-top: 28px; }
.drawer__foot .lang { width: max-content; }

.page { padding-top: var(--header-h); }

/* ==========================================================================
   Hero-Entree (Startseite + Waschküche)
   Kundenwunsch 3: startet mit komplettem Motiv, Szenenwechsel per Scroll,
   Pfeile, Punkte, Tastatur, Wischen; blinkender Scroll-Hinweis.
   ========================================================================== */
.stage { position: relative; background: var(--dark); }
.stage__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 520px; overflow: hidden; }
.stage[data-scenes="1"] .stage__sticky { position: relative; }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.scene.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s ease; }
.scene__media { position: absolute; inset: 0; overflow: hidden; }
.scene__media img, .scene__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%);
  transform: scale(1.06); transition: transform 7s cubic-bezier(.16, .6, .3, 1);
}
.scene.is-active .scene__media img, .scene.is-active .scene__media video { transform: scale(1); }
.scene__media video + img { opacity: 0; transition: opacity .6s ease, transform 7s cubic-bezier(.16, .6, .3, 1); }
.scene__media.is-ended video + img { opacity: 1; }
.scene__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--shade-dir, 90deg), rgba(10, 14, 16, .66) 0%, rgba(10, 14, 16, .42) 20%, rgba(10, 14, 16, 0) 42%),
    linear-gradient(180deg, rgba(10, 14, 16, .18) 0%, rgba(10, 14, 16, 0) 18%, rgba(10, 14, 16, 0) 72%, rgba(10, 14, 16, .5) 100%); }
.scene[data-side="right"] { --shade-dir: 270deg; }
/* Text sitzt in einer schmalen Spalte auf der freien Bildseite –
   das Möbel bleibt frei sichtbar (Kundenwunsch 3.1: "muss catchen"). */
.scene__content { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; padding-bottom: clamp(104px, 14vh, 160px); }
.scene__copy { width: min(25vw, 460px); min-width: 300px; }
.scene[data-side="right"] .scene__copy { margin-left: auto; }
.scene__content .eyebrow { color: rgba(255, 255, 255, .88); }
.scene__title { margin: 18px 0 16px; font-size: clamp(38px, 3.9vw, 82px); line-height: .96; letter-spacing: -.04em; font-weight: 500; text-shadow: 0 2px 30px rgba(0,0,0,.18); }
.scene__text { max-width: 36ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, .9); margin-bottom: 26px; }
.scene__copy > * { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease); }
.scene.is-active .scene__copy > * { opacity: 1; transform: none; }
.scene.is-active .scene__copy > :nth-child(1) { transition-delay: .25s; }
.scene.is-active .scene__copy > :nth-child(2) { transition-delay: .35s; }
.scene.is-active .scene__copy > :nth-child(3) { transition-delay: .45s; }
.scene.is-active .scene__copy > :nth-child(4) { transition-delay: .55s; }
@media (min-width: 1101px) { .scene .btn-row { flex-direction: column; align-items: stretch; max-width: 320px; gap: 10px; } .scene .btn-row .btn { justify-content: space-between; padding: 0 20px; } }

.stage__ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; }
.stage__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; color: #fff; }
.stage__bar > * { pointer-events: auto; }
.stage__bar > div:last-child { margin-left: auto; }
.stage__dots { display: flex; gap: 8px; align-items: center; }
.stage__dot { position: relative; width: 56px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.stage__dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255, 255, 255, .32); }
.stage__dot i { position: absolute; left: 0; top: 50%; height: 2px; width: 0; background: #fff; transition: none; }
.stage__dot.is-active i { width: 100%; }
.stage__dot span { position: absolute; left: 0; bottom: 100%; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: .3s; white-space: nowrap; }
.stage__dot:hover span, .stage__dot.is-active span { opacity: .9; transform: none; }
.stage__count { font-size: 13px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); min-width: 64px; }
.stage__arrows { display: flex; gap: 8px; }
.round-btn {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(13, 18, 21, .25); color: #fff; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, border-color .3s, color .3s, opacity .3s;
}
.round-btn svg { width: 20px; height: 20px; }
.round-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.round-btn:disabled { opacity: .35; pointer-events: none; }
.round-btn--dark { border-color: var(--line-strong); background: transparent; color: var(--ink); backdrop-filter: none; }
.round-btn--dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Kundenwunsch 3.5: blinkender Pfeil nach unten */
.scroll-cue {
  position: absolute; left: 50%; bottom: 20px; z-index: 6; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; color: #fff; background: none; border: 0; cursor: pointer; padding: 6px 12px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.scroll-cue__ring { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); animation: cue-blink 1.6s ease-in-out infinite; }
.scroll-cue svg { width: 22px; height: 22px; }
@keyframes cue-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { opacity: .45; box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

.stage.is-last .scroll-cue span { opacity: .75; }

/* Tablet & Mobil: Bild oben komplett frei, Text darunter */
@media (max-width: 1100px) {
  .stage__sticky { min-height: 600px; }
  .scene { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--dark); }
  .scene__media { position: relative; inset: auto; }
  .scene__media img, .scene__media video { object-position: var(--pos-m, var(--pos, 50% 45%)); }
  .scene__shade { display: none; }
  .scene__content { position: relative; inset: auto; display: block; padding: 22px 0 96px; }
  .scene__copy { width: auto; margin: 0 !important; }
  .scene__title { font-size: clamp(34px, 8.4vw, 60px); margin: 12px 0 10px; }
  .scene__text { margin-bottom: 18px; font-size: 15px; max-width: 52ch; }
  .stage__dots { display: none; }
  .stage__bar { height: 84px; border-top: 1px solid var(--on-dark-line); }
  .round-btn { width: 46px; height: 46px; }
  .scroll-cue { bottom: 17px; }
  .scroll-cue span:first-child { display: none; }
  .scroll-cue__ring { width: 46px; height: 46px; }
}
@media (max-width: 1100px) and (min-width: 700px) {
  .scene__copy { display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: end; }
  .scene__copy > .eyebrow, .scene__copy > .scene__title { grid-column: 1 / -1; }
  .scene__text { margin-bottom: 0; }
}
@media (max-width: 520px) {
  .scene__text { display: none; }
  .scene .btn-row { flex-wrap: nowrap; gap: 8px; }
  .scene .btn-row .btn { flex: 1 1 50%; min-height: 46px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; }
  .scene .btn-row .btn svg { display: none; }
}

/* Die alte Trust-Leiste (.trust__grid / .trust__item) stand seit Entwurf 4 ungenutzt im Stylesheet.
   Entfernt am 20.10., weil ihr `.trust { background: #fff }` die neue Vertrauenszeile in der dunklen
   Fußzeile weiß hinterlegt hat und ihr `.stars svg { ... !important }` die Teilfüllung der
   Sternbewertungen überschrieben hat. */

/* ==========================================================================
   Kollektions-Slider (aus Entwurf 1, ohne Scroll-Zwang)
   ========================================================================== */
.coll { display: grid; grid-template-columns: minmax(320px, 34%) 1fr; min-height: min(82vh, 800px); border-block: 1px solid var(--line); background: #fff; }
.coll__panel { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: clamp(28px, 3.4vw, 60px) var(--gutter) clamp(28px, 3.4vw, 60px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); border-right: 1px solid var(--line); min-width: 0; }
.coll__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.coll__names { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.coll__name {
  display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: clamp(28px, 2.7vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); opacity: .26;
  transition: opacity .4s ease;
}
.coll__name small { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); opacity: 0; transition: opacity .3s; }
.coll__name:hover { opacity: .6; }
.coll__name.is-active { opacity: 1; padding-left: 18px; box-shadow: inset 3px 0 0 var(--blue); }
.coll__name.is-active small { opacity: 1; }
.coll__meta { display: grid; min-height: 0; }
.coll__info { grid-area: 1 / 1; display: grid; gap: 20px; align-content: start; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s ease, transform .5s var(--ease); }
.coll__info.is-active { opacity: 1; transform: none; pointer-events: auto; }
.coll__info p { max-width: 44ch; color: var(--soft); font-size: 16px; line-height: 1.7; }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.specs li { padding: 7px 12px; border: 1px solid var(--line); font-size: 12.5px; letter-spacing: .04em; color: var(--soft); background: var(--surface); }
.coll__media { position: relative; overflow: hidden; background: var(--dark); min-height: 420px; }
.coll__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.coll__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.coll__cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 90px clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px); color: #fff; background: linear-gradient(180deg, rgba(10,14,16,0), rgba(10,14,16,.72)); }
.coll__cta .eyebrow { color: rgba(255,255,255,.8); }
.coll__cta strong { display: block; font-size: clamp(34px, 3.6vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 8px; }
.coll__cta > div:first-child > * { transform: translateY(14px); opacity: 0; transition: .7s var(--ease) .15s; }
.coll__slide.is-active .coll__cta > div:first-child > * { transform: none; opacity: 1; }
.coll__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.04); transition: transform 6s var(--ease); }
.coll__slide.is-active img { transform: none; }
.coll__caption { position: absolute; left: 28px; bottom: 26px; right: 28px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; color: #fff; pointer-events: none; }
.coll__caption > * { pointer-events: auto; }

.coll__progress { position: relative; height: 2px; background: var(--line); margin-top: 14px; }
.coll__progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); transition: none; }
@media (max-width: 960px) {
  .coll { grid-template-columns: 1fr; min-height: 0; }
  .coll__panel { border-right: 0; padding: 28px var(--gutter) 36px; order: 2; }
  .coll__media { order: 1; aspect-ratio: 4 / 3.6; min-height: 0; }
  .coll__cta { padding-top: 70px; }
  .coll__cta .btn-row { flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  .coll__cta .btn-row .btn { flex: 1 1 50%; min-height: 46px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; }
  .coll__cta strong { font-size: 34px; }
  .coll__names { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .coll__names::-webkit-scrollbar { display: none; }
  .coll__name { font-size: 30px; width: auto; padding: 2px 10px 8px 0; box-shadow: none !important; }
  .coll__name.is-active { padding-left: 0; box-shadow: inset 0 -2px 0 var(--blue) !important; }
  .coll__name small { display: none; }
}

/* ==========================================================================
   Kachel-Grid (Element aus Entwurf 2)
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 23vw, 350px); gap: 12px; }
.tile { position: relative; display: block; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.tile--7 { grid-column: span 7; } .tile--5 { grid-column: span 5; } .tile--4 { grid-column: span 4; } .tile--8 { grid-column: span 8; } .tile--6 { grid-column: span 6; }
.tile--tall { grid-row: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; transition: transform .9s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,16,.5) 0%, rgba(10,14,16,0) 42%, rgba(10,14,16,.12) 70%, rgba(10,14,16,.6) 100%); transition: opacity .5s; }
.tile:hover img { transform: scale(1.05); }
.tile__top { position: absolute; left: 24px; right: 24px; top: 22px; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.tile__title { font-size: clamp(24px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.tile__kicker { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.tile__arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.6); transition: background .3s, color .3s, border-color .3s; }
.tile__arrow svg { width: 17px; height: 17px; }
.tile:hover .tile__arrow { background: var(--blue); border-color: var(--blue); }
.tile__bottom { position: absolute; left: 24px; right: 24px; bottom: 22px; font-size: 15px; line-height: 1.5; max-width: 42ch; opacity: .92; }
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .tiles .tile { grid-column: auto !important; grid-row: auto !important; }
}

/* ==========================================================================
   Nach Maß (Element aus Entwurf 3 – mit Luxor)
   ========================================================================== */
.measure { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.measure__visual { position: relative; }
.measure__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.measure__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.measure__line {
  --w: 60%;
  position: absolute; left: 53.5%; bottom: 6%; width: var(--w); transform: translateX(-50%); height: 36px; color: var(--ink);
  transition: none;
}
.measure__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.measure__line i { position: absolute; top: 4px; bottom: 4px; width: 1.5px; background: currentColor; }
.measure__line i:first-child { left: 0; } .measure__line i:last-of-type { right: 0; }
.measure__line b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 12px; background: var(--blue); color: #fff; font-weight: 500; font-size: 15px; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.measure__tag { position: absolute; left: 20px; top: 20px; padding: 8px 12px; background: rgba(255,255,255,.92); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.measure__body { display: grid; gap: 24px; }
.measure__ctrl { display: grid; gap: 14px; padding: 26px; border: 1px solid var(--line); background: #fff; }
.measure__ctrl label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--soft); }
.measure__ctrl output { font-size: 40px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.measure__ctrl output small { font-size: 18px; color: var(--faint); margin-left: 4px; }
.measure__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--blue) var(--p, 40%), var(--line-strong) var(--p, 40%)); }
input[type="range"]::-moz-range-track { height: 3px; background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 3px; background: var(--blue); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); }
.checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.checklist svg { width: 20px; height: 20px; flex: none; color: var(--blue); margin-top: 2px; }
@media (max-width: 960px) { .measure { grid-template-columns: 1fr; } }

/* ==========================================================================
   Feature-Band (Waschküche-Teaser u. a.)
   ========================================================================== */
.band { position: relative; min-height: min(88vh, 820px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--dark); isolation: isolate; }
.band > img, .band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,14,16,.78) 0%, rgba(10,14,16,.35) 50%, rgba(10,14,16,.05) 100%); }
.band__content { padding-block: clamp(56px, 8vw, 110px); display: grid; gap: 22px; max-width: 640px; }
.band__content .eyebrow { color: rgba(255,255,255,.85); }
.band__content p { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.7; }
@media (max-width: 760px) { .band::before { background: linear-gradient(180deg, rgba(10,14,16,.1) 20%, rgba(10,14,16,.85) 80%); } }

.band-split { display: grid; grid-template-columns: minmax(0, 36%) 1fr; background: var(--dark); color: #fff; min-height: min(84vh, 780px); }
.band-split__text { display: grid; gap: 22px; align-content: center; padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(40px, 5vw, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.band-split__text .eyebrow { color: var(--on-dark-soft); }
.band-split__text .lead { color: var(--on-dark-soft); }
.band-split__text .specs li { background: rgba(255,255,255,.05); border-color: var(--on-dark-line); color: var(--on-dark-soft); }
.band-split__media { position: relative; overflow: hidden; min-height: 420px; }
.band-split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
.band-split__tag { position: absolute; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(13,18,21,.6); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.band-split__tag svg { width: 18px; height: 18px; color: var(--blue); }
@media (max-width: 960px) { .band-split { grid-template-columns: 1fr; } .band-split__media { order: -1; aspect-ratio: 16 / 10; min-height: 0; } }

/* ==========================================================================
   Bedürfnisfinder
   ========================================================================== */
.finder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.finder__intro { display: grid; gap: 22px; position: sticky; top: calc(var(--header-h) + 40px); }
.finder__box { background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(13,18,21,.45); }
.finder__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.finder__steps { display: flex; gap: 6px; }
.finder__steps i { width: 38px; height: 3px; background: var(--line); transition: background .4s; }
.finder__steps i.is-done { background: var(--blue); }
.finder__step { display: none; padding: clamp(24px, 3vw, 40px) 28px 32px; }
.finder__step.is-active { display: block; animation: step-in .5s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.finder__q { margin-bottom: 24px; font-size: clamp(24px, 2.3vw, 34px); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice {
  position: relative; display: grid; gap: 12px; align-content: start; min-height: 150px; padding: 20px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); background: #fff; transition: border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
.choice svg { width: 34px; height: 34px; color: var(--blue); }
.choice strong { font-size: 18px; font-weight: 500; line-height: 1.25; }
.choice span { font-size: 14px; color: var(--soft); line-height: 1.45; }
.choice:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 30px -24px rgba(13,18,21,.5); }
.choice[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.choice--img { padding: 0; overflow: hidden; min-height: 0; }
.choice--img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.choice--img div { display: grid; gap: 4px; padding: 14px 16px 16px; }
.finder__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.finder__back { background: none; border: 0; padding: 10px 0; cursor: pointer; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.finder__back:hover { color: var(--ink); }
.finder__result { display: grid; gap: 16px; }
.result-card { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; padding: 14px; border: 1px solid var(--line); }
.result-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.result-card h4 { font-size: 22px; margin-bottom: 6px; }
.result-card p { font-size: 14.5px; color: var(--soft); margin-bottom: 14px; }
@media (max-width: 960px) { .finder { grid-template-columns: 1fr; } .finder__intro { position: static; } }
@media (max-width: 560px) { .choices { grid-template-columns: 1fr; } .choice { min-height: 0; grid-template-columns: 34px 1fr; align-items: center; } .choice span { grid-column: 2; } .choice--img { grid-template-columns: 1fr; } .result-card { grid-template-columns: 1fr; } }

/* ==========================================================================
   Warum Intarbad
   ========================================================================== */
.why { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--on-dark-line); border: 1px solid var(--on-dark-line); }
.why > * { background: var(--dark); }
.why__stat { grid-column: span 3; padding: clamp(26px, 3vw, 44px); display: grid; gap: 10px; align-content: end; min-height: 250px; }
.why__num { font-size: clamp(64px, 7vw, 120px); font-weight: 500; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.why__num sup { font-size: .38em; letter-spacing: 0; vertical-align: top; position: relative; top: .25em; color: var(--blue); margin-left: 4px; }
.why__label { font-size: 16px; color: var(--on-dark); font-weight: 500; }
.why__stat p { font-size: 14px; color: var(--on-dark-soft); line-height: 1.55; }
.why__img { grid-column: span 6; grid-row: span 2; position: relative; min-height: 320px; overflow: hidden; }
.why__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why__img figcaption { position: absolute; left: 22px; bottom: 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.why__feature { grid-column: span 4; padding: clamp(26px, 3vw, 40px); display: grid; gap: 14px; align-content: start; transition: background .4s; }
.why__feature:hover { background: var(--dark-2); }
.why__feature svg { width: 40px; height: 40px; color: var(--blue); }
.why__feature h3 { font-size: 21px; letter-spacing: -.01em; }
.why__feature p { font-size: 15px; color: var(--on-dark-soft); line-height: 1.6; }
@media (max-width: 1100px) { .why__stat { grid-column: span 6; } .why__img { grid-column: span 12; grid-row: auto; min-height: 380px; } .why__feature { grid-column: span 6; } }
@media (max-width: 620px) { .why__stat, .why__feature { grid-column: span 12; min-height: 0; } }

/* ==========================================================================
   Bewertungen
   ========================================================================== */
.reviews { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 70px); align-items: start; }
.rating { display: grid; gap: 14px; padding: 30px; border: 1px solid var(--line); background: #fff; }
.rating__score { font-size: 76px; font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.rating .stars svg { width: 22px !important; height: 22px !important; }
.g-logo { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); }
.g-logo svg { width: 22px; height: 22px; }
.review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.review { display: grid; gap: 14px; align-content: start; padding: 26px; background: #fff; border: 1px solid var(--line); }
.review p { font-size: 15.5px; line-height: 1.65; }
.review footer { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 14px; }
.review footer b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font-weight: 500; }
.review footer span { color: var(--faint); display: block; font-size: 12.5px; }
.note { font-size: 12.5px; color: var(--faint); display: flex; gap: 8px; align-items: center; }
.note::before { content: "i"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; font-style: italic; flex: none; }
@media (max-width: 1100px) { .reviews { grid-template-columns: 1fr; } .review-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   Magazin
   ========================================================================== */
.mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.mag-card { display: grid; gap: 18px; align-content: start; }
.mag-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.mag-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mag-card:hover img { transform: scale(1.05); }
.mag-card__meta { display: flex; gap: 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.mag-card__meta b { color: var(--blue-ink); font-weight: 500; }
.mag-card h3 { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.02em; line-height: 1.15; transition: color .3s; }
.mag-card:hover h3 { color: var(--blue-ink); }
.mag-card p { color: var(--soft); font-size: 15px; }
.mag-grid--feature .mag-card:first-child { grid-column: span 2; grid-row: span 2; }
.mag-grid--feature .mag-card:first-child .mag-card__img { aspect-ratio: 16/11; }
@media (max-width: 900px) { .mag-grid, .mag-grid--feature { grid-template-columns: 1fr; } .mag-grid--feature .mag-card:first-child { grid-column: auto; grid-row: auto; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 90px); }
.faq__intro { display: grid; gap: 22px; align-content: start; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; letter-spacing: -.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; transition: background .3s, border-color .3s; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.acc summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc details[open] summary i { background: var(--blue); border-color: var(--blue); color: #fff; }
.acc details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.acc summary:hover { color: var(--blue-ink); }
.acc__body { padding: 0 60px 26px 0; color: var(--soft); font-size: 16px; line-height: 1.75; max-width: 70ch; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .acc__body { padding-right: 0; } }

/* ==========================================================================
   Kontakt-CTA & Formular
   ========================================================================== */
.cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: end; }
.cta__big { font-size: clamp(40px, 5.2vw, 84px); letter-spacing: -.04em; line-height: .98; }
.cta__contact { display: grid; gap: 18px; }
.cta__phone { font-size: clamp(28px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--on-dark-line); padding-bottom: 10px; width: max-content; transition: color .3s, border-color .3s; }
.cta__phone:hover { color: var(--blue); border-color: var(--blue); }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; } }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 1px solid var(--line-strong); background: #fff; border-radius: var(--radius);
  font: inherit; font-size: 16px; color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented label { position: relative; cursor: pointer; }
/* Der Radio liegt unsichtbar hinter seinem Text. Ohne eigene Maße erbt er
   `width:100%` von `.field input` und schiebt die Seite auf, sobald das
   Label (siehe .form--lines) nicht mehr sein Bezugspunkt ist. */
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px;
  min-height: 0; padding: 0; margin: 0; pointer-events: none; }
.segmented span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); font-size: 15px; transition: .25s; }
.segmented input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.segmented input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form__success { display: none; padding: 26px; border: 1px solid var(--blue); background: var(--blue-soft); }
.form.is-sent { display: none; }
.form.is-sent + .form__success { display: block; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark); color: var(--on-dark); padding-top: clamp(64px, 8vw, 110px); }
.site-footer a { transition: color .3s; }
.site-footer a:hover { color: var(--blue); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--on-dark-line); }
.footer__brand { display: grid; gap: 22px; align-content: start; }
.footer__brand img { height: 36px; width: auto; }
.footer__brand p { color: var(--on-dark-soft); max-width: 34ch; font-size: 15px; }
.footer__col h4 { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 18px; }
.footer__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; }
.footer__col address { font-style: normal; color: var(--on-dark-soft); font-size: 15px; line-height: 1.8; }
.footer__shop { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--on-dark-line); }
.footer__shop p { color: var(--on-dark-soft); font-size: 15px; max-width: 60ch; }
/* Kundenwunsch 15: designbaeder.com-Logo im Footer.
   Platzhalter-Wortmarke, bis die Originaldatei vorliegt. */
.db-logo { display: inline-grid; gap: 4px; padding: 14px 18px; background: #fff; color: #111; line-height: 1; }
.db-logo b { font-size: 25px; font-weight: 500; font-style: italic; letter-spacing: -.01em; }
.db-logo b em { font-style: italic; color: var(--blue); }
.db-logo small { font-size: 8.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #555; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 26px 34px; font-size: 13.5px; color: var(--on-dark-soft); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__bottom .lang { border-color: var(--on-dark-line); }
.footer__bottom .lang a { color: var(--on-dark-soft); }
.footer__bottom .lang a[aria-current="true"] { background: var(--on-dark-ink, #fff); color: #12181c; font-weight: 600; }
.footer__wordmark { font-size: clamp(80px, 22vw, 380px); font-weight: 500; letter-spacing: -.06em; line-height: .78; color: rgba(238,241,242,.05); white-space: nowrap; user-select: none; overflow: hidden; margin-top: 20px; }
@media (max-width: 1000px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } .footer__shop { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Unterseiten
   ========================================================================== */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--faint); }
.crumbs a:hover { color: var(--blue-ink); }
.crumbs span[aria-hidden] { opacity: .5; }
.page-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(78vh, 780px); border-bottom: 1px solid var(--line); }
.page-hero__text { display: grid; align-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 60px) var(--gutter) clamp(36px, 5vw, 70px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.page-hero__text > div { display: grid; gap: 24px; }
.page-hero__media { position: relative; overflow: hidden; background: var(--surface); min-height: 380px; }
.page-hero__media img, .page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 960px) { .page-hero { grid-template-columns: 1fr; min-height: 0; } .page-hero__media { order: -1; aspect-ratio: 4/3; min-height: 0; } }

.page-hero--simple { display: block; min-height: 0; padding-block: clamp(40px, 6vw, 90px) clamp(40px, 5vw, 70px); }
.page-hero--simple .wrap { display: grid; gap: 26px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 90px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.split__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.split__body { display: grid; gap: 22px; align-content: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.4vw, 36px); border: 1px solid var(--line); background: #fff; transition: border-color .3s, transform .3s var(--ease); }
a.card:hover { border-color: var(--blue); transform: translateY(-3px); }
.card > svg { width: 38px; height: 38px; color: var(--blue); }
.card h3 { font-size: 22px; letter-spacing: -.015em; }
.card p { font-size: 15px; color: var(--soft); }
.card__num { font-size: 13px; letter-spacing: .14em; color: var(--blue-ink); font-weight: 500; }
@media (max-width: 1000px) { .cards, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards, .cards--4 { grid-template-columns: 1fr; } }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.product { display: grid; gap: 16px; align-content: start; }
.product__img { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; background: var(--surface); }
.product__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .8s var(--ease); }
.product:hover .product__img img { transform: scale(1.04); }
.product__badge { position: absolute; left: 14px; top: 14px; padding: 6px 10px; background: #fff; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.product h3 { font-size: 30px; letter-spacing: -.03em; }
.product p { color: var(--soft); font-size: 15px; }
.product .btn-row .btn { flex: 1 1 auto; }
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } }

/* Dekor-Umschalter (Unterschränke) */
.decor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.decor__stage { position: relative; aspect-ratio: 1; background: #e9e9e7; overflow: hidden; }
.decor__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.decor__stage img.is-active { opacity: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--soft); }
.swatch i { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .25s; background-size: cover; }
.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--blue); }
.swatch[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 900px) { .decor { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; border-top: 1px solid var(--line); }
.steps li { list-style: none; counter-increment: s; padding: 28px 24px 0 0; display: grid; gap: 12px; align-content: start; }
.steps li::before { content: "0" counter(s); font-size: 14px; font-weight: 500; letter-spacing: .12em; color: var(--blue-ink); }
.steps h3 { font-size: 22px; }
.steps p { color: var(--soft); font-size: 15px; }
.steps { padding: 0; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.spec-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 38%; font-weight: 500; color: var(--soft); padding-right: 20px; }

.article { max-width: 760px; margin-inline: auto; }
.article p { font-size: 18.5px; line-height: 1.8; color: #2a3136; margin-bottom: 24px; }
.article h2 { font-size: 34px; margin: 48px 0 18px; }
.article figure { margin: 40px 0; }
.article figcaption { font-size: 14px; color: var(--faint); margin-top: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong); background: #fff; font-size: 14px; cursor: pointer; transition: .25s; }
.chip[aria-pressed="true"], .chip:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Scroll-Reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Fassung 2 – Strukturdokument 14.09. + Notizen
   ========================================================================== */
/* Header: sieben Einträge */
.nav-link { font-size: 14.5px; }
@media (max-width: 1400px) { .nav-link { font-size: 14px; padding: 0 clamp(5px, .5vw, 9px); } .header-tools .btn--outline { display: none; } }
@media (max-width: 1280px) { .main-nav { display: none; } .header-tools .btn--outline { display: none; } }
.mega__grid--2 { grid-template-columns: 1.8fr 1fr; }
.mega__collections--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-card--wide .mega-card__img { aspect-ratio: 4 / 3; }

/* Große Buchstaben (Entwurf 3) */
.giant { font-size: clamp(54px, 9.2vw, 168px); line-height: .9; letter-spacing: -.05em; font-weight: 500; margin: 26px 0 40px; text-wrap: balance; }
.giant__accent { color: var(--blue); }
.haltung { background: #fff; border-bottom: 1px solid var(--line); }
.haltung__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 60px; align-items: end; max-width: 1100px; }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: clamp(40px, 6vw, 80px) 0 0; padding: 0; list-style: none; }
.numbers li { background: #fff; padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 6px; border-top: 3px solid var(--blue); }
.numbers b { font-size: clamp(40px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.numbers span { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) { .haltung__row { grid-template-columns: 1fr; } .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stage: Überspringen */
.stage__skip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.45); background: rgba(13,18,21,.25); color: #fff; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(10px); transition: .3s; }
.stage__skip svg { width: 14px; height: 14px; }
.stage__skip:hover { background: #fff; color: var(--ink); }
@media (max-width: 1100px) { .stage__skip { display: none; } }

/* Einzelmöbel: vier Kacheln */
.tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 26vw, 400px); }
.tile__cta { position: absolute; left: 24px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: .35s var(--ease); }
.tile:hover .tile__cta { opacity: 1; transform: none; }
@media (hover: none) { .tile__cta { opacity: 1; transform: none; } }
@media (max-width: 900px) { .tiles--4 { grid-template-columns: 1fr; } }

/* Nach Maß: Ablauf */
.mini-steps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; counter-reset: ms; }
.mini-steps li { counter-increment: ms; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); }
.mini-steps li::before { content: counter(ms); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; }

/* Badplaner */
.planner { position: relative; overflow: hidden; }
.planner::before { content: "?"; position: absolute; right: -2vw; top: -6vw; font-size: clamp(300px, 40vw, 720px); line-height: 1; font-weight: 500; color: rgba(255,255,255,.035); pointer-events: none; }
.planner__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); position: relative; }
.planner__head .lead { color: var(--on-dark-soft); }
.planner__box { position: relative; background: var(--dark-2); border: 1px solid var(--on-dark-line); padding: clamp(24px, 3.4vw, 48px); }
.planner__progress { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.planner__progress i { flex: 1; height: 3px; background: rgba(255,255,255,.12); display: block; }
.planner__progress b { display: block; height: 100%; background: var(--blue); transition: none; }
.planner__num { font-size: clamp(48px, 5vw, 80px); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--blue); margin-bottom: 8px; }
.planner__num svg { width: .8em; height: .8em; }
.planner__q { font-size: clamp(26px, 3vw, 44px); margin-bottom: 30px; }
.pchoices { display: grid; gap: 12px; }
.pchoices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pchoices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pchoices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pchoice { position: relative; display: grid; gap: 10px; align-content: start; padding: 22px; min-height: 170px; text-align: left; cursor: pointer; border: 1px solid var(--on-dark-line); background: rgba(255,255,255,.03); color: #fff; transition: border-color .25s, background .25s, transform .3s var(--ease); }
.pchoice svg { width: 34px; height: 34px; color: var(--blue); }
.pchoice strong { font-size: 19px; font-weight: 500; line-height: 1.2; }
.pchoice span { font-size: 14px; color: var(--on-dark-soft); }
.pchoice:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); transform: translateY(-3px); }
.pchoice[aria-pressed="true"] { border-color: var(--blue); background: rgba(67,140,200,.14); box-shadow: inset 0 0 0 1px var(--blue); }
.pchoice__img { display: block; aspect-ratio: 16 / 10; margin: -22px -22px 6px; overflow: hidden; }
.pchoice__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pchoice:hover .pchoice__img img { transform: scale(1.05); }
.planner__result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.presult { display: grid; grid-template-rows: auto 1fr; background: #fff; color: var(--ink); overflow: hidden; }
.presult__img { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.presult__img img { width: 100%; height: 100%; object-fit: cover; }
.presult__img span { position: absolute; left: 12px; top: 12px; padding: 5px 9px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.presult__body { display: grid; gap: 10px; align-content: start; padding: 20px; }
.presult__body h4 { font-size: 28px; letter-spacing: -.03em; }
.presult__body p { font-size: 14.5px; color: var(--soft); }
.presult .btn-row { margin-top: 6px; }
.presult .btn-row .btn { flex: 1 1 auto; min-height: 44px; padding: 0 12px; font-size: 11px; }
.planner__note { grid-column: 1 / -1; padding: 16px 18px; border: 1px solid var(--on-dark-line); color: var(--on-dark-soft); font-size: 14.5px; }
.planner__note a { color: #fff; text-decoration: underline; }
.planner .finder__back { color: var(--on-dark-soft); }
.planner .finder__back:hover { color: #fff; }
.planner--page .planner__head { min-height: 20vh; }
@media (max-width: 1000px) { .planner__head { grid-template-columns: 1fr; } .pchoices--4, .pchoices--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .planner__result { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pchoices--2, .pchoices--3, .pchoices--4 { grid-template-columns: 1fr; } .pchoice { min-height: 0; } }

/* Warum Intarbad: sechs Bildkarten */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.why-card { background: #fff; border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; transition: transform .35s var(--ease), box-shadow .35s; }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -40px rgba(13,18,21,.5); }
.why-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.why-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.why-card:hover .why-card__img img { transform: scale(1.05); }
.why-card__num { position: absolute; left: 16px; top: 14px; font-size: 44px; font-weight: 500; letter-spacing: -.04em; color: #fff; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.why-card__body { display: grid; gap: 10px; align-content: start; padding: 24px; }
.why-card__body svg { width: 30px; height: 30px; color: var(--blue); }
.why-card__body h3 { font-size: 22px; letter-spacing: -.015em; }
.why-card__body p { font-size: 15px; color: var(--soft); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .why-grid { grid-template-columns: 1fr; } }

/* Kontakt & Anfrage: zwei Wege */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; align-items: stretch; }
.contact-grid__intro { display: grid; gap: 26px; align-content: center; padding-right: clamp(0px, 3vw, 50px); }
.contact-lines { display: grid; gap: 6px; font-size: 16px; }
.contact-lines .cta__phone { margin-bottom: 8px; }
.path-card { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 2.6vw, 38px); border: 1px solid var(--on-dark-line); background: var(--dark-2); color: #fff; transition: border-color .3s, transform .35s var(--ease), background .3s; }
.path-card svg { width: 36px; height: 36px; color: var(--blue); }
.path-card .eyebrow { color: var(--on-dark-soft); }
.path-card strong { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.path-card p { font-size: 15px; color: var(--on-dark-soft); flex: 1; }
.path-card__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.path-card__cta svg { width: 16px; height: 16px; color: #fff; transition: transform .3s; }
.path-card:hover { border-color: var(--blue); background: rgba(67,140,200,.12); transform: translateY(-4px); }
.path-card:hover .path-card__cta svg { transform: translateX(4px); }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1fr; } .contact-grid__intro { grid-column: 1 / -1; padding: 0 0 20px; } }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } }

/* Karten & Split */
.card--flat { background: var(--surface); border: 0; }
.section--surface .card--flat { background: #fff; }
.split__img--tall { aspect-ratio: 4 / 4.2; }
.field input[type="file"] { padding: 12px 16px; font-size: 14px; }

/* Footer: Logo halbtransparent statt Wortmarke */
.site-footer { position: relative; overflow: hidden; }
.site-footer .wrap { position: relative; z-index: 1; }
.footer__watermark { display: flex; justify-content: center; padding: 20px var(--gutter) 0; }
.footer__watermark img { width: min(100%, 1400px); opacity: .055; filter: grayscale(1) brightness(3); transform: translateY(22%); }
.footer__wordmark { display: none; }

/* ==========================================================================
   Fassung 3 – Feedback 15.09.: Mega-Menü, ruhiger, Kollektionen wie Entwurf 1
   ========================================================================== */
/* Header: nur Logo, Werkzeuge, Menü-Knopf */
.main-nav { display: flex; }  /* Fassung 17.09.: Desktop-Navigation wieder aktiv */
.header-tools { margin-left: auto; gap: 10px; }
.header-tools .btn--outline { display: inline-flex; }
.menu-btn { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 6px 0 14px; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; border-radius: var(--radius); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s, background .3s, color .3s; }
.menu-btn:hover { border-color: var(--ink); }
.menu-btn__bars { display: grid; gap: 5px; width: 34px; height: 44px; place-content: center; }
.menu-btn__bars i { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-toggle { display: none !important; }
@media (max-width: 1100px) { .header-tools .btn--outline { display: none; } }
@media (max-width: 560px) { .menu-btn__label { display: none; } .menu-btn { padding: 0 4px; } .header-tools .lang-dd { display: none; } }

/* Mega-Menü (Vollbild) */
.menu { position: fixed; inset: var(--header-h) 0 0; z-index: 95; background: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s ease, transform .45s var(--ease), visibility 0s linear .45s; }
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .45s var(--ease); }
.menu__inner { display: grid; grid-template-columns: 1.4fr 1fr .9fr; gap: clamp(32px, 5vw, 90px); padding-block: clamp(32px, 5vh, 64px) 60px; min-height: 100%; }
.menu__primary ul, .menu__coll, .menu__list { list-style: none; margin: 0; padding: 0; }
.menu__primary a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: clamp(10px, 1.6vh, 18px) 0; border-bottom: 1px solid var(--line); font-size: clamp(28px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; transition: color .3s; }
.menu__primary a small { font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--faint); white-space: nowrap; }
.menu__primary a:hover, .menu__primary a[aria-current="page"] { color: var(--blue-ink); padding-left: 12px; }
.menu__title { margin: 6px 0 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.menu__coll li a { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 19px; font-weight: 500; letter-spacing: -.01em; transition: color .3s; }
.menu__coll li a small { display: block; font-size: 12.5px; font-weight: 400; color: var(--faint); }
.menu__coll li a:hover { color: var(--blue-ink); }
.menu__thumb { flex: none; width: 76px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.menu__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.menu__coll li a:hover img { transform: scale(1.06); }
.menu__col .link-arrow { margin-top: 18px; }
.menu__list li a { display: block; padding: 9px 0; font-size: 17px; border-bottom: 1px solid var(--line); transition: color .3s; }
.menu__list li a:hover { color: var(--blue-ink); padding-left: 8px; }
.menu__foot { display: grid; gap: 16px; justify-items: start; margin-top: 32px; }
.menu__phone { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.menu-open, .menu-open body { overflow: hidden; }
@media (max-width: 1000px) { .menu__inner { grid-template-columns: 1fr 1fr; } .menu__primary { grid-column: 1 / -1; } }
@media (max-width: 640px) { .menu__inner { grid-template-columns: 1fr; gap: 28px; } .menu__primary a { font-size: 30px; } .menu__primary a small { display: none; } }

.section-head--simple { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Kollektionen – Bühne wie Entwurf 1 */
.coll { display: grid; grid-template-columns: minmax(320px, 34%) 1fr; min-height: calc(100svh - var(--header-h)); border-block: 1px solid var(--line); background: #fff; }
.coll__panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.4vw, 56px) var(--gutter) clamp(28px, 3.4vw, 56px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); border-right: 1px solid var(--line); min-width: 0; }
.coll__head { display: flex; justify-content: space-between; align-items: baseline; }
.coll__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.coll__count b { color: var(--ink); font-weight: 500; }
.coll__progress { margin-top: 0; }
.coll__names { display: grid; gap: 0; margin: 10px 0 0; }
.coll__name { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 3px 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: clamp(30px, 3.4vw, 54px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); opacity: .28; transition: opacity .45s ease; box-shadow: none !important; }
.coll__name small { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); opacity: 0; transition: opacity .3s; }
.coll__name:hover { opacity: .6; }
.coll__name.is-active { opacity: 1; padding-left: 0; }
.coll__name.is-active small { opacity: 1; }
.coll__meta { display: grid; flex: 1; align-content: end; }
.coll__info { grid-area: 1 / 1; display: grid; gap: 18px; align-content: end; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s ease, transform .5s var(--ease); }
.coll__info.is-active { opacity: 1; transform: none; pointer-events: auto; }
.coll__info p { max-width: 42ch; color: var(--soft); font-size: 15px; line-height: 1.7; }
.coll__info .btn-row .btn { min-height: 48px; padding: 0 20px; }
.coll__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.coll__arrows { display: flex; gap: 8px; }
.coll__arrows .round-btn { width: 46px; height: 46px; }
.coll__skip { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .3s; }
.coll__skip svg { width: 14px; height: 14px; }
.coll__skip:hover { color: var(--ink); }
.coll__media { position: relative; overflow: hidden; background: var(--dark); min-height: 420px; cursor: ns-resize; }
.coll__media::after { display: none; }
.coll__slide { position: absolute; inset: 0; opacity: 0; transform: translateY(8%); pointer-events: none; transition: opacity .7s ease, transform .9s var(--ease); }
.coll__slide.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.coll__slide.is-leaving { opacity: 0; transform: translateY(-6%); }
.coll--rev .coll__slide { transform: translateY(-8%); }
.coll--rev .coll__slide.is-active { transform: none; }
.coll--rev .coll__slide.is-leaving { transform: translateY(6%); }
.coll__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: none; transition: none; }
.coll__caption { position: absolute; left: clamp(22px, 3vw, 44px); right: clamp(22px, 3vw, 44px); bottom: clamp(22px, 3vw, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; color: #fff; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.coll__caption a { border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 6px; transition: border-color .3s; }
.coll__caption a:hover { border-color: #fff; }
.coll__cta { display: none; }
.coll__hint { position: absolute; right: clamp(22px, 3vw, 44px); top: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(8px); background: rgba(13,18,21,.25); opacity: .9; transition: opacity .4s; }
.coll__hint svg { width: 14px; height: 14px; animation: cue-drift 1.8s cubic-bezier(.2, .7, .2, 1) infinite; }
.coll.is-touched .coll__hint { opacity: 0; }
@media (max-width: 960px) {
  .coll { grid-template-columns: 1fr; min-height: 0; }
  .coll__panel { border-right: 0; padding: 26px var(--gutter) 34px; order: 2; }
  .coll__media { order: 1; aspect-ratio: 4 / 3.4; min-height: 0; cursor: default; }
  .coll__hint { display: none; }
  .coll__names { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .coll__name { width: auto; font-size: 30px; padding: 2px 0 8px; }
  .coll__name.is-active { box-shadow: inset 0 -2px 0 var(--blue) !important; }
  .coll__name small { display: none; }
  .coll__meta { align-content: start; }
}

/* Einzelmöbel – Kacheln wie Entwurf 2 */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; }
.tile { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); color: #fff; display: block; }
.tile::before { background: linear-gradient(180deg, rgba(10,14,16,.42) 0%, rgba(10,14,16,0) 45%); }
.tile img { z-index: -2; }
.tile__title { position: absolute; left: 26px; top: 24px; right: 90px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; text-shadow: 0 1px 14px rgba(0,0,0,.25); }
.tile__title small { display: block; margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.tile__arrow { position: absolute; right: 22px; top: 22px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.tile__arrow svg { width: 18px; height: 18px; }
.tile:hover .tile__arrow { background: #fff; color: var(--ink); border-color: #fff; }
.tile__top, .tile__bottom, .tile__cta, .tile__kicker { display: none; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }

/* Nach Maß – Luxor wird breiter (drei Bildstreifen) */
.mx { --p: 0; position: relative; display: flex; justify-content: center; align-items: stretch; aspect-ratio: 16 / 10; overflow: hidden; background: #d9d9d6; }
.mx svg { display: block; height: 100%; flex: none; }
.mx__l { width: 44.67%; }
.mx__r { width: 52.67%; }
.mx__m { width: calc(2.67% + var(--p) * 30%); transition: none; }
.mx .measure__line { left: 0; bottom: 12%; transform: none; transition: none; color: var(--ink); }
.mx .measure__line b { font-size: 14px; padding: 4px 10px; }
.mx .measure__tag { left: 20px; top: 20px; }
.measure__img { display: none; }
.measure__ctrl { border: 0; padding: 22px 0 0; background: transparent; border-top: 1px solid var(--line); }

/* Warum Intarbad – ruhig: ein Bild, sechs Zeilen */
.why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); background: none; border: 0; align-items: start; }
.why > * { background: transparent; }
.why__img { position: relative; grid-column: auto; grid-row: auto; min-height: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); position: sticky; top: calc(var(--header-h) + 30px); }
.why__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.why__list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.why-row__num { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--blue-ink); padding-top: 4px; }
.why__list h3 { font-size: 22px; letter-spacing: -.015em; margin-bottom: 6px; }
.why__list p { font-size: 15px; color: var(--soft); max-width: 48ch; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } .why__img { position: relative; top: 0; aspect-ratio: 16 / 10; } }

/* Bewertungen – ein Zitat */
.quotes { border-top: 1px solid var(--line); }
.quotes__head { margin-bottom: clamp(28px, 4vw, 48px); }
.quotes__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--line); font-size: 14px; }
.quotes__badge svg { width: 20px; height: 20px; }
.quotes__badge b { font-size: 18px; font-weight: 500; }
.quotes__stage { display: grid; min-height: 200px; }
.quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s var(--ease); pointer-events: none; }
.quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote p { font-size: clamp(26px, 3.3vw, 54px); font-weight: 400; letter-spacing: -.025em; line-height: 1.18; max-width: 26ch; text-wrap: balance; }
.quote footer { margin-top: 22px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.quotes__nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.quotes__dots { display: flex; gap: 8px; }
.quotes__dots button { width: 44px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.quotes__dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line-strong); }
.quotes__dots button.is-active::before { background: var(--ink); }

/* Split-Varianten & Footer */
.split__img--wide { aspect-ratio: 16 / 10; }
.footer__bottom { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 24px; }
.footer__bottom .db-logo { padding: 8px 12px; }
.footer__bottom .db-logo b { font-size: 15px; }
.footer__bottom .db-logo small { display: none; }
@media (max-width: 760px) { .footer__bottom { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Fassung 4 – ruhiger
   ========================================================================== */
/* Kicker ohne blauen Strich (nur im Entree) */
.eyebrow::before { display: none; }
.scene .eyebrow::before { display: block; }
.eyebrow { font-size: 11px; letter-spacing: .22em; }
/* Zahlen ohne Kästen */
.numbers { gap: 0; background: none; border: 0; border-top: 1px solid var(--line); }
.numbers li { background: transparent; border-top: 0; padding: 26px 0 0; }
.numbers b { font-size: clamp(36px, 4vw, 60px); }
/* Badplaner ohne Fragezeichen, ohne Rahmen */
.planner::before { display: none; }
.planner__box { background: transparent; border: 0; padding: 0; }
.planner__num { font-size: 15px; letter-spacing: .2em; margin-bottom: 14px; }
.pchoice { background: transparent; }
/* Kollektionen: Hinweis dezenter */
.coll__hint { background: none; border: 0; backdrop-filter: none; padding: 0; opacity: .8; }

/* Einzelmöbel – Raster wie Entwurf 2 */
.tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.tile { aspect-ratio: auto; height: clamp(320px, 40vw, 520px); background: var(--surface-2); }
.tile--wide { grid-column: span 7; }
.tile--narrow { grid-column: span 5; }
.tile:nth-child(3) { grid-column: span 5; }
.tile:nth-child(4) { grid-column: span 7; }
.tile::before { background: linear-gradient(180deg, rgba(10,14,16,.28) 0%, rgba(10,14,16,0) 40%); }
.tile__title { left: 40px; top: 36px; right: 120px; font-size: clamp(30px, 3vw, 46px); font-weight: 300; letter-spacing: -.01em; text-shadow: none; }
.tile__title small { margin-top: 10px; font-size: 11px; font-weight: 400; letter-spacing: .24em; opacity: .9; }
.tile__arrow { right: 40px; top: 40px; width: 54px; height: 54px; border-color: rgba(255,255,255,.75); }
.tile__arrow svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .tiles { gap: 14px; } .tile, .tile--wide, .tile--narrow, .tile:nth-child(3), .tile:nth-child(4) { grid-column: 1 / -1; height: auto; aspect-ratio: 16 / 10; } .tile__title { left: 22px; top: 20px; font-size: 28px; } .tile__arrow { right: 20px; top: 20px; width: 44px; height: 44px; } }

/* Nach Maß – Spiegelschrank bleibt */
.mx__mirror { position: absolute; }
.mx .measure__line--mirror { bottom: auto; top: 6.5%; color: var(--faint); height: 22px; }
.mx .measure__line--mirror i { top: 3px; bottom: 3px; }
.mx .measure__line--mirror b { background: transparent; color: var(--soft); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; padding: 0 8px; }
.mx .measure__tag { display: none; }

/* Waschküche – großes Motiv */
.band--wk { min-height: min(92vh, 860px); align-items: center; }
.band--wk::before { background: linear-gradient(90deg, rgba(10,14,16,.7) 0%, rgba(10,14,16,.3) 45%, rgba(10,14,16,.05) 100%); }
.band--wk .band__content { max-width: 560px; }
.band--wk .band__content p { font-size: 16px; }
.band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 6px; }
.band__link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s; }
.band__link svg { width: 15px; height: 15px; }
.band__link:hover { border-color: #fff; }
@media (max-width: 760px) { .band--wk::before { background: linear-gradient(180deg, rgba(10,14,16,.05) 10%, rgba(10,14,16,.85) 75%); } .band--wk { align-items: flex-end; } }

/* Helle Motive im Band (Liza, 21.10., neues Sky-Motiv): Der Verlauf von .band--wk ist fuer dunkle
   Motive gemacht. Auf dem hellen Travertin-Bad kam die weisse Headline auf 2,1:1 und der Fliesstext
   auf 2,2:1. Dieser Verlauf zieht beide ueber die Schwelle. Gesetzt ueber "hell": true in
   content/kollektionen.json. Gleiche Lehre wie bei .mehr-band: bei hellem Motiv Verlauf nachziehen
   und nachmessen, nicht nur draufschauen. */
.band--hellmotiv::before { background: linear-gradient(90deg, rgba(10,14,16,.92) 0%, rgba(10,14,16,.74) 45%, rgba(10,14,16,.34) 100%); }
@media (max-width: 760px) { .band--hellmotiv::before { background: linear-gradient(180deg, rgba(10,14,16,.2) 0%, rgba(10,14,16,.62) 45%, rgba(10,14,16,.92) 85%); } }

/* Warum Intarbad – sechs Aussagen, nur Linien */
.why-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.why-cell { padding: 26px 0 34px; border-top: 1px solid var(--line); }
.why-cell h3 { font-size: 21px; letter-spacing: -.015em; margin-bottom: 10px; }
.why-cell p { font-size: 15px; color: var(--soft); max-width: 34ch; }
@media (max-width: 900px) { .why-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-cells { grid-template-columns: 1fr; } .why-cell { padding: 20px 0 24px; } }

/* Bewertungen – Pfeile statt Badge */
.quotes .section-head--simple { margin-bottom: 20px; }
.quotes__arrows { display: flex; align-items: center; gap: 8px; }
.quotes__arrows .round-btn { width: 46px; height: 46px; }
.quotes__count { margin-left: 12px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.quotes__count b { color: var(--ink); font-weight: 500; }
.quotes__google { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); transition: color .3s; }
.quotes__google:hover { color: var(--ink); }

/* ==========================================================================
   Fassung 5
   ========================================================================== */
/* Einzelmöbel: kleinere Titel */
.tile__title { font-size: clamp(20px, 1.7vw, 26px); font-weight: 400; }
.tile__title small { margin-top: 6px; font-size: 10.5px; }
@media (max-width: 900px) { .tile__title { font-size: 20px; } }

/* Nach Maß: statisches Foto */
.measure__img { display: block; aspect-ratio: 16 / 10; }
.measure__img img { object-position: 50% 60%; }
.measure__line, .mx { display: none; }

/* Warum Intarbad: Paneele */
.panels { display: flex; gap: 6px; height: clamp(420px, 56vh, 620px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--surface-2); color: #fff; cursor: pointer; transition: flex .7s var(--ease); isolation: isolate; }
.panel.is-open { flex: 3.2 1 0; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,16,.05) 40%, rgba(10,14,16,.72) 100%); }
.panel__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; display: grid; gap: 8px; }
.panel__num { font-size: 11px; letter-spacing: .2em; font-weight: 500; opacity: .8; }
.panel h3 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }
.panel p { font-size: 15px; line-height: 1.55; max-width: 40ch; color: rgba(255,255,255,.88); opacity: 0; max-height: 0; transform: translateY(8px); transition: opacity .5s ease .15s, transform .6s var(--ease) .15s; }
.panel.is-open p { opacity: 1; max-height: 120px; transform: none; }
.panel:not(.is-open) h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 400; font-size: 16px; }
.panel:not(.is-open) .panel__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.panel:not(.is-open) .panel__num { order: 2; }
.panel.is-open img { transform: scale(1.03); }
/* Das Garantie-Siegel ist eine Grafik, kein Foto: Der Zoom beim Oeffnen hat es oben
   angeschnitten (Liza, 23.10.). Fotos vertragen den Zoom, eine Marke nicht. */
.panel--ruhig.is-open img, .panel--ruhig img { transform: none; }
@media (max-width: 900px) {
  .panels { flex-direction: column; height: auto; gap: 8px; }
  .panel, .panel.is-open { flex: none; aspect-ratio: 16 / 9; }
  .panel h3, .panel:not(.is-open) h3 { writing-mode: horizontal-tb; transform: none; font-size: 20px; font-weight: 500; }
  .panel:not(.is-open) .panel__body { display: grid; }
  .panel:not(.is-open) .panel__num { order: 0; }
  .panel p { opacity: 1; max-height: none; transform: none; }
}

/* ==========================================================================
   Fassung 6 – Kundenstimmen als Kartenreihe
   ========================================================================== */
.rev { overflow: hidden; }
.rev__grid { display: grid; grid-template-columns: minmax(260px, 30%) 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.rev__intro { display: grid; gap: 22px; align-content: start; justify-items: start; }
.rev__rating { display: inline-flex; align-items: center; gap: 14px; padding-top: 6px; }
.rev__rating b { font-size: 56px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.rev__rating > span { display: grid; gap: 4px; }
.rev__rating .stars { display: inline-flex; }
.rev__rating small { font-size: 13px; color: var(--faint); }
.rev__arrows { display: flex; gap: 8px; margin-top: 10px; }
.rev__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-right: calc((100vw - 100%) / -2 - var(--gutter)); padding-right: var(--gutter); }
.rev__track::-webkit-scrollbar { display: none; }
.rcard { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; gap: 28px; min-height: 280px; padding: 28px; background: #fff; }
.rcard > div { display: grid; gap: 16px; align-content: start; }
.rcard .stars svg { width: 13px !important; height: 13px !important; }
.rcard p { font-size: 17px; line-height: 1.55; letter-spacing: -.005em; }
.rcard footer { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.rcard footer b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); color: var(--ink); font-weight: 500; flex: none; }
.rcard footer span { display: grid; }
.rcard footer small { font-size: 12px; color: var(--faint); }
@media (max-width: 900px) { .rev__grid { grid-template-columns: 1fr; } .rev__track { margin-right: calc(var(--gutter) * -1); } }

/* Haltung: Zahlen kleiner, Link unter dem Text */
.haltung__row { grid-template-columns: 1fr; gap: 22px; justify-items: start; max-width: 680px; }
.numbers { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 clamp(36px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); }
.numbers li { padding-top: 20px; gap: 2px; }
.numbers b { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; }
.numbers span { font-size: 12px; }
@media (max-width: 700px) { .numbers { grid-template-columns: repeat(2, auto); gap: 8px 40px; } }

/* ==========================================================================
   Fassung 7 – Unterseiten
   ========================================================================== */
/* Kontakt */
.contact-hero { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 8vw, 110px); }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.contact-hero__text { display: grid; gap: 32px; }
.contact-big { display: grid; gap: 6px; }
.contact-big a { font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; transition: color .3s; }
.contact-big a:hover { color: var(--blue-ink); }
.contact-dl { display: grid; gap: 14px; margin: 0; border-top: 1px solid var(--line); padding-top: 22px; }
.contact-dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 15px; }
.contact-dl dt { color: var(--faint); }
.contact-dl dd { margin: 0; }
.contact-hero__form { padding: clamp(24px, 3vw, 40px); background: var(--surface); }
.contact-hero__form .eyebrow { margin-bottom: 18px; }
.contact-hero__form .field input, .contact-hero__form .field textarea { border-color: transparent; }
.form__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .contact-hero__grid { grid-template-columns: 1fr; } }

/* Einzelmöbel – Kapitel */
.jump { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.jump a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 5px; transition: border-color .3s; }
.jump a:hover { border-color: #fff; }
.chapter { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: min(80vh, 760px); border-bottom: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.chapter--rev .chapter__img { order: 2; }
.chapter__img { position: relative; overflow: hidden; background: var(--surface-2); min-height: 360px; }
.chapter__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chapter__img--stack img { opacity: 0; transition: opacity .6s ease; }
.chapter__img--stack img.is-active { opacity: 1; }
.chapter__body { display: grid; gap: 22px; align-content: center; justify-items: start; padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px); }
.chapter--rev .chapter__body { padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px) clamp(40px, 5vw, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; min-height: 0; } .chapter--rev .chapter__img { order: 0; } .chapter__img { aspect-ratio: 4 / 3; min-height: 0; } .chapter__body, .chapter--rev .chapter__body { padding: 32px var(--gutter) 44px; } }

/* Dreierreihe mit Bildunterschrift */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.trio figure { margin: 0; display: grid; gap: 16px; }
.trio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-2); }
.trio figcaption { display: grid; gap: 4px; font-size: 14px; color: var(--soft); }
.trio figcaption b { font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.mini-steps--col { flex-direction: column; gap: 14px; }
.mini-steps--col li { font-size: 17px; color: var(--ink); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } .trio img { aspect-ratio: 16 / 10; } }

/* Scroll-Entree Waschküche */
.scrub { position: relative; height: 260vh; background: var(--dark); }
.scrub__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; }
.scrub video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.scrub__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10,14,16,.66) 0%, rgba(10,14,16,.3) 40%, rgba(10,14,16,0) 65%); }
.scrub__content { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; padding-bottom: clamp(96px, 13vh, 150px); }
.scrub__content .crumbs { color: rgba(255,255,255,.7); margin-bottom: 18px; }
.scrub__content .scene__copy > * { opacity: 1; transform: none; }
.scrub__content .btn-row { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .7s var(--ease); }
.scrub.is-done .scrub__content .btn-row { opacity: 1; transform: none; }
.scrub__bar { position: absolute; left: 0; right: 0; bottom: 0; }
.scrub__bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.scrub__progress { flex: 1; max-width: 240px; height: 2px; background: rgba(255,255,255,.3); display: block; }
.scrub__progress i { display: block; height: 100%; width: 0; background: #fff; }
@media (max-width: 1100px) {
  .scrub { height: auto; }
  .scrub__sticky { position: relative; top: 0; height: auto; display: grid; }
  .scrub video { position: relative; aspect-ratio: 16 / 10; height: auto; }
  .scrub__shade { display: none; }
  .scrub__content { position: relative; inset: auto; padding: 22px 0 28px; }
  .scrub__content .btn-row { opacity: 1; transform: none; }
  .scrub__bar { display: none; }
}

/* Sets-Tabelle */
.sets-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sets-table tr { border-bottom: 1px solid var(--line); }
.sets-table th, .sets-table td { text-align: left; padding: 18px 16px 18px 0; vertical-align: middle; }
.sets-table th { font-weight: 500; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.sets-table td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--blue-ink); font-weight: 500; }
.sets-table td:nth-child(3) { color: var(--soft); }
/* Die Tabelle steht in der halben Spalte eines Zwei-Spalten-Rasters und
   braucht von Haus aus mehr Platz, als dort zwischen 900 und 1400px
   vorhanden ist. Sie scrollt deshalb in ihrer eigenen Spalte, statt die
   ganze Seite zu verbreitern. Die Knöpfe dürfen zusätzlich umbrechen,
   damit der Rollbalken in der Praxis kaum auftaucht. */
.sets-table { display: block; max-width: 100%; overflow-x: auto; }
.sets-table .btn-row { gap: 6px; flex-wrap: wrap; }
.sets-table .btn-row .btn { min-height: 38px; padding: 0 12px; font-size: 10.5px; }
.sets-table .btn-row .btn svg { display: none; }
@media (max-width: 760px) { .sets-table td:nth-child(3), .sets-table td:nth-child(4) { display: none; } }

/* Manufaktur */
.band--tall { min-height: min(100svh - var(--header-h), 900px); }
.band__content--giant { max-width: none; }
.giant--light { color: #fff; margin: 0; }

/* Magazin */
.feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.feature__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feature:hover img { transform: scale(1.04); }
.feature__body { display: grid; gap: 18px; justify-items: start; }
.feature .h2 { font-size: clamp(30px, 3.2vw, 48px); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.scrub__final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; transition: opacity .6s ease; }
.scrub.is-done .scrub__final { opacity: 1; }
@media (max-width: 1100px) { .scrub__final { display: none; } }

/* ==========================================================================
   Fassung 8
   ========================================================================== */
.giant { line-height: 1.02; }

/* Kontakt – Entree */
.khero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; background: var(--dark); color: #fff; isolation: isolate; }
.khero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; opacity: .55; }
.khero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,18,21,.2) 0%, rgba(13,18,21,.85) 100%); }
.khero__inner { display: grid; gap: clamp(32px, 6vh, 72px); padding-block: clamp(40px, 8vh, 90px) clamp(40px, 6vh, 64px); }
.khero .crumbs { color: rgba(255,255,255,.6); margin-bottom: 16px; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 72px); border-top: 1px solid rgba(255,255,255,.22); }
.way { display: grid; gap: 8px; padding-top: 22px; }
.way__label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.way__main { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.way__main a { transition: color .3s; }
.way__main a:hover { color: var(--blue); }
.way__sub { font-size: 13.5px; color: rgba(255,255,255,.65); }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; gap: 22px; } .way { padding-top: 0; } .ways { padding-top: 22px; } }

/* Formular: Linien statt Kästen */
.kform { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.kform__side { display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 40px); }
@media (max-width: 900px) { .kform { grid-template-columns: 1fr; } .kform__side { position: static; } }
.form--lines { gap: 30px 36px; }
.form--lines .field { position: relative; }
.form--lines .field input:not([type="file"]), .form--lines .field textarea { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 26px 0 10px; background: transparent; font-size: 20px; letter-spacing: -.01em; min-height: 0; }
.form--lines .field textarea { resize: none; min-height: 0; }
.form--lines .field input:not([type="file"]):focus, .form--lines .field textarea:focus { box-shadow: none; border-color: var(--ink); }
.form--lines .field label { position: absolute; left: 0; top: 30px; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); pointer-events: none; transition: top .25s var(--ease), font-size .25s var(--ease), color .25s; }
/* Dateifelder ausnehmen: ein File-Input hat nie einen Platzhalter, damit griff die Regel fürs
   schwebende Label auch auf die Ablagefläche und setzte sie in Versalien (20.10.). */
.form--lines .field input:not([type="file"]):focus + label, .form--lines .field input:not([type="file"]):not(:placeholder-shown) + label, .form--lines .field textarea:focus + label, .form--lines .field textarea:not(:placeholder-shown) + label { top: 4px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.form--lines .field--file label { position: static; display: inline-block; margin-bottom: 8px; font-size: 13px; color: var(--soft); }
.form--lines .field--file input { padding: 0; font-size: 14px; }
.segmented--text { gap: 28px; }
.segmented--text span { border: 0; padding: 0 0 6px; min-height: 0; font-size: 20px; letter-spacing: -.01em; color: var(--faint); border-bottom: 2px solid transparent; }
.segmented--text input:checked + span { background: none; box-shadow: none; color: var(--ink); border-bottom-color: var(--blue); }

/* Einzelmöbel – Blätter */
.sheet { border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.sheet__img { aspect-ratio: 21 / 9; overflow: hidden; background: var(--surface-2); }
.sheet__img img { width: 100%; height: 100%; object-fit: cover; }
.sheet__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 100px); padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 100px); }
.sheet__text { display: grid; gap: 26px; justify-items: start; }
@media (max-width: 900px) { .sheet__row { grid-template-columns: 1fr; } .sheet__img { aspect-ratio: 16 / 10; } }

/* Scroll-Hinweis im Waschküchen-Entree */
.scrub .scroll-cue { transition: opacity .4s; }
.scrub.is-done .scroll-cue { opacity: 0; pointer-events: none; }
.form--lines .segmented label { position: static; font-size: inherit; pointer-events: auto; }
.form--lines .field .segmented { padding-top: 4px; }

/* ==========================================================================
   Fassung 9 – Kontakt geteilt, Einzelmöbel kompakt
   ========================================================================== */
.ksplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--header-h)); }
.ksplit__img { position: relative; background: var(--surface-2); overflow: hidden; }
.ksplit__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ksplit__addr { position: absolute; left: clamp(22px, 3vw, 44px); bottom: clamp(22px, 3vw, 40px); color: #fff; font-size: 14px; line-height: 1.6; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.ksplit__addr span { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.ksplit__body { display: grid; gap: clamp(22px, 3vh, 36px); align-content: center; padding: clamp(40px, 6vh, 80px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) clamp(40px, 6vh, 80px) clamp(32px, 5vw, 90px); }
.ksplit__lines { display: grid; gap: 4px; }
.ksplit__lines a { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; letter-spacing: -.02em; transition: color .3s; }
.ksplit__lines a:hover { color: var(--blue-ink); }
.ksplit__body .form--lines { gap: 22px 30px; }
.ksplit__body .form--lines .field input:not([type="file"]), .ksplit__body .form--lines .field textarea { font-size: 17px; padding: 22px 0 8px; }
.ksplit__body .form--lines .field label { top: 26px; font-size: 15px; }
.ksplit__body .segmented--text span { font-size: 17px; }
@media (max-width: 900px) { .ksplit { grid-template-columns: 1fr; min-height: 0; } .ksplit__img { aspect-ratio: 16 / 10; } .ksplit__body { padding: 36px var(--gutter) 48px; } }

.units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.unit { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.unit h2 { font-size: 20px; letter-spacing: -.015em; }
.unit p { font-size: 14.5px; color: var(--soft); }
.unit__links { display: grid; gap: 8px; margin-top: 6px; }
.unit__links a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.unit__links a svg { width: 14px; height: 14px; }
.unit__links a:hover { color: var(--blue-ink); }
@media (max-width: 900px) { .units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 560px) { .units { grid-template-columns: 1fr; } }

/* Menü-Knopf: gleichmäßige Innenabstände */
.menu-btn { padding: 0 18px 0 12px; gap: 10px; }
.menu-btn__bars { width: 24px; }
@media (max-width: 560px) { .menu-btn { padding: 0 10px; } }

/* Einzelmöbel – Sektionen je Möbel */
.unit-sec { border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.unit-sec--rev .split__img { order: 2; }
.unit-sec .split__img { aspect-ratio: 4 / 3.4; }
.specs-dl { display: grid; gap: 10px; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; width: 100%; max-width: 440px; }
.specs-dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: 15px; }
.specs-dl dt { color: var(--faint); }
.specs-dl dd { margin: 0; }
@media (max-width: 900px) { .unit-sec--rev .split__img { order: 0; } }
.band--tall .crumbs { color: rgba(255,255,255,.6); margin-bottom: 14px; }
.band--tall .jump { margin-top: 14px; }
.band--tall .giant--light { font-size: clamp(44px, 7.4vw, 128px); }
.band--wk .band__content--giant { max-width: min(100%, 980px); }
.band--tall .giant--light { font-size: clamp(42px, 6.6vw, 112px); }

/* ==========================================================================
   Audit-Pass (impeccable / ui-ux-pro-max): Kontrast, Zielgrößen, Browserflächen
   ========================================================================== */
:root { --faint: rgba(18, 24, 28, .62); --blue-btn: #2f6fa6; }
html { scrollbar-color: var(--line-strong) transparent; caret-color: var(--blue-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(18,24,28,.22); border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-track { background: transparent; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.accent { color: var(--blue-ink); }
/* Primärbutton: Weiß auf Blau mit ≥4,5:1 */
.btn--blue { --b-bg: var(--blue-btn); --b-bd: var(--blue-btn); }
.btn--blue:hover { --b-bg: var(--blue-ink); --b-bd: var(--blue-ink); }
/* Zielgrößen ≥ 44 px */
.stage__dot { height: 44px; }
.chip { min-height: 44px; }
.jump a, .coll__skip, .band__link, .unit__links a { min-height: 44px; display: inline-flex; align-items: center; }
.quotes__dots button { height: 44px; }
.lang a { min-height: 42px; }
/* Fokus auf dunklen Flächen sichtbar */
.section--dark :focus-visible, .band :focus-visible, .stage :focus-visible, .scrub :focus-visible, .khero :focus-visible, .site-footer :focus-visible, .menu :focus-visible { outline-color: #fff; }
.menu :focus-visible { outline-color: var(--blue-ink); }
/* Reduzierte Bewegung: Zustände bleiben, nur Bewegung entfällt */
@media (prefers-reduced-motion: reduce) {
  .scene, .coll__slide, .quote, .panel, .rcard { transition-duration: .001ms !important; }
  .scroll-cue__ring, .scroll-cue svg, .coll__hint svg { animation: none !important; }
}

/* Detektor-Befunde: keine Layout-Transitions, kein Bounce */
@keyframes cue-drift { 0% { transform: translateY(-3px); opacity: .7; } 60% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
.scroll-cue svg, .coll__hint svg { animation: cue-drift 1.8s cubic-bezier(.2, .7, .2, 1) infinite; }
.scroll-cue__ring { animation: none; }
.menu__primary a, .menu__list li a, .coll__name, .mega__list a, .drawer__link { transition: color .3s, opacity .45s ease, transform .35s var(--ease); }
.menu__primary a:hover, .menu__primary a[aria-current="page"], .menu__list li a:hover, .mega__list a:hover { padding-left: 0; transform: translateX(10px); }
.coll__name.is-active { padding-left: 0; }
.coll__progress i, .planner__progress b { width: 100% !important; transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .45s var(--ease); }
.stage__dot i { width: 100%; transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); }
.stage__dot.is-active i { transform: scaleX(1); }
.scrub__progress i, .mx__m { transition: none; }
.panel p { transition: opacity .5s ease .15s, transform .6s var(--ease) .15s; }
.ksplit__body .form--lines .field input:focus + label, .ksplit__body .form--lines .field input:not(:placeholder-shown) + label, .ksplit__body .form--lines .field textarea:focus + label, .ksplit__body .form--lines .field textarea:not(:placeholder-shown) + label { top: 2px; font-size: 11px; }

/* ==========================================================================
   Fassung 11
   ========================================================================== */
/* Hero: kürzere Buttons, subtiler Scroll-Hinweis, keine Punkte */
.scene .btn-row .btn { min-height: 46px; padding: 0 18px; font-size: 11.5px; }
@media (min-width: 1101px) { .scene .btn-row { max-width: 260px; gap: 8px; } }
.scroll-cue { bottom: 26px; gap: 6px; opacity: .8; font-size: 10px; letter-spacing: .24em; }
.scroll-cue__ring { width: auto; height: auto; border: 0; box-shadow: none; }
.scroll-cue svg { width: 16px; height: 16px; animation: cue-drift 2.4s cubic-bezier(.2, .7, .2, 1) infinite; }
.scroll-cue > span:first-child { display: none; }
.scroll-cue::before { content: ""; display: block; width: 1px; height: 26px; background: rgba(255,255,255,.55); }
.stage__dots { display: none; }
.stage__bar > div:last-child { margin-left: auto; }

/* Einzelmöbel-Entree: Text unten */
.band--low { align-items: flex-end; }
.band--low .band__content { padding-bottom: clamp(48px, 8vh, 96px); }
.unit-sec .split__img--tall { aspect-ratio: 4 / 4.6; position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) { .unit-sec .split__img--tall { position: static; aspect-ratio: 4 / 3; } }

/* Kundenstimmen mit Möbel */
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: stretch; }
.story__pics { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--surface-2); }
.story__pic { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.story__pic.is-active { opacity: 1; }
.story__pic img { width: 100%; height: 100%; object-fit: cover; }
.story__pic span { position: absolute; left: 20px; bottom: 18px; padding: 7px 11px; background: #fff; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.story__text { display: grid; grid-template-rows: 1fr auto; gap: 28px; }
.story__stage { display: grid; align-content: center; }
.story__quote { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease); pointer-events: none; }
.story__quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story__quote p { font-size: clamp(24px, 2.6vw, 40px); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.story__quote footer { margin-top: 20px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.story__nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } .story__pics { aspect-ratio: 16 / 10; } }

/* Kontakt & Anfrage: zwei Welten */
.ways2 { display: grid; grid-template-columns: 1fr 1fr; }
.way2 { position: relative; display: flex; align-items: flex-end; min-height: min(72vh, 680px); overflow: hidden; isolation: isolate; }
.way2 > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.way2:hover > img { transform: scale(1.04); }
.way2--home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.92) 72%); }
.way2--pro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,18,21,.1) 20%, rgba(13,18,21,.92) 72%); }
.way2--home { color: var(--ink); }
.way2--pro { color: #fff; }
.way2__body { display: grid; gap: 14px; padding: clamp(28px, 4vw, 64px); max-width: 560px; }
.way2__label { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.way2--home .way2__label { color: var(--blue-ink); }
.way2--pro .way2__label { color: var(--blue); }
.way2 p { font-size: 15.5px; line-height: 1.6; max-width: 44ch; }
.way2--home p { color: var(--soft); }
.way2--pro p { color: rgba(255,255,255,.8); }
.way2__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.way2__cta svg { width: 16px; height: 16px; transition: transform .3s; }
.way2:hover .way2__cta svg { transform: translateX(4px); }
@media (max-width: 800px) { .ways2 { grid-template-columns: 1fr; } .way2 { min-height: 420px; } }

/* ==========================================================================
   Fassung 12 – Manufaktur-Band, Laufband, Wofür planen Sie
   ========================================================================== */
.band--manu::before { background: linear-gradient(180deg, rgba(10,14,16,.15) 0%, rgba(10,14,16,.35) 50%, rgba(10,14,16,.85) 100%); }
.band__content--wide { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; max-width: none; }
.band__kicker { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 14px; }
.band__aside { display: grid; gap: 22px; }
.band__aside p { max-width: 40ch; }
@media (max-width: 900px) { .band__content--wide { grid-template-columns: 1fr; } }

/* Laufband */
.tick { overflow: hidden; padding-block: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); }
.tick__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.tick__head .quotes__google b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.tick__row { border-top: 1px solid var(--line); }
.tick__row:last-child { border-bottom: 1px solid var(--line); }
.tick__track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.tick__row:nth-child(odd) .tick__track { animation-direction: reverse; animation-duration: 84s; }
.tick:hover .tick__track { animation-play-state: paused; }
.tick__item { display: inline-flex; align-items: baseline; gap: 18px; padding: 26px 40px 26px 0; margin-right: 40px; border-right: 1px solid var(--line); white-space: nowrap; }
.tick__item .stars { position: relative; top: 2px; }
.tick__item .stars svg { width: 11px !important; height: 11px !important; }
.tick__item q { quotes: "„" "“"; font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; letter-spacing: -.015em; }
.tick__item small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick__track { animation: none; width: auto; flex-wrap: wrap; } .tick__item { white-space: normal; } }

/* Wofür planen Sie? */
.choose__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.choose__intro { display: grid; gap: 22px; justify-items: start; }
.choose__phone { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.02em; border-bottom: 1px solid var(--on-dark-line); padding-bottom: 6px; transition: color .3s, border-color .3s; }
.choose__phone:hover { color: var(--blue); border-color: var(--blue); }
.choose__rows { display: grid; border-top: 1px solid var(--on-dark-line); }
.choose__row { display: grid; grid-template-columns: minmax(0, 1fr) 54px; grid-template-areas: "t a" "d a"; column-gap: 24px; row-gap: 8px; padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--on-dark-line); transition: padding-left .3s var(--ease); }
.choose__title { grid-area: t; font-size: clamp(34px, 4vw, 64px); font-weight: 500; letter-spacing: -.035em; line-height: 1; transition: color .3s; }
.choose__desc { grid-area: d; font-size: 15px; color: var(--on-dark-soft); max-width: 52ch; }
.choose__arrow { grid-area: a; align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--on-dark-line); border-radius: 50%; transition: background .3s, border-color .3s, transform .35s var(--ease); }
.choose__arrow svg { width: 20px; height: 20px; }
.choose__row:hover .choose__title { color: var(--blue); }
.choose__row:hover .choose__arrow { background: #fff; color: var(--ink); border-color: #fff; transform: translateX(6px); }
@media (max-width: 900px) { .choose__grid { grid-template-columns: 1fr; } }
.band--manu .giant--light { font-size: clamp(40px, 5.6vw, 96px); }
.band__content--wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .band__content--wide { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fassung 13 – Manufaktur-Zeile, Kundenstimmen scrollgebunden
   ========================================================================== */
.line-sec { padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.line-sec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.line-sec .h3 { font-weight: 400; }

.voices { border-top: 1px solid var(--line); }
.voices__grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.voices__side { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: 26px; justify-items: start; }
.voices__rating { display: grid; gap: 6px; justify-items: start; }
.voices__rating b { font-size: clamp(48px, 5vw, 76px); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.voices__rating .stars svg { width: 14px !important; height: 14px !important; }
.voices__rating span { font-size: 13px; color: var(--faint); border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.voices__rating:hover span { color: var(--ink); border-color: var(--ink); }
.voices__list { display: grid; gap: clamp(36px, 5vw, 72px); padding-block: 8px clamp(40px, 8vw, 120px); }
.voice { position: relative; margin: 0; padding-left: clamp(28px, 3vw, 44px); opacity: .22; transform: translateX(0); transition: opacity .6s ease, transform .6s var(--ease); }
.voice::before { content: "„"; position: absolute; left: 0; top: -.08em; font-size: 1.6em; line-height: 1; color: var(--blue); opacity: 0; transition: opacity .6s ease; }
.voice p { font-size: clamp(22px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.voice footer { margin-top: 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.voice.is-on { opacity: 1; }
.voice.is-on::before { opacity: 1; }
@media (max-width: 900px) { .voices__grid { grid-template-columns: 1fr; } .voices__side { position: static; } .voice { opacity: 1; } .voice::before { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .voice { opacity: 1; } .voice::before { opacity: 1; } }

/* Kundenstimmen: ruhiger – kein Aufleuchten, keine Akzente */
.voice, .voice.is-on { opacity: 1; padding-left: 0; }
.voice::before { display: none; }
.voices__list { gap: 0; padding-top: 0; }
.voice { padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.voice:last-child { border-bottom: 1px solid var(--line); }
.voice p { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.4; letter-spacing: -.01em; color: var(--ink); }
.voice footer { margin-top: 10px; font-size: 11.5px; }
.voices__rating b { font-size: clamp(40px, 3.6vw, 56px); }

/* Kundenstimmen – drei Zeilen mit Möbel */
.ledger { border-top: 1px solid var(--line); }
.ledger__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.ledger__list { border-top: 1px solid var(--line); }
.ledger__row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 220px; gap: clamp(20px, 3vw, 48px); align-items: center; margin: 0; padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.ledger__pic { display: block; width: 160px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.ledger__pic img { width: 100%; height: 100%; object-fit: cover; }
.ledger__row p { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.45; letter-spacing: -.01em; max-width: 52ch; }
.ledger__row footer { display: grid; gap: 2px; font-size: 14px; color: var(--soft); }
.ledger__row footer b { font-weight: 500; color: var(--ink); }
.ledger__row footer small { font-size: 12px; color: var(--faint); margin-top: 6px; }
@media (max-width: 900px) { .ledger__row { grid-template-columns: 96px minmax(0, 1fr); } .ledger__pic { width: 96px; } .ledger__row footer { grid-column: 2; } }

/* Manufaktur – Fotostrecke */
.strip { overflow: hidden; border-top: 1px solid var(--line); }
.strip__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.strip__head > div { display: grid; gap: 16px; }
.strip__track { display: flex; gap: clamp(14px, 1.6vw, 24px); padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; }
.strip__item { flex: 0 0 clamp(300px, 44vw, 720px); margin: 0; display: grid; gap: 12px; }
.strip__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.strip__img img { width: 100%; height: 100%; object-fit: cover; }
.strip__item figcaption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) { .strip__head { grid-template-columns: 1fr; } .strip__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--gutter); transform: none !important; } .strip__item { flex-basis: 78vw; scroll-snap-align: start; } }

/* Kundenstimmen – Bewertung + drei Karten */
.tref__grid { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.tref__side { display: grid; gap: 22px; justify-items: start; }
.tref__rating { display: flex; align-items: center; gap: 16px; }
.tref__rating b { font-size: clamp(44px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.tref__rating div { display: grid; gap: 4px; }
.tref__rating span { font-size: 13px; color: var(--faint); }
.tref__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tcard { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; margin: 0; padding: 28px; background: #fff; min-height: 280px; }
.tcard .stars svg { width: 13px !important; height: 13px !important; }
.tcard p { font-size: 16.5px; line-height: 1.55; }
.tcard footer { display: grid; font-size: 14px; }
.tcard footer b { font-weight: 500; }
.tcard footer span { color: var(--faint); }
@media (max-width: 1000px) { .tref__grid { grid-template-columns: 1fr; } .tref__cards { grid-template-columns: 1fr; } .tcard { min-height: 0; } }

/* Kundenstimmen – Referenz: Kartenreihe mit Pill */
.rev2 { overflow: hidden; }
.rev2__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px 64px; align-items: start; margin-bottom: clamp(32px, 4vw, 56px); }
.rev2__head .h2 em { font-style: normal; font-weight: 300; }
.rev2__side { display: grid; gap: 18px; justify-items: start; padding-top: 10px; }

/* Sternbewertungen (19.10.): die geprüften Gesamtnoten der drei Profile, je eine Zeile. */
.rev2__ratings { display: grid; gap: 10px; width: 100%; }
.rev2__ratings li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rev2__ratings a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.rev2__ratings a:hover { color: var(--ink); border-color: currentColor; }
.stars { position: relative; display: inline-flex; flex: none; line-height: 0; }
.stars svg { width: 14px; height: 14px; }
.stars__leer { display: flex; color: var(--line); }
.stars__voll { position: absolute; left: 0; top: 0; display: flex; width: var(--v); overflow: hidden; color: #E8A33D; }
.stars__note { font-variant-numeric: tabular-nums; font-weight: 500; }
.rev2__arrows { display: flex; gap: 8px; }
.rev2__arrows .round-btn { width: 44px; height: 44px; }
.rev2__arrows .round-btn:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.rev2__arrows .round-btn:first-child:hover { background: var(--blue-ink); border-color: var(--blue-ink); }
.rev2__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc((100vw - 100%) / -2 - var(--gutter)); padding-right: var(--gutter); }
.rev2__track::-webkit-scrollbar { display: none; }
/* Vier Zeilen seit 19.10.: Pill, Sterne, Zitat, Fußzeile (Kunde wollte Sterne auch auf den Karten). */
.rcard2 { flex: 0 0 min(380px, 82vw); scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; gap: 22px; margin: 0; padding: 26px 26px 22px; background: var(--surface); min-height: 260px; }
.rcard2 .stars { margin-top: -9px; justify-self: start; }
.rcard2 .stars svg { width: 15px; height: 15px; }
.rcard2__pill { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500; }
.rcard2__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.rcard2 p { font-size: 16.5px; line-height: 1.55; }
.rcard2 footer { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--faint); }
@media (max-width: 900px) { .rev2__head { grid-template-columns: 1fr; } .rev2__track { margin-right: calc(var(--gutter) * -1); } }

/* Manufaktur – gepinnte Fotostrecke: vertikal scrollen, Bilder laufen horizontal durch */
.strip { position: relative; padding: 0; }
.strip__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: grid; grid-template-rows: auto 1fr; align-content: start; gap: clamp(20px, 3vh, 40px); padding-block: clamp(32px, 5vh, 64px) clamp(24px, 4vh, 48px); overflow: hidden; }
.strip__head { margin-bottom: 0; }
.strip__item { flex: 0 0 clamp(300px, 42vw, 680px); display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.strip__img { aspect-ratio: auto; height: 100%; min-height: 0; }
.strip__track { height: 100%; min-height: 0; }
@media (max-width: 900px) {
  .strip__sticky { position: static; height: auto; }
  .strip__item { grid-template-rows: auto auto; }
  .strip__img { aspect-ratio: 16 / 10; height: auto; }
}
/* Das Laufband ragt absichtlich über die Spaltenbreite hinaus, darf aber
   nicht die ganze Seite verbreitern. `clip` statt `hidden`, damit ein
   späteres position:sticky darin weiter funktioniert. */
.strip { overflow-x: clip; overflow-y: visible; }
.strip__sticky { grid-template-columns: minmax(0, 1fr); }
.strip__track { width: 100%; }

/* ==========================================================================
   Fassung 18
   ========================================================================== */
/* Magazin: Überschriften und Teaser auf einer Linie */
.mag-card { grid-template-rows: auto auto auto 1fr; }
.mag-grid--feature .mag-card h3 { min-height: 2.3em; }
.mag-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Wofür planen Sie? – zwei Kacheln */
.choose__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choose__cards .path-card { min-height: 320px; }
.choose__cards .way2__label { color: var(--on-dark-soft); }
@media (max-width: 640px) { .choose__cards { grid-template-columns: 1fr; } }

/* Manufaktur-Strecke: nicht gepinnt, Scrollrad über den Bildern blättert */
.strip { padding-block: clamp(72px, 10vw, 150px); }
.strip__inner { display: grid; gap: clamp(28px, 4vw, 48px); }
.strip__track { height: auto; cursor: ew-resize; transition: transform .35s var(--ease); }
.strip__item { grid-template-rows: auto auto; }
.strip__img { aspect-ratio: 16 / 10; height: auto; }
.strip__sticky { position: static; height: auto; }
.strip__inner { grid-template-columns: minmax(0, 1fr); }

/* Entree: fester Text, nur das Bild wechselt */
.scene__content--fixed { z-index: 4; pointer-events: none; }
.scene__content--fixed .scene__copy > * { opacity: 1; transform: none; pointer-events: auto; }
.scene__content--fixed .scene__copy > * { animation: copy-in .9s var(--ease) both; }
.scene__content--fixed .scene__copy > :nth-child(2) { animation-delay: .1s; }
.scene__content--fixed .scene__copy > :nth-child(3) { animation-delay: .2s; }
.scene__content--fixed .scene__copy > :nth-child(4) { animation-delay: .3s; }
@keyframes copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.scene .scene__shade { background: linear-gradient(90deg, rgba(10,14,16,.66) 0%, rgba(10,14,16,.42) 22%, rgba(10,14,16,0) 46%), linear-gradient(180deg, rgba(10,14,16,.18) 0%, rgba(10,14,16,0) 18%, rgba(10,14,16,0) 72%, rgba(10,14,16,.5) 100%); }
@media (max-width: 1100px) {
  .scene { display: block; }
  .scene__media { position: absolute; inset: 0; }
  .scene__content--fixed { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 0 100px; background: none; }
  .scene .scene__shade { display: block; background: linear-gradient(180deg, rgba(10,14,16,0) 25%, rgba(10,14,16,.85) 100%); }
  .stage__sticky { min-height: 600px; }
}

/* Wofür planen Sie? – abgedunkeltes Hintergrundbild */
.choose { position: relative; isolation: isolate; overflow: hidden; }
.choose__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; opacity: .28; }
.choose::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,18,21,.9) 0%, rgba(13,18,21,.55) 55%, rgba(13,18,21,.7) 100%); }
.choose__cards .path-card { background: rgba(13,18,21,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(255,255,255,.18); }
.choose__cards .path-card:hover { background: rgba(67,140,200,.18); }
.strip__item { grid-template-rows: auto; }

/* Textlinks mit Pfeil -> echte Buttons */
.link-arrow { min-height: 46px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); gap: 10px; transition: background .3s, color .3s, border-color .3s; }
.link-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); gap: 10px; }
.section--dark .link-arrow, .band .link-arrow, .choose .link-arrow { border-color: rgba(255,255,255,.5); color: #fff; }
.section--dark .link-arrow:hover, .band .link-arrow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.menu .link-arrow { min-height: 42px; padding: 0 16px; }
.band__actions { gap: 12px; }


/* ==========================================================================
   Fassung 16.09. – Strukturdokument nachgezogen
   ========================================================================== */
/* Header schiebt sich nach dem Entree zusammen (K 1) */
.site-header { transition: box-shadow .35s ease, height .4s var(--ease); }
.brand img { transition: height .4s var(--ease); }
html.is-compact .site-header { height: 66px; }
html.is-compact .brand img { height: 23px; }
html.is-compact .menu { inset-block-start: 66px; }
@media (max-width: 900px) {
  html.is-compact .site-header { height: 58px; }
  html.is-compact .brand img { height: 19px; }
  html.is-compact .menu { inset-block-start: 58px; }
}

/* S 03 Themen-Einstiege */
.themen { padding-block: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.themen__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.themen__item { display: grid; grid-template-rows: auto auto; gap: 14px; color: var(--ink); text-decoration: none; position: relative; }
.themen__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.themen__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .9s var(--ease); }
.themen__item:hover .themen__img img { transform: scale(1.04); }
.themen__text { display: grid; gap: 3px; padding-right: 34px; }
.themen__text b { font-weight: 500; font-size: 17px; letter-spacing: -.01em; }
.themen__text small { font-size: 13px; color: var(--faint); }
.themen__item > svg { position: absolute; right: 0; bottom: 8px; width: 20px; height: 20px; color: var(--blue-ink); transition: transform .3s; }
.themen__item:hover > svg { transform: translateX(4px); }
@media (max-width: 700px) { .themen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* S 04 Direktvertrieb – Blau als Linie und Zahl, nicht als Fläche */
.direkt { background: #fff; border-bottom: 1px solid var(--line); }
.direkt__head { max-width: 900px; display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 72px); }
.direkt__path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; counter-reset: dp; }
.direkt__path li { position: relative; display: grid; gap: 8px; padding-top: 22px; border-top: 2px solid var(--blue); }
.direkt__path li::before { counter-increment: dp; content: "0" counter(dp); position: absolute; top: -30px; left: 0; font-size: 12.5px; letter-spacing: .14em; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.direkt__path li + li::after { content: ""; position: absolute; top: -8px; left: -22px; width: 12px; height: 12px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); transform: translateY(-50%) rotate(45deg); }
.direkt__path span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.direkt__path b { font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.direkt__path p { margin: 0; color: var(--soft); max-width: 30ch; }
.direkt .numbers { margin-top: 1px; border-top: 0; }
@media (max-width: 760px) {
  .direkt__path { grid-template-columns: 1fr; gap: 44px; }
  .direkt__path li + li::after { display: none; }
}

/* S 08 Nach Maß – drei Schritte */
.measure__steps { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 4px 0 26px; padding: 0; list-style: none; counter-reset: ms2; }
.measure__steps li { counter-increment: ms2; display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--soft); }
.measure__steps li::before { content: counter(ms2); font-size: 12px; letter-spacing: .1em; color: var(--blue-ink); font-variant-numeric: tabular-nums; }

/* S 12 Gewerblich */
.gew { background: #fff; border-top: 1px solid var(--line); }
.gew__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; margin: 28px 0 32px; padding: 0; list-style: none; }
.gew__groups li { padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
@media (max-width: 600px) { .gew__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

/* Einzelmöbel-Unterseiten: ruhige Faktenzeilen statt Tabelle */
.facts { display: grid; gap: 0; margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: minmax(90px, 30%) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.facts span { color: var(--faint); }
.facts b { font-weight: 500; }

/* Footer: Shop-Block, Claim */
.footer__claim { margin-top: 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.footer__shop { display: grid; gap: 8px; }
.footer__shop > span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-soft); }

/* Kontakt: Karte auf Klick */
.kmap { background: var(--dark); }
.kmap__box { position: relative; min-height: min(60vh, 520px); background: #1c2327 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 24h48M24 0v48' stroke='%23ffffff' stroke-opacity='.06'/></svg>"); display: grid; }
.kmap__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.kmap__cover { place-self: center; display: grid; gap: 22px; justify-items: center; text-align: center; color: #fff; padding: 40px 20px; }
.kmap__addr { margin: 0; display: grid; gap: 6px; font-size: 18px; }
.kmap__addr span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); }
.kmap__hint { margin: 0; font-size: 12.5px; color: var(--on-dark-soft); }
.kmap.is-loaded .kmap__cover { display: none; }

/* Rechtsseiten */
.legal { display: grid; gap: 22px; min-height: 60vh; padding-block: 24px 60px; max-width: 760px; }
.legal__text { display: grid; gap: 18px; font-size: 16.5px; line-height: 1.6; }
.legal__text p { margin: 0; }

/* S 04 ruhiger: kein Dreischritt, keine Box, kein Durchstreichen */

/* „Gut zu wissen" auf der Startseite: Aussagen statt Fragen (Brian, 22.10.: „ich möchte kein zweites
   FAQ eröffnen"), Gestaltung aber wie vorher als Akkordeon (Liza, 23.10.). Deshalb dasselbe `.acc`
   wie bei den FAQ, nur zwei Kleinigkeiten: Eine Aussage ist kürzer als eine Frage und verträgt etwas
   mehr Schrift, und der Text darunter bleibt ein Absatz statt freier HTML-Antwort. */
.acc--wissen summary { font-size: clamp(17px, 1.6vw, 21px); }
.acc--wissen .acc__body p { margin: 0; }

/* Gewerblich: Text bündig mit dem Bild, Bild in Texthöhe, Buttons in einer Reihe */
.gew__split { align-items: stretch; }
.gew__split .split__img { aspect-ratio: auto; height: 100%; min-height: 0; }
.gew__split .split__body { align-content: start; gap: 18px; }
.gew__split .split__body .lead { margin: 0; }
.gew__split .gew__groups { margin: 14px 0 22px; }
.gew__split .btn-row { flex-wrap: nowrap; gap: 12px; }
.gew__split .btn-row .btn { white-space: nowrap; padding-inline: 20px; }
@media (max-width: 900px) {
  .gew__split .split__img { aspect-ratio: 4 / 3; height: auto; }
  .gew__split .btn-row { flex-wrap: wrap; }
}
.gew__split .btn-row .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 16px; }
@media (max-width: 1200px) { .gew__split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
@media (max-width: 900px) { .gew__split { grid-template-columns: 1fr; } .gew__split .btn-row .btn { flex: 1 1 auto; } }


/* ==========================================================================
   Fassung 17.09. – einheitliche Sektionsköpfe, Desktop-Navigation nach Konzept
   ========================================================================== */
/* Subheadline überall gleich: klein, Versalien, dezent blau; darunter die Headline in .h2 */
.eyebrow { font-size: 11.5px; letter-spacing: .2em; color: var(--blue-ink); margin: 0; }
.section--dark .eyebrow, .band .eyebrow, .choose .eyebrow { color: rgba(255, 255, 255, .72); }
.shead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.shead > div:first-child { display: grid; gap: 14px; }
.shead .h2 { margin: 0; }
.shead .lead { margin-top: 6px; }
.shead__side { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 6px; }
.section-head > div:first-child { gap: 14px; }
.direkt__head { gap: 14px; }
.direkt__head .lead { margin-top: 6px; }
.haltung .eyebrow { display: block; margin-bottom: 8px; }
.haltung .giant { margin-top: 10px; }
.strip__head > div { display: grid; gap: 14px; }
.strip__head .lead { margin-top: 6px; }
.rev2__head > div:first-child { display: grid; gap: 14px; }
.choose__intro { gap: 14px; }
.choose__addr { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.choose__addr a { color: #fff; }
.themen { padding-block: clamp(48px, 6vw, 96px); }
.coll-intro { padding-bottom: 0; }
.coll-intro .shead { margin-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 900px) { .shead { grid-template-columns: 1fr; } }

/* Desktop-Navigation: fünf Einstiege, Badmöbel als Mega-Menü */
.site-header__inner { gap: clamp(14px, 1.6vw, 28px); }
.main-nav { margin-left: clamp(8px, 2vw, 40px); margin-right: auto; }
.main-nav > ul { gap: clamp(2px, .6vw, 12px); }
.nav-link { font-size: 14.5px; }
.nav-link[aria-current="page"] { color: var(--blue-ink); }
.nav-link::after { bottom: 24px; }
html.is-compact .nav-link::after { bottom: 12px; }
.lang--head .lang { height: 40px; }
.lang--head .lang a { min-width: 36px; font-size: 11.5px; }
.menu-btn { display: none; }
.mega { color: var(--ink); }
.mega__inner { display: grid; gap: 36px; padding-block: 36px 44px; }
.mega__row > .eyebrow { display: block; margin-bottom: 16px; }
.mega__collections { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mega-card { color: var(--ink); }
.mega-card__img { aspect-ratio: 4 / 3; }
.mega-card strong { font-size: 16px; }
.mega__row--split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mega__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.mega__list a { font-size: 15.5px; padding: 12px 0; }
.mega__list a small { font-size: 12.5px; }
.mega__list a:hover { padding-left: 0; }
@media (max-width: 1280px) {
  .main-nav, .lang--head { display: none; }
  .menu-btn { display: inline-flex; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 560px) { .header-tools .btn--blue { display: none; } }
.mega { border-top: 1px solid var(--line); }
.mega__list a { display: grid; gap: 3px; justify-content: start; }
.mega__list a small { margin: 0; }
.mega__list a:hover { color: var(--blue-ink); }

/* Hero-Headline in H1-Größe */
.scene__title { font-size: clamp(44px, 5.6vw, 96px); line-height: .96; }
@media (max-width: 900px) { .scene__title { font-size: clamp(36px, 9vw, 64px); } }
/* Haltung + Direktvertrieb in einer Section */
.haltung .numbers { margin-top: clamp(36px, 5vw, 64px); }

/* Sofia Pro Variable (Adobe Fonts): Achse "wght" folgt font-weight, keine Schräglage */
body { font-style: normal; font-variation-settings: "slnt" 0; }

/* S 05 Zwei Wege – zwei Bildkacheln */
.wege__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.weg { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.weg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; transition: transform .9s var(--ease); }
.weg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,18,21,0) 40%, rgba(13,18,21,.78)); }
.weg:hover img { transform: scale(1.04); }
.weg__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; justify-items: start; padding: clamp(20px, 3vw, 36px); }
.weg__body .eyebrow { color: rgba(255,255,255,.75); }
.weg__body strong { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.weg__body .btn { margin-top: 6px; }
@media (max-width: 700px) { .wege__grid { grid-template-columns: 1fr; } .weg { aspect-ratio: 4 / 3.4; } }

/* Navigation: leichterer Schnitt, etwas mehr Luft */
.nav-link { font-weight: 400; font-size: 15px; letter-spacing: .01em; }
.nav-link[aria-current="page"], .nav-link[aria-expanded="true"] { color: var(--blue-ink); }

/* Kollektionen: keine Rahmenlinien, Linie durchgehend blau ohne Animation */
.coll { border-block: 0; }
.coll__panel { border-right: 0; }
.coll__progress { background: var(--blue); height: 2px; }
.coll__progress i { display: none; }

/* Aktiver Name: helle Fläche rollt vom Namen zum Bild hin aus */
.coll__name { position: relative; z-index: 0; padding-left: 14px; margin-left: -14px; width: calc(100% + 14px); }
.coll__name::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: calc(-1 * var(--gutter)); z-index: -1; background: #e8f1f9; transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease); }
.coll__name.is-active::before { transform: scaleX(1); }
.coll__name.is-active { padding-left: 14px; }
@media (max-width: 900px) { .coll__name { padding-left: 0; margin-left: 0; width: 100%; } .coll__name::before { display: none; } .coll__name.is-active { padding-left: 0; } }

/* Präsentationsstand: Menülinks ohne Ziel, Hover bleibt */
.main-nav a[aria-disabled="true"], .mega a[aria-disabled="true"], .menu a[aria-disabled="true"] { cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   Kontakt & Anfrage als heller Einstieg (.choose--light)
   Der Abschnitt sitzt seit dem Umbau direkt unter dem Hero und ist grau statt
   dunkel. Alles unten dreht die Weiß-auf-Dunkel-Gestaltung des ursprünglichen
   Abschnitts auf hellen Grund. Die dunkle Fassung bleibt unverändert nutzbar.
   ═══════════════════════════════════════════════════════════════════════════ */
.choose--light { color: var(--ink); }

/* Dunkler Verlauf und Motiv zurücknehmen: auf Grau würde das Foto vermatschen. */
/* Kein Hintergrundmotiv mehr: reine Fläche, damit die Kacheln tragen. */
.choose--light::before { display: none; }

/* Einspaltig und zentriert: oben nur Kleinzeile und Frage, darunter die
   Kacheln als eigentlicher Inhalt. Der Text in den Kacheln bleibt linksbündig,
   zentrierte Fließzeilen lesen sich schlechter. */
.choose--light .choose__grid {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(30px, 4vw, 52px);
}
.choose--light .choose__intro {
  justify-items: center;
  text-align: center;
  gap: 10px;
  max-width: none;
}
.choose--light .choose__intro .h2 { text-wrap: balance; }
.choose--light .choose__cards { width: min(100%, 860px); }

/* Alles im Abschnitt steht mittig – auch der Inhalt der Kacheln. */
.choose--light .path-card { text-align: center; justify-items: center; }
.choose--light .path-card__cta { justify-self: center; }

.choose--light .eyebrow { color: var(--faint); }
.choose--light .lead { color: var(--soft); }

.choose--light .choose__phone { color: var(--ink); border-bottom-color: var(--line-strong); }
.choose--light .choose__phone:hover { color: var(--blue-ink); border-bottom-color: var(--blue-ink); }
.choose--light .choose__addr { color: var(--soft); }
.choose--light .choose__addr a { color: var(--ink); }
.choose--light .choose__addr a:hover { color: var(--blue-ink); }

/* Die beiden Wahlkarten: weiße Karte auf Grau statt Milchglas auf Dunkel. */
.choose--light .path-card {
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.choose--light .path-card p { color: var(--soft); }
.choose--light .path-card svg { color: var(--blue-ink); }
.choose--light .path-card__cta { color: var(--blue-ink); }
.choose--light .path-card__cta svg { color: var(--blue-ink); }
.choose--light .way2__label,
.choose--light .choose__cards .way2__label { color: var(--blue-ink); }
.choose--light .path-card:hover {
  background: var(--blue-soft);
  border-color: var(--blue-ink);
}
.choose--light .link-arrow { border-color: var(--line-strong); color: var(--ink); }
.choose--light .link-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   Mega-Menü ruhiger stellen
   Die fünf Kollektionsbilder tragen das Menü. Darunter standen sieben
   Einträge mit je Unterzeile und Trennlinie – zu dicht zum Überfliegen.
   Unterzeilen sind im Build entfallen, hier fallen die Linien weg und die
   Liste rückt enger zusammen.
   ═══════════════════════════════════════════════════════════════════════════ */
.mega__list a {
  border-bottom: 0;
  padding: 7px 0;
  font-size: 15px;
  font-weight: 400;
}
.mega__list { gap: 0; }
.mega__inner { gap: 28px; padding-block: 32px 38px; }
.mega__row--split { gap: clamp(28px, 4vw, 64px); }
.mega__list a:hover { color: var(--blue-ink); }
/* Die zwei Spalten der Einzelmöbel standen auf 1fr und damit weit
   auseinander – auf Inhaltsbreite rücken sie zu einer Gruppe zusammen. */
.mega__list--cols { grid-template-columns: repeat(2, max-content); column-gap: clamp(32px, 4vw, 76px); }

/* ═══════════════════════════════════════════════════════════════════════════
   Wahlkarten: Link immer auf gleicher Höhe
   Die Karten sind ein Raster aus fünf Zeilen (Symbol, Label, Titel, Text,
   Link). Mit `align-content: start` packten sie sich nach oben, und weil die
   Beschreibungen unterschiedlich lang sind, rutschte der Link mit. Der
   Textabsatz bekommt den freien Platz, der Link steht dadurch bündig.
   Bei Karten ohne feste Höhe ändert sich nichts – dort gibt es keinen freien
   Platz zu verteilen.
   ═══════════════════════════════════════════════════════════════════════════ */
.path-card {
  align-content: stretch;
  grid-template-rows: auto auto auto 1fr auto;
}

/* Nebeneinander stehende Karten teilen sich die Zeilen des Elterrasters
   (subgrid). Dadurch liegen Symbol, Label, Titel, Text und Link paarweise auf
   gleicher Höhe – auch wenn ein Linktext umbricht und der andere nicht, was
   zwischen etwa 980 und 1080 px passiert. */
@supports (grid-template-rows: subgrid) {
  .choose__cards { grid-template-rows: auto auto auto 1fr auto; }
  .choose__cards .path-card { grid-row: span 5; grid-template-rows: subgrid; }
  @media (max-width: 640px) {
    .choose__cards { grid-template-rows: none; }
    .choose__cards .path-card { grid-row: auto; grid-template-rows: auto auto auto 1fr auto; }
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Helle Kacheln: die Kachel IST der Knopf
   Kein Button darin, kein Fließtext – nur Symbol, Kleinzeile und Titel,
   senkrecht mittig.

   Die Kachel steht auf dem Motiv, mit dunklem Schleier und weißer Schrift.
   Beim Überfahren zoomt nur das Motiv heran – derselbe Effekt wie bei den
   Einzelmöbel-Kacheln (.tile img), nur eine Spur kräftiger: 1.08 statt
   1.05, gleiche Dauer und Kurve.
   ─────────────────────────────────────────────────────────────────────────── */
.choose--light .path-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-rows: none;
  align-content: center;
  gap: 14px;
  min-height: 300px;
  color: #fff;
  background: var(--dark);
  border-color: transparent;
}
.choose--light .path-card strong {
  font-size: clamp(34px, 4.2vw, 68px);   /* identisch mit .h2 */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.choose--light .path-card .way2__label { color: rgba(255, 255, 255, .82); }
.choose--light .path-card svg { color: #fff; }

/* Motiv und Schleier liegen hinter dem Inhalt und sind dauerhaft sichtbar. */
.choose--light .path-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transform: scale(1);
  transition: transform .9s var(--ease);   /* wie .tile img */
}
.choose--light .path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 14, 16, .52), rgba(10, 14, 16, .68));
  opacity: 1;
  transition: opacity .55s var(--ease);
}

/* Überfahren: nur das Motiv zoomt. Die Kachel selbst bleibt unverändert –
   ohne diese Zeilen würden die Grundregeln (.path-card:hover) sie aufhellen
   und um 4 px anheben. */
.choose--light .path-card:hover,
.choose--light .path-card:focus-visible {
  color: #fff;
  background: var(--dark);
  border-color: transparent;
  transform: none;
}
.choose--light .path-card:hover .path-card__bg,
.choose--light .path-card:focus-visible .path-card__bg { transform: scale(1.08); }

/* ───────────────────────────────────────────────────────────────────────────
   Möbel nach Maß: Bild und Text gleich hoch
   Die Spalten standen auf `align-items: center`, und weil die Textspalte
   höher ist als das 16:10-Bild, rückte das Bild oben und unten ein. Oberhalb
   des Umbruchs (960px) füllt das Bild jetzt die Spaltenhöhe – Anfang und Ende
   liegen damit auf einer Linie. Darunter bleibt das feste Seitenverhältnis.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 961px) {
  .measure { align-items: stretch; }
  .measure__visual { display: flex; }
  .measure__img { aspect-ratio: auto; width: 100%; height: 100%; }
  /* Die Szene aus Foto und Zeichnung darf NICHT mitgestreckt werden (26.10.).
     Die Regeln darüber sind für `.measure__img` gedacht, trafen aber auch die Szene:
     Sie wurde auf die Höhe der Textspalte gezogen, bei 1440 px auf 1,176, bei 1000 px
     sogar auf 0,758. Das Foto lief dann in `object-fit: cover` und hat links die Pflanze
     und rechts Fenster und Wanne abgeschnitten, und die Zeichnung sass nicht mehr im Raum.
     `align-self: center` hebt das `stretch` des Containers für dieses eine Element auf,
     `width: 100%` ist nötig, weil ein Flex-Element ohne Breite sonst auf null fällt.
     16:10 ist Pflicht, die SVG-viewBox ist 800 x 500. */
  .measure__draw--scene { width: 100%; height: auto; aspect-ratio: 16 / 10; align-self: center; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Bewertungsquellen
   Neben der Auswahl stehen die drei öffentlichen Profile. Sie müssen als
   Verweise erkennbar sein, ohne den ruhigen Nebentext zu zerreißen –
   deshalb dieselbe Farbe wie der Fließtext und nur ein feiner Unterstrich.
   ─────────────────────────────────────────────────────────────────────────── */
.rev2__side a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color .3s, text-decoration-color .3s;
}
.rev2__side a:hover,
.rev2__side a:focus-visible { color: var(--blue-ink); text-decoration-color: currentColor; }

/* ───────────────────────────────────────────────────────────────────────────
   Nicht nur Bad – ruhige Brücke zwischen Badwelt und Bauvorhaben
   Nur Kopf und zwei Knöpfe. Der Abschnitt lebt von der Aussage, nicht von
   Elementen; ein Motiv kommt dazu, sobald es Fotos von Garderoben, Ankleiden
   und Teeküchen gibt.
   ─────────────────────────────────────────────────────────────────────────── */
.mehr .shead { max-width: 960px; }
.mehr .btn-row { margin-top: clamp(26px, 3.4vw, 44px); }

/* ───────────────────────────────────────────────────────────────────────────
   Dreierreihe im About-Typ: Text direkt unter dem Bild
   Die Figuren werden auf gleiche Höhe gezogen. Bei auto-Zeilen verteilt das
   Raster die übrige Höhe auf beide Zeilen – die kürzeste Bildunterschrift
   rutschte dadurch tiefer als die anderen. `start` bindet sie ans Bild.
   ─────────────────────────────────────────────────────────────────────────── */
.trio figure { align-content: start; }

/* ───────────────────────────────────────────────────────────────────────────
   Seitentyp About
   Die Startseite besteht aus Bildbändern. Eine About-Seite erzählt: schmale
   Textspalte, viel Luft, Merkmale als Liste statt als Bildpaneele.
   ─────────────────────────────────────────────────────────────────────────── */
/* Marke links, Text rechts – die redaktionelle Aufteilung, die eine
   About-Seite von den Bildbändern der Startseite unterscheidet. */
.about-text .wrap {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: start;
}
.about-text .eyebrow { margin: 6px 0 0; }
.about-text__body { max-width: 66ch; display: grid; gap: clamp(18px, 2vw, 26px); }
@media (max-width: 900px) {
  .about-text .wrap { grid-template-columns: 1fr; gap: 22px; }
}
.about-text__body p { font-size: 17px; line-height: 1.7; color: var(--soft); }
.about-text__lead {
  font-size: clamp(24px, 2.6vw, 38px) !important;
  line-height: 1.28 !important;
  letter-spacing: -.02em;
  color: var(--ink) !important;
  text-wrap: balance;
}
/* Zahlen und Bildreihe: kompakter als ein normaler Abschnitt, die Zahlen
   gleichmäßig über die ganze Breite statt links zusammengedrängt. */
.about-zahlen { padding-block: clamp(48px, 6vw, 88px); }
.about-zahlen .eyebrow { margin-bottom: 0; }
.about-zahlen .numbers {
  margin-top: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0 clamp(20px, 3vw, 48px);
}
.about-zahlen .numbers b { font-size: clamp(30px, 3vw, 46px); }
.about-galerie {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
.about-galerie figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.about-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.about-galerie figure:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .about-zahlen .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .about-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.about-merkmale__list {
  list-style: none;
  margin: clamp(10px, 2vw, 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 6vw, 110px);
}
.about-merkmale__list li {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.about-merkmale__list b { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.about-merkmale__list span { font-size: 15.5px; line-height: 1.6; color: var(--soft); max-width: 46ch; }
@media (max-width: 760px) {
  .about-merkmale__list { grid-template-columns: 1fr; }
}

/* Zahlen und Fertigung sind beide grau. Beide Innenabstände zusammen ergaben
   eine leere graue Fläche – der zweite Abschnitt schließt deshalb ohne
   eigenen oberen Abstand an. */
.about-zahlen + .section--surface { padding-top: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   Reiter – About-Seiten (Vorlage 25.09.)
   Zentrierter Kopf, links drei Karten, rechts ein großes Bild. Die aktive
   Karte ist blau gefüllt – im Blau der Knöpfe-im-Hover (--blue-ink), weil
   weiße Schrift auf dem helleren Logoblau nur 3,6:1 Kontrast hätte.
   ─────────────────────────────────────────────────────────────────────────── */
.reiter__kopf {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.reiter__kopf .lead { margin: 0; max-width: 56ch; text-wrap: balance; }
.reiter__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
}
.reiter__leiste { display: grid; grid-auto-rows: 1fr; gap: clamp(10px, 1.2vw, 16px); }
.reiter__tab {
  appearance: none;
  font: inherit;
  text-align: left;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(18px, 2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.reiter__tab b { font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.reiter__tab span { font-size: 14.5px; line-height: 1.55; color: var(--soft); transition: color .35s var(--ease); }
.reiter__tab:hover { border-color: var(--line-strong); }
.reiter__tab[aria-selected="true"] { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.reiter__tab[aria-selected="true"] span { color: rgba(255, 255, 255, .86); }
.reiter__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Die Bildfläche nimmt die Höhe der Zeile an. Das Seitenverhältnis gilt nur als
   Mindesthöhe (über ::before), nicht als aspect-ratio: Sonst leitet der Browser
   bei hohen Karten die Breite aus der Höhe ab, und das Bild ragt aus der Spalte
   (zwischen 900 und 1200 px bis zu 220 px). */
.reiter__buehne { position: relative; min-width: 0; overflow: hidden; background: var(--surface-2); }
.reiter__buehne::before { content: ""; display: block; padding-top: 62.5%; }
.reiter__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.reiter__bild.is-on { opacity: 1; }
.reiter__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Unter 1100 px würde die Kartenspalte das Bild ins Hochformat ziehen (bei vier
   Karten bis 0,72:1). Dort steht das Bild oben, die Karten darunter
   nebeneinander – so viele pro Zeile, wie mit mindestens 200 px passen. */
@media (max-width: 1100px) {
  .reiter__raster { grid-template-columns: 1fr; }
  .reiter__buehne { order: -1; }
  .reiter__leiste { grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Seitentyp Info
   Ruhiger Kopf wie FAQ und Magazin, darunter ein breites Bild in der
   Satzbreite (kein Vollbildband – das ist About). Der Ablauf als
   nummerierte Reihe mit Haarlinien.
   ─────────────────────────────────────────────────────────────────────────── */
.info-kopf { border-bottom: 0; padding-bottom: clamp(32px, 4vw, 56px); }
.info-kopf .lead { max-width: 58ch; }
.info-kopf .btn-row { margin-top: 4px; }
.info-bild { padding-bottom: clamp(64px, 8vw, 120px); }
.info-bild figure { margin: 0; aspect-ratio: var(--verh, 21 / 9); overflow: hidden; background: var(--surface); }
.info-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (max-width: 760px) { .info-bild figure { aspect-ratio: 4 / 3; } }

.info-ablauf__liste {
  list-style: none;
  margin: clamp(10px, 2vw, 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  counter-reset: ia;
}
.info-ablauf__liste li {
  counter-increment: ia;
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line-strong);
}
.info-ablauf__liste li::before {
  content: counter(ia, decimal-leading-zero);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}
.info-ablauf__liste b { font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.info-ablauf__liste span { font-size: 15px; line-height: 1.6; color: var(--soft); }
.info-ablauf .btn-row { margin-top: clamp(30px, 3.6vw, 48px); }
/* Ablauf und Fragen sind beide weiß – ohne das addierten sich ihre Abstände. */
.info-ablauf + .section:not(.section--surface) { padding-top: 0; }
@media (max-width: 900px) { .info-ablauf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(20px, 4vw, 40px); } }
@media (max-width: 560px) { .info-ablauf__liste { grid-template-columns: 1fr; gap: 24px; } }

/* Vier Reiter-Karten unter 1000 px: zwei mal zwei statt drei plus eine. */
@media (max-width: 1000px) and (min-width: 561px) {
  .reiter__leiste:has(> .reiter__tab:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Info: Bild und Ablauf sind beide weiß – der Ablauf schließt ohne eigenen
   oberen Abstand an, sonst stünde dazwischen eine leere Fläche. */
.info-bild + .section:not(.section--surface) { padding-top: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   Info – Maßskizze
   Linienzeichnung in Tinte, Maßlinien im Blau (feine Linien, keine Flächen).
   Die Zeichnung trägt nur B, H, T; die Werte stehen lesbar in der Legende.
   ─────────────────────────────────────────────────────────────────────────── */
.info-masse__raster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: center;
}
.info-masse__text { display: grid; gap: 18px; }
.info-masse__text .lead { margin: 0; max-width: 44ch; }
.info-masse__legende { list-style: none; margin: 10px 0 0; padding: 0; }
.info-masse__legende li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.info-masse__legende b { font-size: 16px; font-weight: 500; color: var(--blue-ink); }
.info-masse__legende span { font-size: 15px; line-height: 1.55; color: var(--soft); }
.info-masse__legende strong { font-weight: 500; color: var(--ink); margin-right: 4px; }
.info-masse__strich { display: block; width: 20px; border-top: 1.5px dashed var(--blue-ink); transform: translateY(-4px); }

.mz { display: block; width: 100%; height: auto; overflow: visible; }
.mz-k { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.mz-g { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; opacity: .5; }
.mz-w { stroke: var(--ink); stroke-width: 1; opacity: .25; }
.mz-m { stroke: var(--blue-ink); stroke-width: 1.2; }
.mz-a { fill: none; stroke: var(--blue-ink); stroke-width: 1.4; stroke-dasharray: 4 3; }
.mz-t { font-size: 22px; font-weight: 500; fill: var(--blue-ink); }
/* Handy: Überschrift und Satz zuerst, dann die Skizze, dann die Legende, die
   sich auf sie bezieht. Der Textblock gibt dafür seine Kinder ans Raster ab. */
@media (max-width: 900px) {
  .info-masse__raster { grid-template-columns: 1fr; gap: 18px; }
  .info-masse__text { display: contents; }
  .info-masse__skizze { order: 4; margin: 16px 0 4px; }
  .info-masse__legende { order: 5; margin-top: 0; }
}

/* Info – Weiterführend: eine große Aussage statt einer Aufzählung */
.info-weiter .split__body { gap: 20px; }
.info-weiter__satz {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 34ch;
  text-wrap: pretty;
}

/* ───────────────────────────────────────────────────────────────────────────
   Seitentyp Kategorie
   Das Produkt steht im Mittelpunkt: Karten je Produkt mit großer Maßzahl und
   einem Balken, der die Breite im Verhältnis zeigt. An jeder Karte beide
   Handlungen – als Textverweise, damit vier Karten nicht acht Knöpfe tragen.
   ─────────────────────────────────────────────────────────────────────────── */
.kat-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(8px, 1.6vw, 20px);
}
.kat-karte {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 32px);
  background: #fff;
}
.kat-karte__mass { display: block; height: 4px; background: var(--surface-2); margin-bottom: clamp(18px, 2vw, 28px); }
.kat-karte__mass i { display: block; height: 100%; width: calc(var(--anteil) * 100%); background: var(--blue); }
.kat-karte__zahl {
  margin: 0;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.kat-karte__zahl small { font-size: .34em; letter-spacing: 0; margin-left: 6px; color: var(--faint); font-weight: 400; }
.kat-karte__name { margin: 8px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.kat-karte__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--soft); }
.kat-karte__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.kat-karte__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .3s;
}
.kat-karte__links a:hover { color: var(--blue-ink); }
.kat-karte__links svg { width: 14px; height: 14px; }

.kat-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(14px, 1.6vw, 20px);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--line-strong);
}
.kat-hinweis p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); color: var(--soft); }
.kat-hinweis strong { font-weight: 500; color: var(--ink); }

.kat-innen__bild { margin: clamp(8px, 1.6vw, 20px) 0 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.kat-innen__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.kat-innen__punkte {
  list-style: none;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px clamp(24px, 4vw, 64px);
}
.kat-innen__punkte li { display: grid; gap: 6px; }
.kat-innen__punkte b { font-size: 17px; font-weight: 500; }
.kat-innen__punkte span { font-size: 15px; line-height: 1.55; color: var(--soft); }
/* Innen und Fragen sind beide weiß – kein doppelter Abstand dazwischen. */
.kat-innen + .section:not(.section--surface) { padding-top: 0; }

@media (max-width: 1100px) { .kat-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kat-innen__punkte { grid-template-columns: 1fr; }
  .kat-innen__bild { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .kat-karten { grid-template-columns: 1fr; } }

/* Info – Zielgruppen: großes Wort, ein Satz. Bewusst ohne Karten, Linien und
   Ziffern, damit es sich vom Ablauf und von den Produktkarten unterscheidet. */
.info-gruppen__liste {
  list-style: none;
  margin: clamp(10px, 2vw, 24px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(24px, 4vw, 64px);
}
.info-gruppen__liste li { display: grid; gap: 12px; align-content: start; }
.info-gruppen__liste b {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.info-gruppen__liste span { font-size: 15.5px; line-height: 1.55; color: var(--soft); max-width: 28ch; }
@media (max-width: 1000px) { .info-gruppen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .info-gruppen__liste { grid-template-columns: 1fr; } }

/* Bauvorhaben: Kontakt-Abschluss mit nur einem Weg */
.choose__cards--single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.path-card__list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.path-card__list li { position: relative; padding-left: 18px; font-size: 15px; color: var(--on-dark-soft); }
.path-card__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--blue); }

/* Waschküche: Fotostrecke mit Bildunterschrift */
.strip--wk { border-top: 0; }
.strip--wk .strip__item { grid-template-rows: auto auto; }
.strip--wk .strip__img { aspect-ratio: 16 / 11; height: auto; }
.strip--wk figcaption { padding-top: 4px; color: var(--soft); letter-spacing: .12em; }

/* Waschküchen-Bühne: acht Einträge, Maßlinie wächst mit der Gesamtbreite */
.coll--wk .coll__name { font-size: clamp(24px, 2.4vw, 38px); padding: 2px 0 2px 14px; }
.coll--wk .coll__names { gap: 0; }
.wkm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 42ch; }
.wkm i { display: block; height: 2px; background: var(--line); position: relative; }
.wkm i::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; }
.coll__info.is-active .wkm i::after { transform: scaleX(var(--w, 0)); }
.wkm b { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .coll--wk .coll__name { font-size: 22px; padding: 2px 0; } }

/* Waschküche: scrollgetriebene Galerie */
.wkg { position: relative; height: calc(var(--n) * 78vh + 100svh); background: var(--dark); color: #fff; }
.wkg__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden; }
.wkg__slides { position: absolute; inset: 0; }
.wkg__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 1.6s var(--ease); }
.wkg__slide.is-active { opacity: 1; transform: none; z-index: 1; }
.wkg__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.wkg__slide figcaption { display: none; }
.wkg__slides::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(13,18,21,.25) 0%, rgba(13,18,21,0) 30%, rgba(13,18,21,0) 55%, rgba(13,18,21,.72) 100%); pointer-events: none; }
.wkg__ui { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: 1fr auto; pointer-events: none; }
.wkg__ui .wrap { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding-block: 26px clamp(60px, 7vh, 90px); }
.wkg__grid > * { pointer-events: auto; }
.wkg__top { display: flex; justify-content: space-between; align-items: center; }
.wkg__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.wkg__count b { color: #fff; font-weight: 500; }
.wkg__bottom { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.wkg__copy { display: grid; gap: 8px; justify-items: start; }
.wkg__name { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.wkg__num { font-size: clamp(64px, 9vw, 150px); line-height: .9; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; }
.wkg__num small { font-size: .3em; letter-spacing: 0; margin-left: .15em; font-weight: 400; color: rgba(255,255,255,.75); }
.wkg__copy p { margin: 10px 0 0; max-width: 44ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.85); }
.wkg__bar { position: relative; height: 2px; background: rgba(255,255,255,.22); }
.wkg__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blue); transform: scaleX(var(--w, .18)); transform-origin: left; transition: transform 1.1s var(--ease); }
.wkg__bar-max { position: absolute; right: var(--gutter); bottom: 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wkg.is-done .wkg__sticky { position: absolute; bottom: 0; top: auto; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .wkg { height: auto; background: #fff; color: var(--ink); }
  .wkg__sticky { position: static; height: auto; overflow: visible; }
  .wkg__slides { position: static; display: grid; gap: 22px; padding: 0 var(--gutter) 40px; }
  .wkg__slides::after { display: none; }
  .wkg__slide { position: static; opacity: 1; transform: none; display: grid; gap: 10px; }
  .wkg__slide img { aspect-ratio: 4 / 3; height: auto; }
  .wkg__slide figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
  .wkg__slide figcaption a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-ink); }
  .wkg__slide figcaption a svg { width: 14px; height: 14px; }
  .wkg__ui { display: none; }
}

/* Waschküche: Galerie als Kachelraster + Lightbox */
.gal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 21vw, 340px); gap: 14px; }
.gal__item { position: relative; margin: 0; overflow: hidden; background: var(--surface-2); isolation: isolate; }
.gal__item--l { grid-column: span 8; }
.gal__item--m { grid-column: span 6; }
.gal__item--s { grid-column: span 4; }
.gal__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal__open img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform .9s var(--ease); }
.gal__item:hover .gal__open img { transform: scale(1.04); }
.gal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 12px; padding: 44px 20px 16px; color: #fff; background: linear-gradient(180deg, rgba(13,18,21,0), rgba(13,18,21,.7)); pointer-events: none; }
.gal__item figcaption > * { pointer-events: auto; }
.gal__name { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.gal__w { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.gal__item figcaption a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.gal__item figcaption a svg { width: 13px; height: 13px; }
.gal__item:hover figcaption a { opacity: 1; transform: none; }
.gal__hint { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(22px, 2.6vw, 36px); background: var(--surface); }
.gal__hint p { margin: 0; max-width: 40ch; color: var(--soft); font-size: 16px; line-height: 1.6; }
.gal__hint p strong { color: var(--ink); font-weight: 500; }
.gal__hint .btn { margin-top: 6px; }
@media (max-width: 900px) { .gal__grid { grid-auto-rows: clamp(200px, 40vw, 300px); } .gal__item--l, .gal__item--m, .gal__item--s { grid-column: span 6; } }
@media (max-width: 560px) { .gal__item--l, .gal__item--m, .gal__item--s { grid-column: span 12; } .gal__item figcaption a { opacity: 1; transform: none; } }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(13,18,21,.96); color: #fff; display: grid; grid-template-rows: 1fr auto; }
.lb[hidden] { display: none; }
.lb__track { position: relative; min-height: 0; }
.lb__slide { position: absolute; inset: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: clamp(60px, 8vh, 90px) var(--gutter) 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.lb__slide.is-active { opacity: 1; pointer-events: auto; }
.lb__slide img { width: 100%; height: 100%; object-fit: contain; }
.lb__slide figcaption { display: flex; justify-content: center; gap: 18px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.lb__slide figcaption a { display: inline-flex; align-items: center; gap: 6px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); }
.lb__slide figcaption a svg { width: 13px; height: 13px; }
.lb__close { position: absolute; top: 18px; right: var(--gutter); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; cursor: pointer; border-radius: 50%; }
.lb__close svg { width: 18px; height: 18px; }
.lb__close:hover { background: #fff; color: var(--ink); }
.lb__nav { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 18px 0 26px; }
.lb__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.lb__count b { color: #fff; font-weight: 500; }
html.lb-open { overflow: hidden; }

/* Waschküche: Galerie nach Vorlage – Bild links, Text darunter, nächstes Motiv rechts mit Zähler */
.gs__frame { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 26%, 340px); border: 1px solid var(--line); background: #fff; }
.gs__main { padding: clamp(20px, 2.4vw, 34px); border-right: 1px solid var(--line); min-width: 0; }
.gs__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.gs__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.gs__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.gs__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.gs__tag { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--ink); font-size: 11.5px; letter-spacing: .04em; }
.gs__meta { display: grid; grid-template-columns: minmax(120px, 20%) minmax(0, 1fr) auto; gap: 24px; align-items: start; padding-top: clamp(20px, 2.4vw, 32px); }
.gs__label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding-top: 4px; }
.gs__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.gs__text { display: grid; gap: 8px; justify-items: start; }
.gs__text small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.gs__text h3 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.gs__text p { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--soft); }
.gs__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--line-strong); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.gs__link svg { width: 12px; height: 12px; }
.gs__link:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.gs__arrows { display: flex; gap: 6px; }
.gs__arrows button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--faint); cursor: pointer; transition: color .3s; }
.gs__arrows button:hover { color: var(--ink); }
.gs__arrows svg { width: 18px; height: 18px; }
.gs__side { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0; padding: clamp(20px, 2.4vw, 34px) 0 clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px); border: 0; background: none; text-align: left; cursor: e-resize; overflow: hidden; color: var(--ink); }
.gs__img--side { aspect-ratio: auto; height: 0; padding-bottom: 0; }
.gs__side .gs__img { width: 140%; aspect-ratio: 16 / 9; height: auto; }
.gs__side .gs__tag { left: 14px; }
.gs__count { display: flex; align-items: baseline; gap: 2px; margin-top: auto; padding-top: 22px; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; }
.gs__count em { font-style: normal; color: var(--line-strong); }
.gs__side:hover .gs__count em { color: var(--faint); }
@media (max-width: 900px) {
  .gs__frame { grid-template-columns: 1fr; }
  .gs__main { border-right: 0; border-bottom: 1px solid var(--line); }
  .gs__meta { grid-template-columns: 1fr; gap: 14px; }
  .gs__label { display: none; }
  .gs__arrows { justify-content: flex-start; }
  .gs__side { grid-template-columns: 1fr auto; grid-template-rows: none; align-items: end; padding: 18px; }
  .gs__side .gs__img { width: 46%; }
  .gs__count { margin: 0; padding: 0; font-size: 40px; }
}
.gs__frame { max-width: 1120px; margin-inline: auto; }
/* Galerie: kein Außenrahmen, Vorschaubild passt vollständig in die rechte Spalte */
.gs__frame { border: 0; background: none; max-width: none; }
.gs__main { padding: 0 clamp(24px, 3vw, 48px) 0 0; }
.gs__side { padding: 0 0 0 clamp(24px, 3vw, 48px); overflow: visible; cursor: pointer; }
.gs__side .gs__img { width: 100%; }
.gs__slide img { object-position: 50% 50%; }
@media (max-width: 900px) {
  .gs__main { padding: 0 0 22px; }
  .gs__side { padding: 18px 0 0; }
  .gs__side .gs__img { width: 46%; }
}

/* Galerie: rechte Spalte als Liste aller Motive */
.gs__side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; cursor: default; }
.gs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; align-content: start; }
.gs__thumb { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 6px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); opacity: .5; transition: opacity .3s, background .3s; border-radius: 2px; }
.gs__thumb:hover { opacity: .85; }
.gs__thumb.is-active { opacity: 1; background: var(--surface); }
.gs__thumb-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.gs__thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.gs__thumb-text { display: grid; gap: 2px; min-width: 0; }
.gs__thumb-text b { font-weight: 500; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs__thumb-text small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.gs__count { padding-top: 0; margin-top: 0; }
@media (max-width: 900px) {
  .gs__side { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .gs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs__count { justify-content: flex-end; }
}

/* Waschküche: seitlich laufende Galerie, Bildbreite = Setbreite */
.hg { overflow: hidden; }
.hg .shead { margin-bottom: clamp(24px, 3vw, 40px); }
.hg .shead .lead { color: rgba(255,255,255,.72); }
.hg__hint { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-bottom: 8px; }
.hg__hint svg { width: 14px; height: 14px; }
.hg__scroller { display: flex; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 8px; -webkit-overflow-scrolling: touch; }
.hg__scroller::-webkit-scrollbar { display: none; }
.hg__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hg__scroller.is-dragging .hg__item { pointer-events: none; }
.hg__item { flex: 0 0 auto; width: calc(26vw + var(--b) * 38vw); max-width: 980px; margin: 0; scroll-snap-align: start; display: grid; gap: 14px; }
.hg__item[style*="--b:0.000"] { width: 26vw; }
.hg__media { position: relative; height: clamp(320px, 54vh, 600px); overflow: hidden; background: #1c2327; }
.hg__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.02); transition: transform 1.2s var(--ease); }
.hg__item:hover .hg__media img { transform: none; }
.hg__item figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 16px; color: #fff; }
.hg__num { font-size: clamp(36px, 4.2vw, 64px); line-height: .95; letter-spacing: -.045em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hg__num small { font-size: .38em; letter-spacing: 0; margin-left: .12em; font-weight: 400; color: rgba(255,255,255,.7); }
.hg__name { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg__item figcaption a { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 4px; white-space: nowrap; transition: border-color .3s; }
.hg__item figcaption a:hover { border-color: #fff; }
.hg__item figcaption a svg { width: 12px; height: 12px; }
.hg__end { flex: 0 0 1px; }
.hg__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; margin-top: clamp(24px, 3vw, 40px); }
.hg__bar { position: relative; height: 2px; background: rgba(255,255,255,.2); }
.hg__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, .12)); transition: transform .25s ease-out; }
.hg__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.hg__count b { color: #fff; font-weight: 500; }
.hg__arrows { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .hg__item { width: calc(62vw + var(--b) * 24vw); }
  .hg__item[style*="--b:0.000"] { width: 62vw; }
  .hg__media { height: clamp(260px, 46vh, 420px); }
  .hg__item figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .hg__item figcaption a { grid-column: 1 / -1; justify-self: start; }
  .hg__hint { display: none; }
}
.hg__num--sm { font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.02em; }

/* Waschküche: Galerie als Magazin-Reihen */
.mg__rows { display: grid; gap: clamp(48px, 7vw, 120px); }
.mg__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin: 0; }
.mg__row--rev .mg__media { order: 2; }
.mg__row--rev figcaption { order: 1; justify-items: end; text-align: right; }
.mg__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.mg__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.mg__row figcaption { display: grid; gap: 12px; justify-items: start; padding-bottom: clamp(8px, 1.5vw, 24px); }
.mg__num { font-size: clamp(56px, 7vw, 120px); line-height: .9; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.mg__num small { font-size: .32em; letter-spacing: 0; margin-left: .1em; font-weight: 400; color: var(--faint); }
.mg__name { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-ink); }
.mg__row figcaption .link-arrow { margin-top: 10px; }
.mg__pairhead { display: grid; gap: 12px; margin: clamp(56px, 8vw, 130px) 0 clamp(24px, 3vw, 40px); }
.mg__pairhead .h3 { margin: 0; }
.mg__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.mg__unit { margin: 0; display: grid; gap: 14px; }
.mg__unit .mg__media { aspect-ratio: 4 / 3; }
.mg__unit figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mg__unit .mg__name { color: var(--ink); }
@media (max-width: 900px) {
  .mg__row { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .mg__row--rev .mg__media { order: 0; }
  .mg__row--rev figcaption { order: 0; justify-items: start; text-align: left; }
  .mg__row figcaption { padding-bottom: 0; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; }
  .mg__row figcaption .link-arrow { grid-column: 1 / -1; margin-top: 4px; }
  .mg__pair { grid-template-columns: 1fr; }
}

/* Waschküche: Galerie als schlichtes Raster */
.grid-gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px) clamp(12px, 1.4vw, 20px); }
.grid-gal__item { margin: 0; display: grid; gap: 10px; }
.grid-gal__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.grid-gal__media img { width: 100%; height: 100%; object-fit: cover; }
.grid-gal__item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.grid-gal__item figcaption span { font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-gal__item figcaption small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
@media (max-width: 900px) { .grid-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid-gal__grid { grid-template-columns: 1fr; } }

/* ===== Galerie-Varianten (Testseiten) ===== */
/* A Kinoleinwand: festgehaltene Section, Panels laufen seitlich */
.pin { position: relative; height: calc(var(--n) * 70vh + 100svh); background: #fff; }
.pin__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: grid; grid-template-rows: auto 1fr auto; gap: 18px; overflow: hidden; padding-block: 28px 30px; }
.pin__head .shead { margin-bottom: 0; }
.pin__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.pin__count b { color: var(--ink); font-weight: 500; }
.pin__track { display: flex; gap: clamp(16px, 2vw, 32px); align-items: stretch; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); will-change: transform; min-height: 0; }
.pin__panel { flex: 0 0 min(78vw, 1100px); margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.pin__media { overflow: hidden; background: var(--surface-2); min-height: 0; }
.pin__media img { width: 100%; height: 100%; object-fit: cover; }
.pin__panel figcaption { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.pin__name { font-weight: 500; }
.pin__w { font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--blue-ink); }
.pin__bar { height: 2px; background: var(--line); position: relative; }
.pin__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 900px) { .pin { height: auto; } .pin__sticky { position: static; height: auto; } .pin__track { flex-direction: column; padding: 0 var(--gutter); transform: none !important; } .pin__panel { flex: none; } .pin__media { aspect-ratio: 4 / 3; } .pin__bar, .pin__count { display: none; } }

/* B Diaschau: randlos, langsamer Zoom, wechselt von allein */
.ken__stage { position: relative; height: clamp(360px, 68vh, 720px); overflow: hidden; background: var(--dark); }
.ken__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.ken__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
.ken__slide.is-active { opacity: 1; z-index: 1; }
.ken__slide.is-active img { animation: ken-zoom 7s linear forwards; }
@keyframes ken-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.ken__arrows { position: absolute; right: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); z-index: 2; display: flex; gap: 8px; }
.ken__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 18px; margin-top: 22px; }
.ken__tab { position: relative; display: grid; gap: 4px; justify-items: start; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; color: var(--faint); transition: color .3s; }
.ken__tab span { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.ken__tab small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ken__tab i { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.ken__tab.is-active { color: var(--ink); }
.ken__tab.is-active i { animation: ken-bar 5s linear forwards; }
@keyframes ken-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ken.is-paused .ken__tab.is-active i { animation-play-state: paused; }
@media (max-width: 900px) { .ken__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .ken__stage { height: clamp(260px, 50vh, 420px); } }
@media (prefers-reduced-motion: reduce) { .ken__slide.is-active img, .ken__tab.is-active i { animation: none; transform: none; } }

/* C Kartenstapel: Karten bleiben oben kleben, die nächste gleitet darüber */
.stack__cards { display: grid; gap: 0; }
.stack__card { position: sticky; top: calc(var(--header-h) + 24px + var(--i) * 14px); margin: 0 0 clamp(40px, 8vh, 90px); display: grid; gap: 0; background: #fff; box-shadow: 0 -1px 0 var(--line), 0 30px 60px -40px rgba(13,18,21,.35); }
.stack__media { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--header-h) - 190px); overflow: hidden; background: var(--surface-2); }
.stack__media img { width: 100%; height: 100%; object-fit: cover; }
.stack__card figcaption { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 18px 0 22px; border-bottom: 1px solid var(--line); }
.stack__idx { font-size: 11.5px; letter-spacing: .2em; color: var(--faint); font-variant-numeric: tabular-nums; }
.stack__name { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.stack__w { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); font-weight: 500; }
@media (max-width: 900px) { .stack__card { position: static; margin-bottom: 28px; box-shadow: none; } .stack__card figcaption { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; } .stack__card figcaption .link-arrow { grid-column: 1 / -1; justify-self: start; } .stack__media { max-height: none; aspect-ratio: 4 / 3; } }
.stack__media { aspect-ratio: auto; height: min(58vh, 620px); max-height: none; }
@media (max-width: 900px) { .stack__media { height: auto; aspect-ratio: 4 / 3; } }

/* Waschküche: die Wand – sechs Sets im gleichen Maßstab, seitlich laufend */
.wall { overflow: hidden; }
.wall__scroller { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 6px; -webkit-overflow-scrolling: touch; }
.wall__scroller::-webkit-scrollbar { display: none; }
.wall__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wall__scroller.is-dragging .wall__item { pointer-events: none; }
.wall__item { flex: 0 0 auto; margin: 0; display: grid; gap: 12px; scroll-snap-align: start; --h: clamp(340px, 58vh, 620px); }
.wall__media { height: var(--h); width: calc(var(--h) * var(--ar)); overflow: hidden; background: var(--surface-2); }
.wall__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall__item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.wall__item figcaption span { font-weight: 500; letter-spacing: -.01em; }
.wall__item figcaption b { font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.wall__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; margin-top: clamp(20px, 3vw, 36px); }
.wall__bar { position: relative; height: 2px; background: var(--line); }
.wall__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(var(--p, .12)); transition: transform .25s ease-out; }
.wall__count { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.wall__count b { color: var(--ink); font-weight: 500; }
.wall__arrows { display: flex; gap: 8px; }
@media (max-width: 900px) { .wall__item { --h: clamp(240px, 42vh, 380px); } .wall__item figcaption { font-size: 13px; } }
.wall__item figcaption { justify-content: flex-start; gap: 10px; }

/* Waschküche: Galerie – ein großes Bild, Pfeile, etwas Text */
.sg__stage { position: relative; aspect-ratio: 16 / 9; max-height: min(72vh, 760px); overflow: hidden; background: var(--surface-2); }
.sg__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.sg__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.sg__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start; padding-top: clamp(18px, 2.4vw, 30px); }
.sg__text { display: grid; gap: 8px; justify-items: start; max-width: 60ch; }
.sg__text small { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-ink); }
.sg__text h3 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.sg__text p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.sg__text .link-arrow { margin-top: 8px; }
.sg__nav { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.sg__count { margin-right: 10px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; }
.sg__count b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .sg__stage { aspect-ratio: 4 / 3; max-height: none; } .sg__row { grid-template-columns: 1fr; } .sg__nav { order: -1; } }
.sg__stage { aspect-ratio: auto; width: 100%; height: min(64vh, 700px); max-height: none; }
@media (max-width: 900px) { .sg__stage { height: auto; aspect-ratio: 4 / 3; } }

/* Galerie lebendiger: Bilder schieben seitlich, nächstes Motiv lugt rechts herein, Text gleitet ein */
.sg__stage { overflow: hidden; background: none; }
.sg__track { display: flex; gap: 10px; height: 100%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.sg__slide { position: relative; inset: auto; flex: 0 0 calc(100% - 12% - 10px); height: 100%; opacity: 1; pointer-events: auto; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.sg__slide img { transform: scale(1.06); filter: brightness(.72); transition: transform 1.2s var(--ease), filter .8s ease; }
.sg__slide.is-active { cursor: default; }
.sg__slide.is-active img { transform: none; filter: none; }
.sg__label { position: absolute; left: 18px; bottom: 16px; padding: 7px 12px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: 1; transition: opacity .4s; }
.sg__slide.is-active .sg__label { opacity: 0; }
.sg__text > * { transition: opacity .5s ease, transform .5s var(--ease); }
.sg.is-changing .sg__text > * { opacity: 0; transform: translateY(10px); transition: none; }
@media (max-width: 900px) { .sg__slide { flex-basis: calc(100% - 8% - 10px); } }
@media (prefers-reduced-motion: reduce) { .sg__track { transition: none; } .sg__slide img { transition: none; } }

/* „Alles hat seinen Platz“: zweispaltig statt zweites Großbild */
.kat-innen__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.kat-innen__text .shead { margin-bottom: clamp(20px, 2.6vw, 34px); }
.kat-innen__punkte--col { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
.kat-innen__punkte--col li { padding-top: 16px; border-top: 1px solid var(--line); }
.kat-innen__bild--side { margin: 0; aspect-ratio: 4 / 5; max-height: 640px; }
@media (max-width: 900px) { .kat-innen__grid { grid-template-columns: 1fr; } .kat-innen__bild--side { aspect-ratio: 4 / 3; } }

/* Scroll-Entree als Bildsequenz auf Zeichenfläche */
.scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.scrub.has-frames .scrub__canvas { opacity: 1; }
.scrub.has-frames video { opacity: 0; }
/* Weniger Luft zwischen Galerie und „Alles hat seinen Platz“ */
.sg { padding-bottom: clamp(28px, 3.5vw, 48px); }
.sg + .kat-innen--split { padding-top: clamp(40px, 6vw, 88px); }
.kat-innen__grid { align-items: start; }
.kat-innen__bild--side { max-height: 560px; }

/* Badmöbel-Übersicht: Anspringzeile und „weitere Kollektionen“ */
.kidx { padding-bottom: 0; }
.kidx .shead { margin-bottom: clamp(24px, 3vw, 40px); }
.kidx__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.kidx__list a { display: grid; gap: 4px; padding: 16px 0 22px; border-top: 1px solid var(--line-strong); color: var(--ink); transition: color .3s, border-color .3s; }
.kidx__list b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.kidx__list small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.kidx__list a:hover { color: var(--blue-ink); border-top-color: var(--blue); }
.weitere { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.weitere > div { display: grid; gap: 14px; justify-items: start; }
.weitere .h2 { margin: 0; }
@media (max-width: 900px) { .kidx__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weitere { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kidx__list { grid-template-columns: 1fr; } }

/* Badmöbel-Übersicht: weitere Kollektionen als ruhiges Raster, Platzhalter ohne Bild */
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 22px); }
.more-tile { display: grid; gap: 10px; color: var(--ink); }
.more-tile__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.more-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.more-tile:hover .more-tile__media img { transform: scale(1.04); }
.more-tile__ph { display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; height: 100%; background: var(--surface-2); color: var(--faint); }
.more-tile__ph b { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.02em; color: var(--soft); }
.more-tile__ph small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.more-tile__text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
.more-tile__text b { font-weight: 500; letter-spacing: -.01em; }
.more-tile__text small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
@media (max-width: 900px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .more-grid { grid-template-columns: 1fr; } }

/* Badmöbel-Übersicht: schlanker Einstieg über der Kollektionsbühne */
.koll-intro .wrap { display: grid; gap: 14px; justify-items: start; padding-top: 26px; padding-bottom: clamp(24px, 3vw, 40px); }
.koll-intro .crumbs { margin-bottom: 12px; }
.koll-intro .h1 { margin: 0; }
.koll-intro .lead { margin: 4px 0 0; }

/* Badmöbel-Übersicht: weniger Luft zwischen „Weitere Kollektionen“ und „Nach Maß“ */
#weitere:not(.weitere-typo) { padding-block: clamp(44px, 6vw, 80px) clamp(28px, 3vw, 44px); }
#weitere + #nach-mass { padding-top: clamp(28px, 3vw, 44px); }
.weitere { align-items: start; }

/* Weitere Kollektionen: dunkles Band mit den elf Namen in großer Schrift */
#weitere.weitere-band { padding-block: clamp(64px, 9vw, 130px); }
#weitere.weitere-band + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
.weitere-band__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.weitere-band__head > div { display: grid; gap: 14px; }
.weitere-band__head .h2 { margin: 0; }
.weitere-band__names { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.weitere-band__names li { font-size: clamp(26px, 3.4vw, 54px); font-weight: 300; letter-spacing: -.025em; line-height: 1.15; color: rgba(255,255,255,.85); }
.weitere-band__names li + li::before { content: "·"; margin: 0 .35em; color: var(--blue); font-weight: 400; }
@media (max-width: 900px) { .weitere-band__head { grid-template-columns: 1fr; align-items: start; } }
.weitere-band__names li + li::before { content: none; margin: 0; }
.weitere-band__names li::after { content: "·"; margin: 0 .35em; color: var(--blue); font-weight: 400; }
.weitere-band__names li:last-child::after { content: none; }

/* Weitere Kollektionen als Bildband */
.band--mid { min-height: min(70vh, 640px); }
#weitere.band + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
.band__content .eyebrow { color: rgba(255,255,255,.75); margin-bottom: 14px; display: block; }

/* Weitere Kollektionen: zentrierter Textblock mit viel Luft, feine Linie zur Bühne */
.weitere-c { padding-block: clamp(80px, 11vw, 160px); border-top: 1px solid var(--line); background: #fff; }
.weitere-c__inner { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 760px; }
.weitere-c .h2 { margin: 0; }
.weitere-c .lead { margin: 0; text-wrap: balance; }
.weitere-c__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin: 10px 0 14px; padding: 0; list-style: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.weitere-c__names li::after { content: "·"; margin: 0 .7em; color: var(--blue); }
.weitere-c__names li:last-child::after { content: none; }
#weitere.weitere-c + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
/* Weitere Kollektionen: Namen laufen als große Zeile durch */
.weitere-c { padding-bottom: clamp(56px, 8vw, 120px); }
.weitere-c__inner { margin-bottom: clamp(40px, 6vw, 80px); }
.marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: clamp(34px, 5vw, 80px); font-weight: 300; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); white-space: nowrap; padding-right: .55em; }
.marquee__track span::after { content: "·"; margin-left: .55em; color: var(--blue); font-weight: 400; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* Weitere Kollektionen: Text links, Mosaik aus sechs Fotos rechts */
.weitere-m { border-top: 1px solid var(--line); background: #fff; padding-block: clamp(72px, 10vw, 150px); }
.weitere-m__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.weitere-m__text { display: grid; gap: 16px; justify-items: start; }
.weitere-m__text .h2 { margin: 0; }
.weitere-m__text .lead { margin: 0 0 8px; }
.weitere-m__mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.weitere-m__tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.weitere-m__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.weitere-m__tile:hover img { transform: scale(1.05); }
.weitere-m__tile span { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
#weitere.weitere-m + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
@media (max-width: 900px) { .weitere-m__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .weitere-m__mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Badmöbel-Einstieg: Hinweis auf weitere Kollektionen rechts neben der Headline */
.koll-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; }
.koll-intro__grid > div:first-child { display: grid; gap: 14px; justify-items: start; }
.koll-intro__side { display: grid; gap: 14px; justify-items: start; max-width: 300px; padding-bottom: 6px; }
.koll-intro__side p { margin: 0; }
.coll + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
@media (max-width: 900px) { .koll-intro__grid { grid-template-columns: 1fr; align-items: start; } }

/* Weitere Kollektionen als Slider: Abstand zur Bühne, gleicher Kopf wie überall */
.sg--weitere { border-top: 1px solid var(--line); padding-top: clamp(72px, 10vw, 150px); }
.sg--weitere .sg__stage { height: min(58vh, 620px); }
#weitere.sg + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }

/* Weitere Kollektionen: Textkarten-Slider ohne Bilder */
.tsl { border-top: 1px solid var(--line); padding-top: clamp(72px, 10vw, 150px); }
.tsl__stage { overflow: hidden; }
.tsl__track { display: flex; gap: 12px; transition: transform .8s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.tsl__card { flex: 0 0 calc(100% - 22% - 12px); display: grid; gap: 12px; align-content: start; justify-items: start; min-height: clamp(240px, 32vh, 340px); padding: clamp(24px, 3vw, 44px); background: var(--surface); border-top: 2px solid var(--line-strong); opacity: .45; transition: opacity .6s ease, border-color .6s ease; cursor: pointer; }
.tsl__card.is-active { opacity: 1; border-top-color: var(--blue); cursor: default; }
.tsl__card small { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-ink); }
.tsl__card h3 { margin: 0; font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.tsl__card p { margin: 6px 0 0; max-width: 48ch; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.tsl__card .link-arrow { margin-top: 10px; }
.tsl__nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 22px; }
#weitere.tsl + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
@media (max-width: 900px) { .tsl__card { flex-basis: calc(100% - 10% - 12px); } }

/* Weitere Kollektionen: nur der Name, groß und leicht, wechselt von allein */
.roll { border-top: 1px solid var(--line); padding-top: clamp(72px, 10vw, 150px); }
.roll__stage { position: relative; padding-bottom: 26px; }
.roll__list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; min-height: clamp(90px, 10vw, 150px); }
.roll__item { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 22px; opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s var(--ease); pointer-events: none; }
.roll__item.is-active { opacity: 1; transform: none; }
.roll__item b { font-size: clamp(56px, 8vw, 128px); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.roll__item small { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.roll__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.roll__line i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.roll.is-running .roll__line i { animation: roll-bar 3.2s linear infinite; }
@keyframes roll-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#weitere.roll + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }
@media (max-width: 700px) { .roll__item { flex-direction: column; align-items: start; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .roll__item { transition: none; } .roll.is-running .roll__line i { animation: none; } }

/* Weitere Kollektionen als typografische Aussage (große Buchstaben wie auf der Startseite) */
.weitere-typo { border-top: 1px solid var(--line); border-bottom: 0; padding-block: clamp(72px, 10vw, 150px); }
.weitere-typo .eyebrow { display: block; margin-bottom: 8px; }
.weitere-typo .haltung__row { align-items: end; }
.weitere-typo .lead { max-width: 62ch; }
#weitere.weitere-typo + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }

/* Weitere Kollektionen: mittige Riesenschrift, Namen klein darunter, Button */
.weitere-typo { border-top: 1px solid var(--line); background: #fff; padding-block: clamp(88px, 12vw, 180px); }
.weitere-typo__inner { display: grid; gap: 26px; justify-items: center; text-align: center; }
.weitere-typo .eyebrow { margin: 0; }
.weitere-typo__giant { margin: 0; font-size: clamp(60px, 10.5vw, 190px); line-height: .92; text-wrap: balance; }
.weitere-typo__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin: 14px 0 6px; padding: 0; list-style: none; max-width: 820px; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.weitere-typo__names li::after { content: "·"; margin: 0 .8em; color: var(--blue); }
.weitere-typo__names li:last-child::after { content: none; }
#weitere.weitere-typo + #nach-mass { padding-top: clamp(64px, 9vw, 130px); }

/* Einzelmöbel-Übersicht: Kacheln als Anker, Faktenzeile in den Sections */
.einzel-tiles { padding-top: 0; }
.unit-facts { margin: -6px 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.unit-sec .split__body { gap: 16px; }
.unit-sec .split__body .lead { margin: 0; }
.unit-sec .split__body .link-arrow { margin-top: 4px; }

.einzel-tiles { padding-bottom: clamp(72px, 10vw, 150px); }

/* Einzelmöbel-Übersicht: vier Bildbänder untereinander */
.band--unit { min-height: min(78vh, 720px); scroll-margin-top: var(--header-h); }
.band--unit + .band--unit { border-top: 2px solid #fff; }
.band--unit .band__content { max-width: 620px; }
.band--unit .band__content .eyebrow { color: rgba(255,255,255,.75); display: block; margin-bottom: 12px; }
.band--unit .band__content p:not(.eyebrow) { margin: 12px 0 0; }
.band--unit .band__actions { margin-top: 24px; }

/* Einzelmöbel-Übersicht: großes Bild, darunter Textzeile */
.unit-look { padding-block: clamp(40px, 5vw, 72px); scroll-margin-top: var(--header-h); }
.unit-look:first-of-type { padding-top: 0; }
.unit-look__media { margin: 0; height: min(68vh, 700px); overflow: hidden; background: var(--surface-2); }
.unit-look__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.unit-look__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-top: clamp(20px, 2.6vw, 34px); }
.unit-look__text { display: grid; gap: 10px; max-width: 62ch; }
.unit-look__text .h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); }
.unit-look__text .lead { margin: 0; font-size: 16px; }
.unit-look + .unit-look { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .unit-look__media { height: auto; aspect-ratio: 4 / 3; } .unit-look__row { grid-template-columns: 1fr; align-items: start; } }

/* Einzelmöbel: klebende Orientierungsleiste mit den vier Gattungen */
.subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
html.is-compact .subnav { top: 66px; }
.subnav__list { display: flex; gap: clamp(18px, 3vw, 44px); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; counter-reset: sn; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { counter-increment: sn; flex: none; }
.subnav__list a { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--faint); white-space: nowrap; transition: color .3s; }
.subnav__list a::before { content: counter(sn, decimal-leading-zero); font-size: 11px; letter-spacing: .14em; color: var(--faint); }
.subnav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.subnav__list a:hover, .subnav__list a.is-active { color: var(--ink); }
.subnav__list a.is-active::after { transform: scaleX(1); }
.subnav__list a.is-active::before { color: var(--blue-ink); }
.unit-look { scroll-margin-top: calc(var(--header-h) + 56px); }
.unit-look:first-of-type { padding-top: clamp(40px, 5vw, 72px); }
.unit-look__media { height: min(58vh, 600px); }
@media (max-width: 900px) { .subnav { top: 72px; } html.is-compact .subnav { top: 58px; } }

/* Einzelmöbel: Textzeile über dem Bild (erst lesen, dann sehen) */
.unit-look__row { padding-top: 0; padding-bottom: clamp(18px, 2.4vw, 30px); align-items: end; }

/* Einzelmöbel-Bühne: vier längere Namen, etwas kleiner gesetzt */
.coll--units .coll__name { font-size: clamp(24px, 2.6vw, 40px); }
.coll--units .coll__name small { display: none; }
.coll--units .coll__info .link-arrow { margin-top: 4px; }

/* Einzelmöbel-Slider: Kicker ist der Claim, Name als Titel */
.sg--units { padding-top: 0; }
.sg--units .sg__text small { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--blue-ink); }
.sg--units .sg__text h3 { font-size: clamp(26px, 2.6vw, 38px); }

/* Einzelmöbel: einzelne Sections, kleineres Bild, wenig Text daneben */
.usec { padding-block: clamp(48px, 6vw, 96px); scroll-margin-top: var(--header-h); }
.usec + .usec { border-top: 1px solid var(--line); }
.usec__grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.usec--rev .usec__media { order: 2; }
.usec__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.usec__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.usec__text { display: grid; gap: 14px; justify-items: start; max-width: 520px; }
.usec__text .h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); }
.usec__text > p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); }
.usec__facts { display: grid; gap: 0; margin: 4px 0 2px; padding: 0; list-style: none; width: 100%; }
.usec__facts li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; }
.usec__facts li:last-child { border-bottom: 1px solid var(--line); }
.usec .btn-row { margin-top: 8px; }
@media (max-width: 900px) { .usec__grid { grid-template-columns: 1fr; gap: 22px; } .usec--rev .usec__media { order: 0; } }

/* Einzelmöbel-Übersicht: Bewegung (28.09., „alles noch zu langweilig“) –
   Einstieg: Bild zoomt beim Laden sanft aus, Headline kommt zeilenweise, Bild läuft beim Scrollen nach.
   Sections: Bild wischt von seiner Seite herein und zoomt aus, läuft beim Scrollen langsamer als die Seite,
   Text kommt gestaffelt. Bewegung liegt auf `translate`, damit sie sich nicht mit `transform` beißt. */
.band--entree > img { animation: entree-zoom 2.6s var(--ease) both; transform-origin: 50% 40%; will-change: transform; }
@keyframes entree-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.giant--lines > span { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.giant--lines > span > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease); }
.band__content.is-in .giant--lines > span:nth-child(1) > span { transform: none; transition-delay: .15s; }
.band__content.is-in .giant--lines > span:nth-child(2) > span { transform: none; transition-delay: .3s; }
.band--entree .band__content[data-reveal] { opacity: 1; transform: none; }
.band--entree .band__content .crumbs, .band--entree .band__content > p { opacity: 0; transition: opacity 1s ease .55s; }
.band--entree .band__content.is-in .crumbs, .band--entree .band__content.is-in > p { opacity: 1; }
.band--entree .band__content > p { transition-delay: .7s; }

.usec__media[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease); }
.usec--rev .usec__media[data-reveal] { clip-path: inset(0 0 0 100%); }
.usec__media[data-reveal].is-in { clip-path: inset(0); }
.usec__media img { height: 118%; margin-top: -6.75%; transform: scale(1.14); transform-origin: 50% 50%; transition: transform 1.8s var(--ease); will-change: transform; }
.usec__media.is-in img { transform: scale(1); }
.usec__text[data-reveal] { opacity: 1; transform: none; }
.usec__text[data-reveal] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s var(--ease); }
.usec__text[data-reveal].is-in > * { opacity: 1; transform: none; }
.usec__text.is-in > :nth-child(1) { transition-delay: .25s; }
.usec__text.is-in > :nth-child(2) { transition-delay: .35s; }
.usec__text.is-in > :nth-child(3) { transition-delay: .45s; }
.usec__text.is-in > :nth-child(4) { transition-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
  .band--entree > img { animation: none; }
  .giant--lines > span > span, .usec__media img { transform: none; }
  .usec__media[data-reveal], .usec--rev .usec__media[data-reveal] { clip-path: none; }
  .band--entree .band__content .crumbs, .band--entree .band__content > p, .usec__text[data-reveal] > * { opacity: 1; transform: none; }
  .usec__media img { height: 100%; margin-top: 0; }
}

/* Bauvorhaben: Referenzen im Kachelraster, ohne Link – Titel unten statt oben, kein Zoom, kein Pfeil */
.referenzen .tile { margin: 0; cursor: default; }
.referenzen .tile::before { background: linear-gradient(180deg, rgba(10,14,16,0) 50%, rgba(10,14,16,.55) 100%); }
.referenzen .tile__title { top: auto; bottom: 24px; right: 26px; }
.referenzen .tile:hover img { transform: none; }
.info-ablauf + .referenzen { padding-top: 0; }

/* Mega-Menü aufgeräumt (29.09.): Kopfzeile der Bildreihe mit Pfeil-Link, darunter zwei
   einspaltige Listen auf Inhaltsbreite, jede mit Pfeil-Link auf ihre Übersicht */
.mega__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 16px; }
.mega__head .eyebrow { margin: 0; }
.mega__all { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--blue-ink); }
.mega__all svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.mega__all:hover svg { transform: translateX(4px); }
.mega__row--split { grid-template-columns: repeat(2, max-content); gap: clamp(56px, 9vw, 160px); }
.mega__row--split .mega__list a { padding: 8px 0; font-size: 15.5px; }
.mega__row--split .mega__list--cols { grid-template-columns: 1fr; }

/* FAQ-Seite (29.09.): Themenliste links statt Kasten, Fragen rechts */
.faq-page { padding-top: clamp(24px, 3vw, 40px); }
.faq-page .faq { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr); align-items: start; }
.faq__side { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 18px; justify-items: start; }
.faq__themen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; max-width: 300px; }
.faq__themen a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 500; transition: color .3s; }
.faq__themen a span { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.faq__themen a:hover { color: var(--blue-ink); }
.faq__hint { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--soft); }
.faq__hint b { color: var(--ink); font-weight: 500; }
.faq__hint a { color: var(--ink); font-weight: 500; }
.faq__gruppe + .faq__gruppe { margin-top: clamp(40px, 5vw, 64px); }
.faq__gruppe .h3 { margin: 0 0 12px; }
@media (max-width: 900px) { .faq-page .faq { grid-template-columns: 1fr; } .faq__side { position: static; } }

/* Möbel-Unterseiten (29.09.): Entrée wie auf der Übersicht, Sachlage-Bild wischt von rechts herein
   (.wipe: allgemeiner Baustein aus .usec__media), Detail-Slider, Raster mobil einspaltig */
.wipe { overflow: hidden; }
.wipe[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease); }
.wipe--r[data-reveal] { clip-path: inset(0 0 0 100%); }
.wipe[data-reveal].is-in { clip-path: inset(0); }
.wipe img { height: 118%; margin-top: -6.75%; transform: scale(1.14); transform-origin: 50% 50%; transition: transform 1.8s var(--ease); will-change: transform; }
.wipe.is-in img { transform: scale(1); }
.unit-sach .split__body[data-reveal] { opacity: 1; transform: none; }
.unit-sach .split__body[data-reveal] > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s var(--ease); }
.unit-sach .split__body[data-reveal].is-in > * { opacity: 1; transform: none; }
.unit-sach .split__body.is-in > :nth-child(1) { transition-delay: .2s; }
.unit-sach .split__body.is-in > :nth-child(2) { transition-delay: .3s; }
.unit-sach .split__body.is-in > :nth-child(3) { transition-delay: .4s; }
.unit-sach .split__body.is-in > :nth-child(4) { transition-delay: .5s; }
.unit-sach .split__body.is-in > :nth-child(5) { transition-delay: .6s; }
.unit-sach .split__body.is-in > :nth-child(6) { transition-delay: .7s; }
.unit-sach .split__img--tall { aspect-ratio: 4 / 4.6; margin: 0; }
.sg--detail { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.sg--detail .sg__stage { height: min(60vh, 660px); }
.sg--detail .sg__label { text-transform: uppercase; }
.mag-grid--units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mag-grid--units .mag-card h3 { min-height: 0; }
@media (max-width: 900px) {
  .unit-sach__grid .split__img--tall { order: -1; aspect-ratio: 4 / 3; }
  .mag-grid--units { grid-template-columns: 1fr; }
  .sg--detail .sg__stage { height: auto; aspect-ratio: 4 / 3; }
  .sg__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wipe[data-reveal], .wipe--r[data-reveal] { clip-path: none; }
  .wipe img { transform: none; height: 100%; margin-top: 0; }
  .unit-sach .split__body[data-reveal] > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   Korrekturen 29.09. (Prüfrunde): Kopfzeilenhöhe als Variable, Skip-Link sichtbar bei Fokus,
   Footer mobil, Mega-Menü schneller zu, Slider-Beschnitt, Bühne mobil, Verläufe, Abstände
   ========================================================================== */
html.is-compact { --header-h: 66px; }
@media (max-width: 900px) { html.is-compact { --header-h: 58px; } }
.sr-only:focus-visible, a.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--blue); color: #fff; z-index: 200; }
.footer__h { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-soft); margin: 0 0 18px; }
@media (max-width: 760px) {
  .footer__bottom { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .footer__bottom .lang { width: max-content; flex-wrap: nowrap; }
  .footer__bottom nav { gap: 14px 22px; }
}
.mega { transition: opacity .16s ease, transform .2s var(--ease), visibility 0s linear .2s; }
.mega.is-open { transition: opacity .22s ease, transform .3s var(--ease); }
.sg__stage { height: auto; aspect-ratio: 16 / 10; max-height: min(78vh, 760px); }
.sg__slide img { object-position: 50% 42%; }
@media (max-width: 900px) { .sg__stage { aspect-ratio: 4 / 3; } }
@media (max-width: 1100px) { .stage .scroll-cue { display: none; } .coll__names { mask-image: linear-gradient(90deg, #000 84%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); } }
@media (max-width: 420px) { .coll__names { gap: 12px; } .coll__name { font-size: 24px; } }
@media (max-width: 900px) { .panel::before { background: linear-gradient(180deg, rgba(10,14,16,.08) 30%, rgba(10,14,16,.86) 100%); } }
/* Mobil steht der Text in jedem Paneel auf dem Bild. Auf dem hellen Goldsiegel braucht er einen
   klareren Fuss als auf den dunklen Fotos, sonst steht die Schrift mitten im Gold (23.10.). */
@media (max-width: 900px) {
  /* Mehr Hoehe statt 16:9 (Liza, 23.10.): So steht der Text unter dem Siegel und nicht darin.
     1:1 ist zugleich die Grenze, bis zu der `cover` nicht oben ins Siegel schneidet, das Bild
     hat Verhaeltnis 1,12. */
  .panel--ruhig, .panel--ruhig.is-open { aspect-ratio: 1 / 1; }
  .panel--ruhig::before { background: linear-gradient(180deg, rgba(10,14,16,.04) 30%, rgba(10,14,16,.45) 58%, rgba(10,14,16,.9) 100%); }
}
.weg::after { background: linear-gradient(180deg, rgba(13,18,21,0) 30%, rgba(13,18,21,.86)); }
.card .btn svg { width: 16px; height: 16px; }
.themen { padding-block: clamp(72px, 10vw, 150px); }
.tile::before { background: linear-gradient(180deg, rgba(10,14,16,.55) 0%, rgba(10,14,16,.12) 34%, rgba(10,14,16,0) 50%); }
.scrub .scene__copy { width: min(40vw, 640px); }
@media (max-width: 520px) { .scrub .scene__text { display: block; max-width: 30ch; margin-bottom: 18px; } }
.scrub .scroll-cue { display: none; }
.scrub.is-calm .scrub__final { display: block; opacity: 1; }  /* nur noch ohne JavaScript relevant */
.faq .acc { border-top: 0; }
.faq .acc details:first-child summary { padding-top: 4px; }
@media (max-width: 760px) { .band--wk > img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
.mag-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .mag-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .mag-grid--4 .mag-card h3 { font-size: 18px; } }

/* Kollektionsseiten (29.09.): Vollbild-Entrée, Details als Faktenliste, Galerie-Slider */
.band__claim { margin: 0; font-size: clamp(20px, 2.1vw, 30px); font-weight: 400; line-height: 1.25; max-width: 44ch; color: #fff; }
.band--entree .band__content .eyebrow { opacity: 0; transition: opacity 1s ease .5s; }
.band--entree .band__content.is-in .eyebrow { opacity: 1; }
.band--entree .band__content .band__actions { opacity: 0; transition: opacity 1s ease .85s; }
.band--entree .band__content.is-in .band__actions { opacity: 1; }
.koll-details__grid .facts { margin: 0; }
.koll-details .split__body { gap: 18px; }
.koll-details .link-arrow { margin-top: 4px; }
.sg--plain .sg__label { display: none; }
.sg--detail .round-btn:disabled { opacity: .3; }

/* Ablauf (Nach Maß, Bauvorhaben): Schritte kommen nacheinander, die Linie zeichnet sich */
.info-ablauf__liste[data-reveal] { opacity: 1; transform: none; }
.info-ablauf__liste li { border-top: 0; background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat 0 0 / 0% 1px; opacity: 0; transform: translateY(18px); transition: background-size 1.1s var(--ease), opacity .8s ease, transform .9s var(--ease); }
.info-ablauf__liste.is-in li { background-size: 100% 1px; opacity: 1; transform: none; }
.info-ablauf__liste.is-in li:nth-child(2) { transition-delay: .15s; }
.info-ablauf__liste.is-in li:nth-child(3) { transition-delay: .3s; }
.info-ablauf__liste.is-in li:nth-child(4) { transition-delay: .45s; }
.info-ablauf__liste li::before { font-size: clamp(30px, 3.2vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1; color: var(--blue-ink); }

/* Nach Maß: Statement in Riesenschrift, Regler-Section ohne Schritte */
.mass-statement { padding-block: clamp(72px, 10vw, 150px); }
.mass-statement .giant { margin: 10px 0 clamp(28px, 4vw, 48px); }
.giant--reveal[data-reveal] { opacity: 1; transform: none; }
.giant--reveal.is-in > span:nth-child(1) > span { transform: none; transition-delay: .1s; }
.giant--reveal.is-in > span:nth-child(2) > span { transform: none; transition-delay: .25s; }
.mass-statement__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); max-width: 1100px; }
.mass-statement__cols p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--soft); }
@media (max-width: 760px) { .mass-statement__cols { grid-template-columns: 1fr; } }
.measure__visual[data-reveal] { opacity: 1; transform: none; }
.measure__img.wipe img { height: 118%; margin-top: -6.75%; }

/* Dekorwechsel (Farbwechsler) auf der Startseite */
.dekor .decor { align-items: center; }
.decor__stage { aspect-ratio: 1; background: var(--surface-2); }
.decor__body { display: grid; gap: 20px; justify-items: start; }
.decor__name { margin: 0; font-size: clamp(30px, 3.4vw, 54px); font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.decor__text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); max-width: 44ch; }
.swatch { font-size: 12.5px; letter-spacing: .06em; }
.swatch i { width: 54px; height: 54px; }

/* Waschküche, Innen: Bild füllt seine Spalte bis zur rechten Kante des Rasters, wie die Galerie darüber (Liza, 29.09.) */
@media (min-width: 901px) { .kat-innen__bild--bleed { max-height: none; aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) {
  .info-ablauf__liste li { opacity: 1; transform: none; background-size: 100% 1px; }
  .giant--reveal > span > span { transform: none; }
  .band--entree .band__content .eyebrow, .band--entree .band__content .band__actions { opacity: 1; }
}

/* Buttons überall wie auf der Startseite (Liza, 29.09.): jeder Button kippt beim Überfahren deutlich,
   der Pfeil rückt nach, auch bei den Pfeil-Links */
.btn--blue:hover { --b-bg: var(--ink); --b-bd: var(--ink); --b-fg: #fff; }
.link-arrow svg { transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.btn:focus-visible, .link-arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ==========================================================================
   Farbwechsler (Kundenwunsch, 29.09.): dunkles Design per Schalter, Standard hell.
   Alle Farben hängen an den Variablen; hier nur die Werte und die wenigen festen Weißflächen.
   ========================================================================== */
.theme-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--ease); }
.theme-btn svg:nth-child(2) { opacity: 0; transform: rotate(-40deg) scale(.7); }
html[data-theme="dark"] .theme-btn svg:nth-child(1) { opacity: 0; transform: rotate(40deg) scale(.7); }
html[data-theme="dark"] .theme-btn svg:nth-child(2) { opacity: 1; transform: none; }
.theme-btn--text { display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 0 16px 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.theme-btn--text svg { grid-area: auto; }
.theme-btn--text svg:nth-child(2) { display: none; }
html[data-theme="dark"] .theme-btn--text svg:nth-child(1) { display: none; }
html[data-theme="dark"] .theme-btn--text svg:nth-child(2) { display: block; opacity: 1; transform: none; }
.brand__dark { display: none; }
.menu__foot .theme-btn--text { margin-top: 6px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1417; --surface: #161c20; --surface-2: #1d2429;
  --ink: #eef1f2; --soft: rgba(238, 241, 242, .72); --faint: rgba(238, 241, 242, .52);
  --line: rgba(238, 241, 242, .13); --line-strong: rgba(238, 241, 242, .3);
  --blue-ink: #7db6ea; --blue-soft: rgba(67, 140, 200, .18);
  --dark: #070a0c; --dark-2: #10161a;
}
html[data-theme="dark"] .brand__light { display: none; }
html[data-theme="dark"] .brand__dark { display: block; }
html[data-theme="dark"] .site-header { background: rgba(15, 20, 23, .92); }
/* `.trust` stand hier noch aus der geloeschten alten Trust-Leiste und hat der neuen
   Vertrauenszeile im Dark Mode einen schwarzen Kasten ueber das Hero-Foto gelegt (Liza, 20.10.).
   Die Zeile ist reiner Text auf dem Bild und bleibt transparent. */
html[data-theme="dark"] .mega, html[data-theme="dark"] .menu, html[data-theme="dark"] .haltung, html[data-theme="dark"] .direkt,
html[data-theme="dark"] .weitere-typo, html[data-theme="dark"] .coll, html[data-theme="dark"] .coll__panel { background: var(--bg); }
html[data-theme="dark"] .measure__ctrl, html[data-theme="dark"] .finder__box, html[data-theme="dark"] .rating, html[data-theme="dark"] .review, html[data-theme="dark"] .card,
html[data-theme="dark"] .section--surface .card--flat, html[data-theme="dark"] .why-card, html[data-theme="dark"] .presult, html[data-theme="dark"] .tcard,
html[data-theme="dark"] .numbers li { background: var(--surface); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .sg__label { background: rgba(15, 20, 23, .85); color: var(--ink); }
html[data-theme="dark"] .subnav { background: rgba(15, 20, 23, .94); }
html[data-theme="dark"] .swatch i { border-color: var(--surface); }
html[data-theme="dark"] .measure__tag { background: rgba(15, 20, 23, .9); color: var(--ink); }
html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { border-color: var(--surface); }
html[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
/* Kippende Flächen: Text nimmt die Hintergrundfarbe an, damit Hell und Dunkel gleich lesen */
.btn--outline:hover, .btn--blue:hover { --b-fg: var(--bg); }
.round-btn--dark:hover { color: var(--bg); }
.link-arrow:hover { color: var(--bg); }
.tile:hover .tile__arrow { color: var(--ink); }
html[data-theme="dark"] .round-btn:hover, html[data-theme="dark"] .tile:hover .tile__arrow, html[data-theme="dark"] .stage__skip:hover,
html[data-theme="dark"] .section--dark .link-arrow:hover, html[data-theme="dark"] .band .link-arrow:hover { color: #12181c; }
@media (max-width: 560px) { .header-tools .theme-btn { display: none; } }
/* Helle Buttons auf Bildern: Text bleibt dunkel, auch im dunklen Design */
.btn--light { --b-fg: #12181c; }
.btn--ghost-light:hover { --b-fg: #12181c; }


/* Weiße Nachbar-Sections teilen sich einen Abstand statt zwei (Liza, 29.09.: Referenzen → Ablauf) */
.referenzen + .info-ablauf, .mass-statement + .info-ablauf, .unit-sach + .sg--detail, .koll-details + .sg--detail { padding-top: 0; }
.referenzen { padding-bottom: clamp(56px, 7vw, 110px); }

/* Technische Zeichnung im Regler-Baustein (Chef, 29.09.): Linienzeichnung, Breite folgt dem Regler */
.measure__draw { position: relative; aspect-ratio: 16 / 10; background: var(--surface); display: grid; place-items: center; padding: 4% 3%; overflow: hidden; }
.measure__draw .mzd { width: 100%; height: auto; display: block; }
.mzd { color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mzd .mzd-room { opacity: .55; }
.mzd .mzd-thin { stroke-width: .8; opacity: .55; }
.mzd .mzd-plant { stroke-width: 1.1; }
.mzd .mzd-unit { transition: opacity .3s; }
.mzd .mzd-blue, .mzd .mzd-dim { stroke: var(--blue); stroke-width: 1.6; }
.mzd .mzd-label { fill: var(--blue-ink); stroke: none; font-family: var(--font); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.mzd [data-mz="body"], .mzd [data-mz="top"], .mzd [data-mz="mirror"] { fill: var(--bg); }
html[data-theme="dark"] .mzd { color: var(--ink); }

/* Datei-Feld im Kontaktformular (Chef, 29.09.): eigener Knopf statt Browser-Standard */
.field--file .field__title { display: block; margin-bottom: 10px; font-size: 13px; color: var(--soft); }
.file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 3px; }
.file__name { font-size: 14px; color: var(--faint); }
.form--lines .field--file label { position: static; margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--b-fg, var(--ink)); }

/* Seiten des Kollegen (Bedürfnis-Finder, Magazin): Container unter der Kopfzeile */
.fd-page, .mz { padding-top: clamp(28px, 4vw, 56px); }
.fd-page .vn-eyebrow::before { display: inline-block; }

/* Bedürfnis-Finder: Umschalter Privat / Gewerblich (Liza, 29.09.) */
.fd-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
/* Umschalter als zwei Karten (Liza, 30.09.: „nicht erkennbar, dass man klicken kann, sehr zurückhaltend“) */
.fd-switch { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 4px; align-items: start; padding: 22px 24px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--ink); transition: border-color .3s, background .3s, color .3s, transform .35s var(--ease), box-shadow .35s; }
.fd-switch > svg { grid-row: 1 / 4; width: 34px; height: 34px; margin-top: 2px; color: var(--blue-ink); }
.fd-switch b { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.fd-switch strong { font-size: clamp(19px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.fd-switch span { font-size: 14.5px; color: var(--soft); }
.fd-switch em { grid-column: 2; display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 12px; padding-bottom: 5px; font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); border-bottom: 1px solid var(--blue-ink); transition: gap .35s var(--ease); }
.fd-switch em svg { width: 15px; height: 15px; }
.fd-switch:not(.is-active):hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 24px 40px -32px rgba(13,18,21,.5); }
.fd-switch:not(.is-active):hover em { gap: 16px; }
.fd-switch.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); cursor: default; }
.fd-switch.is-active > svg { color: var(--bg); }
.fd-switch.is-active b, .fd-switch.is-active span { color: var(--bg); opacity: .72; }
.fd-switch.is-active em { color: var(--bg); opacity: .6; border-bottom-color: transparent; }
@media (max-width: 640px) { .fd-switcher { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fd-switcher { grid-template-columns: 1fr; } }

/* Regler-Zeichnung auf der Raumskizze (Higgsfield-Bleistiftskizze, 29.09.) */
.measure__draw--scene { padding: 0; background: #f6f6f5; }
.measure__draw--scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.measure__draw--scene .mzd { position: absolute; inset: 0; width: 100%; height: 100%; }
.measure__draw--scene .mzd { color: #3a4046; stroke-width: 1.5; }
.measure__draw--scene .mzd [data-mz="body"], .measure__draw--scene .mzd [data-mz="top"], .measure__draw--scene .mzd [data-mz="mirror"] { fill: rgba(255, 255, 255, .55); }
.measure__draw--scene .mzd .mzd-label { font-size: 20px; }
html[data-theme="dark"] .measure__draw--scene { background: #10161a; }
.measure__scene--dunkel { display: none; }
html[data-theme="dark"] .measure__scene--hell { display: none; }
html[data-theme="dark"] .measure__scene--dunkel { display: block; }
html[data-theme="dark"] .measure__draw--scene .mzd { color: #e6ebee; }
html[data-theme="dark"] .measure__draw--scene .mzd [data-mz="body"], html[data-theme="dark"] .measure__draw--scene .mzd [data-mz="top"], html[data-theme="dark"] .measure__draw--scene .mzd [data-mz="mirror"] { fill: rgba(16, 22, 26, .55); }

/* Kollektionsseiten: Bildmoment mit Riesenzeilen (Chef, 29.09.) */
.koll-band { min-height: min(86vh, 820px); }
.koll-band .band__content .eyebrow { color: rgba(255,255,255,.8); }
.koll-band .giant--light { margin: 0; }
.koll-band .band__content[data-reveal] { opacity: 1; transform: none; }
.koll-details + .koll-band { margin-top: 0; }

/* Startseite „Wir hören am Bad nicht auf“: Vollbild-Band mit Riesenzeilen (Liza, 29.09.) */
/* Seit 20.10. trägt dieses Band ein sehr helles Kundenfoto (Theke in einer Praxis). Der Verlauf von
   .band--wk ist für dunkle Motive gemacht und reicht hier nicht: weiße Schrift auf weißer
   Arbeitsplatte kam auf 2,6:1. Deshalb ein eigener, kräftigerer Verlauf. */
.mehr-band { min-height: min(88vh, 840px); }
.mehr-band::before { background: linear-gradient(90deg, rgba(10,14,16,.9) 0%, rgba(10,14,16,.72) 45%, rgba(10,14,16,.3) 100%); }
@media (max-width: 760px) { .mehr-band::before { background: linear-gradient(180deg, rgba(10,14,16,.25) 0%, rgba(10,14,16,.88) 65%); } }
.mehr-band .band__content > p { max-width: 600px; margin-top: clamp(18px, 2.2vw, 30px); }
.mehr-band .band__actions { margin-top: clamp(22px, 2.6vw, 36px); }
.strip + .mehr-band { margin-top: 0; }

/* Manufaktur-Entree als Scroll-Video (Liza, 29.09.): Riesenschrift des About-Typs auf der Scrub-Bühne */
.scrub--about .scrub__content { padding-bottom: clamp(110px, 15vh, 170px); }
.scrub--about .band__content--giant { max-width: min(100%, 980px); }
.scrub--about .crumbs { color: rgba(255,255,255,.6); margin-bottom: 14px; }
.scrub--about .giant--light { font-size: clamp(44px, 7.4vw, 128px); margin: 0; }
.scrub--about .band__content > p { font-size: 16px; max-width: 560px; color: rgba(255,255,255,.9); margin-top: clamp(16px, 2vw, 26px); }
.scrub--about .scrub__shade { background: linear-gradient(0deg, rgba(10,14,16,.74) 0%, rgba(10,14,16,.34) 45%, rgba(10,14,16,0) 74%), linear-gradient(90deg, rgba(10,14,16,.42) 0%, rgba(10,14,16,0) 58%); }
.scrub--about video, .scrub--about .scrub__final { object-position: 50% 50%; }
.scrub--about { height: 300vh; }

/* Startseiten-Entree als Scroll-Video (Liza, 30.09.): beide Buttons von Anfang an sichtbar */
.scrub--home { height: 600vh; }
.scrub--home .scrub__content .btn-row { opacity: 1; transform: none; }

/* Vertrauenszeile (Kunde, 19.10. und 20.10.: „5 Jahre Garantie und Made in Germany sollen generell mehr
   Präsenz bekommen"). Ein Baustein, drei Orte: Entree, Kopf der Unterseiten, Fußzeile. Immer eine
   Zeile, kein Kasten, kein zweites Element. */
.trust { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.trust span { white-space: nowrap; }
.trust svg { width: 15px; height: 15px; flex: none; }
.trust i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.trust--hero { margin-top: 22px; color: rgba(255,255,255,.82); }
.trust--footer { margin-top: 16px; color: rgba(255,255,255,.72); max-width: none; }
.trust--kopf { margin-top: 26px; }
@media (max-width: 520px) { .trust { font-size: 11px; gap: 8px; } }

/* Scrollhinweis (Kunde, 19.10.: „Animierter Pfeil nach unten fehlt"): mittig unten über dem Fortschrittsbalken,
   verschwindet, sobald das Entree durchgescrollt ist. */
.scrub__hint { position: absolute; left: 50%; bottom: 96px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin-left: -21px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(13,18,21,.22); backdrop-filter: blur(10px); animation: scrubHint 1.9s var(--ease) infinite; transition: opacity .5s ease; }
.scrub__hint svg { width: 19px; height: 19px; }
.scrub.is-done .scrub__hint { opacity: 0; pointer-events: none; }
@keyframes scrubHint { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(5px); } }
@media (max-width: 1100px) { .scrub__hint { display: none; } }

/* Scroll-Symbol: drei Winkel, die nacheinander aufleuchten (Brian, 22.10.: „drei kleine Pfeile
   übereinander, die nicht die Linie haben, sondern nur die quasi diesen zack, zack, zack").
   Der Lauf von oben nach unten ist die bekannte Scroll-Symbolik. Der Pfeil bleibt dem
   Überspringen-Knopf vorbehalten, genau das war die Kritik. */
.scrub__hint svg path, .scroll-cue svg path { animation: winkel 1.6s ease-in-out infinite; }
.scrub__hint svg path:nth-child(2), .scroll-cue svg path:nth-child(2) { animation-delay: .16s; }
.scrub__hint svg path:nth-child(3), .scroll-cue svg path:nth-child(3) { animation-delay: .32s; }
@keyframes winkel { 0%, 65%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .scrub__hint { animation: none; }
  .scrub__hint svg path, .scroll-cue svg path { animation: none; opacity: 1; }
}
.scrub--home video, .scrub--home .scrub__final { object-position: 50% 50%; }


/* Dunkles Design, Korrekturrunde 30.09. (Liza: Buttons, Texte, Skizze) */
html[data-theme="dark"] .btn:hover { --b-fg: #12181c; }                      /* Hover auf hellem Blau: dunkle Schrift */
html[data-theme="dark"] .btn--blue:hover, html[data-theme="dark"] .btn--outline:hover { --b-fg: var(--bg); }
html[data-theme="dark"] .gew, html[data-theme="dark"] .drawer, html[data-theme="dark"] .menu-btn { background: var(--bg); }
html[data-theme="dark"] .lang-dd .lang, html[data-theme="dark"] .rcard, html[data-theme="dark"] .rcard2__pill, html[data-theme="dark"] .chip,
html[data-theme="dark"] .choice, html[data-theme="dark"] .product__badge, html[data-theme="dark"] .tile__cta, html[data-theme="dark"] .story__pic span { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .reiter__tab { background: var(--surface); }
html[data-theme="dark"] .reiter__tab[aria-selected="true"] { background: var(--blue-btn); border-color: var(--blue-btn); color: #fff; }
html[data-theme="dark"] .reiter__tab[aria-selected="true"] span { color: #fff; }
html[data-theme="dark"] .choose__row:hover .choose__arrow { color: #12181c; }
html[data-theme="dark"] .mx { background: var(--surface-2); }
/* Maßskizze auf /nach-mass/: die weiße Korpusfläche wird dunkel, Linien bleiben Tokens */
html[data-theme="dark"] .mz-k { fill: var(--surface-2); }

/* Dunkles Design, zweite Korrekturrunde 30.09. (Lizas Screenshots) */
html[data-theme="dark"] .numbers li { background: transparent; }   /* wie hell: keine Kästen, nur Linien */
html[data-theme="dark"] .coll__name::before { background: var(--blue-soft); }                                         /* aktive Kollektion: dezente Blautönung statt Hellblau */
html[data-theme="dark"] .rev2__arrows .round-btn:first-child { color: var(--bg); }                                    /* gefüllter Pfeil: dunkler Pfeil auf heller Fläche */
html[data-theme="dark"] .rev2__arrows .round-btn:first-child:hover { color: #12181c; }


/* Barrierefreiheit nach Site-Check 30.09.: inaktive Kollektionsnamen mindestens 3:1, Shop-Wortmarke 4,5:1 */
.coll__name { opacity: .48; }
.coll__name:hover { opacity: .72; }
.coll__name.is-active { opacity: 1; }
.db-logo b em { color: #2f6fa6; }  /* 4,9:1 auf Weiß; überschreibt die frühere Regel gleicher Spezifität */

/* Manufaktur „Wer wir sind.“: Headline in der Größe der übrigen Section-Headlines (Liza, 30.09.: zu klein) */
.about-text__h2.about-text__lead { font-size: clamp(34px, 4.2vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -.035em; margin-bottom: clamp(20px, 2.4vw, 36px); }

/* Zwei Wege als Vollbild-Band (Chef, 30.09.: Gewichtung Privat/Gewerblich) */
.wege-band { display: flex; min-height: min(78vh, 760px); background: var(--dark); color: #fff; }
.wege-band__half { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; color: #fff; transition: flex-grow .7s var(--ease); }
.wege-band__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2; transition: transform 1.1s var(--ease); }
.wege-band__half::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,18,21,.06) 30%, rgba(13,18,21,.84) 100%); }
.wege-band__half + .wege-band__half { border-left: 1px solid rgba(255,255,255,.2); }
.wege-band__body { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 64px); max-width: 640px; }
.wege-band__body .eyebrow { color: rgba(255,255,255,.8); }
.wege-band__body .giant { font-size: clamp(40px, 5.6vw, 96px); margin: 0; }
.wege-band__text { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 46ch; }
.wege-band__body .btn { margin-top: 8px; }
@media (hover: hover) {
  .wege-band:hover .wege-band__half { flex-grow: .85; }
  .wege-band .wege-band__half:hover { flex-grow: 1.3; }
  .wege-band__half:hover img { transform: scale(1.04); }
}
@media (max-width: 900px) {
  .wege-band { flex-direction: column; min-height: 0; }
  .wege-band__half { min-height: 62vh; }
  .wege-band__half + .wege-band__half { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
}
@media (prefers-reduced-motion: reduce) { .wege-band__half, .wege-band__half img { transition: none; } }
.scrub--home .scene__copy .eyebrow { color: rgba(255,255,255,.82); margin-bottom: 14px; }
.wege-head { padding-bottom: clamp(24px, 3vw, 44px); }
.wege-head .shead { margin-bottom: 0; }

/* Datei-Feld im Formular (Liza, 30.09.: „sieht katastrophal aus“): Knopf und Hinweis in einer Zeile, sauber zentriert */
.form--lines .field--file { gap: 12px; }
.form--lines .field--file .field__title { font-size: 14px; color: var(--soft); }
.form--lines .field--file .file { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form--lines .field--file .file label { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.form--lines .field--file .file label:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.form--lines .field--file .file input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 3px; }
.form--lines .field--file .file__name { font-size: 14px; color: var(--faint); }
.form--lines .field--file .file__name.is-set { color: var(--ink); }

/* Badplaner auf der Startseite (Liza, 30.09., Wireframe S 08) */
/* Badplaner auf der Startseite, Fassung 20.10. (Kundenpunkt h: „grafisch die Headline vom Rest
   getrennt"). Kopf und Finder stehen jetzt in einem dunklen Band, deshalb hier die hellen
   Textfarben für den Sektionskopf. */
/* Das dunkle Band des Badplaners stand nur in finder.css (`.fd`). Die englische Startseite laedt
   finder.css nicht, dort stand die Section ohne Hintergrund und damit weisse Schrift auf Weiss
   (Site-Check 20.10., /en/: 5 Kontrastfunde). Die Flaeche gehoert zur Startseite und steht
   deshalb hier; finder.css setzt auf der Badplaner-Seite dieselben Werte. */
.fd--home { color-scheme: dark; background: var(--dark); color: var(--on-dark);
  padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 120px); scroll-margin-top: var(--header-h); }
.fd--home + .section, .fd--home + .measure { margin-top: 0; }
.fd--home .shead { margin-bottom: clamp(28px, 3.4vw, 48px); }
.fd--home .shead .h2 { color: var(--on-dark); }
.fd--home .shead .eyebrow { color: rgba(255,255,255,.72); }
.fd--home .shead .lead { color: var(--on-dark-soft); }
.fd-home__privat { margin-top: clamp(26px, 3vw, 40px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); color: var(--on-dark-soft); font-size: 15px; }
.fd-home__privat a { display: inline-flex; align-items: center; gap: 7px; color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; }
.fd-home__privat a:hover { border-color: currentColor; }
.fd-home__privat svg { width: 14px; height: 14px; }

/* ==========================================================================
   Collage (Kunde, 20.10.): viele Möbel auf einen Blick, vor allem auf den
   Unterseiten. Sechs Motive, drei Spalten, alle Felder gleich groß.
   Die erste Fassung hatte zehn Motive und doppelt breite Felder; weil breite
   und schmale Felder unterschiedlich hoch sind, blieben Lücken im Raster
   (Liza, 20.10.). Gleich große Felder können nicht verrutschen.
   ========================================================================== */
.collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.collage__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.collage__item:hover img { transform: scale(1.04); }
.collage__foot { margin-top: 32px; justify-content: center; }
@media (max-width: 900px) { .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px) { .collage { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .collage__item:hover img { transform: none; } }

/* Bewertung in „Gebaut in Wächtersbach" (Kunde, 19.10.: „Bewertung hier platzieren?").
   Eine Zeile unter den Zahlen, kein Kasten. */
.haltung__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 26px; font-size: 14px; color: var(--soft); }
.haltung__rating a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.haltung__rating a:hover { border-color: currentColor; }
.haltung__rating .stars__note { color: var(--ink); font-size: 15px; }

/* Garantie-Siegel auf dem Paneel „5 Jahre Garantie" (Kunde, 19.10.). Typografisch gesetzt, weil der
   Kunde kein eigenes Siegel geliefert hat. */
.siegel { position: absolute; right: clamp(16px, 2vw, 26px); top: clamp(16px, 2vw, 26px); z-index: 1; width: clamp(68px, 7vw, 92px); color: #fff; pointer-events: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.siegel svg { width: 100%; height: auto; display: block; }
.siegel__zahl { font-size: 46px; font-weight: 300; letter-spacing: -.03em; fill: currentColor; }
.siegel__wort { font-size: 11px; font-weight: 500; letter-spacing: .14em; fill: currentColor; }

/* Fotostrecke lässt sich seit 20.10. auch ziehen, nicht nur mit dem Rad scrollen. */
.strip__track { cursor: grab; }
.strip.is-dragging .strip__track { cursor: grabbing; user-select: none; }
.strip.is-dragging .strip__item img { pointer-events: none; }
.strip__track img { -webkit-user-drag: none; user-drag: none; }
@media (max-width: 900px) { .strip__track { cursor: auto; } }

/* ==========================================================================
   Garantie-Grafik im Paneel „5 Jahre Garantie" (Liza, 20.10.: „eine Grafik mit
   diesem 5 Jahre Garantie"). Gezeichnet statt fotografiert: scharf bei jeder
   Größe, exakt in der Hausschrift, keine KI-Artefakte.
   Grund ist das Logoblau in der abgedunkelten Fassung (--blue-ink). Das helle
   --blue sah besser aus, Weiß darauf kommt aber nur auf 3,6:1; „JAHRE GARANTIE"
   ist mit rund 16 px keine Großschrift und bräuchte 4,5:1. Auf --blue-ink sind
   es 5,5:1.
   ========================================================================== */
.panel--grafik { background: var(--blue-ink); }
.siegel-flaeche { position: absolute; inset: 0; z-index: -2; display: grid; place-content: center; padding: clamp(24px, 4vw, 54px); background: var(--blue-ink); }
.siegel-flaeche svg { width: clamp(120px, 15vw, 210px); height: auto; display: block; }
.siegel-flaeche__ring { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; }
.siegel-flaeche__ring--blau { stroke: #fff; stroke-width: 2.5; }
.siegel-flaeche__zahl { fill: #fff; font-size: 92px; font-weight: 200; letter-spacing: -.04em; }
.siegel-flaeche__wort { fill: #fff; font-size: 17px; font-weight: 500; letter-spacing: .26em; }

/* ==========================================================================
   Anfrageformular, Feinschliff (Liza, 20.10.: „mehr designiger").
   Drei Eingriffe: die Ablagefläche für den Anhang statt Knopf plus grauem
   Text, eine blaue Linie, die beim Fokus von links aufzieht, und ein etwas
   ruhigerer Umschalter Privat/Gewerblich.
   ========================================================================== */

/* Fokuslinie unter den Feldern */
.form--lines .field { position: relative; }
.form--lines .field:not(.field--file)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease); pointer-events: none;
}
.form--lines .field:focus-within:not(.field--file)::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .form--lines .field::after { transition: none; } }

/* Umschalter Privat / Gewerblich */
.segmented--text span { transition: color .25s, border-color .25s; }
.segmented--text label:hover span { color: var(--ink); border-bottom-color: var(--line-strong); }
.segmented--text input:checked + span { border-bottom-color: var(--blue); }

/* Ablagefläche für Skizze oder Foto */
.field--file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* .ablage ist ein <label> und erbt sonst Versalien und Sperrung von `.field label`. */
.form--lines .field--file .ablage, .ablage {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin: 0; cursor: pointer;
  border: 1px dashed var(--line-strong); border-radius: 2px; background: var(--surface);
  font-size: 15px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink);
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.ablage:hover { border-color: var(--blue); background: var(--blue-soft); }
.ablage.is-over { border-color: var(--blue); background: var(--blue-soft); border-style: solid; transform: translateY(-2px); }
.ablage.is-set { border-style: solid; border-color: var(--blue); background: var(--blue-soft); }
.field--file input:focus-visible + .ablage { outline: 2px solid var(--blue); outline-offset: 3px; }
.ablage__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--blue-ink); background: #fff; transition: border-color .25s; }
.ablage:hover .ablage__icon, .ablage.is-set .ablage__icon, .ablage.is-over .ablage__icon { border-color: var(--blue); }
.ablage__icon svg { width: 19px; height: 19px; }
.ablage__text { display: grid; gap: 3px; min-width: 0; }
.ablage__text b { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.ablage__hinweis { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.ablage.is-set .ablage__hinweis { color: var(--blue-ink); font-weight: 500; }
@media (max-width: 520px) { .ablage { padding: 16px; gap: 12px; } .ablage__icon { width: 38px; height: 38px; } }


/* Der Weg eines Möbels, zwei Felder nebeneinander
   (Brian, 22.10.: „Dieser Weg, den würde ich in Pfeilen darstellen ... es stellt den Prozess nicht
   dar." Und: „Im ersten Ansatz muss das Ganze verständlich sein und dann soll es geil aussehen.")

   Liza, 27.10., nach einem ersten, zu nüchternen Entwurf aus zwei Linien: blaue Fläche als
   Kontrast. Links hell der Umweg mit vier Stationen, zwei davon durchgestrichen, rechts die blaue
   Fläche mit weißer Schrift und nur zwei Stationen. Die beiden Felder stoßen ohne Fuge aneinander,
   die harte Kante ist das Bild.

   Das Blau ist ein eigener Wert `--blue-block`, nicht `--blue` und nicht `--blue-ink`:
   `--blue-ink` wird im dunklen Design aufgehellt, weil es dort Textfarbe ist, und die Fläche wäre
   plötzlich hellblau mit weißer Schrift darauf. Weiße Schrift auf `--blue-block` kommt auf 5,5 zu 1 und besteht
   damit AA in jeder Schriftgröße; auf dem helleren `--blue` wären es nur 3,6 zu 1 und die kleine
   Versalzeile würde durchfallen. Damit bleibt auch die Hausregel der Section gewahrt, dass Blau
   Aussage trägt und nicht Dekor ist.

   Auf der direkten Strecke ersetzt eine wachsende Linie den Winkel, die Spitze sitzt an ihrem Ende.
   Beide Pseudoelemente stehen über `order` vor dem Namen, sonst liefe der Pfeil hinter „Ihr Bad". */
/* Keine eigene Breitenbegrenzung: die Grafik laeuft ueber die volle Spaltenbreite und steht
   damit buendig mit dem Zahlenblock darunter. Die 1100 px von frueher stammen aus der Fassung
   mit den zwei Textketten, dort fiel der kurze rechte Rand nicht auf; als gefuellte Flaeche sah
   er aus wie ein Fehler (Liza, 27.10.: „warum ist das so linksbuendig?“). */
.hweg { margin: clamp(36px, 5vw, 64px) 0 0; display: grid; grid-template-columns: 1fr 1fr; }
.hweg__feld { padding: clamp(24px, 2.8vw, 40px); display: grid; gap: clamp(18px, 2.2vw, 30px);
              align-content: space-between; min-height: clamp(160px, 17vw, 220px); background: var(--surface); }
.hweg__feld--wir { background: var(--blue-block); color: #fff; }
.hweg__titel { margin: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
/* Voll Weiß, nicht abgeschwächt: bei 12,5 px gilt die strenge Schwelle von 4,5 zu 1, mit
   Deckkraft .78 kam die Zeile nur auf 4,09. Weiß auf --blue-block sind 5,5. */
.hweg__feld--wir .hweg__titel { color: #fff; }

.hweg__kette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(10px, 1.2vw, 16px);
               margin: 0; padding: 0; list-style: none;
               font-size: clamp(19px, 2.2vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.hweg__kette li + li { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); }
.hweg__kette li + li::before { content: ""; flex: none; width: .34em; height: .34em;
                               border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
                               transform: rotate(45deg); opacity: .4; }
.hweg__kette .is-umweg { color: var(--faint); text-decoration: line-through;
                         text-decoration-thickness: 1.5px; text-decoration-color: var(--blue); }

.hweg__kette--direkt { flex-wrap: nowrap; }
.hweg__kette--direkt li + li { flex: 1 1 auto; gap: 0; }
.hweg__kette--direkt li + li::before { order: -2; flex: 1 1 auto; width: auto; height: 2px; border: 0;
                                       background: #fff; opacity: 1; transform: none; margin-right: -1px; }
.hweg__kette--direkt li + li::after { content: ""; order: -1; flex: none; width: .3em; height: .3em;
                                      border-top: 2px solid #fff; border-right: 2px solid #fff;
                                      transform: rotate(45deg); margin: 0 clamp(10px, 1.2vw, 16px) 0 -.17em; }

@media (max-width: 760px) {
  .hweg { grid-template-columns: 1fr; }
  .hweg__feld { min-height: 0; }
}