/* ============================================================================
   LA FACILITY MANAGEMENT · Design System
   ----------------------------------------------------------------------------
   Multi-Page · Dark · Markenfarben (Navy + Blau) · 100% self-contained
   Struktur:
     1. Tokens              6. Buttons            11. Sektionen/Komponenten
     2. Reset & Basis       7. Navigation         12. Formular
     3. Cursor (Spray)      8. Hero (Home)        13. Footer
     4. Loader (Wisch)      9. Page-Hero (Sub)    14. Reveal / Motion
     5. Page-Transition    10. Typo-Helfer        15. Responsive / A11y
   [BRANDING] Farben & Marke: siehe Tokens unten.
   ============================================================================ */

/* 1. ───────────────────────────── TOKENS ─────────────────────────────── */
:root {
  /* [BRANDING] Markenfarben */
  --brand:        #29abe2;   /* Primär-Blau (aus Logo/Referenz) */
  --brand-light:  #5cc7f5;   /* helleres Blau für Glow/Verläufe */
  --brand-deep:   #0c77b8;   /* dunkleres Blau für Tiefe (exakter Logo-Ton) */
  --brand-ink:    #04141d;   /* Text auf blauen Flächen */

  /* Akzentfarbe für TEXT auf dem Seitenhintergrund.
     Getrennt von --brand-light, weil helles Blau auf hellem Grund unlesbar ist.
     --brand-light bleibt für Bildunterschriften auf dunklen Foto-Verläufen. */
  --accent-text: #0a6ba5;

  /* Fehlerfarbe für Formulare — dunkel genug für 4,5:1 auf hellen Flächen */
  --err: #b3261e;

  /* Flächen (Basis: neutral hell) */
  --bg:      #ffffff;
  --bg-2:    #f5f8fb;
  --bg-3:    #eaf0f6;
  --surface:   rgba(15,26,38,.028);
  --surface-2: rgba(15,26,38,.055);
  --line:      rgba(15,26,38,.11);
  --line-2:    rgba(15,26,38,.20);
  --glass:     rgba(255,255,255,.78);

  /* Text */
  --ink:      #0d1b28;
  --ink-soft: #45586a;
  --ink-mute: #5c7083;

  /* Maße / Motion */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 68px);
  --nav-h: 78px;
  /* Radien-Skala: bewusst knapp und gestuft.
     Große Flächen bekommen weniger Rundung als kleine Bedienelemente — das
     wirkt gebaut statt weichgezeichnet. Kreisrund bleibt nur, was funktional
     rund ist (Avatare, Punkte, Schieberegler-Griff). */
  --radius:    6px;   /* große Flächen: Karten, Bilder, Bänder */
  --radius-sm: 4px;   /* mittlere: Eingabefelder, Listenkacheln */
  --radius-xs: 3px;   /* kleine: Marker, Chips, Tags */
  --radius-ctl: 5px;  /* Bedienelemente: Buttons */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --shadow:    0 30px 70px -30px rgba(13,27,40,.30);
  --shadow-sm: 0 12px 34px -22px rgba(13,27,40,.22);
  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ── FARBSCHEMA ───────────────────────────────────────────────────────────
   Entschieden ist „Mix" (data-theme="mix" auf allen Seiten). „Dämmerung"
   bleibt nur für die Vergleichsseite farbkonzept-dunkel.html erhalten. */

/* H · DÄMMERUNG — durchgehend dunkel, aber deutlich weicher als das
   ursprüngliche Fast-Schwarz (#080b11). Grundton ist ein entsättigtes
   Blaugrau: nimmt die Härte raus, behält die Tiefe.                        */
html[data-theme="daemmerung"] {
  --bg:#1b2431; --bg-2:#212b3a; --bg-3:#293446;
  --surface:rgba(255,255,255,.042); --surface-2:rgba(255,255,255,.072);
  --line:rgba(255,255,255,.105); --line-2:rgba(255,255,255,.19);
  --glass:rgba(27,36,49,.78);
  --ink:#eef3f8; --ink-soft:#b4c2d0; --ink-mute:#95a5b6;
  --accent-text:#5cc7f5;
  color-scheme: dark;
}
/* Foto darf auf Dunkel wieder kräftiger stehen, Text darüber ist hell */
html[data-theme="daemmerung"] .hero__media { opacity:.5; }
/* Blaues Logo wäre hier zu schwach — auf Weiß umschalten */
html[data-theme="daemmerung"] .brand__img { filter: brightness(0) invert(1); }

/* G · MIX — „Kontrast-Rhythmus": weder durchgehend hell noch dunkel.
   Der Lesebereich ist ein weiches, entspiegeltes Hellgrau (kein grelles Weiß),
   einzelne Flächen werden mit .inv dunkel abgesetzt. Das gibt der Seite Tiefe
   und Gliederung, ohne die Augen dauerhaft mit Schwarz oder Weiß zu belasten. */
html[data-theme="mix"] {
  --bg:#f1f4f8; --bg-2:#e8edf4; --bg-3:#dde5ef;
  --surface:rgba(16,28,44,.032); --surface-2:rgba(16,28,44,.06);
  --line:rgba(16,28,44,.13); --line-2:rgba(16,28,44,.22);
  --glass:rgba(241,244,248,.85);
  --ink:#101b28; --ink-soft:#42536a; --ink-mute:#586a80;
  --accent-text:#0a6ba5;
}

/* Dunkle Insel: setzt die Tokens lokal um, dadurch drehen alle Bausteine
   darin (Karten, Buttons, Linien, Text) automatisch mit — ohne Sonderregeln. */
html[data-theme="mix"] .inv,
html[data-theme="mix"] .footer {
  --bg:#0d1622; --bg-2:#111c2b; --bg-3:#162335;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.19);
  --ink:#eef3f8; --ink-soft:#a8b8c8; --ink-mute:#8598aa;
  --accent-text:#5cc7f5;
  background:var(--bg); color:var(--ink);
  color-scheme: dark;
}
/* Auf dunklem Grund darf das Foto wieder kräftiger wirken (heller Text darüber) */
html[data-theme="mix"] .inv .hero__media { opacity:.5; }
/* Footer schließt bündig an die helle Fläche darüber an */
html[data-theme="mix"] .footer { border-top-color:transparent; }

