/* =========================================================
   Rewasit – Mobile Fahrzeugwäsche für Autohäuser
   Statisches Stylesheet (Nachbau der Lovable-Version)
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root,
:root[data-theme="dark"] {
  --background: oklch(16% 0.014 250);
  --foreground: oklch(97% 0.004 250);
  --surface: oklch(20% 0.016 250);
  --surface-2: oklch(24.5% 0.018 250);
  --primary: oklch(78% 0.14 205);
  --primary-foreground: oklch(17% 0.02 250);
  --muted: oklch(25% 0.016 250);
  --muted-foreground: oklch(72% 0.012 250);
  --border: oklch(32% 0.018 250);
  --input: oklch(30% 0.018 250);
  --logo-card: #ffffff;
  --gradient-hero: linear-gradient(160deg, oklch(16% 0.014 250) 0%, oklch(21% 0.03 235) 55%, oklch(16% 0.014 250) 100%);
  --gradient-primary: linear-gradient(100deg, oklch(82% 0.13 195), oklch(70% 0.14 235));
  --shadow-elevated: 0 24px 60px -24px oklch(0% 0 0 / 0.75);
  --shadow-glow: 0 0 0 1px oklch(78% 0.14 205 / 0.25), 0 20px 50px -22px oklch(78% 0.14 205 / 0.5);
  --hairline: oklch(100% 0 0 / 0.07);
  --radius: 0.75rem;
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 1.15s;
  --maxw: 72rem;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --background: oklch(97% 0.003 250);
  --foreground: oklch(22% 0.02 250);
  --surface: oklch(94% 0.005 250);
  --surface-2: oklch(90% 0.008 250);
  --primary: oklch(55% 0.15 205);
  --primary-foreground: oklch(99% 0.002 250);
  --muted: oklch(90% 0.006 250);
  --muted-foreground: oklch(48% 0.012 250);
  --border: oklch(85% 0.012 250);
  --input: oklch(88% 0.01 250);
  --logo-card: #ffffff;
  --gradient-hero: linear-gradient(160deg, oklch(97% 0.003 250) 0%, oklch(93% 0.008 250) 55%, oklch(97% 0.003 250) 100%);
  --gradient-primary: linear-gradient(100deg, oklch(55% 0.15 205), oklch(45% 0.16 235));
  --shadow-elevated: 0 24px 60px -24px oklch(0% 0 0 / 0.18);
  --shadow-glow: 0 0 0 1px oklch(55% 0.15 205 / 0.25), 0 20px 50px -22px oklch(55% 0.15 205 / 0.28);
  --hairline: oklch(0% 0 0 / 0.08);
  color-scheme: light;
}

/* ---------- 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-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s var(--ease-lux), color .4s var(--ease-lux);
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- Helper ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.sec { position: relative; padding-block: 5rem; scroll-margin-top: 6rem; }
.sec--tight { padding-block: 3.5rem; }
.sec--bordered { border-block: 1px solid var(--border); }
@media (min-width: 768px) { .sec { padding-block: 7rem; } .sec--tight { padding-block: 4.5rem; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--foreground);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--primary); }
.eyebrow--plain::before { display: none; }
.mono-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.txt-muted { color: var(--muted-foreground); }
.head-max { max-width: 48rem; }
.sec-title { margin-top: 1rem; font-size: clamp(1.875rem, 3.4vw, 3rem); }
.sec-lead { margin-top: 1rem; font-size: 1rem; color: var(--muted-foreground); }
.sec-lead a, .loc-note a, .feat-card p a, .tl p a {
  color: var(--primary); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklch, var(--primary) 45%, transparent);
  transition: text-decoration-color .2s ease, opacity .2s ease;
}
.sec-lead a:hover, .loc-note a:hover, .feat-card p a:hover, .tl p a:hover {
  text-decoration-color: var(--primary); opacity: .85;
}
@media (min-width: 768px) { .sec-lead { font-size: 1.125rem; } }

.text-gradient {
  background-image: var(--gradient-primary);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gradient-pan 8s ease-in-out infinite;
}
@keyframes gradient-pan { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.surface-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  transition: border-color .4s var(--ease-lux), box-shadow .5s var(--ease-lux), background-color .4s var(--ease-lux);
}
.surface-card:hover { box-shadow: var(--shadow-glow); border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); }

.lift { transition: border-color .4s var(--ease-lux), box-shadow .5s var(--ease-lux), transform .5s var(--ease-lux); }
.lift:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-glow); }

.glass {
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-elevated);
}

.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; inset-block: 0; left: -140%; width: 60%;
  background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.07), transparent);
  transform: skew(-18deg); transition: left .85s var(--ease-lux); pointer-events: none;
}
.sheen:hover::after { left: 140%; }

.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--primary) 12%, transparent), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease-lux); pointer-events: none;
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

.ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: ""; position: absolute; top: -30%; left: 50%; width: 60rem; height: 40rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in oklch, var(--primary) 9%, transparent), transparent);
  filter: blur(40px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease-lux), box-shadow .4s var(--ease-lux), background-color .3s, color .3s, border-color .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn__arrow { transition: transform .3s var(--ease-lux); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow); }
.btn--primary:hover { box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 40%, transparent), 0 24px 50px -20px color-mix(in oklch, var(--primary) 70%, transparent); }
.btn--ghost { background: color-mix(in oklch, var(--surface) 70%, transparent); border-color: var(--border); color: var(--foreground); }
.btn--ghost:hover { border-color: var(--primary); }
.btn--light { background: var(--foreground); color: var(--background); }
.btn--outline-light { border-color: oklch(100% 0 0 / 0.25); color: #fff; background: oklch(0% 0 0 / 0.28); backdrop-filter: blur(8px); }
.btn--outline-light:hover { border-color: #fff; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; }
.announce {
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  background: color-mix(in oklch, var(--background) 95%, transparent);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: max-height .5s var(--ease-lux), opacity .4s var(--ease-lux);
  max-height: 3rem; opacity: 1;
}
.site-header.is-scrolled .announce { max-height: 0; opacity: 0; }
.announce__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.375rem; min-height: 2.25rem; padding: 0.375rem 1rem;
  font-size: 11px; text-align: center; color: var(--muted-foreground);
}
.announce__badge {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary); font-size: 10px; font-weight: 600;
  padding: 0.125rem 0.5rem; flex-shrink: 0;
}
.nav-shell { padding: 1rem 1rem 0; }
.nav-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0.625rem 1rem; border-radius: 1rem;
  background: color-mix(in oklch, var(--background) 72%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  transition: background-color .5s var(--ease-lux), border-color .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.site-header.is-scrolled .nav-bar,
.site-header.is-solid .nav-bar {
  background: color-mix(in oklch, var(--background) 88%, transparent);
  border-color: var(--border);
  box-shadow: var(--shadow-elevated);
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.brand img { height: 1.75rem; width: auto; }
.brand .logo-light-mode { display: none; }
:root[data-theme="light"] .brand .logo-dark-mode { display: none; }
:root[data-theme="light"] .brand .logo-light-mode { display: block; }

.nav-links { display: none; align-items: center; gap: 0.125rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a {
  position: relative; border-radius: 999px; padding: 0.5rem 0.75rem;
  font-size: 0.875rem; color: color-mix(in oklch, var(--foreground) 70%, transparent);
  transition: color .3s, background-color .3s;
}
.nav-links a:hover, .nav-links a.is-active {
  color: var(--foreground);
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}
.nav-actions { display: none; align-items: center; gap: 0.75rem; }
@media (min-width: 768px) { .nav-actions { display: flex; } }
.nav-phone { font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: color-mix(in oklch, var(--foreground) 60%, transparent); transition: color .3s; }
.nav-phone:hover { color: var(--foreground); }
@media (max-width: 1399px) { .nav-phone { display: none; } }
.icon-btn {
  display: grid; place-items: center; border-radius: 0.75rem; padding: 0.625rem;
  border: 1px solid var(--border); background: color-mix(in oklch, var(--surface) 70%, transparent);
  color: color-mix(in oklch, var(--foreground) 70%, transparent);
  transition: background-color .3s, color .3s, border-color .3s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--foreground); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem;
  background: var(--foreground); color: var(--background);
  padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25;
  max-width: 14.5rem;
  transition: transform .35s var(--ease-lux), box-shadow .4s var(--ease-lux);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.nav-cta__dot {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0;
  border-radius: 0.5rem; background: var(--primary); color: var(--primary-foreground);
  transition: transform .35s var(--ease-lux);
}
.nav-cta:hover .nav-cta__dot { transform: translateX(3px); }
.burger { display: grid; }
@media (min-width: 1024px) { .burger { display: none; } }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in oklch, var(--background) 97%, transparent);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-lux), visibility .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.25rem; }
.mobile-menu__links { display: grid; gap: 0.25rem; padding: 1rem 1.25rem; overflow-y: auto; }
.mobile-menu__links a {
  padding: 0.85rem 0.5rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--border);
  transform: translateY(14px); opacity: 0;
  transition: opacity .5s var(--ease-lux), transform .5s var(--ease-lux), color .3s;
}
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu__links a:hover { color: var(--primary); }
.mobile-menu__foot { margin-top: auto; display: grid; gap: 0.75rem; padding: 1.25rem; }

/* sticky mobile CTA */
.mobile-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: 0 1rem 1rem; pointer-events: none;
  transition: opacity .4s var(--ease-lux), transform .4s var(--ease-lux);
  opacity: 0; transform: translateY(120%);
}
.mobile-cta.is-visible { opacity: 1; transform: none; }
@media (min-width: 768px) { .mobile-cta { display: none; } }
.mobile-cta a {
  pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow-glow);
}

