/* ========================================================
   Ajeti Service v2 — BK-Design (Multi-Clean / MKurti-Stil)
   Ohne Sidebar · Manrope + Poppins · Ajeti-Farben
   Fluid scaling für 1280–3000+ px (Surface Studio ready)
   ======================================================== */

/* Fonts self-hosted via /landingpages/assets/css/fonts.css (DSG-konform, kein Google-@import mehr) */

/* -------- Viewport-Scaling-Strategie --------
   Basis: 16px html-font-size bei 1280–2399 px Viewport.
   Ab 2400 px (Surface Studio etc.): html-font-size skaliert linear mit (vw)
   sodass das proportionale Layout-Bild gleich bleibt, nur grösser. -------- */
html {
  font-size: 16px;
}
@media (min-width: 2400px) {
  html { font-size: clamp(16px, 0.85vw, 28px); }   /* 2400→20.4px, 3200→27.2px */
}
@media (min-width: 3000px) {
  html { font-size: clamp(20px, 0.9vw, 32px); }
}

/* -------- Tokens -------- */
:root {
  /* Brand — Teal/Blau (#167FA3) */
  --brand: #167FA3;
  --brand-dark: #0F6384;
  --brand-deep: #0A4A63;
  --brand-soft: #D4E8F0;
  --brand-mist: #EFF5F9;
  --brand-text: #0A4A63;         /* garantiert lesbare Brand-Textfarbe — Light: tief-teal, Dark: hell-teal */

  /* CTA */
  --cta: #1D3557;
  --cta-hover: #14253D;
  --cta-soft: #E8EEF5;

  /* Neutral */
  --ink: #07111A;
  --text: #1D1D1D;
  --text-muted: #6B7280;
  --text-soft: #9CA3AF;
  --bg: #FFFFFF;
  --bg-mist: #F0F3F1;          /* sichtbar grau-grün — guter Kontrast zur weissen Hauptfläche */
  --border: #E0E5E2;           /* etwas dunkler — sichtbarer auf weiss */

  /* Status */
  --success: #16A34A;
  --warn: #F59E0B;

  /* Hero — bleiben in BEIDEN Modi dunkel mit weisser Schrift */
  --hero-bg: #07111A;
  --hero-bg-grad-from: #0F6384;
  --hero-bg-grad-to: #167FA3;
  --hero-fg: #FFFFFF;
  --hero-fg-soft: rgba(255,255,255,.85);
  --hero-fg-mute: rgba(255,255,255,.6);
  --hero-glass: rgba(255,255,255,.08);
  --hero-glass-border: rgba(255,255,255,.15);

  /* Typo */
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(1.875rem, 4vw, 2.75rem);   /* vorher 2.25-3.75rem — etwas gedämpfter */
  --fs-h2: clamp(1.5rem, 2.75vw, 2rem);     /* vorher 1.75-2.5rem */
  --fs-h3: clamp(1.125rem, 1.5vw, 1.375rem);/* vorher 1.25-1.5rem */
  --fs-body: 16px;
  --fs-small: 13px;

  /* Layout — alles in rem damit es mit html-font-size skaliert */
  --container: 68.75rem;           /* 1100px @16px — boxed */
  --container-narrow: 55rem;       /* 880px */
  --container-wide: 100rem;        /* 1600px (für sehr breite Viewports) */
  --gutter: 1.5rem;                /* 24px */
  --section-py: 6rem;              /* 96px */

  /* App-Frame — ABSOLUTE px (bleiben auch bei 2400+ Viewport fix) */
  --header-h: 60px;
  --rail-w: 60px;
  --bottom-bar-h: 60px;
  --frame-pad-mobile: 40px;

  /* Section-Höhen — Header + Bottom-Bar = 120px */
  --section-screen: calc(100vh - 120px);
  --hero-media-h: 60vh;
  --hero-media-min: 50vh;

  /* Radius / Shadow */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(15,20,25,.04);
  --shadow-md: 0 8px 24px rgba(15,20,25,.06);
  --shadow-lg: 0 24px 60px rgba(15,20,25,.08);
  --shadow-glow: 0 0 0 6px rgba(22,127,163,.1);
}

@media (min-width: 2400px) {
  :root {
    --container: 68.75rem;          /* boxed bleibt 1100px auch auf XXL-Screens */
    --container-narrow: 55rem;
  }
}

/* -------- Dark Mode (kalibriert für Lesbarkeit + Kontrast) -------- */
[data-theme="dark"] {
  /* Brand (Teal) leicht heller für Kontrast auf dunklem Background */
  --brand: #4FAACB;
  --brand-dark: #70BED8;
  --brand-deep: #9ED3E3;
  --brand-soft: #0F2834;       /* dunkles Card-Tint (Teal) */
  --brand-mist: #0B1F28;
  --brand-text: #9AD0E4;       /* Dark: hell-teal fuer Lesbarkeit auf dunklem BG */

  --cta: #4D7CB5;
  --cta-hover: #6794CC;
  --cta-soft: #1B2533;

  /* Text-Layer mit klarem Kontrast — nicht reines Weiss, nicht reines Schwarz */
  --ink: #F1F5F3;
  --text: #DCE3E0;
  --text-muted: #9BA8A4;
  --text-soft: #6B7773;

  /* Hintergrund-Layer mit klarem Stufengang — Blau-Nuance (kein Gruen-Bias) */
  --bg: #181C23;               /* Body-Hauptflaeche — dezent ins Blau */
  --bg-mist: #1D222B;          /* Section-mist — blau-grau, sichtbar heller als bg */
  --border: #2A2F39;           /* Border mit Blau-Touch */

  /* Hero-Tokens bleiben dunkel (im Dark-Mode noch tiefer) */
  --hero-bg: #06101A;
  --hero-bg-grad-from: #0C2535;
  --hero-bg-grad-to: #0F3D55;
  --hero-fg: #FFFFFF;
  --hero-fg-soft: rgba(255,255,255,.88);
  --hero-fg-mute: rgba(255,255,255,.65);
  --hero-glass: rgba(255,255,255,.06);
  --hero-glass-border: rgba(255,255,255,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 6px rgba(79,170,203,.25);
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--ink); }
[data-theme="dark"] .site-header { background: rgba(24,28,35,.92); border-bottom-color: var(--border); }
/* Logo-Swap Hell/Dunkel: light-SVG standard, dark-SVG erscheint nur im Dark-Mode */
.logo-img--dark { display: none; }
[data-theme="dark"] .logo-img--light { display: none; }
[data-theme="dark"] .logo-img--dark  { display: inline-block; }
/* Footer-Logo ist JPG/WebP — dort bleibt der Invert-Trick */
[data-theme="dark"] .footer-logo img { filter: brightness(0) invert(.95); }
[data-theme="dark"] .nav__list a { color: var(--ink); }
[data-theme="dark"] .nav__list a:hover { color: var(--brand); }
[data-theme="dark"] .nav__toggle span { background: var(--ink); }
[data-theme="dark"] .accordion__item { background: var(--bg-mist); border-color: var(--border); }
[data-theme="dark"] .accordion__head { color: var(--ink); }
[data-theme="dark"] .accordion__head:hover { background: var(--brand-mist); }
[data-theme="dark"] .accordion__toggle { background: var(--brand-mist); color: var(--text-muted); }
[data-theme="dark"] .accordion__icon-wrap { background: var(--brand-mist); color: var(--brand); }
[data-theme="dark"] .accordion__body-inner { color: var(--text-muted); }
[data-theme="dark"] .accordion__body-inner a { color: var(--brand-dark); }
[data-theme="dark"] .svc-card,
[data-theme="dark"] .testimonial,
[data-theme="dark"] .usp,
[data-theme="dark"] .step,
[data-theme="dark"] .form-card,
[data-theme="dark"] .form-inline { background: var(--bg-mist); border-color: var(--border); color: var(--text); }

/* Google-Reviews-Block: eigener Kontrast-Stufengang fuer saubere Lesbarkeit */
[data-theme="dark"] .gr-block {
  background: linear-gradient(135deg, rgba(22,127,163,.08) 0%, #151A22 100%);
  border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .gr-item {
  background: #262C36;               /* deutlich heller als Section-BG */
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(220,227,224,.9);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.55);
}
[data-theme="dark"] .gr-google-icon { background: #fff; }
[data-theme="dark"] .gr-rating-big,
[data-theme="dark"] .gr-item__name { color: #FFFFFF; }
[data-theme="dark"] .gr-item__date,
[data-theme="dark"] .gr-item__text,
[data-theme="dark"] .gr-rating-meta { color: rgba(220,227,224,.72); }
[data-theme="dark"] .svc-card h3,
[data-theme="dark"] .usp h4,
[data-theme="dark"] .step h4,
[data-theme="dark"] .testimonial__author-name { color: var(--ink); }
[data-theme="dark"] .svc-card p,
[data-theme="dark"] .usp p,
[data-theme="dark"] .step p,
[data-theme="dark"] .testimonial__author-meta { color: var(--text-muted); }
[data-theme="dark"] .testimonial__quote { color: var(--ink); }
[data-theme="dark"] .field label { color: var(--ink); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder { color: var(--text-soft); }
[data-theme="dark"] .section--mist { background: var(--bg-mist); }
[data-theme="dark"] .section-heading p { color: var(--text-muted); }
[data-theme="dark"] .site-footer { background: #0A0E0C; color: var(--text-muted); }
[data-theme="dark"] .site-footer a { color: var(--text-muted); }
[data-theme="dark"] .site-footer a:hover { color: var(--brand); }
[data-theme="dark"] .site-footer h5 { color: var(--ink); }
[data-theme="dark"] .footer-bottom { background: #060908; color: var(--text-soft); }
[data-theme="dark"] .footer-strip { background: var(--brand-deep); color: var(--ink); }
[data-theme="dark"] .footer-strip a { color: var(--ink); }
[data-theme="dark"] .left-rail,
[data-theme="dark"] .right-rail { background: rgba(24,28,35,.94); border-color: var(--border); }
[data-theme="dark"] .bottom-bar { background: rgba(24,28,35,.94); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .bottom-bar a { color: var(--text); }
[data-theme="dark"] .bottom-bar a:hover { color: var(--brand); }
[data-theme="dark"] .bottom-bar__item--brand { color: var(--brand-dark); }
[data-theme="dark"] .rail-btn { color: var(--text-muted); }
[data-theme="dark"] .rail-btn:hover { background: var(--brand-mist); color: var(--brand); }
[data-theme="dark"] .left-rail__crumb { color: var(--text-muted); }
[data-theme="dark"] .left-rail__crumb.is-current { color: var(--brand); }
[data-theme="dark"] .trust-item { color: var(--text-muted); }
[data-theme="dark"] .trust-bar { background: var(--bg-mist); border-color: var(--border); }

/* Hero-Home Split im Dark-Mode: beide Haelften mit BG-Bild + dunklen Overlays */
[data-theme="dark"] .hero--home__left {
  background:
    linear-gradient(145deg, rgba(14,32,42,.92) 0%, rgba(12,26,34,.96) 55%, rgba(6,16,22,.98) 100%),
    url('../images/home/hero.jpg') center/cover no-repeat;
}
[data-theme="dark"] .hero--home__right {
  background: linear-gradient(145deg, #0F2834 0%, #0A1C26 100%);
  color: #E8F0EC;
}
[data-theme="dark"] .hero--home__ghost {
  color: rgba(170,213,228,.06);
}
[data-theme="dark"] .hero--home__visual::after {
  background: radial-gradient(circle at 30% 30%,
    rgba(170,213,228,.2) 0%,
    rgba(18,52,66,.4) 45%,
    rgba(12,28,36,.7) 100%);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
}
[data-theme="dark"] .hero--home__visual-icon { color: #E8F0EC; }
[data-theme="dark"] .hero--home__right-side { color: #E8F0EC; }
[data-theme="dark"] .hero--home__right-side button {
  border-color: rgba(170,213,228,.25);
  color: #E8F0EC;
}
[data-theme="dark"] .hero--home__right-side-thumb {
  background: rgba(18,36,46,.8);
  border-color: rgba(170,213,228,.25);
  color: #E8F0EC;
}
[data-theme="dark"] .hero--home__footer {
  background: #0E1C24;
  border-top-color: rgba(170,213,228,.08);
}
[data-theme="dark"] .hero--home__footer-box {
  color: #E8F0EC;
  border-right-color: rgba(170,213,228,.06);
  background: transparent;
}
[data-theme="dark"] .hero--home__footer-box--3 { color: var(--brand-dark); }
[data-theme="dark"] .hero--home__footer-box:hover { background: #13262F; color: #fff; }
[data-theme="dark"] .hero--home__footer-label-sub { color: rgba(170,213,228,.45); }
[data-theme="dark"] .hero--home__footer-box:hover .hero--home__footer-label-sub { color: rgba(170,213,228,.7); }

/* CTA-Band bleibt im Dark-Mode farbig + lesbar — dunklerer Gradient fuer AA-Kontrast */
[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, #14253D 0%, #1F3557 50%, #1A3229 100%);
  color: #fff;
}
[data-theme="dark"] .cta-band h2,
[data-theme="dark"] .cta-band p { color: #fff; }
[data-theme="dark"] .cta-band p { opacity: .92; }

/* Section --brand-soft im Dark: heller Text auf dunklem Card-BG */
[data-theme="dark"] .section--brand-soft { background: var(--brand-soft); color: var(--text); }
[data-theme="dark"] .section--brand-soft h1,
[data-theme="dark"] .section--brand-soft h2,
[data-theme="dark"] .section--brand-soft h3,
[data-theme="dark"] .section--brand-soft h4 { color: var(--ink); }

/* Buttons: .btn--green Text garantiert weiss in beiden Modi.
   Background auf --brand-dark fuer AA-Kontrast (6.5:1 statt 3.8:1). */
.btn--green {
  background: var(--brand-dark);
  color: #fff;
  border: 1px solid var(--brand-dark);
}
.btn--green:hover,
.btn--green:focus { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
[data-theme="dark"] .btn--green { background: var(--brand-dark); color: #07111A; border-color: var(--brand-dark); }
[data-theme="dark"] .btn--green:hover,
[data-theme="dark"] .btn--green:focus { background: var(--brand-deep); color: #07111A; border-color: var(--brand-deep); }

/* Ghost-Button auf Hero (hell oder dunkel): weisser Text + sichtbarer Border */
.btn--ghost { color: #fff; border: 1px solid rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }


/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 80px);  /* Sticky-Header + 80px Luft */
  -webkit-text-size-adjust: 100%;
}
:target,
[id]:target,
.offerte-page,
.offerte-page__form,
.offerte-page__form *,
#mkurti-form-reinigungsangebot-ajeti-service,
#mkurti-form-reinigungsangebot-ajeti-service * {
  scroll-margin-top: calc(var(--header-h) + 80px);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--brand-dark); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand-deep); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 700; }
p { margin-bottom: 1em; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 12px;
}
.eyebrow--white { color: rgba(255,255,255,.85); }

/* -------- Layout-Utility -------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-py) 0; }
.section--mist { background: var(--bg-mist); }
.section--brand-soft { background: var(--brand-soft); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.8); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.text-center { text-align: center; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cta);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
  border: 2px solid var(--cta);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(29,53,87,.4); color: #fff !important; }
.btn--green { background: var(--brand); border-color: var(--brand); }
.btn--green:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 12px 24px -8px rgba(22,127,163,.4); }
.btn--outline { background: transparent; color: var(--cta) !important; border-color: var(--cta); }
.btn--outline:hover { background: var(--cta); color: #fff !important; }
.btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: #fff; color: var(--cta) !important; border-color: #fff; }
.btn--sm { padding: 10px 20px; font-size: 13px; }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn [data-lucide] { width: 18px; height: 18px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

/* ============== AUTO-CTA-MOTION: grosse primaere Buttons (.btn--green.btn--lg) ==============
   Kein Markup noetig — alle "Gratis Offerte"-Buttons bekommen automatisch:
   - Fill-Sweep von unten (Teal-Gradient)
   - Diagonaler Shine-Streifen
   - Icon-Bounce nach rechts mit leichter Rotation
   - Lift + Shadow (schon in Basis-Hover)
============================================================================================= */
.btn--green.btn--lg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--green.btn--lg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 50%, var(--brand-dark) 100%);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.btn--green.btn--lg::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-200%) skewX(-20deg);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.btn--green.btn--lg:hover::before { transform: translateY(0); }
.btn--green.btn--lg:hover::after  { transform: translateX(420%) skewX(-20deg); }
.btn--green.btn--lg:hover [data-lucide] { transform: translateX(4px) rotate(-4deg); }
.btn--green.btn--lg:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .btn--green.btn--lg::before,
  .btn--green.btn--lg::after,
  .btn [data-lucide] { transition: none !important; transform: none !important; }
}

/* =================== CTA MOTION SYSTEM (.btn--fx) ===================
   Kombinierbar mit allen .btn Varianten. Erwartete Markup-Struktur:
   <a class="btn btn--green btn--fx">
     <span class="btn-fx__label" data-text="Jetzt anfragen">Jetzt anfragen</span>
     <i data-lucide="arrow-right" class="btn-fx__arrow"></i>
   </a>
   Effekte:
   - Text-Slide: Text rutscht hoch, Duplikat kommt von unten
   - Fill-Sweep: Farb-Fill von links/unten fuellt den Button
   - Arrow-Launch: Pfeil schiesst vor, neuer Pfeil kommt nach
   - Shine: diagonaler Licht-Sweep beim Hover
================================================================== */
.btn--fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 14px 30px;
}
.btn--fx::before {
  /* Fill-Sweep Layer */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cta-hover) 0%, var(--cta) 100%);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.btn--fx.btn--green::before {
  background: linear-gradient(90deg, var(--brand-dark) 0%, var(--brand) 100%);
}
.btn--fx.btn--outline::before,
.btn--fx.btn--ghost::before {
  background: var(--cta);
}
.btn--fx::after {
  /* Diagonaler Shine-Sweep */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 40%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-20deg);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.btn--fx:hover::before { transform: translateY(0); }
.btn--fx:hover::after  { transform: translateX(420%) skewX(-20deg); }

.btn--fx:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(22,127,163,.4);
}
.btn--fx:active { transform: translateY(0) scale(.98); }

/* Text-Slide: der span bekommt ein Duplikat aus dem data-text Attribut */
.btn-fx__label {
  position: relative;
  display: inline-block;
  line-height: 1;
  transition: transform .45s cubic-bezier(.7,0,.3,1);
}
.btn-fx__label::after {
  content: attr(data-text);
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.7,0,.3,1);
  color: inherit;
}
.btn--fx:hover .btn-fx__label {
  transform: translateY(-110%);
}

/* Arrow-Launch: schiesst raus + neuer Pfeil rueckt nach */
.btn-fx__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.btn-fx__arrow::after {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22,1,.36,1) .05s;
}
.btn--fx:hover .btn-fx__arrow {
  transform: translateX(4px);
}
.btn--fx:hover .btn-fx__arrow::after {
  transform: scaleX(1);
}

/* Variante: Magnetic-Hover mit subtil wanderndem Scheinwerfer */
.btn--fx-glow {
  position: relative;
}
.btn--fx-glow::before {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.4) 0%, transparent 60%),
    linear-gradient(90deg, var(--brand-dark), var(--brand));
}

/* Focus-visible fuer Tastatur-Nav */
.btn--fx:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn--fx::before,
  .btn--fx::after,
  .btn-fx__label,
  .btn-fx__label::after,
  .btn-fx__arrow,
  .btn-fx__arrow::after,
  .hero-edit__cta::before,
  .hero-edit__cta::after { transition: none !important; transform: none !important; }
  .btn--fx:hover::before,
  .hero-edit__cta:hover::before { transform: translateY(0); }
}