/* Nav über einer dunklen Fläche lesbar halten, solange sie transparent ist.
   Sobald sie beim Scrollen ihr helles Glas bekommt, gilt wieder die Normalfarbe. */
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .nav__link { color:rgba(238,243,248,.78); }
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .nav__link:hover,
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .nav__link.active { color:#fff; }
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .burger { border-color:rgba(255,255,255,.28); }
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .burger span { background:#eef3f8; }
/* Das blaue Logo ist auf Dunkel zu schwach — hier auf Weiß umschalten.
   brightness(0) macht die Grafik schwarz, invert(1) daraus reines Weiß;
   die transparenten Bereiche bleiben dabei transparent. */
html[data-theme="mix"] .brand__img { transition: filter .35s var(--ease); }
html[data-theme="mix"] body.at-dark .nav:not(.scrolled) .brand__img,
html[data-theme="mix"] .footer .brand__img { filter: brightness(0) invert(1); }

/* 2. ───────────────────────────── RESET ──────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
img,svg,canvas { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.container { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 10002; padding: 12px 20px; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--brand-ink); font-weight: 700;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip:focus { transform: translateY(0); }
/* Synchrone Startabdeckung (via .js im Head gesetzt) — verhindert Aufblitzen des Inhalts, bis Loader/Übergang stehen */
html.js::before { content:""; position:fixed; inset:0; background:var(--bg); z-index:10050; pointer-events:none;
  /* Failsafe: Falls main.js nicht lädt (Netzfehler/Blocker), blendet sich das
     Deck-Overlay nach 4s selbst aus — sonst bliebe die Seite dauerhaft verdeckt. */
  animation: overlayFailsafe .4s ease 4s forwards; }
html.js.chrome-ready::before { display:none; }
@keyframes overlayFailsafe { to { opacity:0; visibility:hidden; } }

/* Custom cursor: nativen ausblenden (nur feine Zeiger) */
@media (hover:hover) and (pointer:fine){
  body.cursor-on, body.cursor-on * { cursor: none !important; }
}

/* 3. ─────────────────────── CURSOR (Spraydose) ───────────────────────── */
.cursor {
  position: fixed; top:0; left:0; z-index: 10000; pointer-events: none;
  /* Seitenverhältnis folgt dem Ausschnitt der Originaldatei (404 : 600) */
  width: 34px; height: 50px;
  /* Zeigepunkt sitzt auf der Düse oben rechts — dort, wo die Dose „hinzielt" */
  margin: -3px 0 0 -26px;
  opacity: 0; transition: opacity .3s var(--ease), transform .18s var(--ease);
  will-change: transform;
}
.cursor svg { width:100%; height:100%; overflow:visible;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.30)); }
/* Echte Datei als Maske — exakte Form, in Weiß eingefärbt */
.cursor--file { background: #ffffff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  -webkit-mask: var(--cur) center/contain no-repeat; mask: var(--cur) center/contain no-repeat; }
/* Weiße Füllung mit dunkler Kontur — dadurch bleibt die Dose sowohl auf den
   hellen Lesebereichen als auch auf den dunklen Bändern klar erkennbar.
   paint-order zeichnet die Kontur hinter die Füllung, sonst frisst sie die Form. */
.cursor__body { fill:#ffffff; stroke:#0d1622; stroke-width:22; stroke-linejoin:round;
  paint-order: stroke fill; }
.cursor__mist { fill:var(--brand); stroke:#0d1622; stroke-width:10; paint-order: stroke fill;
  opacity:0; } /* Sprühnebel; tritt beim Hover aus */
body.cursor-ready .cursor { opacity: 1; }
/* dezente Hover-Reaktion (nicht verspielt): leichte Neigung + Scale.
   Drehpunkt ist die Düse, damit die Dose beim Kippen am Zeigepunkt bleibt. */
.cursor { transform-origin: 78% 5%; }
body.cursor-hot .cursor { transform: rotate(-10deg) scale(1.06); }
body.cursor-hot .cursor__mist { animation: mist .8s var(--ease-out) infinite; }
body.cursor-hot .cursor__mist:nth-of-type(2) { animation-delay:.12s; }
body.cursor-hot .cursor__mist:nth-of-type(3) { animation-delay:.24s; }
/* Werte in Bildkoordinaten der Originaldatei (nicht in Pixeln) —
   der Nebel zieht nach rechts oben von der Düse weg. */
@keyframes mist {
  0%   { opacity:0; transform: translate(-30px, 0) scale(.4); }
  35%  { opacity:.85; }
  100% { opacity:0; transform: translate(70px, -46px) scale(1.25); }
}
.cursor__ring {
  position: fixed; top:0;left:0; z-index:9999; pointer-events:none;
  width: 46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  border: 1.5px solid color-mix(in srgb, var(--brand) 55%, transparent);
  opacity:0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease);
  will-change: transform;
}
body.cursor-ready .cursor__ring { opacity:.6; }
body.cursor-hot .cursor__ring { width:66px; height:66px; margin:-33px 0 0 -33px; opacity:1; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor__ring{ display:none!important; } }

/* 4. ───────────────────────── LOADER (Wisch) ─────────────────────────── */
.loader {
  position: fixed; inset:0; z-index: 10001; display:grid; place-items:center;
  background: var(--bg); transition: opacity .7s var(--ease), visibility .7s;
}
.loader.done { opacity:0; visibility:hidden; }
.loader__inner { width:min(420px,84vw); text-align:center; }
.loader__logo { display:flex; justify-content:center; margin-bottom: 30px; }
.loader__logo svg, .loader__logo img { width: 116px; height:auto; }
/* Besen-Loader: ein Besen kehrt den Ladebalken frei, Staub fliegt auf */
.loader__bar { position: relative; margin-bottom: 20px; }
.loader__glass {
  position: relative; height: 4px; width:100%; border-radius:2px;
  background: var(--surface-2); overflow: hidden;
}
.loader__wet {
  position:absolute; inset:0; width:0%; border-radius:2px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--brand-light));
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: width .18s linear;
}
/* Staubpartikel */
.loader__dust { position:absolute; left:0; top:0; width:100%; height:0; }
.dust {
  position:absolute; top:0; width:5px; height:5px; border-radius:50%;
  background: color-mix(in srgb, var(--ink) 42%, transparent); pointer-events:none;
  animation: dustfly .7s var(--ease-out) forwards;
}
@keyframes dustfly {
  0%   { opacity:.9; transform: translate(0,0) scale(1); }
  100% { opacity:0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
/* Besen */
.loader__broom {
  position:absolute; top:50%; left:0%; translate:-50% -78%;
  transition: left .18s linear; animation: sweep .5s ease-in-out infinite;
}
.broom__stick    { fill:#c98a4b; }
.broom__collar   { fill:#9a6a34; }
.broom__bristles path { fill:#e7b463; }
.broom__bristles line { stroke:#b7863c; stroke-width:1.4; }
@keyframes sweep { 0%,100% { rotate:-7deg; } 50% { rotate:7deg; } }
.loader__pct { font-size: 2.1rem; font-weight: 800; letter-spacing:-.02em; font-variant-numeric: tabular-nums; }
.loader__pct span:last-child { font-size:1rem; color: var(--ink-mute); }
.loader__tag { margin-top:6px; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color: var(--ink-mute); }

/* 5. ─────────────────────── PAGE-TRANSITION ──────────────────────────── */
.pt {
  position: fixed; inset:0; z-index: 9800; pointer-events:none;
  display:grid; place-items:center; background: var(--bg-2);
  transform: translateY(-101%);           /* ohne JS: verborgen -> Inhalt sichtbar */
}
.js .pt { transform: translateY(0); }      /* mit JS: deckt bei Ankunft (nahtlos zur Vorseite) */
.pt.reveal   { transform: translateY(-101%); transition: transform .6s var(--ease); }   /* aufwischen */
.pt.covering { transform: translateY(0);    transition: transform .5s var(--ease); }   /* zudecken */
.pt__logo { opacity:0; transform: translateY(10px); }
.js .pt__logo { opacity:1; transform:none; transition: opacity .4s var(--ease); }
.pt.reveal .pt__logo { opacity:0; transition: opacity .25s; }
.pt__logo svg, .pt__logo img { width: 104px; height:auto; }
/* Name der Zielseite während des Übergangs — benennt den Wechsel, statt ihn
   nur zu animieren. Erscheint erst beim Zudecken, nicht bei der Ankunft. */
.pt__name { margin-top:20px; font-size:clamp(1.5rem,4vw,2.3rem); font-weight:850;
  letter-spacing:-.02em; color:var(--ink); opacity:0; transform:translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.pt.covering .pt__name { opacity:1; transform:none; transition-delay:.12s; }
@media (prefers-reduced-motion: reduce){ .pt{ display:none!important; } }

/* Sanfter Seiten-Einstieg des Contents */
.page-enter { opacity: 0; transform: translateY(14px); }
.page-enter.in { opacity:1; transform:none; transition: opacity .6s var(--ease-out) .1s, transform .6s var(--ease-out) .1s; }

/* 6. ──────────────────────────── BUTTONS ─────────────────────────────── */
.btn {
  --pad: 15px 26px; position:relative; display:inline-flex; align-items:center; gap:10px;
  padding: var(--pad); border-radius:var(--radius-ctl); font-weight:650; font-size:.97rem; letter-spacing:.01em;
  white-space:nowrap; /* verhindert zweizeiligen Umbruch (z. B. Nav-CTA im Sticky-Zustand) */
  overflow:hidden; isolation:isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn svg { width:18px; height:18px; transition: transform .35s var(--ease); }
.btn--sm { --pad: 11px 20px; font-size:.9rem; }
.btn--block { width:100%; justify-content:center; padding:17px; }
.btn--primary {
  background: var(--brand);
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  color: var(--brand-ink);
  box-shadow: 0 12px 34px -10px rgba(41,171,226,.5);
  box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent);
}
.btn--primary::before { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -10px color-mix(in srgb, var(--brand) 65%, transparent); }
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { background: var(--surface); color: var(--ink); border:1px solid var(--line-2); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--accent-text); }
.btn:active { scale:.97; }
.btn:hover,.btn:focus-visible { will-change: transform; }

/* Aufmerksamkeits-Puls für den wichtigsten Button je Abschnitt.
   Beim Hovern aus, damit der Hover-Zustand sauber greift. */
.btn--pulse { animation: ctaPulse 2.8s ease-out infinite; }
.btn--pulse:hover, .btn--pulse:focus-visible { animation:none; }
@keyframes ctaPulse {
  0%   { box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent), 0 0 0 0   color-mix(in srgb, var(--brand) 55%, transparent); }
  70%  { box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent), 0 0 0 15px transparent; }
  100% { box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--brand) 55%, transparent), 0 0 0 0   transparent; }
}
/* Im blauen Abschluss-Band ist der Button dunkel — dort pulst ein dunkler Ring */
.cta-band .btn--pulse { animation-name: ctaPulseDark; }
@keyframes ctaPulseDark {
  0%   { box-shadow: 0 0 0 0   rgba(4,20,29,.45); }
  70%  { box-shadow: 0 0 0 15px rgba(4,20,29,0); }
  100% { box-shadow: 0 0 0 0   rgba(4,20,29,0); }
}

/* Kurze Vertrauens-/Dringlichkeitszeile direkt unter den Haupt-CTAs */
.cta-note { margin-top:15px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:.87rem; color:var(--ink-mute); width:fit-content; max-width:100%; }
/* Auf flachen Fenstern weicht der Scroll-Hinweis, damit die CTA-Zeile Luft hat */
@media (max-height:860px){ .hero .hero__scroll { display:none; } }
.cta-note span { display:inline-flex; align-items:center; gap:7px; }
.cta-note svg { width:15px; height:15px; flex:none; color:var(--brand); }
/* Im Band würde sonst „.cta-band p" (1.1rem, opacity .85) greifen — hier bewusst als Fußnote */
.cta-band .cta-note { color: var(--brand-ink); font-size:.87rem; opacity:1; margin-top:16px; max-width:none; }
.cta-band .cta-note svg { color: var(--brand-ink); }

@media (prefers-reduced-motion:reduce){ .btn--pulse { animation:none!important; } }

/* 7. ─────────────────────────── NAVIGATION ───────────────────────────── */
.nav { position:fixed; top:0; left:0; width:100%; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center; transition: height .4s var(--ease), background .4s, border-color .4s;
  border-bottom:1px solid transparent; }
.nav.scrolled { height:64px; background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); }
.nav__wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; }
.brand__img { display:block; height:52px; width:auto; }
.nav.scrolled .brand__img { height:44px; transition: height .4s var(--ease); }
.footer .brand__img { height:64px; }
@media (max-width:520px){ .brand__img { height:42px; } }
.nav__links { display:flex; align-items:center; gap:2px; flex-wrap:nowrap; }
.nav__link { position:relative; padding:9px 14px; font-size:.93rem; font-weight:550; color:var(--ink-soft);
  border-radius:var(--radius-sm); transition: color .3s; white-space:nowrap; flex-shrink:0; }
