/* ============================================================
   ClearWay Gebäudeservice – Designsystem „ClearWay Glass"
   Quelle wird von _src/build.py referenziert; Tokens zentral hier.
   ============================================================ */

/* ---------- Schriften (lokal gehostet) ---------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}

/* ---------- Design-Tokens ---------- */
:root {
  --cw-navy-950: #061b33;
  --cw-navy-900: #0a2d55;
  --cw-navy-800: #103a6b;
  --cw-blue: #1268a5;
  --cw-blue-bright: #2f8fd4;
  --cw-green: #5b9824;
  --cw-green-bright: #79bf35;
  --cw-white: #ffffff;
  --cw-bg: #eef3f8;
  --cw-bg-soft: #f6f9fc;
  --cw-text: #10243a;
  --cw-muted: #52657a;

  --cw-glass: rgba(255, 255, 255, .55);
  --cw-glass-strong: rgba(255, 255, 255, .72);
  --cw-glass-dark: rgba(6, 27, 51, .55);
  --cw-glass-dark-strong: rgba(6, 27, 51, .78);
  --cw-border: rgba(255, 255, 255, .55);
  --cw-border-soft: rgba(157, 183, 208, .35);
  --cw-border-dark: rgba(255, 255, 255, .14);

  --cw-radius-lg: 24px;
  --cw-radius-md: 16px;
  --cw-radius-sm: 10px;
  --cw-blur: 18px;
  --cw-blur-soft: 10px;

  --cw-shadow-sm: 0 2px 10px rgba(6, 27, 51, .07);
  --cw-shadow-md: 0 10px 34px rgba(6, 27, 51, .12);
  --cw-shadow-lg: 0 24px 60px rgba(6, 27, 51, .18);
  --cw-inset-light: inset 0 1px 0 rgba(255, 255, 255, .65);

  --cw-shell: 1200px;
  --cw-shell-wide: 1360px;
  --section-pad: clamp(3rem, 6vw, 5.2rem);

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --ease-glass: cubic-bezier(.33, 1, .3, 1);

  /* Defaults für per Inline-Style gesteuerte Effektvariablen */
  --from-x: 0px;
  --from-y: 26px;
  --drift: 0px;
  --zoom: 1.06;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0425rem;
  line-height: 1.68;
  color: var(--cw-text);
  background:
    radial-gradient(60rem 42rem at 118% -6%, rgba(47, 143, 212, .14), transparent 60%),
    radial-gradient(52rem 38rem at -14% 22%, rgba(121, 191, 53, .11), transparent 58%),
    radial-gradient(46rem 40rem at 84% 78%, rgba(18, 104, 165, .08), transparent 62%),
    var(--cw-bg);
  background-attachment: fixed;
  overflow-x: hidden;
  overflow-x: clip; /* wie bei html: hidden erzeugt sonst einen Scroll-
    Container (overflow-y wird implizit "auto"), was position:sticky fuer
    alle Nachkommen bricht (Bezugsrahmen waere dann body statt Viewport) */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--cw-navy-950);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.4rem); font-weight: 700; }

p { margin: 0 0 1.05em; max-width: 68ch; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

a { color: var(--cw-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cw-navy-900); }

:focus-visible {
  outline: 3px solid var(--cw-blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: min(var(--cw-shell), 100% - 2.4rem); margin-inline: auto; }
.shell-wide { width: min(var(--cw-shell-wide), 100% - 2.4rem); margin-inline: auto; }

section { padding-block: var(--section-pad); position: relative; }
.section-tight { padding-block: calc(var(--section-pad) * .55); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: -4rem; left: 1rem;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--cw-navy-950);
  color: #fff;
  border-radius: var(--cw-radius-sm);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 2.1rem; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue-bright));
}

.lead { font-size: 1.14rem; color: var(--cw-muted); max-width: 62ch; }

/* ---------- Glass-Grundkomponenten ---------- */
.glass {
  background:
    linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(340deg, rgba(214,232,246,.16) 0%, rgba(255,255,255,0) 34%),
    var(--cw-glass);
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  backdrop-filter: blur(var(--cw-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--cw-blur)) saturate(1.35);
  box-shadow:
    var(--cw-shadow-md),
    var(--cw-inset-light),                          /* obere Lichtkante */
    inset 0 -1px 0 rgba(6,27,51,.06),               /* untere Tiefenlinie */
    inset 1px 0 0 rgba(255,255,255,.28),            /* linke Kante im Licht */
    inset 0 0 0 1px rgba(255,255,255,.08);          /* innere Brechungslinie */
}
.glass-strong {
  background:
    linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(340deg, rgba(214,232,246,.14) 0%, rgba(255,255,255,0) 32%),
    var(--cw-glass-strong);
}
.glass-dark {
  background:
    linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(335deg, rgba(120,180,230,.08) 0%, rgba(255,255,255,0) 30%),
    var(--cw-glass-dark);
  border: 1px solid var(--cw-border-dark);
  border-radius: var(--cw-radius-lg);
  backdrop-filter: blur(var(--cw-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--cw-blur)) saturate(1.25);
  box-shadow:
    var(--cw-shadow-lg),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.05);
  color: #eaf2fa;
}

/* Lichtkante, die über Glasflächen läuft (nur dezent einsetzen) */
.glass-shine { position: relative; overflow: hidden; }
.glass-shine::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 48%, transparent 100%);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}
.glass-shine:hover::after,
.glass-shine:focus-visible::after {
  animation: shine-sweep 1s var(--ease-glass);
}
@keyframes shine-sweep {
  0% { opacity: 0; transform: skewX(-18deg) translateX(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(430%); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: .86rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease-glass), box-shadow .25s var(--ease-glass), background-color .25s;
}
.btn:active { transform: translateY(1px) scale(.99); }

/* Primär: grünes Glas mit „Clean-Wipe“: milchige Schicht wird beim Hover klar */
.btn-primary {
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%), linear-gradient(120deg, var(--cw-green) 8%, #4d861c 92%);
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 10px 24px rgba(91, 152, 36, .34), var(--cw-inset-light);
}
.btn-primary::before {   /* Glasschicht: standardmäßig unsichtbar – Buttons
                            sind immer klar; nur .btn-liquid nutzt die Schicht
                            als schwappenden Hover-Effekt */
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.btn-primary::after {    /* Wischkante */
  content: "";
  position: absolute; inset: -30% auto -30% -45%;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 50%, transparent);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover, .btn-primary:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(91, 152, 36, .44), var(--cw-inset-light);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before { opacity: 0; }
.btn-primary:hover::after, .btn-primary:focus-visible::after { animation: shine-sweep .9s var(--ease-glass); }

/* Sekundär: transparentes Glas */
.btn-ghost {
  color: var(--cw-navy-900);
  background: var(--cw-glass);
  border-color: var(--cw-border);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  box-shadow: var(--cw-shadow-sm), var(--cw-inset-light);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  color: var(--cw-navy-950);
  background: var(--cw-glass-strong);
  transform: translateY(-2px);
  box-shadow: var(--cw-shadow-md), var(--cw-inset-light);
}

.btn-ghost-light {
  color: #eaf2fa;
  background: rgba(255,255,255,.08);
  border-color: var(--cw-border-dark);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.btn-block { width: 100%; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.06rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cw-blue);
  text-decoration: none;
}
.text-link svg { transition: transform .25s var(--ease-glass); }
.text-link:hover svg, .text-link:focus-visible svg { transform: translateX(4px); }
.text-link:hover { color: var(--cw-navy-900); }

/* ---------- Header / Navigation: schwebende Milchglas-Leiste ----------
   Die Navbar ist auf allen Breakpoints ein frei stehendes, rundum
   abgerundetes Frosted-Glass-Modul mit Abstand zum Bildschirmrand.
   Oben ist das Glas transparenter; beim Scrollen wird es milchiger und
   die Leiste minimal kompakter (Zustände .is-scrolled / .is-deep). */
.site-header {
  position: fixed;
  inset: clamp(10px, 1.4vw, 16px) 0 auto 0;
  z-index: 100;
  padding-inline: clamp(14px, 2.4vw, 32px);
  pointer-events: none;             /* nur die Leiste selbst fängt Klicks */
}
.header-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: var(--cw-shell-wide);
  margin-inline: auto;
  padding: .62rem 1rem .62rem .8rem;
  border-radius: 24px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.4), rgba(255,255,255,.1) 55%),
    rgba(255,255,255,.46);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 8px 30px rgba(6,27,51,.1), inset 0 1px 0 rgba(255,255,255,.55);
  transition: padding .35s var(--ease-glass), background-color .35s,
              box-shadow .35s, border-color .35s;
}
/* Lichtreflexion in der Glaskante der Navbar */
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.2) 34%, transparent 46%);
  pointer-events: none;
}
.header-inner { position: relative; }
.site-header.is-scrolled .header-inner {
  padding-block: .48rem;
  background:
    linear-gradient(165deg, rgba(255,255,255,.44), rgba(255,255,255,.1) 55%),
    rgba(255,255,255,.56);
  box-shadow: 0 12px 36px rgba(6,27,51,.13), inset 0 1px 0 rgba(255,255,255,.65);
}
/* Tiefer im Dokument: milchiger, aber weiterhin leicht durchscheinend */
.site-header.is-deep .header-inner {
  background:
    linear-gradient(165deg, rgba(255,255,255,.46), rgba(255,255,255,.12) 55%),
    rgba(255,255,255,.64);
  backdrop-filter: blur(19px) saturate(1.4);
  -webkit-backdrop-filter: blur(19px) saturate(1.4);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
/* Original-Logo (Icon) auf Marken-Chip – funktioniert auf hellen wie dunklen Flächen */
.brand-chip {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(155deg, rgba(255,255,255,.2), rgba(255,255,255,.02) 55%),
    linear-gradient(150deg, var(--cw-navy-900), var(--cw-navy-950));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: var(--cw-shadow-sm), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass);
}
.brand-chip img { width: 30px; height: auto; display: block; }
.brand:hover .brand-chip, .brand:focus-visible .brand-chip {
  transform: translateY(-1px) rotate(-2deg);
  box-shadow: var(--cw-shadow-md), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.04; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  color: var(--cw-navy-950);
  letter-spacing: -.01em;
}
.brand-name em { font-style: normal; color: var(--cw-green); }
.brand-sub {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cw-muted);
}

/* Die Frosted-Leiste trägt ihre Lesbarkeit selbst – Markenfarben bleiben
   auch über dunklen Hero-Bildern unverändert. */

.main-nav { margin-left: auto; }
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.main-nav a {
  display: inline-block;
  padding: .52rem .85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  color: var(--cw-navy-900);
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,.6); color: var(--cw-navy-950); }
.main-nav a[aria-current="page"] {
  background: rgba(255,255,255,.72);
  box-shadow: var(--cw-shadow-sm), var(--cw-inset-light);
}

.has-dropdown { position: relative; display: flex; align-items: center; }
.dropdown-toggle {
  border: 0;
  background: none;
  padding: .3rem;
  margin-left: -.4rem;
  color: var(--cw-navy-900);
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
}
.dropdown-toggle svg { transition: transform .25s; }
.has-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + .9rem);
  left: 50%;
  translate: -50% 0;
  min-width: 310px;
  padding: .55rem;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease-glass), transform .25s var(--ease-glass), visibility .25s;
  background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,0) 45%), rgba(255,255,255,.82);
}
.dropdown::before { /* unsichtbare Hover-Brücke */
  content: "";
  position: absolute;
  inset: -1rem 0 auto;
  height: 1rem;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  width: 100%;
  padding: .6rem .9rem;
  border-radius: var(--cw-radius-sm);
  font-size: .94rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.btn-nav { padding: .6rem 1.25rem; font-size: .92rem; }
/* Der Nav-CTA ist von Anfang an klar – keine milchige Glasschicht wie
   bei den großen Buttons (die Wischkante beim Hover bleibt) */
.btn-nav::before { display: none; }
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cw-navy-900);
  text-decoration: none;
}