/* -------- Header (sticky, cream-gruen harmonisch mit Hero-Right + Footer) -------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brand-mist);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(10,74,99,.08);
  height: var(--header-h);
  max-height: var(--header-h);
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;      /* volle Breite analog Bottom-Bar */
  width: 100%;
  padding: 0 20px;
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  flex-shrink: 0;
}
.site-header .logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 20px; }
.nav__list { display: flex; align-items: center; gap: 22px; }

/* Tablet: Top-3-Services weg lassen, Mega-Trigger + Kern-Nav reicht */
@media (max-width: 1200px) {
  .nav__list { gap: 16px; }
  .nav__list li:nth-child(2),
  .nav__list li:nth-child(3),
  .nav__list li:nth-child(4) { display: none; }
}
.nav__list a {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  position: relative;
  padding: 6px 0;
}
.nav__list a:hover { color: var(--brand-deep); }
.nav__list a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: all .25s ease;
}
.nav__list a:hover::after,
.nav__list a.is-active::after { width: 100%; left: 0; }

/* NAV-TAG: kleiner Badge neben Link-Text (z.B. "Top") */
.nav__with-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.nav__tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -2px rgba(22,127,163,.5);
}
[data-theme="dark"] .nav__tag { background: var(--brand); color: #07111A; }
.nav__tag--sm { margin-left: 6px; font-size: 9px; padding: 2px 5px; transform: none; }

/* NAV MEGA TRIGGER (Button im Nav-List) */
.nav__has-mega { position: static; }  /* mega wird vom header positioniert */
.nav__mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
}
.nav__mega-trigger::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: all .25s ease;
}
.nav__mega-trigger:hover { color: var(--brand-deep); }
.nav__mega-trigger:hover::after,
.nav__mega-trigger[aria-expanded="true"]::after { width: 100%; left: 0; }
.nav__chevron {
  width: 14px; height: 14px;
  transition: transform .3s ease;
}
.nav__mega-trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
[data-theme="dark"] .nav__mega-trigger { color: var(--ink); }
[data-theme="dark"] .nav__mega-trigger:hover { color: var(--brand); }

/* MEGA-MENU Panel (Full-width Dropdown unter dem Header) */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 95;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.mega[hidden] { display: block; }  /* hidden-Attribut bleibt bis JS toggled; Display niemals none sonst kein transition */
.mega.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mega__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 40px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 24px 48px -16px rgba(15,20,25,.18);
}
[data-theme="dark"] .mega__inner {
  background: var(--bg-mist);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.55);
}
.mega__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.mega__eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.mega__sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mega__item:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  transform: translateX(3px);
}
[data-theme="dark"] .mega__item:hover { background: rgba(22,127,163,.14); }
.mega__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand-mist);
  color: var(--brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mega__item:hover .mega__icon {
  background: var(--brand);
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
}
.mega__icon [data-lucide] { width: 20px; height: 20px; }
.mega__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mega__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.mega__tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
}
[data-theme="dark"] .mega__tag { color: #07111A; }
.mega__desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.mega__item--featured {
  background: linear-gradient(135deg, rgba(22,127,163,.08) 0%, transparent 100%);
  border-color: rgba(22,127,163,.15);
}
[data-theme="dark"] .mega__item--featured {
  background: linear-gradient(135deg, rgba(22,127,163,.14) 0%, rgba(22,127,163,.04) 100%);
  border-color: rgba(22,127,163,.3);
}
.mega__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.mega__overview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
  text-decoration: none;
  transition: gap .25s ease;
}
.mega__overview:hover { gap: 12px; color: var(--brand); }
.mega__overview [data-lucide] { width: 14px; height: 14px; }

/* MOBILE / TABLET: Mega deaktiviert, trigger fuehrt auf Services-Uebersicht */
@media (max-width: 1024px) {
  .mega { display: none !important; }
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background .2s ease;
}
.nav__toggle:hover,
.nav__toggle:focus-visible { background: rgba(10,74,99,.08); outline: none; }
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .3s ease;
  transform-origin: center;
}
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--bg-mist);
  border: 1px solid var(--border);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand); transform: rotate(15deg); }
.theme-toggle [data-lucide] { width: 18px; height: 18px; }
[data-theme="dark"] .theme-toggle { background: var(--bg-mist); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .theme-toggle:hover { background: var(--brand-soft); }

/* -------- Hero -------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(15,20,25,.88) 0%, rgba(15,20,25,.72) 45%, rgba(10,74,99,.55) 100%),
    radial-gradient(circle at 80% 20%, rgba(22,127,163,.4), transparent 50%);
}
.hero__animation {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 100px 0 80px;
}
.hero__inner { max-width: 720px; }
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin-bottom: 16px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand) 0%, #A8D5C5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  font-size: 19px;
  font-weight: 400;
  color: rgba(255,255,255,.85);
  max-width: 580px;
  margin-bottom: 32px;
  line-height: 1.6;
}
.hero__usps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.hero__usp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.95);
}
.hero__usp [data-lucide] { width: 14px; height: 14px; color: var(--brand); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------- Page-Hero (Sub-Pages) -------- */
.page-hero {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .5;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero p { font-size: 18px; opacity: .92; max-width: 640px; }
.page-hero .breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; opacity: .8; margin-bottom: 16px;
  font-family: var(--font-heading); font-weight: 600;
}
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb [data-lucide] { width: 14px; height: 14px; }

/* -------- Sparkles & Bubbles Animation -------- */
.spark, .bubble {
  position: absolute;
  pointer-events: none;
}
.spark { color: rgba(255,255,255,.7); animation: floatUp linear infinite; }
.spark svg { width: 100%; height: 100%; }
.spark-1 { top: 80%; left: 8%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: 0s; }
.spark-2 { top: 90%; left: 22%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: 1.5s; }
.spark-3 { top: 75%; left: 38%; width: 18px; height: 18px; animation-duration: 13s; animation-delay: 3s; }
.spark-4 { top: 95%; left: 55%; width: 14px; height: 14px; animation-duration: 10s; animation-delay: 0.8s; }
.spark-5 { top: 85%; left: 72%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 2.5s; }
.spark-6 { top: 92%; left: 88%; width: 16px; height: 16px; animation-duration: 14s; animation-delay: 4s; }
.spark-7 { top: 70%; left: 12%; width: 11px; height: 11px; animation-duration: 9s; animation-delay: 5s; }
.spark-8 { top: 88%; left: 45%; width: 13px; height: 13px; animation-duration: 11.5s; animation-delay: 1s; }
.spark-9 { top: 78%; left: 62%; width: 15px; height: 15px; animation-duration: 13.5s; animation-delay: 3.5s; }
.spark-10 { top: 96%; left: 80%; width: 12px; height: 12px; animation-duration: 10.5s; animation-delay: 2s; }

@keyframes floatUp {
  0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
  10% { opacity: .7; }
  50% { opacity: .55; }
  100% { transform: translateY(-100vh) translateX(40px) rotate(180deg); opacity: 0; }
}

.bubble {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), rgba(22,127,163,.2) 60%, rgba(22,127,163,.1));
  border: 1px solid rgba(255,255,255,.15);
  animation: bubbleUp ease-in infinite;
  box-shadow: inset 0 0 12px rgba(255,255,255,.2);
}
.bubble::after {
  content: '';
  position: absolute;
  top: 18%; left: 22%;
  width: 22%; height: 22%;
  background: rgba(255,255,255,.65);
  border-radius: 50%;
  filter: blur(2px);
}
.bubble-1 { width: 60px; height: 60px; left: 5%; bottom: -100px; animation-duration: 18s; animation-delay: 0s; }
.bubble-2 { width: 40px; height: 40px; left: 28%; bottom: -100px; animation-duration: 22s; animation-delay: 4s; }
.bubble-3 { width: 80px; height: 80px; left: 50%; bottom: -100px; animation-duration: 25s; animation-delay: 2s; }
.bubble-4 { width: 50px; height: 50px; left: 70%; bottom: -100px; animation-duration: 20s; animation-delay: 6s; }
.bubble-5 { width: 30px; height: 30px; left: 88%; bottom: -100px; animation-duration: 16s; animation-delay: 1s; }

@keyframes bubbleUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .8; }
  90% { opacity: .4; }
  100% { transform: translateY(-110vh) translateX(60px); opacity: 0; }
}