.nav__link::after { content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; border-radius:2px;
  background: var(--brand); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); }
.nav__link:hover { color:var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
/* "Sie sind hier" muss sich klar vom bloßen Überfahren unterscheiden:
   Hover = Unterstrich, aktuelle Seite = gefüllte Fläche mit Punkt davor. */
.nav__link.active {
  color: var(--accent-text); font-weight:700;
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  padding-left:26px;
}
.nav__link.active::after { transform: scaleX(0); }   /* Unterstrich bleibt dem Hover vorbehalten */
.nav__link.active::before {
  content:""; position:absolute; left:12px; top:50%; translate:0 -50%;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}
.nav__actions { display:flex; align-items:center; gap:12px; }
.burger { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--radius-sm); position:relative; }
.burger span { position:absolute; left:12px; width:20px; height:2px; background:var(--ink); border-radius:2px; transition: transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:26px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobilemenu { position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; justify-content:safe center;
  padding: calc(var(--nav-h) + 20px) var(--gutter) var(--gutter); background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
  opacity:0; visibility:hidden; overflow-y:auto; transition: opacity .5s var(--ease), visibility .5s; }
body.menu-open .mobilemenu { opacity:1; visibility:visible; }
.mobilemenu__link { display:flex; align-items:baseline; gap:16px; font-size:clamp(1.6rem,8vw,2.4rem); font-weight:800;
  letter-spacing:-.02em; padding:8px 0; color:var(--ink); opacity:0; transform:translateY(20px); }
.mobilemenu__link i { font-size:.72rem; font-weight:700; color:var(--brand); font-style:normal; letter-spacing:.1em; }
.mobilemenu__link.active { color: var(--accent-text); }
body.menu-open .mobilemenu__link { animation: mmIn .55s var(--ease) forwards; }
body.menu-open .mobilemenu__link:nth-child(1){animation-delay:.06s}
body.menu-open .mobilemenu__link:nth-child(2){animation-delay:.10s}
body.menu-open .mobilemenu__link:nth-child(3){animation-delay:.14s}
body.menu-open .mobilemenu__link:nth-child(4){animation-delay:.18s}
body.menu-open .mobilemenu__link:nth-child(5){animation-delay:.22s}
body.menu-open .mobilemenu__link:nth-child(6){animation-delay:.26s}
body.menu-open .mobilemenu__link:nth-child(7){animation-delay:.30s}
body.menu-open .mobilemenu__link:nth-child(8){animation-delay:.34s}
@keyframes mmIn { to{ opacity:1; transform:none; } }
.mobilemenu__foot { margin-top:34px; display:flex; flex-direction:column; gap:8px; }
.mobilemenu__foot a { font-size:1.1rem; font-weight:700; color:var(--accent-text); }
.mobilemenu__foot span { color:var(--ink-mute); font-size:.9rem; }

/* 8. ────────────────────────────── HERO (Home) ───────────────────────── */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h); overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:0; }
/* Foto deutlich zurückgenommen: die Überschrift ist im hellen Schema dunkel und
   braucht durchgehend einen hellen Untergrund, sonst leidet die Lesbarkeit. */
.hero__media { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.32; }
.hero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--bg) 10%, color-mix(in srgb, var(--bg) 74%, transparent) 52%, color-mix(in srgb, var(--bg) 32%, transparent) 88%),
              linear-gradient(0deg, var(--bg), color-mix(in srgb, var(--bg) 40%, transparent) 55%); }
.hero__grid { position:absolute; inset:-2px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 80% 65% at 30% 35%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 65% at 30% 35%, #000 35%, transparent 78%); opacity:.6; }
.hero__glow { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; pointer-events:none; }
.hero__glow--1 { width:44vw; height:44vw; left:-10vw; top:2vw; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 66%); animation: floatA 18s ease-in-out infinite; }
.hero__glow--2 { width:38vw; height:38vw; right:-8vw; bottom:-10vw; background: radial-gradient(circle, color-mix(in srgb, var(--brand-light) 40%, transparent), transparent 66%); animation: floatA 22s ease-in-out infinite reverse; }
@keyframes floatA { 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(4%,-5%);} }
.hero__particles { position:absolute; inset:0; width:100%; height:100%; }
.hero__content { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
/* Logo-Emblem als Haupt-Visual rechts im Start-Hero. */
.hero__logo { position:absolute; z-index:-1; top:50%; right:0; translate:0 -50%; width:min(38vw, 400px); aspect-ratio:1/1; pointer-events:none; user-select:none; }
.hero__logo svg { width:100%; height:100%; display:block; overflow:visible; }
@media (max-width:1040px){ .hero__logo { width:min(42vw,340px); opacity:.5; } }
@media (max-width:820px){ .hero__logo { display:none; } }
.hero__eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-text); margin-bottom:26px; }
.hero__eyebrow::before { content:""; width:34px; height:1px; background:var(--brand); }
.hero__title { font-size:clamp(2.8rem,8.5vw,6.4rem); line-height:.96; font-weight:850; letter-spacing:-.035em; }
.hero__title .l { display:block; overflow:hidden; }
.hero__title .l > span { display:block; }
.hero__title .muted { color: var(--ink-soft); }
.hero__title .accent { color: var(--accent-text); }
.hero__sub { margin-top:26px; font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink-soft); max-width:52ch; }
.hero__cta { margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }
/* Rechts Platz für den fixen Anruf-Button lassen, sonst überlappt er „100%" */
.hero__stats { position:absolute; bottom:34px; right:calc(var(--gutter) + 76px); z-index:2; display:flex; gap:clamp(20px,4vw,48px); text-align:right; }
.hero__stats .n { font-size:clamp(1.7rem,3vw,2.3rem); font-weight:850; letter-spacing:-.02em; }
.hero__stats .n b { color:var(--accent-text); font-weight:850; }
.hero__stats .t { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.hero__scroll { position:absolute; bottom:34px; left:var(--gutter); z-index:2; display:flex; align-items:center; gap:12px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); }
.hero__scroll i { width:44px; height:1px; background:var(--line-2); position:relative; overflow:hidden; display:inline-block; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; width:40%; background:var(--brand); animation: scrollLine 2s var(--ease) infinite; }
@keyframes scrollLine { 0%{transform:translateX(-100%)} 100%{transform:translateX(250%)} }