/* ---------- Hero ---------- */
.hero { position: relative; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, oklch(12% 0.012 250 / 0.96) 0%, oklch(12% 0.012 250 / 0.5) 45%, oklch(12% 0.012 250 / 0.45) 100%),
    linear-gradient(to right, oklch(12% 0.012 250 / 0.7), transparent 65%);
}
.hero__inner {
  position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 1.25rem 4rem;
}
@media (min-width: 768px) { .hero__inner { padding-bottom: 6rem; } }
.hero .eyebrow { color: oklch(100% 0 0 / 0.8); }
.hero h1 {
  margin-top: 1.25rem; max-width: 56rem; color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem); font-weight: 600; line-height: 1.07; letter-spacing: -0.03em;
}
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%); animation: line-rise 1.05s var(--ease-lux) forwards; }
.line-mask:nth-of-type(1) > span { animation-delay: .1s; }
.line-mask:nth-of-type(2) > span { animation-delay: .22s; }
.line-mask:nth-of-type(3) > span { animation-delay: .34s; }
.line-mask:nth-of-type(4) > span { animation-delay: .46s; }
@keyframes line-rise { to { transform: none; } }
.hero__meta {
  margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem;
  border-top: 1px solid oklch(100% 0 0 / 0.12); padding-top: 1.75rem;
}
@media (min-width: 768px) { .hero__meta { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.hero__meta p { max-width: 32rem; font-size: 1rem; color: oklch(100% 0 0 / 0.7); }
.hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.scroll-hint { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; display: none; }
@media (min-width: 768px) { .scroll-hint { display: block; } }
.scroll-hint span {
  position: relative; display: flex; height: 2.5rem; width: 1.5rem;
  align-items: flex-start; justify-content: center;
  border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.25);
}
.scroll-hint span::after {
  content: ""; width: 3px; height: 8px; border-radius: 999px; background: var(--primary);
  margin-top: 7px; animation: scroll-dot 1.8s var(--ease-lux) infinite;
}
@keyframes scroll-dot { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-lux), transform var(--dur-reveal) var(--ease-lux), filter var(--dur-reveal) var(--ease-lux);
  will-change: opacity, transform;
}
.reveal-up { transform: translateY(56px); }
.reveal-scale { transform: translateY(40px) scale(0.94); }
.reveal-blur { transform: translateY(18px); filter: blur(10px); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---------- Referenzen / Logos ---------- */
.logo-rows { margin-top: 3rem; display: grid; gap: 1rem; }
.logo-row { position: relative; width: 100%; min-width: 0; }
.logo-row__viewport { overflow: hidden; padding-block: 0.5rem; }
.logo-row__track { display: flex; width: max-content; will-change: transform; }
.logo-card {
  position: relative; margin-inline: 0.75rem; display: grid; place-items: center;
  height: 9rem; width: 9rem; flex-shrink: 0; border-radius: var(--radius-2xl);
  background: var(--logo-card); padding: 1rem;
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.logo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); }
.logo-card img { max-height: 100%; width: auto; object-fit: contain; }
.logo-row__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 999px;
  border: 1px solid var(--border); background: color-mix(in oklch, var(--surface) 85%, transparent);
  color: var(--foreground); opacity: 0; transition: opacity .3s, background-color .3s;
  backdrop-filter: blur(6px);
}
.logo-row:hover .logo-row__btn { opacity: 1; }
.logo-row__btn:hover { background: var(--surface-2); }
.logo-row::before, .logo-row::after {
  content: ""; position: absolute; inset-block: 0; width: 5rem; z-index: 2; pointer-events: none;
}
.logo-row::before { left: 0; background: linear-gradient(90deg, var(--background), transparent); }
.logo-row::after { right: 0; background: linear-gradient(270deg, var(--background), transparent); }
.logo-row__btn--prev { left: 0; }
.logo-row__btn--next { right: 0; }
@media (max-width: 767px) { .logo-row__btn { display: none; } .logo-card { height: 7rem; width: 7rem; margin-inline: 0.5rem; padding: 0.75rem; } .logo-row::before, .logo-row::after { width: 2.5rem; } }