/* Mobil-Menü */
.menu-toggle {
  display: none;
  border: 1px solid var(--cw-border);
  background: var(--cw-glass);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  border-radius: 12px;
  width: 46px; height: 46px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cw-shadow-sm), var(--cw-inset-light);
}
.menu-toggle-box { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.menu-toggle-box span {
  height: 2px;
  border-radius: 2px;
  background: var(--cw-navy-950);
  transition: transform .3s var(--ease-glass), opacity .2s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 5.4rem 1rem 1rem;
  background: rgba(6, 27, 51, .4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.mobile-menu-glass {
  padding: 1.4rem;
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 45%), var(--cw-glass-dark-strong);
}
.mobile-primary {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.mobile-primary > li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-primary > li:last-child { border-bottom: 0; }
.mobile-primary a, .mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .95rem .4rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: #eef5fb;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.mobile-sub-toggle svg { transition: transform .25s; }
.mobile-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 .6rem;
  display: none;
}
.mobile-sub-toggle[aria-expanded="true"] + .mobile-sub { display: block; }
.mobile-sub a {
  font-size: .98rem;
  font-weight: 500;
  padding: .6rem .4rem .6rem 1.1rem;
  color: #cfe0ef;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-top: 6.2rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: .86rem;
  color: var(--cw-muted);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .35rem; }
.breadcrumb li + li::before { content: "›"; color: var(--cw-muted); }
.breadcrumb a { color: var(--cw-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--cw-navy-900); text-decoration: underline; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92svh, 60rem);
  display: flex;
  align-items: flex-end;
  padding: 8.5rem 0 clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border-radius: 0 0 clamp(18px, 3vw, 38px) clamp(18px, 3vw, 38px);
}
.hero-media, .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,27,51,.34) 0%, rgba(6,27,51,.06) 34%, rgba(6,27,51,.5) 100%),
    linear-gradient(76deg, rgba(6,27,51,.5) 0%, rgba(6,27,51,.08) 55%, transparent 75%);
}
.hero-streak {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.11) 42%, transparent 54%);
  transform: translateX(-60%);
  animation: hero-streak 9s ease-in-out infinite;
}
@keyframes hero-streak {
  0%, 58% { transform: translateX(-70%); opacity: 0; }
  66% { opacity: 1; }
  86%, 100% { transform: translateX(75%); opacity: 0; }
}
.hero-inner { position: relative; z-index: 2; }
.hero-panel {
  max-width: 640px;
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  border-radius: var(--cw-radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 40%), rgba(9, 33, 60, .5);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(var(--cw-blur));
  -webkit-backdrop-filter: blur(var(--cw-blur));
  box-shadow: var(--cw-shadow-lg), inset 0 1px 0 rgba(255,255,255,.3);
  color: #f2f7fc;
}
.hero-panel h1 { color: #fff; margin-bottom: .45em; }
.hero-panel .hero-text { color: #dbe7f2; font-size: 1.1rem; max-width: 52ch; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .95rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #e7f0f8;
}
.hero-kicker::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--cw-green-bright);
  box-shadow: 0 0 12px rgba(121, 191, 53, .9);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  margin-top: 1.6rem;
}
.hero .hero-actions .btn-ghost,
.page-hero .hero-actions .btn-ghost,
.cta-panel .hero-actions .btn-ghost { color: #f0f6fb; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.hero .hero-actions .btn-ghost:hover, .hero .hero-actions .btn-ghost:focus-visible,
.page-hero .hero-actions .btn-ghost:hover, .page-hero .hero-actions .btn-ghost:focus-visible,
.cta-panel .hero-actions .btn-ghost:hover, .cta-panel .hero-actions .btn-ghost:focus-visible { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Trust-Pills ---------- */
.trust {
  padding-block: 1.9rem;
}
.trust-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.trust-pill {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.15rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .93rem;
  font-weight: 600;
  color: var(--cw-navy-900);
}
.trust-pill svg { flex: none; color: var(--cw-green); }

/* ---------- Sektionstitel ---------- */
.section-head { max-width: 720px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-inline: auto; }

/* ---------- Leistungs-Cards ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.15rem;
}
.services-note {
  max-width: 62ch;
  margin: 1.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--cw-border-soft);
  text-align: center;
  font-size: .88rem;
  color: var(--cw-muted);
}
.services-note a { color: var(--cw-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Preisblock auf den Leistungsseiten: „Preis auf Anfrage“ statt Zahlen */
.price-request {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(1.4rem, 3.4vw, 2.4rem) clamp(1.3rem, 3.4vw, 2.4rem);
  border-radius: var(--cw-radius-lg);
}
.pr-tag {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .34rem .85rem;
  border-radius: 999px;
  background: rgba(121,191,53,.14);
  border: 1px solid rgba(121,191,53,.4);
  color: #4d7d1f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
}
.price-request h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  margin: 0 0 .9rem;
}
.price-request .pr-lead {
  font-weight: 600;
  color: var(--cw-navy-950);
  margin: 0 0 .6rem;
}
.price-request .check-list { margin-bottom: 1rem; }
.price-request .pr-note {
  color: var(--cw-muted);
  margin: 0 0 1.2rem;
  max-width: 58ch;
}
.price-request .hero-actions { margin: 0; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-md);
  isolation: isolate;
}
.service-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-glass);
  z-index: -1;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(6,27,51,0) 34%, rgba(6,27,51,.72) 82%);
  transition: background-color .4s;
}
.service-card:hover img, .service-card:focus-within img { transform: scale(1.045); }
.service-card-body {
  position: relative;
  margin: .8rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--cw-radius-md);
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 45%), rgba(9,33,60,.42);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  overflow: hidden;
}
.service-card-body h3 { color: #fff; margin-bottom: .25rem; }
.service-card-body p { color: #d7e4f0; font-size: .93rem; margin: 0 0 .55rem; }
.card-price {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  color: var(--cw-green-bright);
  margin: 0 0 .4rem;
}
.card-price span { font-family: var(--font-body); font-weight: 400; color: #c3d3e2; }
.service-card .card-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #bfe58c;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.service-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.service-card .card-link svg { transition: transform .3s var(--ease-glass); }
.service-card:hover .card-link svg, .service-card:focus-within .card-link svg { transform: translateX(5px); }
.service-card.card-featured { grid-column: span 6; grid-row: span 2; min-height: 480px; }
.service-card.card-half { grid-column: span 3; }
.service-card.card-third { grid-column: span 4; }
.service-card.card-wide { grid-column: span 6; }

/* Reflexionslauf über Cards */
.service-card .card-reflect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%);
  transform: translateX(-120%);
  z-index: 1;
}
.service-card:hover .card-reflect, .service-card:focus-within .card-reflect {
  transition: transform 1.1s var(--ease-glass);
  transform: translateX(120%);
}

/* ---------- Vorher/Nachher-Slider ---------- */
.ba-section { position: relative; }
.ba-stage { max-width: 900px; margin-inline: auto; }
.ba-slider {
  position: relative;
  margin-inline: auto;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid rgba(255,255,255,.5);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-before {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--ba-pos, 50%);
  z-index: 2;
}
.ba-before img {
  position: absolute;
  inset: 0;
  height: 100%;
  max-width: none;
}
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 18px rgba(6,27,51,.4);
  z-index: 3;
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos, 50%);
  translate: -50% -50%;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 50%), rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  box-shadow: var(--cw-shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--cw-navy-950);
  z-index: 4;
  pointer-events: none;
}
.ba-slider:active .ba-handle { transform: scale(1.06); }
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
}
.ba-range:focus-visible ~ .ba-handle {
  outline: 3px solid var(--cw-blue-bright);
  outline-offset: 3px;
}
.ba-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  font-family: var(--font-display);
  font-size: .87rem;
  font-weight: 600;
  color: var(--cw-muted);
}
.ba-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.3rem;
}
.ba-tab {
  border: 1px solid var(--cw-border);
  background: var(--cw-glass);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--cw-navy-900);
  cursor: pointer;
  transition: background-color .25s, box-shadow .25s, transform .25s;
  box-shadow: var(--cw-shadow-sm), var(--cw-inset-light);
}
.ba-tab:hover { transform: translateY(-1px); }
.ba-tab[aria-pressed="true"] {
  background: linear-gradient(150deg, rgba(255,255,255,.25), rgba(255,255,255,0) 50%), var(--cw-green);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 20px rgba(91,152,36,.35), var(--cw-inset-light);
}

/* ---------- „Klar werden“-Effekt (Warum ClearWay) ---------- */
.clarity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.clarity-card {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  overflow: hidden;
}
.js .clarity-card::after {  /* milchige Scheibe, die beim Scrollen „gewischt“ wird */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.68));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-glass);
  transition-delay: var(--wipe-delay, 0s);
  pointer-events: none;
}
.clarity-card.is-clear::after { clip-path: inset(0 0 0 100%); }
.clarity-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .95rem;
  color: var(--cw-green);
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.2)), rgba(121,191,53,.13);
  border: 1px solid rgba(121,191,53,.3);
  box-shadow: var(--cw-inset-light);
}
.clarity-card h3 { margin-bottom: .3rem; font-size: 1.12rem; }
.clarity-card p { font-size: .95rem; color: var(--cw-muted); margin: 0; }

/* ---------- Prozess / Ablauf ---------- */
.process { position: relative; }
.process-track {
  position: relative;
  margin-top: .5rem;
  display: grid;
  gap: 0;
}
.process-line {
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--cw-border-soft);
  border-radius: 2px;
  overflow: hidden;
}
.process-line-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--cw-green-bright), var(--cw-blue));
  transform-origin: top;
  transform: scaleY(var(--line-progress, 0));
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  padding-block: 1.05rem;
}
/* Schritt-Inhalte: gedimmt und leicht unscharf, bis die Linie den Punkt erreicht */
.js .process-step > div {
  opacity: .32;
  transform: translateY(14px);
  filter: blur(2.5px);
  transition: opacity .55s var(--ease-glass), transform .6s var(--ease-glass), filter .6s var(--ease-glass);
}
.js .process-step.is-active > div { opacity: 1; transform: none; filter: none; }
.process-dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--cw-navy-900);
  position: relative;
  z-index: 1;
  transition: transform .45s var(--ease-glass), box-shadow .45s var(--ease-glass),
              background-color .45s, color .45s;
}
.process-step.is-active .process-dot {
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,0) 50%), var(--cw-green);
  border-color: rgba(255,255,255,.5);
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(91,152,36,.4), 0 0 0 7px rgba(121,191,53,.14), var(--cw-inset-light);
}
.process-step h3 { margin-bottom: .25rem; font-size: 1.1rem; }
.process-step p { color: var(--cw-muted); font-size: .97rem; margin: 0; max-width: 58ch; }
.process-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.process-visual {
  position: sticky;
  top: 6.5rem;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid rgba(255,255,255,.5);
}
.process-visual { overflow: hidden; }
.process-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateY(calc((var(--p, .5) - .5) * -6%)) scale(1.08);
  will-change: transform;
}

/* ---------- Zielgruppen ---------- */
.audience-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}
.audience-tile {
  position: relative;
  min-height: 320px;
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--cw-shadow-md);
}
.audience-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 6s ease-out;
}
.audience-tile:hover img { transform: scale(1.05); }
.audience-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(6,27,51,0) 40%, rgba(6,27,51,.66) 88%);
}
.audience-caption {
  position: relative;
  margin: 1rem;
  padding: .9rem 1.2rem;
  border-radius: var(--cw-radius-md);
  background: rgba(9,33,60,.4);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  color: #fff;
}
.audience-caption strong { font-family: var(--font-display); display: block; font-size: 1.06rem; }
.audience-caption span { color: #cfdeec; font-size: .9rem; }

/* ---------- Team ---------- */
.team-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.team-photo {
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid rgba(255,255,255,.55);
  position: relative;
}
.team-photo img { width: 100%; display: block; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: .8rem; max-width: 820px; }
.faq-item {
  border-radius: var(--cw-radius-md);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cw-navy-950);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--cw-blue);
  border-bottom: 2px solid var(--cw-blue);
  transform: rotate(45deg);
  transition: transform .3s var(--ease-glass);
  margin-right: .2rem;
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-a { padding: 0 1.3rem 1.2rem; color: var(--cw-muted); }
.faq-a p { margin-bottom: .6em; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- Bewertungen (Google-Rezensionen) ----------
   Asymmetrisches Board: dunkle Glas-Zusammenfassung (2 Zeilen hoch),
   ein hervorgehobenes Zitat, dazu versetzte kleinere Karten. */
.review-board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  align-items: stretch;
}
.review-summary {
  grid-column: span 4;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    radial-gradient(26rem 18rem at 85% -10%, rgba(47,143,212,.35), transparent 60%),
    radial-gradient(20rem 14rem at 0% 110%, rgba(121,191,53,.22), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%),
    linear-gradient(155deg, var(--cw-navy-900), var(--cw-navy-950));
}
.rs-score {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin: 0;
  font-family: var(--font-display);
}
.rs-num {
  font-size: clamp(3.4rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rs-of {
  font-size: 1rem;
  font-weight: 600;
  color: #9db8d0;
}
.rs-stars { color: #f2c14e; gap: .3rem; }
.rs-note { color: #c6d7e7; font-size: .96rem; margin: 0; max-width: 30ch; }
.rs-google {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  margin: .3rem 0 0;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .89rem;
  color: #eef5fb;
}
.rs-google svg {
  flex: none;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-sizing: content-box;
}
/* Nur wenn eine echte Profil-URL hinterlegt ist, wird aus der Box ein Link */
a.rs-google-link {
  text-decoration: none;
  transition: background .25s var(--ease-glass), border-color .25s var(--ease-glass), transform .25s var(--ease-glass);
}
a.rs-google-link:hover,
a.rs-google-link:focus-visible {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.42);
  transform: translateY(-1px);
}

/* Aufruf zur eigenen Bewertung, unter den Rezensionen */
.review-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.6rem;
  padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1.2rem, 3.4vw, 2.2rem);
  border-radius: var(--cw-radius-lg);
}
.review-invite .ri-text { flex: 1 1 22rem; }
.review-invite h3 {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  margin: 0 0 .35rem;
}
.review-invite p {
  margin: 0;
  color: var(--cw-muted);
  font-size: .96rem;
  max-width: 56ch;
}
.review-invite .btn { flex: none; gap: .55rem; }
.review-invite .btn svg {
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  box-sizing: content-box;
}
@media (max-width: 640px) {
  .review-invite { flex-direction: column; align-items: stretch; text-align: left; }
  /* flex-basis wirkt in Spaltenrichtung als Höhe: ohne Reset entstünde
     zwischen Text und Button eine 22rem hohe Lücke */
  .review-invite .ri-text { flex: 0 0 auto; }
  .review-invite .btn { justify-content: center; }
}
.review-featured { grid-column: span 8; }
.review-featured blockquote { font-size: 1.13rem; line-height: 1.7; max-width: 60ch; }
.rc-4 { grid-column: span 4; }

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 0;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
}
/* dekoratives Zitatzeichen im Glas */
.review-card::before {
  content: "“";
  position: absolute;
  top: .2rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(150deg, var(--cw-green-bright), var(--cw-blue-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .3;
  pointer-events: none;
}
.review-stars {
  display: inline-flex;
  gap: .2rem;
  color: #f2a91e;
  margin: 0;
}
.review-stars svg { flex: none; }
/* Sterne rasten beim Eintritt nacheinander ein */
.js [data-reveal] .review-stars svg {
  opacity: 0;
  transform: scale(.3) rotate(-25deg);
  transition: opacity .3s var(--ease-glass), transform .5s var(--ease-glass);
}
.js [data-reveal] .review-stars svg:nth-child(1) { transition-delay: calc(var(--reveal-delay, 0s) + .12s); }
.js [data-reveal] .review-stars svg:nth-child(2) { transition-delay: calc(var(--reveal-delay, 0s) + .19s); }
.js [data-reveal] .review-stars svg:nth-child(3) { transition-delay: calc(var(--reveal-delay, 0s) + .26s); }
.js [data-reveal] .review-stars svg:nth-child(4) { transition-delay: calc(var(--reveal-delay, 0s) + .33s); }
.js [data-reveal] .review-stars svg:nth-child(5) { transition-delay: calc(var(--reveal-delay, 0s) + .4s); }
.js .revealed[data-reveal] .review-stars svg { opacity: 1; transform: none; }
.review-card blockquote {
  margin: 0;
  font-size: .99rem;
  line-height: 1.62;
  color: var(--cw-text);
}
.review-card figcaption {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-top: .35rem;
}
.review-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cw-white);
  background: linear-gradient(135deg, var(--cw-blue) 10%, var(--cw-green) 100%);
  box-shadow: var(--cw-shadow-sm);
}
.review-who { display: flex; flex-direction: column; line-height: 1.35; }
.review-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--cw-navy-950);
}
.review-src { font-size: .82rem; color: var(--cw-muted); }
@media (max-width: 980px) {
  .review-summary { grid-column: span 12; grid-row: auto; }
  .review-featured { grid-column: span 12; }
  .rc-4 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .review-summary, .review-featured, .rc-4 { grid-column: span 12; }
}