/* 9. ──────────────────────── PAGE-HERO (Unterseiten) ─────────────────── */
.phero { position:relative; padding: calc(var(--nav-h) + clamp(50px,9vw,110px)) 0 clamp(50px,8vw,100px); overflow:hidden; }
.phero__bg { position:absolute; inset:0; z-index:0; }
/* Markenzeichen als großflächiges, sehr zurückhaltendes Wasserzeichen im
   Seitenkopf. Bewusst angeschnitten und schwach — es soll die Marke präsent
   halten, nicht mit der Überschrift konkurrieren. */
.phero::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(18px, 4vw, 68px); top:50%; translate:0 -50%;
  width:min(34vw, 360px); aspect-ratio:1;
  background:url('logo-mark-blau.png') center/contain no-repeat;
  opacity:.10;
}
/* Auf dunklem Grund wäre die blaue Marke kaum sichtbar — hier in Weiß */
.inv.phero::after { filter: brightness(0) invert(1); opacity:.10; }
@media (max-width:900px){ .phero::after { width:min(46vw,300px); opacity:.07; } }

.phero__glow { position:absolute; width:50vw; height:50vw; right:-15vw; top:-20vw; border-radius:50%; filter:blur(70px); opacity:.4;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent), transparent 66%); }
.phero__grid { position:absolute; inset:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:58px 58px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000, transparent 75%); opacity:.5; }
.phero__inner { position:relative; z-index:2; }
.phero__crumb { font-size:.8rem; letter-spacing:.06em; color:var(--ink-mute); margin-bottom:20px; }
.phero__crumb a { color:var(--ink-mute); text-decoration:none; }
.phero__crumb a:hover { color:var(--accent-text); text-decoration:underline; }
/* Die letzte Stufe ist die aktuelle Seite — die darf sich absetzen */
.phero__crumb strong { color:var(--ink); font-weight:700; }

/* Seitenkennzeichnung als sichtbares Schild statt zarter Kleinschrift.
   Zusammen mit dem Punkt in der Navigation ist damit auf einen Blick klar,
   auf welcher Seite man gelandet ist. */
.phero__eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; margin-bottom:18px;
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-text);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--radius-xs);
}
.phero__eyebrow::before {
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--brand-light);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.phero__title { font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:1.02; font-weight:850; letter-spacing:-.03em; max-width:16ch; }
.phero__title .accent { color:var(--accent-text); }
.phero__lead { margin-top:22px; font-size:clamp(1.05rem,1.8vw,1.25rem); color:var(--ink-soft); max-width:60ch; }
.phero__cta { margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; }

/* ── Seiten-Hero-Illustration ────────────────────────────────────────────
   Jede Unterseite bekommt eine eigene, animierte SVG-Grafik im Kopf (rechts,
   dezent hinter dem Text). Sie enthält das Logo und ein zum Seitenthema
   passendes Motiv — dadurch ist auf einen Blick klar, auf welcher Seite man
   gelandet ist. Rein dekorativ (aria-hidden). */
.phero:has(.phero__art)::after { display:none; }   /* altes Logo-Wasserzeichen weicht der Grafik */

/* Foto-Hintergrund im Seitenkopf. Die Bilder bringen bereits einen dunklen
   Verlauf links mit; der Overlay verstärkt ihn, damit der Text sicher lesbar
   bleibt und das Motiv nach rechts frei atmet. */
.phero__media { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.phero__media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, var(--bg) 2%, color-mix(in srgb, var(--bg) 72%, transparent) 42%, color-mix(in srgb, var(--bg) 18%, transparent) 78%, transparent 100%),
              linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 28%, transparent) 44%, transparent 74%); }
/* Über dem Foto kein Logo-Wasserzeichen/-Badge — dort trägt die animierte Karte die Marke (inkl. Logo im Kartenkopf). */
.phero:has(.phero__media)::after { display:none; }
.phero:has(.phero__media) .phero__grid { opacity:.22; }          /* Raster über dem Foto zurücknehmen */
.phero:has(.phero__media) .phero__art  { filter: drop-shadow(0 24px 46px rgba(0,0,0,.5)); }  /* Karte schwebt sichtbar über dem Foto */
.phero__art {
  position:absolute; z-index:-1; top:50%; right:0; translate:0 -50%;
  width:min(40vw, 430px); aspect-ratio:1/1;
  pointer-events:none; user-select:none;
  opacity:0; animation: pheroArtIn 1.1s var(--ease-out) .1s forwards;
}
.phero__art svg { width:100%; height:100%; display:block; overflow:visible; }
@keyframes pheroArtIn { from { opacity:0; transform:translateX(16px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:980px){ .phero__art { display:none; } }
@media (prefers-reduced-motion: reduce){ .phero__art { animation:none; opacity:1; } }

/* 10. ──────────────────────────── TYPO-HELFER ────────────────────────── */
.section { padding: clamp(70px,10vw,140px) 0; position:relative; }
.section--tight { padding: clamp(50px,7vw,90px) 0; }
.section__head { max-width:720px; margin-bottom: clamp(38px,6vw,64px); }
.section__head.center { margin-inline:auto; text-align:center; }
.eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-text); margin-bottom:16px; }
.h2 { font-size:clamp(1.9rem,5vw,3.3rem); line-height:1.05; font-weight:800; letter-spacing:-.02em; }
.lead { margin-top:20px; font-size:clamp(1rem,1.7vw,1.16rem); color:var(--ink-soft); max-width:62ch; }
.center .lead { margin-inline:auto; }
.accent { color: var(--accent-text); }
.muted { color: var(--ink-soft); }
.pulse-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 0 var(--brand); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent);} 70%{box-shadow:0 0 0 12px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* 11. ─────────────────── SEKTIONEN / KOMPONENTEN ─────────────────────── */
/* Marquee */
.marquee { border-block:1px solid var(--line); padding:20px 0; overflow:hidden; background:var(--bg-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:inline-flex; align-items:center; gap:34px; white-space:nowrap; animation: marquee 28s linear infinite; }
.marquee__track span { font-size:clamp(1.1rem,3vw,1.8rem); font-weight:800; letter-spacing:-.01em; opacity:.5; }
/* Trenner im Laufband: statt eines generischen Sternchens die Bildmarke.
   Dadurch läuft das Logo mehrfach sichtbar durch den Auftakt der Startseite. */
.marquee__track i {
  display:inline-block; width:30px; height:30px; font-size:0; line-height:0;
  vertical-align:middle; flex:none;
  background:url('logo-mark-blau.png') center/contain no-repeat;
  opacity:.75;
}
.marquee:hover .marquee__track { animation-play-state:paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Grids */
.grid { display:grid; gap:22px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; }
/* Verhindert, dass breite Inhalte (z. B. die laufende Galerie) die Spalte aufblähen */
.split > * { min-width:0; }

/* Feature / Service card */
.card { position:relative; padding:32px 30px; border-radius:var(--radius); overflow:hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow); }
.card__glow { position:absolute; width:300px; height:300px; border-radius:50%; left:var(--mx,50%); top:var(--my,0);
  translate:-50% -50%; pointer-events:none; opacity:0; transition:opacity .4s;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%); }
.card:hover .card__glow { opacity:1; }
.card > *:not(.card__glow) { position:relative; z-index:1; }
.card__ic { width:60px; height:60px; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:22px;
  background: color-mix(in srgb, var(--brand) 12%, transparent); border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  color:var(--accent-text); transition: transform .5s var(--ease); }
.card:hover .card__ic { transform: translateY(-4px); }
.card__ic svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { font-size:1.3rem; font-weight:750; letter-spacing:-.01em; margin-bottom:10px; }
.card p { color:var(--ink-soft); font-size:.98rem; }
.card__list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.card__list li { position:relative; padding-left:22px; font-size:.9rem; color:var(--ink-soft); }
.card__list li::before { content:""; position:absolute; left:4px; top:8px; width:7px; height:7px; border-radius:2px; background:var(--brand); }
.card__link { margin-top:20px; display:inline-flex; align-items:center; gap:8px; color:var(--accent-text); font-weight:600; font-size:.92rem; }
.card__link svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; transition: transform .3s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }

/* Media / echte Fotos ------------------------------------------------------ */
.media { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.media:hover img { transform: scale(1.045); }
.media--43 { aspect-ratio:4/3; }
.media__cap { position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; z-index:2;
  background: linear-gradient(0deg, rgba(11,19,30,.82), transparent); color:#fff; font-weight:700; font-size:.95rem; }
.media__cap small { display:block; font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-light); margin-bottom:2px; }

/* Bild oben in einer .card (Karten mit Foto-Header) */
.card--media { padding-top:0; }
.card__media { position:relative; margin:0 -30px 24px; aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); }
.card__media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media::after { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(11,19,30,.35), transparent 55%); }

/* ── Karten-Sichtkarte (eingebettete Google-Maps-Karte) ────────────────────
   .map-card__cta bleibt für den noscript-Fallback-Link erhalten. */
.map-card {
  position:relative; display:block; aspect-ratio:4/3; border-radius:var(--radius);
  overflow:hidden; background:#0d1622; border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.map-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--brand) 45%, var(--line-2)); }
.map-card__cta { position:absolute; left:18px; right:18px; bottom:18px; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-radius:var(--radius-sm);
  background:rgba(11,19,30,.72); border:1px solid rgba(255,255,255,.14); color:#eef3f8; font-size:.9rem; font-weight:650;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition: background .3s, border-color .3s; }
.map-card:hover .map-card__cta { background:rgba(11,19,30,.85); border-color:color-mix(in srgb, var(--brand-light) 55%, transparent); }
.map-card__cta svg { width:17px; height:17px; flex:none; color:var(--brand-light); transition: transform .3s var(--ease); }
.map-card:hover .map-card__cta svg { transform:translate(3px,-3px); }
.map-card iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── Leistungs-Anteaser (Startseite) ──────────────────────────────────────
   Bewusst KEINE Kästen: eine lockere Reihe antippbarer Pills statt einer
   abgeschlossenen 3er-Box-Aufzählung — signalisiert "das ist ein Auszug",
   nicht "das sind alle unsere Leistungen". Führt klar zur vollständigen
   Leistungen-Seite. */
.svc-teaser { display:flex; flex-wrap:wrap; gap:12px; }
.svc-pill {
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px 14px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-2);
  color:var(--ink); text-decoration:none; font-weight:650; font-size:.96rem;
  transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.svc-pill__ic { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color:var(--accent-text); }
.svc-pill__ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.svc-pill:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--brand) 45%, var(--line)); background:var(--surface-2); box-shadow:var(--shadow-sm); }
.svc-teaser__more {
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 24px; border-radius:999px;
  background: transparent; border:1.5px dashed var(--line-2); color:var(--ink-mute);
  text-decoration:none; font-weight:650; font-size:.96rem;
  transition: transform .3s var(--ease), border-color .3s, color .3s;
}
.svc-teaser__more svg { width:17px; height:17px; transition: transform .3s var(--ease); }
.svc-teaser__more:hover { transform:translateY(-3px); border-color:var(--brand); color:var(--accent-text); border-style:solid; }
.svc-teaser__more:hover svg { transform:translateX(4px); }
.svc-teaser__note { margin-top:22px; font-size:.92rem; color:var(--ink-mute); }
@media (max-width:600px){ .svc-pill, .svc-teaser__more { font-size:.9rem; padding:12px 18px 12px 12px; } }

/* Galerie (Referenzen) */
.gallery .media { aspect-ratio:4/3; }

/* ── Endlos laufende Bildergalerie (Startseite, "Warum LA") ───────────────
   Die Spur enthält jede Kachel zweimal; die Animation verschiebt sie um
   genau -50 %, wodurch der Rücksprung unsichtbar ist.                     */
.autogal { position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--bg-2); }
/* Weiche Kanten links/rechts, damit die Kacheln nicht hart abgeschnitten wirken */
.autogal::before, .autogal::after { content:""; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none; }
.autogal::before { left:0;  background:linear-gradient(90deg, var(--bg-2), transparent); }
.autogal::after  { right:0; background:linear-gradient(270deg, var(--bg-2), transparent); }
.autogal__track { display:flex; gap:14px; padding:14px; width:max-content;
  animation: autogal-run 42s linear infinite; }
.autogal:hover .autogal__track { animation-play-state:paused; }
.autogal__item { position:relative; flex:0 0 auto; width:260px; aspect-ratio:4/3;
  margin:0; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.autogal__item img { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .7s var(--ease); }
.autogal__item:hover img { transform:scale(1.06); }
.autogal__item figcaption { position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:34px 14px 12px; color:#fff; font-weight:700; font-size:.86rem; line-height:1.3;
  background:linear-gradient(0deg, rgba(11,19,30,.86), transparent); }
.autogal__item figcaption small { display:block; font-weight:600; font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brand-light); margin-bottom:2px; }
@keyframes autogal-run { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:560px){ .autogal__item { width:210px; } }
/* Barrierefreiheit: keine Dauerbewegung bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce){
  .autogal__track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .autogal::before, .autogal::after { display:none; }
}

/* ── Leistungs-Unterseiten ────────────────────────────────────────────────
   Detailinhalt + gut sichtbare Navigation zwischen den Leistungen.        */

/* Zwei-Spalten-Detailblock: Fließtext + Faktenkarte */
.svc-detail { display:grid; grid-template-columns: 1.35fr .95fr; gap: clamp(30px,4.5vw,64px); align-items:start; }
.svc-detail > * { min-width:0; }

/* Leistungsumfang als Häkchenliste */
.svc-check { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.svc-check li { position:relative; padding-left:38px; color:var(--ink-soft); line-height:1.6; }
.svc-check li::before { content:""; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  background: color-mix(in srgb, var(--brand) 14%, transparent); border:1px solid color-mix(in srgb, var(--brand) 32%, transparent); }
.svc-check li::after { content:""; position:absolute; left:8px; top:8px; width:9px; height:5px;
  border-left:2px solid var(--brand-light); border-bottom:2px solid var(--brand-light); rotate:-45deg; }
.svc-check li b { color:var(--ink); font-weight:700; }

/* Faktenkarte (klebt beim Scrollen mit) */
.svc-facts { position:sticky; top:96px; }
.svc-facts dl { margin:0; display:grid; gap:0; }
.svc-facts .row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line); font-size:.93rem; }
.svc-facts .row:first-of-type { border-top:0; }
.svc-facts dt { color:var(--ink-soft); margin:0; }
.svc-facts dd { margin:0; color:var(--ink); font-weight:700; text-align:right; }

/* ── Navigation zwischen den Leistungsseiten ─────────────────────────────── */
.svc-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; margin-top:8px; }
.svc-nav__link { display:flex; align-items:center; gap:16px; padding:22px 26px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:inherit;
  transition: transform .35s var(--ease), border-color .35s, background .35s; }
.svc-nav__link:hover { transform:translateY(-4px); border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.svc-nav__link--next { justify-content:flex-end; text-align:right; }
.svc-nav__link small { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); font-weight:700; margin-bottom:4px; }
.svc-nav__link b { font-size:1.02rem; font-weight:750; line-height:1.3; display:block; }
.svc-nav__link svg { width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; color:var(--accent-text); transition:transform .35s var(--ease); }
.svc-nav__link--prev:hover svg { transform:translateX(-4px); }
.svc-nav__link--next:hover svg { transform:translateX(4px); }

/* Mittlerer Button: zurück zur Leistungsübersicht */
.svc-nav__all { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:22px 30px; border-radius:var(--radius); text-decoration:none; text-align:center;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color:#fff; font-weight:750;
  border:1px solid color-mix(in srgb, var(--brand-light) 45%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 28%, transparent);
  transition: transform .35s var(--ease), box-shadow .35s; }
.svc-nav__all:hover { transform:translateY(-4px); box-shadow: 0 16px 40px color-mix(in srgb, var(--brand) 38%, transparent); }
.svc-nav__all svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.svc-nav__all span { font-size:.95rem; }

/* Schnellwechsel: alle sechs Leistungen als Chips */
.svc-chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px; }
.svc-chips a { padding:9px 17px; border-radius:var(--radius-xs); border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); text-decoration:none; font-size:.88rem; font-weight:650;
  transition: color .3s, border-color .3s, background .3s; }