/* ---------- Video ---------- */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  border-radius: var(--radius-3xl); border: 1px solid var(--border); background: #000;
}
.video-frame video { height: 100%; width: 100%; object-fit: cover; }
.video-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.25rem; text-align: center;
  background: linear-gradient(to top, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.08));
  transition: opacity .4s var(--ease-lux);
}
.video-frame.is-playing .video-overlay { opacity: 0; pointer-events: none; }
.video-play {
  display: grid; place-items: center; height: 3.5rem; width: 3.5rem; border-radius: 999px;
  background: var(--foreground); color: var(--background);
  transition: transform .35s var(--ease-lux), box-shadow .4s;
}
.video-play:hover { transform: scale(1.08); box-shadow: var(--shadow-glow); }
.video-overlay p { color: oklch(100% 0 0 / 0.7); }

.stats { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.stats .surface-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 1.25rem; }
@media (min-width: 768px) { .stats .surface-card { padding: 1.5rem; } }
.stats dt { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.03em; }
@media (min-width: 768px) { .stats dt { font-size: 3rem; } }
.stats dd { margin-top: 1rem; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklch, var(--foreground) 70%, transparent); }

/* ---------- Ausgangslage ---------- */
.grid-2 { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.arg-list { display: grid; gap: 0.75rem; }
.arg-card { display: flex; gap: 1rem; padding: 1.25rem; overflow: hidden; }
.arg-card::after {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 2px; background: var(--primary);
  transform: scaleY(0); transform-origin: center top; transition: transform .55s var(--ease-lux);
}
.arg-card:hover::after { transform: scaleY(1); }
.arg-num { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; color: var(--primary); transition: text-shadow .5s var(--ease-lux); }
.arg-card:hover .arg-num { text-shadow: 0 0 18px var(--primary); }
.arg-card h3 { font-size: 1rem; font-weight: 600; }
.arg-card p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- Lösung / Karten ---------- */
.cards-2 { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
.feat-card { height: 100%; padding: 1.5rem; }
.feat-card h3 { margin-top: 0.75rem; font-size: 1.125rem; }
@media (min-width: 768px) { .feat-card h3 { font-size: 1.25rem; } }
.feat-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.feat-card .mono-label { color: var(--primary); }
@media (min-width: 640px) { .cards-2 .col-span-2 { grid-column: 1 / -1; } }
.feat-card--wide { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }
.feat-card--wide h3 { font-size: 1.25rem; }
@media (min-width: 768px) { .feat-card--wide h3 { font-size: 1.4rem; } }
.feat-card--wide p { max-width: 54rem; }

/* ---------- Vergleichstabelle ---------- */
.cmp { margin-top: 2.5rem; overflow: hidden; border-radius: var(--radius-3xl); border: 1px solid var(--border); display: none; }
@media (min-width: 768px) { .cmp { display: block; } }
.cmp__head { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.cmp__head div { padding: 1rem; }
.cmp__head div:first-child { color: var(--muted-foreground); }
.cmp__head div:last-child { color: var(--primary); }
.cmp-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); transition: background-color .45s var(--ease-lux); }
.cmp-row:nth-child(even) { background: color-mix(in oklch, var(--surface) 60%, transparent); }
.cmp-row:hover { background: color-mix(in oklch, var(--primary) 7%, transparent); }
.cmp-row::after { content: ""; position: absolute; inset-block: 0; left: 0; width: 2px; background: var(--primary); transform: scaleY(0); transform-origin: center top; transition: transform .55s var(--ease-lux); }
.cmp-row:hover::after { transform: scaleY(1); }
.cmp-row > div { display: flex; gap: 0.5rem; padding: 1rem; font-size: 0.875rem; }
.cmp-row > div:first-child { color: var(--muted-foreground); }
.cmp-row > div:last-child { color: color-mix(in oklch, var(--foreground) 90%, transparent); }
.cmp-icon { flex-shrink: 0; margin-top: 2px; transition: transform .4s var(--ease-lux); }
.cmp-row:hover .cmp-icon { transform: scale(1.2) rotate(-6deg); }
.cmp-mobile { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .cmp-mobile { display: none; } }
.cmp-mobile > div { border-radius: var(--radius-2xl); border: 1px solid var(--border); background: color-mix(in oklch, var(--surface-2) 60%, transparent); padding: 1rem; }
.cmp-mobile .r { display: flex; gap: 0.5rem; font-size: 0.875rem; }
.cmp-mobile .r + .r { margin-top: 0.5rem; }
.cmp-mobile .r:first-child { color: var(--muted-foreground); }
.cmp-foot { margin-top: 2rem; max-width: 48rem; font-size: 1rem; color: color-mix(in oklch, var(--foreground) 80%, transparent); }

/* ---------- Waschprozess ---------- */
.steps-3 { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps-3 { grid-template-columns: repeat(3, 1fr); } }
.step-card { position: relative; overflow: hidden; }
.step-card__media { position: relative; overflow: hidden; }
.step-card__media img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.step-card:hover .step-card__media img { transform: scale(1.06); }
.step-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0% 0 0 / 0.7), transparent 60%); }
.step-card__num { position: absolute; bottom: 0.75rem; left: 1rem; z-index: 2; font-size: 3rem; font-weight: 300; line-height: 1; color: oklch(100% 0 0 / 0.85); }
.step-card__body { padding: 1.25rem; }
.step-card__body h3 { font-size: 1.125rem; }
.step-card__body p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.tech-note { margin-top: 2rem; padding: 1.5rem; }
@media (min-width: 768px) { .tech-note { padding: 1.75rem; } }
.tech-note .mono-label { color: var(--primary); }
.tech-note p + p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.625; color: color-mix(in oklch, var(--foreground) 85%, transparent); }
@media (min-width: 768px) { .tech-note p + p { font-size: 1.125rem; } }

