/* ================================
   H.I. Schönberg-Dienstleistungen
   styles.css – 2025 Edition
   ================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Light Theme (default) */
  --bg: #f8fafc;
  --text: #0b1020;
  --muted: #5a6482;

  /* Brand Gradient */
  --brand: #6d5ef1;      /* Indigo/Violett */
  --brand-2: #8b5cf6;    /* Leuchtendes Violett */

  /* Surfaces */
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);

  /* Radii */
  --radius: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;

  /* Typo */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji";
  --fs-xs: clamp(.78rem, .72rem + .2vw, .88rem);
  --fs-sm: clamp(.92rem, .86rem + .2vw, 1rem);
  --fs-md: clamp(1rem, .94rem + .3vw, 1.15rem);
  --fs-lg: clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.4rem + 1.2vw, 2.2rem);
  --fs-xxl: clamp(2.2rem, 1.8rem + 2vw, 3rem);

  /* Motion */
  --ease-1: cubic-bezier(.2,.8,.2,1);
  --ease-2: cubic-bezier(.16,1,.3,1);
  --dur-1: .35s;
  --dur-2: .6s;

  /* Glass UI */
  --glass: rgba(255,255,255,.65);
  --glass-stroke: rgba(15,23,42,.08);
}

/* Explicit Light override for safety */
[data-theme="light"] {
  --bg: #f8fafc;
  --text: #0b1020;
  --muted: #5a6482;
  --brand: #6d5ef1;
  --brand-2: #8b5cf6;
  --card: #ffffff;
  --border: #e2e8f0;
  --glass: rgba(255,255,255,.65);
  --glass-stroke: rgba(15,23,42,.08);
}

/* Dark Theme */
[data-theme="dark"] {
  --bg: #0b1020;
  --text: #e7e9f7;
  --muted: #aab2cf;
  --brand: #8b5cf6;
  --brand-2: #60a5fa;
  --card: #11162b;
  --border: #1e2641;
  --glass: rgba(17,22,43,.6);
  --glass-stroke: rgba(226,232,240,.08);
}

/* ---------- Base Reset ---------- */
* { box-sizing: border-box; }
html, body { 
  margin:0; 
  padding:0; 
  overflow-x: hidden; /* Fix: Verhindert horizontalen Scroll global */
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
}
img { max-width:100%; height:auto; display:block; }
.container { width: min(1100px, 92vw); margin: 0 auto; }

/* ---------- Accessibility ---------- */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:8px; background:var(--brand-2); color:#001018; border-radius:8px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top:0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1);
}
.site-header.scrolled {
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 12px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; flex-shrink:0; }
.logo img { border-radius: 8px; }
.brand { white-space: nowrap; }

.site-nav {
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  position: relative; /* wichtig, damit das absolute Dropdown daran hängt */
}
.site-nav .nav-toggle { display:none; }
.site-nav ul { display:flex; gap:16px; list-style:none; margin:0; padding:0; flex-wrap: nowrap; }
.site-nav a { text-decoration:none; color:var(--text); padding:8px 10px; border-radius:10px; }
.site-nav a:hover, .site-nav a:focus { background: var(--card); }

/* Verhindert Umbruch in einzelnen Nav-Links (z.B. "Über uns") */
.site-nav li,
.site-nav a {
  white-space: nowrap;
}

/* Desktop: Header-Aktionen sichtbar, Mobile-Menü-Buttons ausgeblendet */
.header-actions { flex-shrink: 0; display:flex; align-items:center; gap:8px; }
.site-nav ul .mobile-action { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius: 999px;
  border:1px solid var(--border); text-decoration:none; cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease, background var(--dur-1) var(--ease-2), color var(--dur-1) var(--ease-2);
  box-shadow: var(--shadow); font-weight:700;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#ffffff; border-color: color-mix(in oklab, var(--brand), black 10%);
  box-shadow: 0 8px 20px rgba(124,58,237,.25);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(6,182,212,.28); }