.svc-chips a:hover { color:var(--ink); border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
/* Opake, dunkle Fläche statt transparentem Blau: Weiß auf #0a6ba5 = 5,7:1 Kontrast */
.svc-chips a[aria-current="page"] { color:#fff; background: var(--accent-text);
  border-color: var(--accent-text); }

@media (max-width: 900px){
  .svc-detail { grid-template-columns:1fr; }
  .svc-facts { position:static; }
  .svc-nav { grid-template-columns:1fr; }
  .svc-nav__all { order:-1; }
  .svc-nav__link--next { justify-content:flex-start; text-align:left; flex-direction:row-reverse; }
  .svc-nav__link--next svg { rotate:180deg; }
}

/* Stat band */
.stats { border-block:1px solid var(--line); background:var(--bg-2); }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat { position:relative; padding:14px; }
.stat + .stat::before { content:""; position:absolute; left:-10px; top:20%; height:60%; width:1px; background:var(--line); }
.stat .n { font-size:clamp(2.4rem,6vw,3.8rem); font-weight:850; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
  background: linear-gradient(180deg, var(--ink), var(--accent-text)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .t { margin-top:12px; font-size:.9rem; color:var(--ink-soft); }

/* Steps / process */
.steps { display:grid; gap:22px; grid-template-columns:repeat(4,1fr); }
.step { position:relative; padding:30px 26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.step__line { position:absolute; top:48px; left:100%; width:22px; height:2px; background: linear-gradient(90deg, var(--brand), transparent); }
.step__n { display:inline-grid; place-items:center; width:50px; height:50px; border-radius:var(--radius-sm); font-weight:800; font-size:1.1rem;
  color:var(--accent-text); background: color-mix(in srgb, var(--brand) 12%, transparent); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); margin-bottom:18px; }
.step h3 { font-size:1.12rem; font-weight:700; margin-bottom:8px; }
.step p { font-size:.92rem; color:var(--ink-soft); }

/* Before / After */
.ba { position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); touch-action:pan-y; user-select:none; }
.ba__img { position:absolute; inset:0; background-size:cover; background-position:center; }
.ba__img--before { width:100%; clip-path: inset(0 50% 0 0); }
.ba__handle { position:absolute; top:0; left:50%; height:100%; width:2px; translate:-50% 0; background:var(--brand); z-index:3; cursor:ew-resize; box-shadow:0 0 14px color-mix(in srgb, var(--brand) 70%, transparent); }
.ba__knob { position:absolute; top:50%; left:50%; translate:-50% -50%; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:var(--brand-ink); box-shadow:0 6px 20px -4px rgba(0,0,0,.5); }
.ba__knob svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.ba__tag { position:absolute; top:14px; padding:5px 12px; border-radius:var(--radius-xs); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:2; }
.ba__tag--b { left:14px; background:rgba(11,19,30,.6); color:#fff; }
.ba__tag--a { right:14px; background: color-mix(in srgb, var(--brand) 88%, #000); color:var(--brand-ink); }
.ba__cap { position:absolute; bottom:14px; left:14px; font-weight:700; z-index:2; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.ba--portrait { aspect-ratio:3/4; }

/* Reviews */
.reviews__vp { overflow:hidden; }
.reviews__track { display:flex; gap:22px; transition: transform .6s var(--ease); }
.review { flex:0 0 calc((100% - 44px)/3); padding:30px 28px; border-radius:var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.stars { color:#f6b73c; letter-spacing:2px; text-shadow:0 0 10px color-mix(in srgb, #f6b73c 55%, transparent); }
.review .stars { font-size:1.05rem; display:block; margin-bottom:14px; }
.review p { font-size:1rem; margin-bottom:22px; }
.review footer { display:flex; align-items:center; gap:13px; }
.review .ava { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.9rem; color:var(--brand-ink); background: linear-gradient(135deg, var(--brand-light), var(--brand)); flex:none; }
.review footer .who { display:flex; flex-direction:column; font-size:.84rem; color:var(--ink-mute); }
.review footer .who b { color:var(--ink); font-size:.96rem; }
/* Quellenangabe mit lokal eingebetteter Google-Bildmarke.
   Die Grafik liegt als Inline-SVG im Dokument — es wird nichts von Google
   nachgeladen, es fließen also keine Besucherdaten dorthin (DSGVO).
   Verwendung rein als Herkunftshinweis, nicht als Siegel oder Partnerlogo. */
.gsrc { display:inline-flex; align-items:center; gap:6px; }
.gsrc__mark { width:14px; height:14px; flex:none; display:block; }
.reviews__ctrl { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:34px; }
.reviews__btn { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); font-size:1.3rem; color:var(--ink); display:grid; place-items:center; transition:border-color .3s,color .3s,transform .3s; }
.reviews__btn:hover { border-color:var(--brand); color:var(--accent-text); transform:scale(1.06); }
.reviews__btn:active { scale:.94; }
.reviews__dots { display:flex; gap:8px; }
.reviews__dots button { width:8px; height:8px; border-radius:50%; background:var(--line-2); transition:width .3s,background .3s; box-sizing:content-box; padding:12px 6px; background-clip:content-box; }
.reviews__dots button.on { width:24px; border-radius:100px; background:var(--brand); }

/* Team / values */
.member { text-align:left; }
.member__photo { aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border:1px solid var(--line); position:relative; margin-bottom:16px; }
.member__photo::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%); }
.member h3 { font-size:1.15rem; font-weight:700; }
.member .role { color:var(--accent-text); font-size:.9rem; }
.value { padding:26px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.value .k { font-size:2rem; font-weight:850; color:var(--accent-text); letter-spacing:-.02em; }
.value h3 { margin:10px 0 8px; font-size:1.1rem; font-weight:700; }
.value p { color:var(--ink-soft); font-size:.94rem; }

/* Detailed service list */
/* Kompakte Katalogzeile: reine Übersicht ohne Beschreibungstext.
   Die Details stehen auf den sechs Leistungsseiten. */
.svc-row { display:grid; grid-template-columns: 42px 1fr auto; gap:16px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--line); transition: padding .3s var(--ease); }
.svc-row:hover { padding-inline:14px; }
.svc-row__ic { width:42px; height:42px; border-radius:var(--radius-sm); display:grid; place-items:center; background: color-mix(in srgb, var(--brand) 10%, transparent); border:1px solid color-mix(in srgb, var(--brand) 24%, transparent); color:var(--accent-text); }
.svc-row__ic svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc-row h3 { font-size:1.02rem; font-weight:650; }
.svc-row p { color:var(--ink-soft); font-size:.92rem; margin-top:4px; }
.svc-row__tag { font-size:.78rem; color:var(--accent-text); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius:var(--radius-xs); padding:6px 14px; white-space:nowrap; }

/* CTA band */
/* Gradient-Start bewusst aufgehellt (55% deep statt pur): dunkler Text erreicht
   so auch am dunklen Ende des Verlaufs die 4,5:1-Kontrastgrenze. */
.cta-band { position:relative; overflow:hidden; border-radius: var(--radius); padding: clamp(40px,6vw,72px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-deep) 55%, var(--brand)), var(--brand)); color:var(--brand-ink); }
.cta-band::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:40px 40px; -webkit-mask-image: radial-gradient(ellipse 60% 100% at 80% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 100% at 80% 50%, #000, transparent 70%); }
/* Markenzeichen im Abschluss-Band — hier in Weiß, weil der Grund markenblau ist */
.cta-band::after {
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:clamp(20px, 4vw, 52px); top:50%; translate:0 -50%;
  width:min(30%, 250px); aspect-ratio:1;
  background:url('logo-mark-blau.png') center/contain no-repeat;
  filter: brightness(0) invert(1); opacity:.14;
}
@media (max-width:760px){ .cta-band::after { opacity:.09; width:min(46%,200px); right:14px; } }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { font-size:clamp(1.8rem,4.5vw,3rem); font-weight:850; letter-spacing:-.02em; max-width:20ch; }
.cta-band p { margin-top:14px; font-size:1.1rem; max-width:52ch; }
.cta-band .btn--primary { background:var(--brand-ink); color:#fff; box-shadow:none; }
.cta-band .btn--ghost { border-color: rgba(4,20,29,.35); color:var(--brand-ink); background:transparent; }

/* 12. ──────────────────────────── FORMULAR ───────────────────────────── */
.cform { padding: clamp(24px,4vw,40px); border-radius:var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); box-shadow:var(--shadow); }
.cform__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { position:relative; margin-bottom:20px; }
.field input,.field textarea,.field select { width:100%; padding:18px 16px 8px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--ink); font-size:1rem; transition:border-color .3s, background .3s; appearance:none; }
.field textarea { resize:vertical; min-height:120px; padding-top:22px; }
.field select { padding-top:22px; padding-right:44px; cursor:pointer; }
.field:has(select)::after { content:""; position:absolute; right:16px; top:calc(50% + 5px); transform:translateY(-50%); width:12px; height:12px; pointer-events:none; background:var(--ink-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.field label { position:absolute; left:16px; top:15px; color:var(--ink-mute); font-size:1rem; pointer-events:none; transform-origin:left; transition: transform .25s var(--ease), color .25s; }
.field input:focus,.field textarea:focus,.field select:focus { outline:none; border-color:var(--brand); background: color-mix(in srgb, var(--brand) 5%, var(--surface-2)); }
/* Deutlicher Ring für Tastatur-Fokus — der Borderwechsel allein ist zu schwach */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); border-color:var(--brand-deep); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field.filled label, .field .static { transform: translateY(-11px) scale(.78); color:var(--accent-text); }
.field.invalid input,.field.invalid select,.field.invalid textarea { border-color:var(--err); border-width:2px; }
.field.invalid label::after { content:" !"; color:var(--err); font-weight:700; }
.check { display:flex; align-items:flex-start; gap:12px; font-size:.86rem; color:var(--ink-soft); margin-bottom:22px; cursor:pointer; }
.check a { color:var(--accent-text); text-decoration:underline; }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check__box { flex:none; width:22px; height:22px; border-radius:var(--radius-xs); border:1px solid var(--line-2); position:relative; transition:background .3s,border-color .3s; margin-top:1px; }
.check__box::after { content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid var(--brand-ink); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .25s var(--ease); }
.check input:checked + .check__box { background:var(--brand); border-color:var(--brand); }
.check input:checked + .check__box::after { transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline:2px solid var(--brand); outline-offset:2px; }
/* Honeypot-Feld des Spam-Schutzes: für Menschen unsichtbar und nicht
   fokussierbar, für Formular-Bots aber ein normales Eingabefeld. */
.hp { position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px; height:1px; overflow:hidden; }
.cform__status { margin-top:14px; font-size:.9rem; min-height:1.2em; }
.cform__status.ok { color:var(--accent-text); }
.cform__status.err { color:var(--err); }

/* ── Anfrage-Wizard ────────────────────────────────────────────────────────
   Klickbasierter Schritt-für-Schritt-Ablauf statt eines leeren Formulars:
   senkt die Hemmschwelle, weil man fast nichts tippen muss. Getippt wird nur
   dort, wo es nicht anders geht (Name, Telefon, optional Adresse/Notiz). */
.is-hidden { display:none !important; }
.wizard { padding: clamp(24px,4vw,40px); border-radius:var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.wizard__progress-track { height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-bottom:24px; }
.wizard__progress-bar { height:100%; width:16.6%; background:linear-gradient(90deg,var(--brand-light),var(--brand)); border-radius:2px; transition:width .45s var(--ease); }
.wizard__step-label { font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); margin-bottom:10px; }
.wizard__q { font-size:clamp(1.2rem,2.6vw,1.55rem); font-weight:800; letter-spacing:-.01em; margin-bottom:6px; }
.wizard__hint { color:var(--ink-soft); font-size:.94rem; margin-bottom:24px; }

.wizard__steps { position:relative; }
.wizard__step { display:none; }
.wizard__step.is-active { display:block; animation: wizIn .45s var(--ease) both; }
.wizard__step.is-active.is-back { animation-name: wizInBack; }
@keyframes wizIn { from{ opacity:0; translate:18px 0; } to{ opacity:1; translate:0 0; } }
@keyframes wizInBack { from{ opacity:0; translate:-18px 0; } to{ opacity:1; translate:0 0; } }

.wizard__choices { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.wizard__choice {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:clamp(22px,4vw,32px) 20px; border-radius:var(--radius-sm); background:var(--surface);
  border:2px solid var(--line); cursor:pointer; font-weight:700; font-size:1rem; color:var(--ink);
  transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
}
.wizard__choice svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--accent-text); }
.wizard__choice:hover { border-color:var(--brand); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.wizard__choice.is-selected { border-color:var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }

.wizard__chips { display:flex; flex-wrap:wrap; gap:12px; }
.wizard__chip {
  display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px;
  background:var(--surface); border:2px solid var(--line); cursor:pointer; font-weight:650; font-size:.94rem; color:var(--ink);
  transition: border-color .25s, background .25s, color .25s, transform .25s;
}
.wizard__chip svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.wizard__sublabel { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); margin:0 0 12px; }
.wizard__group { margin-bottom:28px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.wizard__group:last-of-type { border-bottom:none; padding-bottom:0; margin-bottom:22px; }
.wizard__chip:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--brand) 50%, var(--line)); }
.wizard__chip.is-selected { border-color:var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); color:var(--accent-text); }
.wizard__chip.is-selected::after { content:"✓"; font-weight:800; }
.wizard__chip--sm { padding:10px 16px; font-size:.88rem; }