/* -------- Reveal-Animation -------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* -------- Service-Section (BK-Pattern: sticky Image + Akkordeon) -------- */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; gap: 24px; }
  .svc__gallery {
    position: static;
    aspect-ratio: 16 / 10;
    max-height: 280px;
  }
}
@media (max-width: 767px) {
  .svc__gallery { display: none; }
  .svc__gallery-empty { display: none; }
  .accordion__head { padding: 16px 18px; font-size: 15px; }
  .accordion__icon-wrap { width: 36px; height: 36px; }
  .accordion__icon-wrap [data-lucide] { width: 18px; height: 18px; }
  .accordion__toggle { width: 28px; height: 28px; font-size: 18px; }
}
.svc__gallery {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 440px;
  align-self: start;                /* nicht auf Accordion-Hoehe gestreckt */
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--brand-mist) 100%);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
[data-theme="dark"] .svc__gallery {
  background: linear-gradient(160deg, rgba(15,40,52,.6) 0%, rgba(11,31,40,.4) 100%);
}
.svc__gallery-img,
.svc__anim-slot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
  transform: scale(.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8%;
  pointer-events: none;
}
.svc__gallery-img { object-fit: cover; padding: 0; }
.svc__gallery-img.is-active,
.svc__anim-slot.is-active {
  opacity: 1;
  transform: scale(1);
}
.svc__anim-slot svg {
  width: 100%;
  height: 100%;
  max-width: 360px;
  max-height: 360px;
}
.svc__gallery-empty {
  position: absolute; inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  color: var(--brand-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding: 32px;
  opacity: 1;
  transition: opacity .35s ease;
}
.svc__anim-stage.has-active .svc__gallery-empty { opacity: 0; }

/* =================== SVC-ANIMATION KEYFRAMES =================== */
@keyframes anim-bob      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes anim-pulse    { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }
@keyframes anim-spin     { to { transform: rotate(360deg); } }
@keyframes anim-sweep-x  { 0% { transform: translateX(-24px); } 50% { transform: translateX(24px); } 100% { transform: translateX(-24px); } }
@keyframes anim-sweep-xr { 0% { transform: translateX(28px); } 50% { transform: translateX(-28px); } 100% { transform: translateX(28px); } }
@keyframes anim-drop     { 0% { transform: translateY(-30px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes anim-dash     { to { stroke-dashoffset: 0; } }
@keyframes anim-fade     { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes anim-twinkle  { 0%,100% { transform: scale(.5); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@keyframes anim-shine    { 0% { transform: translateX(-120%) skewX(-15deg); } 60%,100% { transform: translateX(140%) skewX(-15deg); } }
@keyframes anim-tilt     { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes anim-scan     { 0% { transform: translateY(-40%); } 50% { transform: translateY(40%); } 100% { transform: translateY(-40%); } }
@keyframes anim-roll     { 0% { transform: translateX(-60%); } 50% { transform: translateX(0); } 100% { transform: translateX(60%); } }
@keyframes anim-bubble   { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }

/* Shared SVG parts */
.sa-stroke { stroke: var(--brand); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sa-fill   { fill: var(--brand); }
.sa-fill-deep { fill: var(--brand-deep); }
.sa-fill-soft { fill: rgba(22,127,163,.15); }
.sa-ink    { fill: var(--ink); }
.sa-muted  { fill: var(--text-muted); opacity: .4; }
[data-theme="dark"] .sa-fill-soft { fill: rgba(79,170,203,.15); }

/* Basis-Transforms so gesetzt dass animate-Klassen sicher greifen */
.sa-bob    { animation: anim-bob 3.2s ease-in-out infinite; transform-origin: center; }
.sa-pulse  { animation: anim-pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sa-spin   { animation: anim-spin 12s linear infinite; transform-origin: center; transform-box: fill-box; }
.sa-sweep  { animation: anim-sweep-x 3.4s ease-in-out infinite; }
.sa-sweepr { animation: anim-sweep-xr 3.4s ease-in-out infinite; }
.sa-drop   { animation: anim-drop 2.8s ease-in infinite; }
.sa-fade   { animation: anim-fade 2.6s ease-in-out infinite; }
.sa-twinkle{ animation: anim-twinkle 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sa-tilt   { animation: anim-tilt 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sa-scan   { animation: anim-scan 3.2s ease-in-out infinite; }
.sa-roll   { animation: anim-roll 4s ease-in-out infinite; }
.sa-bubble { animation: anim-bubble 3.2s ease-in infinite; }
.sa-dash-reveal { stroke-dasharray: 240; stroke-dashoffset: 240; animation: anim-dash 2.6s ease-in-out infinite alternate; }

/* Staggered delays damit mehrere gleiche Elemente rhythmisch versetzt laufen */
.sa-d1 { animation-delay: .15s; }
.sa-d2 { animation-delay: .35s; }
.sa-d3 { animation-delay: .6s; }
.sa-d4 { animation-delay: .9s; }
.sa-d5 { animation-delay: 1.2s; }

/* Pause-Performance: Animationen nur im sichtbaren Slot laufen lassen */
.svc__anim-slot:not(.is-active) * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .sa-bob, .sa-pulse, .sa-spin, .sa-sweep, .sa-sweepr, .sa-drop,
  .sa-fade, .sa-twinkle, .sa-tilt, .sa-scan, .sa-roll, .sa-bubble,
  .sa-dash-reveal { animation: none !important; }
}

/* -------- Akkordeon -------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion__item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .3s ease;
}
.accordion__item:hover { border-color: #d6dad8; }
.accordion__item.is-open {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  transition: all .2s ease;
}
.accordion__icon-wrap {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .3s ease;
}
.accordion__icon-wrap [data-lucide] { width: 20px; height: 20px; }
.accordion__item.is-open .accordion__icon-wrap {
  background: var(--brand);
  color: #fff;
}
.accordion__label { flex: 1; }
.accordion__toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-mist);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 300;
  color: var(--text-muted);
  transition: all .3s ease;
}
.accordion__item.is-open .accordion__toggle {
  background: var(--brand);
  color: #fff;
  transform: rotate(45deg);
}
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.accordion__item.is-open .accordion__body { max-height: 500px; }
.accordion__body-inner {
  padding: 0 22px 22px 80px;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 15px;
}
@media (max-width: 767px) {
  .accordion__body-inner {
    padding: 20px;
    font-size: 14px;
    border-top: 1px solid var(--border);
  }
}

/* FAQ-Variante (schlichter) */
.faq .accordion__item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  margin-bottom: 0;
}
.faq .accordion__item.is-open { border-color: var(--border); }
.faq .accordion__head { padding: 22px 0; gap: 0; }
.faq .accordion__icon-wrap { display: none; }
.faq .accordion__body-inner { padding: 0 0 22px 0; }

@media (max-width: 767px) {
  /* FAQ edge-to-edge mit 40px Innen-Padding */
  .faq {
    margin-left: -40px;
    margin-right: -40px;
  }
  .faq .accordion__head {
    padding: 22px 40px;
  }
  .faq .accordion__body-inner {
    padding: 0 40px 22px;
    border-top: 0;
  }
}

/* -------- Service-Cards Grid -------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              box-shadow .5s cubic-bezier(.22,1,.36,1),
              border-color .3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Glow-Aura hinter der Karte (radial, steigt von unten auf) */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 105%, var(--brand) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .55s ease;
  z-index: -1;
  pointer-events: none;
}
/* Diagonaler Sheen-Sweep beim Hover */
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(22,127,163,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.svc-card:hover {
  transform: translateY(-10px);
  border-color: var(--brand);
  box-shadow: 0 28px 56px -20px rgba(22,127,163,.45),
              0 10px 20px -10px rgba(0,0,0,.12);
}
.svc-card:hover::before { opacity: .35; }
.svc-card:hover::after { transform: translateX(120%); }

[data-theme="dark"] .svc-card::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
}
[data-theme="dark"] .svc-card:hover {
  box-shadow: 0 28px 56px -18px rgba(22,127,163,.55),
              0 10px 20px -10px rgba(0,0,0,.5);
}

.svc-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform .55s cubic-bezier(.34,1.56,.64,1),
              background-color .35s ease,
              color .35s ease,
              box-shadow .4s ease;
}
.svc-card:hover .svc-card__icon {
  transform: scale(1.15) rotate(-8deg);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(22,127,163,.55);
}
.svc-card__icon [data-lucide] {
  width: 26px; height: 26px;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.svc-card:hover .svc-card__icon [data-lucide] { transform: rotate(8deg); }

.svc-card h3 { font-size: 19px; transition: color .3s ease; }
.svc-card:hover h3 { color: var(--brand); }
.svc-card p { color: var(--text-muted); font-size: 14px; margin: 0; }
.svc-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--cta);
  letter-spacing: .02em;
  transition: color .3s ease;
}
.svc-card:hover .svc-card__more { color: var(--brand); }
.svc-card__more [data-lucide] {
  width: 14px; height: 14px;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.svc-card:hover .svc-card__more [data-lucide] { transform: translateX(9px); }

/* -------- USPs -------- */
.usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.usp {
  text-align: center;
  padding: 28px 16px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--border);
  transition: all .3s ease;
}
.usp:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md); }
.usp__icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.usp__icon [data-lucide] { width: 28px; height: 28px; }
.usp h4 { font-family: var(--font-heading); font-size: 16px; margin-bottom: 6px; }
.usp p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* -------- About-Block -------- */
.about-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.about-block__image {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
  background: var(--brand-soft);
}
.about-block__image img { width: 100%; height: 100%; object-fit: cover; }
.about-block__image::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 120px; height: 120px;
  background: var(--brand);
  border-radius: 50%;
  opacity: .15;
  z-index: -1;
}

/* -------- Stats -------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--brand-deep);
  line-height: 1;
  letter-spacing: -.03em;
}
.stat__label {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* -------- Testimonials -------- */
.testimonial {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--warn);
  margin-bottom: 14px;
}
.testimonial__stars [data-lucide] { width: 18px; height: 18px; fill: currentColor; }
.testimonial__quote {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__author-name { font-weight: 600; font-size: 14px; }
.testimonial__author-meta { font-size: 12px; color: var(--text-muted); }

/* -------- CTA-Band -------- */
.cta-band {
  background: linear-gradient(135deg, var(--cta) 0%, #2A4D7A 50%, var(--brand-deep) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 64px;
  position: relative;
  overflow: hidden;
}
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .25;
}
.cta-band::before { width: 300px; height: 300px; background: var(--brand); top: -100px; right: -50px; }
.cta-band::after { width: 240px; height: 240px; background: #4D8FCC; bottom: -80px; left: -50px; }
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; }
.cta-band h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 12px; }
.cta-band p { font-size: 17px; opacity: .9; margin-bottom: 28px; }
.cta-band__trust { display: none; }

@media (max-width: 767px) {
  .cta-band__inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .cta-band h2 {
    font-size: clamp(1.2rem, 5vw, 1.55rem);
    line-height: 1.2;
    margin-bottom: 0;
  }
  .cta-band p { display: none; }
  .cta-band .hero__cta {
    flex-direction: column;
    gap: 10px;
  }
  .cta-band .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .cta-band .eyebrow--white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cta-band .eyebrow--white::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4FD8A2;
    box-shadow: 0 0 0 4px rgba(79,216,162,.3);
    animation: hero-edit-live 2.4s ease-in-out infinite;
  }
  .cta-band__trust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .cta-band__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.28);
    display: block;
  }
  .cta-band__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cta-band__trust-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .cta-band__trust-text strong {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
  }
  .cta-band__trust-text span {
    font-size: 12px;
    opacity: .85;
  }
}

/* -------- Footer (dark editorial — passend zu Hero + CTA-Band) -------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(circle, rgba(255,255,255,.05) 1.2px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(ellipse 80% 60% at 30% 0%, #13365C 0%, #0A1624 55%, #06101A 100%);
  color: rgba(244,247,250,.72);
  padding: 72px 0 0;
  font-size: 14px;
  overflow: hidden;
}
/* Accent-Linie oben — Brand-Farbverlauf als visueller Übergang */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22,127,163,.4) 25%,
    rgba(16,185,129,.5) 50%,
    rgba(22,127,163,.4) 75%,
    transparent 100%);
}
.site-footer h5 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}
.site-footer h5::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.site-footer a {
  color: rgba(244,247,250,.72);
  transition: color .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  position: relative;
  z-index: 1;
}
.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.footer-grid ul li { padding: 0; }
.footer-grid ul li a {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}
.footer-grid ul li a:hover {
  background: rgba(22,127,163,.18);
  border-color: rgba(22,127,163,.5);
  color: #fff;
}

/* Dienstleistungen prominenter — 2-Spalten-Grid, gleichbreite Brand-Pills */
.footer-grid > div:nth-child(3) ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.footer-grid > div:nth-child(3) ul li { width: 100%; }
.footer-grid > div:nth-child(3) ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 9px 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, rgba(22,127,163,.22) 0%, rgba(22,127,163,.06) 100%);
  border: 1px solid rgba(79,170,203,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.18),
              0 0 0 1px rgba(255,255,255,.03) inset;
  text-align: center;
  white-space: nowrap;
}
.footer-grid > div:nth-child(3) ul li a:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(22,127,163,.45),
              0 0 0 1px rgba(255,255,255,.12) inset;
  transform: translateY(-1px);
}
.footer-grid p {
  color: rgba(244,247,250,.65);
  line-height: 1.6;
  margin: 14px 0 0;
}
.footer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  color: #fff;
}
.footer-logo img { height: 36px; filter: brightness(0) invert(.95); }
.social-icons { display: flex; gap: 10px; margin-top: 20px; }
.social-icons a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  transition: all .25s ease;
  color: rgba(244,247,250,.85);
}
.social-icons a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.social-icons [data-lucide] { width: 18px; height: 18px; }

.footer-strip {
  background: var(--brand);
  color: #fff;
  padding: 18px 0;
  font-size: 14px;
  font-family: var(--font-heading);
  font-weight: 600;
}
.footer-strip .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-strip .addr {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.footer-strip .addr [data-lucide] { width: 16px; height: 16px; opacity: .85; }
.footer-strip .addr-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: rgba(255,255,255,.5);
  border-radius: 50%;
}
.footer-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}
.footer-strip a:hover { color: var(--ink); }

.footer-bottom {
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 18px 0;
  font-size: 12px;
  color: rgba(244,247,250,.55);
  position: relative;
  z-index: 1;
}
.footer-bottom a { color: #4FAACB; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------- Forms -------- */
.form-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px;
  background: var(--bg-mist);
  transition: all .2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--brand);
  background: #fff;
  box-shadow: var(--shadow-glow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* MKurti-Form-Wrapper-Override */
#mkurti-form-reinigungsangebot-ajeti-service {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  min-height: 200px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#mkurti-form-reinigungsangebot-ajeti-service * {
  max-width: 100%;
  box-sizing: border-box;
}
#mkurti-form-reinigungsangebot-ajeti-service iframe {
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  #mkurti-form-reinigungsangebot-ajeti-service {
    padding: 20px 16px;
    border-radius: var(--r-lg);
  }
}

/* -------- Trust-Bar -------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.trust-item [data-lucide] { width: 18px; height: 18px; color: var(--brand); }

/* -------- Section-Heading -------- */
.section-heading { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-heading h2 { margin-bottom: 14px; }
.section-heading p { font-size: 17px; color: var(--text-muted); }

/* -------- Process-Steps -------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.step {
  text-align: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.step__num {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  background: var(--cta);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
}
.step h4 { margin-bottom: 6px; font-size: 15px; }
.step p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* -------- Responsive -------- */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .usps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc__gallery { position: static; max-height: 480px; }
}

@media (max-width: 767px) {
  :root { --section-py: 64px; }
  .hero { min-height: 78vh; }
  .hero__content { padding: 80px 0 64px; }
  .hero__lead { font-size: 16px; }
  .nav__list,
  .nav__phone,
  .nav__cta,
  .theme-toggle { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header .container {
    position: relative;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 8px;
  }

  .svc-grid { grid-template-columns: 1fr; }
  .usps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .steps { grid-template-columns: 1fr; }
  .about-block { grid-template-columns: 1fr; gap: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; border-radius: var(--r-lg); }
  .footer-strip .container { flex-direction: column; text-align: center; }
}

/* ========================================================
   APP-FRAME: Left-Rail · Right-Rail · Bottom-Bar
   ======================================================== */

/* Body bekommt Padding, damit Rails/BottomBar Content nicht überdecken */
body.has-frame {
  padding-left: var(--rail-w);
  padding-right: var(--rail-w);
  padding-bottom: var(--bottom-bar-h);
}
/* Header zieht sich unter die Rails — damit er edge-to-edge wie die Bottom-Bar erscheint */
body.has-frame .site-header {
  margin-left: calc(-1 * var(--rail-w));
  margin-right: calc(-1 * var(--rail-w));
}

/* -------- Left-Rail (Breadcrumbs vertikal) -------- */
.left-rail {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: var(--bottom-bar-h);
  width: var(--rail-w);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  z-index: 90;
  overflow: hidden;
}
.left-rail__crumbs {
  display: flex;
  flex-direction: column-reverse;     /* Aktueller Eintrag unten, "Home" oben → Lese-Richtung von oben nach aktuellen Stand */
  align-items: center;
  gap: 14px;
  width: 100%;
  flex: 1;
  padding: 8px 0;
}
.left-rail__crumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .2s ease;
  position: relative;
}
.left-rail__crumb:hover { color: var(--brand-deep); }
.left-rail__crumb-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  padding: 4px 0;
  max-height: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.left-rail__crumb [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }
.left-rail__crumb.is-current {
  color: var(--brand);
  font-weight: 700;
}
.left-rail__sep {
  color: var(--text-soft);
  opacity: .5;
}

/* -------- Right-Rail (Quick-Action-Icons) -------- */
.right-rail {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: var(--bottom-bar-h);
  width: var(--rail-w);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  z-index: 90;
  gap: 6px;
}
.rail-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  position: relative;
  transition: all .2s ease;
  text-decoration: none;
}
.rail-btn:hover {
  background: var(--bg-mist);
  color: var(--brand-deep);
  transform: translateY(-1px);
}
.rail-btn--primary {
  background: var(--brand);
  color: #fff !important;
}
.rail-btn--primary:hover {
  background: var(--brand-dark);
  color: #fff !important;
  box-shadow: 0 6px 16px -4px rgba(22,127,163,.5);
}
.rail-btn--cta {
  background: var(--cta);
  color: #fff !important;
}
.rail-btn--cta:hover {
  background: var(--cta-hover);
  color: #fff !important;
}
.rail-btn [data-lucide] { width: 18px; height: 18px; }
.rail-btn::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: #07111A;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-heading);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.35);
  transition: opacity .18s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.rail-btn:hover::after,
.rail-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
[data-theme="dark"] .rail-btn::after {
  background: #0B0F15;
  color: #F1F5F3;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.6);
}
.right-rail__sep {
  width: 28px;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.right-rail__spacer { flex: 1; }

/* -------- Bottom-Bar (Sticky Futterleiste) -------- */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-bar-h);
  max-height: var(--bottom-bar-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--text-muted);
}
.bottom-bar__left,
.bottom-bar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bottom-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bottom-bar__item [data-lucide] { width: 14px; height: 14px; opacity: .7; }
.bottom-bar__item--brand { color: var(--brand-deep); }
.bottom-bar__item--brand [data-lucide] { color: var(--brand); opacity: 1; }
.bottom-bar a {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bottom-bar a:hover { color: var(--brand-deep); }
.bottom-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 12px;
  transition: all .2s ease;
}
.bottom-bar__cta:hover {
  background: var(--brand-dark);
  color: #fff !important;
}
.bottom-bar__cta [data-lucide] { width: 13px; height: 13px; }

.bottom-bar__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bottom-bar__live::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(22,127,163,.2);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(22,127,163,.2); }
  50% { box-shadow: 0 0 0 5px rgba(22,127,163,.05); }
}

/* Responsive: Tablet schmalere Rails, Mobile keine Rails */
@media (max-width: 1024px) {
  :root {
    --header-h: 50px;
    --bottom-bar-h: 50px;
    --rail-w: 40px;
    --section-screen: calc(100vh - 100px); /* Header + BottomBar = 100px */
  }
  .site-header .logo img { height: 26px; }
  .theme-toggle { width: 32px; height: 32px; }
  .theme-toggle [data-lucide] { width: 16px; height: 16px; }
  .rail-btn { width: 32px; height: 32px; }
  .rail-btn [data-lucide] { width: 14px; height: 14px; }
  .bottom-bar { padding: 0 14px; gap: 10px; }
  .bottom-bar__left .bottom-bar__item:not(.bottom-bar__live) { display: none; }
  .left-rail__crumb-label { font-size: 9px; max-height: 100px; }
  .left-rail { padding: 10px 0; }
  .right-rail { padding: 10px 0; gap: 4px; }
}