/* ---------- Abschluss-CTA ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 3vw, 38px);
  margin-inline: auto;
  width: min(var(--cw-shell-wide), 100% - 1.6rem);
  margin-block: calc(var(--section-pad) * .6) var(--section-pad);
  min-height: 460px;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.cta-final > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(80deg, rgba(6,27,51,.78) 8%, rgba(6,27,51,.32) 60%, rgba(6,27,51,.14));
  z-index: 0;
}
.cta-panel {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: clamp(1.4rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3.4vw, 2.5rem);
  color: #ecf3fa;
}
.cta-panel h2 { color: #fff; }
.cta-panel p { color: #d5e3f0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(48rem 30rem at 82% -18%, rgba(47,143,212,.16), transparent 60%),
    radial-gradient(40rem 26rem at 8% 108%, rgba(121,191,53,.1), transparent 55%),
    linear-gradient(180deg, var(--cw-navy-950), #04121f 88%);
  color: #b9c9d9;
  padding: clamp(2.6rem, 5vw, 4rem) 0 1.4rem;
  overflow: hidden;
}
.footer-glow {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 200, 255, .5), rgba(121,191,53,.5), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr .75fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  padding-bottom: 2.2rem;
}
.footer-wordmark { margin-bottom: 1.2rem; }
.footer-wordmark img {
  width: min(230px, 58vw);
  height: auto;
  display: block;
}
.footer-brand p { font-size: .95rem; max-width: 40ch; }
.footer-claim {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .06em;
  color: #e6eef6;
}
.footer-title {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #8fa5ba;
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a {
  color: #cfdcea;
  text-decoration: none;
  font-size: .95rem;
}
.footer-col a:hover, .footer-col a:focus-visible { color: #fff; text-decoration: underline; }
.footer-contact address { font-style: normal; font-size: .95rem; }
.footer-contact .btn { margin-top: .9rem; }
.footer-area { font-size: .88rem; color: #8fa5ba; }
.footer-phone .phone-link { color: #e6eef6; font-size: 1.05rem; }
.placeholder-data {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,.35);
  color: #9db3c8;
  font-size: .88rem;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .86rem;
  color: #7f95aa;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #a9bccd; text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

/* ---------- Scroll-Reveal ----------
   Nur aktiv, wenn JS läuft (html.js) – ohne JS bleibt alles sichtbar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-glass), transform .8s var(--ease-glass);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="wipe"] {
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-glass), opacity .5s;
}
.js .revealed[data-reveal] { opacity: 1; transform: none; }
.js .revealed[data-reveal="wipe"] { clip-path: inset(0 0 0 0); }

/* ---------- Kleine Helfer ---------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3.5vw, 2.6rem);
  align-items: center;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.img-frame {
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-md);
  border: 1px solid rgba(255,255,255,.55);
  position: relative;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .55rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .3rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 55%), rgba(121,191,53,.16);
  border: 1px solid rgba(121,191,53,.45);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: .32rem; top: .58rem;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--cw-green);
  border-bottom: 2px solid var(--cw-green);
  transform: rotate(-45deg);
}
.stat-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.stat-chip {
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--cw-navy-900);
}

/* ============================================================
   Unterseiten-Bausteine
   ============================================================ */

/* Kompakter Seiten-Hero (unterhalb der Breadcrumb) */
.page-hero {
  position: relative;
  width: min(var(--cw-shell-wide), 100% - 1.6rem);
  margin: .9rem auto 0;
  min-height: clamp(380px, 56vh, 560px);
  display: flex;
  align-items: flex-end;
  border-radius: clamp(18px, 3vw, 34px);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  isolation: isolate;
}
.page-hero > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(6,27,51,.18) 20%, rgba(6,27,51,.6) 88%),
              linear-gradient(80deg, rgba(6,27,51,.5), transparent 60%);
}
.page-hero .hero-panel { margin: clamp(1.2rem, 3vw, 2.4rem); }

/* Fenster/Glas: milchige Scheibe, die beim Scrollen freigewischt wird */
.wipe-glass { position: relative; }
.js .wipe-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.66), rgba(226,236,244,.5));
  backdrop-filter: blur(7px) saturate(.8);
  -webkit-backdrop-filter: blur(7px) saturate(.8);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s var(--ease-glass) .15s;
  pointer-events: none;
  z-index: 2;
}
.js .wipe-glass::before { /* Wischkante */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.95), rgba(255,255,255,.1));
  box-shadow: 0 0 22px rgba(255,255,255,.9);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.wipe-glass.revealed::after { clip-path: inset(0 0 0 100%); }
.wipe-glass.revealed::before { animation: wipe-edge 1.5s var(--ease-glass) .15s; }
@keyframes wipe-edge {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

/* Hochdruck: „Schmutzschicht“, die beim Scrollen abgetragen wird */
.dirt-reveal { position: relative; }
.js .dirt-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(58, 48, 30, .55), rgba(58, 48, 30, .28) 55%, rgba(45, 38, 24, .6)),
    linear-gradient(12deg, rgba(40, 34, 22, .35), rgba(72, 62, 40, .3));
  mix-blend-mode: multiply;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.7s var(--ease-glass) .1s;
  pointer-events: none;
  z-index: 2;
}
.dirt-reveal.revealed::after { clip-path: inset(0 0 100% 0); }
.dirt-note {
  font-size: .8rem;
  color: var(--cw-muted);
  margin-top: .55rem;
}

/* Außenpflege: organisch versetztes Einblenden */
[data-reveal="tilt"] { transform: translateY(30px) rotate(-1.6deg); }
.revealed[data-reveal="tilt"] { transform: none; }

/* Gewerbe: Intervall-Rhythmus */
.interval-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.1rem 0 1.4rem;
}
.interval-day {
  flex: 1 1 0;
  min-width: 76px;
  text-align: center;
  padding: .75rem .4rem;
  border-radius: var(--cw-radius-sm);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--cw-muted);
}
.interval-day.is-on {
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%), var(--cw-green);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 8px 20px rgba(91,152,36,.3), var(--cw-inset-light);
}
.interval-day small { display: block; font-weight: 500; font-size: .72rem; margin-top: .15rem; }
.interval-day.is-on small { color: #e4f3d2; }

/* Bild-Galerien auf Leistungsseiten */
.media-duo {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.15rem;
  align-items: stretch;
}
.media-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.media-caption {
  position: absolute;
  left: .8rem; right: .8rem; bottom: .8rem;
  margin: 0;
  padding: .55rem .95rem;
  border-radius: var(--cw-radius-sm);
  background: rgba(9,33,60,.44);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  color: #eef5fb;
  font-size: .86rem;
  font-family: var(--font-display);
  font-weight: 600;
}

/* Inhaltliche Zweiteiler mit Glaskarte */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: center;
}
.feature-card {
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.feature-card h3 { margin-top: 0; }

/* Verwandte Leistungen */
.related-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.25rem 1.3rem;
  text-decoration: none;
  color: var(--cw-text);
  transition: transform .3s var(--ease-glass), box-shadow .3s var(--ease-glass);
}
.related-card:hover, .related-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--cw-shadow-lg), var(--cw-inset-light);
  color: var(--cw-text);
}
.related-card strong { font-family: var(--font-display); color: var(--cw-navy-950); font-size: 1.05rem; }
.related-card span { font-size: .92rem; color: var(--cw-muted); }
.related-card .text-link { margin-top: .3rem; font-size: .93rem; }

/* Treppenhaus: Stockwerks-Badge */
.floor-badge {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cw-blue);
  font-weight: 700;
  font-family: var(--font-display);
}

/* ============================================================
   Hero-Varianten – jede Leistungsseite hat eine eigene Komposition
   ============================================================ */

/* Panel rechts (Fenster) */
.page-hero--right { justify-content: flex-end; }
.page-hero--right::before {
  background: linear-gradient(190deg, rgba(6,27,51,.14) 20%, rgba(6,27,51,.55) 88%),
              linear-gradient(-80deg, rgba(6,27,51,.5), transparent 60%);
}

/* Panel als durchgehende Glasleiste unten (Boden) */
.page-hero--bar { align-items: flex-end; }
.page-hero--bar .hero-panel {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: .2rem 1.5rem;
  align-items: center;
}
.page-hero--bar .hero-panel > * { grid-column: 1; }
.page-hero--bar .hero-panel .hero-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 0;
  justify-content: flex-end;
}

/* Zentriertes schmales Panel (Gewerbe) */
.page-hero--center { justify-content: center; align-items: center; text-align: center; }
.page-hero--center .hero-panel { max-width: 620px; }
.page-hero--center .hero-kicker { margin-inline: auto; }
.page-hero--center .hero-text { margin-inline: auto; }
.page-hero--center .hero-actions { justify-content: center; }

/* Geteilter Hero ohne Vollbild (Fassade, Treppenhaus gespiegelt) */
.hero-split {
  width: min(var(--cw-shell-wide), 100% - 1.6rem);
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: stretch;
}
.hero-split .hero-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.6rem, 3.4vw, 3rem);
}
.hero-split .hero-split-text h1 { color: var(--cw-navy-950); }
.hero-split .hero-split-text p { color: var(--cw-muted); }
.hero-split .hero-split-media {
  position: relative;
  min-height: clamp(340px, 52vh, 560px);
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid rgba(255,255,255,.55);
}
.hero-split .hero-split-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-split--flip .hero-split-media { order: -1; }

/* ============================================================
   Charakter-Animationen (je Effekt genau einmal im Einsatz)
   ============================================================ */

/* 01 – Glass Refraction: nur Licht und Reflexion bewegen sich im Glas,
   die Fläche selbst bleibt stabil. Cursorposition kommt als --rx/--ry
   (-.5 … .5) aus js/main.js; mobil ersetzt der Scrollfortschritt den Cursor. */
.refract { position: relative; overflow: hidden; }
.refract::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(34% 26% at calc(50% + var(--rx, 0) * 38%) calc(45% + var(--ry, 0) * 32%),
              rgba(255,255,255,.32), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .4s;
}
.refract::before { /* schmaler Brechungs-Streifen, wandert gegenläufig zum Licht */
  content: "";
  position: absolute;
  inset: -12% -30%;
  background: linear-gradient(104deg,
    transparent 0%,
    rgba(255,255,255,.07) calc(38% - var(--rx, 0) * 16%),
    rgba(228,242,252,.16) calc(46% - var(--rx, 0) * 16%),
    rgba(255,255,255,.06) calc(54% - var(--rx, 0) * 16%),
    transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

/* 05 – Focus Cleaning: Inhalte werden nacheinander scharf */
.focus-seq .clarity-card::after { display: none; } /* kein doppelter Wisch-Effekt */
.js .focus-seq > * {
  filter: blur(5px);
  opacity: .45;
  transition: filter .9s var(--ease-glass), opacity .9s var(--ease-glass);
  transition-delay: var(--focus-delay, 0s);
}
.focus-seq > .in-focus { filter: blur(0); opacity: 1; }

/* 07 – Mikro-Tropfen auf einer Glasfläche */
.droplets { position: relative; }
.droplets .drop {
  position: absolute;
  width: 7px; height: 10px;
  border-radius: 50% 50% 58% 58%;
  background: linear-gradient(175deg, rgba(255,255,255,.75), rgba(255,255,255,.18) 70%);
  box-shadow: 0 1px 3px rgba(6,27,51,.25), inset 0 1px 1px rgba(255,255,255,.8);
  opacity: 0;
  pointer-events: none;
}
.revealed .drop, .droplets.revealed .drop {
  animation: drop-slide 7s linear infinite;
  animation-delay: var(--drop-delay, 0s);
}
@keyframes drop-slide {
  0% { opacity: 0; transform: translateY(0) scaleY(1); }
  8% { opacity: .85; }
  62% { opacity: .75; transform: translateY(46px) scaleY(1.15); }
  78% { opacity: 0; transform: translateY(78px) scaleY(1.3); }
  100% { opacity: 0; transform: translateY(78px); }
}

/* 09 – Glass Border Travel: Lichtreflex läuft an der Kante entlang */
.border-run { position: relative; }
.border-run::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--edge, 0deg),
    transparent 0deg 322deg,
    rgba(210, 236, 255, .1) 332deg,
    rgba(255,255,255,.95) 347deg,
    rgba(210, 236, 255, .1) 356deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
@property --edge {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.border-run:hover::after, .border-run:focus-within::after {
  opacity: 1;
  animation: edge-travel 1.6s linear;
}
@keyframes edge-travel {
  from { --edge: 0deg; }
  to { --edge: 360deg; }
}

/* 03 – Water Pressure Path: Wasserlinie schiebt die Schmutzschicht weg */
.pressure-reveal { position: relative; overflow: hidden; }
.pressure-reveal .pressure-grime {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 20% 15%, rgba(56, 47, 30, .5), rgba(56, 47, 30, .26) 55%, rgba(43, 37, 24, .55)),
    linear-gradient(10deg, rgba(40, 34, 22, .3), rgba(70, 60, 40, .28));
  mix-blend-mode: multiply;
  clip-path: inset(calc(var(--p, 0) * 104%) 0 0 0);
  pointer-events: none;
  z-index: 2;
}
/* (die frühere gestrichelte Wasserlinie wurde entfernt – die
   Schmutzschicht löst sich weiterhin mit dem Scroll auf) */

/* 08 – Polished Surface Light: schmale Reflexion wandert mit dem Scroll */
.polish-light { position: relative; overflow: hidden; }
.polish-light::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 26%;
  background: linear-gradient(104deg, transparent, rgba(255,255,255,.34) 48%, rgba(230,244,255,.22) 55%, transparent);
  transform: skewX(-14deg) translateX(calc(-110% + var(--p, 0) * 560%));
  pointer-events: none;
  z-index: 2;
}