.wizard__row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wizard__actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:30px; }
.wizard__actions .btn:only-child { margin-left:auto; }
.wizard__back { display:inline-flex; align-items:center; gap:8px; background:none; border:none; color:var(--ink-mute); font-weight:650; font-size:.92rem; cursor:pointer; padding:10px 4px; transition:color .25s; }
.wizard__back:hover { color:var(--accent-text); }
.wizard__back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
button.wizard__continue[disabled] { opacity:.4; pointer-events:none; }

.wizard__summary { display:flex; flex-direction:column; gap:2px; margin-bottom:24px; border-top:1px solid var(--line); }
.wizard__summary-row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.wizard__summary-row b { color:var(--ink); flex:none; }
.wizard__summary-row span { color:var(--ink-soft); text-align:right; }

.wizard__switch, .cform__switch { margin-top:18px; font-size:.9rem; color:var(--ink-mute); text-align:center; }
.wizard__switch a, .cform__switch a,
.wizard__switch button, .cform__switch button { background:none; border:none; padding:0; font:inherit; color:var(--accent-text); text-decoration:underline; cursor:pointer; }
/* Ohne JavaScript ist der Wizard funktionslos — dann direkt das klassische
   Formular zeigen (das per JS erst beim Wizard-Start versteckt wird). */
html:not(.js) .wizard, html:not(.js) .wizard__switch { display:none; }
@media (max-width:600px){ .wizard__choices, .wizard__row2 { grid-template-columns:1fr; } }

/* Contact methods */
.cmethods { display:flex; flex-direction:column; gap:10px; }
.cmethods a { display:flex; align-items:center; gap:16px; padding:15px 18px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--line); transition:border-color .3s, transform .3s; }
.cmethods a:hover { border-color:var(--brand); transform:translateX(5px); }
.cmethods .ic { width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; background: color-mix(in srgb, var(--brand) 12%, transparent); color:var(--accent-text); flex:none; }
.cmethods .ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cmethods .who { display:flex; flex-direction:column; }
.cmethods small { color:var(--ink-mute); font-size:.78rem; }

/* Legal prose (Impressum/Datenschutz) */
.prose { max-width: 78ch; }
.prose h2 { font-size: clamp(1.3rem,3vw,1.7rem); font-weight:750; margin: 40px 0 14px; letter-spacing:-.01em; }
.prose h3 { font-size:1.1rem; font-weight:700; margin:26px 0 10px; }
.prose p, .prose li { color:var(--ink-soft); margin-bottom:12px; }
.prose ul { padding-left:20px; list-style: disc; }
.prose a { color:var(--accent-text); text-decoration:underline; }
.ph, .prose .ph { color:var(--accent-text); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius:var(--radius-xs); padding:1px 7px; }

/* 13. ──────────────────────────── FOOTER ─────────────────────────────── */
.footer { border-top:1px solid var(--line); background:var(--bg-2); padding: clamp(50px,7vw,86px) 0 30px; }
.footer__top { display:grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:42px; border-bottom:1px solid var(--line); }
.footer__brand p { margin-top:16px; color:var(--ink-soft); font-size:.94rem; max-width:40ch; }
.footer__col h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute); margin-bottom:16px; }
.footer__col a { display:block; padding:5px 0; color:var(--ink-soft); font-size:.94rem; transition:color .3s, transform .3s; }
.footer__col a:hover { color:var(--accent-text); transform:translateX(3px); }
.footer__hours { display:block; margin-top:10px; font-size:.84rem; color:var(--ink-mute); }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:26px; font-size:.84rem; color:var(--ink-mute); }
.footer__legal { display:flex; gap:20px; }
.footer__legal a:hover { color:var(--accent-text); }