@media (max-width: 767px) {
  :root {
    --rail-w: 0;
    --section-screen: calc(100vh - 100px);
    --bottom-bar-h: 62px;
  }
  body.has-frame {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 62px;
  }
  body.has-frame .container { padding-left: 40px; padding-right: 40px; }
  /* Nur sticky Header behält schlankes Padding */
  body.has-frame .site-header .container { padding-left: 20px; padding-right: 20px; }
  .left-rail,
  .right-rail { display: none; }

  /* Mobile Bottom-Action-Bar — prominent, full-width, 4 Icon-Buttons */
  .bottom-bar {
    height: 62px;
    max-height: 62px;
    padding: 0;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid rgba(10,74,99,.1);
    box-shadow: 0 -8px 24px rgba(7,17,26,.06);
  }
  .bottom-bar__left {
    flex-shrink: 0;
    padding-left: 14px;
    gap: 10px;
  }
  .bottom-bar__live {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-deep);
    letter-spacing: .02em;
  }
  .bottom-bar__live span {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
  }
  .bottom-bar__left .bottom-bar__item:not(.bottom-bar__live) { display: none; }

  .bottom-bar__right {
    flex: 1;
    justify-content: flex-end;
    gap: 0;
    padding-right: 4px;
  }
  .bottom-bar a:not(.bottom-bar__cta) {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--brand-deep);
    flex-shrink: 0;
  }
  .bottom-bar a:not(.bottom-bar__cta) span { display: none; }
  .bottom-bar a:not(.bottom-bar__cta) [data-lucide] {
    width: 20px;
    height: 20px;
    opacity: 1;
  }
  .bottom-bar a:not(.bottom-bar__cta):hover,
  .bottom-bar a:not(.bottom-bar__cta):active {
    background: var(--brand-mist);
  }

  .bottom-bar__cta {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 6px;
    height: 44px;
  }
  .bottom-bar__cta .bottom-bar__cta-label { display: inline; }
  .bottom-bar__cta [data-lucide] { width: 14px; height: 14px; }
}

/* Dark-Mode Mobile-Bottom-Bar */
@media (max-width: 767px) {
  [data-theme="dark"] .bottom-bar {
    background: #0E1C24;
    border-top-color: rgba(170,213,228,.1);
  }
  [data-theme="dark"] .bottom-bar__live { color: var(--brand-dark); }
  [data-theme="dark"] .bottom-bar a:not(.bottom-bar__cta) { color: #E8F0EC; }
  [data-theme="dark"] .bottom-bar a:not(.bottom-bar__cta):hover,
  [data-theme="dark"] .bottom-bar a:not(.bottom-bar__cta):active {
    background: rgba(79,170,203,.1);
  }
}

/* ========================================================
   SECTION-PATTERNS: Full-Screen + Hero-Media-Constraint
   ======================================================== */

/* Full-Screen Section: nimmt verfügbaren Viewport minus Header+BottomBar */
.section--screen {
  min-height: var(--section-screen);
  display: flex;
  align-items: center;
  padding: 56px 0;
}

/* Hero-Section mit Bild-Constraint (Bild/SVG-Anim max 60vh) */
.section--hero {
  min-height: var(--section-screen);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.section--hero .hero__bg,
.section--hero .hero__media {
  height: var(--hero-media-h);
  max-height: 60vh;
  min-height: var(--hero-media-min);
  position: absolute;
  inset: auto 0 0 0;        /* Bild sitzt unten in der Section, oben Text-Bereich */
  background-size: cover;
  background-position: center;
}

/* Hero alt (volle Section-Background) — bleibt für Backwards-Compat */
.hero { min-height: var(--section-screen); }

/* ========================================================
   GOOGLE-REVIEWS BLOCK
   ======================================================== */
.gr-block {
  background: linear-gradient(135deg, var(--brand-mist) 0%, var(--bg) 100%);
  border-radius: var(--r-xl);
  padding: 48px 40px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.gr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.gr-google-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gr-google-icon {
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.gr-google-icon svg { width: 26px; height: 26px; }
.gr-rating-big {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.gr-rating-stars {
  display: flex;
  gap: 2px;
  color: #FBBC04;
  margin-top: 4px;
}
.gr-rating-stars [data-lucide] { width: 16px; height: 16px; fill: currentColor; }
.gr-rating-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}
.gr-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--cta);
  padding: 10px 20px;
  border: 2px solid var(--cta);
  border-radius: 9999px;
  transition: all .2s ease;
}
.gr-cta:hover { background: var(--cta); color: #fff !important; }
.gr-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gr-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: 0 4px 14px -8px rgba(15,20,25,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gr-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgba(15,20,25,.18);
}
.gr-item__name { color: var(--ink); }
.gr-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gr-item__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
}
.gr-item__name { font-weight: 700; font-size: 14px; }
.gr-item__date { font-size: 11px; color: var(--text-muted); }
.gr-item__stars {
  display: flex;
  gap: 1px;
  color: #FBBC04;
  margin-bottom: 8px;
}
.gr-item__stars [data-lucide] { width: 14px; height: 14px; fill: currentColor; }
.gr-item__text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }

@media (max-width: 1024px) {
  .gr-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .gr-block { padding: 28px 22px; }
  .gr-list { display: none; }
  /* Badge wie ein Button auf voller Breite */
  .gr-google-badge {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px 14px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(10,74,99,.06);
  }
  [data-theme="dark"] .gr-google-badge { background: var(--bg-mist); }
  .gr-google-icon {
    width: 40px;
    height: 40px;
    box-shadow: none;
    border-radius: 10px;
  }
  .gr-google-icon svg { width: 22px; height: 22px; }
  .gr-rating-big { font-size: 22px; }
  .gr-rating-stars [data-lucide] { width: 12px; height: 12px; }
  .gr-rating-stars { margin-top: 2px; }
  /* Bewertungs-Anzahl ausblenden bis min. 20 Reviews vorhanden sind */
  .gr-rating-meta { display: none; }
  /* Dezenter Spruch statt Kundenkarten */
  .gr-header { margin-bottom: 20px; padding-bottom: 20px; }
  .gr-block::after {
    content: '„Wir reden nicht viel — unsere Kundinnen und Kunden tun es für uns."';
    display: block;
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    text-align: center;
  }
}

/* ========================================================
   SCROLL-SNAP für full-screen Home-Sections (optional)
   ======================================================== */
.snap-y { scroll-snap-type: y proximity; }
.snap-y .section--screen { scroll-snap-align: start; }

/* ========================================================
   IN-PAGE FORM CARD (für Home-eingebettetes Formular)
   ======================================================== */
.form-inline {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.form-inline * { max-width: 100%; box-sizing: border-box; }
.form-inline iframe { width: 100% !important; max-width: 100% !important; }
[data-theme="dark"] .form-inline { background: var(--bg-mist); }
@media (max-width: 767px) {
  .form-inline { padding: 20px 16px; border-radius: var(--r-lg); }
}

/* ========================================================
   THEMATISCHE REINIGUNGS-ANIMATIONEN
   ======================================================== */

/* --- 1. Wischeffekt (Squeegee Wipe) — diagonaler Glanz wischt über Heroes --- */
.wipe-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.wipe-shine::before {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 60%; height: 200%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,0) 60%,
    transparent 70%);
  animation: squeegee 7s ease-in-out infinite;
  filter: blur(2px);
}
@keyframes squeegee {
  0% { transform: translateX(0) rotate(8deg); }
  60% { transform: translateX(280%) rotate(8deg); }
  100% { transform: translateX(280%) rotate(8deg); }
}

/* --- 2. Wassertropfen (mit Trail) — fallen langsam von oben --- */
.drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.drop {
  position: absolute;
  width: 6px;
  background: linear-gradient(180deg, transparent 0%, rgba(180,220,210,.6) 80%, rgba(255,255,255,.9) 100%);
  border-radius: 50%;
  animation: dropFall linear infinite;
  filter: blur(.3px);
}
.drop::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}
.drop-1 { left: 12%; height: 60px; animation-duration: 6s; animation-delay: 0s; }
.drop-2 { left: 28%; height: 40px; animation-duration: 8s; animation-delay: 2s; }
.drop-3 { left: 45%; height: 70px; animation-duration: 5s; animation-delay: 1s; }
.drop-4 { left: 62%; height: 50px; animation-duration: 7s; animation-delay: 3s; }
.drop-5 { left: 78%; height: 45px; animation-duration: 6.5s; animation-delay: .5s; }
.drop-6 { left: 90%; height: 55px; animation-duration: 7.5s; animation-delay: 4s; }
@keyframes dropFall {
  0% { transform: translateY(-100px); opacity: 0; }
  10% { opacity: .8; }
  85% { opacity: .7; }
  100% { transform: translateY(110vh); opacity: 0; }
}

/* --- 3. Schimmernder Gradient-Layer (Polish-Shimmer) --- */
.shimmer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(22,127,163,.08) 25%,
    rgba(255,255,255,.04) 50%,
    rgba(22,127,163,.08) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 12s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* --- 4. Floating Soap-Blobs (langsam schwebende grosse Kreise im Hintergrund) --- */
.blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  animation: blobMove ease-in-out infinite;
  mix-blend-mode: screen;
}
.blob-1 { width: 320px; height: 320px; top: -60px; left: -80px; background: var(--brand); animation-duration: 22s; }
.blob-2 { width: 280px; height: 280px; bottom: -80px; right: -60px; background: #4D8FCC; animation-duration: 28s; animation-delay: 5s; }
.blob-3 { width: 240px; height: 240px; top: 40%; right: 20%; background: #A8D5C5; animation-duration: 25s; animation-delay: 3s; }
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.1); }
  66% { transform: translate(-40px, 50px) scale(.95); }
}

/* --- 5. Service-Card Hover: Lift + Glow-Aura + Sheen-Sweep + Icon-Kick --- */
/* Definiert im Haupt-Block (.svc-card) — kein 3D-Tilt mehr, der wuerde den Lift ueberschreiben */

/* --- 6. Pulse-Ring beim grünen CTA (Aufmerksamkeit) --- */
.btn--green.btn--lg {
  position: relative;
}
.btn--green.btn--lg::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid var(--brand);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.92); opacity: 0; }
  20% { opacity: .5; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* --- 7. Akkordeon-Slide-In mit Bounce --- */
.accordion__body {
  transition: max-height .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* --- 8. Reveal mit subtler Side-Variation --- */
.reveal-left { transform: translateX(-30px); opacity: 0; transition: all .8s cubic-bezier(.16, 1, .3, 1); }
.reveal-right { transform: translateX(30px); opacity: 0; transition: all .8s cubic-bezier(.16, 1, .3, 1); }
.reveal-left.is-revealed,
.reveal-right.is-revealed { transform: translateX(0); opacity: 1; }

/* --- 9. Bubble-Improvement: realistischere Seifenblasen --- */
.bubble {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.5) 0%, rgba(22,127,163,.15) 30%, rgba(255,255,255,.05) 60%, rgba(22,127,163,.1) 100%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.15),
    inset 4px 4px 8px rgba(255,255,255,.4),
    0 0 12px rgba(22,127,163,.2);
}

/* --- 10. Hero-Mask-Effekt (Mop-Trail unten) --- */
.mop-trail {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.08) 100%);
  pointer-events: none;
  z-index: 1;
}
.mop-trail::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.1) 0%, transparent 60%);
  animation: mopWipe 5s ease-in-out infinite;
}
@keyframes mopWipe {
  0%, 100% { transform: translateX(-15%); opacity: .3; }
  50% { transform: translateX(15%); opacity: .8; }
}

/* -------- Reduce motion -------- */
@media (prefers-reduced-motion: reduce) {
  .spark, .bubble, .reveal, .reveal-left, .reveal-right,
  .wipe-shine::before, .drop, .shimmer-layer, .blob,
  .btn--green.btn--lg::before, .mop-trail::before {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}

/* ========================================================
   Hero-System v2 — zwei Varianten
   .hero--home : Fullbleed BG (Video/Picture) + Overlay, 100vh-120px
   .hero--page : Gradient + SVG-Dekoration (Wassertropfen,
                 Seifenblasen, Squeegee), innerer Container
   ======================================================== */

.hero-v2 {
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-fg);
}

/* ---------- Home-Variante (Split-Design Fossil-Stil: gruen | cream) ---------- */
.hero--home {
  padding: 0;
  display: block;
  background: transparent;
  color: inherit;
}
.hero--home__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: calc(100vh - 120px);
}
.hero--home__left {
  background:
    linear-gradient(155deg, rgba(10,74,99,.94) 0%, rgba(8,30,42,.97) 70%, rgba(4,12,18,.99) 100%),
    url('../images/home/hero.jpg') center/cover no-repeat;
  color: #fff;
  position: relative;
  padding: 72px 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero--home__index {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.hero--home__index::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,.3);
}
.hero--home__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0;
  color: #fff;
  position: relative;
  z-index: 2;
}
.hero--home__title-line--accent {
  display: block;
  color: #fff;
  font-weight: 300;
  font-style: italic;
  margin-top: 2px;
  opacity: .85;
}
.hero--home__lead {
  margin: 26px 0 32px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 440px;
  position: relative;
  z-index: 2;
}
.hero--home__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.hero--home__meta {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}
.hero--home__meta-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
}
.hero--home__meta-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero--home__meta-text {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}
.hero--home__meta-text strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 2px;
}

.hero--home__right {
  background: var(--brand-mist);
  color: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero--home__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(7rem, 16vw, 18rem);
  line-height: .86;
  letter-spacing: -.035em;
  color: rgba(10,74,99,.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.hero--home__visual {
  position: relative;
  z-index: 2;
  width: 360px;
  height: 360px;
  max-width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--home__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(10,74,99,.2);
}
.hero--home__visual::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    #fff 0%,
    var(--brand-mist) 70%,
    var(--brand-soft) 100%);
  box-shadow: 0 20px 50px -15px rgba(10,74,99,.12);
}
.hero--home__visual-icon {
  position: relative;
  z-index: 3;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero--home__visual-icon [data-lucide] {
  width: 120px;
  height: 120px;
  stroke-width: 1.2;
}
/* Pulse-Animation entfernt fuer ruhigeren Look */
.hero--home__right-side {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--brand-deep);
}
.hero--home__right-side button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(10,74,99,.2);
  background: transparent;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.hero--home__right-side button:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.hero--home__right-side button [data-lucide] { width: 14px; height: 14px; }
.hero--home__right-side-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(10,74,99,.2);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
}
.hero--home__right-side-thumb [data-lucide] { width: 20px; height: 20px; stroke-width: 1.5; }

.hero--home__footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(10,74,99,.1);
  position: relative;
  background: var(--brand-mist);
}
.hero--home__footer-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 32px;
  min-height: 72px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .2s ease, color .2s ease;
  border-right: 1px solid rgba(10,74,99,.08);
  position: relative;
  background: transparent;
}
.hero--home__footer-box:last-child { border-right: none; }
.hero--home__footer-box--2 { justify-content: center; }
.hero--home__footer-box--3 { justify-content: flex-end; color: var(--brand-deep); }