/* 10 – Service Lens: transparente Linse zieht über das Bild */
.lens-stage { position: relative; }
.lens-stage .lens {
  position: absolute;
  top: calc(8% + var(--p, 0) * 58%);
  left: calc(6% + var(--p, 0) * 66%);
  width: clamp(120px, 24%, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--cw-shadow-md), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -14px 28px rgba(6,27,51,.1);
  backdrop-filter: saturate(1.45) contrast(1.18) brightness(1.06);
  -webkit-backdrop-filter: saturate(1.45) contrast(1.18) brightness(1.06);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  pointer-events: none;
  z-index: 2;
}

/* 12 – Architectural Window Grid: Glasscheiben geben das Bild frei */
.window-grid { position: relative; overflow: hidden; }
.js .window-grid .pane {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(165deg, rgba(255,255,255,.42), rgba(226,238,247,.28) 55%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-inline: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 0 30px rgba(255,255,255,.25);
  transition: transform 1.3s var(--ease-glass), opacity 1.1s var(--ease-glass);
  transition-delay: var(--pane-delay, 0s);
  z-index: 2;
}
.window-grid .pane:nth-child(1) { left: 0; width: 34%; --pane-delay: 0s; }
.window-grid .pane:nth-child(2) { left: 33%; width: 34%; --pane-delay: .14s; }
.window-grid .pane:nth-child(3) { left: 66%; width: 34%; --pane-delay: .28s; }
.window-grid.revealed .pane:nth-child(1) { transform: translateX(-104%); opacity: .6; }
.window-grid.revealed .pane:nth-child(2) { transform: translateY(-104%); opacity: .6; }
.window-grid.revealed .pane:nth-child(3) { transform: translateX(104%); opacity: .6; }

/* 13 – Surface Material Transition: Textur wird beim Scrollen sauber */
.material-shift { position: relative; overflow: hidden; }
.material-shift::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(94deg, rgba(74, 84, 66, .34) 0 3px, rgba(52, 60, 46, .16) 3px 7px, rgba(90, 98, 76, .3) 7px 12px),
    radial-gradient(120% 100% at 30% 0%, rgba(64, 72, 52, .38), rgba(46, 52, 40, .3));
  mix-blend-mode: multiply;
  opacity: calc(1 - var(--p, 0));
  pointer-events: none;
  z-index: 2;
}

/* 14 – Liquid Glass CTA: die Glasschicht schwappt beim Hover */
.btn-liquid::before {
  border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%;
  inset: -12% -6%;
  transition: transform 1.2s var(--ease-glass), opacity .5s, border-radius 1.2s var(--ease-glass);
}
.btn-liquid:hover::before, .btn-liquid:focus-visible::before, .btn-liquid:active::before {
  opacity: .35;
  transform: translate(7%, -9%) rotate(7deg) scale(1.06);
  border-radius: 52% 48% 44% 56% / 46% 58% 42% 54%;
}

/* 17 – Magnetic Label: nur die Beschriftung folgt dem Cursor minimal */
.magnetic-label { display: inline-block; transition: transform .3s var(--ease-glass); will-change: transform; }

/* 18 – Clean Trace: organische Wischkurve verbindet Inhalte */
.trace-stage { position: relative; }
.trace-stage svg.trace {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.trace-stage svg.trace path {
  fill: none;
  stroke: url(#trace-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--trace-len, 1600);
  stroke-dashoffset: calc(var(--trace-len, 1600) * (1 - var(--p, 0)));
  filter: drop-shadow(0 0 6px rgba(121, 191, 53, .35));
}
.trace-stage .media-duo { position: relative; z-index: 1; }

/* 11 – Cleaning Rhythm: Intervallpunkte pulsieren nacheinander */
.rhythm .interval-day.is-on { position: relative; }
.rhythm.revealed .interval-day.is-on {
  animation: rhythm-pulse 3.2s var(--ease-glass) infinite;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes rhythm-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(91,152,36,.3), var(--cw-inset-light); }
  12% { box-shadow: 0 8px 26px rgba(91,152,36,.55), 0 0 0 5px rgba(121,191,53,.16), var(--cw-inset-light); }
  24% { box-shadow: 0 8px 20px rgba(91,152,36,.3), var(--cw-inset-light); }
}
.rhythm-line {
  position: relative;
  height: 2px;
  margin: -0.4rem 0 1rem;
  background: linear-gradient(90deg, rgba(121,191,53,.5), rgba(47,143,212,.4));
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* Treppenhaus: Stockwerks-Bildwechsel im Sticky-Visual */
.floor-visual { position: relative; }
.floor-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease-glass);
}
.floor-visual img.is-current { opacity: 1; }
.floor-visual img:first-child { position: relative; }

/* ============================================================
   Design-Pass: Karten-Alternativen
   ============================================================ */

/* Scroll-Story (Startseite „Warum ClearWay“): große Statements statt Karten-Grid */
.story-track { position: relative; max-width: 860px; margin-inline: auto; }
.story-item {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.8rem) 0 clamp(1.6rem, 4vw, 2.8rem) clamp(4.2rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--cw-border-soft);
}
.story-item:last-child { border-bottom: 0; }
@media (min-width: 941px) {
  /* Auf breiten Bildschirmen als 3-spaltiges Raster statt einer einzelnen
     schmalen Spalte, sonst bleibt viel zu viel Fläche links/rechts leer */
  .story-track {
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
  }
  .story-item { padding-block: clamp(1.8rem, 2.6vw, 2.4rem); }
  .story-item:nth-last-child(-n+3) { border-bottom: 0; }
}
.story-num {
  position: absolute;
  left: 0;
  top: clamp(1.2rem, 3.4vw, 2.2rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
  background: linear-gradient(160deg, var(--cw-green-bright), var(--cw-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .85;
}
.story-item h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-bottom: .35rem; }
.story-item p { color: var(--cw-muted); margin: 0; max-width: 56ch; }

/* Marken-Karte (Über uns): echte Wortmarke auf dunklem Markengrund */
.brand-panel {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 36vh, 380px);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background:
    radial-gradient(30rem 20rem at 85% -12%, rgba(47,143,212,.35), transparent 60%),
    radial-gradient(22rem 16rem at 4% 112%, rgba(121,191,53,.25), transparent 55%),
    linear-gradient(155deg, var(--cw-navy-900), var(--cw-navy-950));
}
.brand-panel img { width: min(340px, 78%); height: auto; }

/* Statement-Spine (Über uns): Einträge wechselseitig an einer Glaslinie */
.spine { position: relative; max-width: 980px; margin-inline: auto; }
.spine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, rgba(121,191,53,.55) 12%, rgba(47,143,212,.5) 88%, transparent);
  border-radius: 2px;
}
.spine-item {
  position: relative;
  width: calc(50% - 2.4rem);
  padding: 1.1rem 0;
}
.spine-item:nth-child(odd) { margin-left: 0; text-align: right; }
.spine-item:nth-child(even) { margin-left: calc(50% + 2.4rem); }
.spine-item::after {  /* Glaspunkt auf der Linie */
  content: "";
  position: absolute;
  top: 1.75rem;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.15) 60%), rgba(121,191,53,.35);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 5px rgba(121,191,53,.12), var(--cw-shadow-sm);
}
.spine-item:nth-child(odd)::after { right: -2.4rem; translate: 50% 0; }
.spine-item:nth-child(even)::after { left: -2.4rem; translate: -50% 0; }
.spine-item h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.spine-item p { color: var(--cw-muted); font-size: .97rem; margin: 0; }

/* Register-Zeilen (Fassadentypen): Spalten mit feinen Glaslinien statt Karten */
.ledger { border-top: 1px solid var(--cw-border-soft); }
.ledger-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.2rem, 2.6vw, 1.8rem) .4rem;
  border-bottom: 1px solid var(--cw-border-soft);
  align-items: start;
  transition: background-color .3s;
}
.ledger-row:hover { background: rgba(255,255,255,.35); }
.ledger-row h3 { margin: 0; font-size: 1.15rem; }
.ledger-row .ledger-tag {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: .3rem;
}
.ledger-row p { margin: 0; color: var(--cw-muted); max-width: 66ch; }

/* Schlanke Link-Zeile statt Related-Cards */
.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  padding: 1rem 1.4rem;
  border-radius: 999px;
}
.link-row .link-row-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--cw-navy-950);
  margin: 0;
}
.link-row a { white-space: nowrap; }
.link-row .sep { color: var(--cw-border-soft); }

/* Kontakt-Infoleiste statt drei Karten */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
}
.contact-strip > div {
  padding: 1.4rem 1.6rem;
  border-right: 1px solid var(--cw-border-soft);
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.contact-strip > div:last-child { border-right: 0; }
.contact-strip .clarity-icon { flex: none; margin: 0; }
.contact-strip .strip-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cw-navy-950);
  font-size: 1.02rem;
  margin-bottom: .2rem;
}
.contact-strip p { margin: 0; font-size: .93rem; color: var(--cw-muted); }

/* Kompakte horizontale Schritt-Leiste */
.step-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.4rem;
  position: relative;
}
.step-line::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue-bright));
  opacity: .4;
}
.step-line > div { position: relative; padding-top: 3.4rem; }
.step-line .step-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cw-navy-900);
}
.step-line h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.step-line p { font-size: .95rem; color: var(--cw-muted); margin: 0; }

/* ============================================================
   Kontaktformular („ClearWay Glass“-Form)
   ============================================================ */
.contact-form-wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.cw-form {
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.cw-form fieldset { border: 0; padding: 0; margin: 0; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}
.form-field { display: flex; flex-direction: column; gap: .35rem; }
.form-field.wide { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--cw-navy-950);
}
.form-field label .opt { font-weight: 500; color: var(--cw-muted); font-size: .8rem; }
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--cw-text);
  padding: .8rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--cw-border-soft);
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.18) 55%), rgba(255,255,255,.42);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  box-shadow: var(--cw-inset-light);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
  width: 100%;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: rgba(91, 152, 36, .65);
  background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 3px rgba(121, 191, 53, .18), var(--cw-inset-light);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: rgba(192, 57, 43, .6); }
.field-error {
  display: none;
  font-size: .84rem;
  color: #a63325;
}
.form-field.has-error .field-error { display: block; }
.form-consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 1.1rem 0;
  font-size: .92rem;
  color: var(--cw-muted);
}
.form-consent input {
  width: 1.25rem; height: 1.25rem;
  margin-top: .15rem;
  accent-color: var(--cw-green);
  flex: none;
}
.form-status {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--cw-radius-md);
  font-size: .95rem;
}
.form-status.is-visible { display: block; }
.form-status.status-ok {
  background: rgba(121, 191, 53, .14);
  border: 1px solid rgba(91, 152, 36, .4);
  color: #2f5411;
}
.form-status.status-info {
  background: rgba(47, 143, 212, .1);
  border: 1px solid rgba(47, 143, 212, .35);
  color: var(--cw-navy-900);
}
.form-status.status-error {
  background: rgba(192, 57, 43, .1);
  border: 1px solid rgba(192, 57, 43, .35);
  color: #7c2114;
}
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Neue Effekte (Design-Pass)
   ============================================================ */

/* 08 – Frosted Text Reveal: Headline hinter Milchglas wird klar */
.frost-text {
  position: relative;
  display: inline-block;
}
.js .frost-text::after {
  content: "";
  position: absolute;
  inset: -6% -2%;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(240,246,251,.35));
  border-radius: 10px;
  transition: opacity 1.2s var(--ease-glass) .2s;
  pointer-events: none;
}
.frost-text.revealed::after { opacity: 0; }

/* 09 – Depth Zoom: Bild zoomt minimal, der Glasrahmen bleibt stabil */
.depth-zoom { overflow: hidden; }
.depth-zoom img {
  transform: scale(calc(1.12 - var(--p, 0) * 0.12));
  transform-origin: center 40%;
  will-change: transform;
}

/* 12 – Vertical Light Pass: Lichtreflex fährt vertikal über die Fläche */
.v-light { position: relative; overflow: hidden; }
.v-light::after {
  content: "";
  position: absolute;
  inset: 0 -20%;
  height: 34%;
  top: calc(-34% + var(--p, 0) * 168%);
  background: linear-gradient(178deg, transparent, rgba(255,255,255,.22) 45%, rgba(230,244,255,.16) 55%, transparent);
  transform: skewY(-8deg);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   Seitenarchitekturen – jede Leistungsseite eigene Komposition
   ============================================================ */

/* A · FENSTER: Vollbild-Hero, Headline überlappt die Bildkante */
.hero-canvas { position: relative; padding-top: 4.6rem; }
.hero-canvas .canvas-media {
  position: relative;
  height: clamp(400px, 62vh, 620px);
  overflow: hidden;
}
.hero-canvas .canvas-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-canvas .canvas-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,27,51,.16), transparent 30%, rgba(238,243,248,.65) 64%, var(--cw-bg) 90%);
}
.hero-canvas .canvas-chip {
  position: absolute;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .88rem;
  color: var(--cw-navy-950);
  z-index: 3;
}
.hero-canvas .canvas-text {
  position: relative;
  margin-top: clamp(-6.5rem, -10vw, -3.5rem);
  z-index: 4;
  max-width: 780px;
}
.hero-canvas .canvas-text h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* Statement-Band: eine große typografische Aussage */
.statement-band { padding-block: calc(var(--section-pad) * .7); }
.statement-band p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--cw-navy-950);
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
.statement-band .statement-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--cw-muted);
  max-width: 58ch;
  margin-top: 1rem;
  letter-spacing: 0;
}