/* Floaties */
.floaties { position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:900; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
.floaty { position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:100px; transition:transform .3s var(--ease); }
.floaty--wa { width:56px; height:56px; background:#25d366; box-shadow:0 10px 30px -6px rgba(37,211,102,.6); }
/* Anruf-Schaltfläche — wird gezeigt, solange keine WhatsApp-Mobilnummer hinterlegt ist */
.floaty--call { width:56px; height:56px; background:var(--brand); color:#fff;
  box-shadow:0 10px 30px -6px color-mix(in srgb, var(--brand) 60%, transparent); }
.floaty--call svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.floaty--wa:hover { transform:scale(1.08) translateY(-2px); }
.floaty svg { width:26px; height:26px; }

/* 14. ─────────────────────────── REVEAL / MOTION ─────────────────────── */
.js [data-reveal] { opacity:0; transform: translateY(32px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; }
.js .hero__title .l > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
.hero__title .l.in > span { transform: translateY(0); }
[data-reveal].in { transition-delay: calc(var(--d,0) * 70ms); }

/* 15. ─────────────────────── RESPONSIVE / A11y ───────────────────────── */
@media (max-width:1080px){
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column:1/-1; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step__line { display:none; }
}
/* Nav: ab hier Burger-Menü, damit die 7 Links + Logo + CTA nie umbrechen */
@media (max-width:1120px){
  .nav__links { display:none; }
  .burger { display:block; }
}
@media (max-width:900px){
  .split { grid-template-columns:1fr; }
  /* .hero ist ein Flex-Container (Zeile). "position:static" würde die Statistik
     zum Flex-Nachbarn des Hero-Textes machen und rechts aus dem Bild schieben.
     Da dieselben Kennzahlen im Zahlenband darunter stehen, hier ausblenden. */
  .hero__stats { display:none; }
  .reviews__vp .review { flex-basis: calc((100% - 22px)/2); }
}
@media (max-width:720px){
  .grid-2,.grid-3,.grid-4,.steps { grid-template-columns:1fr; }
  .stats__grid { grid-template-columns: repeat(2,1fr); gap:30px 12px; }
  .stat + .stat:nth-child(odd)::before { display:none; }
  .cform__row { grid-template-columns:1fr; }
  .reviews__vp .review { flex-basis:100%; }
  .footer__top { grid-template-columns:1fr; gap:26px; }
  .footer__bottom { flex-direction:column; align-items:flex-start; }
  .footer { padding-bottom:92px; }
  .svc-row { grid-template-columns: 42px 1fr; }
  .svc-row__tag { display:none; }
  .hero__scroll { display:none; }
}
@media (prefers-reduced-motion: reduce){
  /* Auch Delays nullen: gestaffelte Einblendungen (Mobilmenü, SVG-Karten)
     würden sonst bis zu 340ms unsichtbar bleiben und dann aufpoppen. */
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.1ms!important; animation-delay:0s!important; transition-delay:0s!important; }
  .js [data-reveal]{ opacity:1!important; transform:none!important; }
  .js .hero__title .l > span{ transform:none!important; }
  .marquee__track{ animation:none; }
  .cursor,.cursor__ring{ display:none; }
}

/* ── Formular-Erfolgspanel (ersetzt Formular/Wizard nach dem Versand) ────── */
.form-success { text-align:center; padding:clamp(34px,6vw,56px) clamp(22px,4vw,44px); border-radius:var(--radius);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow:var(--shadow-sm); animation:successIn .5s var(--ease) both; }
.form-success__ic { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:color-mix(in srgb, var(--brand) 14%, transparent); border:1.5px solid var(--brand); color:var(--accent-text); }
.form-success__ic svg { width:30px; height:30px; }
.form-success h3 { font-size:clamp(1.3rem,2.6vw,1.6rem); font-weight:800; letter-spacing:-.01em; }
.form-success p { margin-top:10px; color:var(--ink-soft); max-width:46ch; margin-inline:auto; }
@keyframes successIn { from { opacity:0; translate:0 14px; scale:.98; } to { opacity:1; translate:0 0; scale:1; } }

/* ── Hinweis über den Vorher/Nachher-Reglern ─────────────────────────────── */
.ba-hint { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 30px;
  width:fit-content; max-width:100%; padding:11px 20px; border-radius:999px; font-size:.93rem; font-weight:650;
  color:var(--accent-text); background:color-mix(in srgb, var(--brand) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent); text-align:center; }
.ba-hint svg { width:18px; height:18px; flex:none; }

/* ── Winterdienst-Hervorhebung in der Leistungsübersicht (Außen & Winter) ── */
.svc-row--hot { background:color-mix(in srgb, var(--brand) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 34%, transparent); border-radius:var(--radius-sm);
  padding-inline:14px; margin-block:4px 10px; }
.svc-row--hot:hover { padding-inline:20px; }
.svc-row--hot .svc-row__ic { background:var(--brand); border-color:var(--brand); color:#fff; }
.svc-row--hot h3 { font-weight:800; }
.svc-row--hot .svc-row__tag { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── Exakt gleich große Kacheln in Rastern ───────────────────────────────── */
.grid--equal { grid-auto-rows:1fr; }
/* Lange Ein-Wort-Titel (z. B. "Hausverwaltungen") dürfen die Kachel nicht
   sprengen — Schrift minimal mitwachsend begrenzen und notfalls trennen. */
.grid--fit .k { font-size:clamp(1.35rem, .7rem + 1.1vw, 1.9rem); hyphens:auto; overflow-wrap:break-word; }

/* ── Consent-Dialog (Datenschutzeinstellungen) ───────────────────────────── */
.consent { position:fixed; inset:0; z-index:9700; display:grid; place-items:center;
  padding:clamp(14px,3vw,32px); background:rgba(8,13,20,.58);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.consent__box { width:100%; max-width:560px; max-height:min(92dvh,92vh); overflow:auto;
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,4vw,32px); }
.consent__titel { font-size:clamp(1.15rem,2.4vw,1.4rem); font-weight:800; letter-spacing:-.01em; }
.consent__text { margin-top:10px; color:var(--ink-soft); font-size:.94rem; line-height:1.6; }
.consent__cats { margin-top:18px; border-top:1px solid var(--line); }
.consent__cat { padding:14px 0; border-bottom:1px solid var(--line); }
.consent__cat p { margin-top:6px; color:var(--ink-soft); font-size:.87rem; line-height:1.55; }
.consent__cathead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.consent__always { font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-text); border:1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius:var(--radius-xs); padding:4px 10px; white-space:nowrap; }
.consent__toggle { margin:0; align-items:center; }
.consent__save { width:100%; margin-top:14px; justify-content:center; }
.consent__actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.consent__actions .btn { width:100%; justify-content:center; text-align:center; }
.consent__foot { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:16px; flex-wrap:wrap; }
.consent__link { background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:.88rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.consent__link:hover { color:var(--accent-text); }
.consent :focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
@media (max-width:560px){
  .consent { place-items:end center; padding:0; }
  .consent__box { border-radius:var(--radius) var(--radius) 0 0; border-inline:0; border-bottom:0; }
  .consent__actions { grid-template-columns:1fr; }
}

/* ── Google-Maps-Platzhalter (vor der Zustimmung) ────────────────────────── */
.map-consent { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:10px;
  padding:clamp(20px,5vw,36px); background:var(--bg); }
.map-consent__ic { display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); color:var(--accent-text); }
.map-consent__ic svg { width:26px; height:26px; }
.map-consent h3 { font-size:1.08rem; font-weight:750; letter-spacing:-.01em; }
.map-consent p { color:var(--ink-soft); font-size:.9rem; line-height:1.55; max-width:34ch; }
.map-consent .btn { margin-top:6px; }
.map-consent__link { font-size:.84rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.map-consent__link:hover { color:var(--accent-text); }

/* ── Footer-Link "Datenschutzeinstellungen" ──────────────────────────────── */
.footer__consent { background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:inherit; transition:color .2s; }
.footer__consent:hover { color:var(--accent-text); }