.btn-outline { background: transparent; color: var(--text); }
.btn-secondary {
  background: var(--brand-2); color:#ffffff;
  border-color: color-mix(in oklab, var(--brand-2), black 10%);
}
.btn-ghost { background: transparent; border: 1px solid var(--border); box-shadow:none; }
.btn-whatsapp { background: #25D366; color:#03210c; border-color: #1fb357; }
.btn-whatsapp:hover { filter: brightness(1.05); }

/* ---------- Hero (Next-Gen) ---------- */
.hero { position: relative; isolation:isolate; }
.hero--pro { 
  position:relative; 
  overflow:hidden; /* Fix: Verhindert horizontalen Overflow durch Blobs/SVG */
  padding: clamp(28px, 5vw, 48px) 0 0; 
}
.hero--pro .hero-bg { 
  position:absolute; 
  inset:0; 
  z-index:-1; 
  overflow: hidden; /* Zusätzlicher Fix für Hero-Hintergrund */
}
.hero-gradient { position:absolute; inset:0; width:100%; height:100%; filter: saturate(115%); }

/* Mesh + Grain Overlay */
.grid-overlay {
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 32px 32px; mix-blend-mode: overlay; opacity: .38;
}
.blob { 
  position:absolute; 
  filter: blur(40px); 
  opacity:.45; 
  transform: translateZ(0); 
  will-change: transform; 
}
.blob1 { width: 420px; height: 420px; background: #22d3ee; left: -80px; top: -60px; border-radius: 50%; animation: float 12s ease-in-out infinite; }
.blob2 { width: 360px; height: 360px; background: #60a5fa; right: 10%; top: 10%; border-radius: 50%; animation: float 14s ease-in-out infinite reverse; }
.blob3 { width: 300px; height: 300px; background: #34d399; right: -80px; bottom: -80px; border-radius: 50%; animation: float 16s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-20px) translateX(10px); } }

.hero-inner { display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap: 28px; }
.hero-copy {
  backdrop-filter: blur(10px) saturate(120%);
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-xl);
  padding: clamp(1rem, 2vw, 2rem);
}
.hero h1 { font-size: var(--fs-xxl); margin:0 0 .5rem; }
.hero p { font-size: var(--fs-md); }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.hero-badges { list-style:none; display:flex; gap:12px; flex-wrap:wrap; padding:0; margin:.5rem 0 0; }
.hero-badges li {
  background: rgba(255,255,255,.75); color:#001018;
  padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand-2), var(--border));
}
[data-theme="dark"] .hero-badges li { background: rgba(0,16,24,.65); color: var(--text); }

/* ---------- SVG Branding / Gradients ---------- */
.grad-start { stop-color: var(--brand); }
.grad-end { stop-color: var(--brand-2); }

/* ---------- Intro ---------- */
.intro-grid { display:grid; grid-template-columns: 1.3fr .7fr; gap: 24px; align-items:center; }
.badges { list-style:none; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:0; padding:0; }
.badges li { background: var(--card); border:1px solid var(--border); padding:10px 12px; border-radius: 12px; }

/* ---------- Cards / Services ---------- */
.card-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.card {
  background: var(--card); border:1px solid var(--border);
  padding:18px; border-radius: var(--radius);
  display:flex; flex-direction:column; gap:10px;
  transition: transform var(--dur-1) var(--ease-2), box-shadow var(--dur-1) var(--ease-2);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(2,6,23,.08); }
.card .icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: color-mix(in oklab, var(--brand) 20%, var(--card)); }
.card .icon svg { width:24px; height:24px; fill: currentColor; color: var(--brand); }
.card .benefits { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.card .benefits li { background: rgba(139,92,246,.12); padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand-2), var(--border)); }