.hero--home__footer-box:hover { background: #fff; color: var(--brand-deep); }
.hero--home__footer-box:hover .hero--home__footer-accent { background: var(--brand); }

.hero--home__footer-accent {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  flex-shrink: 0;
  transition: background .25s ease;
}
.hero--home__footer-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero--home__footer-label-main {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero--home__footer-label-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(10,74,99,.6);
  text-transform: uppercase;
}
.hero--home__footer-box:hover .hero--home__footer-label-sub { color: rgba(255,255,255,.7); }
.hero--home__footer-box [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; }

.hero__scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  animation: scroll-cue-float 2.4s ease-in-out infinite;
}
.hero__scroll-cue [data-lucide] { width: 18px; height: 18px; }
@keyframes scroll-cue-float {
  0%, 100% { transform: translate(-50%, 0); opacity: .7; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ---------- Page-Variante ---------- */
.hero--page {
  background: linear-gradient(135deg,
    var(--hero-bg) 0%,
    var(--hero-bg-grad-from) 55%,
    var(--hero-bg-grad-to) 100%);
}
.hero--page .hero__content {
  position: relative;
  z-index: 3;
  padding: 80px 0;
  width: 100%;
}
.hero--page .hero__content .container {
  max-width: 1100px;
}
.hero--page .hero__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  margin-bottom: 20px;
  font-family: var(--font-heading);
  letter-spacing: .02em;
}
.hero--page .hero__crumb a { color: rgba(255,255,255,.7); }
.hero--page .hero__crumb a:hover { color: #fff; }
.hero--page .hero__crumb [data-lucide] { width: 14px; height: 14px; opacity: .6; }
.hero--page .hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.hero--page h1 {
  color: #fff;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  font-weight: 800;
  max-width: 780px;
}
.hero--page h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #AFD6C6 0%, #6CA290 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero--page .hero__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: rgba(255,255,255,.88);
  max-width: 680px;
  margin-bottom: 28px;
}
.hero--page .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- SVG-Dekoration (thematisch Reinigung) ---------- */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-deco__svg {
  position: absolute;
  color: var(--brand);
  opacity: .2;
}
.hero-deco__svg--tl { top: -60px; left: -40px; width: 340px; height: 340px; opacity: .12; }
.hero-deco__svg--br { bottom: -80px; right: -60px; width: 420px; height: 420px; opacity: .14; }
.hero-deco__svg--mr { top: 50%; right: 8%; width: 180px; height: 180px; transform: translateY(-50%); opacity: .18; }
.hero-deco__svg--ml { top: 20%; left: 4%; width: 120px; height: 120px; opacity: .22; }

.hero-deco__bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.35) 0%,
    rgba(170,213,228,.15) 50%,
    rgba(22,127,163,.05) 100%);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(1px);
  animation: hero-bubble-drift 18s ease-in-out infinite;
}
.hero-deco__bubble--1 { top: 15%; right: 12%; width: 90px; height: 90px; animation-delay: 0s; }
.hero-deco__bubble--2 { top: 55%; right: 22%; width: 56px; height: 56px; animation-delay: 3s; }
.hero-deco__bubble--3 { top: 70%; right: 8%; width: 38px; height: 38px; animation-delay: 6s; }
.hero-deco__bubble--4 { top: 30%; left: 10%; width: 44px; height: 44px; animation-delay: 2s; }

@keyframes hero-bubble-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(10px, -18px) scale(1.06); }
  66%      { transform: translate(-8px, -10px) scale(.96); }
}

.hero-deco__drop {
  position: absolute;
  width: 3px;
  height: 14px;
  border-radius: 3px 3px 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(170,213,228,.25) 100%);
  filter: blur(.3px);
  animation: hero-drop-fall 6s linear infinite;
  opacity: 0;
}
.hero-deco__drop--1 { top: -20px; left: 18%;  animation-delay: 0s; }
.hero-deco__drop--2 { top: -20px; left: 42%;  animation-delay: 1.5s; }
.hero-deco__drop--3 { top: -20px; left: 68%;  animation-delay: 3s; }
.hero-deco__drop--4 { top: -20px; right: 14%; animation-delay: 4.5s; }

@keyframes hero-drop-fall {
  0%   { transform: translateY(0)   scaleY(.6); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .4; }
  100% { transform: translateY(110vh) scaleY(1.2); opacity: 0; }
}

.hero-deco__shine {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(255,255,255,.025) 50%,
    transparent 58%);
  animation: hero-shine-sweep 22s ease-in-out infinite;
}
@keyframes hero-shine-sweep {
  0%, 100% { transform: translateX(-20%); opacity: 0; }
  50%      { transform: translateX(20%);  opacity: .7; }
}

/* ---------- Service-Variante (Showcase mit Ghost-Text + Info-Boxes) ---------- */
.hero--service {
  background: linear-gradient(145deg, #07111A 0%, #0A1C26 50%, #14273A 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.hero--service .hero-deco { z-index: 0; }

.hero--service__ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -52%);
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(8rem, 18vw, 22rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.hero--service .hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 0 24px;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}
.hero--service .hero__content .container {
  max-width: 1100px;
  width: 100%;
}

.hero--service__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero--service__title h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  margin: 14px 0 0;
  font-weight: 800;
}
.hero--service__title .hero__crumb { margin-bottom: 20px; }
.hero--service__title .hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand);
  display: inline-block;
}

.hero--service__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.hero--service__accent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 8px solid var(--brand);
  opacity: .9;
  animation: hero-service-accent 14s ease-in-out infinite;
}
@keyframes hero-service-accent {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  50%      { transform: translate(-50%, -50%) rotate(10deg); }
}
.hero--service__icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  color: #fff;
}
.hero--service__icon [data-lucide] {
  width: 88px;
  height: 88px;
  stroke-width: 1.2;
}

/* =================== OFFERTE-PAGE (Form-First-Layout, kein Hero) =================== */
.offerte-page {
  padding: 60px 48px 120px;
  min-height: calc(100vh - 120px);
  background: var(--bg);
}
.offerte-page__container { max-width: 1240px; margin: 0 auto; }

.offerte-page__intro { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.offerte-page__crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 24px;
}
.offerte-page__crumb a { color: var(--text-muted); text-decoration: none; transition: color .25s ease; }
.offerte-page__crumb a:hover { color: var(--brand); }
.offerte-page__crumb [data-lucide] { width: 14px; height: 14px; }
.offerte-page__crumb span { color: var(--ink); }

.offerte-page__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--brand-soft);
  border: 1px solid rgba(22,127,163,.2);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 20px;
}
[data-theme="dark"] .offerte-page__eyebrow {
  background: rgba(22,127,163,.12);
  border-color: rgba(22,127,163,.3);
}
.offerte-page__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(22,127,163,.25);
  animation: hero-edit-live 2.4s ease-in-out infinite;
}

.offerte-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
  color: var(--ink); margin: 0 0 14px;
}
.offerte-page__lead {
  font-size: clamp(.9rem, 1vw, 1rem); line-height: 1.55;
  color: var(--text-muted); max-width: 52ch; margin: 0 auto;
}

.offerte-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px; align-items: start;
}

.offerte-page__form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px 36px 28px;
  box-shadow: 0 40px 80px -30px rgba(22,127,163,.25), 0 12px 24px -12px rgba(15,20,25,.08);
  position: relative; overflow: hidden;
}
.offerte-page__form::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 50%, var(--brand) 100%);
}
[data-theme="dark"] .offerte-page__form {
  background: var(--bg-mist);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 12px 24px -12px rgba(0,0,0,.4);
}
.offerte-page__form-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}
.offerte-page__form-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--brand-text);
}
.offerte-page__form-badge [data-lucide] { width: 16px; height: 16px; }
.offerte-page__form-time {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-muted);
}
.offerte-page__form-time [data-lucide] { width: 13px; height: 13px; }
.offerte-page__form-foot {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: 20px; margin-top: 24px;
  border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.offerte-page__form-foot [data-lucide] { width: 13px; height: 13px; flex-shrink: 0; color: var(--brand); }
.offerte-page__form-foot a { color: var(--brand-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.offerte-page__aside {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: calc(var(--header-h) + 20px);
}
.offerte-page__direct {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 20px 40px -16px rgba(22,127,163,.5);
  position: relative; overflow: hidden;
}
.offerte-page__direct::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.08); pointer-events: none;
}
.offerte-page__direct-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 8px;
  position: relative;
}
.offerte-page__direct-phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 800;
  color: #fff !important; text-decoration: none;
  letter-spacing: -.015em; line-height: 1.1;
  position: relative; transition: transform .3s ease;
}
.offerte-page__direct-phone:hover { transform: translateX(3px); }
.offerte-page__direct-phone [data-lucide] { width: 24px; height: 24px; }
.offerte-page__direct-hours {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(255,255,255,.8);
  margin-top: 8px;
  font-family: var(--font-heading); font-weight: 500;
  position: relative;
}
.offerte-page__direct-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4FD8A2;
  box-shadow: 0 0 0 3px rgba(79,216,162,.25);
  animation: hero-edit-live 2.4s ease-in-out infinite;
}
.offerte-page__direct-wa {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 16px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #fff !important; text-decoration: none;
  transition: background .3s ease, transform .3s ease;
  position: relative;
}
.offerte-page__direct-wa:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }
.offerte-page__direct-wa [data-lucide] { width: 14px; height: 14px; }

.offerte-page__guarantees {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 26px;
}
[data-theme="dark"] .offerte-page__guarantees {
  background: var(--bg-mist);
  border-color: rgba(255,255,255,.08);
}
.offerte-page__guarantees h3 {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-text); margin: 0 0 18px;
}
.offerte-page__guarantees ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.offerte-page__guarantees li { display: flex; gap: 14px; align-items: flex-start; }
.offerte-page__guarantees li [data-lucide] {
  width: 20px; height: 20px; color: var(--brand);
  flex-shrink: 0; margin-top: 2px;
}
.offerte-page__guarantees strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700;
  color: var(--ink); margin-bottom: 3px;
}
.offerte-page__guarantees span { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

@media (max-width: 1024px) {
  .offerte-page__layout { grid-template-columns: 1fr; gap: 28px; }
  .offerte-page__aside { position: static; }
}
@media (max-width: 767px) {
  .offerte-page { padding: 32px 20px 80px; }
  .offerte-page__intro { margin-bottom: 36px; }
  .offerte-page__form { padding: 24px 22px; }
  .offerte-page__form-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =================== SPOTLIGHT HERO (Home — Grid-Layout + Cross-Fade Tool-Cycle) =================== */
.hero-spotlight {
  --hs-bg: #0A0F14;
  --hs-text: #EEF1F3;
  --hs-text-dim: rgba(255, 255, 255, 0.55);
  --hs-text-faint: rgba(255, 255, 255, 0.32);
  --hs-stroke: rgba(255, 255, 255, 0.08);
  --hs-stroke-strong: rgba(255, 255, 255, 0.16);
  --hs-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  height: calc(100vh - var(--header-h) - var(--bottom-bar-h));
  min-height: 640px;
  background: var(--hs-bg);
  color: var(--hs-text);
  overflow: hidden;
  padding: 24px 48px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "tl tr"
    "center center"
    "bl br"
    "seo seo";
  gap: 8px 16px;
}
/* Ultra-wide: Hero exakt an Viewport koppeln, Disc bleibt proportional */
@media (min-width: 1800px) {
  .hero-spotlight { padding: 28px 64px 32px; }
}
@media (min-width: 2400px) {
  .hero-spotlight { padding: 36px 96px 40px; }
}
[data-theme="dark"] .hero-spotlight { background: #050A10; }

/* Ambient dot-grid */
.hero-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
/* Ambient brand glow */
.hero-spotlight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(22, 127, 163, 0.18) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: hs-ambient 9s var(--hs-ease) infinite;
}
@keyframes hs-ambient {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* === TL: Location-Chip + Micro-Nav === */
.hs-tl { grid-area: tl; display: flex; flex-direction: column; gap: 28px; z-index: 2; }
.hs-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--hs-stroke-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--hs-text);
  width: fit-content;
}
.hs-live-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: hs-livePulse 2s infinite;
}
@keyframes hs-livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hs-micro-nav { display: flex; flex-direction: column; gap: 14px; padding-left: 4px; list-style: none; margin: 0; }
.hs-micro-nav a {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hs-text-dim); text-decoration: none;
  position: relative; padding-left: 22px;
  transition: color 0.3s var(--hs-ease);
  width: fit-content;
}
.hs-micro-nav a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 12px; height: 1px; background: var(--hs-text-faint);
  transition: width 0.3s var(--hs-ease), background 0.3s var(--hs-ease);
}
.hs-micro-nav a:hover { color: var(--hs-text); }
.hs-micro-nav a:hover::before { width: 18px; background: var(--brand-deep, #4FAACB); }

/* === TR: Seit-Badge === */
.hs-tr { grid-area: tr; display: flex; justify-content: flex-end; align-items: flex-start; z-index: 2; }
.hs-since { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hs-since__label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hs-text-dim);
}
.hs-since__year {
  font-family: var(--font-heading, 'Manrope'), sans-serif;
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--hs-text);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.hs-since__sub {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hs-text-faint);
  margin-top: 4px;
}