/* Asymmetrische 3er-Collage */
.collage-asym {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.1rem;
}
.collage-asym figure:nth-child(1) { grid-row: 1 / 3; }
.collage-asym figure:nth-child(2) { margin-top: 2.2rem; }
.collage-asym figure:nth-child(3) { margin-bottom: 2.2rem; }

/* Typografische Leistungsliste (01–05, keine Cards) */
.type-list { max-width: 880px; }
.type-list li {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--cw-border-soft);
  margin: 0;
  list-style: none;
}
.type-list li:last-child { border-bottom: 0; }
.type-list .tl-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--cw-blue);
  opacity: .55;
}
.type-list .tl-term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  color: var(--cw-navy-950);
}
.type-list .tl-note { color: var(--cw-muted); font-size: .98rem; margin: .2rem 0 0; }

/* B · HOCHDRUCK: Split-Screen-Hero, eckig und kraftvoll */
.hero-power {
  display: grid;
  grid-template-columns: minmax(380px, 44%) 1fr;
  min-height: clamp(460px, 74vh, 700px);
  margin-top: 0;
}
.hero-power .power-text {
  background:
    radial-gradient(50rem 30rem at -10% -20%, rgba(47,143,212,.25), transparent 60%),
    linear-gradient(160deg, var(--cw-navy-950), var(--cw-navy-900));
  color: #e8f1f9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.4rem, 8vw, 7rem) clamp(1.4rem, 4vw, 3.6rem) clamp(2.4rem, 4vw, 3.6rem);
}
.hero-power .power-text h1 { color: #fff; font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.hero-power .power-text p { color: #c3d5e6; }
.hero-power .power-media { position: relative; overflow: hidden; }
.hero-power .power-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Randlose Bildfläche */
.fullbleed { position: relative; width: 100%; overflow: hidden; padding-block: 0; }
section.fullbleed { padding-block: 0; }
.fullbleed img { width: 100%; height: clamp(340px, 58vh, 560px); object-fit: cover; display: block; }
.fullbleed .media-caption { left: auto; right: 1.2rem; bottom: 1.2rem; max-width: 320px; }

/* Material-Umschalter (horizontale Flächen statt Cards) */
.material-tabs { max-width: 1040px; margin-inline: auto; }
.material-tabs [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--cw-border-soft);
}
.material-tabs [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: .8rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--cw-muted);
  cursor: pointer;
  margin-bottom: -1px;
}
.material-tabs [role="tab"][aria-selected="true"] {
  color: var(--cw-navy-950);
  border-bottom-color: var(--cw-green);
}
.material-stage {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding-top: 1.6rem;
}
.material-stage img { border-radius: var(--cw-radius-lg); box-shadow: var(--cw-shadow-md); width: 100%; height: 320px; object-fit: cover; }

/* FAQ-Varianten */
.faq-side {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 2fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.faq-side .faq-side-head { position: sticky; top: 6.4rem; }
.faq-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  align-items: start;
}
.faq-flow { max-width: 760px; }
.faq-flow .qa { padding: 1.1rem 0; border-bottom: 1px dashed var(--cw-border-soft); }
.faq-flow .qa:last-child { border-bottom: 0; }
.faq-flow .qa h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.faq-flow .qa h3::before { content: "— "; color: var(--cw-green); }
.faq-flow .qa p { color: var(--cw-muted); margin: 0; }

/* C · TREPPENHAUS: Etagen-Bänder mit Führungslinie */
.floor-levels { position: relative; }
.floor-levels::before {
  content: "";
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(47,143,212,.45), rgba(121,191,53,.5));
  border-radius: 2px;
}
.floor-level {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2.4rem) clamp(3rem, 7vw, 6rem);
}
.floor-level:nth-child(even) .fl-media { order: -1; }
.floor-level .fl-mark {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  top: 50%;
  translate: -50% -50%;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  color: var(--cw-navy-900);
  z-index: 2;
}
.floor-level .fl-media {
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-md);
  border: 1px solid rgba(255,255,255,.5);
}
.floor-level .fl-media img { width: 100%; height: clamp(220px, 30vw, 320px); object-fit: cover; display: block; }
.floor-level h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.floor-level p { color: var(--cw-muted); margin: 0; }

/* 52-Wochen-Punktzeile */
.week-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1.2rem 0 .6rem;
}
.week-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(157, 183, 208, .4);
}
.week-dots span.on {
  background: linear-gradient(150deg, var(--cw-green-bright), var(--cw-green));
  box-shadow: 0 0 0 2px rgba(121,191,53,.18);
}
.week-note { font-size: .88rem; color: var(--cw-muted); }

/* D · GEWERBE: 60/40-Hero */
.hero-office {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  width: min(var(--cw-shell-wide), 100% - 1.6rem);
  margin: 5.6rem auto 0;
  align-items: stretch;
}
.hero-office .office-media {
  border-radius: var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  min-height: clamp(360px, 52vh, 540px);
  position: relative;
}
.hero-office .office-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-office .office-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.hero-office .office-info h1 { font-size: clamp(1.9rem, 3vw, 2.7rem); }

/* Planungsfluss: 4 Stationen horizontal */
.plan-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: flow;
}
.plan-flow > div {
  position: relative;
  padding: 1.2rem 1rem 0 0;
  border-top: 3px solid var(--cw-border-soft);
}
.plan-flow > div::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: calc(28% + var(--p, 0) * 72%);
  height: 3px;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue));
}
.plan-flow .pf-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: .35rem;
}
.plan-flow h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.plan-flow p { font-size: .93rem; color: var(--cw-muted); margin: 0; }

/* Bildfläche mit schwebenden Glas-Labels */
.label-scape { position: relative; border-radius: var(--cw-radius-lg); overflow: hidden; box-shadow: var(--cw-shadow-lg); }
.label-scape img { width: 100%; height: clamp(360px, 56vh, 540px); object-fit: cover; display: block; }
.label-scape .scape-label {
  position: absolute;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: #fff;
  background: rgba(9,33,60,.44);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
}

/* Groß-Statement links / Text rechts */
.big-stat {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) 1.1fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.big-stat .bs-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1;
  background: linear-gradient(150deg, var(--cw-navy-900), var(--cw-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.big-stat .bs-figure small {
  display: block;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--cw-muted);
  -webkit-text-fill-color: var(--cw-muted);
  font-weight: 600;
  margin-top: .4rem;
}

/* E · AUSSENPFLEGE: offener Hero, Text im Bild */
.hero-open { position: relative; height: clamp(440px, 68vh, 660px); overflow: hidden; }
.hero-open img { width: 100%; height: 100%; object-fit: cover; }
.hero-open::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 30%, rgba(6, 27, 51, .58) 85%);
}
.hero-open .open-text {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.4rem, 4vw, 3rem);
  z-index: 2;
}
.hero-open .open-text h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 18px rgba(6,27,51,.5); }
.hero-open .open-text p { color: #e2ecf5; max-width: 52ch; text-shadow: 0 1px 10px rgba(6,27,51,.5); }

/* Organische Collage */
.collage-organic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.collage-organic figure { margin: 0; position: relative; overflow: hidden; box-shadow: var(--cw-shadow-md); }
.collage-organic figure:nth-child(1) { grid-column: 1 / 7; border-radius: 32px 90px 32px 32px; }
.collage-organic figure:nth-child(2) { grid-column: 7 / 13; margin-top: 3rem; border-radius: 80px 28px 28px 70px; aspect-ratio: 16 / 10; }
.collage-organic figure:nth-child(3) { grid-column: 1 / 6; margin-top: -1.2rem; border-radius: 28px 28px 80px 28px; aspect-ratio: 4 / 3.4; }
.collage-organic figure:nth-child(4) { grid-column: 6 / 13; border-radius: 40px; }
.collage-organic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Weg-Stationen (Leistungen entlang eines Pfads) */
.path-stops { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; }
.path-stops .stop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cw-navy-900);
}
.path-stops .stop::before {
  content: "";
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--cw-green-bright);
}
.path-stops svg { color: var(--cw-muted); flex: none; }

/* F · FASSADE: monumentale Headline außerhalb des Grids */
.hero-mono { position: relative; padding-top: 5.4rem; }
.hero-mono .mono-media {
  height: clamp(380px, 56vh, 580px);
  overflow: hidden;
  border-radius: 0 0 clamp(18px, 3vw, 38px) clamp(18px, 3vw, 38px);
  position: relative;
}
.hero-mono .mono-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-mono .mono-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,27,51,.2), transparent 38%, rgba(238,243,248,.4) 76%, var(--cw-bg) 97%);
}
.hero-mono h1 {
  position: relative;
  z-index: 2;
  margin: -1.4rem 0 0 0;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.04;
  max-width: 13ch;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 26px rgba(238,243,248,.75);
}
.hero-mono .mono-sub { max-width: 56ch; color: var(--cw-muted); margin-top: 1rem; }

/* Zwei versetzte Großbilder */
.offset-duo {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  align-items: start; /* Figuren nicht auf Zellenhöhe strecken – Captions bleiben am Bild */
}
.offset-duo figure { margin: 0; border-radius: var(--cw-radius-lg); overflow: hidden; box-shadow: var(--cw-shadow-lg); position: relative; }
.offset-duo figure:nth-child(1) { grid-column: 1 / 8; grid-row: 1; }
.offset-duo figure:nth-child(2) { grid-column: 6 / 13; grid-row: 1; margin-top: clamp(8rem, 16vw, 13rem); z-index: 2; border: 4px solid var(--cw-bg); }
.offset-duo img { width: 100%; height: clamp(280px, 36vw, 460px); object-fit: cover; display: block; }

/* G · TERRASSE: Nahaufnahme-Hero mit Eck-Karte */
.hero-close { position: relative; padding-top: 4.6rem; }
.hero-close .close-media { height: clamp(420px, 62vh, 620px); overflow: hidden; position: relative; }
.hero-close .close-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-close .close-card {
  position: absolute;
  right: clamp(.8rem, 4vw, 4rem);
  bottom: clamp(.8rem, 3vw, 2.6rem);
  max-width: 460px;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  z-index: 2;
}
.hero-close .close-card h1 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: .4rem; }
.hero-close .close-card p { margin: 0 0 .9rem; color: var(--cw-muted); font-size: .98rem; }

/* Material-Vollbreiten-Streifen */
.material-strips { border-top: 1px solid var(--cw-border-soft); }
.material-strip {
  display: grid;
  grid-template-columns: minmax(200px, .7fr) 1.3fr;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--cw-border-soft);
}
.material-strip .ms-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  color: var(--cw-navy-950);
  opacity: .92;
}
.material-strip:nth-child(2) .ms-name { color: var(--cw-blue); }
.material-strip:nth-child(3) .ms-name { color: var(--cw-green); }
.material-strip p { margin: 0; color: var(--cw-muted); max-width: 62ch; }

/* Diagonaler Bild-Text-Split */
.diag-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 0;
}
.diag-split .diag-media {
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
  border-radius: var(--cw-radius-lg) 0 0 var(--cw-radius-lg);
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
}
.diag-split .diag-media img { width: 100%; height: clamp(300px, 44vw, 480px); object-fit: cover; display: block; }
.diag-split .diag-text { padding: clamp(1rem, 3vw, 2.4rem) 0 clamp(1rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.4rem); }

/* Nummerierte Fakten-Reihe (horizontal, ohne Boxen) */
.num-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
}
.num-facts .nf {
  border-top: 3px solid var(--cw-green);
  padding-top: .9rem;
}
.num-facts .nf:nth-child(2) { border-top-color: var(--cw-blue); }
.num-facts .nf:nth-child(3) { border-top-color: var(--cw-navy-900); }
.num-facts .nf-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--cw-navy-950);
  opacity: .35;
}
.num-facts h3 { font-size: 1.1rem; margin: .2rem 0 .35rem; }
.num-facts p { font-size: .95rem; color: var(--cw-muted); margin: 0; }

/* H · BODEN: niedriger Breitband-Hero + Einsatzbereiche-Raster
   (vollständig lesbar – kein wanderndes Band) */
.page-hero--low { min-height: clamp(240px, 36vh, 340px); }
.floor-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(.9rem, 2vw, 1.3rem);
}
.floor-track .ft-item {
  padding: 1.15rem 1.3rem 1.2rem;
  border-top: 3px solid var(--cw-blue-bright);
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.24));
  border-radius: 0 0 var(--cw-radius-md) var(--cw-radius-md);
  box-shadow: var(--cw-shadow-sm);
  transition: transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass);
}
.floor-track .ft-item:nth-child(even) { border-top-color: var(--cw-green-bright); }
.floor-track .ft-item:hover { transform: translateY(-3px); box-shadow: var(--cw-shadow-md); }
.floor-track h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.floor-track p { font-size: .9rem; color: var(--cw-muted); margin: 0; }

/* Redaktionelle Zweispalter */
.editorial-cols {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  column-rule: 1px solid var(--cw-border-soft);
  max-width: 1000px;
}
.editorial-cols p { break-inside: avoid-column; }
.editorial-cols h3 { break-after: avoid-column; font-size: 1.1rem; }