/* Scroll-Linked Animations (mit Fallback) */
.reveal { opacity:0; transform: translateY(8px); animation: reveal .7s ease forwards; }
.reveal.delay-1 { animation-delay: .15s; } .reveal.delay-2 { animation-delay: .3s; } .reveal.delay-3 { animation-delay: .45s; }
@keyframes reveal { to { opacity:1; transform:none; } }

@supports (animation-timeline: view()) {
  .card-grid .card {
    opacity: 0; transform: translateY(16px) scale(.985);
    animation: cardIn 1s var(--ease-2) both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes cardIn { to { opacity:1; transform:none } }
}

/* ---------- Features ---------- */
.features { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.features article { background: var(--card); border:1px solid var(--border); padding:16px; border-radius: var(--radius); }

/* ---------- Quotes ---------- */
.quote-card { background: var(--card); border-left:6px solid var(--brand); padding:16px 18px; border-radius: 12px; }

/* ---------- CTA ---------- */
.cta .cta-box {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#ffffff; padding:24px; border-radius: var(--radius); text-align:center;
  box-shadow: 0 14px 40px rgba(17,24,39,.22);
}

/* ---------- Page Hero ---------- */
.page-hero.small {
  padding: 28px 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 22%, var(--bg)), var(--bg));
  border-bottom:1px solid var(--border);
}
.page-hero h1 { margin:0; }

/* ---------- Content ---------- */
.content { padding: 28px 0; }
.content h2 { margin-top: 1.5rem; }
.profile { display:grid; grid-template-columns: 180px 1fr; gap: 16px; align-items:center; }
.profile img { width: 180px; height: 180px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); }
.services-detail article { background: var(--card); border:1px solid var(--border); padding:18px; border-radius: var(--radius); margin-bottom: 16px; }

/* ---------- Forms ---------- */
.grid-two { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
.contact-form { background: var(--card); border:1px solid var(--border); padding: 18px; border-radius: var(--radius); }
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-field input, .form-field textarea, .form-field select {
  padding:12px; border:1px solid var(--border);
  border-radius: 12px; background: transparent; color: var(--text);
}
.form-field.checkbox { flex-direction: row; align-items:flex-start; gap:10px; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:2px solid var(--brand-2); outline-offset:2px; }
.form-actions { display:flex; flex-direction:column; gap:8px; }
.form-note { color: var(--muted); margin:0; }

/* ---------- Map ---------- */
.map-consent { background: var(--card); border:1px solid var(--border); padding:16px; border-radius: var(--radius); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.map-wrapper { 
  margin-top:12px; 
  border:1px solid var(--border); 
  border-radius: var(--radius); 
  overflow: hidden; /* Fix: Verhindert horizontalen Overflow der Iframe */
  height: 380px; 
  max-width: 100%; /* Fix: Stellt sicher, dass es nicht über den Container ragt */
}
.map-wrapper iframe { 
  width:100%; 
  height:100%; 
  border:0; 
  display: block; /* Fix: Entfernt inline-Spacing */
  max-width: 100%; /* Zusätzlicher Fix für Iframe */
}

/* Kontaktseite (falls separat) */
.map-embed { 
  margin-top: 12px; 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  overflow: hidden; /* Fix: Overflow verbergen */
  background: var(--card); 
  height: 300px; 
  max-width: 100%; /* Fix: Passt zur Container-Breite */
}
.map-embed iframe { 
  width: 100%; 
  height: 100%; 
  border: 0; 
  display: block; 
  max-width: 100%; /* Fix: Kein Overflow */
}

/* ---------- Gallery ---------- */
.gallery { padding-top: 10px; }
.gallery-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.gallery figure { margin:0; background: var(--card); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.gallery img { width:100%; height: 200px; object-fit: cover; display:block; }
.gallery figcaption { padding: 10px 12px; color: var(--muted); }

/* ---------- Testimonials (Swipe) ---------- */
.testimonials .ts-track {
  display:grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap:1rem; overflow:auto; scroll-snap-type: x mandatory; padding-bottom:.5rem;
}
.ts-card {
  scroll-snap-align: start; background: var(--glass); border:1px solid var(--glass-stroke);
  border-radius: var(--radius-xl); padding:1.2rem; box-shadow: var(--shadow);
}
.ts-card p { font-size: var(--fs-md); }
.ts-meta { color: var(--muted); margin-top:.6rem; font-weight:600 }

/* ---------- Compare (Vorher/Nachher) ---------- */
.compare .compare-wrap { position:relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow); }
.compare .compare-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .compare-wrap .after { clip-path: inset(0 0 0 50%); transition: clip-path .2s var(--ease-1); }
.compare .compare-wrap input[type="range"] {
  position:absolute; inset:auto 0 0 0; width:100%; -webkit-appearance:none; height:8px; background:rgba(255,255,255,.3)
}
.compare .compare-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 0 0 4px rgba(255,255,255,.6)
}

/* Ergänzung: Sprachwechsel-Button-Styling (verbessert für Dark Mode) */
#langToggle, #langToggleMobile {
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 1.2em;
  padding: 8px 12px;
  border-radius: 50%; /* Rund für Icon-Look */
  color: var(--text); /* Standard: Passt sich Theme an (dunkel in Light, hell in Dark) */
  transition: background var(--dur-1) var(--ease-2), color var(--dur-1) var(--ease-2);
}