/* ---------- Standorte / Karte ---------- */
.map-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .map-grid { grid-template-columns: 1.05fr 1fr; } }
.map-panel {
  position: relative; z-index: 10; width: 100%; max-width: 620px; margin-inline: auto;
  border-radius: calc(var(--radius-2xl) + 4px);
  border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  padding: 1rem; backdrop-filter: blur(10px);
}
.map-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--foreground) 10%, transparent);
  background: color-mix(in oklch, var(--foreground) 3%, transparent);
  padding: 0.25rem 0.625rem; margin-bottom: 0.75rem;
  font-size: 10px; font-weight: 500; color: color-mix(in oklch, var(--foreground) 60%, transparent);
}
.pulse-dot { position: relative; display: flex; height: 6px; width: 6px; }
.pulse-dot::before, .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--primary); }
.pulse-dot::before { animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.map-wrap { position: relative; }
.map-hit { cursor: pointer; }
.map-hit circle, .map-hit text { transition: all .4s var(--ease-lux); }
.map-legend { position: relative; margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 11px; color: color-mix(in oklch, var(--foreground) 55%, transparent); }
.map-legend i { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); display: inline-block; }
.map-legend i.ring { background: transparent; border: 1px solid color-mix(in oklch, var(--primary) 60%, transparent); }
.map-stats { position: relative; margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-top: 1px solid color-mix(in oklch, var(--foreground) 8%, transparent); background: color-mix(in oklch, var(--foreground) 8%, transparent); padding-top: 1px; }
.map-stats > div { background: var(--surface); padding: 1rem 0.5rem; text-align: center; }
.map-stats p:first-child { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.map-stats .mono-label { margin-top: 0.25rem; font-size: 9px; color: color-mix(in oklch, var(--foreground) 50%, transparent); }
.loc-grid { margin-top: 2rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
.loc-btn { padding: 1rem; text-align: left; transition: all .3s var(--ease-lux); cursor: pointer; }
.loc-btn.is-active { border-color: var(--primary); box-shadow: var(--shadow-glow); }
.loc-btn__title { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.loc-btn__title > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.loc-btn__title i { width: 6px; height: 6px; border-radius: 999px; background: var(--primary); display: inline-block; }
.loc-btn svg { transition: transform .3s var(--ease-lux); opacity: .5; }
.loc-btn:hover svg, .loc-btn.is-active svg { transform: translateX(3px); opacity: 1; }
.loc-btn p:last-child { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.map-popup {
  position: absolute; z-index: 20; width: min(17rem, 78vw);
  border-radius: var(--radius-2xl); border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-elevated); padding: 0.875rem;
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97);
  transition: opacity .3s var(--ease-lux), transform .3s var(--ease-lux), visibility .3s;
}
.map-popup.is-open { opacity: 1; visibility: visible; transform: none; }
.map-popup__head h4 { font-size: 0.95rem; padding-right: 1rem; }
.map-popup__sub { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.map-popup__kpis { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.map-popup__kpis div { border-radius: 0.6rem; border: 1px solid var(--border); background: color-mix(in oklch, var(--surface-2) 55%, transparent); padding: 0.45rem 0.6rem; }
.map-popup__kpis .mono-label { font-size: 8.5px; color: var(--muted-foreground); }
.map-popup__kpis strong { display: block; font-size: 0.8rem; font-weight: 600; margin-top: 2px; }
.map-popup__addr { margin-top: 0.75rem; font-size: 11.5px; line-height: 1.5; color: var(--muted-foreground); }
.map-popup__links { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.map-popup__links a {
  display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px;
  border: 1px solid var(--border); padding: 0.28rem 0.65rem; font-size: 11px;
  transition: border-color .3s, color .3s;
}
.map-popup__links a:hover { border-color: var(--primary); color: var(--primary); }
.map-popup__close { position: absolute; top: 0.5rem; right: 0.5rem; padding: 4px; color: var(--muted-foreground); line-height: 0; }
.map-popup__close:hover { color: var(--foreground); }
.loc-note { margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- Leistungen ---------- */
.svc-main { margin-top: 2.5rem; display: grid; gap: 0; overflow: hidden; }
@media (min-width: 1024px) { .svc-main { grid-template-columns: 1.1fr 1fr; } }
.svc-main__media { overflow: hidden; }
.svc-main__media img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.svc-main:hover .svc-main__media img { transform: scale(1.05); }
.svc-main__body { padding: 1.5rem; }
@media (min-width: 768px) { .svc-main__body { padding: 2.25rem; } }
.svc-main__body .mono-label { color: var(--primary); }
.svc-main__body h3 { margin-top: 0.75rem; font-size: 1.5rem; }
@media (min-width: 768px) { .svc-main__body h3 { font-size: 2.25rem; } }
.svc-main__body > p { margin-top: 1rem; color: var(--muted-foreground); }
.svc-points { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.svc-points li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: color-mix(in oklch, var(--foreground) 90%, transparent); }
.svc-points svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
.svc-sub-title { margin-top: 3rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }

/* aufklappender Bildstreifen */
.svc-strip { margin-top: 1.25rem; display: flex; gap: 0.75rem; height: 25rem; }
.svc-panel {
  position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden;
  border-radius: var(--radius-2xl); border: 1px solid var(--border);
  background: var(--surface-2);
  transition: flex-grow .75s var(--ease-lux), border-color .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.svc-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08); filter: saturate(.8) brightness(.62);
  transition: transform 1.2s var(--ease-lux), filter .8s var(--ease-lux);
}
.svc-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(12% 0.012 250 / 0.9) 10%, oklch(12% 0.012 250 / 0.45) 50%, oklch(12% 0.012 250 / 0.15) 100%);
}
.svc-panel__body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem;
}
.svc-panel h4 { color: #fff; font-size: 1rem; text-wrap: balance; }
.svc-panel p {
  margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.6;
  color: oklch(100% 0 0 / 0.8); max-width: 26rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s var(--ease-lux) .15s, transform .55s var(--ease-lux) .15s;
}

@media (min-width: 900px) {
  /* geschlossen: Titel steht vertikal, damit nichts abgeschnitten wird */
  .svc-panel h4 {
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; letter-spacing: 0.01em;
  }
  .svc-panel__body { align-items: flex-start; }
  .svc-panel p { display: none; }

  /* geöffnet: erstes Panel per Default, sonst das angesteuerte */
  .svc-strip > .svc-panel:first-child,
  .svc-panel:hover, .svc-panel:focus-visible { flex-grow: 4.2; }
  .svc-strip > .svc-panel:first-child h4,
  .svc-panel:hover h4, .svc-panel:focus-visible h4 {
    writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 1.15rem;
  }
  .svc-strip > .svc-panel:first-child p,
  .svc-panel:hover p, .svc-panel:focus-visible p { display: block; opacity: 1; transform: none; }
  .svc-strip > .svc-panel:first-child img,
  .svc-panel:hover img, .svc-panel:focus-visible img { transform: scale(1); filter: saturate(1) brightness(.8); }
  .svc-panel:hover, .svc-panel:focus-visible {
    border-color: color-mix(in oklch, var(--primary) 55%, var(--border));
    box-shadow: var(--shadow-glow); outline: none;
  }

  /* sobald ein anderes Panel angesteuert wird, schließt das erste */
  .svc-strip:has(.svc-panel:hover) > .svc-panel:first-child:not(:hover),
  .svc-strip:has(.svc-panel:focus-visible) > .svc-panel:first-child:not(:focus-visible) { flex-grow: 1; }
  .svc-strip:has(.svc-panel:hover) > .svc-panel:first-child:not(:hover) h4,
  .svc-strip:has(.svc-panel:focus-visible) > .svc-panel:first-child:not(:focus-visible) h4 {
    writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 1rem;
  }
  .svc-strip:has(.svc-panel:hover) > .svc-panel:first-child:not(:hover) p,
  .svc-strip:has(.svc-panel:focus-visible) > .svc-panel:first-child:not(:focus-visible) p { display: none; }
  .svc-strip:has(.svc-panel:hover) > .svc-panel:first-child:not(:hover) img,
  .svc-strip:has(.svc-panel:focus-visible) > .svc-panel:first-child:not(:focus-visible) img { transform: scale(1.08); filter: saturate(.8) brightness(.62); }
}

/* schmalere Viewports: gestapelte Bildkacheln, Text immer sichtbar */
@media (max-width: 899px) {
  .svc-strip { flex-direction: column; height: auto; gap: 0.75rem; }
  .svc-panel { flex: none; min-height: 12rem; }
  .svc-panel img { transform: none; filter: saturate(1) brightness(.6); }
  .svc-panel p { opacity: 1; transform: none; max-width: none; }
  .svc-panel h4 { font-size: 1.05rem; }
}

/* ---------- Ablauf ---------- */
.steps-4 { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps-4 { grid-template-columns: repeat(4, 1fr); } }
.flow-card { position: relative; overflow: hidden; padding: 1.5rem; }
.flow-card__num { font-size: 2.25rem; font-weight: 300; line-height: 1; color: var(--primary); }
.flow-card h3 { margin-top: 1rem; font-size: 1.125rem; }
.flow-card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* ---------- Team ---------- */
.team-grid { margin-top: 2.5rem; display: none; gap: 1.5rem; }
@media (min-width: 1024px) { .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); } }
.team-scroll { margin-top: 2rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.25rem 0.5rem; margin-inline: -1.25rem; scrollbar-width: none; }
.team-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .team-scroll { display: none; } }
.team-scroll > * { width: 64%; max-width: 260px; flex-shrink: 0; scroll-snap-align: center; }
@media (min-width: 640px) { .team-scroll > * { width: 42%; } }
.team-card { display: flex; height: 100%; flex-direction: column; }
.team-card__photo { position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden; border-radius: var(--radius-3xl); background: var(--surface-2); }
.team-card__photo img { height: 100%; width: 100%; object-fit: cover; transition: transform 1s var(--ease-lux); }
.team-card:hover .team-card__photo img { transform: scale(1.05); }
.team-card__body {
  position: relative; z-index: 2; margin-top: -3.5rem; display: flex; flex: 1; flex-direction: column;
  border-radius: var(--radius-3xl); background: #fff; color: oklch(20.5% 0 0);
  padding: 1.5rem 1.25rem; text-align: center;
  box-shadow: var(--shadow-elevated); border: 1px solid oklch(0% 0 0 / 0.06);
}
.team-card__body h3 { font-size: 1.125rem; letter-spacing: -0.02em; }
.team-card__role { margin-top: 0.25rem; font-size: 0.875rem; color: oklch(43.9% 0 0); }
.team-card__region { font-size: 0.875rem; color: oklch(55.6% 0 0); }
.team-card__contact { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.team-card__contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: oklch(26.9% 0 0); transition: color .3s; word-break: break-word; }
.team-card__contact a:hover { color: oklch(55% 0.15 205); }
.team-card__contact svg { color: oklch(55% 0.15 205); flex-shrink: 0; }
.swipe-hint { margin-top: 0.75rem; display: block; color: var(--muted-foreground); text-align: center; }
@media (min-width: 1024px) { .swipe-hint { display: none; } }