/* Dunkles CTA-Band (Variante ohne Bild) */
.cta-band {
  background:
    radial-gradient(46rem 26rem at 88% -20%, rgba(47,143,212,.28), transparent 60%),
    radial-gradient(40rem 24rem at 6% 120%, rgba(121,191,53,.2), transparent 55%),
    linear-gradient(160deg, var(--cw-navy-950), var(--cw-navy-900));
  color: #e8f1f9;
  padding-block: clamp(2.8rem, 6vw, 4.6rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c6d7e7; }
.cta-band .shell { display: grid; grid-template-columns: 1.3fr auto; gap: 1.6rem; align-items: center; }

/* KONTAKT: kompakter Kopf + Formular als dominantes Element */
.contact-head {
  padding: 7rem 0 1rem;
}
.contact-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) 1.2fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.contact-info { position: sticky; top: 6.2rem; display: grid; gap: 1.2rem; }
.contact-info .ci-block { border-left: 3px solid var(--cw-green); padding-left: 1.1rem; }
.contact-info .ci-block.blue { border-left-color: var(--cw-blue); }
.contact-info .ci-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cw-muted);
  margin-bottom: .2rem;
}
.contact-info .ci-value { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--cw-navy-950); margin: 0; }
.contact-info .ci-note { font-size: .9rem; color: var(--cw-muted); margin: .2rem 0 0; }

/* ============================================================
   Premium-Pass: Hero-Choreografie, Signatur-Momente, Microinteractions
   ============================================================ */

/* --- Startseiten-Hero: choreografierter Einstieg statt Standard-Fade --- */
.hero-media img {
  transform: scale(1.07);
  animation: hero-depth 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-depth {
  from { transform: scale(1.07) translate(0, 0); }
  to   { transform: scale(1.13) translate(-1.8%, -1.2%); }
}
.hero-panel { animation: hero-panel-in 1s var(--ease-glass) .1s backwards; }
@keyframes hero-panel-in {
  from { opacity: 0; transform: translateY(30px); }
}
.hero-panel .hero-kicker { animation: rise-in .8s var(--ease-glass) .45s backwards; }
.hero-panel h1 { animation: headline-wipe 1.15s var(--ease-glass) .6s backwards; }
.hero-panel .hero-text { animation: rise-in .8s var(--ease-glass) .95s backwards; }
.hero-panel .hero-actions { animation: rise-in .8s var(--ease-glass) 1.1s backwards; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
}
/* Headline wird wie mit dem Abzieher „klar gezogen“ */
@keyframes headline-wipe {
  0%   { opacity: 0; clip-path: inset(-2% 92% -6% 0); filter: blur(4px); }
  45%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(-2% -4% -6% 0); filter: blur(0); }
}

/* --- 02 Squeegee-Reveal (nur Fensterreinigung): Hero hinter Milchglas,
       eine Wischkante zieht die Scheibe einmalig klar --- */
.squeegee-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.squeegee-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(255,255,255,.44), rgba(224,235,243,.28));
  backdrop-filter: blur(9px) brightness(1.04);
  -webkit-backdrop-filter: blur(9px) brightness(1.04);
  animation: veil-clear 2s var(--ease-glass) .4s forwards;
}
@keyframes veil-clear {
  to { clip-path: inset(0 0 0 100%); }
}
.squeegee-veil::after { /* die Wischkante selbst */
  content: "";
  position: absolute;
  top: -4%; bottom: -4%;
  left: 0;
  width: 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.95) 30%, rgba(255,255,255,.95) 70%, rgba(255,255,255,.05));
  box-shadow: 0 0 26px rgba(255,255,255,.95), 0 0 60px rgba(210,236,255,.5);
  transform: skewX(-3deg);
  opacity: 0;
  animation: veil-edge 2s var(--ease-glass) .4s forwards;
}
@keyframes veil-edge {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

/* --- 07/18 Teamfoto: Bild bewegt sich minimal im stabilen Glasrahmen,
       darüber eine kleine echte Detailaufnahme (Inhaber) --- */
.parallax-crop { overflow: hidden; }
.parallax-crop > img {
  transform: translateY(calc((var(--p, .5) - .5) * -7%)) scale(1.1);
  will-change: transform;
}
.photo-inset {
  position: absolute;
  left: clamp(.8rem, 3vw, 1.6rem);
  bottom: clamp(.8rem, 3vw, 1.6rem);
  width: clamp(130px, 30%, 200px);
  margin: 0;
  border-radius: var(--cw-radius-md);
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: var(--cw-shadow-lg);
  rotate: -2.4deg;
  transition: rotate .45s var(--ease-glass), transform .45s var(--ease-glass);
}
.photo-inset img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.1; display: block; }
.photo-inset figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .28rem .6rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 600;
  color: #f0f6fb;
  background: linear-gradient(180deg, transparent, rgba(6,27,51,.72));
}
.team-photo:hover .photo-inset { rotate: 0deg; transform: translateY(-3px); }

/* --- 19 Reflection Exit: Lichtreflex im Abschluss-CTA wandert
       minimal entgegen der Scrollrichtung --- */
.exit-sheen { overflow: hidden; }
.exit-sheen::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 50%, transparent 66%);
  transform: translateX(calc((1 - var(--p, 0)) * 46%)) skewX(-8deg);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- Vorher/Nachher: Medien-Wechsel weich blenden --- */
.ba-slider img { transition: opacity .3s ease; }

/* --- Trio-Bilder einheitlich beschneiden (auch Hochformate) --- */
.media-trio .img-frame img { aspect-ratio: 4 / 3.2; object-fit: cover; }

/* ============================================================
   Reveal-Familie: unterschiedliche Aufdeck-Arten je Inhaltstyp
   (Basis [data-reveal] = Fade-Lift; Varianten überschreiben gezielt)
   ============================================================ */

/* Mask Reveal: Inhalt wird über eine Clip-Maske von unten aufgedeckt */
.js [data-reveal="mask"] {
  transform: none;
  clip-path: inset(18% 0 0 0);
  transition: clip-path .95s var(--ease-glass), opacity .6s var(--ease-glass);
  transition-delay: var(--reveal-delay, 0s);
}
.js .revealed[data-reveal="mask"] { clip-path: inset(0 0 0 0); }

/* Blur to Clear: startet minimal unscharf und wird scharf */
.js [data-reveal="blur"] {
  transform: translateY(12px);
  filter: blur(7px);
  transition: opacity .8s var(--ease-glass), transform .8s var(--ease-glass), filter .9s var(--ease-glass);
  transition-delay: var(--reveal-delay, 0s);
}
.js .revealed[data-reveal="blur"] { filter: blur(0); }

/* Vertical Lift: nur 12px Hub, für ruhige Inhalte */
.js [data-reveal="lift"] { transform: translateY(12px); }

/* Drift Reveal: Richtung pro Element über --from-x/--from-y steuerbar */
.js [data-reveal="drift"] {
  transform: translate(var(--from-x, 0px), var(--from-y, 26px)) scale(.985);
  filter: blur(5px);
  transition: opacity .7s var(--ease-glass), transform .7s var(--ease-glass), filter .8s var(--ease-glass);
  transition-delay: var(--reveal-delay, 0s);
}
.js .revealed[data-reveal="drift"] { filter: blur(0); transform: none; }

/* Frost Reveal: Inhalt liegt hinter Milchglas, das sich beim Eintritt löst */
.js [data-reveal="frost"] { opacity: 1; transform: none; position: relative; }
.js [data-reveal="frost"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.55), rgba(226,236,244,.38));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 1.1s var(--ease-glass) .15s;
  pointer-events: none;
}
.js .revealed[data-reveal="frost"]::after { opacity: 0; }

/* Horizontal Reveal: von links aufgedeckt (Bilder) */
.js [data-reveal="curtain"] {
  transform: none;
  clip-path: inset(0 82% 0 0);
  transition: clip-path 1.05s var(--ease-glass), opacity .5s;
  transition-delay: var(--reveal-delay, 0s);
}
.js .revealed[data-reveal="curtain"] { clip-path: inset(0 0 0 0); }

/* Kleine Label-Linie: zeichnet sich, sobald die Section erscheint */
.js [data-reveal] .eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-glass) .15s;
}
.js .revealed[data-reveal] .eyebrow::before { transform: scaleX(1); }

/* ============================================================
   Scroll-Linien (jede Linie hat eine eigene Rolle)
   ============================================================ */

/* D – Underline Travel: Linie unter einer großen Headline wächst mit dem Scroll */
.h-underline { position: relative; display: inline-block; padding-bottom: .18em; }
.h-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue-bright));
  transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--p, 0) * 1.35 - .15), 1));
}

/* „Warum ClearWay“: redaktioneller Aufbau ohne Linie.
   Die große Zahl steht zuerst nur als Kontur und füllt sich beim Eintritt
   von unten mit dem Marken-Verlauf; Überschrift und Text schieben sich
   abwechselnd von links bzw. rechts dahinter ins Layout. */
.js [data-reveal="story"] { opacity: 1; transform: none; }
.js [data-reveal="story"] .story-num {
  -webkit-text-stroke: 1.5px rgba(16, 58, 107, .38);
  background-size: 100% 0%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .85s var(--ease-glass) .08s;
}
.js .revealed[data-reveal="story"] .story-num { background-size: 100% 100%; }
.js [data-reveal="story"] h3 {
  opacity: 0;
  transform: translateX(-30px);
  filter: blur(4px);
  transition: opacity .6s var(--ease-glass) .18s, transform .6s var(--ease-glass) .18s, filter .7s var(--ease-glass) .18s;
}
.js [data-reveal="story"] p {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .6s var(--ease-glass) .32s, transform .6s var(--ease-glass) .32s;
}
.js [data-reveal="story"]:nth-child(even) h3 { transform: translateX(30px); }
.js [data-reveal="story"]:nth-child(even) p { transform: translateX(18px); }
.js [data-reveal="story"]:last-child h3 { transform: translateY(22px) scale(.98); }
.js .revealed[data-reveal="story"] h3,
.js .revealed[data-reveal="story"] p { opacity: 1; transform: none; filter: none; }

/* Service Path (Fenster-Leistungsliste): Linie läuft die Liste hinunter
   und „aktiviert“ die Nummern, die sie passiert hat */
.type-list.service-path { position: relative; padding-left: 1.6rem; }
.type-list.service-path::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem; bottom: .4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--cw-border-soft);
}
.type-list.service-path::after {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem;
  width: 2px;
  height: calc(100% - .8rem);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cw-blue-bright), var(--cw-green-bright));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  box-shadow: 0 0 12px rgba(47,143,212,.4);
}
.type-list.service-path .tl-num { transition: color .5s, opacity .5s; }
.type-list.service-path li { --idx: 0; }
.type-list.service-path li:nth-child(1) { --idx: 0; }
.type-list.service-path li:nth-child(2) { --idx: 1; }
.type-list.service-path li:nth-child(3) { --idx: 2; }
.type-list.service-path li:nth-child(4) { --idx: 3; }
.type-list.service-path li:nth-child(5) { --idx: 4; }
.type-list.service-path li { position: relative; }
.type-list.service-path li::before { /* Knoten auf der Linie */
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 1.6rem;
  translate: calc(-50% + 1px) 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cw-bg);
  border: 2px solid var(--cw-border-soft);
  transition: border-color .4s, background-color .4s, box-shadow .4s;
}
/* aktiv, sobald die Linie den Knoten erreicht (--p wächst über die Liste) */
.type-list.service-path li.is-passed::before {
  border-color: var(--cw-green);
  background: var(--cw-green-bright);
  box-shadow: 0 0 0 4px rgba(121,191,53,.18);
}
.type-list.service-path li.is-passed .tl-num { color: var(--cw-green); opacity: 1; }

/* Border Draw (Kontakt-Formular): Rahmen zeichnet sich beim Eintritt */
.border-draw { position: relative; }
.border-draw::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 210deg,
    var(--cw-green-bright) 0turn,
    var(--cw-blue-bright) .45turn,
    rgba(255,255,255,.9) .75turn,
    var(--cw-green-bright) 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.border-draw.revealed::after {
  animation: border-draw-in 1.6s var(--ease-glass) .2s forwards;
}
@keyframes border-draw-in {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  70% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: .35; clip-path: inset(0 0 0 0); }
}

/* ============================================================
   Filmstreifen „Aus echten Einsätzen“: driftet gegen die Scrollrichtung
   ============================================================ */
.filmstrip-wrap { overflow: hidden; }
.filmstrip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem);
  align-items: end;
}
.filmstrip figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: var(--cw-shadow-md);
  border: 1px solid rgba(255,255,255,.55);
}
/* bewusst unterschiedliche Formate gegen den Raster-Look – die Spannen
   summieren sich auf 12, damit nichts aus dem Contentbereich läuft */
.filmstrip figure:nth-child(1) { grid-column: span 3; aspect-ratio: 3 / 4;   border-radius: 18px; }
.filmstrip figure:nth-child(2) { grid-column: span 4; aspect-ratio: 4 / 3;   border-radius: 26px 26px 90px 26px; margin-bottom: 2.2rem; }
.filmstrip figure:nth-child(3) { grid-column: span 2; aspect-ratio: 4 / 5.4; border-radius: 999px 999px 22px 22px; }
.filmstrip figure:nth-child(4) { grid-column: span 3; aspect-ratio: 4 / 3.4; border-radius: 22px 80px 22px 22px; margin-bottom: 2.8rem; }
/* Nach dem Reveal: Bilder driften minimal unterschiedlich mit dem Scroll */
.filmstrip img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateY(calc((var(--p, .5) - .5) * var(--drift, 0px))) scale(var(--zoom, 1.06));
  transition: transform .8s var(--ease-glass);
  will-change: transform;
}
.filmstrip figure:hover img { --zoom: 1.1; }
.filmstrip figcaption {
  position: absolute;
  left: .7rem; right: .7rem; bottom: .7rem;
  padding: .4rem .8rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: #eef5fb;
  background: rgba(9,33,60,.5);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(var(--cw-blur-soft));
  -webkit-backdrop-filter: blur(var(--cw-blur-soft));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-glass), transform .45s var(--ease-glass);
}
.filmstrip figure:hover figcaption,
.filmstrip figure:focus-within figcaption { opacity: 1; transform: none; }
@media (hover: none) {
  .filmstrip figcaption { opacity: 1; transform: none; }
}