#langToggle:hover, #langToggleMobile:hover {
  background: var(--glass);
}

/* Expliziter Dark-Mode-Boost für Kontrast (falls nötig) */
[data-theme="dark"] #langToggle, 
[data-theme="dark"] #langToggleMobile {
  color: #ffffff; /* Weiß für maximale Sichtbarkeit der Emojis im Dark Mode */
}

/* Mobile: Button im Menü anpassen */
@media (max-width: 640px) {
  .site-nav ul .mobile-action #langToggleMobile {
    width: auto;
    justify-content: center;
  }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: 36px; background: var(--card); border-top: 1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; padding: 24px 0; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.footer-bottom { padding-bottom: 20px; }

/* ---------- Sticky Actionbar (Mobile) ---------- */
.sticky-actionbar {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  background: rgba(12,16,30,.8); backdrop-filter: blur(10px);
  border-top: 1px solid var(--glass-stroke);
}
.sticky-actionbar a {
  flex:1; text-align:center; display:inline-block; padding:.9rem 0; color:#fff; font-weight:700; text-decoration:none;
}
@media (max-width: 820px) { .sticky-actionbar { display:flex; gap:.5rem } }

/* ---------- Floating WhatsApp ---------- */
.fab-wa{
  position:fixed; right:18px; bottom:84px; z-index:70;
  padding:.9rem 1.1rem; border-radius:999px; font-weight:800; color:#fff; text-decoration:none;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  box-shadow: 0 12px 24px rgba(6,182,212,.28);
  transition: transform var(--dur-1) var(--ease-2)
}
.fab-wa:hover{ transform: translateY(-2px) }
@media (max-width:820px){ .fab-wa{ bottom:68px } }

/* ---------- Hero: Animierte SVGs ---------- */
.hero-anim {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 12%, var(--bg)), var(--bg));
}
.hero-anim--vacuum { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, var(--bg)), var(--bg)); }
[data-theme="dark"] .hero-anim--vacuum { background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 20%, var(--bg)), var(--bg)); }

.hero-anim--vacuumPro {
  width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 10%, var(--bg)), var(--bg));
}
[data-theme="dark"] .hero-anim--vacuumPro { background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 20%, var(--bg)), var(--bg)); }

/* Vacuum Dynamics */
.cleanStripe { animation: stripeMove 4.5s ease-in-out infinite; }
@keyframes stripeMove { 0% { transform: translateX(0);} 45% { transform: translateX(780px);} 55% { transform: translateX(780px);} 100% { transform: translateX(0);} }