/* ---------- Probewäsche / Kontakt ---------- */
.contact-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.contact-head .eyebrow::before { display: none; }
.contact-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted-foreground); text-align: center; }
.contact-grid { display: grid; gap: 1.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }
.contact-quick { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.contact-quick a { padding: 0.9rem 1rem; }
.contact-quick .mono-label { font-size: 9px; color: var(--muted-foreground); }
.contact-quick strong { display: block; margin-top: 0.3rem; font-size: 0.875rem; font-weight: 600; }
.booking { margin-top: 0.75rem; padding: 1.25rem; }
.booking .mono-label { color: var(--primary); }
.booking h3 { margin-top: 0.5rem; font-size: 1.05rem; }
.booking > p { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted-foreground); }
.booking__grid { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .booking__grid { grid-template-columns: 1.1fr 1fr; } }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.cal__head strong { font-size: 0.875rem; font-weight: 600; }
.cal__nav { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; border-radius: 0.5rem; border: 1px solid var(--border); color: var(--muted-foreground); transition: all .3s; }
.cal__nav:hover:not(:disabled) { color: var(--foreground); border-color: var(--primary); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__dow, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 0.75rem; }
.cal__dow span { text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted-foreground); text-transform: uppercase; }
.cal__days button, .cal__days span {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 0.65rem;
  border: 1px solid transparent; font-size: 0.8rem; color: var(--muted-foreground);
  transition: all .3s var(--ease-lux);
}
.cal__days button.avail { border-color: var(--border); background: color-mix(in oklch, var(--surface-2) 70%, transparent); color: var(--foreground); }
.cal__days button.avail:hover { border-color: var(--primary); color: var(--primary); }
.cal__days button.is-selected { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.cal__days button:disabled { cursor: not-allowed; }
.cal__note { margin-top: 0.75rem; font-size: 11px; color: var(--muted-foreground); }
.slots { min-height: 10rem; }
@media (min-width: 768px) { .slots { border-left: 1px solid var(--border); padding-left: 1.5rem; } }
.slots__empty {
  display: flex; height: 100%; min-height: 10rem; align-items: center; justify-content: center;
  border-radius: var(--radius-2xl); border: 1px dashed var(--border); padding: 1.5rem;
  text-align: center; font-size: 0.8rem; color: var(--muted-foreground);
}
.slots__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.slots__list button { border-radius: 0.65rem; border: 1px solid var(--border); padding: 0.5rem; font-size: 0.8rem; font-family: var(--font-mono); transition: all .3s; }
.slots__list button:hover { border-color: var(--primary); color: var(--primary); }
.slots__list button.is-selected { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.slots__head { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.6rem; }

.form-card { padding: 1.25rem; scroll-margin-top: 7rem; }
@media (min-width: 768px) { .form-card { padding: 1.5rem; } }
.form-card h3 { font-size: 1.25rem; }
@media (min-width: 768px) { .form-card h3 { font-size: 1.5rem; } }
.form-card > p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.form { margin-top: 1.5rem; display: grid; gap: 0.875rem; position: relative; }
@media (min-width: 640px) { .form { grid-template-columns: repeat(2, 1fr); } }
.form .col-2 { grid-column: 1 / -1; }
.form label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.form input, .form select, .form textarea {
  margin-top: 0.375rem; width: 100%; border-radius: 0.5rem; border: 1px solid var(--input);
  background: color-mix(in oklch, var(--background) 60%, transparent);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--foreground);
  transition: border-color .3s, box-shadow .3s;
}
.form input::placeholder, .form textarea::placeholder { color: color-mix(in oklch, var(--muted-foreground) 80%, transparent); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}
.form textarea { min-height: 5rem; resize: vertical; }
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem; }
.form button[type="submit"] { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form-note { grid-column: 1 / -1; font-size: 11px; color: var(--muted-foreground); }
.form-status { grid-column: 1 / -1; border-radius: 0.65rem; padding: 0.75rem 1rem; font-size: 0.85rem; display: none; }
.form-status.is-ok { display: block; border: 1px solid color-mix(in oklch, var(--primary) 50%, transparent); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--foreground); }
.form-status.is-err { display: block; border: 1px solid oklch(62% 0.2 25 / 0.5); background: oklch(62% 0.2 25 / 0.1); color: var(--foreground); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 1fr 1.2fr; } }
.faq-media { margin-top: 2rem; border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--border); }
.faq-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); transition: filter 1s var(--ease-lux), transform 1.2s var(--ease-lux); }
.faq-media:hover img { filter: none; transform: scale(1.03); }
.faq-list { overflow: hidden; border-radius: var(--radius-3xl); border: 1px solid var(--border); background: var(--surface); height: fit-content; }
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; text-align: left; transition: color .3s, background-color .3s; }
.faq-q:hover { color: var(--primary); }
.faq-q > span:first-child { font-size: 0.875rem; font-weight: 600; }
@media (min-width: 768px) { .faq-q > span:first-child { font-size: 1rem; } }
.faq-icon { flex-shrink: 0; font-size: 1.125rem; color: var(--primary); transition: transform .5s var(--ease-lux); line-height: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg) scale(1.15); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-lux); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.25rem 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); }
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60rem 20rem at 50% 0%, color-mix(in oklch, var(--primary) 6%, transparent), transparent);
}
.footer-inner { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 4rem 1.25rem; }
@media (min-width: 768px) { .footer-inner { padding-block: 5rem; } }
.cta-box { position: relative; overflow: hidden; padding: 1.75rem; }
@media (min-width: 768px) { .cta-box { padding: 2.5rem; } }
.cta-box__row { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
@media (min-width: 900px) { .cta-box__row { flex-direction: row; align-items: center; justify-content: space-between; } }
.cta-box h2 { margin-top: 0.75rem; max-width: 36rem; font-size: 1.5rem; line-height: 1.15; }
@media (min-width: 768px) { .cta-box h2 { font-size: 2.25rem; } }
.cta-box p { margin-top: 0.75rem; max-width: 28rem; font-size: 0.875rem; color: var(--muted-foreground); }
.cta-box__btns { display: flex; flex-shrink: 0; flex-wrap: wrap; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .cta-box__btns { flex-direction: row; } }
.footer-cols { margin-top: 3.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; } }
.footer-cols h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-foreground); }
.footer-cols ul { margin-top: 1rem; display: grid; gap: 0.625rem; font-size: 0.875rem; }
.footer-cols ul a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); transition: color .3s, transform .3s; }
.footer-cols ul a:hover { color: var(--foreground); transform: translateX(2px); }
.footer-brand p { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.footer-tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-tags span { border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklch, var(--surface-2) 50%, transparent); padding: 0.25rem 0.75rem; font-size: 11px; color: var(--muted-foreground); transition: color .3s, border-color .3s; }
.footer-tags span:hover { color: var(--foreground); border-color: var(--primary); }
.footer-contact { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .footer-contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-contact { grid-template-columns: repeat(3, 1fr); } }
.footer-contact > * { padding: 1rem; }
.footer-contact .mono-label { font-size: 10px; color: var(--muted-foreground); letter-spacing: 0.1em; }
.footer-contact strong { display: block; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 600; }
.footer-contact .flagrow { display: flex; align-items: center; gap: 1rem; }
.footer-bottom {
  margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem;
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  font-size: 0.75rem; color: var(--muted-foreground);
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-bottom__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.footer-bottom a { transition: color .3s; }
.footer-bottom a:hover { color: var(--foreground); }
.status-dot { position: relative; display: inline-flex; height: 8px; width: 8px; }
.status-dot::before, .status-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: oklch(70% 0.17 145); }
.status-dot::before { animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ---------- Legal pages ---------- */
.legal { padding-top: 9rem; padding-bottom: 4rem; }
.legal .back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); transition: color .3s; }
.legal .back:hover { color: var(--primary); }
.legal h1 { margin-top: 1.5rem; font-size: clamp(1.9rem, 4vw, 2.75rem); }
.legal-body { margin-top: 2.5rem; max-width: 52rem; }
.legal-body h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.legal-body h3 { margin-top: 1.75rem; font-size: 1.05rem; }
.legal-body p, .legal-body li { margin-top: 0.85rem; font-size: 0.95rem; line-height: 1.75; color: var(--muted-foreground); }
.legal-body ul { list-style: disc; padding-left: 1.25rem; }
.legal-body ul li { margin-top: 0.5rem; }
.legal-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--foreground); font-weight: 600; }
.legal-body .addr { color: var(--foreground); }