/* === CENTER: Spotlight + Disc + Cross-Fade Tools === */
.hs-center {
  grid-area: center;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; min-height: 0;
}
.hs-spotlight {
  position: relative;
  width: min(380px, 32vmin, 38vh);
  height: min(380px, 32vmin, 38vh);
  display: grid; place-items: center;
}
@media (min-width: 1800px) {
  .hs-spotlight { width: min(420px, 30vmin, 40vh); height: min(420px, 30vmin, 40vh); }
}
.hs-orbit {
  position: absolute; inset: -40px;
  border: 1px dashed rgba(79, 170, 203, 0.22);
  border-radius: 50%;
  animation: hs-orbitSpin 80s linear infinite;
}
.hs-orbit::before, .hs-orbit::after {
  content: ""; position: absolute;
  width: 6px; height: 6px;
  background: #4FAACB; border-radius: 50%;
  box-shadow: 0 0 12px rgba(79, 170, 203, 0.6);
}
.hs-orbit::before { top: -3px; left: 50%; transform: translateX(-50%); }
.hs-orbit::after  { bottom: -3px; right: 30%; width: 4px; height: 4px; opacity: 0.6; }
@keyframes hs-orbitSpin { to { transform: rotate(360deg); } }
.hs-ring {
  position: absolute; inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  animation: hs-orbitSpin 120s linear infinite reverse;
}
.hs-disc {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #FFFFFF 0%, #F3F6F8 60%, #E6ECEF 100%);
  box-shadow:
    0 0 80px rgba(79, 170, 203, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  display: grid; place-items: center;
  overflow: hidden;
}
.hs-disc::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 80%, rgba(22, 127, 163, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hs-tool-svg { width: 92%; height: 92%; overflow: visible; }

/* Cross-fade: all tools stacked, only .is-active visible */
.hs-tool {
  transform-origin: center; transform-box: fill-box;
  opacity: 0; transform: scale(0.96); filter: blur(2px);
  transition:
    opacity 0.7s var(--hs-ease),
    transform 0.9s var(--hs-ease),
    filter 0.7s var(--hs-ease);
  pointer-events: none;
}
.hs-tool.is-active { opacity: 1; transform: scale(1); filter: blur(0); }
.hs-tool:not(.is-active) * { animation-play-state: paused !important; }

/* Caption unter Kreis */
.hs-caption {
  position: absolute; left: 50%; bottom: -42px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hs-text-dim); white-space: nowrap;
}
.hs-caption b { color: var(--hs-text); font-weight: 700; }
.hs-caption::before { content: ""; width: 24px; height: 1px; background: #4FAACB; }

/* === Tool-Index (right middle) === */
.hs-index {
  position: absolute; top: 50%; right: 48px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 3;
}
.hs-index__item {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hs-text-faint);
  transition: color 0.4s var(--hs-ease);
  position: relative;
}
.hs-index__num {
  font-family: var(--font-heading, 'Manrope'), sans-serif;
  font-weight: 700; letter-spacing: 0; min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.hs-index__name { transition: transform 0.4s var(--hs-ease); }
.hs-index__bar {
  position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 1px; background: var(--hs-text-faint);
  transition: width 0.4s var(--hs-ease), background 0.4s var(--hs-ease);
}
.hs-index__item.is-active { color: var(--hs-text); }
.hs-index__item.is-active .hs-index__bar { width: 28px; background: #4FAACB; }
.hs-index__item.is-active .hs-index__name { transform: translateX(4px); }

/* === BL: Title + Lead === */
.hs-bl { grid-area: bl; z-index: 2; max-width: 520px; align-self: end; }
.hs-h1 {
  font-family: var(--font-heading, 'Manrope'), sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1; letter-spacing: -0.035em;
  color: var(--hs-text);
}
.hs-h1 .hs-accent { color: #4FAACB; }
.hs-sub {
  margin-top: 14px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--hs-text-dim);
}
.hs-sub .hs-dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: #4FAACB; vertical-align: middle; margin: 0 10px 3px;
}
.hs-lead {
  margin-top: 8px;
  font-size: 12px; line-height: 1.45;
  color: var(--hs-text-dim); text-wrap: pretty;
  max-width: 460px;
}
.hs-lead b { color: var(--hs-text); font-weight: 600; }

/* === BR: CTA === */
.hs-br { grid-area: br; display: flex; justify-content: flex-end; align-items: flex-end; z-index: 2; }
.hs-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--hs-stroke-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  text-decoration: none;
  color: var(--hs-text);
  transition: border-color 0.3s var(--hs-ease), background 0.3s var(--hs-ease), transform 0.3s var(--hs-ease);
}
.hs-cta:hover {
  border-color: #4FAACB;
  background: rgba(22, 127, 163, 0.08);
  transform: translateY(-2px);
}
.hs-cta__portrait {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, #167FA3 0%, #1D3557 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.hs-cta__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hs-cta__status {
  position: absolute; right: -1px; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--hs-bg);
}
.hs-cta__body { display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.hs-cta__label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: #4FAACB;
}
.hs-cta__title {
  font-size: 13px; font-weight: 600;
  color: var(--hs-text); white-space: nowrap;
}
.hs-cta__arrow {
  width: 38px; height: 38px; border-radius: 50%;
  background: #167FA3;
  display: grid; place-items: center; flex-shrink: 0;
  color: #fff;
  transition: transform 0.5s var(--hs-ease), background 0.3s var(--hs-ease);
}
.hs-cta__arrow [data-lucide] { width: 16px; height: 16px; }
.hs-cta:hover .hs-cta__arrow { transform: rotate(-45deg); background: #4FAACB; }

/* === SEO-Bar === */
.hs-seo {
  grid-area: seo; justify-self: center;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  border: 1px solid var(--hs-stroke);
  border-radius: 999px;
  background: rgba(10, 15, 20, 0.7);
  backdrop-filter: blur(12px);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--hs-text-dim);
  white-space: nowrap;
  z-index: 2;
  max-width: 100%; overflow: hidden;
}
.hs-seo span { display: inline-flex; align-items: center; gap: 6px; }
.hs-seo b { color: var(--hs-text); font-weight: 600; }
.hs-seo__sep { width: 1px; height: 10px; background: var(--hs-stroke-strong); display: inline-block; }
.hs-seo__star { color: #f5b300; }

/* ======= Arbeits-Animationen je Tool ======= */

/* 01 Fenster — Squeegee-Sweep + Foam-Erase + Splash */
.hs-fenster-squeegee { transform-origin: center; transform-box: fill-box; animation: hs-squeegeePass 4s var(--hs-ease) infinite; }
@keyframes hs-squeegeePass {
  0%, 8%    { transform: translate(55px, 30px) rotate(4deg); }
  50%, 58%  { transform: translate(55px, 140px) rotate(-2deg); }
  100%      { transform: translate(55px, 30px) rotate(4deg); }
}
.hs-fenster-pad { transform-origin: center; transform-box: fill-box; animation: hs-padWobble 0.6s ease-in-out infinite; }
@keyframes hs-padWobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.6px); } }
.hs-fenster-foam { animation: hs-foamErase 4s var(--hs-ease) infinite; }
@keyframes hs-foamErase { 0%, 8% { opacity: 1; } 50%, 58% { opacity: 0.15; } 100% { opacity: 1; } }
.hs-fenster-clean { animation: hs-cleanReveal 4s var(--hs-ease) infinite; }
@keyframes hs-cleanReveal { 0%, 8% { opacity: 0.15; } 50%, 58% { opacity: 1; } 100% { opacity: 0.15; } }
.hs-fenster-splash circle {
  transform-origin: center; transform-box: fill-box;
  opacity: 0; animation: hs-splashFly 4s ease-out infinite;
}
.hs-fenster-splash circle:nth-child(1) { animation-delay: 0.3s; }
.hs-fenster-splash circle:nth-child(2) { animation-delay: 0.9s; }
.hs-fenster-splash circle:nth-child(3) { animation-delay: 1.5s; }
.hs-fenster-splash circle:nth-child(4) { animation-delay: 2.1s; }
@keyframes hs-splashFly {
  0%   { transform: translate(175px, 55px) scale(0.5); opacity: 0; }
  5%   { transform: translate(175px, 55px) scale(1);   opacity: 1; }
  20%  { transform: translate(195px, 70px) scale(0.8); opacity: 0; }
  100% { opacity: 0; }
}

/* 02 Boden — Polierer schwenkt + Disc spinnt + Bubbles */
.hs-boden-foam .hs-bub { transform-origin: center; transform-box: fill-box; animation: hs-bubblePop 2s ease-in-out infinite; }
.hs-boden-foam .hs-b1  { animation-delay: 0s; }
.hs-boden-foam .hs-b2  { animation-delay: 0.15s; }
.hs-boden-foam .hs-b3  { animation-delay: 0.3s; }
.hs-boden-foam .hs-b4  { animation-delay: 0.45s; }
.hs-boden-foam .hs-b5  { animation-delay: 0.6s; }
.hs-boden-foam .hs-b6  { animation-delay: 0.75s; }
.hs-boden-foam .hs-b7  { animation-delay: 0.9s; }
.hs-boden-foam .hs-b8  { animation-delay: 1.05s; }
.hs-boden-foam .hs-b9  { animation-delay: 1.2s; }
.hs-boden-foam .hs-b10 { animation-delay: 1.35s; }
.hs-boden-foam .hs-b11 { animation-delay: 1.5s; }
@keyframes hs-bubblePop {
  0%, 100% { transform: scale(0.3); opacity: 0; }
  25%      { transform: scale(1.1); opacity: 1; }
  70%      { transform: scale(0.9); opacity: 0.7; }
  90%      { transform: scale(0.2); opacity: 0; }
}
.hs-boden-machine { transform-origin: 120px 180px; animation: hs-polisherSweep 3.2s ease-in-out infinite; }
@keyframes hs-polisherSweep {
  0%, 100% { transform: translateX(-16px) rotate(-1.5deg); }
  50%      { transform: translateX(18px)  rotate(1.5deg); }
}
.hs-boden-disc-spin { transform-origin: 102px 174px; animation: hs-discSpin 0.9s linear infinite; }
@keyframes hs-discSpin { to { transform: rotate(360deg); } }

/* 03 Hauswart — Blower-Swing + Fan spinnt + Leaves fly */
.hs-hauswart-pack { transform-origin: 100px 140px; animation: hs-blowerSwing 3.6s ease-in-out infinite; }
@keyframes hs-blowerSwing {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.hs-hauswart-fan { transform-origin: 65px 120px; animation: hs-discSpin 0.35s linear infinite; }
.hs-hauswart-stream { animation: hs-streamPulse 0.6s ease-in-out infinite; transform-origin: left center; transform-box: fill-box; }
@keyframes hs-streamPulse {
  0%, 100% { opacity: 0.85; transform: scaleX(1); }
  50%      { opacity: 1;    transform: scaleX(1.08); }
}
.hs-hauswart-leaves path {
  transform-origin: center; transform-box: fill-box;
  opacity: 0; animation: hs-leafFly 2.2s ease-out infinite;
}
.hs-hauswart-leaves path:nth-child(1) { animation-delay: 0s; }
.hs-hauswart-leaves path:nth-child(2) { animation-delay: 0.5s; }
.hs-hauswart-leaves path:nth-child(3) { animation-delay: 1s; }
.hs-hauswart-leaves path:nth-child(4) { animation-delay: 1.5s; }
@keyframes hs-leafFly {
  0%   { transform: translate(-30px, 0) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(25px, -20px) rotate(180deg); opacity: 0; }
}

/* 04 Umzug — Wand sweeps + Hose wiggles + Dust sucks in */
.hs-umzug-wand { transform-origin: 55px 140px; animation: hs-wandSweep 3.2s ease-in-out infinite; }
@keyframes hs-wandSweep {
  0%, 100% { transform: translateX(-12px) rotate(-3deg); }
  50%      { transform: translateX(12px)  rotate(3deg); }
}
.hs-umzug-hose-corr, .hs-umzug-hose { animation: hs-hoseWiggle 3.2s ease-in-out infinite; transform-origin: 100px 110px; }
@keyframes hs-hoseWiggle {
  0%, 100% { transform: translate(-2px, 0); }
  50%      { transform: translate(2px, -1px); }
}
.hs-umzug-dust circle {
  transform-origin: center; transform-box: fill-box;
  opacity: 0; animation: hs-dustSuck 1.6s ease-in infinite;
}
.hs-umzug-dust circle:nth-child(1) { animation-delay: 0s; }
.hs-umzug-dust circle:nth-child(2) { animation-delay: 0.4s; }
.hs-umzug-dust circle:nth-child(3) { animation-delay: 0.8s; }
.hs-umzug-dust circle:nth-child(4) { animation-delay: 1.2s; }
@keyframes hs-dustSuck {
  0%   { transform: translate(-20px, -25px) scale(1); opacity: 0; }
  25%  { opacity: 0.9; }
  100% { transform: translate(30px, 15px) scale(0.3); opacity: 0; }
}

/* 05 Fassade — Reel-Spin + Jet-Pulse + Drops + Foam-Wall */
.hs-fassade-reel { transform-origin: 65px 80px; animation: hs-discSpin 2.4s linear infinite; }
.hs-fassade-jet { transform-origin: left center; transform-box: fill-box; animation: hs-jetPulse 0.5s ease-in-out infinite; }
@keyframes hs-jetPulse {
  0%, 100% { transform: scaleX(1)    translateX(0);    opacity: 0.9; }
  50%      { transform: scaleX(1.12) translateX(-2px); opacity: 1; }
}
.hs-fassade-gun { transform-origin: 148px 128px; animation: hs-gunRecoil 0.5s ease-in-out infinite; }
@keyframes hs-gunRecoil {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-1.5px); }
}
.hs-fassade-drops circle {
  transform-origin: center; transform-box: fill-box;
  opacity: 0; animation: hs-dropFly 1.1s linear infinite;
}
.hs-fassade-drops circle:nth-child(1) { animation-delay: 0s; }
.hs-fassade-drops circle:nth-child(2) { animation-delay: 0.27s; }
.hs-fassade-drops circle:nth-child(3) { animation-delay: 0.55s; }
.hs-fassade-drops circle:nth-child(4) { animation-delay: 0.82s; }
@keyframes hs-dropFly {
  0%   { transform: translate(-20px, 0) scale(1);   opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(22px, 6px) scale(0.3); opacity: 0; }
}
.hs-fassade-clean { animation: hs-foamGrow 3s ease-in-out infinite; transform-origin: 190px 115px; transform-box: fill-box; }
@keyframes hs-foamGrow {
  0%, 100% { transform: scale(0.85); opacity: 0.3; }
  50%      { transform: scale(1.1);  opacity: 0.7; }
}

/* === Responsive === */
@media (max-width: 1100px) {
  .hero-spotlight { padding: 24px 32px 20px; }
  .hs-index { right: 32px; }
}
@media (max-width: 900px) {
  .hero-spotlight {
    padding: 24px 20px 24px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto auto;
    grid-template-areas:
      "tl"
      "center"
      "bl"
      "br"
      "tr"
      "seo";
    gap: 24px;
    height: auto;
    min-height: calc(100dvh - var(--header-h) - var(--bottom-bar-h));
  }
  .hs-tr, .hs-index { display: none; }
  .hs-spotlight { width: 240px !important; height: 240px !important; }
  .hs-orbit { inset: -20px; }
  .hs-center { min-height: 260px; }
  .hs-caption { bottom: -28px; font-size: 9px; }
  .hs-br { justify-content: flex-start; }
  .hs-seo {
    justify-self: flex-start; white-space: normal; flex-wrap: wrap;
    font-size: 10px; max-width: 100%;
  }
  .hs-cta__title { white-space: normal; font-size: 12px; }
  .hs-h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
}
@media (max-width: 480px) {
  .hs-micro-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-tool { opacity: 1; filter: none; transform: none; }
  .hs-tool:not(.is-active) { display: none; }
  .hero-spotlight::after,
  .hs-live-dot,
  .hs-orbit, .hs-ring,
  .hs-fenster-squeegee, .hs-fenster-pad, .hs-fenster-foam, .hs-fenster-clean, .hs-fenster-splash circle,
  .hs-boden-foam .hs-bub, .hs-boden-machine, .hs-boden-disc-spin,
  .hs-hauswart-pack, .hs-hauswart-fan, .hs-hauswart-stream, .hs-hauswart-leaves path,
  .hs-umzug-wand, .hs-umzug-hose-corr, .hs-umzug-hose, .hs-umzug-dust circle,
  .hs-fassade-reel, .hs-fassade-jet, .hs-fassade-gun, .hs-fassade-drops circle, .hs-fassade-clean {
    animation: none !important;
  }
}


/* =================== DOSSIER HERO (Home — ruhiger Editorial-Look) =================== */
.hero-dossier {
  position: relative;
  min-height: calc(100vh - 120px);
  overflow: hidden;
  background: #0A0F14;
  color: #EEF1F3;
  display: flex;
  align-items: center;
  padding: 60px 48px;
}
[data-theme="dark"] .hero-dossier { background: #060A10; }

.hero-dossier__bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}
.hero-dossier__ghost {
  position: absolute;
  left: 50%;
  bottom: -6vw;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: clamp(10rem, 22vw, 22rem);
  font-weight: 900;
  letter-spacing: -.05em;
  color: rgba(255,255,255,.03);
  white-space: nowrap;
  line-height: .85;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.hero-dossier__cross {
  position: absolute;
  font-family: var(--font-heading);
  color: rgba(255,255,255,.25);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.hero-dossier__cross--1 { top: 10%;    left: 45%; }
.hero-dossier__cross--2 { top: 32%;    right: 8%; }
.hero-dossier__cross--3 { bottom: 20%; left: 40%; }
.hero-dossier__cross--4 { bottom: 8%;  right: 10%; }

.hero-dossier__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 580px);
  gap: 80px;
  align-items: center;
}

.hero-dossier__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 24px;
}
.hero-dossier__tags {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,241,243,.65);
}
.hero-dossier__tag { display: inline-flex; align-items: center; gap: 8px; }
.hero-dossier__tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 8px var(--brand);
}
.hero-dossier__tag-sep { opacity: .35; }

.hero-dossier__title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 800; line-height: .98; letter-spacing: -.035em;
  color: #fff; margin: 0;
  max-width: 14ch;
}
.hero-dossier__title em {
  font-style: normal;
  color: var(--brand);
  font-weight: 800;
}

.hero-dossier__lead {
  font-size: 16px; line-height: 1.55;
  color: rgba(238,241,243,.72);
  max-width: 48ch;
  margin: 0;
}

.hero-dossier__cta {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
}
.hero-dossier__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 700; letter-spacing: -.005em;
  text-decoration: none;
  transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease, padding .35s cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
}
.hero-dossier__btn--primary {
  background: var(--brand);
  color: #07111A !important;
  border: 1px solid var(--brand);
}
.hero-dossier__btn--primary:hover {
  background: #fff; border-color: #fff;
  transform: translateY(-2px);
  padding-right: 34px;
}
.hero-dossier__btn--ghost {
  background: transparent;
  color: rgba(238,241,243,.9) !important;
  border: 1px solid rgba(255,255,255,.22);
}
.hero-dossier__btn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-2px);
}
.hero-dossier__btn [data-lucide] {
  width: 16px; height: 16px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.hero-dossier__btn--primary:hover [data-lucide] { transform: translateX(4px); }

.hero-dossier__stats {
  display: flex; gap: 36px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-dossier__stat {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 90px;
}
.hero-dossier__stat-num {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800; line-height: 1;
  color: #fff;
}
.hero-dossier__stat-num small {
  color: var(--brand); font-size: .9em; margin-left: 2px;
}
.hero-dossier__stat-label {
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238,241,243,.5);
}

/* Rechte Spalte */
.hero-dossier__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px;
}

