/* v2026-04-18 */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ── 7: Custom Text-Selection ── */
::selection     { background: rgba(37,99,235,0.18); color: inherit; }
::-moz-selection{ background: rgba(37,99,235,0.18); color: inherit; }

/* ── 6: Scroll Progress Bar ── */
#scroll-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563EB 0%, #60A5FA 50%, #34D399 100%);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 10001;
    pointer-events: none;
    will-change: transform;
}

/* ── 12: Button Ripple ── */
.btn-glow { position: relative; overflow: hidden; }
@keyframes ripple-burst { to { transform: scale(4.5); opacity: 0; } }
.btn-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.30);
    transform: scale(0);
    animation: ripple-burst 0.55s ease-out forwards;
    pointer-events: none;
}
/* Fallback-Font mit size-adjust, um CLS beim Inter-Laden zu minimieren */
@font-face {
    font-family: 'Inter-Fallback';
    src: local('BlinkMacSystemFont'), local('-apple-system'), local('Segoe UI'), local('Helvetica Neue'), local('Arial');
    ascent-override: 90%;
    descent-override: 22.43%;
    line-gap-override: 0%;
    size-adjust: 107%;
}
body { font-family: 'Inter', 'Inter-Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── Eigene Display-Schrift fuer Ueberschriften, Fliesstext bleibt Inter ── */
h1, h2, h3,
.hero-h1, .tw-cursor,
.nl-title, .work-lightbox-title {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
}

/* Enhanced Animations */
.anim { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim.visible { opacity: 1; transform: translateY(0); }
.anim-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim-left.visible { opacity: 1; transform: translateX(0); }
.anim-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.anim-right.visible { opacity: 1; transform: translateX(0); }
.anim-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.anim-scale.visible { opacity: 1; transform: scale(1); }

.d1 { transition-delay: 100ms; } .d2 { transition-delay: 200ms; } .d3 { transition-delay: 300ms; } .d4 { transition-delay: 400ms; } .d5 { transition-delay: 500ms; } .d6 { transition-delay: 600ms; }

/* ── Navbar active link + 9: Hover Underline Slide ── */
#nav-links-main a { position: relative; }
#nav-links-main a.nav-active { color: #2563EB; }
.dark #nav-links-main a.nav-active { color: #60A5FA; }
/* Active state: ::after */
#nav-links-main a.nav-active::after {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    animation: navUnderlineIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes navUnderlineIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Hover state: ::before slides in from left */
#nav-links-main a::before {
    content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    opacity: 0.55;
}
#nav-links-main a:hover::before  { transform: scaleX(1); }
#nav-links-main a.nav-active::before { display: none; }

/* ── Form success checkmark ── */
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
@keyframes checkCircle { to { stroke-dashoffset: 0; } }
@keyframes successFadeIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.form-success {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    animation: successFadeIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.form-success svg .check-circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkCircle 0.5s ease 0.1s forwards; }
.form-success svg .check-mark  { stroke-dasharray: 30;  stroke-dashoffset: 30;  animation: checkDraw 0.35s ease 0.4s forwards; }

/* Leistungen: leichte 3D-Neigung beim Reveal statt reinem Slide-up.
   Reine CSS-Erweiterung des bestehenden .anim/.visible-Umschalters
   (siehe initScrollAnimations) — keine neue JS-Logik noetig. */
#leistungen .card-3d.anim {
    transform: perspective(1000px) rotateX(10deg) translateY(28px);
    transform-origin: bottom center;
}
#leistungen .card-3d.anim.visible {
    transform: perspective(1000px) rotateX(0deg) translateY(0);
}
#leistungen .card-3d.anim.visible:hover { transform: perspective(1000px) translateY(-5px); }

/* 3D Card Hover Effects — subtiler Hover mit Schatten */
.card-3d {
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}
.card-3d:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(37,99,235,0.06);
}
/* :hover feuert auf dem Handy nie — ohne eigenes Feedback passiert beim
   Antippen der Karten optisch gar nichts. Kurzes Eindruecken stattdessen. */
.card-3d:active { transform: scale(0.97); transition-duration: 0.1s; }
/* Problem-Karten haben schon einen Hover-Rahmen (rein dekorativ, genau wie
   card-3d/team-card) — fuer Konsistenz dieselbe Tap-Rueckmeldung. */
.problem-card:active { transform: scale(0.97); }
.dark .card-3d { box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25); }
.dark .card-3d:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(96,165,250,0.08); }

/* Timeline Animation */
.timeline-item { opacity: 0; transform: translateX(-30px); transition: all 0.6s cubic-bezier(0.16,1,0.3,1); }
.timeline-item.visible { opacity: 1; transform: translateX(0); }
.timeline-line { height: 0%; transition: height 0.8s ease-out; }
.timeline-line.active { height: 100%; }

/* Parallax */
.parallax { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }

/* ── Navbar als durchgehende Pille ── */
#navbar { transition: padding 0.3s; }
#nav-pill {
    border-radius: 9999px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(15,23,42,0.08);
    /* --nav-depth (0..1) wird von initNavbar() stufenlos aus dem Scroll-Fortschritt gesetzt */
    backdrop-filter: blur(calc(4px + var(--nav-depth, 0) * 12px));
    -webkit-backdrop-filter: blur(calc(4px + var(--nav-depth, 0) * 12px));
    box-shadow: 0 calc(2px + var(--nav-depth, 0) * 4px) calc(10px + var(--nav-depth, 0) * 16px) rgba(15,23,42, calc(0.06 + var(--nav-depth, 0) * 0.06));
    transition: background 0.4s ease;
    color: #1e293b;
}
.dark #nav-pill { background: rgba(17,17,17,0.65); border-color: #2a2a2a; color: #f1f5f9; box-shadow: 0 calc(2px + var(--nav-depth, 0) * 4px) calc(10px + var(--nav-depth, 0) * 16px) rgba(0,0,0, calc(0.25 + var(--nav-depth, 0) * 0.15)); }
#navbar.scrolled #nav-pill { background: rgba(255,255,255,0.95); }
.dark #navbar.scrolled #nav-pill { background: rgba(17,17,17,0.95); }
html:not(.dark) #nav-links-main a { color: #374151; }
html:not(.dark) #nav-links-main a:hover { color: #2563eb; }
html:not(.dark) #navbar .mobile-link { color: #374151; }
#mobile-menu { border-radius: 22px; }

.btn { transition: transform 0.3s; }
.btn:hover { transform: scale(1.05); }

/* ── Premium Tap-Feedback: kurzer Press-Effekt auf allen Buttons (mobil spuerbar) ── */
@media (prefers-reduced-motion: no-preference) {
    button:not(:disabled):active,
    a.btn:active {
        transform: scale(0.95);
    }
}

#mobile-menu { opacity: 0; overflow: hidden; transition: opacity 0.3s ease; pointer-events: none; display: none; }
#mobile-menu.open { opacity: 1; pointer-events: auto; display: block; }
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.16,1,0.3,1); }
.faq-body.open { grid-template-rows: 1fr; }
.faq-inner { overflow: hidden; }
.faq-icon { transition: transform 0.3s ease; }
.faq-btn.active .faq-icon { transform: rotate(180deg); }