/* ============================================================
   Hero-Scroll-Effekte der Unterseiten
   ============================================================ */

/* Bild atmet minimal mit dem Scroll (Fenster-, Außenpflege-Hero) */
.scroll-zoom img {
  transform: scale(calc(1 + var(--p, 0) * 0.05));
  transform-origin: center 30%;
  will-change: transform;
}

/* Treppenhaus: vertikale Hero-Komposition – Text oben links über dem
   hochformatigen Bild, Leitlinie führt in den Rundgang */
.hero-stairs {
  position: relative;
  width: min(var(--cw-shell-wide), 100% - 1.6rem);
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: minmax(300px, 46%) 1fr;
  align-items: start;
}
.hero-stairs .stairs-media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: clamp(430px, 66vh, 640px);
  border-radius: var(--cw-radius-lg) var(--cw-radius-lg) var(--cw-radius-lg) 120px;
  overflow: hidden;
  box-shadow: var(--cw-shadow-lg);
  border: 1px solid rgba(255,255,255,.5);
}
.hero-stairs .stairs-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-stairs .stairs-text {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin: clamp(1.2rem, 4vw, 3rem) clamp(-4rem, -6vw, -6rem) 0 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.hero-stairs .stairs-guide {
  position: absolute;
  left: clamp(1.4rem, 3.5vw, 3rem);
  bottom: -3.4rem;
  width: 2px;
  height: clamp(4rem, 9vh, 6.5rem);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cw-blue-bright), rgba(121,191,53,.8));
  z-index: 3;
}
/* Treppenstufen-Ornament im Hero */
.hero-stairs .stairs-steps {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: clamp(120px, 16vw, 200px);
  aspect-ratio: 1.35;
  pointer-events: none;
  z-index: 2;
  opacity: .9;
}

/* ============================================================
   Unterseiten-Heroes: Einzugs-Choreografie + Scroll-Kopplung
   (jede Seite mit eigener Signatur – nichts steht einfach nur da)
   ============================================================ */

/* Gestaffelter Einzug: Kicker → Headline (Abzieher-Wipe) → Text → CTA */
.stage-in > * { animation: rise-in .75s var(--ease-glass) backwards; }
.stage-in > *:nth-child(1) { animation-delay: .15s; }
.stage-in > *:nth-child(2) { animation-delay: .32s; }
.stage-in > *:nth-child(3) { animation-delay: .5s; }
.stage-in > *:nth-child(4) { animation-delay: .66s; }
.stage-in > *:nth-child(5) { animation-delay: .8s; }
.stage-in > h1 { animation-name: headline-wipe; animation-duration: 1.05s; }

/* Horizontaler Lichtzug, direkt an den Scrollfortschritt gekoppelt */
.h-sheen::after {
  content: "";
  position: absolute;
  top: -10%; bottom: -10%;
  width: 30%;
  left: calc(-32% + var(--p, 0) * 164%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.26) 50%, transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  z-index: 2;
}

/* FENSTER: Info-Chips schweben herein und atmen danach ganz leicht */
.hero-canvas .canvas-chip {
  animation: chip-in .8s var(--ease-glass) .55s backwards,
             chip-float 5.5s ease-in-out 1.5s infinite alternate;
}
.hero-canvas .canvas-chip ~ .canvas-chip {
  animation-delay: .78s, 2.1s;
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
}
@keyframes chip-float {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}

/* HOCHDRUCK: Wasser-Wischkante legt das Bild beim Laden frei,
   die Nahtlinie zwischen Text und Bild wächst mit dem Scroll */
.hero-power { position: relative; }
.power-seam {
  position: absolute;
  left: max(380px, 44%);
  top: 10%; bottom: 10%;
  width: 3px;
  margin-left: -1px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--cw-blue-bright), var(--cw-green-bright));
  box-shadow: 0 0 16px rgba(47,143,212,.55);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  z-index: 2;
}
.power-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(6,27,51,.6), rgba(6,27,51,.3));
  animation: power-wipe 1.5s var(--ease-glass) .35s forwards;
}
.power-media::before {
  content: "";
  position: absolute;
  top: -5%; bottom: -5%;
  left: 0;
  width: 9px;
  background: linear-gradient(180deg, transparent, rgba(210,240,255,.95) 30%, rgba(210,240,255,.95) 70%, transparent);
  filter: blur(.5px);
  transform: skewX(-10deg);
  opacity: 0;
  animation: power-wipe-edge 1.5s var(--ease-glass) .35s forwards;
  z-index: 2;
}
@keyframes power-wipe {
  to { clip-path: inset(0 0 0 100%); }
}
@keyframes power-wipe-edge {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 9px); opacity: 0; }
}

/* TREPPENHAUS: Stufen-Ornament zeichnet sich, Leitlinie wächst mit Scroll */
.stairs-steps path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-path 1.5s var(--ease-glass) .5s forwards;
}
.stairs-steps path:nth-child(2) { animation-delay: .85s; }
@keyframes draw-path {
  to { stroke-dashoffset: 0; }
}
.hero-stairs .stairs-guide {
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}

/* AUSSENPFLEGE: der Marken-Schwung zeichnet sich unter der Headline */
.hero-swoosh {
  display: block;
  width: min(240px, 42vw);
  height: auto;
  margin: .2rem 0 .7rem;
  overflow: visible;
}
.hero-swoosh path {
  fill: none;
  stroke: var(--cw-green-bright);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgba(121,191,53,.5));
  animation: draw-path 1.2s var(--ease-glass) .85s forwards;
}
.hero-swoosh path:nth-child(2) {
  stroke: var(--cw-blue-bright);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(47,143,212,.45));
  animation-delay: 1.05s;
}

/* GEWERBE: zwei Glasscheiben öffnen sich wie eine Schiebetür */
.office-media::before,
.office-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: linear-gradient(165deg, rgba(255,255,255,.5), rgba(226,238,247,.36));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  pointer-events: none;
}
.office-media::before {
  top: 0;
  border-bottom: 1px solid rgba(255,255,255,.85);
  animation: pane-up 1.25s var(--ease-glass) .5s forwards;
}
.office-media::after {
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,.85);
  animation: pane-down 1.25s var(--ease-glass) .5s forwards;
}
@keyframes pane-up { to { transform: translateY(-103%); opacity: .4; } }
@keyframes pane-down { to { transform: translateY(103%); opacity: .4; } }

/* TERRASSE: Eck-Karte gleitet herein, ein Lichtzug fährt einmal übers Foto */
.hero-close .close-card {
  animation: card-glide 1s var(--ease-glass) .4s backwards;
}
@keyframes card-glide {
  from { opacity: 0; transform: translate(46px, 12px); }
}
.hero-close .close-media { position: relative; overflow: hidden; }
.hero-close .close-media::after {
  content: "";
  position: absolute;
  inset: -30% auto -30% -60%;
  width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.32) 50%, transparent);
  transform: skewX(-16deg);
  opacity: 0;
  animation: hero-sweep 1.9s var(--ease-glass) .9s forwards;
  pointer-events: none;
}
@keyframes hero-sweep {
  0% { opacity: 0; transform: skewX(-16deg) translateX(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-16deg) translateX(430%); }
}

/* BODEN: Bodenlinie wächst mit dem Scroll über die Panelkante */
.page-hero--low .hero-panel { position: relative; }
.page-hero--low .hero-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue-bright));
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  box-shadow: 0 0 12px rgba(121,191,53,.4);
}

/* FASSADE: Bild wird wie ein Vorhang aufgezogen */
.hero-mono .mono-media img {
  animation: mono-unveil 1.5s var(--ease-glass) .15s both;
}
@keyframes mono-unveil {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   Microinteractions
   ============================================================ */
.faq-item summary { transition: background-color .25s, color .25s; }
.faq-item summary:hover { background: rgba(255,255,255,.34); }
.faq-item summary .faq-q { transition: transform .3s var(--ease-glass); }
.faq-item summary:hover .faq-q { transform: translateX(4px); }
.faq-item[open] .faq-a { animation: faq-open .45s var(--ease-glass); }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
}

.dropdown a { transition: background-color .2s, color .2s, transform .25s var(--ease-glass); }
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(18,104,165,.08); transform: translateX(4px); }

.trust-pill { transition: transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass); }
.trust-pill:hover { transform: translateY(-2px); box-shadow: var(--cw-shadow-md), var(--cw-inset-light); }
.trust-pill svg { transition: transform .35s var(--ease-glass); }
.trust-pill:hover svg { transform: scale(1.18) rotate(-8deg); }

.review-card { transition: transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass); }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow-lg), var(--cw-inset-light); }

.form-field label { transition: color .25s; }
.form-field:focus-within label { color: var(--cw-blue); }

.phone-link svg { transition: transform .3s var(--ease-glass); }
.phone-link:hover svg, .phone-link:focus-visible svg { transform: rotate(-10deg) scale(1.08); }

.footer-col a { transition: color .2s, padding-left .25s var(--ease-glass); }
.footer-col a:hover, .footer-col a:focus-visible { padding-left: 4px; }

.audience-caption { transition: transform .4s var(--ease-glass), background-color .4s; }
.audience-tile:hover .audience-caption { transform: translateY(-3px); background: rgba(9,33,60,.56); }

/* Bild-Push: Bilder in Rahmen schieben sich beim Hover minimal zur Seite */
.media-trio .img-frame img,
.collage-asym .img-frame img,
.collage-organic figure img { transition: transform .7s var(--ease-glass); }
.media-trio .img-frame:hover img { transform: scale(1.03) translateY(-4px); }
.collage-asym .img-frame:hover img { transform: scale(1.03); }
.collage-organic figure:hover img { transform: scale(1.04) rotate(.4deg); }

/* Glass Clear: Info-Glasflächen werden beim Hover einen Hauch klarer */
.feature-card { transition: background-color .4s, box-shadow .4s var(--ease-glass), transform .4s var(--ease-glass); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--cw-shadow-lg), var(--cw-inset-light); }

/* Ledger-Zeilen (Fassade): Begriff rückt beim Hover leicht ein */
.ledger-row h3 { transition: transform .35s var(--ease-glass), color .3s; }
.ledger-row:hover h3 { transform: translateX(6px); color: var(--cw-blue); }

/* Material-Streifen (Terrasse): Name leuchtet beim Hover auf */
.material-strip .ms-name { transition: opacity .3s, letter-spacing .45s var(--ease-glass); }
.material-strip:hover .ms-name { opacity: 1; letter-spacing: .01em; }

/* Etagen-Marker: reagieren, wenn die Zeile berührt wird */
.floor-level .fl-mark { transition: transform .4s var(--ease-glass), box-shadow .4s; }
.floor-level:hover .fl-mark {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 6px rgba(121,191,53,.14), var(--cw-shadow-md);
}
.floor-level .fl-media img { transition: transform .8s var(--ease-glass); }
.floor-level:hover .fl-media img { transform: scale(1.035); }

/* Stat-Chips & Pfad-Stationen */
.stat-chip { transition: transform .3s var(--ease-glass), box-shadow .3s; }
.stat-chip:hover { transform: translateY(-2px); box-shadow: var(--cw-shadow-md), var(--cw-inset-light); }
.path-stops .stop::before { transition: transform .35s var(--ease-glass), box-shadow .35s; }
.path-stops .stop:hover::before { transform: scale(1.4); box-shadow: 0 0 10px rgba(121,191,53,.6); }

/* Mobiles Menü: weiches Aufklappen */
.mobile-menu:not([hidden]) { animation: menu-fade .25s ease-out; }
.mobile-menu:not([hidden]) .mobile-menu-glass { animation: menu-pop .45s var(--ease-glass); }
@keyframes menu-fade { from { opacity: 0; } }
@keyframes menu-pop { from { opacity: 0; transform: translateY(-16px) scale(.985); } }
.mobile-menu-brand { margin: .1rem 0 1rem; }
.mobile-menu-brand img { width: min(190px, 52vw); height: auto; display: block; }

/* ============================================================
   Responsiv
   ============================================================ */