/* ---------- 404 ---------- */
.nf { min-height: 70svh; display: grid; place-items: center; text-align: center; padding: 9rem 1.25rem 4rem; }
.nf h1 { font-size: clamp(3rem, 12vw, 7rem); line-height: 1; }
.nf h2 { margin-top: .75rem; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; }
.nf p { margin-top: .6rem; color: var(--muted-foreground); }
.nf .btn { margin-top: 2rem; }

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-cta, .video-frame, .site-footer::before { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- Video-Transkript ---- */
.transcript{margin:1.25rem auto 0;max-width:62rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.transcript>summary{cursor:pointer;list-style:none;padding:.9rem 1.15rem;font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--fg-muted);transition:color .3s var(--ease-lux),background .3s var(--ease-lux)}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary::before{content:"+";display:inline-block;width:1.1em;color:var(--primary);font-weight:700}
.transcript[open]>summary::before{content:"–"}
.transcript>summary:hover{color:var(--fg);background:color-mix(in oklab,var(--primary) 6%,transparent)}
.transcript>p{margin:0;padding:0 1.15rem 1.15rem;font-size:.9rem;line-height:1.75;color:var(--fg-muted);max-width:none}

/* ---- Standort-Seiten ---- */
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.78rem;color:var(--fg-muted);margin-bottom:1.5rem}
.crumbs a{color:var(--fg-muted);text-decoration:none;transition:color .3s var(--ease-lux)}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-current]{color:var(--fg)}
.feat-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1.5rem;list-style:none;padding:0}
.feat-grid .feat-card{height:100%;display:block;text-decoration:none;color:inherit}
.feat-grid h2,.feat-grid h3{font-size:1.05rem;margin:.35rem 0 .5rem}
.city-list{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:1.5rem;list-style:none;padding:0}
.city-list li{padding:.7rem .95rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);font-size:.88rem;color:var(--fg-muted)}
.loc-list{display:grid;gap:.5rem;margin-top:1.5rem;list-style:none;padding:0}
.loc-list li{padding:.8rem 1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline}
.loc-list a{font-weight:600;text-decoration:none;color:var(--fg);transition:color .3s var(--ease-lux)}
.loc-list a:hover{color:var(--primary)}
.loc-list span{font-size:.8rem;color:var(--fg-muted)}
.loc-links{margin-top:.75rem;font-size:.82rem;line-height:1.8;color:var(--fg-muted)}
.loc-links a{color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--primary) 45%,transparent);transition:color .3s var(--ease-lux)}
.loc-links a:hover{color:var(--primary)}
.footer-tags a{text-decoration:none;color:inherit}
.footer-tags a:hover{color:var(--primary)}