.cleanStripe2 { animation: stripeMove2 5.5s ease-in-out infinite; }
@keyframes stripeMove2 { 0% { transform: translateX(0); } 45% { transform: translateX(860px); } 55% { transform: translateX(860px); } 100% { transform: translateX(0); } }

.eraseCapsule { animation: eraseSweep 5.5s ease-in-out infinite; }
@keyframes eraseSweep { 0% { transform: translateX(0); } 45% { transform: translateX(860px); } 55% { transform: translateX(860px); } 100% { transform: translateX(0); } }

.hoseStraight { stroke-linecap: round; }
.nozzle2 { transform-origin: 0px 5px; animation: nozzleTiny 6s ease-in-out infinite; }
@keyframes nozzleTiny { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.5deg); } }

.hoseAnim { animation: hoseMorph 5.5s ease-in-out infinite; }
@keyframes hoseMorph {
  0%   { d: path("M 700 245 C 640 230, 520 240, 450 255"); }
  45%  { d: path("M 700 245 C 640 232, 540 248, 470 262"); }
  55%  { d: path("M 700 245 C 640 232, 540 248, 470 262"); }
  100% { d: path("M 700 245 C 640 230, 520 240, 450 255"); }
}

.wheel-left { animation: spin 1.4s linear infinite; transform-origin: 6px 25px; }
.wheel-right { animation: spin 1.4s linear infinite; transform-origin: 92px 25px; }
@keyframes spin { to { transform: rotate(360deg); } }

.rig2 { animation: rigMove 6s ease-in-out infinite; transform-origin: 0 0; }
@keyframes rigMove { 0% { transform: translate(520px,255px) translateX(0); } 50% { transform: translate(520px,255px) translateX(-360px); } 100% { transform: translate(520px,255px) translateX(0); } }

.eraseCapsule2 { animation: eraseFollow 6s ease-in-out infinite; }
@keyframes eraseFollow { 0% { transform: translateX(0); } 50% { transform: translateX(-360px); } 100% { transform: translateX(0); } }

/* Other animation sets (optional) */
.sparkles .sp { transform-origin: center; animation: sparkle 3s ease-in-out infinite; }
.sparkles .s2 { animation-delay: .3s; } .s3 { animation-delay: .6s; } .s4 { animation-delay: .9s; } .s5 { animation-delay: 1.2s; } .s6 { animation-delay: 1.5s; }
@keyframes sparkle { 0%, 100% { transform: scale(1); opacity: .4;} 50% { transform: scale(1.8); opacity: 1; } }

.bubbles circle { animation: rise 7s ease-in-out infinite; }
.bubbles .b2 { animation-delay: .6s; } .b3 { animation-delay: 1.1s; } .b4 { animation-delay: 1.7s; } .b5 { animation-delay: 2.3s; } .b6 { animation-delay: 2.8s; } .b7 { animation-delay: 3.4s; }
@keyframes rise { 0% { transform: translateY(0); opacity:.7;} 50% { transform: translateY(-14px); opacity: 1;} 100% { transform: translateY(0); opacity:.7;} }

.wiper { animation: wipe 4.5s ease-in-out infinite; transform-origin: left center; }
@keyframes wipe { 0% { transform: translate(0,0) rotate(0deg);} 40% { transform: translate(260px, 140px) rotate(2deg);} 60% { transform: translate(80px, 70px) rotate(-2deg);} 100% { transform: translate(0,0) rotate(0deg);} }