/* Stempel-Kreis */
.hero-dossier__stamp {
  position: absolute;
  top: -10px; right: -20px;
  width: 140px; height: 140px;
  color: rgba(255,255,255,.45);
  animation: hero-dossier-stamp-spin 26s linear infinite;
  z-index: 3;
}
@keyframes hero-dossier-stamp-spin { to { transform: rotate(360deg); } }
.hero-dossier__stamp-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: #07111A;
  display: flex; align-items: center; justify-content: center;
  animation: hero-dossier-stamp-spin 26s linear infinite reverse;
  box-shadow: 0 8px 24px -6px rgba(22,127,163,.5);
}
.hero-dossier__stamp-core [data-lucide] { width: 22px; height: 22px; }

/* Dossier-Card */
.hero-dossier__card {
  position: relative;
  background: linear-gradient(160deg, #111822 0%, #0A0F14 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 32px 36px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  z-index: 2;
  min-height: 420px;
  display: flex; flex-direction: column; gap: 14px;
}
.hero-dossier__card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.hero-dossier__card-id {
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.hero-dossier__card-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: #4FD8A2;
  text-transform: uppercase;
}
.hero-dossier__card-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4FD8A2;
  box-shadow: 0 0 0 3px rgba(79,216,162,.25);
  animation: hero-edit-live 2.4s ease-in-out infinite;
}
.hero-dossier__card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800; line-height: .98; letter-spacing: -.025em;
  color: #fff; margin: 0;
}
.hero-dossier__card-title em { font-style: normal; color: var(--brand); }
.hero-dossier__card-sub {
  font-size: 13px; color: rgba(255,255,255,.55); margin: 0;
  font-family: var(--font-heading); letter-spacing: .02em;
}
.hero-dossier__card-divider { height: 1px; background: rgba(255,255,255,.1); margin: 10px 0 6px; }
.hero-dossier__card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero-dossier__card-stats > div { display: flex; flex-direction: column; gap: 2px; }
.hero-dossier__card-label {
  font-family: var(--font-heading);
  font-size: 9px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.hero-dossier__card-value {
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 800;
  color: #fff; line-height: 1;
}
.hero-dossier__card-chip {
  position: absolute;
  left: -12px; bottom: -18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #0A0F14;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #fff;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.55);
}
.hero-dossier__card-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4FD8A2; box-shadow: 0 0 6px #4FD8A2;
}

/* Floating Availability */
.hero-dossier__availability {
  position: absolute;
  right: -30px; bottom: 10px;
  background: #F7F9FB;
  color: #0A0F14;
  border-radius: 14px;
  padding: 18px 22px;
  width: 240px;
  box-shadow: 0 30px 60px -18px rgba(22,127,163,.35), 0 0 0 1px rgba(22,127,163,.08);
  z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}
.hero-dossier__availability-label {
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #5A6772;
}
.hero-dossier__availability-main {
  font-family: var(--font-heading);
  font-size: 18px; font-weight: 800; color: #0A0F14;
  line-height: 1.1; margin-top: 2px;
}
.hero-dossier__availability-sub {
  font-size: 12px; color: #5A6772; line-height: 1.4;
}
.hero-dossier__availability-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; margin-top: 6px;
  border-top: 1px solid rgba(10,15,20,.1);
  font-family: var(--font-heading);
  font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #5A6772;
}
.hero-dossier__availability-meta [data-lucide] { width: 14px; height: 14px; color: var(--brand); }

/* Responsive */
@media (max-width: 1200px) {
  .hero-dossier__inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-dossier__left { padding-left: 0; }
  .hero-dossier__right { min-height: 500px; }
  .hero-dossier__stamp { top: -40px; right: -10px; width: 110px; height: 110px; }
  .hero-dossier__availability { right: 0; }
}
@media (max-width: 767px) {
  .hero-dossier { padding: 40px 20px; }
  .hero-dossier__title { font-size: clamp(2.25rem, 10vw, 3.5rem); }
  .hero-dossier__stats { gap: 20px; }
  .hero-dossier__card { padding: 24px 22px; max-width: 100%; min-height: 380px; }
  .hero-dossier__card-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero-dossier__stamp { display: none; }
  .hero-dossier__availability { right: 0; width: auto; left: 0; position: static; margin-top: 32px; }
  .hero-dossier__ghost { font-size: clamp(5rem, 30vw, 10rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dossier__stamp, .hero-dossier__stamp-core,
  .hero-dossier__card-live-dot, .hero-dossier__tag-dot { animation: none !important; }
}

/* =================== EDITORIAL HERO (Portrait-Layout im Portfolio-Stil) =================== */
.hero-editorial {
  position: relative;
  min-height: calc(100vh - 120px);
  padding: 28px 48px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 20%, #12345B 0%, #0A1624 55%, #06101A 100%);
  color: #F4F7FA;
}
[data-theme="dark"] .hero-editorial {
  background: radial-gradient(ellipse at 20% 20%, #0E2A47 0%, #070F1A 60%, #040A12 100%);
}

/* Top-Bar */
.hero-edit__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  z-index: 3;
  position: relative;
}
.hero-edit__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  color: #fff;
}
.hero-edit__chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4FD8A2;
  box-shadow: 0 0 0 4px rgba(79,216,162,.2);
  animation: hero-edit-live 2.4s ease-in-out infinite;
}
@keyframes hero-edit-live {
  0%,100% { box-shadow: 0 0 0 4px rgba(79,216,162,.2); }
  50%     { box-shadow: 0 0 0 10px rgba(79,216,162,0); }
}
.hero-edit__menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em;
  color: rgba(244,247,250,.65);
}
.hero-edit__menu-sep { color: rgba(255,255,255,.3); }

/* Corner Crosshairs */
.hero-edit__crosshair {
  position: absolute; width: 14px; height: 14px;
  z-index: 2; pointer-events: none;
}
.hero-edit__crosshair::before,
.hero-edit__crosshair::after {
  content: ''; position: absolute;
  background: rgba(255,255,255,.45);
}
.hero-edit__crosshair::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.hero-edit__crosshair::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.hero-edit__crosshair--tl { top: 78px; left: 32px; }
.hero-edit__crosshair--tr { top: 78px; right: 32px; }
.hero-edit__crosshair--bl { bottom: 90px; left: 32px; }
.hero-edit__crosshair--br { bottom: 90px; right: 32px; }

/* Index-Badge */
.hero-edit__index {
  position: absolute;
  top: 84px;
  right: 68px;
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-heading);
  z-index: 2;
  color: rgba(255,255,255,.8);
}
.hero-edit__index-num {
  font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: #fff;
}
.hero-edit__index-sep { width: 20px; height: 1px; background: rgba(255,255,255,.55); }
.hero-edit__index-total { font-size: 14px; font-weight: 600; letter-spacing: .08em; }

/* Vertikale Labels */
.hero-edit__vlabel {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 11px; letter-spacing: .22em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  z-index: 2;
}
.hero-edit__vlabel--left  { left: 18px;  top: 50%; transform: translateY(-50%) rotate(180deg); }
.hero-edit__vlabel--right { right: 18px; top: 50%; transform: translateY(-50%) rotate(180deg); }

/* Hauptgrid */
.hero-edit__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px 1fr;
  gap: 40px;
  align-items: center;
  z-index: 1;
  position: relative;
}

/* Left-Spalte */
.hero-edit__left {
  display: flex; flex-direction: column; gap: 16px;
  padding-left: 40px;
}
.hero-edit__eyebrow {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.hero-edit__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; line-height: .98; letter-spacing: -.02em;
  margin: 0; color: #fff;
}
.hero-edit__title em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  -webkit-text-stroke: 0;
}
.hero-edit__lead {
  font-size: 15px; line-height: 1.6;
  color: rgba(244,247,250,.78);
  max-width: 360px;
}
.hero-edit__meta {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  max-width: 300px;
}
.hero-edit__meta-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  font-family: var(--font-heading); font-weight: 700;
}
.hero-edit__meta-value { font-size: 14px; color: rgba(244,247,250,.85); }

/* Center-Stage Foto */
.hero-edit__stage { display: flex; align-items: center; justify-content: center; position: relative; }
.hero-edit__figure {
  position: relative; margin: 0;
  width: 360px; height: 500px;
  border-radius: 4px; overflow: hidden;
  background: #0A1624;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.hero-edit__figure img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform 2s ease;
}
.hero-edit__figure:hover img { transform: scale(1.06); }
.hero-edit__overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-edit__caption {
  position: absolute;
  left: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(6,16,26,.78);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 3px;
  border-left: 2px solid var(--brand);
}
.hero-edit__caption-label {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .04em;
}
.hero-edit__caption-sub {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* SVG-Overlay-Animationen */
.hero-edit__fx-pulse {
  transform-origin: center; transform-box: fill-box;
  animation: hero-edit-pulse 2.8s ease-in-out infinite;
}
.hero-edit__fx-d2 { animation-delay: 1.1s; }
.hero-edit__fx-d3 { animation-delay: 1.9s; }
@keyframes hero-edit-pulse {
  0%,100% { opacity: .35; transform: scale(.9); }
  50%     { opacity: 1;   transform: scale(1.1); }
}
.hero-edit__fx-gleam {
  animation: hero-edit-gleam 7s ease-in-out infinite;
}
@keyframes hero-edit-gleam {
  0%, 35% { opacity: 0; transform: translate(0,0); }
  50%     { opacity: .8; transform: translate(120px, 70px); }
  70%     { opacity: 0; transform: translate(260px, 150px); }
  100%    { opacity: 0; transform: translate(260px, 150px); }
}
.hero-edit__fx-dash { animation: hero-edit-dash 2.4s linear infinite; }
@keyframes hero-edit-dash { to { stroke-dashoffset: -16; } }
.hero-edit__fx-drop {
  animation: hero-edit-drop 4.5s ease-in infinite;
  transform-origin: center; transform-box: fill-box;
}
.hero-edit__fx-drop.hero-edit__fx-d2 { animation-delay: 1.3s; }
.hero-edit__fx-drop.hero-edit__fx-d3 { animation-delay: 2.6s; }
@keyframes hero-edit-drop {
  0%, 15%  { transform: translateY(0)    scale(1);   opacity: 0; }
  25%      { transform: translateY(0)    scale(1);   opacity: .85; }
  60%      { transform: translateY(22px) scale(.85); opacity: .5; }
  80%      { transform: translateY(38px) scale(.6);  opacity: 0; }
  100%     { transform: translateY(0)    scale(1);   opacity: 0; }
}
.hero-edit__fx-sparkle {
  animation: hero-edit-sparkle 2.8s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7));
}
@keyframes hero-edit-sparkle {
  0%,100% { transform: scale(.3) rotate(0);    opacity: 0; }
  50%     { transform: scale(1)  rotate(30deg); opacity: 1; }
}

/* Right-Spalte */
.hero-edit__right {
  display: flex; flex-direction: column; gap: 18px;
  padding-right: 40px;
  align-items: flex-end;
}
.hero-edit__tech {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,.14);
}
.hero-edit__tech-label {
  font-family: var(--font-heading);
  font-size: 10px; letter-spacing: .25em;
  color: rgba(255,255,255,.45); font-weight: 700;
  text-transform: uppercase;
}
.hero-edit__tech-value {
  font-family: var(--font-heading);
  font-size: 13px; color: rgba(244,247,250,.92); font-weight: 500;
}