@media (max-width: 1100px) {
  .hero-canvas .canvas-text { margin-top: -1.4rem; }
  .services-grid { grid-template-columns: repeat(6, 1fr); }
  .service-card.card-featured { grid-column: span 6; min-height: 400px; }
  .service-card.card-half { grid-column: span 3; }
  .service-card.card-third { grid-column: span 3; }
  .service-card.card-wide { grid-column: span 6; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  /* Schwebende Glass-Navbar mobil: Logo links, Hamburger ganz rechts */
  .site-header { padding-inline: 12px; }
  .header-inner {
    width: 100%;
    justify-content: space-between;
    gap: .8rem;
    padding: .5rem .6rem .5rem .7rem;
    border-radius: 20px;
  }
  .header-actions { margin-left: auto; }
  .mobile-menu { padding-top: 5.8rem; }

  .media-duo, .media-trio, .feature-split, .related-band { grid-template-columns: 1fr; }
  .hero-stairs { grid-template-columns: 1fr; }
  .hero-stairs .stairs-media { grid-column: 1; grid-row: 2; height: clamp(320px, 48vh, 440px); }
  .hero-stairs .stairs-text { grid-column: 1; grid-row: 1; margin: 0 0 -2.4rem; }
  .hero-stairs .stairs-guide { display: none; }
  /* Filmstreifen: asymmetrisches 2x2 auf mittleren Breiten */
  .filmstrip figure:nth-child(1) { grid-column: span 5; }
  .filmstrip figure:nth-child(2) { grid-column: span 7; margin-bottom: 1.4rem; }
  .filmstrip figure:nth-child(3) { grid-column: span 4; margin-bottom: 0; }
  .filmstrip figure:nth-child(4) { grid-column: span 8; margin-bottom: 0; aspect-ratio: 16 / 9; }
  .story-line .story-item { padding-left: clamp(3.4rem, 12vw, 4.6rem); }
  .story-line .story-num { left: clamp(1.6rem, 6vw, 2.4rem); font-size: 1.8rem; }
  .contact-form-wrap { grid-template-columns: 1fr; }
  .hero-power { grid-template-columns: 1fr; }
  .hero-power .power-media { min-height: 300px; }
  .hero-office { grid-template-columns: 1fr; margin-top: 5rem; }
  .hero-office .office-media { min-height: 300px; }
  .plan-flow { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .material-stage { grid-template-columns: 1fr; }
  .faq-side { grid-template-columns: 1fr; }
  .faq-side .faq-side-head { position: static; }
  .faq-grid-2 { grid-template-columns: 1fr; }
  .floor-level { grid-template-columns: 1fr; padding-left: clamp(3rem, 7vw, 6rem); }
  .floor-level:nth-child(even) .fl-media { order: 0; }
  .collage-asym { grid-template-columns: 1fr; }
  .collage-asym figure:nth-child(2), .collage-asym figure:nth-child(3) { margin: 0; }
  .collage-organic figure:nth-child(n) { grid-column: 1 / -1; margin-top: 0; aspect-ratio: 16 / 10; }
  .offset-duo figure:nth-child(1), .offset-duo figure:nth-child(2) { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; border: 0; }
  .diag-split { grid-template-columns: 1fr; }
  .diag-split .diag-media { clip-path: none; border-radius: var(--cw-radius-lg); }
  .diag-split .diag-text { padding: 1.2rem 0 0; }
  .num-facts { grid-template-columns: 1fr; }
  .material-strip { grid-template-columns: 1fr; gap: .4rem; }
  .editorial-cols { columns: 1; }
  .big-stat { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .cta-band .shell { grid-template-columns: 1fr; }
  .hero-canvas .canvas-text { margin-top: -2.4rem; }
  .hero-close .close-card { position: static; max-width: none; margin: -3rem auto 0; width: calc(100% - 1.7rem); }
  .hero-mono h1 { margin-top: -1.6rem; }
  .label-scape img { height: 420px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-strip { grid-template-columns: 1fr; }
  .contact-strip > div { border-right: 0; border-bottom: 1px solid var(--cw-border-soft); }
  .contact-strip > div:last-child { border-bottom: 0; }
  .step-line { grid-template-columns: 1fr; gap: 1.3rem; }
  .step-line::before { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: .5rem; }
  .spine::before { left: 8px; translate: 0; }
  .spine-item,
  .spine-item:nth-child(even) { width: auto; margin-left: 2.2rem; text-align: left; }
  .spine-item:nth-child(odd) { text-align: left; }
  .spine-item:nth-child(odd)::after,
  .spine-item:nth-child(even)::after { left: -2.2rem; right: auto; translate: calc(-50% + 9px) 0; }
  .link-row { border-radius: var(--cw-radius-md); }
  .page-hero { min-height: 340px; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split--flip .hero-split-media { order: 0; }
  .hero-split .hero-split-media { min-height: 300px; }
  .page-hero--bar .hero-panel { grid-template-columns: 1fr; gap: .8rem; }
  .page-hero--bar .hero-panel > *,
  .page-hero--bar .hero-panel .hero-actions { grid-column: 1; grid-row: auto; }
  .page-hero--bar .hero-panel .hero-actions { justify-content: flex-start; }
  .lens-stage .lens { width: clamp(90px, 30%, 150px); }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .phone-link.nav-phone { display: none; }
  .trust-track { grid-template-columns: repeat(2, 1fr); }
  .clarity-grid { grid-template-columns: repeat(2, 1fr); }
  .process-layout { grid-template-columns: 1fr; }
  .process-visual { position: static; order: -1; max-height: 380px; }
  .team-layout, .grid-2 { grid-template-columns: 1fr; }
  .audience-band { grid-template-columns: 1fr; }
  .audience-tile { min-height: 260px; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  h2 { font-size: clamp(1.4rem, 6.4vw, 1.9rem); }
  .shell, .shell-wide { width: calc(100% - 1.7rem); }
  .hero {
    min-height: 86svh;
    padding-top: 6.4rem;
    align-items: flex-end;
  }
  .hero-panel { padding: 1.25rem 1.15rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-actions { gap: .7rem; }
  .trust { padding-block: 1.2rem; }
  .trust-track { grid-template-columns: 1fr; gap: .6rem; }
  .trust-pill { padding: .75rem 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card.card-featured, .service-card.card-half,
  .service-card.card-third, .service-card.card-wide {
    grid-column: 1 / -1;
    min-height: 250px;
  }
  .service-card.card-featured { min-height: 330px; }
  .clarity-grid { grid-template-columns: 1fr; }
  .ba-handle { width: 48px; height: 48px; }
  .cta-final { min-height: 380px; }
  .cta-panel { margin: 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .breadcrumb { padding-top: 5.4rem; }
  .btn-nav { display: none; }
  .stat-row { gap: .5rem; }
}

/* ============================================================
   Reduzierte Bewegung: alles bleibt sichtbar und verständlich
   ============================================================ */
/* html.force-motion (per ?motion=on) hebt die Reduzierung gezielt auf */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) { scroll-behavior: auto; }
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js:not(.force-motion) [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }
  html.js:not(.force-motion) .clarity-card::after { display: none; }
  html.js:not(.force-motion) .wipe-glass::after,
  html.js:not(.force-motion) .wipe-glass::before,
  html.js:not(.force-motion) .dirt-reveal::after { display: none; }
  html:not(.force-motion) .droplets .drop,
  html:not(.force-motion) .refract::after,
  html:not(.force-motion) .polish-light::after,
  html:not(.force-motion) .pressure-reveal .pressure-grime,
  html:not(.force-motion) .pressure-reveal .pressure-line,
  html:not(.force-motion) .material-shift::after,
  html.js:not(.force-motion) .window-grid .pane,
  html:not(.force-motion) .trace-stage svg.trace,
  html:not(.force-motion) .lens-stage .lens { display: none; }
  html.js:not(.force-motion) .focus-seq > * { filter: none; opacity: 1; }
  html.js:not(.force-motion) .frost-text::after { display: none; }
  html:not(.force-motion) .depth-zoom img { transform: none; }
  html:not(.force-motion) .v-light::after { display: none; }
  html:not(.force-motion) .rhythm.revealed .interval-day.is-on { animation: none; }
  html:not(.force-motion) .rhythm-line { transform: scaleX(1); }
  html:not(.force-motion) .floor-visual img { transition: none; }
  html.js:not(.force-motion) .process-step > div { opacity: 1; transform: none; filter: none; }
  html:not(.force-motion) .process-step.is-active .process-dot { transform: none; }
  html:not(.force-motion) .process-visual img { transform: none; }
  html:not(.force-motion) .hero-streak { display: none; }
  html:not(.force-motion) .audience-tile img,
  html:not(.force-motion) .service-card img { transition: none; }
  html:not(.force-motion) .hero-media img { animation: none; transform: none; }
  html:not(.force-motion) .hero-panel,
  html:not(.force-motion) .hero-panel > * { animation: none; }
  html:not(.force-motion) .squeegee-veil { display: none; }
  html:not(.force-motion) .parallax-crop > img { transform: none; }
  html:not(.force-motion) .exit-sheen::after { display: none; }
  html:not(.force-motion) .refract::before,
  html:not(.force-motion) .refract::after { display: none; }
  html:not(.force-motion) .faq-item[open] .faq-a { animation: none; }
  html.js:not(.force-motion) [data-reveal="frost"]::after { display: none; }
  html.js:not(.force-motion) [data-reveal] .eyebrow::before { transform: scaleX(1); }
  html.js:not(.force-motion) [data-reveal="story"] .story-num {
    background-size: 100% 100%;
    -webkit-text-stroke: 0;
  }
  html.js:not(.force-motion) [data-reveal="story"] h3,
  html.js:not(.force-motion) [data-reveal="story"] p { opacity: 1; transform: none; filter: none; }
  html.js:not(.force-motion) [data-reveal] .review-stars svg { opacity: 1; transform: none; }
  html:not(.force-motion) .h-underline::after { transform: scaleX(1); }
  html:not(.force-motion) .type-list.service-path::after { transform: scaleY(1); }
  html:not(.force-motion) .type-list.service-path li::before {
    border-color: var(--cw-green);
    background: var(--cw-green-bright);
  }
  html:not(.force-motion) .border-draw::after { display: none; }
  html:not(.force-motion) .filmstrip img { transform: none; }
  html:not(.force-motion) .filmstrip figcaption { opacity: 1; transform: none; }
  html:not(.force-motion) .scroll-zoom img { transform: none; }
  html:not(.force-motion) .power-seam,
  html:not(.force-motion) .hero-stairs .stairs-guide { transform: none; }
  html:not(.force-motion) .page-hero--low .hero-panel::before { transform: scaleX(1); }
  html:not(.force-motion) .h-sheen::after { display: none; }
  html:not(.force-motion) .stairs-steps path,
  html:not(.force-motion) .hero-swoosh path { stroke-dashoffset: 0; }
}

/* ---------- Ludwigsburg-Seite: Einsatzgebiet ---------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.area-block { padding: clamp(1.2rem, 2.4vw, 1.7rem); }
.area-block h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.area-block p { margin: 0; color: var(--cw-muted); font-size: .97rem; line-height: 1.6; }
@media (max-width: 900px) { .area-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Fensterreinigung: scrollgesteuertes Video-Storytelling im Hero
   (Osmose-Sequenz: Buerste ansetzen -> reinigen -> Ergebnis).
   Struktur: eine hohe Section (--segments Vielfaches von 100vh),
   darin eine sticky Buehne. main.js berechnet einen globalen
   Fortschritt 0..1 und blendet Intro/Video 1/2/3 direkt daraus.
   ============================================================ */
.hero-scrolly {
  position: relative;
  height: calc(var(--hs-segments, 4) * 100vh);
}
.hero-scrolly-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a1826; /* verhindert weisses Aufblitzen vor dem ersten Frame */
}
.hs-media { position: absolute; inset: 0; }
.hs-frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}
.hero-scrolly-stage::after { /* gleiche Verlaufsabdunklung wie der bisherige Hero */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,27,51,.34) 0%, rgba(6,27,51,.06) 32%, rgba(6,27,51,.5) 100%);
  pointer-events: none;
  z-index: 2;
}
.hs-intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.6rem clamp(1.2rem, 5vw, 4rem) 3rem;
  max-width: 780px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Zusätzliche Sicherung neben der Opacity: visibility schaltet erst NACH
     dem Ausblenden auf hidden (Delay = Transition-Dauer), beim Einblenden
     sofort auf visible. So kann inaktiver Text niemals irgendeinen
     Rendering-Rest hinterlassen, selbst bei abweichendem Engine-Timing. */
  transition: none; /* echter Hard-Cut, kein Crossfade – siehe Kommentar oben */
  will-change: opacity;
}
.hs-intro.is-active {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.hs-intro h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hs-intro .lead, .hs-intro .hero-kicker { color: #eaf1f8; }
.hs-intro .hero-kicker { color: #b9d4ea; }
/* Phasen-Erklärung: liegt an derselben Stelle wie das Intro. Anders als
   das Bild-Crossfade wechselt Text als echter Hard-Cut (Klasse statt
   scroll-gebundener Opacity, keine Transition, opacity+visibility
   springen ohne Übergang) – so ist zu jedem Zeitpunkt garantiert
   höchstens ein Textblock sichtbar. Ein sanftes Überblenden würde immer
   ein kurzes Zeitfenster mit zwei teilsichtbaren Texten erzeugen, das
   beim Anhalten mitten im Scrollen als „doppelter Text“ wahrgenommen
   werden kann – bewusst vermieden. */
.hs-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.6rem clamp(1.2rem, 5vw, 4rem) 3rem;
  max-width: 640px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none; /* echter Hard-Cut, kein Crossfade – siehe Kommentar oben */
  will-change: opacity;
}
.hs-caption.is-active {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.hs-caption-kicker {
  display: inline-block;
  width: fit-content;
  margin: 0 0 .8rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d7ecff;
}
.hs-caption h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  margin: 0 0 .55rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.hs-caption p:not(.hs-caption-kicker) {
  color: #dce9f4;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
}

.hs-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  background: rgba(255,255,255,.16);
}
.hs-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cw-green-bright), var(--cw-blue-bright));
  transform-origin: left;
}

/* Ohne JS oder bei reduzierter Bewegung: kein Pin, alles gestapelt
   und sofort vollstaendig sichtbar/bedienbar */
html:not(.js) .hero-scrolly,
html.js:not(.force-motion) .hero-scrolly.is-reduced {
  height: auto;
}
html:not(.js) .hero-scrolly-stage,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hero-scrolly-stage {
  position: static;
  height: auto;
  display: block;
  padding-bottom: 1px; /* eigener BFC fuer die absolut positionierten Kinder */
}
html:not(.js) .hs-intro,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hs-intro {
  position: relative;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto;
  min-height: 60vh;
}
html:not(.js) .hs-media,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hs-media { display: none; }
html:not(.js) .hs-caption,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hs-caption { display: none; }
html:not(.js) .hs-progress,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hs-progress { display: none; }
.hero-scrolly-fallback { display: none; }
html:not(.js) .hero-scrolly-fallback,
html.js:not(.force-motion) .hero-scrolly.is-reduced .hero-scrolly-fallback {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0 clamp(1.2rem, 5vw, 4rem) 3rem;
}
.hero-scrolly-fallback figure { margin: 0; }
.hero-scrolly-fallback video {
  width: 100%;
  border-radius: var(--cw-radius-md);
  box-shadow: var(--cw-shadow-md);
}
.hero-scrolly-fallback figcaption {
  margin-top: .55rem;
  font-size: .92rem;
  color: var(--cw-muted);
  line-height: 1.45;
}
.hero-scrolly-fallback figcaption strong { color: var(--cw-navy-950); }
@media (max-width: 760px) {
  .hero-scrolly-fallback { grid-template-columns: 1fr; }
  .hs-intro { padding-inline: 1.2rem; }
}