/* Team / Crew optional */
.hero-anim--team { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 8%, var(--bg)), var(--bg)); }
.hero-anim--team .wheel { animation: roll 3.5s ease-in-out infinite; transform-origin: center; }
.hero-anim--team .wheel1 { animation-delay: .2s; } .hero-anim--team .wheel2 { animation-delay: .4s; }
.hero-anim--team .bob { animation: bob 2.8s ease-in-out infinite; transform-origin: center; }
.hero-anim--team .mop-stick { animation: mop 2.8s ease-in-out infinite; transform-origin: 150px 220px; }
.hero-anim--team .spray circle { animation: puff 1.8s ease-in-out infinite; }
.hero-anim--team .spray circle:nth-child(2){ animation-delay: .15s; }
.hero-anim--team .spray circle:nth-child(3){ animation-delay: .3s; }
.hero-anim--team .spray circle:nth-child(4){ animation-delay: .45s; }
.hero-anim--team .hose { stroke: color-mix(in oklab, var(--brand), var(--text) 30%); stroke-width: 6; animation: hose 3.6s ease-in-out infinite; }

@keyframes roll { 0%,100% { transform: rotate(0deg);} 50% { transform: rotate(25deg);} }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
@keyframes mop { 0%,100% { transform: rotate(6deg);} 50% { transform: rotate(-6deg);} }
@keyframes puff { 0% { transform: translate(0,0) scale(.6); opacity:.6;} 60% { transform: translate(16px,-8px) scale(1); opacity:1;} 100% { transform: translate(26px,-14px) scale(0.2); opacity:0;} }
@keyframes hose { 0%,100% { stroke-width:6;} 50% { stroke-width:8;} }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rig2, .eraseCapsule2, .nozzle2, .wheel-left, .wheel-right { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .features { grid-template-columns: 1fr; }
  .profile { grid-template-columns: 1fr; }
  .grid-two { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .map-embed { height: 240px; margin-bottom: 1rem; }
}

/* Fix für Mobile-Stacking von Home-Contact-Grid (verschoben auf 768px für besseres Mobile-Verhalten) */
@media (max-width: 768px) {
  .home-contact-grid { 
    grid-template-columns: 1fr !important; /* Force Stack für Mobile */
  }
}

/* ---------- Mobile Navigation & Visibility ---------- */
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }

  /* Burger sichtbar */
  .site-nav .nav-toggle { display:block; }

  /* Desktop-Header-Aktionen ausblenden (Vermeidung doppelter Buttons) */
  .header-actions { display: none !important; }

  /* Dropdown-Menü */
  .site-nav ul {
    position:absolute;
    right: 4vw;
    top:60px;
    background: var(--card);
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    flex-direction:column;
    gap:10px;
    display:none;
    box-shadow: var(--shadow);
    z-index: 100;
  }
  .site-nav ul[aria-expanded="true"] { display:flex; }

  /* Mobile-only Aktionsbereich im Menü anzeigen */
  .site-nav ul .mobile-action {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
  }
  .site-nav ul .mobile-action .btn {
    width:100%;
    justify-content:center;
  }

  /* WhatsApp-Header-Button kompakter, falls er irgendwo noch greift */
  .btn-wa-header { padding:8px 10px; font-size: 14px; }
}

/* ---------- Home Contact Section ---------- */
.home-contact { margin-top: 28px; }
.home-contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.home-map { 
  background: var(--card); 
  border:1px solid var(--border); 
  padding:16px; 
  border-radius: var(--radius); 
  overflow: hidden; /* Fix: Verhindert Overflow in der Karte */
}
.contact-lines { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }

/* ---------- Theme: strengthen contrasts in dark ---------- */
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .site-header { background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom-color: var(--border); }
[data-theme="dark"] .hero .hero-content { background: color-mix(in oklab, var(--bg) 88%, transparent); }
[data-theme="dark"] .card .icon { background: color-mix(in oklab, var(--brand) 22%, var(--card)); }
[data-theme="dark"] .btn-primary { color:#ffffff; }
[data-theme="dark"] .footer-grid, [data-theme="dark"] .site-footer { background: var(--card); }

/* ---------- Small header/nav spacing tweak ---------- */
@media (min-width: 640px) { .site-nav ul { gap: 14px; } }