/* Footer-Zeile */
.hero-edit__footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; z-index: 3; position: relative;
}
.hero-edit__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid #10B981;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  color: #fff !important; text-decoration: none;
  box-shadow: 0 10px 26px -8px rgba(16,185,129,.55), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease, padding .35s cubic-bezier(.22,1,.36,1);
}
.hero-edit__cta::before {
  /* Fill-Sweep: dunkleres Emerald ueber dem Basis-Gradient */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.hero-edit__cta::after {
  /* Diagonaler Shine */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-200%) skewX(-20deg);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.hero-edit__cta:hover {
  border-color: #34D399;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -10px rgba(16,185,129,.7), 0 0 0 1px rgba(255,255,255,.15) inset;
  padding-right: 34px;
}
.hero-edit__cta:hover::before { transform: translateY(0); }
.hero-edit__cta:hover::after  { transform: translateX(400%) skewX(-20deg); }
.hero-edit__cta-dot { background: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.hero-edit__cta:hover .hero-edit__cta-dot { box-shadow: 0 0 14px rgba(255,255,255,.9); }
.hero-edit__cta:hover [data-lucide] { transform: translate(3px, -3px); }
.hero-edit__cta [data-lucide] { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.hero-edit__cta-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
.hero-edit__cta [data-lucide] { width: 16px; height: 16px; }
.hero-edit__nav { display: flex; gap: 10px; }
.hero-edit__nav-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  transition: all .3s ease;
}
.hero-edit__nav-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.hero-edit__nav-btn--primary { background: var(--brand); border-color: var(--brand); }
.hero-edit__nav-btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Responsive */
@media (max-width: 1100px) {
  .hero-edit__grid { grid-template-columns: 1fr 320px 1fr; gap: 24px; }
  .hero-edit__figure { width: 300px; height: 420px; }
  .hero-edit__left  { padding-left: 20px; }
  .hero-edit__right { padding-right: 20px; }
  .hero-edit__vlabel, .hero-edit__crosshair { display: none; }
}
@media (max-width: 900px) {
  .hero-editorial {
    min-height: 0;
    padding: 20px 24px 28px;
    gap: 22px;
  }
  .hero-edit__topbar { flex-wrap: wrap; gap: 12px; }
  .hero-edit__grid { grid-template-columns: 1fr; text-align: center; gap: 32px; }
  .hero-edit__left, .hero-edit__right { padding: 0; align-items: center; }
  .hero-edit__right {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 14px 0;
  }
  .hero-edit__tech {
    text-align: center; padding: 0 14px;
    border-right: 0; border-left: 1px solid rgba(255,255,255,.14);
    flex: 0 0 auto;
  }
  .hero-edit__tech:first-child { border-left: 0; }
  .hero-edit__meta, .hero-edit__lead { margin-left: auto; margin-right: auto; }
  .hero-edit__index {
    position: static;
    align-self: flex-end;
    margin: -4px 0 -8px;
  }
  .hero-edit__index-num { font-size: 28px; }
}
@media (max-width: 600px) {
  .hero-editorial {
    min-height: calc(100svh - 100px);
    padding: 40px;
    gap: 40px;
    justify-content: center;
    background:
      radial-gradient(circle, rgba(255,255,255,.10) 1.3px, transparent 1.7px) 0 0 / 20px 20px,
      radial-gradient(ellipse at 50% 50%, #12345B 0%, #0A1624 60%, #06101A 100%);
  }
  [data-theme="dark"] .hero-editorial {
    background:
      radial-gradient(circle, rgba(255,255,255,.08) 1.3px, transparent 1.7px) 0 0 / 20px 20px,
      radial-gradient(ellipse at 50% 50%, #0E2A47 0%, #070F1A 60%, #040A12 100%);
  }
  /* Editorial-Deko auf Mobile ausblenden — App-Card-Look */
  .hero-edit__topbar,
  .hero-edit__index,
  .hero-edit__meta,
  .hero-edit__right,
  .hero-edit__nav { display: none; }

  /* Grid wird zur Card-Stage — Foto auf 65vh begrenzt fuer Luft oben/unten */
  .hero-edit__grid {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
    position: relative;
    display: block;
    gap: 0;
    height: 65svh;
    min-height: 360px;
    max-height: 560px;
  }
  .hero-edit__stage {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero-edit__figure {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 28px;
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.7),
                0 0 0 1px rgba(255,255,255,.06) inset;
  }
  /* Dunkler Gradient unten im Foto fuer Text-Lesbarkeit */
  .hero-edit__figure::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 70%;
    background: linear-gradient(180deg,
      rgba(6,16,26,0) 0%,
      rgba(6,16,26,.45) 45%,
      rgba(6,16,26,.9) 100%);
    pointer-events: none;
    border-radius: 0 0 28px 28px;
    z-index: 1;
  }

  /* Left-Block liegt als Overlay ueber dem Foto */
  .hero-edit__left {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: left;
    pointer-events: none;
  }
  /* Eyebrow wird Card-Badge oben links */
  .hero-edit__eyebrow {
    align-self: flex-start;
    display: inline-block;
    padding: 7px 13px;
    background: rgba(10,22,36,.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .18em;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
  }
  /* Titel unten links im Foto */
  .hero-edit__title {
    margin-top: auto;
    font-size: clamp(1.75rem, 8.2vw, 2.4rem);
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
  }
  .hero-edit__lead {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(244,247,250,.88);
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
    max-width: 100%;
  }

  /* CTA als voll breiter Pill unter der Card */
  .hero-edit__footer {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .hero-edit__cta {
    width: 100%;
    justify-content: center;
    padding: 17px 24px;
    font-size: 14px;
    border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-edit__chip-dot,
  .hero-edit__fx-pulse,
  .hero-edit__fx-gleam,
  .hero-edit__fx-dash,
  .hero-edit__fx-drop,
  .hero-edit__fx-sparkle { animation: none !important; }
  .hero-edit__figure:hover img { transform: scale(1.02); }
}

/* ---- Hero-Photo-Frame (rund-cropped Portrait + feine SVG-Overlays) ---- */
.hero--service__photo {
  position: relative;
  z-index: 2;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.hero--service__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.2s ease;
}
.hero--service__photo:hover img { transform: scale(1.06); }

.hero--service__photo-overlay {
  position: absolute;
  inset: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  pointer-events: none;
  overflow: visible;
}

/* Delikate Tropfen am linken Bildrand */
.hero-photo-drop {
  fill: rgba(255,255,255,.9);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  animation: hero-photo-drop 4.2s ease-in infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.hero-photo-drop--a { animation-delay:  0s;  }
.hero-photo-drop--b { animation-delay: 1.4s; }
.hero-photo-drop--c { animation-delay: 2.6s; }
@keyframes hero-photo-drop {
  0%, 12%  { transform: translateY(0)     scale(1);  opacity: .0; }
  20%      { transform: translateY(0)     scale(1);  opacity: .9; }
  60%      { transform: translateY(26px)  scale(.85); opacity: .55; }
  80%      { transform: translateY(44px)  scale(.6);  opacity: 0; }
  100%     { transform: translateY(0)     scale(1);  opacity: 0; }
}

/* Hauchzarter Licht-Streifen diagonal — ultradünn */
.hero-photo-gleam {
  stroke: rgba(255,255,255,.7);
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  animation: hero-photo-gleam 6s ease-in-out infinite;
  transform-origin: center;
  opacity: 0;
}
@keyframes hero-photo-gleam {
  0%, 30%  { opacity: 0;  transform: translate(0, 0); }
  45%      { opacity: .9; transform: translate(40px, 30px); }
  60%      { opacity: 0;  transform: translate(80px, 60px); }
  100%     { opacity: 0;  transform: translate(0, 0); }
}

/* Feine Sparkles ums Foto — keine Umrandung, nur Lichtpunkte */
.hero-photo-sparkle {
  fill: #fff;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.7));
  animation: hero-photo-sparkle 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
}
.hero-photo-sparkle--a { animation-delay: 0s;   }
.hero-photo-sparkle--b { animation-delay: 1.0s; }
.hero-photo-sparkle--c { animation-delay: 1.8s; }
@keyframes hero-photo-sparkle {
  0%, 100% { transform: scale(.3) rotate(0);   opacity: 0; }
  50%      { transform: scale(1)  rotate(25deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-drop,
  .hero-photo-gleam,
  .hero-photo-sparkle { animation: none !important; }
  .hero--service__photo:hover img { transform: scale(1.02); }
}

@media (max-width: 1024px) {
  .hero--service__photo { width: 220px; height: 220px; }
}
@media (max-width: 767px) {
  .hero--service__photo { width: 180px; height: 180px; }
}

.hero--service__arrow {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all .3s ease;
  z-index: 3;
}
.hero--service__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-50%) translateX(4px);
}
.hero--service__arrow [data-lucide] { width: 18px; height: 18px; }

.hero--service__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.hero--service__box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  padding: 22px 24px;
  position: relative;
  min-height: 120px;
  transition: background .25s ease, border-color .25s ease;
}
.hero--service__box:hover {
  background: rgba(22,127,163,.08);
  border-color: rgba(22,127,163,.25);
}
.hero--service__box-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -.005em;
}
.hero--service__box-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  margin: 0;
  max-width: 320px;
}
.hero--service__play {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all .25s ease;
}
.hero--service__play:hover { background: var(--brand); border-color: var(--brand); }
.hero--service__play [data-lucide] { width: 14px; height: 14px; }

.hero--service__footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(15,20,25,.4);
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.hero--service__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: background .25s ease;
}
.hero--service__cta:hover { background: rgba(22,127,163,.12); color: #fff; }
.hero--service__cta-accent {
  display: inline-block;
  width: 48px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
}
.hero--service__meta {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}

/* ---------- About-Variante (Fullbleed Portrait + Index-Liste + 3-Col Footer) ---------- */
.hero--about {
  background: #07111A;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
.hero--about .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero--about .hero__media picture,
.hero--about .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero--about .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(7,17,26,.55) 0%,
    rgba(7,17,26,.25) 45%,
    rgba(7,17,26,.85) 100%);
}
.hero--about .hero__content {
  position: relative;
  z-index: 2;
  padding: 56px 0 32px;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}
.hero--about .hero__content .container {
  max-width: 1100px;
  width: 100%;
}
.hero--about__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}

.hero--about__index {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero--about__index-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
}
.hero--about__index-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  margin-bottom: 20px;
}
.hero--about__index-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero--about__index-list li {
  font-family: var(--font-heading);
  font-size: 14px;
  padding: 6px 0;
  color: rgba(255,255,255,.55);
  transition: color .2s ease;
}
.hero--about__index-list li.is-active {
  color: #fff;
  font-weight: 700;
}
.hero--about__index-list li:hover { color: #fff; }

.hero--about__title h1 {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0 0 24px;
  font-weight: 800;
  max-width: 520px;
}
.hero--about__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  max-width: 520px;
  margin: 0;
}
.hero--about__lead a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.hero--about__lead a:hover { text-decoration-color: #fff; }

.hero--about__footer {
  position: relative;
  z-index: 3;
  padding: 24px 32px;
  background: rgba(7,17,26,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.hero--about__footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}
.hero--about__stack-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}
.hero--about__stack-item {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  margin: 0;
  line-height: 1.4;
}
.hero--about__stack-sub {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}
.hero--about__portrait {
  width: 104px;
  height: 104px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  margin: -40px auto 0;    /* ragt nach oben ueber den Footer */
}
.hero--about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-v2 { min-height: calc(100vh - 100px); }
  .hero--home__split { grid-template-columns: 1fr; min-height: auto; }
  .hero--home__left { padding: 48px 32px 40px; min-height: 70vh; }
  .hero--home__right { min-height: 40vh; }
  .hero--home__visual { width: 260px; height: 260px; }
  .hero--home__visual-icon [data-lucide] { width: 90px; height: 90px; }
  .hero--home__right-side { right: 12px; }
  .hero--home__footer { padding: 16px 24px; grid-template-columns: 1fr 1fr; }
  .hero--home__footer-meta { grid-column: 1 / -1; justify-self: center; }
  .hero--page .hero__content { padding: 56px 0; }
  .hero-deco__svg--mr,
  .hero-deco__svg--ml,
  .hero-deco__bubble--4 { display: none; }
  .hero--service,
  .hero--about { max-height: none; min-height: calc(100vh - 100px); }
  .hero--service__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero--service__visual { min-height: 220px; }
  .hero--service__accent { width: 200px; height: 200px; border-width: 6px; }
  .hero--service__icon { width: 160px; height: 160px; }
  .hero--service__icon [data-lucide] { width: 68px; height: 68px; }
  .hero--service__arrow { right: 16px; }
  .hero--service__ghost { font-size: clamp(6rem, 20vw, 14rem); transform: translate(-40%, -58%); }
  .hero--about__grid { grid-template-columns: 1fr; gap: 32px; padding: 20px 0 40px; }
  .hero--about__footer-grid { grid-template-columns: 1fr 1fr; }
  .hero--about__portrait { display: none; }
}
@media (max-width: 767px) {
  .hero-v2 { min-height: calc(100vh - 100px); }

  /* Home: kompakt mit grossem Titel, rechte Visual-Spalte entfernt */
  .hero--home__split { display: flex; flex-direction: column; min-height: auto; }
  .hero--home__left { padding: 40px 24px 36px; min-height: auto; flex: 1; justify-content: flex-end; }
  .hero--home__title { font-size: clamp(2.75rem, 10vw, 3.75rem); }
  .hero--home__lead { max-width: 100%; }
  .hero--home__cta { margin-bottom: 24px; }
  .hero--home__cta .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
  .hero--home__right { display: none; }
  .hero--home__meta { padding-top: 24px; }
  .hero--home__footer { grid-template-columns: 1fr; }
  .hero--home__footer-box { padding: 14px 20px; min-height: 56px; border-right: none; border-bottom: 1px solid rgba(10,74,99,.06); }
  .hero--home__footer-box:last-child { border-bottom: none; }
  .hero--home__footer-box--3 { justify-content: flex-start; }

  .hero--page h1 { font-size: clamp(2rem, 7vw, 2.4rem); }
  .hero__scroll-cue { display: none; }

  .hero--service__info { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .hero--service__footer { padding: 14px 20px; flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero--service__ghost { opacity: .5; font-size: clamp(5rem, 22vw, 10rem); }
  .hero--service__visual { min-height: 180px; }
  .hero--service__icon [data-lucide] { width: 56px; height: 56px; }

  .hero--about__footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero--about__footer { padding: 20px 24px; }
  .hero--about__title h1 { font-size: clamp(2.5rem, 9vw, 3.5rem); }

  /* Touch-optimierte Buttons */
  .btn { min-height: 48px; padding: 14px 22px; }
  .btn--sm { min-height: 40px; padding: 10px 18px; }
  .btn--lg { min-height: 54px; padding: 16px 26px; }

  /* Form-Felder mit Touch-Targets */
  .field input,
  .field textarea,
  .field select { min-height: 48px; font-size: 16px; /* iOS zoom-prevention */ }

  /* Container-Padding fuer Mobile — mehr Luft zum Rand */
  .container { padding-left: 40px; padding-right: 40px; }
}

/* ========================================================
   Mobile Slide-In Menu (Full-Screen Overlay)
   ======================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { pointer-events: auto; }

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,17,26,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .32s ease;
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: none;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -24px 0 60px rgba(7,17,26,.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

[data-theme="dark"] .mobile-menu__panel { background: #0E1C24; }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(10,74,99,.08);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
}
[data-theme="dark"] .mobile-menu__header {
  background: #0E1C24;
  border-bottom-color: rgba(170,213,228,.08);
}
.mobile-menu__logo img { height: 30px; width: auto; }
[data-theme="dark"] .mobile-menu__logo img { filter: brightness(0) invert(.95); }

.mobile-menu__close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(10,74,99,.12);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.mobile-menu__close:hover {
  background: var(--brand-mist);
  border-color: var(--brand);
  color: var(--brand-deep);
}
[data-theme="dark"] .mobile-menu__close {
  border-color: rgba(170,213,228,.16);
  color: #E8F0EC;
}
[data-theme="dark"] .mobile-menu__close:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.mobile-menu__close [data-lucide] { width: 20px; height: 20px; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 2px;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
  border-radius: 12px;
  transition: background .2s ease, color .2s ease;
  min-height: 48px;
  width: 100%;
}
.mobile-menu__link [data-lucide]:first-child {
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex-shrink: 0;
}
.mobile-menu__link span { flex: 1; }
.mobile-menu__link .mobile-menu__arrow {
  width: 16px;
  height: 16px;
  color: var(--text-soft);
  transition: transform .2s ease, color .2s ease;
  flex-shrink: 0;
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  background: var(--brand-mist);
  color: var(--brand-deep);
  outline: none;
}
.mobile-menu__link:hover .mobile-menu__arrow,
.mobile-menu__link:focus-visible .mobile-menu__arrow {
  color: var(--brand);
  transform: translate(2px, -2px);
}
.mobile-menu__link.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
}
[data-theme="dark"] .mobile-menu__link { color: #E8F0EC; }
[data-theme="dark"] .mobile-menu__link:hover,
[data-theme="dark"] .mobile-menu__link.is-active {
  background: rgba(79,170,203,.12);
  color: #fff;
}

.mobile-menu__services {
  padding: 20px 24px;
  border-top: 1px solid rgba(10,74,99,.08);
  margin-top: 12px;
}
[data-theme="dark"] .mobile-menu__services { border-top-color: rgba(170,213,228,.08); }
.mobile-menu__eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.mobile-menu__services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mobile-menu__services-grid a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  background: var(--bg-mist);
  transition: all .2s ease;
  min-height: 44px;
  line-height: 1.3;
}
.mobile-menu__services-grid a [data-lucide] { display: none; }
.mobile-menu__services-grid a:hover {
  background: var(--brand-mist);
  color: var(--brand-deep);
}
[data-theme="dark"] .mobile-menu__services-grid a { color: rgba(232,240,236,.75); background: rgba(170,213,228,.04); }
[data-theme="dark"] .mobile-menu__services-grid a:hover { background: rgba(79,170,203,.1); color: #fff; }

.mobile-menu__footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(10,74,99,.08);
  margin-top: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: var(--bg-mist);
  position: sticky;
  bottom: 0;
  z-index: 2;
}
[data-theme="dark"] .mobile-menu__footer {
  background: rgba(170,213,228,.03);
  border-top-color: rgba(170,213,228,.08);
}
.mobile-menu__cta {
  flex: 1;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  font-size: 13px;
}
.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  transition: all .2s ease;
  flex-shrink: 0;
}
.mobile-menu__phone [data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex-shrink: 0;
}
.mobile-menu__phone div { display: none; }
.mobile-menu__phone strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.mobile-menu__phone span {
  font-size: 12px;
  color: var(--text-muted);
}
.mobile-menu__phone:hover { background: var(--brand-mist); }
[data-theme="dark"] .mobile-menu__phone { background: #0A1520; }
[data-theme="dark"] .mobile-menu__phone strong { color: #fff; }
[data-theme="dark"] .mobile-menu__phone:hover { background: rgba(79,170,203,.08); }

.mobile-menu__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(10,74,99,.12);
  color: var(--text-muted);
  font-size: 0;
  cursor: pointer;
  transition: all .2s ease;
  flex-shrink: 0;
  align-self: center;
}
.mobile-menu__theme [data-lucide] { width: 18px; height: 18px; }
.mobile-menu__theme:hover { background: var(--brand-mist); color: var(--brand-deep); border-color: var(--brand); }
[data-theme="dark"] .mobile-menu__theme { border-color: rgba(170,213,228,.16); color: #E8F0EC; }

/* Scroll-Lock wenn Menu offen */
body.menu-open { overflow: hidden; }

/* -------- Cookie-Banner (DSG-konform) -------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-bar-h) + 16px);
  transform: translate(-50%, 24px);
  width: min(720px, calc(100vw - 32px));
  z-index: 10000;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
[data-theme="dark"] .cookie-banner { background: var(--bg-mist); }

.cookie-banner__inner {
  padding: 20px 22px;
  display: grid;
  gap: 14px;
}
.cookie-banner__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.cookie-banner__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.cookie-banner__text a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__options {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--bg-mist);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.cookie-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
}
.cookie-opt input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}
.cookie-opt input:disabled { cursor: not-allowed; opacity: .7; }
.cookie-opt__label { color: var(--text); }
.cookie-opt__label strong { color: var(--ink); font-weight: 600; }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.cookie-banner__actions .btn { white-space: nowrap; }

@media (max-width: 767px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    transform: translateY(24px);
    width: auto;
    bottom: calc(var(--bottom-bar-h) + 8px);
  }
  .cookie-banner.is-visible {
    transform: translateY(0);
  }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
}

/* Standalone Keyframe nicht mehr genutzt — die is-visible Klasse treibt jetzt den Reveal */