/* ---- Weitere Dienstleistungen: Editorial-Liste ---- */
.svc-list { margin-top: 1.25rem; border-top: 1px solid var(--border); }
.svc-row { display: grid; grid-template-columns: 3.2rem 11rem 1fr; gap: 1.6rem; align-items: center;
  padding: 1.4rem 0; border-bottom: 1px solid var(--border);
  transition: background .5s var(--ease-lux), padding-left .5s var(--ease-lux); }
.svc-row:hover { background: color-mix(in oklab, var(--primary) 4%, transparent); padding-left: .9rem; }
.svc-row__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-foreground);
  transition: color .4s var(--ease-lux); }
.svc-row:hover .svc-row__num { color: var(--primary); }
.svc-row__media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); }
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.55) contrast(1.02); transition: filter .7s var(--ease-lux), transform .9s var(--ease-lux); }
.svc-row:hover .svc-row__media img { filter: none; transform: scale(1.06); }
.svc-row__body h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.svc-row__body p { margin-top: .35rem; color: var(--muted-foreground); font-size: .9rem; line-height: 1.65; max-width: 38rem; }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 2.6rem 1fr; gap: .9rem 1rem; }
  .svc-row__media { grid-column: 1 / -1; order: 3; aspect-ratio: 21 / 9; }
  .svc-row__body { order: 2; }
  .svc-row:hover { padding-left: 0; }
  .svc-row__media img { filter: none; }
}
/* erste Sektion einer Unterseite: Platz unter dem fixierten Header */
.sec--page-top { padding-top: 9rem; }
@media (max-width: 899px) { .sec--page-top { padding-top: 7.5rem; } }

/* ---- Zeitleiste (Wassertechnik-Seite) ---- */
.tl{list-style:none;margin:0;padding:0 0 0 1.5rem;position:relative;border-left:1px solid var(--border)}
.tl li{position:relative;padding:0 0 1.75rem .35rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:calc(-1.5rem - 4.5px);top:.55rem;width:9px;height:9px;border-radius:50%;
  background:var(--background);border:2px solid var(--primary)}
.tl__year{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.tl h3{margin-top:.3rem;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.tl p{margin-top:.35rem;color:var(--muted-foreground);font-size:.9rem;line-height:1.65}