/* FAQ open state — light */
.faq-item.faq-open {
    border-color: rgba(37,99,235,0.32) !important;
    background: rgba(37,99,235,0.04) !important;
    box-shadow: 0 4px 28px rgba(37,99,235,0.10), 0 1px 4px rgba(0,0,0,0.04) !important;
}
.faq-item.faq-open::after { opacity: 1 !important; }
.faq-item.faq-open .faq-num { color: #2563EB !important; }
.faq-item.faq-open .faq-q-text { color: #1e40af !important; }
.faq-item.faq-open .faq-chevron-wrap { background: #2563EB !important; border-color: #2563EB !important; }
.faq-item.faq-open .faq-chevron-wrap svg { color: white !important; }
/* FAQ open state — dark */
.dark .faq-item.faq-open {
    border-color: rgba(59,130,246,0.40) !important;
    background: rgba(37,99,235,0.09) !important;
    box-shadow: 0 0 55px rgba(37,99,235,0.15), 0 8px 32px rgba(0,0,0,0.30) !important;
}
.dark .faq-item.faq-open .faq-num { color: #60A5FA !important; }
.dark .faq-item.faq-open .faq-q-text { color: #fff !important; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.imp-animate { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; }
.imp-animate.visible { opacity: 1; transform: translateY(0); }

/* Cookie Banner */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 9999; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
#cookie-banner.show { transform: translateY(0); }
.dark #cookie-banner { background: rgba(17,17,17,0.98); border-top-color: #2a2a2a; }
/* Auf dem Handy sitzt die Tab-Bar auch bei bottom:0 — ohne diesen Versatz
   wuerde der (hoehere z-index) Cookie-Banner sie beim Einblenden komplett
   verdecken. Stattdessen setzt sich der Banner direkt darueber. */
@media (max-width: 1023px) {
    #cookie-banner.show { transform: translateY(calc(-1 * (var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px)))); }
}
@media (prefers-reduced-motion: reduce) { #cookie-banner { transition: none; } }
#cookie-settings { display: none; }
#cookie-settings.show { display: block; }
.cookie-toggle { position: relative; display: inline-block; width: 48px; height: 24px; background: #cbd5e1; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
.cookie-toggle.active { background: #2563EB; }
.cookie-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.3s; }
.cookie-toggle.active::after { transform: translateX(24px); }


/* ── Typewriter Cursor ── */
.tw-cursor {
    display: inline-block; width: 3px; height: 0.82em;
    background: linear-gradient(135deg, #60A5FA, #34D399);
    margin-left: 4px; vertical-align: middle; border-radius: 2px;
    animation: twBlink 0.75s step-end infinite;
}
@keyframes twBlink { 0%,100%{opacity:1} 50%{opacity:0} }
/* Typewriter-Zeile: fixe Höhe → kein Layout-Shift egal wie lang der Text */
.hero-h1 .gradient-text { display: block; height: 2.4em; overflow: hidden; }
@media (min-width: 640px) {
    .hero-h1 .gradient-text { height: 1.15em; }
}


/* Gradient Text */
.gradient-text { background: linear-gradient(135deg, #60A5FA 0%, #34D399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Glowing Primary Button */
.btn-glow { box-shadow: 0 0 0 0 rgba(37,99,235,0.4), 0 8px 25px rgba(37,99,235,0.35) !important; }
.btn-glow:hover { box-shadow: 0 0 25px rgba(37,99,235,0.55), 0 12px 35px rgba(37,99,235,0.45) !important; transform: scale(1.05) !important; }

/* Gradient CTA Banner — statisch */
.gradient-banner { background: linear-gradient(135deg, #1e40af 0%, #2563EB 50%, #0ea5e9 100%); }

/* ── Card Cursor Glow ── */
.card-glow { isolation: isolate; }
.card-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        340px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(37,99,235,0.09),
        transparent 65%
    );
    opacity: var(--glow-op, 0);
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
}
.dark .card-glow::before {
    background: radial-gradient(
        340px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(96,165,250,0.13),
        transparent 65%
    );
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Heading underline gradient */
.heading-underline { background: linear-gradient(90deg, #2563EB, #0ea5e9) !important; }


/* Section badge pill */
.section-badge { background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(14,165,233,0.08)); border: 1px solid rgba(37,99,235,0.2); color: #2563EB; transition: background 0.2s ease, border-color 0.2s ease; }
.dark .section-badge { background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(14,165,233,0.12)); border-color: rgba(37,99,235,0.3); color: #60A5FA; }
/* Subtle shine on heading underlines */
.heading-underline { position: relative; overflow: hidden; }
.heading-underline::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%); transform: translateX(-100%); animation: underline-shine 4s ease-in-out infinite; }
@keyframes underline-shine { 0%,60% { transform: translateX(-100%); } 80%,100% { transform: translateX(200%); } }

/* Problem icon backgrounds */
.problem-icon-bg { background: rgba(239,68,68,0.10); }
.dark .problem-icon-bg { background: rgba(239,68,68,0.20); }

/* Wave dividers */
.wave-to-white path { fill: #f0f4ff; }
.dark .wave-to-white path { fill: #0a0e1a; }
.wave-to-plain-white path { fill: #ffffff; }
.dark .wave-to-plain-white path { fill: #111111; }
/* ── Section Separators ── */
.section-sep {
    position: relative;
    height: 1px;
    overflow: visible;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-sep-line {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37,99,235,0.25) 12%,
        rgba(99,102,241,0.85) 40%,
        rgba(139,92,246,1)   50%,
        rgba(99,102,241,0.85) 60%,
        rgba(37,99,235,0.25) 88%,
        transparent 100%);
    box-shadow: 0 0 6px rgba(99,102,241,0.5), 0 0 18px rgba(139,92,246,0.25);
}
.section-sep-gem {
    position: relative;
    z-index: 2;
    width: 11px; height: 11px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    transform: rotate(45deg);
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow:
        0 0 0 2px rgba(139,92,246,0.2),
        0 0 10px rgba(59,130,246,0.8),
        0 0 24px rgba(139,92,246,0.45);
}

/* ── Hero Aurora Mesh — entfernt ── */
.hero-grid-lines { background-image:linear-gradient(rgba(255,255,255,0.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.028) 1px,transparent 1px); background-size:70px 70px; }

/* ══ Sektion „Unsere Arbeit" ══ */
.work-section { background: #ffffff; }
.dark .work-section { background: #111111; }
.work-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .work-grid { grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: 3rem; } }

.work-h2-dash { color: #94a3b8; font-weight: 400; margin: 0 0.35rem; }
.dark .work-h2-dash { color: #475569; }
@media (max-width: 767px) { .work-h2-dash { display: block; height: 0; overflow: hidden; margin: 0; } }

/* Sanfte Neigung bei Hover – jedes Element für sich */
.work-tilt { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease; will-change: transform; }

/* ── Stacked Cards (Ghost-Karten hinter dem Frame) ── */
.work-stack-wrapper { position: relative; width: 100%; max-width: 720px; }

.work-stack-ghost {
  position: absolute; inset: 0;
  border-radius: 28px;
  background: #dde3ec;
  pointer-events: none;
}
.dark .work-stack-ghost { background: #253148; }

.work-stack-ghost-1 {
  transform: rotate(2.5deg) translateY(10px);
  opacity: 0.65; z-index: 0;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.work-stack-ghost-2 {
  transform: rotate(-1.8deg) translateY(18px) scale(0.97);
  opacity: 0.38; z-index: -1;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
/* Ghost-Bounce beim Slide-Wechsel */
.work-stack-ghost-1.ghost-bounce { transform: rotate(1deg) translateY(5px) scale(0.99); }
.work-stack-ghost-2.ghost-bounce { transform: rotate(-0.8deg) translateY(11px) scale(0.955); }

/* ── Frame (#8: adaptives Seitenverhältnis) ── */
.work-carousel { position: relative; }
.work-frame {
    position: relative; overflow: hidden;
    border-radius: 28px;
    aspect-ratio: 1 / 1;
    background: #e2e8f0;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 22px 55px rgba(15,23,42,0.14);
    cursor: zoom-in;
}
.dark .work-frame { background: #1e293b; border-color: rgba(255,255,255,0.08); box-shadow: 0 22px 55px rgba(0,0,0,0.45); }

/* ── Shimmer Skeleton (#10) ── */
@keyframes work-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.work-shimmer {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 800px 100%;
  animation: work-shimmer 1.4s ease-in-out infinite;
  transition: opacity 0.35s ease;
}
.dark .work-shimmer {
  background: linear-gradient(90deg, #1e293b 25%, #253148 50%, #1e293b 75%);
  background-size: 800px 100%;
}
.work-shimmer.hidden { opacity: 0; pointer-events: none; }

/* ── Slides: Richtungsabhängige Transition (#1) ── */
.work-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  overflow: hidden;
}
.work-slide.is-active { opacity: 1; pointer-events: auto; }
.work-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Caption: Titel + Kurztext (#5) ── */
.work-slide-glass {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 120px 22px 22px 22px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.10) 75%,
    transparent 100%);
  border-radius: 0 0 24px 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 4;
}
.work-slide.is-active .work-slide-glass { opacity: 1; }

.work-slide-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 4px 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  line-height: 1.3;
}
.work-slide-text {
  color: rgba(255,255,255,0.80);
  font-size: 0.78rem;
  line-height: 1.55;
  font-style: italic;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── Progress-Bar (Autoplay #4) ── */
.work-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.18); z-index: 14;
  border-radius: 28px 28px 0 0;
}
.work-progress-bar {
  height: 100%; width: 0;
  background: rgba(255,255,255,0.85);
  border-radius: 28px 28px 0 0;
  transition: width linear;
}

/* ── Slide-Counter (#7) ── */
.work-counter {
  position: absolute; top: 14px; right: 16px; z-index: 14;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ── Pfeil-Buttons ── */
.work-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.88); color: #1e293b;
    border: 1px solid rgba(15,23,42,0.10);
    box-shadow: 0 8px 24px rgba(15,23,42,0.22);
    cursor: pointer; z-index: 12;
    transition: background 0.22s, transform 0.22s, opacity 0.22s;
    opacity: 0;
}
.work-frame:hover .work-nav,
.work-frame:focus-within .work-nav { opacity: 1; }
/* Touchscreens kennen kein Hover — Pfeile muessen dort immer sichtbar sein */
@media (hover: none) { .work-nav { opacity: 0.85; } }
.dark .work-nav { background: rgba(17,24,39,0.90); color: #e2e8f0; border-color: rgba(255,255,255,0.12); }
.work-nav:hover { background: #2563eb; color: #fff; transform: translateY(-50%) scale(1.1); }
.work-nav-prev { left: 14px; }
.work-nav-next { right: 14px; }

/* ── Dot-Paginierung (#2) ── */
.work-dots {
  display: flex; justify-content: center; gap: 8px;
  padding-top: 18px;
}
.work-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1;
  border: none; padding: 0; cursor: pointer;
  transition: background 0.25s, transform 0.25s, width 0.3s cubic-bezier(0.16,1,0.3,1);
}
/* Der sichtbare Punkt bleibt winzig (8px), die tatsaechliche Trefferflaeche
   wird per Pseudo-Element unsichtbar vergroessert — 8px ist auf einem
   Touchscreen kaum zuverlaessig treffbar. */
.work-dot::before { content: ''; position: absolute; inset: -10px; }
@media (max-width: 767px) { .work-dots { gap: 16px; } }
.dark .work-dot { background: #334155; }
.work-dot.is-active {
  background: #2563eb;
  width: 22px; border-radius: 4px;
}
.work-dot:hover:not(.is-active) { background: #94a3b8; transform: scale(1.2); }

/* ── Lightbox (#9) ── */
.work-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 60px 20px 40px;
}
.work-lightbox.is-open { opacity: 1; pointer-events: auto; }
.work-lightbox-inner {
  display: flex; flex-direction: column; align-items: center;
  width: min(90vw, 960px);
  gap: 16px;
}
.work-lightbox-img {
  max-width: 100%; max-height: 70vh;
  object-fit: contain; border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  flex-shrink: 0;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.work-lightbox.is-open .work-lightbox-img { transform: scale(1); }
.work-lightbox-caption { text-align: center; max-width: 640px; padding-bottom: 8px; }
.work-lightbox-title {
  color: #ffffff; font-size: 1rem; font-weight: 700;
  margin: 0 0 8px 0; letter-spacing: 0.01em;
}
.work-lightbox-text {
  color: rgba(255,255,255,0.65); font-size: 0.875rem;
  line-height: 1.7; font-style: italic; margin: 0;
}
.work-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}
.work-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.work-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer; z-index: 10001;
  transition: background 0.2s;
}
.work-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.work-lightbox-prev { left: 20px; }
.work-lightbox-next { right: 20px; }
.work-lightbox-close { z-index: 10001; }
@media (max-width: 640px) {
  .work-lightbox-prev { left: 8px; }
  .work-lightbox-next { right: 8px; }
}

/* Begleittext – Position wird auf Desktop per JS gesetzt
   (linke Kante = Mitte Bildrahmen, rechte Kante = Mitte Anton-Kreis) */
.work-caption {
    position: absolute; z-index: 9;
    right: 10px; bottom: -26px; max-width: 80%;
    padding: 30px 34px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(37,99,235,0.16);
    box-shadow: 0 22px 50px rgba(15,23,42,0.18);
    font-size: 1.15rem; line-height: 1.65; color: #475569;
}
.dark .work-caption { background: #1a1a1a; border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.72); box-shadow: 0 22px 50px rgba(0,0,0,0.55); }

/* ── Gründer rechts ── */
.work-founders { display: flex; flex-direction: column; gap: 2.5rem; }
.work-person { display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .work-person-2 { margin-left: 2.5rem; } }
.work-avatar {
    position: relative; z-index: 7;
    width: 185px; height: 185px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    border: 3px solid #ffffff;
    box-shadow: 0 12px 34px rgba(15,23,42,0.18);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.dark .work-avatar { background: linear-gradient(135deg, #334155, #1e293b); border-color: #111111; color: #64748b; }
@media (max-width: 639px) { .work-avatar { width: 140px; height: 140px; } }
.work-box {
    position: relative; flex: 1;
    padding: 24px 26px 42px;
    border-radius: 22px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.07);
    color: #475569; font-size: 0.95rem; line-height: 1.7;
}
.dark .work-box { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.70); }
.work-box-blau { color: #2563EB; }
.dark .work-box-blau { color: #60A5FA; }
/* LinkedIn-Link unten rechts in der Box – gleiche Machart wie im Team-Bereich */
.work-box-li {
    position: absolute; right: 14px; bottom: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.dark .work-box-li { background: rgba(255,255,255,0.09); color: #ffffff; border: none; }
.work-box-li:hover { background: #2563EB; color: #ffffff; border-color: transparent; }
@media (max-width: 1023px) {
    .work-founders { margin-top: 3rem; }
}

/* ══ Partner-Banner (Logo-Marquee) ══ */
.partner-banner { background: #ffffff; padding: 60px 0; border-bottom: 1px solid rgba(15,23,42,0.07); }
.dark .partner-banner { background: #0d0d0d; border-bottom-color: rgba(255,255,255,0.07); }
.partner-inner {
    max-width: 72rem; margin: 0 auto; padding: 0 1.5rem;
    display: flex; align-items: center; gap: 2.5rem;
}
@media (min-width: 640px) { .partner-inner { padding: 0 2rem; } }
.partner-label {
    flex-shrink: 0; margin: 0;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: #64748b; line-height: 1.4; max-width: 9rem;
}
.dark .partner-label { color: #94a3b8; }

.partner-marquee {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    /* Weicher Ausblender an beiden Rändern */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.partner-track {
    display: flex; align-items: center;
    width: max-content;
    gap: 4rem;                     /* identischer Abstand zwischen allen Logos */
    padding-right: 4rem;           /* gleicher Abstand über die Nahtstelle hinweg */
    animation: partnerScroll 27s linear infinite; /* 3 Logos → 9s pro Logo, Tempo wie bei 2 Logos/18s */
    will-change: transform;
}
/* Laufband angehalten (nach Klick auf ein Logo) */
.partner-marquee.is-paused .partner-track { animation-play-state: paused; }
/* hover-pause entfernt – stattdessen JS-basiertes sanftes Abbremsen */
@keyframes partnerScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }   /* exakt ein Logo-Satz */
}
.partner-logo { display: flex; align-items: center; flex-shrink: 0; }
.partner-logo img {
    height: 68px; width: auto; max-width: 240px; object-fit: contain;
    filter: grayscale(1); opacity: 0.62;
    transition: filter 0.35s ease, opacity 0.35s ease;
}
.dark .partner-logo img { opacity: 0.55; }
/* Wappenmarke mit Vollflächen wiegt in Graustufen schwerer als die Linienmarken */
.partner-logo--heavy img { opacity: 0.50; }
.dark .partner-logo--heavy img { opacity: 0.45; }
/* Breiteste Marke im Laufband (4,38:1). Bei 68px Hoehe ergaeben sich 298px
   Breite — die allgemeine Deckelung auf 240px wuerde sie stauchen. */
.partner-logo--wide img { max-width: 320px; }
/* Schwarze Wortmarke verschwindet auf dunklem Grund. Tonwert-Invertierung
   statt reiner Silhouette: die drei Schilde und die drei Balkensegmente
   bleiben als verschieden helle Formen unterscheidbar, der Text wird weiss.
   NOTLOESUNG — eine helle Originalfassung vom Verband waere richtig. */
.dark .partner-logo--wide img { filter: grayscale(1) invert(1); opacity: 0.72; }
/* Beim Ueberfahren volle Originalfarben wie bei den anderen Marken.
   Die Wortmarke ist dann dunkel, die drei Wappen tragen den Wiedererkennungswert. */
.dark .partner-logo--wide:hover img,
.dark .partner-logo--wide.is-active img { filter: none; opacity: 1; }
/* Textilreinigungsverband NRW: separate light/dark logo files, no invert needed.
   Light PNG has more canvas padding so needs slightly more height to read clearly. */
.partner-logo--textil img.partner-logo-light { height: 80px; width: auto; max-width: 300px; }
.partner-logo--textil img.partner-logo-dark  { height: 68px; width: auto; max-width: 280px; }
.dark .partner-logo--textil img.partner-logo-dark { filter: grayscale(1); opacity: 0.72; }
.dark .partner-logo--textil:hover img.partner-logo-dark { filter: none; opacity: 1; }
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }
/* Angeklicktes Logo: volle Farbe, Rest bleibt grau */
.partner-logo.is-active img { filter: none; opacity: 1; }
@media (max-width: 639px) {
    .partner-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .partner-label { max-width: none; }
    .partner-marquee { width: 100%; }
    .partner-logo img { height: 52px; }
    .partner-track { gap: 3rem; padding-right: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .partner-track { animation: none; } }

/* ── Hero Zwei-Spalten-Layout (eigenes CSS: Tailwind ist vorgebaut,
      arbiträre Grid-Klassen stehen dort nicht zur Verfügung) ── */
.hero-inner {
    position: relative; z-index: 25;
    width: 100%; max-width: 72rem;
    margin: 0 auto;
    padding: 7rem 1.5rem 4rem;
}
@media (min-width: 640px) { .hero-inner { padding-left: 2rem; padding-right: 2rem; } }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .hero-inner { padding-top: 7rem; padding-bottom: 5rem; }
    .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 3.5rem; }
}
.hero-chat-col { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Mobil zuerst die Kai-Chat-Demo zeigen, danach den Text — sonst sieht
   man beim Oeffnen erstmal nur Fliesstext, das wirkt unpersoenlich.
   Reine visuelle Reihenfolge (CSS order), im DOM bleibt der Text zuerst. */
@media (max-width: 1023px) {
    /* Reihenfolge auf dem Handy: Ueberschrift (mit Typewriter) zuerst,
       dann die Kai-Demo, dann Zusatztext/CTA/Trust-Badges. .text-left
       wird dafuer "aufgeloest" (display:contents), damit ihre Kinder
       direkt an der Grid-Reihenfolge von .hero-grid teilnehmen —
       Lesereihenfolge im DOM bleibt unveraendert. */
    .text-left { display: contents; }
    .hero-h1 { order: -2; margin-bottom: 0; }
    .hero-chat-col { order: -1; margin-top: 12px; margin-bottom: 12px; }
    /* Grid-Gap komplett aus: die Textelemente (hero-lead/-sub/-cta-row)
       haben laengst ihre eigenen margin-bottom-Werte fuer den Desktop-
       Rhythmus (24/24/40px) — als eigenstaendige Grid-Kinder addierte sich
       da zusaetzlich noch ein Grid-Gap drauf, bei jedem einzelnen Absatz.
       Nur .hero-chat-col bekommt oben eigens Abstand, weil es das einzige
       neu eingeschobene Element ohne eigenen Rhythmus ist. */
    .hero-grid { gap: 0; }
}
@media (min-width: 1024px) {
    .hero-chat-col { align-items: flex-end; }
    /* Die Chat-Spalte rueckt nach rechts in den Aussenrand neben dem
       72rem-Container, damit links der Box Platz fuer Kai entsteht.
       transform statt margin: kein Reflow, die Textspalte bleibt
       unberuehrt und syncHeroChatHeight() misst weiter dasselbe.
       Die 16px im Term halten Abstand zum Fensterrand. */
    .hero-chat-col {
        /* Eine Einheit des Hintergrundrasters (background-size: 70px)
           wieder nach links. Die Verschiebung sitzt auf der Spalte,
           Kai und Abzeichen liegen darin und wandern mit — der Abstand
           zwischen Figur und Box bleibt unveraendert. */
        transform: translateX(calc(clamp(0px, (100vw - 72rem) / 2 - 16px, 320px) - 140px));
    }
}

/* Einheitliches Abstands-Raster der Textspalte: 24 / 24 / 24 / 40 */
.hero-h1        { margin-bottom: 24px; }
.hero-lead      { margin-bottom: 24px; }
.hero-sub       { margin-bottom: 24px; }
.hero-cta-row   { margin-bottom: 40px; }
.hero-trust     { margin-top: 0; }
/* Umbruchschutz erst ab Tablet – auf dem Handy darf der Button umbrechen */
@media (min-width: 640px) { #hero-cta { white-space: nowrap; } }

/* ── Hero Chat-Mockup (Sprechblase, rein statisch) ── */
/* Kennzeichen neben dem Namen im Mockup-Kopf. Bewusst so
   zurueckhaltend wie der Online-Status darunter: kein Puls, kein
   Leuchten, kein farbiger Kasten. */
.hero-chat-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.42);
    white-space: nowrap;
}

.hero-chat {
    /* Hoehe der Figur. Steht hier, weil Figur UND Nebel damit rechnen. */
    --kai-h: clamp(340px, 28vw, 500px);
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    min-height: 420px;
    padding: 22px 20px 24px;
    border-radius: 34px 34px 34px 8px;
    /* Der Rand bleibt fuer das Layout stehen, gezeichnet wird er vom
       ::before. Hintergrund und Weichzeichnen liegen dort, weil ein Kind
       niemals hinter dem Hintergrund seines Elternelements liegen kann —
       der Nebel muss aber genau dorthin. */
    background: transparent;
    border: 1px solid transparent;
    /* Eigener Stapelkontext, damit die z-index-Werte der Kinder nicht
       gegen den Gewerk-Knopf ausserhalb der Box wirken. */
    isolation: isolate;
}

/* ── Eintritt: leichte 3D-Neigung, die sich einpendelt ── */
.hero-chat-intro {
    animation: heroChatSettle 0.9s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: 0.35s;
}
@keyframes heroChatSettle {
    from { opacity: 0; transform: perspective(900px) rotateX(8deg) rotateY(-6deg) translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1); }
}
#hero-cta.hero-cta-pulse-once { animation: heroCtaPulseOnce 0.6s ease-out; }
@keyframes heroCtaPulseOnce {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.55); }
    100% { box-shadow: 0 0 0 14px rgba(37,99,235,0); }
}

/* Sichtbare Huelle der Box: Hintergrund, Rand, Weichzeichnen, Schatten. */
.hero-chat::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: 35px 35px 35px 9px;
    background: rgba(9,16,32,0.72);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 60px rgba(37,99,235,0.18);
}
/* Kopfbild im Mockup: deckendes Portrait statt Symbol auf Farbverlauf */
.hero-chat-avatar { overflow: hidden; }
.hero-chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Kai an der linken Kante: Hand davor, Koerper dahinter. Der Zipfel der
   Sprechblase sitzt unten links, deshalb setzt die Figur darueber an. */
.hero-chat-kai {
    position: absolute;
    /* Die Datei ist auf den Inhalt zugeschnitten (476x592, 0.804:1),
       Bildkante und sichtbare Kante fallen also zusammen.
       Die senkrechte Schnittkante des Koerpers liegt 24px von rechts,
       das sind 5,04% der Breite oder 4,05% der Hoehe. Genau so weit
       ragt er ueber die Boxkante — nur die greifenden Finger. */
    right: calc(100% - var(--kai-h) * 0.0405 + 6px);
    left: auto;
    bottom: 44px;
    top: auto;
    /* NUR die Hoehe wird gesetzt, die Breite folgt dem Seitenverhaeltnis.
       max-width: none hebt die Tailwind-Preflight-Regel
       img{max-width:100%} auf — die hatte ihn zusammengequetscht. */
    height: var(--kai-h);
    width: auto;
    max-width: none;
    object-fit: contain;
    /* Vor der Boxhuelle (3): nur so liegt die greifende Hand sichtbar
       vor der Boxkante. */
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 12px 26px rgba(0,0,0,0.45));
    /* Die Unterkante der Figur ist hart abgeschnitten. Statt sie nur zu
       verdecken, wird sie hier weich ausgeblendet — dann gibt es keine
       Kante mehr, die durchschimmern koennte. Nur die unteren 13%,
       Werkzeugtasche und Oberkoerper bleiben unberuehrt. */
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 6%, #000 13%);
            mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 6%, #000 13%);
}

/* Nebel an Kais Unterkante: loest den harten Bildabschluss auf.
   Farben wie in der Ueberschrift (.gradient-text), aber sehr schwach.
   Zieht sich ueber Kai UND ueber das Chatfenster und tritt rechts
   wieder hervor, damit es wie eine durchgehende Schwade wirkt. */
/* Nebelwolke VOR Kai (z-index 6 > Figur 5 > Boxinhalt 1).
   Eine einzelne, flache Ellipse aus radialen Verlaeufen — kein Rechteck,
   keine Kante in irgendeine Richtung. Grundton ist der Seiten-
   hintergrund, damit sie unten mit ihm verschmilzt statt als Fleck zu
   wirken; der Blau-nach-Gruen-Schimmer liegt nur schwach darueber.

   Unterkante an der Unterkante der Chatbox, Oberkante knapp ueber Kais
   Unterkante (er endet 44px ueber der Box). Waagerecht endet sie knapp
   neben ihm und reicht nicht in die Textspalte.

   Die harte Schnittkante der Figur wird zusaetzlich durch die Maske auf
   .hero-chat-kai aufgeloest — die Wolke muss sie nicht allein
   verdecken. */
/* NEBEL IN ZWEI LAGEN.
   Gefordert ist: vor Kai, aber hinter Box und Gewerk-Knopf. Kais Hand
   muss zugleich VOR der Boxkante liegen. Als eine Ebene widerspricht
   sich das, deshalb dieselbe Schwade in zwei Lagen:

   .hero-chat-fog-back  (z-index 2)  liegt hinter der Boxhuelle (3) und
       hinter dem Gewerk-Knopf. Sie zieht sich hinter der Box durch und
       tritt rechts und unterhalb wieder hervor.
   .hero-chat-fog       (z-index 6)  liegt vor Kai (5) und verdeckt Bein
       und unteren Teil der Werkzeugtasche. Sie endet exakt an der
       linken Boxkante und beruehrt Box und Knopf nie.

   Die Naht zwischen beiden liegt genau auf der Boxkante und wird von
   der Box verdeckt — sichtbar bleibt eine durchgehende Bank. */
.hero-chat-fog,
.hero-chat-fog-back {
    position: absolute;
    pointer-events: none;
    bottom: -16px;
    height: calc(var(--kai-h) * 0.28);
    filter: blur(9px);
}

/* Vordere Lage: links neben der Box, ueber Kai */
.hero-chat-fog {
    z-index: 6;
    right: 100%;
    width: calc(var(--kai-h) * 0.42);
    background:
        radial-gradient(ellipse 62% 54% at 78% 62%,
            rgba(96,165,250,0.34) 0%,
            rgba(52,211,153,0.21) 46%,
            rgba(96,165,250,0.00) 80%),
        radial-gradient(ellipse 66% 56% at 78% 62%,
            #030712 0%,
            rgba(3,7,18,0.94) 32%,
            rgba(3,7,18,0.60) 54%,
            rgba(3,7,18,0.20) 72%,
            rgba(3,7,18,0.00) 88%);
}

/* Hintere Lage: hinter Box und Gewerk-Knopf hindurch nach rechts */
.hero-chat-fog-back {
    z-index: 2;
    left: 0;
    right: -28px;
    background:
        radial-gradient(ellipse 54% 54% at 34% 62%,
            rgba(96,165,250,0.34) 0%,
            rgba(52,211,153,0.21) 46%,
            rgba(96,165,250,0.00) 80%),
        radial-gradient(ellipse 58% 56% at 34% 62%,
            #030712 0%,
            rgba(3,7,18,0.94) 30%,
            rgba(3,7,18,0.62) 52%,
            rgba(3,7,18,0.22) 70%,
            rgba(3,7,18,0.00) 84%);
}
@media (max-width: 1023px) { .hero-chat-fog-back { display: none; } }
@media (max-width: 1023px) { .hero-chat-fog { display: none; } }

/* Inhalt liegt ueber dem Schein, aber UNTER der Figur (z-index 5). */
.hero-chat-header-sep,
.hero-chat-log,
.hero-chat-input { position: relative; z-index: 4; }
@media (max-width: 1023px) { .hero-chat-kai { display: none; } }

/* Sprechblasen-Zipfel unten links */
.hero-chat::after {
    content: '';
    position: absolute;
    z-index: 3;
    left: -1px; bottom: -16px;
    width: 34px; height: 26px;
    background: rgba(9,16,32,0.72);
    border-left: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-radius: 0 0 0 22px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.hero-chat-msg { border-radius: 16px 16px 16px 4px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.11); color: rgba(255,255,255,0.92); padding: 9px 14px; }
.hero-chat-input { border-radius: 9999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.hero-chat-log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 0; }

/* ── Gewerk-Dropdown unterhalb des Widgets ── */
.hero-select { position: relative; width: 100%; max-width: 340px; margin-top: 14px; }
.hero-select-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(9,16,32,0.72);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    transition: border-color 0.25s, background 0.25s;
}
.hero-select-btn:hover { border-color: rgba(96,165,250,0.45); }
.hero-select-btn svg { transition: transform 0.25s ease; flex-shrink: 0; transform: rotate(180deg); }
.hero-select.open .hero-select-btn svg { transform: rotate(0deg); }
.hero-select-menu {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
    padding: 6px;
    border-radius: 18px;
    background: rgba(9,16,32,0.94);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -22px 48px rgba(0,0,0,0.45);
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
    max-height: 280px; overflow-y: auto;
}
.hero-select.open .hero-select-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero-select-opt {
    display: block; width: 100%; text-align: left;
    padding: 12px 14px; border-radius: 13px;
    background: transparent; border: none; cursor: pointer;
    color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 500;
}
.hero-select-opt:hover, .hero-select-opt[aria-selected="true"] { background: rgba(37,99,235,0.28); color: #fff; }

/* ── Leistungen ── */
.svc-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#eff6ff; color:#2563eb; flex-shrink:0; transition:background 0.3s,color 0.3s; }
.dark .svc-icon { background:rgba(37,99,235,0.18); color:#93c5fd; }
.card-3d:hover .svc-icon { background:#2563EB; color:#ffffff; }
.svc-featured { border-top:3px solid #2563EB !important; }

/* ── Team Section ── */
.team-section { background: #ffffff; }
.dark .team-section { background: #111111; }
.team-bg-glow { opacity: 0; pointer-events: none; }
.dark .team-bg-glow { opacity: 1; }
/* Team: Fotos kommen leicht angewinkelt herein statt gerade von der Seite.
   Reine CSS-Erweiterung von .anim-left/.anim-right — keine neue JS-Logik. */
#team .team-card.anim-left  { transform: perspective(1000px) rotateY(14deg) translateX(-32px); }
#team .team-card.anim-right { transform: perspective(1000px) rotateY(-14deg) translateX(32px); }
#team .team-card.anim-left.visible,
#team .team-card.anim-right.visible {
    transform: perspective(1000px) rotateY(0deg) translateX(0);
}
#team .team-card.anim-left.visible:hover,
#team .team-card.anim-right.visible:hover { transform: perspective(1000px) translateY(-4px); }

.team-card {
    background: #ffffff;
    border: 1px solid #e0e7ff;
    border-top: 3px solid #2563EB;
    box-shadow: 0 4px 28px rgba(37,99,235,0.10), 0 1px 6px rgba(0,0,0,0.04);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.dark .team-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.09);
    border-top: 1px solid rgba(255,255,255,0.09);
    box-shadow: none;
}
.team-card:hover {
    border-color: #2563EB !important;
    box-shadow: 0 12px 48px rgba(37,99,235,0.18), 0 2px 10px rgba(0,0,0,0.06) !important;
    transform: translateY(-4px);
}
.team-card:active { transform: scale(0.98); transition-duration: 0.1s; }
.dark .team-card:hover {
    border-color: rgba(37,99,235,0.45) !important;
    box-shadow: 0 0 64px rgba(37,99,235,0.12) !important;
}
.team-photo-fade { background: linear-gradient(to bottom, transparent 60%, #ffffff 100%); }
.dark .team-photo-fade { background: linear-gradient(to bottom, transparent 60%, #111111 100%); }
.team-li-btn { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dark .team-li-btn { background: rgba(255,255,255,0.09); color: #ffffff; border: none; }
.team-li-btn:hover { background: #2563EB !important; color: #ffffff !important; border-color: transparent !important; }
.wave-to-gray path { fill: #ffffff; }
.dark .wave-to-gray path { fill: #111111; }

/* ═══ SERVICE CARD ANIMATIONS ═══ */

/* 1. Hosting — Server Rack */
.svc-server { background:linear-gradient(180deg,#eff6ff,#dbeafe); width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.dark .svc-server { background:radial-gradient(ellipse at 50% 40%, #0f2744, #050d1a); }
.svc-server .rack { display:flex; flex-direction:column; gap:8px; width:175px; }
.svc-server .unit { height:28px; background:linear-gradient(90deg,#ffffff,#f0f7ff); border:1px solid #bfdbfe; border-radius:4px; display:flex; align-items:center; padding:0 10px; gap:7px; }
.dark .svc-server .unit { background:linear-gradient(90deg,#0a1628,#0f2040); border-color:#1a3a6b; }
.svc-server .stripe { width:3px; height:16px; border-radius:2px; background:#93c5fd; flex-shrink:0; }
.dark .svc-server .stripe { background:#1a3a6b; }
.svc-server .sbar { flex:1; height:4px; background:#bfdbfe; border-radius:2px; overflow:hidden; }
.dark .svc-server .sbar { background:#0a1628; }
.svc-server .sfill { height:100%; background:linear-gradient(90deg,#2563eb,#60a5fa); border-radius:2px; }
.svc-server .led { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; animation:ledP 2.5s ease-in-out infinite; flex-shrink:0; }
.svc-server .led2 { animation-delay:0.8s; }
.svc-server .led3 { animation-delay:1.6s; }
.svc-server .sfill:nth-child(1) { animation:sLoad 4s ease-in-out infinite 0s; }
.svc-server .u2 .sfill { animation:sLoad 4s ease-in-out infinite 1.3s; }
.svc-server .u3 .sfill { animation:sLoad 4s ease-in-out infinite 2.6s; }
.svc-server .uptime { position:absolute; bottom:14px; right:16px; font-size:9px; color:#16a34a; font-family:monospace; font-weight:700; letter-spacing:0.05em; animation:uFade 3s ease-in-out infinite; }
.dark .svc-server .uptime { color:#22c55e; }
@keyframes ledP { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes sLoad { 0%{width:20%} 45%{width:85%} 70%{width:68%} 100%{width:20%} }
@keyframes uFade { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* 2. Support — Live Chat */
.svc-chat { background:linear-gradient(160deg,#eff6ff,#f0f9ff); width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.dark .svc-chat { background:linear-gradient(160deg,#1e293b,#0f172a); }
.svc-chat .msgs { display:flex; flex-direction:column; gap:9px; width:210px; }
.svc-chat .bub { padding:8px 13px; border-radius:16px; font-size:10px; line-height:1.45; font-weight:500; max-width:148px; }
.svc-chat .bub.u { background:#dbeafe; color:#1e40af; border-bottom-left-radius:3px; animation:bIn 7s ease-in-out infinite 0s; }
.dark .svc-chat .bub.u { background:#1e3a5f; color:#93c5fd; }
.svc-chat .bub.a { background:#2563eb; color:#fff; border-bottom-right-radius:3px; align-self:flex-end; animation:bIn 7s ease-in-out infinite 2.5s; }
.svc-chat .typing { display:flex; gap:3px; align-items:center; padding:9px 13px; background:#e2e8f0; border-radius:16px; border-bottom-left-radius:3px; width:fit-content; animation:bIn 7s ease-in-out infinite 1.2s; }
.dark .svc-chat .typing { background:#334155; }
.svc-chat .typing span { width:5px; height:5px; border-radius:50%; background:#94a3b8; animation:tDot 1.2s ease-in-out infinite; }
.svc-chat .typing span:nth-child(2) { animation-delay:0.2s; }
.svc-chat .typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes tDot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
@keyframes bIn { 0%,8%{opacity:0;transform:translateY(8px)} 20%,80%{opacity:1;transform:none} 92%,100%{opacity:0;transform:translateY(-4px)} }

/* 3. Chatbot — AI */
.svc-bot { background:linear-gradient(135deg,#eff6ff,#f5f3ff); width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.dark .svc-bot { background:linear-gradient(135deg,#0f172a,#1e1b4b); }
.svc-bot .inner { display:flex; flex-direction:column; align-items:center; gap:14px; width:180px; }
.svc-bot .avatar { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#7c3aed); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.svc-bot .ring { position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(99,102,241,0.5); animation:rExp 2.5s ease-out infinite; }
.svc-bot .ring2 { animation-delay:1.25s; }
.svc-bot .cmsg { padding:7px 11px; border-radius:11px; font-size:9.5px; line-height:1.4; max-width:100%; }
.svc-bot .cu { background:rgba(37,99,235,0.1); color:#1e40af; align-self:flex-end; animation:mIn 6s ease-in-out infinite 0s; }
.dark .svc-bot .cu { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); }
.svc-bot .ca { background:linear-gradient(135deg,#1d4ed8,#2563eb); color:#fff; align-self:flex-start; overflow:hidden; animation:mIn 6s ease-in-out infinite 1.8s; }
.svc-bot .stream { display:inline-block; overflow:hidden; white-space:nowrap; width:0; animation:sTxt 6s ease-in-out infinite 1.8s; }
@keyframes rExp { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(2.4);opacity:0} }
@keyframes mIn { 0%,12%{opacity:0;transform:translateX(6px)} 25%,75%{opacity:1;transform:none} 88%,100%{opacity:0} }
@keyframes sTxt { 0%,28%{width:0} 70%,100%{width:100%} }

/* ── FAQ Section ── */
/* ── FAQ Section — Light ── */
.faq-section { background: #f0f4ff; }
.faq-watermark { color: rgba(0,0,0,0.035); }
.faq-aurora { display: none; }
.faq-item {
    background: #ffffff;
    border: 1px solid rgba(37,99,235,0.13);
    border-radius: 18px;
    position: relative; overflow: hidden;
    box-shadow: 0 2px 12px rgba(37,99,235,0.07), 0 1px 3px rgba(0,0,0,0.04);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.faq-item::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, #2563EB 0%, #0ea5e9 100%);
    opacity: 0; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1);
    border-radius: 18px 0 0 18px; /* exakt passend zu den Ecken des Cards */
}
.faq-item:hover {
    border-color: rgba(37,99,235,0.28);
    box-shadow: 0 8px 30px rgba(37,99,235,0.11), 0 2px 6px rgba(0,0,0,0.05);
}
/* ── Button: 3-Spalten-Grid für achsenreine Ausrichtung ── */
.faq-btn {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    padding: 28px 24px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: transparent;
    border: none;
    color: inherit;
}
.faq-num {
    font-variant-numeric: tabular-nums;
    color: rgba(37,99,235,0.50);
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    justify-self: start;
    align-self: center;
}
.faq-q-text {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    transition: color 0.3s;
}
.faq-chevron-wrap {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    justify-self: center; align-self: center;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,0.18);
    transition: background 0.3s, border-color 0.3s;
    flex-shrink: 0;
}
.faq-chevron-wrap svg { color: #2563EB; }
/* Separator: beginnt und endet bündig mit der Text-Spalte */
.faq-separator {
    height: 1px;
    background: rgba(37,99,235,0.10);
    margin-bottom: 20px; /* Abstand Linie → Antworttext */
}
.dark .faq-separator { background: rgba(255,255,255,0.07); }

/* Answer-Wrap: padding-left = btn-pad(24) + num-col(48) = 72px → bündig mit Fragentext */
.faq-answer-wrap {
    padding: 16px 24px 56px 72px;
}
.faq-answer-inner {
    color: #475569 !important;
    font-size: 0.9375rem !important;
    line-height: 1.875 !important;
}
.dark .faq-answer-inner { color: rgba(255,255,255,0.52) !important; }

/* ── FAQ Section — Dark ── */
.dark .faq-section { background: #0a0e1a; }
.dark .faq-watermark { color: rgba(255,255,255,0.018); }
.dark .faq-aurora { display: block; }
.dark .faq-item {
    background: rgba(255,255,255,0.030);
    border-color: rgba(255,255,255,0.078);
    box-shadow: none;
}
.dark .faq-item:hover {
    border-color: rgba(59,130,246,0.22);
    background: rgba(255,255,255,0.048);
    box-shadow: none;
}
.dark .faq-num { color: rgba(96,165,250,0.55); }
.dark .faq-q-text { color: rgba(255,255,255,0.80); }
.dark .faq-chevron-wrap {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.10);
}
.dark .faq-chevron-wrap svg { color: rgba(255,255,255,0.40); }
.dark .faq-cta-box {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.faq-watermark {
    position: absolute; bottom: -3rem; right: -1rem;
    font-size: clamp(6rem, 18vw, 15rem); font-weight: 900; line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none; user-select: none; z-index: 0;
}

/* ── Prozess / Timeline ── */
.prozess-section { background: #f0f4ff; }
.dark .prozess-section { background: #0a0e1a; }
.prozess-card {
    background: #ffffff;
    border: 1px solid #e0e7ff;
    border-left: 4px solid #2563eb;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(37,99,235,0.08), 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.dark .prozess-card {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.07);
    border-left-color: #2563eb;
    box-shadow: none;
}
.prozess-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(37,99,235,0.15); }
.dark .prozess-card:hover { box-shadow: 0 20px 50px rgba(37,99,235,0.13); }
.prozess-ghost { position:absolute; right:16px; top:-10px; font-size:4.5rem; font-weight:900; line-height:1; color:rgba(37,99,235,0.07); pointer-events:none; user-select:none; letter-spacing:-0.04em; }
.dark .prozess-ghost { color:rgba(96,165,250,0.10); }
.prozess-icon { width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg,#2563eb,#3b82f6); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(37,99,235,0.38); flex-shrink:0; }
.prozess-icon.green { background:linear-gradient(135deg,#16a34a,#22c55e); box-shadow:0 6px 20px rgba(22,163,74,0.35); }
.prozess-dot { width:16px; height:16px; border-radius:50%; background:#2563eb; border:3px solid #f0f4ff; box-shadow:0 0 0 3px rgba(37,99,235,0.28); flex-shrink:0; position:relative; z-index:2; }
.dark .prozess-dot { border-color:#0a0e1a; }
.prozess-duration { display:inline-flex; align-items:center; gap:5px; background:rgba(37,99,235,0.08); color:#2563eb; border:1px solid rgba(37,99,235,0.18); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; }
.dark .prozess-duration { background:rgba(37,99,235,0.15); color:#93c5fd; border-color:rgba(37,99,235,0.28); }
.prozess-duration.green { background:rgba(22,163,74,0.09); color:#16a34a; border-color:rgba(22,163,74,0.22); }
.dark .prozess-duration.green { background:rgba(34,197,94,0.12); color:#4ade80; border-color:rgba(34,197,94,0.25); }

/* Floating Labels */
.float-wrap { position: relative; }
.float-input { padding-top: 1.5rem; padding-bottom: 0.625rem; }
/* iOS Safari zoomt beim Fokussieren automatisch rein, wenn ein Feld unter
   16px Schriftgroesse hat — explizit absichern, unabhaengig vom
   Browser-Standard. */
#contact-form input, #contact-form select, #contact-form textarea { font-size: 16px; }
.float-input::placeholder { color: transparent; }
.float-label { position: absolute; left: 1rem; top: 0.9rem; font-size: 0.875rem; color: #9ca3af; transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease; pointer-events: none; white-space: nowrap; }
.float-input:focus ~ .float-label,
.float-input:not(:placeholder-shown) ~ .float-label { top: 0.35rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; }
.float-input:focus ~ .float-label { color: #2563EB; }
.float-input:not(:placeholder-shown) ~ .float-label { color: #6b7280; }
.dark .float-input:not(:placeholder-shown) ~ .float-label { color: #9ca3af; }

/* Focus glow on inputs */
.float-input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    background: #fff !important;
}
.dark .float-input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
    background: #1f2937 !important;
}

/* ── Inline-Feldvalidierung (Name/Telefon/E-Mail) ── */
.float-input.field-invalid { border-color: #dc2626 !important; }
.float-input.field-invalid:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.12) !important; }
.float-input.field-valid { border-color: #16a34a !important; }
.float-input.field-valid:focus { box-shadow: 0 0 0 4px rgba(22,163,74,0.12) !important; }
.field-error {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: #dc2626;
    font-weight: 600;
}
.field-error.show { display: block; }
.dark .field-error { color: #f87171; }

/* Sharper float-label transition */
.float-label {
    transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Before/After Slider (Feature 6) ── */
.ba-section { background: #ffffff; }
.dark .ba-section { background: #111111; }
.ba-container { position: relative; width: 100%; overflow: hidden; border-radius: 14px; cursor: ew-resize; box-shadow: 0 20px 60px rgba(0,0,0,0.18); aspect-ratio: 16/7; }
/* 16:7 macht auf schmalen Handys einen sehr flachen, gedrungenen Streifen
   (bei 380px Breite nur ~166px hoch) — auf dem Handy mehr Hoehe, damit man
   Vorher/Nachher-Details ueberhaupt erkennen kann. */
@media (max-width: 639px) { .ba-container { aspect-ratio: 4/3; } }
/* Etwas ueber den normalen Seitenrand hinaus "bluten" lassen — der Regler
   braucht auf dem Handy jeden Millimeter Breite, den er kriegen kann. */
@media (max-width: 639px) {
    .ba-container { margin-left: -8px; margin-right: -8px; width: calc(100% + 16px); }
}
/* Mockup-im-Mockup (Chat-Widget in der Ecke): der volle Gespraechsverlauf
   ist selbst mit clamp() noch zu eng gedraengt fuers Handy. Auf dem
   Handy bleibt nur der Kopf stehen (Avatar + "VeynoBot" + "Online") —
   das ist die eigentliche Aussage der Sektion (hier laeuft ein Chatbot),
   ohne die Detaildichte des ganzen Gespraechs. Etwas groesser, damit er
   allein stehend auch traegt. */
@media (max-width: 639px) {
    .ba-widget-messages, .ba-widget-input { display: none; }
    .ba-widget-header { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; }
    .ba-widget-header > div:first-child { width: 26px !important; height: 26px !important; }
    .ba-widget-header svg { width: 13px !important; height: 13px !important; }
}
/* Der "psst, geheimes Geschenk"-Kai ist Teil des Ueberraschungsmoments
   beim ganz nach links Ziehen — auf dem schmalen Handy-Layout ueberlappt
   er aber direkt den zentrierten Text/Buttons der Nachher-Haelfte statt
   dezent daneben zu stehen. Auf dem Handy lieber ganz weg als kaputt. */
@media (max-width: 639px) { .ba-kai { display: none; } }
/* Beim Ziehen darf nichts markiert werden, sonst faerbt sich der halbe
   Kasten blau. Praefixe fuer Safari, iOS und aeltere Firefox. */
/* pan-y: senkrechtes Wischen scrollt die Seite wie gewohnt, waagerechtes
   Ziehen gehoert dem Regler. Ohne das muesste JS das Scrollen abwuergen. */
.ba-container { touch-action: pan-y; }
.ba-container, .ba-container * {
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}
.ba-container img, .ba-container svg { -webkit-user-drag: none; }
.dark .ba-container { box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.ba-before, .ba-after { position: absolute; inset: 0; overflow: hidden; }
.ba-after { clip-path: inset(0 50% 0 0); }
.ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); z-index: 10; box-shadow: 0 0 12px rgba(0,0,0,0.3); pointer-events: none; }
.ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 11; }
.ba-label { position: absolute; top: 14px; padding: 4px 12px; border-radius: 2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; z-index: 12; }
.ba-label-before { left: 14px; background: rgba(0,0,0,0.55); color: #fff; }
.ba-label-after { right: 14px; background: rgba(37,99,235,0.85); color: #fff; }
/* Verstecktes Geschenk: nur sichtbar, wenn der Regler ganz links steht */
.ba-gift {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 13; cursor: pointer; border: 0;
    padding: 0.7rem 1.4rem; border-radius: 2rem;
    background: #2563eb; color: #fff;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em;
    box-shadow: 0 8px 28px rgba(37,99,235,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ba-gift[hidden] { display: none; }
.ba-gift.is-visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-4px); }
.ba-gift:hover { background: #1d4ed8; }
.ba-gift:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ba-gift { transition: none; } }

/* ── PageSpeed Gauges (Feature 10) ── */
.speed-section { background: #f0f4ff; }
.dark .speed-section { background: #0a0e1a; }
.speed-ring-bg { fill: none; stroke: rgba(37,99,235,0.10); }
.dark .speed-ring-bg { stroke: rgba(255,255,255,0.07); }
.speed-ring-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(0.16,1,0.3,1); }
.speed-score-text { font-family: ui-monospace,'SF Mono',monospace; font-weight: 800; fill: #1e293b; }
.dark .speed-score-text { fill: #f1f5f9; }

/* ── ROI Rechner ── */
/* Hintergrund wird von updateRoiFill() (js/main.js) als Verlauf gesetzt,
   damit die Spur links vom Punkt farbig "gefuellt" aussieht statt komplett
   grau — --roi-track-bg ist nur der ungefuellte Rest davon. */
.roi-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px; --roi-track-bg: #e5e7eb; outline: none; cursor: pointer; }
.dark .roi-input { --roi-track-bg: #374151; }
.roi-input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #2563EB; cursor: pointer; box-shadow: 0 0 8px rgba(37,99,235,0.45); }
.roi-input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #2563EB; cursor: pointer; box-shadow: 0 0 8px rgba(37,99,235,0.45); border: none; }
.roi-result-card { background: rgba(37,99,235,0.06); border: 1.5px solid rgba(37,99,235,0.18); border-radius: 1rem; padding: 1.25rem; text-align: center; transition: all 0.3s; }
.dark .roi-result-card { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.28); }


/* ══ Magnetic Button (Feature C) ══ */
.btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    display: inline-flex;
}

/* ══ Konfetti (Feature I) ══ */
.confetti-piece {
    position: fixed;
    width: 10px; height: 10px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 99999;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ══ Stat Counter (Feature A) ══ */
.stat-value { display: inline-block; }

/* ══ Process Step expand (Feature G) ══ */
.prozess-card.active {
    border-color: rgba(37,99,235,0.5) !important;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.2), 0 20px 50px rgba(37,99,235,0.15) !important;
}
.prozess-extra {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
}
.prozess-card.active .prozess-extra {
    max-height: 120px;
    opacity: 1;
}

/* ── Hero light mode + 10: Grain Texture ── */
.hero-bg { background: #030712; overflow: hidden; }
html:not(.dark) .hero-bg { background: #f0f6ff; }
/* SVG-basiertes Grain — kein externer Request, keine CLS */
.hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 220px;
    opacity: 0.040;
    pointer-events: none;
    z-index: 1;
}
html:not(.dark) .hero-bg::after { opacity: 0.018; }
html:not(.dark) .hero-grid-lines { background-image: linear-gradient(rgba(15,23,42,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,0.05) 1px,transparent 1px); background-size:70px 70px; }
html:not(.dark) #hero-canvas { opacity: 0.15 !important; }
html:not(.dark) .hero-vignette { background: radial-gradient(ellipse 95% 85% at 50% 42%,transparent 40%,rgba(240,246,255,0.65) 100%) !important; }
html:not(.dark) .hero-inner { color: #0f172a; }
html:not(.dark) .hero-inner h1 { color: #0f172a !important; text-shadow: none !important; }
html:not(.dark) .hero-inner p { color: rgba(15,23,42,0.72) !important; text-shadow: none !important; }
html:not(.dark) .hero-inner .hero-trust { color: #1e293b !important; }
html:not(.dark) .hero-inner .hero-trust svg { stroke: #2563eb !important; }
html:not(.dark) .hero-inner a:not(.btn) { color: rgba(15,23,42,0.6) !important; }
html:not(.dark) .hero-inner a:not(.btn):hover { color: #0f172a !important; }

/* ── Team-Foto (Unsere Arbeit) ── */
.work-team { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; }
.work-team-photo {
    width: 100%; aspect-ratio: 3/4;
    border-radius: 20px;
    background: linear-gradient(135deg, #cbd5e1, #e2e8f0);
    border: 2px solid rgba(15,23,42,0.08);
    box-shadow: 0 12px 34px rgba(15,23,42,0.14);
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; overflow: hidden;
}
.dark .work-team-photo { background: linear-gradient(135deg, #334155, #1e293b); border-color: rgba(255,255,255,0.08); color: #64748b; }
.work-team-names { text-align: center; display: flex; flex-direction: column; gap: 0.35rem; }
.work-team-name { font-weight: 700; font-size: 0.9rem; color: #1e293b; line-height: 1.5; }
.dark .work-team-name { color: #e2e8f0; }

/* ── Hero Chat Input (interaktiv) ── */
#hero-chat-input-field {
    background: transparent; border: none; outline: none;
    color: rgba(255,255,255,0.88); font-size: 0.78rem;
    flex: 1; min-width: 0; font-family: inherit; line-height: 1.4;
}
@media (max-width: 1023px) {
    /* min. 16px verhindert Auto-Zoom bei Fokus in iOS Safari — das Feld
       bleibt unter 1024px sichtbar (nur die Kai-Illustration wird ausgeblendet) */
    #hero-chat-input-field { font-size: 16px; }
}
#hero-chat-input-field::placeholder { color: rgba(255,255,255,0.32); }
#hero-chat-input-field:disabled { opacity: 0.45; cursor: not-allowed; }
#hero-chat-send-btn { transition: background 0.2s, opacity 0.2s; }
#hero-chat-send-btn:hover:not(:disabled) { background: #1d4ed8 !important; }
#hero-chat-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Hero Chat light mode ── */
/* Heller Modus: Grundton ist der helle Seitenhintergrund #f0f6ff,
   der Farbverlauf darf dort etwas kraeftiger sein, um sichtbar zu bleiben. */
html:not(.dark) .hero-chat-fog {
    background:
        radial-gradient(ellipse 62% 54% at 78% 62%,
            rgba(37,99,235,0.32) 0%,
            rgba(16,185,129,0.20) 46%,
            rgba(37,99,235,0.00) 80%),
        radial-gradient(ellipse 66% 56% at 78% 62%,
            #f0f6ff 0%,
            rgba(240,246,255,0.95) 32%,
            rgba(240,246,255,0.64) 54%,
            rgba(240,246,255,0.22) 72%,
            rgba(240,246,255,0.00) 88%);
}
html:not(.dark) .hero-chat-fog-back {
    background:
        radial-gradient(ellipse 54% 54% at 34% 62%,
            rgba(37,99,235,0.32) 0%,
            rgba(16,185,129,0.20) 46%,
            rgba(37,99,235,0.00) 80%),
        radial-gradient(ellipse 58% 56% at 34% 62%,
            #f0f6ff 0%,
            rgba(240,246,255,0.95) 30%,
            rgba(240,246,255,0.66) 52%,
            rgba(240,246,255,0.24) 70%,
            rgba(240,246,255,0.00) 84%);
}

html:not(.dark) .hero-chat-tag { color: rgba(30,41,59,0.48); }
html:not(.dark) .hero-chat { background: transparent; border-color: transparent; }
html:not(.dark) .hero-chat::before {
    background: rgba(248,250,255,0.97);
    border-color: rgba(37,99,235,0.15);
    box-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 0 40px rgba(37,99,235,0.08);
}
html:not(.dark) .hero-chat::after {
    background: rgba(248,250,255,0.97);
    border-color: rgba(37,99,235,0.15);
}
html:not(.dark) .hero-chat-header-sep { border-bottom-color: rgba(15,23,42,0.08) !important; }
html:not(.dark) .hero-chat-title { color: #1e293b !important; }
html:not(.dark) .hero-chat-msg {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    color: #1e293b;
    box-shadow: 0 1px 5px rgba(0,0,0,0.06);
}
html:not(.dark) .hero-chat-msg p { color: #1e293b; }
html:not(.dark) .hero-chat-msg-user { background: #2563eb !important; border-color: transparent !important; box-shadow: none !important; }
html:not(.dark) .hero-chat-msg-user p { color: #fff !important; }
html:not(.dark) .hero-chat-input { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.12); }
html:not(.dark) #hero-chat-input-field { color: #1e293b; }
html:not(.dark) #hero-chat-input-field::placeholder { color: rgba(15,23,42,0.35); }
html:not(.dark) .chat-typing-dots span { background: #2563eb; }
html:not(.dark) .hero-select-btn {
    border-color: rgba(37,99,235,0.22);
    box-shadow: 0 8px 24px rgba(15,23,42,0.14);
}


/* ── Live Chat Typing Indicator ── */
.chat-typing-dots { display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
.chat-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(147,197,253,0.8); animation: chatDot 1.2s ease-in-out infinite; display: block; }
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.chat-msg-anim { animation: chatMsgIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Der abgeschlossene Austausch (Frage+Antwort) blendet weich aus, bevor
   die naechste Frage reinkommt — vorher verschwand er hart (display:none),
   das wirkte abgehackt. */
.chat-msg-out { animation: chatMsgOut 0.2s cubic-bezier(0.4,0,1,1) forwards; }
@keyframes chatMsgOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    .chat-msg-anim, .chat-msg-out { animation: none !important; }
}
.hero-chat-msg-user { border-radius: 16px 16px 4px 16px !important; background: rgba(37,99,235,0.82) !important; border-color: transparent !important; color: #fff !important; }
.hero-chat-log { overflow-y: auto; scroll-behavior: smooth; }

/* ══ Newsletter-Pop-up ══════════════════════════════════════════════ */
.nl-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    /* dvh statt vh: auf Mobil schrumpft die Sichtflaeche, wenn die
       Tastatur aufklappt. Mit vh waere der Kasten dann abgeschnitten. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Passt der Kasten nicht, wird gescrollt statt abgeschnitten.
       KEINE grosse Polsterung oben mehr: die hat den Kasten nach unten
       gedrueckt. Die Figur haengt absolut am Kasten, steht ausserhalb
       des Flusses und wird deshalb nicht mitzentriert. Sie darf frei
       nach oben herausragen.
       Die groessere untere Polsterung setzt den Kasten etwas hoeher als
       die exakte Mitte. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* top-padding ≥ Kai-Figur-Überstand (~176px) + Puffer, damit der Kopf nie abgeschnitten wird */
    padding: 200px 24px 88px;
    background: rgba(9, 16, 32, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.nl-overlay[hidden] { display: none; }
.nl-overlay.is-open .nl-box { animation: nlIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes nlIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nl-overlay.is-open .nl-box { animation: none; }
}

.nl-box {
    position: relative;
    width: 100%;
    max-width: 510px;
    /* Die Figur ragt oben heraus, deshalb sichtbarer Ueberlauf und
       Platz nach oben fuer Kopf und greifende Haende. */
    overflow: visible;
    /* margin-block: auto zentriert im uebrigen Raum und faellt auf 0
       zurueck, sobald es eng wird — dann bleibt alles erreichbar. */
    margin-block: auto;
    flex-shrink: 0;
    padding: 38px 38px 34px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
}
html.dark .nl-box {
    background: #0f172a;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Kai greift ueber die OBERE Kante: Hand davor, Koerper dahinter.
   Der transparente Bildhintergrund laesst den abgedunkelten Seiten-
   hintergrund durch, es entsteht kein weisser Kasten. */
/* Kai lehnt sich ueber die Oberkante des Kastens.
   Datei auf den Inhalt zugeschnitten: 514x393, Verhaeltnis 1,308.
   Der Saum des T-Shirts liegt bei y=315, also 80,15% von oben. Damit
   der Saum GENAU auf der Kastenkante aufliegt, muss die Bildunterkante
   19,85% der Hoehe darunter sitzen. Die greifenden Haende haengen
   dadurch sichtbar vor der Kastenkante, der zeigende Finger weist in
   den Kasten hinein.
   Nur die Hoehe wird gesetzt, die Breite folgt dem Seitenverhaeltnis. */
.nl-figure {
    --nl-kai-h: 220px;
    position: absolute;
    height: var(--nl-kai-h);
    width: auto;
    max-width: none;
    object-fit: contain;
    right: 40px;
    bottom: calc(100% - var(--nl-kai-h) * 0.1985);
    top: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.38));
}

.nl-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;              /* ueber der Figur, bleibt klickbar */
    /* Trefferflaeche 44x44, sichtbarer Kreis bleibt 34px:
       der Knopf ist 44px gross, der Hintergrund wird per
       background-clip auf die inneren 34px begrenzt. */
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 5px solid transparent;
    background-clip: padding-box;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.nl-close:hover { background: rgba(15, 23, 42, 0.12); color: #0f172a; }
html.dark .nl-close { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }
html.dark .nl-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.nl-title {
    margin: 0 0 10px;        /* Figur sitzt ueber dem Kasten, kein Freiraum noetig */
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1.28;
    color: #0f172a;
}
html.dark .nl-title { color: #f1f5f9; }

.nl-desc {
    margin: 0 0 20px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #64748b;
}
html.dark .nl-desc { color: #94a3b8; }

.nl-form { display: flex; flex-direction: column; gap: 12px; }
.nl-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
}
html.dark .nl-label { color: #cbd5e1; }

.nl-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px; /* min. 16px verhindert Auto-Zoom bei Fokus in iOS Safari */
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: #fff;
    color: #0f172a;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
html.dark .nl-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f1f5f9;
}

.nl-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #475569;
    cursor: pointer;
    /* Trefferflaeche mindestens 44px hoch */
    min-height: 44px;
    padding: 6px 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
html.dark .nl-check { color: #94a3b8; }
/* Trefferflaeche: das Label selbst ist die Flaeche, nicht das Kaestchen.
   Polsterung auf input[type=checkbox] ignorieren Chrome und Safari,
   deshalb bekommt das Label min-height 44px. Ein Klick irgendwo darauf
   schaltet das Haekchen. */
.nl-check input {
    margin-top: 2px;
    width: 18px; height: 18px;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.nl-check a { color: #2563eb; text-decoration: underline; }

.nl-submit {
    margin-top: 4px;
    padding: 13px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: #2563eb;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.nl-submit:hover:not(:disabled) { background: #1d4ed8; }
.nl-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* Schimmer: heller Streifen zieht alle paar Sekunden einmal ueber den
   Knopf. Nur transform wird animiert, die lange Pause steckt im
   Keyframe-Verlauf. */
.nl-submit { position: relative; overflow: hidden; }
.nl-submit::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.32) 50%,
        rgba(255,255,255,0) 100%);
    transform: translateX(0);
    animation: nlSchimmer 5.5s ease-in-out infinite;
}
.nl-submit:disabled::after { animation: none; opacity: 0; }
@keyframes nlSchimmer {
    0%   { transform: translateX(0); }
    22%  { transform: translateX(360%); }
    100% { transform: translateX(360%); }   /* Pause bis zum naechsten Durchlauf */
}
@media (prefers-reduced-motion: reduce) {
    .nl-submit::after { animation: none; opacity: 0; }
}

/* ── Konfetti beim erfolgreichen Absenden ── */
.nl-konfetti {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    width: 7px;
    height: 10px;
    border-radius: 1px;
    will-change: transform, opacity;
}

.nl-msg { margin: 4px 0 0; font-size: 0.86rem; line-height: 1.5; min-height: 1em; }
.nl-msg.is-ok  { color: #059669; }
.nl-msg.is-err { color: #dc2626; }

/* Schmale Bildschirme: Figur kleiner, nicht ausgeblendet. */
@media (max-width: 640px) {
    /* Rand an beiden Seiten, der Kasten wird nie breiter als der Schirm. */
    .nl-overlay { padding: 128px 16px 64px; }
    .nl-box { padding: 26px 20px 24px; border-radius: 20px; }
    /* Figur kleiner skalieren, nicht ausblenden. Der Versatz bleibt
       6% der Hoehe, damit die Haende weiter aufliegen.
       Sie sitzt ueber dem Kasten und deckt daher weder die Ueberschrift
       noch den Schliessen-Knopf ab. */
    .nl-figure { --nl-kai-h: 140px; right: 12px; }
    .nl-title { font-size: 1.1rem; }
    .nl-desc { font-size: 0.88rem; }
    /* Weichzeichnen des Hintergrunds ist auf schwachen Geraeten teuer
       und kann zusammen mit dem Konfetti ruckeln. */
    .nl-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9, 16, 32, 0.68); }
}
/* Sehr niedrige Schirme, etwa Querformat mit Tastatur */
@media (max-height: 560px) {
    .nl-overlay { padding-top: 12px; padding-bottom: 40px; }
    .nl-figure { --nl-kai-h: 112px; }
}

/* Countdown: schlichter Text, kein Feld, kein Rahmen.
   Tabellenziffern, damit beim Sekundenwechsel nichts springt. */
.nl-countdown {
    display: block;
    margin: -4px 0 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.nl-countdown:empty { display: none; }
html.dark .nl-countdown { color: #60a5fa; }

/* Kai im Vorher-Nachher-Regler.
   Datei auf den Inhalt zugeschnitten (1010x1498, 0,6742:1) — die
   Raender von 14px links und 38px oben sind weg, Bildkante und
   sichtbare Kante fallen also zusammen.
   bottom: 0 setzt die Knie exakt auf die Rahmenunterkante.
   Nur die Hoehe wird gesetzt, die Breite folgt dem Seitenverhaeltnis.
   Er sitzt rechts der Mitte in der Nachher-Haelfte, im freien Raum
   neben Abzeichen, Ueberschrift und Knoepfen. Trennlinie (z-index 10)
   und Griff (11) liegen immer davor. */
.ba-kai {
    position: absolute;
    left: 66%;
    bottom: 0;
    height: 65%;
    width: auto;
    max-width: none;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Unsere Arbeit: Solo-Layout (ohne Team-Box) ── */
.work-grid-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.work-carousel-solo {
  width: 100%;
  max-width: 720px;
  position: relative;
  z-index: 1;
  perspective: 1200px;
}

/* ═══════════════════════════════════════════════════════════════
   PODCAST-SEKTION — bewusst kein Karten-Look (kein Rahmen, kein
   Schatten-Block, keine bunten Punkt-Badges): grosse Typografie,
   ein vollflaechiger, unscharfer Cover-Bleed als Hintergrund, ein
   einzelner Text-Link statt gefuelltem Button. Scrim-Farben ueber
   CSS-Variablen, damit Light/Dark beide "stimmig" aussehen statt nur
   eine Variante durchdacht zu haben.
   ═══════════════════════════════════════════════════════════════ */
.podcast-section {
    --podcast-scrim-1: rgba(248,250,252,0.72);
    --podcast-scrim-2: rgba(248,250,252,0.96);
    --podcast-bg-opacity: 0.45;
    background: #f8fafc;
}
.dark .podcast-section {
    --podcast-scrim-1: rgba(8,8,12,0.68);
    --podcast-scrim-2: rgba(8,8,12,0.95);
    --podcast-bg-opacity: 0.32;
    background: #08080c;
}
.podcast-bg {
    position: absolute; inset: -10%;
    z-index: 0;
    background-size: cover;
    background-position: center 35%;
    filter: blur(60px) saturate(1.35);
    opacity: var(--podcast-bg-opacity);
}
.podcast-scrim {
    position: absolute; inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--podcast-scrim-1) 0%, var(--podcast-scrim-2) 65%, var(--podcast-scrim-1) 100%);
}
.podcast-container { position: relative; z-index: 2; }

.podcast-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}
@media (min-width: 900px) {
    .podcast-layout { flex-direction: row; align-items: center; text-align: left; gap: 4.5rem; }
}

/* Cover leicht schraeg, wie hingelegt statt in eine Box gezwaengt — ein
   Hauch Asymmetrie statt starrem Karten-Raster. */
.podcast-cover-wrap {
    position: relative;
    width: 220px;
    flex-shrink: 0;
    transform: rotate(-3deg);
    filter: drop-shadow(0 25px 45px rgba(0,0,0,0.35));
}
.podcast-cover-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }

.podcast-play-badge {
    position: absolute;
    right: -10px; bottom: -10px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, background 0.2s ease;
}
.podcast-play-badge svg { margin-left: 2px; }
.podcast-play-badge:hover { background: #1D4ED8; transform: scale(1.08); }
.podcast-play-badge:active { transform: scale(0.93); }
.podcast-play-badge::before {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37,99,235,0.55);
    animation: podcastRing 2.2s ease-out infinite;
}
@keyframes podcastRing {
    0%   { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

.podcast-copy { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
@media (min-width: 900px) { .podcast-copy { align-items: flex-start; } }

/* "Kassetten-Label" statt bunter Punkt-Badges: Monospace, gesperrt,
   gestrichelte Unterlinie — wirkt kuratiert/analog statt wie ein
   generiertes UI-Bauteil. */
.podcast-tape {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b7280;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed currentColor;
}
.dark .podcast-tape { color: #9ca3af; }

.podcast-headline {
    font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.12;
    color: #111827;
    margin: 0;
}
.dark .podcast-headline { color: #fff; }

.podcast-quote {
    font-size: 1rem;
    line-height: 1.65;
    color: #4b5563;
    max-width: 34rem;
    margin: 0;
}
.dark .podcast-quote { color: #cbd5e1; }

/* Ein Text-Link mit Pfeil statt gefuellter Button-Pille. */
.podcast-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 1rem;
    color: #2563EB;
    padding-bottom: 3px;
    border-bottom: 2px solid #2563EB;
    margin-top: 0.4rem;
    transition: gap 0.2s ease;
}
.dark .podcast-cta { color: #60A5FA; border-color: #60A5FA; }
.podcast-cta:hover { gap: 14px; }
.podcast-cta:active { opacity: 0.75; }

/* Plattform-Links: schlichte Textliste mit Trennstrichen statt bunter
   Pillen mit Farbpunkten. */
.podcast-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 0.5rem; font-size: 0.85rem; }
@media (min-width: 900px) { .podcast-links { justify-content: flex-start; } }
.podcast-platform-badge {
    color: #6b7280;
    font-weight: 600;
    padding: 0.2rem 0.7rem;
    border-right: 1px solid currentColor;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.podcast-links a:first-child { padding-left: 0; }
.podcast-links a:last-child { border-right: none; }
.dark .podcast-platform-badge { color: #9ca3af; }
.podcast-platform-badge:hover { opacity: 1; color: #2563EB; }
.dark .podcast-platform-badge:hover { color: #60A5FA; }
.podcast-platform-badge:active { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
    .podcast-play-badge::before { animation: none !important; opacity: 0 !important; }
    .podcast-play-badge, .podcast-cta, .podcast-platform-badge { transition: none !important; }
}

/* ── Partner Logo dark/light mode switching ── */
.partner-logo-light { display: block; }
.partner-logo-dark  { display: none; }
.dark .partner-logo-light { display: none; }
.dark .partner-logo-dark  { display: block; }

/* ── Hero Dissolve on Scroll ── */
.hero-inner {
    will-change: opacity, transform;
}

/* ── Clip-Path Word Reveal ── */
.word-reveal-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.word-reveal {
    display: inline-block;
    clip-path: inset(0 0 100% 0);
    transform: translateY(100%);
    transition:
        clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform  0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.word-reveal.revealed {
    clip-path: inset(0 0 0% 0);
    transform: translateY(0);
}
.word-reveal-wrap + .word-reveal-wrap { margin-left: 0.25em; }

/* ── Image Blur Reveal ── */
.img-reveal {
    filter: blur(16px);
    transform: scale(1.04);
    opacity: 0;
    transition:
        filter  0.7s ease-out,
        transform 0.7s ease-out,
        opacity 0.7s ease-out;
    will-change: filter, transform, opacity;
}
.img-reveal.revealed {
    filter: blur(0px);
    transform: scale(1);
    opacity: 1;
}

/* ── Section Exit Fade ── */
.section-fadeable {
    will-change: opacity, transform;
}

/* ── Grain / Noise Texture ── */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.038;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
}
#problem::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: multiply;
}
.dark #problem::before { mix-blend-mode: screen; opacity: 0.05; }

/* ── Card Glow Variante: Problem-Section (rötlicher Ton) ── */
#problem .card-glow::before {
    background: radial-gradient(
        340px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(239,68,68,0.07),
        transparent 65%
    ) !important;
}
.dark #problem .card-glow::before {
    background: radial-gradient(
        340px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(239,68,68,0.11),
        transparent 65%
    ) !important;
}

/* ── Prozess: scroll-driven Füllbalken ── */
#prozess-line-fill {
    position: absolute;
    left: 27px;
    top: 8px;
    width: 2px;
    height: calc(100% - 16px);
    background: linear-gradient(180deg, #2563EB 0%, #60A5FA 100%);
    transform-origin: top;
    transform: scaleY(0);
    will-change: transform;
    z-index: 1;
    pointer-events: none;
    display: none;
}
@media (min-width: 768px) { #prozess-line-fill { display: block; } }

.prozess-step-active > .prozess-card {
    border-color: rgba(37,99,235,0.28) !important;
    box-shadow: 0 0 0 1px rgba(37,99,235,0.12) !important;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ── Reduced Motion — alle Animationen sofort ── */
@media (prefers-reduced-motion: reduce) {
    /* Lenis — wird in initLenis() auf lerp: 1 gesetzt (kein CSS nötig) */

    /* Word Reveal — sofort sichtbar */
    .word-reveal {
        clip-path: inset(0 0 0% 0) !important;
        transform: translateY(0) !important;
        transition: none !important;
    }

    /* Image Blur Reveal — sofort scharf */
    .img-reveal {
        filter: blur(0px) !important;
        transform: scale(1) !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* Hero-Textspalte — kein Dissolve */
    #hero-text-col {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Hero-Chat-Eintritt + CTA-Puls — komplett aus */
    .hero-chat-intro { animation: none !important; opacity: 1 !important; transform: none !important; }
    #hero-cta.hero-cta-pulse-once { animation: none !important; }

    /* Hero-Hintergrund-Parallax — komplett aus */
    .hero-grid-lines { transform: none !important; }

    /* Galerie-Tilt — kein kinetischer Effekt */
    .work-frame { transform: none !important; }

    /* Formular-Shake — komplett aus */
    .form-shake { animation: none !important; }

    /* Section Exit Fade — kein Dimmen */
    .section-fadeable {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Bestehende .anim-Klassen */
    .anim, .anim-left, .anim-right, .anim-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Navbar */
    #nav-pill {
        transition: none !important;
    }
    #navbar { --nav-depth: 0 !important; }

    /* Multi-step form */
    .form-step.active { animation: none; }
    .step-dot { transition: none; }
}

/* ── Multi-Step Form ── */
.form-step { display: none; }
.form-step.active {
    display: block;
    animation: stepFadeIn 0.28s cubic-bezier(0.16,1,0.3,1);
}
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes formShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.form-shake { animation: formShake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

/* Step indicator (numbered) */
.step-indicator { gap: 0; }
.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-num {
    width: 28px; height: 28px;
    border-radius: 9999px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s, color 0.25s;
    flex-shrink: 0;
}
.dark .step-num { background: #374151; color: #9ca3af; }
.step-label-txt {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    transition: color 0.25s;
}
.dark .step-label-txt { color: #6b7280; }
.step-connector {
    flex: 1;
    min-width: 32px;
    height: 1px;
    background: #e5e7eb;
    margin: 0 8px;
    transition: background 0.25s;
}
.dark .step-connector { background: #374151; }

/* Active state — toggled by initMultiStepForm via .dot-active */
.step-dot.dot-active .step-num {
    background: #2563eb;
    color: #fff;
}
.step-dot.dot-active .step-label-txt { color: #2563eb; }
.dark .step-dot.dot-active .step-label-txt { color: #60a5fa; }
.dark .step-dot.dot-active .step-num { background: #3b82f6; }

/* ── Kontakt: Dot-Grid Hintergrundtextur ── */
.kontakt-dot-grid {
    background-image: radial-gradient(circle, rgba(37,99,235,0.13) 1px, transparent 1px);
    background-size: 28px 28px;
}
.dark .kontakt-dot-grid {
    background-image: radial-gradient(circle, rgba(96,165,250,0.07) 1px, transparent 1px);
}

/* ── Kontakt: Info Panel (linke Seite) ── */
.kontakt-info-panel {
    position: relative;
}

/* ── Kontakt: Floating Paper Card (rechte Seite) ── */
.kontakt-floating-card {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 4.5rem 3rem 2.5rem;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.04),
        0 6px 20px rgba(0,0,0,0.08),
        0 28px 56px rgba(0,0,0,0.12),
        0 70px 120px rgba(37,99,235,0.07);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}
/* Glossy top-edge shimmer */
.kontakt-floating-card::before {
    content: '';
    position: absolute;
    top: 0; left: 2rem; right: 2rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 50%, transparent);
    pointer-events: none;
}
/* Inner top-highlight (paper feel) */
.kontakt-floating-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    pointer-events: none;
}
.dark .kontakt-floating-card {
    background: #1a2035;
    border-color: rgba(255,255,255,0.06);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.35),
        0 6px 20px rgba(0,0,0,0.45),
        0 28px 56px rgba(0,0,0,0.55),
        0 70px 120px rgba(37,99,235,0.13);
}
.dark .kontakt-floating-card::after {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.kontakt-floating-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 1px 3px rgba(0,0,0,0.04),
        0 8px 26px rgba(0,0,0,0.10),
        0 38px 70px rgba(0,0,0,0.14),
        0 90px 140px rgba(37,99,235,0.09);
}
@media (max-width: 1023px) {
    .kontakt-floating-card {
        transform: none;
        padding: 4rem 1.5rem 2rem;
        border-radius: 20px;
    }
    .kontakt-floating-card:hover { transform: translateY(-3px); }
    .mascot-desktop {
        display: block;
        height: 130px;
        max-width: 130px;
        margin-bottom: -28px;
    }
}

/* ── Maskottchen ── */
@keyframes mascot-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

.mascot {
    pointer-events: none;
    animation: mascot-float 3s ease-in-out infinite;
    position: absolute;
    z-index: 30;
    will-change: transform;
}

/* Desktop: Kai lugt über Kartenkante — Hände sitzen auf dem Rand */
.mascot-desktop {
    display: none;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 auto -41px; /* 41px → Hände sitzen fest auf dem Kartenrand */
    height: 200px;
    width: auto;
    max-width: 200px;
}

/* Mobile: ausgeblendet */
.mascot-mobile {
    display: none;
}

/* Kai in der Kontakt-Karte: keine Animation */
.kontakt-floating-card .mascot {
    animation: none;
}

@media (min-width: 1024px) {
    .mascot-desktop { display: block; }
    .mascot-mobile  { display: none; }
}

@media (max-width: 1023px) {
    .mascot-mobile { display: block; }
}

/* ── Submit Button Shimmer ── */
.btn-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.18) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.55s ease;
}
.btn-submit:hover::after  { transform: translateX(100%); }
.btn-glow.btn-submit:hover { transform: translateY(-1px) scale(1.01) !important; }
.btn-submit:active        { transform: translateY(0) scale(0.99); }

/* ══ Sticky-CTA-Leiste (mobil): erscheint, wenn der Hero-CTA aus dem Sichtfeld scrollt ══ */
.sticky-cta {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 8000;
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.sticky-cta.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.sticky-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 1.25rem;
    background: #2563EB;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 9999px;
    box-shadow: 0 8px 25px rgba(37,99,235,0.4);
    white-space: nowrap;
}
/* Nur mobil/Tablet sinnvoll — Desktop hat die Navigation immer sichtbar */
@media (min-width: 1024px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity 0.2s linear; } }
/* Von der Tab-Bar unten abgeloest (Markup bleibt fuer moegliche spaetere
   Verwendung, aber sie soll nie mehr angezeigt werden). */
.sticky-cta { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE TAB-BAR — dauerhafte untere Navigation, native App-Gefuehl.
   Ersetzt unter 1024px: Sticky-CTA, den frei schwebenden Chat-Knopf.
   Der Hamburger oben bleibt fuer die restlichen Links (Arbeit,
   Ablauf, Team, Blog) erhalten.
   ═══════════════════════════════════════════════════════════════ */
:root { --tabbar-h: 64px; }

#mobile-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9500;
    display: flex;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 -4px 20px rgba(15,23,42,0.06);
}
.dark #mobile-tabbar { background: #111111; border-top-color: #262626; box-shadow: 0 -4px 20px rgba(0,0,0,0.3); }
@media (min-width: 1024px) { #mobile-tabbar { display: none; } }

.tabbar-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}
.dark .tabbar-item { color: #94a3b8; }
.tabbar-item:active { transform: scale(0.92); }
.tabbar-item.is-active { color: #2563EB; }
.dark .tabbar-item.is-active { color: #60A5FA; }
.tabbar-item svg { pointer-events: none; }

/* Chat-Tab sticht bewusst heraus: erhoehter, gefuellter Kreis statt
   flachem Icon, wie die "wichtigste Aktion" in nativen App-Tab-Bars
   (z.B. Kamera/Compose bei Instagram/Twitter). */
.tabbar-chat { color: #64748b; }
.dark .tabbar-chat { color: #94a3b8; }
.tabbar-chat-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #60A5FA);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37,99,235,0.45), 0 0 0 4px #fff;
}
.dark .tabbar-chat-icon { box-shadow: 0 6px 16px rgba(37,99,235,0.55), 0 0 0 4px #111111; }
.tabbar-chat.is-active .tabbar-chat-icon { background: linear-gradient(135deg, #1D4ED8, #2563EB); }

.tabbar-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9999px;
    background: #ef4444;
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    display: none;
}
.dark .tabbar-chat-badge { border-color: #111111; }
.tabbar-chat-badge.show { display: block; animation: tabbarChatBadgeIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.2s both; }

@keyframes tabbarChatBadgeIn {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* Der Kreis selbst wackelt einmalig kurz mit, damit der Blick hinwandert —
   nicht dauerhaft, das würde nur nerven. */
.tabbar-chat-icon.pulse-once { animation: tabbarChatPulse 0.6s ease 1.3s 2; }
@keyframes tabbarChatPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Einladende Sprechblase ueber dem Chat-Kreis — einmalig, mit Verzoegerung
   per JS gezeigt (siehe initMobileTabbar), hier nur die Optik. */
.tabbar-chat-bubble {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 10px);
    max-width: 190px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 14px 14px 4px 14px;
    background: #1f2937;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dark .tabbar-chat-bubble { background: #2a2a2a; }
.tabbar-chat-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 18px;
    border: 6px solid transparent;
    border-top-color: #1f2937;
}
.dark .tabbar-chat-bubble::after { border-top-color: #2a2a2a; }
.tabbar-chat-bubble.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tabbar-chat-bubble-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    margin-left: 2px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .tabbar-chat-bubble { transition: none !important; }
}

/* Platz fuer die Tab-Bar am Seitenende freihalten, sonst deckt sie den
   Footer zu. */
@media (max-width: 1023px) {
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* Der frei schwebende Chat-Knopf entfaellt — die Tab-Bar uebernimmt.
       Das Chat-Fenster selbst bleibt, ruecht aber ueber die Tab-Bar. */
    #vs-chat-btn { display: none !important; }
    #vs-chat-window {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tabbar-item { transition: none !important; }
    .tabbar-chat-badge.show { animation: none !important; }
    .tabbar-chat-icon.pulse-once { animation: none !important; }
}