:root {
  color-scheme: light;
  --waveform-scale: 1;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* ── Hide Vapi default widget ──────────────────────────────────────────────── */
#vapi-btn,
[id^="vapi"],
[class*="vapi-widget"],
button[aria-label*="Vapi"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Background set via .aiva-bg canvas; body itself is transparent-ready */
  background: transparent;
}

/* ── PAGE TRANSITIONS ──────────────────────────────────────────────────────── */
.page-fade-in {
  opacity: 0;
  animation: pageFadeIn 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-fade-out {
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

/* ── FADE-IN-UP (hero stagger) ─────────────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeInUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fade-in-up--2 { animation-delay: 90ms; }
.fade-in-up--3 { animation-delay: 180ms; }
.fade-in-up--4 { animation-delay: 270ms; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── AiVA WORDMARK ─────────────────────────────────────────────────────────
 * Header/Footer/Section: Raster-Wortmarke aus `assets/aiva-wordmark-from-branding.png`
 * (Klartext-transparent), eingebunden per <svg> + <image> — Retina-/CSS-Skalierung.
 */
.aiva-logo-link {
  color: #6BA3B5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* Marken-Icon (Lotus) — Standard dunkel; im Header → Türkis via Regel oben */
img.aiva-mascot-mark {
  flex-shrink: 0;
  display: block;
  box-sizing: content-box;
  height: 2.9rem !important;
  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  image-rendering: auto;
  overflow: visible;
  visibility: visible !important;
  opacity: 1 !important;
  filter:
    contrast(1.06)
    brightness(1.03)
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.65))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.45));
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  img.aiva-mascot-mark {
    height: 3.1rem !important;
  }
}

/* Navbar-Marken-Icon: Hover nur auf direktem Lotus-IMG (nicht Header — dort .aiva-header-lotus-fill) */
.aiva-logo-link:has(> img.aiva-mascot-mark:hover) > img.aiva-mascot-mark {
  transform: translateY(-1px);
  filter:
    contrast(1.08)
    brightness(1.05)
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.72))
    drop-shadow(0 2px 10px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.2));
}

/* Demo: Lotus — Glasmorphismus (Lotus-Maske + backdrop-filter), PNG nur für Maß; bei Sprache kurz SVG-Ring auf IMG */
img.aiva-mascot-mark.demo-call-lotus {
  pointer-events: none;
}

.demo-call-lotus-shell {
  display: block;
  line-height: 0;
}

.demo-call-lotus-glass-wrap {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 6px 20px rgba(77, 163, 181, 0.38)) drop-shadow(0 2px 8px rgba(0, 196, 204, 0.28));
}

.demo-call-lotus-glass-wrap .demo-call-lotus-glass-rim,
.demo-call-lotus-glass-wrap .demo-call-lotus-glass,
.demo-call-lotus-glass-wrap::after {
  -webkit-mask-image: url('./assets/aiva-lotus-mark.png');
  mask-image: url('./assets/aiva-lotus-mark.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

/* Türkis-Körper: sichtbare Silhouette, bleibt transparent */
.demo-call-lotus-glass-wrap .demo-call-lotus-glass-rim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(77, 163, 181, 0.52) 0%,
    rgba(0, 196, 204, 0.38) 42%,
    rgba(107, 196, 210, 0.44) 100%
  );
  filter: drop-shadow(0 0 1px rgba(61, 115, 135, 0.95)) drop-shadow(0 0 2px rgba(77, 163, 181, 0.85))
    drop-shadow(0 0 14px rgba(0, 196, 204, 0.42));
}

.demo-call-lotus-glass-wrap .demo-call-lotus__img {
  display: block;
  position: relative;
  z-index: 3;
  width: 154px !important;
  max-width: min(154px, 42vw) !important;
  height: auto !important;
  opacity: 0 !important;
  filter: none !important;
  backface-visibility: hidden;
  pointer-events: none;
}

.demo-call-lotus-glass-wrap .demo-call-lotus-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
  -webkit-backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(140, 215, 225, 0.42) 32%,
    rgba(77, 163, 181, 0.32) 54%,
    rgba(220, 248, 252, 0.55) 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -4px 16px rgba(61, 115, 135, 0.38),
    inset 4px 0 22px rgba(255, 255, 255, 0.55),
    inset -2px 0 12px rgba(77, 163, 181, 0.22);
  filter: drop-shadow(0 0 1px rgba(61, 115, 135, 0.9)) drop-shadow(0 0 3px rgba(77, 163, 181, 0.55));
  transition:
    box-shadow 1.45s cubic-bezier(0.35, 0, 0.25, 1),
    background 1.45s cubic-bezier(0.35, 0, 0.25, 1),
    backdrop-filter 1.45s ease,
    opacity 0.5s ease;
}

/* Glanz-Highlight (3D-Glas) */
.demo-call-lotus-glass-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.28) 34%,
    transparent 48%,
    rgba(180, 230, 238, 0.35) 100%
  );
  mix-blend-mode: overlay;
  opacity: 0.92;
}

#demoShowcaseCard.demo-showcase--call-active .demo-call-lotus-glass-wrap:not(.demo-lotus-speak-ring) .demo-call-lotus-glass {
  backdrop-filter: blur(12px) saturate(300%) contrast(1.16) brightness(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(300%) contrast(1.16) brightness(1.06);
}

#demoShowcaseCard.demo-showcase--call-active .demo-call-lotus-glass-wrap:not(.demo-lotus-speak-ring) .demo-call-lotus-glass-rim {
  background: linear-gradient(
    145deg,
    rgba(77, 163, 181, 0.58) 0%,
    rgba(0, 196, 204, 0.45) 50%,
    rgba(107, 196, 210, 0.5) 100%
  );
}

@keyframes demoLotusGlassAwaitPulse {
  0%,
  100% {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.94),
      inset 0 -4px 16px rgba(61, 115, 135, 0.32),
      inset 4px 0 22px rgba(255, 255, 255, 0.48);
    filter: drop-shadow(0 0 1px rgba(61, 115, 135, 0.9)) drop-shadow(0 0 3px rgba(77, 163, 181, 0.5));
  }
  50% {
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 1),
      inset 0 -3px 14px rgba(61, 115, 135, 0.28),
      inset 4px 0 24px rgba(255, 255, 255, 0.62);
    filter: drop-shadow(0 0 2px rgba(61, 115, 135, 0.95)) drop-shadow(0 0 18px rgba(0, 196, 204, 0.55));
  }
}

@keyframes demoLotusGlassConnectSchweif {
  0% {
    backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
  }
  40% {
    backdrop-filter: blur(12px) saturate(320%) contrast(1.2) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(320%) contrast(1.2) brightness(1.1);
  }
  100% {
    backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
    -webkit-backdrop-filter: blur(10px) saturate(280%) contrast(1.14) brightness(1.04);
  }
}

@keyframes demoLotusGlassRimPulse {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 1px rgba(61, 115, 135, 0.95)) drop-shadow(0 0 14px rgba(0, 196, 204, 0.42));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(61, 115, 135, 1)) drop-shadow(0 0 22px rgba(0, 196, 204, 0.58));
  }
}

#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-connect-flourish):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  )
  .demo-call-lotus-glass {
  animation: demoLotusGlassAwaitPulse 2.45s ease-in-out infinite;
}

#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-connect-flourish):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  )
  .demo-call-lotus-glass-rim {
  animation: demoLotusGlassRimPulse 2.45s ease-in-out infinite;
}

/* Kein weißer Aufblitz / kein äußerer Kreis beim Verbinden */
#demoCallLotusShell.demo-lotus-connect-flourish .demo-call-lotus-glass {
  animation: none !important;
}

#demoCallLotusShell.demo-lotus-await-pulse.demo-call-lotus-glass-wrap::before,
#demoCallLotusShell.demo-lotus-connected-glow.demo-call-lotus-glass-wrap::before {
  display: none !important;
  content: none !important;
}

/* Idle: normales Lotus-PNG (Standardfarben), kein Glas-Overlay */
#demoCallLotusShell:not(.demo-lotus-await-pulse):not(.demo-lotus-connected-glow):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  )
  .demo-call-lotus__img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: drop-shadow(0 2px 10px rgba(77, 163, 181, 0.38)) drop-shadow(0 0 8px rgba(0, 196, 204, 0.22)) !important;
}

#demoCallLotusShell:not(.demo-lotus-await-pulse):not(.demo-lotus-connected-glow):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  )
  .demo-call-lotus-glass,
#demoCallLotusShell:not(.demo-lotus-await-pulse):not(.demo-lotus-connected-glow):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  )
  .demo-call-lotus-glass-rim,
#demoCallLotusShell:not(.demo-lotus-await-pulse):not(.demo-lotus-connected-glow):not(.demo-lotus-speak-warmup):not(
    .demo-lotus-speak-ring
  ).demo-call-lotus-glass-wrap::after {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* Verbindet: Logo bleibt farbig; dezentes Türkis-Puls nur im Glas (hinter transparenten Stellen) */
#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-speak-ring):not(.demo-lotus-speak-warmup) .demo-call-lotus__img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: drop-shadow(0 2px 10px rgba(77, 163, 181, 0.42)) drop-shadow(0 0 10px rgba(0, 196, 204, 0.28)) !important;
}

#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-speak-ring):not(.demo-lotus-speak-warmup) .demo-call-lotus-glass,
#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-speak-ring):not(.demo-lotus-speak-warmup) .demo-call-lotus-glass-rim {
  opacity: 0.5 !important;
  visibility: visible !important;
}

#demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-speak-ring):not(.demo-lotus-speak-warmup).demo-call-lotus-glass-wrap {
  filter: drop-shadow(0 4px 16px rgba(77, 163, 181, 0.35)) drop-shadow(0 0 12px rgba(0, 196, 204, 0.22)) !important;
}

/* Verbunden: leichter weißer Rand am Logo, kein Vollglühen */
#demoCallLotusShell.demo-lotus-connected-glow:not(.demo-lotus-speak-ring):not(.demo-lotus-speak-warmup) .demo-call-lotus__img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35))
    drop-shadow(0 2px 10px rgba(77, 163, 181, 0.32)) !important;
}

#demoCallLotusShell.demo-lotus-connected-glow:not(.demo-lotus-speak-ring) .demo-call-lotus-glass,
#demoCallLotusShell.demo-lotus-connected-glow:not(.demo-lotus-speak-ring) .demo-call-lotus-glass-rim {
  opacity: 0 !important;
  visibility: hidden !important;
}

#demoCallLotusShell.demo-lotus-connected-glow:not(.demo-lotus-speak-ring).demo-call-lotus-glass-wrap {
  filter: drop-shadow(0 2px 12px rgba(77, 163, 181, 0.32)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.28)) !important;
}

#demoShowcaseCard.demo-showcase--call-active
  #demoCallLotusShell.demo-lotus-speak-warmup:not(.demo-lotus-speak-ring)
  .demo-call-lotus-glass {
  backdrop-filter: blur(12px) saturate(320%) contrast(1.18) brightness(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(320%) contrast(1.18) brightness(1.08);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -3px 14px rgba(61, 115, 135, 0.34),
    inset 4px 0 24px rgba(255, 255, 255, 0.65);
  filter: drop-shadow(0 0 2px rgba(61, 115, 135, 0.95)) drop-shadow(0 0 24px rgba(0, 196, 204, 0.55));
  transition: box-shadow 0.48s cubic-bezier(0.28, 0.1, 0.22, 1), backdrop-filter 0.48s ease;
}

/* Sprache: weißer SVG-Ring — kurz IMG sichtbar (Alpha für Filter), Glas aus */
#demoCallLotusShell.demo-lotus-speak-ring .demo-call-lotus-glass,
#demoCallLotusShell.demo-lotus-speak-ring .demo-call-lotus-glass-rim,
#demoCallLotusShell.demo-lotus-speak-ring.demo-call-lotus-glass-wrap::after {
  opacity: 0;
  visibility: hidden;
}

#demoCallLotusShell.demo-lotus-speak-ring.demo-call-lotus-glass-wrap {
  filter: none;
}

#demoShowcaseCard.demo-showcase--call-active #demoCallLotusShell.demo-lotus-speak-ring .demo-call-lotus__img {
  opacity: 1 !important;
  filter: url(#aivaDemoLotusSpeakRing) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.78))
    drop-shadow(0 2px 7px rgba(0, 0, 0, 0.24));
  transition: filter 0.78s cubic-bezier(0.33, 0, 0.2, 1);
}

.aiva-wordmark-svg {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  color: inherit;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
  aspect-ratio: 230 / 74;
  transition: filter 260ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.aiva-wordmark-svg--compact {
  height: 18px;
}

/* ── HEADER-WORDMARK (Branding PNG transparent, hohe Rasterauflösung) ───────
 * ViewBox = Pixelmaße von `assets/aiva-wordmark-from-branding.png` (nach Pipeline).
 * Bei erneuter Generierung Skript ausführen und viewBox in HTML/CSS anpassen
 */
svg.aiva-header-logo-svg.aiva-wordmark-svg {
  aspect-ratio: 710 / 240;
}

svg.aiva-header-logo-svg {
  height: 1.75rem;
  width: auto;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition:
    filter 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/** Showcase-Strip: kleinere Darstellung gegenüber Navbar */
svg.aiva-header-logo-svg.aiva-wordmark-svg--compact {
  height: 18px;
}

/* Header + Footer: Lotus/Wortmarke — gleicher Türkis-Gradient wie .hero-gradient */
.aiva-logo-link {
  color: #6ba3b5;
  --aiva-header-lotus-gradient: linear-gradient(135deg, #4d8da1 0%, #6ba3b5 58%, #7eb5c3 100%);
  --aiva-header-wordmark-gradient: linear-gradient(135deg, #528fa1 0%, #6ba3b5 48%, #8bbfcf 100%);
  --aiva-header-lotus-shadow:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.68)) drop-shadow(0 2px 9px rgba(107, 163, 181, 0.36))
    drop-shadow(0 0 14px rgba(77, 141, 161, 0.22));
  --aiva-header-wordmark-shadow:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.78)) drop-shadow(0 2px 11px rgba(107, 163, 181, 0.4))
    drop-shadow(0 0 18px rgba(139, 191, 207, 0.24));
  --aiva-header-lotus-shadow-hover:
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.82)) drop-shadow(0 3px 12px rgba(107, 163, 181, 0.46))
    drop-shadow(0 0 18px rgba(77, 141, 161, 0.28));
  --aiva-header-wordmark-shadow-hover:
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.88)) drop-shadow(0 3px 14px rgba(107, 163, 181, 0.48))
    drop-shadow(0 0 22px rgba(139, 191, 207, 0.3));
}

.aiva-header-lotus-fill,
.aiva-header-wordmark-fill {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

/* PNG nur für Maß + Klickfläche — sichtbar ist ::before (Gradient-Maske wie Wortmarke) */
header .aiva-header-lotus-fill > img.aiva-mascot-mark {
  opacity: 0 !important;
  filter: none !important;
  pointer-events: auto;
}

.aiva-header-lotus-fill::before,
.aiva-header-wordmark-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  transition:
    filter 0.32s ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.aiva-header-lotus-fill::before {
  background: var(--aiva-header-lotus-gradient);
  filter: var(--aiva-header-lotus-shadow);
  -webkit-mask-image: url('./assets/aiva-lotus-mark.png');
  mask-image: url('./assets/aiva-lotus-mark.png');
}

.aiva-header-wordmark-fill .aiva-header-logo-svg {
  opacity: 0;
  pointer-events: none;
}

.aiva-header-wordmark-fill::before {
  background: var(--aiva-header-wordmark-gradient);
  filter: var(--aiva-header-wordmark-shadow);
  -webkit-mask-image: url('./assets/aiva-wordmark-from-branding.png');
  mask-image: url('./assets/aiva-wordmark-from-branding.png');
}

.aiva-header-lotus-fill:hover {
  transform: translateY(-1px);
}

.aiva-header-lotus-fill:hover::before {
  filter: var(--aiva-header-lotus-shadow-hover);
}

.aiva-logo-link:hover .aiva-header-wordmark-fill::before {
  filter: var(--aiva-header-wordmark-shadow-hover);
}

/* Navbar gains depth on scroll, stays transparent at top */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.80) !important;
  box-shadow: 0 1px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED BACKGROUND CANVAS
   Weißer Klinik-Look: dezenter Eisblau-Schimmer (saturate/brightness auf ::before).
   ═══════════════════════════════════════════════════════════════════════════ */
.aiva-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #eef7f8;
}

/* Langsam linear bewegender Verlauf (sehr dezenter Eisblau-Schimmer nach Filter) */
.aiva-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: linear-gradient(
    118deg,
    #bfe8ea 0%,
    #7dd4dc 12%,
    #c5eef4 26%,
    #6bc4d6 38%,
    #e6fafc 52%,
    #5fb8cf 66%,
    #d8f6f9 82%,
    #8ad4df 94%,
    #bfe8ea 100%
  );
  background-size: 400% 400%;
  animation: aivaTurquoiseGradientFlow 45s linear infinite;
  filter: saturate(0.5) brightness(1.2);
  will-change: background-position;
}

@keyframes aivaTurquoiseGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* ── Central pulsing glow (the star of the show) ─────────────────────────── */
.aiva-bg__blob--center {
  position: absolute;
  z-index: 1;
  top: 38%;
  left: 50%;
  width: 68vw;
  height: 52vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(77,  200, 210, 0.42) 0%,
    rgba(107, 196, 210, 0.28) 32%,
    rgba(61,  165, 185, 0.14) 52%,
    transparent              72%
  );
  animation: blobCenter 9s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes blobCenter {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.75; }
  50%       { transform: translate(-50%, -50%) scale(1.18); opacity: 1;    }
}

/* ── Top-left accent blob ─────────────────────────────────────────────────── */
.aiva-bg__blob--topleft {
  position: absolute;
  z-index: 1;
  top: -10vh;
  left: -8vw;
  width: 42vw;
  height: 42vh;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(94,  210, 215, 0.28) 0%,
    rgba(107, 180, 200, 0.16) 40%,
    transparent               68%
  );
  animation: blobTL 13s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes blobTL {
  0%, 100% { transform: scale(1)    translate(0, 0);      opacity: 0.6; }
  50%       { transform: scale(1.12) translate(3vw, 3vh);  opacity: 0.85; }
}

/* ── Bottom-right accent blob ────────────────────────────────────────────── */
.aiva-bg__blob--bottomright {
  position: absolute;
  z-index: 1;
  bottom: -12vh;
  right: -6vw;
  width: 48vw;
  height: 45vh;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(56,  185, 200, 0.26) 0%,
    rgba(77,  156, 175, 0.14) 45%,
    transparent              68%
  );
  animation: blobBR 11s ease-in-out infinite;
  animation-delay: 4s;
  will-change: transform, opacity;
}

@keyframes blobBR {
  0%, 100% { transform: scale(1)    translate(0, 0);        opacity: 0.5; }
  50%       { transform: scale(1.14) translate(-3vw, -3vh);  opacity: 0.8; }
}

/* ── HERO GRID (40 / 60 split) ─────────────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 55% 1fr;
    align-items: center;
  }
}

/* ── HERO TYPOGRAPHY ───────────────────────────────────────────────────────── */
.hero-h1 {
  font-size: clamp(2.4rem, 4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero-subline {
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  max-width: 36ch;
}

/* ── HERO GRADIENT TEXT ────────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #4D8DA1 0%, #6BA3B5 55%, #8BBFCF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── HERO WIDGET ───────────────────────────────────────────────────────────── */
.hero-widget {
  box-shadow: 0 24px 70px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.1);
}

/* ── CTA BUTTON GLOW ───────────────────────────────────────────────────────── */
.cta-btn {
  position: relative;
}

.cta-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(107, 163, 181, 0.35) 0%, rgba(107, 163, 181, 0) 65%);
  opacity: 0;
  filter: blur(12px);
  z-index: -1;
  transition: opacity 300ms ease;
}

.cta-btn:hover::after {
  opacity: 1;
}

/* ── GLASS + milchiger Schweif (Demo / Landing Live-CTAs) — Türkis-Hue fix ─── */
.aiva-glass-wave-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 72, 78, 0.38),
    0 0 18px rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: linear-gradient(
    155deg,
    rgba(0, 96, 104, 0.42) 0%,
    rgba(0, 148, 156, 0.55) 100%
  );
  backdrop-filter: blur(16px) saturate(185%);
  -webkit-backdrop-filter: blur(16px) saturate(185%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.78),
    inset 0 -12px 28px rgba(0, 72, 78, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 16px 52px rgba(0, 196, 204, 0.34),
    0 0 48px rgba(0, 196, 204, 0.14);
  transition: box-shadow 0.38s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.38s ease;
}

/* Ruhiger Türkis-Grund — ohne laufende Animation (clean, „frei“) */
.aiva-glass-wave-btn::before {
  content: '';
  position: absolute;
  inset: -6%;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    152deg,
    rgba(0, 108, 116, 0.78) 0%,
    rgba(0, 188, 196, 0.48) 38%,
    rgba(130, 228, 236, 0.42) 52%,
    rgba(0, 152, 160, 0.55) 100%
  );
  opacity: 0.88;
  pointer-events: none;
}

/*
 * Milchiger weißer Schweif: breites weiches Band (Blur), rollt einmal glatt
 * über den Kasten — lange Pause, kein Puls, nur Transform.
 */
.aiva-glass-wave-btn::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -55%;
  width: 210%;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 252, 250, 0.18) 40%,
    rgba(255, 255, 255, 0.46) 48.5%,
    rgba(248, 252, 255, 0.52) 50%,
    rgba(255, 255, 255, 0.4) 51.5%,
    rgba(255, 250, 248, 0.2) 60%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(13px);
  opacity: 0.96;
  transform: translate3d(-122%, 0, 0);
  pointer-events: none;
  will-change: transform;
  animation: aivaMilkySchweif 22s cubic-bezier(0.35, 0, 0.65, 1) infinite;
}

.aiva-glass-wave-btn:hover {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.88),
    inset 0 -12px 28px rgba(0, 72, 78, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 20px 60px rgba(0, 196, 204, 0.42),
    0 0 56px rgba(0, 196, 204, 0.18);
}

.aiva-glass-wave-btn:hover::after {
  filter: blur(14px);
}

.aiva-glass-wave-btn:disabled {
  animation: none;
}

.aiva-glass-wave-btn:disabled::before,
.aiva-glass-wave-btn:disabled::after {
  animation-play-state: paused;
}

.aiva-glass-wave-btn:disabled::before {
  opacity: 0.35;
}

.aiva-glass-wave-btn:disabled::after {
  opacity: 0;
  animation: none;
}

/* Lange Pause, langsamer Durchlauf: nur Transform, kein Opacity-Puls */
@keyframes aivaMilkySchweif {
  0%,
  18% {
    transform: translate3d(-122%, 0, 0);
  }
  52% {
    transform: translate3d(122%, 0, 0);
  }
  52.01%,
  100% {
    transform: translate3d(122%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiva-glass-wave-btn::after {
    animation: none;
    transform: translate3d(-122%, 0, 0);
    opacity: 0;
  }

  .aiva-glass-wave-btn::before {
    opacity: 0.75;
  }
}

/* ── PRICING-HUB (Feature-Zentrale unter #pricing — Datenblatt-Liste, CTA-Glow) ── */
.pricing-hub__list {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pricing-hub__list > li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0;
  padding: 1.55rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  font-size: 0.8125rem;
  line-height: 1.48;
  letter-spacing: -0.012em;
  color: #334155;
}

.pricing-hub__list > li:first-child {
  padding-top: 0.5rem;
}

.pricing-hub__list > li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Etwas größere Typo für praxisnahe Vorteils-Boxen (#pricing) */
.pricing-hub__list--plain > li {
  font-size: 0.9375rem;
  line-height: 1.55;
  padding: 1.35rem 0;
}

.pricing-hub__list--plain > li:first-child {
  padding-top: 0.35rem;
}

.pricing-hub__glyph {
  flex-shrink: 0;
  margin-top: 0.25rem;
  color: #4fbcc7;
  font-size: 0.55rem;
  line-height: 1;
}

button.pricing-hub__cta {
  font: inherit;
  cursor: pointer;
}

.pricing-hub__cta {
  box-shadow:
    0 0 36px rgba(79, 188, 199, 0.4),
    0 14px 40px rgba(77, 141, 161, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease;
}

.pricing-hub__cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 48px rgba(79, 188, 199, 0.5),
    0 22px 50px rgba(77, 141, 161, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-hub__cta,
  .pricing-hub__cta:hover {
    transition: none;
    transform: none;
  }
}

/* System-Check CTA: Meta-Block (Fußnote + Copyright + E-Mail) als eine Einheit unter dem Button */
.pricing-hub__footer--tight .pricing-hub__meta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  max-width: 28rem;
  text-align: center;
}

@media (min-width: 768px) {
  .pricing-hub__footer--tight .pricing-hub__meta-group {
    margin-top: 2rem;
  }
}

.pricing-hub__footer--tight .pricing-hub__footnote,
.pricing-hub__footer--tight .pricing-hub__legal,
.pricing-hub__footer--tight .pricing-hub__mailto {
  margin: 0;
}

/* ── SYSTEM-ANALYSE MODAL — helles Milchglas + Türkis wie Landing-Glass-Cards ─ */
@keyframes aiva-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aiva-modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.aiva-analyse-modal {
  z-index: 100050;
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(90vh, 900px);
  padding: 0;
  border: none;
  margin: auto;
  background: transparent;
  color: #1e293b;
}

.aiva-analyse-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.aiva-analyse-modal::backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: aiva-modal-backdrop-in 0.38s ease-out both;
}

.aiva-analyse-modal__panel {
  position: relative;
  max-height: min(90vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  color-scheme: light;
  border-radius: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.88),
    inset 0 -1px 8px rgba(15, 23, 42, 0.08),
    0 0 22px rgba(79, 188, 199, 0.42),
    0 18px 44px rgba(0, 0, 0, 0.14);
  transform-origin: center center;
  animation: aiva-modal-panel-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.aiva-analyse-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(148, 163, 184, 0.35),
    0 4px 12px rgba(15, 23, 42, 0.06);
  color: #64748b;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.aiva-analyse-modal__close-icon {
  display: block;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-0.04em);
}

.aiva-analyse-modal__close:hover,
.aiva-analyse-modal__close:focus-visible {
  color: #0f172a;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 1px rgba(79, 188, 199, 0.55),
    0 6px 18px rgba(79, 188, 199, 0.18);
  outline: none;
}

.aiva-analyse-modal__intro {
  flex-shrink: 0;
  padding: 1.75rem 1.75rem 0.5rem;
  padding-right: 3.5rem;
}

@media (min-width: 640px) {
  .aiva-analyse-modal__intro {
    padding: 2rem 2.35rem 0.25rem;
    padding-right: 3.75rem;
  }
}

.aiva-analyse-modal__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a9eb5;
}

.aiva-analyse-modal__title {
  margin: 0;
  font-family: 'Space Grotesk', Inter, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
}

@media (min-width: 640px) {
  .aiva-analyse-modal__title {
    font-size: 1.5rem;
  }
}

.aiva-analyse-modal__lead {
  margin: 0.65rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.01em;
  color: #64748b;
}

.aiva-analyse-modal__form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.75rem 1.75rem;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .aiva-analyse-modal__form {
    padding: 1.25rem 2.35rem 2rem;
  }
}

.aiva-analyse-modal__section {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.aiva-analyse-modal__section:first-of-type {
  margin-top: 0.25rem;
  padding-top: 0;
  border-top: none;
}

.aiva-analyse-modal__section-title {
  margin: 0 0 1.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4d8da1;
}

.aiva-analyse-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.aiva-analyse-modal__label {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #334155;
}

.aiva-analyse-modal__req {
  color: #4d8da1;
  font-weight: 600;
}

.aiva-analyse-modal__control {
  width: 100%;
  margin: 0;
  padding: 0.72rem 0.92rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.aiva-analyse-modal__control::placeholder {
  color: rgba(100, 116, 139, 0.75);
}

.aiva-analyse-modal__control:hover {
  border-color: rgba(79, 188, 199, 0.45);
}

.aiva-analyse-modal__control:focus {
  outline: none;
  border-color: rgba(79, 188, 199, 0.85);
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(79, 188, 199, 0.55),
    0 0 0 4px rgba(79, 188, 199, 0.14),
    0 8px 24px rgba(77, 141, 161, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.aiva-analyse-modal__control--narrow {
  max-width: 8rem;
}

.aiva-analyse-modal__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath stroke='%234d8da1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.92);
  background-position: right 0.75rem center;
  padding-right: 2.35rem;
  cursor: pointer;
}

.aiva-analyse-modal__select option {
  background-color: #ffffff;
  color: #0f172a;
}

.aiva-analyse-modal__textarea {
  resize: vertical;
  min-height: 5rem;
}

.aiva-analyse-modal__label--block {
  width: 100%;
  margin-top: 0.35rem;
}

.aiva-analyse-modal__fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

.aiva-analyse-modal__legend {
  padding: 0;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #475569;
}

.aiva-analyse-modal__radios {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.aiva-analyse-modal__radios--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
}

.aiva-analyse-modal__radio {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #334155;
  cursor: pointer;
}

.aiva-analyse-modal__radio-input,
.aiva-analyse-modal__checkbox {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  accent-color: #4d8da1;
  cursor: pointer;
}

.aiva-analyse-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: #334155;
  cursor: pointer;
}

.aiva-analyse-modal__checks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.aiva-analyse-modal__checks .aiva-analyse-modal__check {
  margin-top: 0;
}

.aiva-analyse-modal__check--legal {
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(107, 163, 181, 0.28);
  background: rgba(248, 252, 255, 0.65);
}

.aiva-analyse-modal__fieldset--invalid {
  border-radius: 12px;
  outline: 2px solid rgba(244, 63, 94, 0.45);
  outline-offset: 4px;
}

.aiva-analyse-modal__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.aiva-analyse-modal__success {
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
}

.aiva-analyse-modal__success-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(77, 163, 181, 0.95);
}

.aiva-analyse-modal__success-title {
  margin: 0.5rem 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}

.aiva-analyse-modal__success-text {
  margin: 0.65rem auto 0;
  max-width: 26rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(71, 85, 105, 0.95);
}

.aiva-analyse-modal__success-btn {
  margin-top: 1.1rem;
  display: inline-flex;
  min-width: 12rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 1rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: var(--aiva-dark, #3d7387);
  cursor: pointer;
}

.aiva-analyse-modal__hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.aiva-analyse-modal__submit-wrap {
  margin-top: 2rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.aiva-analyse-modal__submit {
  width: 100%;
}

.aiva-analyse-modal__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.aiva-analyse-modal__disclaimer {
  margin: 0.85rem 0 0;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0.02em;
  color: #64748b;
}

.aiva-analyse-modal__error {
  margin: 1rem 0 0;
  padding: 0.75rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(254, 242, 242, 0.95);
  box-shadow:
    0 0 0 1px rgba(254, 202, 202, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #b91c1c;
}

body.aiva-analyse-modal-open {
  overflow: hidden;
}

@media (max-width: 639px) {
  .aiva-analyse-modal {
    width: min(42rem, calc(100vw - 1rem));
    max-height: min(92vh, 900px);
  }

  .aiva-analyse-modal__intro {
    padding: 1.35rem 1.1rem 0.35rem;
    padding-right: 3rem;
  }

  .aiva-analyse-modal__form {
    padding: 0.75rem 1.1rem 1.35rem;
  }

  .aiva-analyse-modal__section {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
  }

  .aiva-analyse-modal__radios--volume.aiva-analyse-modal__radios--inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .aiva-analyse-modal__radios--inline .aiva-analyse-modal__radio {
    min-height: 2.75rem;
    padding: 0.2rem 0;
    align-items: center;
  }

  .aiva-analyse-modal__radios:not(.aiva-analyse-modal__radios--inline) .aiva-analyse-modal__radio {
    min-height: 2.5rem;
  }

  .aiva-analyse-modal__checkbox,
  .aiva-analyse-modal__radio-input {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (min-width: 640px) and (max-width: 900px) {
  .aiva-analyse-modal {
    width: min(40rem, calc(100vw - 2.5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiva-analyse-modal::backdrop {
    animation: none;
  }

  .aiva-analyse-modal__panel {
    animation: none;
  }

  .aiva-analyse-modal__submit.pricing-hub__cta:hover,
  .aiva-analyse-modal__submit.pricing-hub__cta {
    transition: none;
    transform: none;
  }
}

/* ── PULSE ANIMATION (hero demo button) ────────────────────────────────────── */
.pulse::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(107, 163, 181, 0.38) 0%, rgba(107, 163, 181, 0) 60%);
  opacity: 0.7;
  filter: blur(10px);
  animation: softPulse 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes softPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.5; }
  50%       { transform: scale(1.04); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .glass-card,
  .showcase-glass,
  .showcase-sunlit-shell {
    transform: none;
    animation: none;
  }
}

/* ── CRYSTAL WHITE CORE + OBSIDIAN GLASS FRAME ───────────────────────────────
   Milchglass-Fill + mehrstufiger „schwarzer“ Rand (halbtransparent + innen Lichtkante),
   statt eines flachen 2px‑#000-Rings — liest sich als dunkles Glasmorphism. */
.feature-card,
.glass-card,
.showcase-glass {
  position: relative;
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.8) !important;
  background-image: none !important;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  /* Früher nur :hover: immer leicht gehoben + türkisem Schein + tieferem Schatten */
  transform: scale(1.015);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.88),
    inset 0 -1px 8px rgba(15, 23, 42, 0.1),
    0 0 22px rgba(79, 188, 199, 0.45),
    0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Kennzahlen: nur Typo, kein Kasten — Zahlen-/Label-Farben „glas-schwarz“ (Obsidian, ohne Box) */
.stats-bar__item {
  padding: 0.75rem 0.5rem;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.stats-bar .stat-number {
  position: relative;
  background: linear-gradient(
    165deg,
    #94a3b8 0%,
    #475569 22%,
    #1e293b 52%,
    #0f172a 82%,
    #020617 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0 1px 1px rgba(15, 23, 42, 0.2))
    drop-shadow(0 4px 12px rgba(15, 23, 42, 0.12));
}

.stats-bar .stat-label {
  color: rgba(30, 41, 59, 0.82);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 10px rgba(15, 23, 42, 0.08);
}

.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
}

/* Leistungen-Grid: Tagline (z. B. „Termine · Kalender →“) unten bündig in allen drei Karten */
.feature-card__foot {
  margin-top: auto;
  padding-top: 1.25rem;
}

.showcase-glass {
  padding: 1.625rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #4D8DA1, #6BA3B5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.stat-label {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

/* ── FEATURE CARDS (varianten) ─────────────────────────────────────────────── */
.feature-card--highlighted {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.52) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 8px rgba(15, 23, 42, 0.1),
    0 0 22px rgba(79, 188, 199, 0.55),
    0 15px 35px rgba(0, 0, 0, 0.2),
    0 28px 58px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  aspect-ratio: 1;
  border-radius: 1rem;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
  transition:
    background-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.feature-icon-svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  object-fit: contain;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.feature-card .feature-icon {
  background-color: rgba(77, 188, 199, 0.1);
  box-shadow: inset 0 0 0 1px rgba(77, 188, 199, 0.18);
  color: #3d7a8f;
}

/* ── PRO GLOW (Pricing: leichter äußerer Schein, Rahmen wie .glass-card) ─────── */
.pro-glow {
  position: relative;
}

.pro-glow::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(79, 188, 199, 0.08) 0%, rgba(0, 0, 0, 0.04) 45%, transparent 72%);
  filter: blur(16px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

/* ── CHECK ICON ───────────────────────────────────────────────────────────── */
.check-icon {
  margin-top: 0.125rem;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.5rem;
  width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ── BADGE ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(209, 250, 229, 0.8);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.4rem 0.875rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #374151;
  backdrop-filter: blur(8px);
}

/* ── SECURITY BANNER: erhöhter Schatten immer aktiv (kein Hover-Zustand nötig) ─ */
.security-banner {
  border: none;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.44) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.62),
    0 22px 64px rgba(16, 185, 129, 0.11),
    0 14px 40px rgba(2, 6, 23, 0.07);
}

.security-banner__badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
}

@media (min-width: 768px) {
  .security-banner__badges {
    width: auto;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}

.security-banner__badges .badge {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  font-size: 0.65rem;
  gap: 0.35rem;
}

@media (min-width: 640px) {
  .security-banner__badges .badge {
    padding: 0.35rem 0.72rem;
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .security-banner__badges .badge {
    padding: 0.4rem 0.875rem;
    font-size: 0.72rem;
    gap: 0.5rem;
  }
}

/* ── CHAT BUBBLES ─────────────────────────────────────────────────────────── */
.chat-bubble {
  max-width: 28rem;
  border-radius: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(14px);
}

.chat-bubble--patient {
  box-shadow: 0 8px 30px rgba(2, 6, 23, 0.07);
}

.chat-bubble--aiva {
  border-color: rgba(107, 163, 181, 0.28);
  box-shadow: 0 8px 35px rgba(107, 163, 181, 0.12);
}

/* ── VOICE WAVE (hero widget) ─────────────────────────────────────────────── */
.voice-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(248, 252, 255, 0.36) 100%
  );
  backdrop-filter: blur(18px) saturate(188%);
  -webkit-backdrop-filter: blur(18px) saturate(188%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.85),
    0 0 48px rgba(0, 196, 204, 0.05);
}

.voice-wave > span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 196, 204, 0.9), rgba(0, 196, 204, 0.52));
  animation: wave 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
  transform-origin: bottom;
}

.voice-wave > span:nth-child(2n) {
  background: linear-gradient(180deg, rgba(0, 196, 204, 0.75), rgba(0, 196, 204, 0.45));
}

@keyframes wave {
  0%, 100% { transform: scaleY(0.40); }
  50%       { transform: scaleY(1.30); }
}

/* ── Milchglas-Kacheln (Demo: Hinweis, Status) — Türkis nur als sehr weicher Glow ─ */
.aiva-glass-bubble {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background: linear-gradient(
    162deg,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(248, 252, 255, 0.34) 48%,
    rgba(255, 255, 255, 0.52) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(192%);
  -webkit-backdrop-filter: blur(22px) saturate(192%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 12px rgba(148, 163, 184, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 8px 28px rgba(15, 23, 42, 0.04),
    0 0 64px rgba(0, 196, 204, 0.06);
}

/* ── DEMO-PAGE: UNIFIED CARD (iOS-ähnliches Milchglas, Türkis nur als zarter Rand) ─ */
.unified-card {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.52);
  overflow: hidden;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.64) 0%,
    rgba(244, 250, 252, 0.42) 42%,
    rgba(255, 255, 255, 0.58) 100%
  ) !important;
  backdrop-filter: blur(30px) saturate(198%);
  -webkit-backdrop-filter: blur(30px) saturate(198%);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.94),
    inset 0 -14px 36px rgba(15, 23, 42, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 22px 58px rgba(2, 6, 23, 0.07),
    0 0 120px rgba(0, 196, 204, 0.09);
  transition: box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.unified-card.is-live {
  animation: medicalGlow 2.2s ease-in-out infinite;
}

@keyframes medicalGlow {
  0%,
  100% {
    box-shadow:
      inset 0 2px 6px rgba(255, 255, 255, 0.94),
      inset 0 -14px 36px rgba(15, 23, 42, 0.05),
      0 0 0 1px rgba(255, 255, 255, 0.35) inset,
      0 22px 58px rgba(2, 6, 23, 0.07),
      0 0 120px rgba(0, 196, 204, 0.1),
      0 0 54px rgba(0, 196, 204, 0.12);
  }
  50% {
    box-shadow:
      inset 0 2px 8px rgba(255, 255, 255, 0.98),
      inset 0 -14px 36px rgba(15, 23, 42, 0.06),
      0 0 0 1px rgba(255, 255, 255, 0.42) inset,
      0 26px 64px rgba(2, 6, 23, 0.08),
      0 0 120px rgba(0, 196, 204, 0.14),
      0 0 78px rgba(0, 196, 204, 0.18);
  }
}

/* Demo Live: gleiche lichtdurchlässige „Innenfläche“ wie Slideshow `.sc-pdf-wrap` (nicht die äußere Laufbahn). */
.unified-card.unified-card--showcase-inner {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(12px) saturate(155%);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 22px rgba(15, 23, 42, 0.04);
  transition: box-shadow 600ms cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

/* demo.html: Lotus-Animation darf die abgerundete Karte nicht abschneiden */
.unified-card.unified-card--showcase-inner.demo-showcase-card {
  overflow: visible;
}

.unified-card.unified-card--showcase-inner.is-live {
  animation: demoShowcaseInnerLive 2.2s ease-in-out infinite;
}

@keyframes demoShowcaseInnerLive {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 6px 22px rgba(15, 23, 42, 0.04),
      0 0 0 1px rgba(0, 196, 204, 0.12),
      0 0 48px rgba(0, 196, 204, 0.1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.58),
      0 8px 26px rgba(15, 23, 42, 0.05),
      0 0 0 1px rgba(0, 196, 204, 0.22),
      0 0 64px rgba(0, 196, 204, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .unified-card.unified-card--showcase-inner.is-live {
    animation: none;
  }
}

/* Abgesetzte Text-Kacheln (analog `.showcase-statusbar` / Folien-Typo in der Slideshow). */
.demo-live-text-panel {
  display: block;
  width: 100%;
  max-width: min(36rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding: 0.65rem 1rem 0.75rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(252, 253, 255, 0.52) 38%,
    rgba(248, 250, 252, 0.58) 62%,
    rgba(255, 255, 255, 0.68) 100%
  );
  backdrop-filter: blur(26px) saturate(195%);
  -webkit-backdrop-filter: blur(26px) saturate(195%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.92),
    inset 0 -3px 14px rgba(148, 163, 184, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 8px 26px rgba(15, 23, 42, 0.06),
    0 0 48px rgba(0, 196, 204, 0.07);
}

.demo-live-text-panel[hidden] {
  display: none !important;
}

.demo-live-text-panel--muted {
  max-width: min(22rem, 100%);
  padding: 0.5rem 0.75rem 0.55rem;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.48);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(248, 250, 252, 0.38) 50%,
    rgba(255, 255, 255, 0.48) 100%
  );
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.88),
    inset 0 -2px 10px rgba(148, 163, 184, 0.08),
    0 4px 16px rgba(15, 23, 42, 0.04);
}

/* Demo idle: Button + Fehler, Datenschutz-Hinweis darunter mit Abstand */
.demo-idle-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.demo-idle-privacy {
  margin-top: 0.95rem;
}

/* Demo idle: Datenschutz-Hinweis — kompakter Kasten, bleibt in der Showcase-Karte */
.demo-live-text-panel--privacy {
  max-width: min(17.5rem, calc(100% - 1.25rem));
  margin-top: 0;
  padding: 0.3rem 0.5rem 0.35rem;
  border-radius: 10px;
  font-size: 0.625rem;
  line-height: 1.32;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.86),
    inset 0 -1px 8px rgba(148, 163, 184, 0.06),
    0 2px 10px rgba(15, 23, 42, 0.03);
}

.demo-privacy-notice__link {
  font-size: inherit;
  font-weight: 600;
  color: rgb(71, 85, 105);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

/* Kontakt-E-Mail: Klick öffnet Auswahl (Programm / Gmail / Outlook) */
.aiva-email-picker {
  position: relative;
  display: inline-block;
  text-align: left;
}

.aiva-email-picker__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.aiva-email-picker__summary::-webkit-details-marker {
  display: none;
}

.aiva-email-picker__summary::marker {
  content: '';
}

.aiva-email-picker__summary::after {
  content: ' ▾';
  font-size: 0.72em;
  opacity: 0.65;
  font-weight: 600;
}

.aiva-email-picker__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: min(16.5rem, calc(100vw - 2rem));
  padding: 0.35rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Menü nach unten (Platz unter der E-Mail), nicht nach oben über „Kontakt“ / AiVA */
.site-footer .aiva-email-picker__menu,
.pricing-hub__meta-group .aiva-email-picker__menu {
  top: calc(100% + 0.35rem);
  bottom: auto;
}

.site-footer .aiva-email-picker__menu {
  left: 0;
  transform: none;
}

.pricing-hub__meta-group .aiva-email-picker__menu {
  left: 50%;
  transform: translateX(-50%);
}

.site-footer .aiva-email-picker--footer {
  display: block;
  width: 100%;
}

.aiva-email-picker__option {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.aiva-email-picker__option:hover {
  background: rgba(107, 163, 181, 0.14);
  color: var(--aiva-dark, #3d7387);
}

.aiva-email-picker--compact .aiva-email-picker__menu {
  min-width: 14.5rem;
}

.aiva-email-picker--footer .aiva-email-picker__summary {
  font-size: inherit;
}

.aiva-email-picker--legal .aiva-email-picker__summary {
  font-size: inherit;
}

.demo-privacy-notice__link:hover {
  color: var(--aiva-primary, #6ba3b5);
}

/* Demo idle: Hinweis ohne Kasten — direkt unter Statuszeile */
.demo-idle-hint {
  margin: 0.2rem 0 0;
  padding: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(100, 116, 139, 0.88);
  border: none;
  background: none;
  box-shadow: none;
}

.demo-live-text-panel--danger {
  border-color: rgba(251, 113, 133, 0.55);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 241, 242, 0.55) 45%,
    rgba(255, 247, 247, 0.68) 100%
  );
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -2px 12px rgba(244, 63, 94, 0.08),
    0 8px 24px rgba(244, 63, 94, 0.08);
}

.unified-card--showcase-inner #active-state .waveform-container--frameless {
  position: relative;
  padding-top: 0.15rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Aktiver Demo-Anruf: nur die Balkenlinie, kein Milchglas-Kasten */
.unified-card--showcase-inner #active-state .waveform-container--frameless .waveform {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 0.25rem 0;
}

.unified-card--showcase-inner #active-state .waveform-container--frameless .waveform::before {
  display: none;
}

/* Demo: gesamte Anruf-Karte — gleiche Live-Animation wie `.aiva-bg` (Gradient-Flow + 3 Blobs), kräftigeres Türkis; kein extra Shadow-Puls an den Ecken */
.demo-showcase-card__aiva-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  isolation: isolate;
}

/* Derselbe Verlauf + dieselbe Keyframe-Animation wie `.aiva-bg::before`, höhere Sättigung = mehr Türkis (weiße Stellen im Verlauf bleiben) */
.demo-showcase-card__aiva-bg-flow {
  position: absolute;
  inset: -22%;
  z-index: 0;
  background: linear-gradient(
    118deg,
    #bfe8ea 0%,
    #7dd4dc 12%,
    #c5eef4 26%,
    #6bc4d6 38%,
    #e6fafc 52%,
    #5fb8cf 66%,
    #d8f6f9 82%,
    #8ad4df 94%,
    #bfe8ea 100%
  );
  background-size: 400% 400%;
  animation: aivaTurquoiseGradientFlow 45s linear infinite;
  filter: saturate(0.88) brightness(1.1);
  will-change: background-position;
}

/* Dieselben Blob-Keyframes wie `.aiva-bg__blob--*`, Maße am Karten-Container */
.demo-showcase-card__aiva-bg-blob {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.demo-showcase-card__aiva-bg-blob--center {
  top: 40%;
  left: 50%;
  width: 92%;
  height: 58%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(77, 200, 210, 0.52) 0%,
    rgba(107, 196, 210, 0.34) 32%,
    rgba(61, 165, 185, 0.2) 52%,
    transparent 72%
  );
  animation: blobCenter 9s ease-in-out infinite;
  will-change: transform, opacity;
}

.demo-showcase-card__aiva-bg-blob--topleft {
  top: -8%;
  left: -12%;
  width: 58%;
  height: 48%;
  background: radial-gradient(
    ellipse at center,
    rgba(94, 210, 215, 0.36) 0%,
    rgba(107, 180, 200, 0.22) 40%,
    transparent 68%
  );
  animation: blobTL 13s ease-in-out infinite;
  will-change: transform, opacity;
}

.demo-showcase-card__aiva-bg-blob--bottomright {
  bottom: -10%;
  right: -10%;
  width: 62%;
  height: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(56, 185, 200, 0.34) 0%,
    rgba(77, 156, 175, 0.2) 45%,
    transparent 68%
  );
  animation: blobBR 11s ease-in-out infinite;
  animation-delay: 4s;
  will-change: transform, opacity;
}

/* Demo-Karte: Glas leicht transparenter, damit der innere Live-Hintergrund von Anfang an sichtbar ist */
#demoShowcaseCard.unified-card.unified-card--showcase-inner.demo-showcase-card {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06) !important;
  /* Feste Bühnenhöhe: Idle ↔ Active ohne Sprung; unten etwas kürzer */
  min-height: 28.75rem;
  height: 28.75rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  #demoShowcaseCard.unified-card.unified-card--showcase-inner.demo-showcase-card {
    padding-bottom: 2rem !important;
  }
}

#demoShowcaseCard #idle-state.call-state:not(.is-hidden),
#demoShowcaseCard #active-state.call-state:not(.is-hidden) {
  position: relative;
  z-index: 1;
  min-height: 24.75rem;
  width: 100%;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .demo-showcase-card__aiva-bg-flow,
  .demo-showcase-card__aiva-bg-blob--center,
  .demo-showcase-card__aiva-bg-blob--topleft,
  .demo-showcase-card__aiva-bg-blob--bottomright {
    animation: none !important;
  }

  .demo-showcase-card__aiva-bg-flow {
    background-position: 35% 50%;
  }

  .demo-showcase-card__aiva-bg-blob--center {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.88;
  }

  .demo-showcase-card__aiva-bg-blob--topleft {
    transform: scale(1.06) translate(1.5%, 1.5%);
    opacity: 0.72;
  }

  .demo-showcase-card__aiva-bg-blob--bottomright {
    transform: scale(1.07) translate(-1.5%, -1.5%);
    opacity: 0.65;
  }
}

/* Aktiver Demo-Anruf: Lotus oben im Slot, Status klar darunter (nicht in der Blume) */
#demoShowcaseCard.demo-showcase--call-active #active-state .demo-active-call-layout {
  padding-top: 0;
  gap: 0;
}

.demo-lotus-slot--active {
  min-height: 5rem;
}

.demo-active-status-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 9;
  width: 100%;
  max-width: 22rem;
  margin-top: 1.15rem;
  padding-top: 0;
  gap: 0.35rem;
}

.demo-active-status-detail {
  margin: 0;
  line-height: 1.45;
}

@media (min-width: 768px) {
  .demo-active-status-group {
    margin-top: 1.35rem;
  }
}

/* Demo: Lotus, Status, Wellenform und Auflegen-Button als eine kompakte Säule */
#demoShowcaseCard .demo-call-ui-stack {
  gap: 0.65rem;
}

#demoShowcaseCard #idle-state .demo-lotus-slot {
  min-height: 4.35rem;
}

#demoShowcaseCard.demo-showcase--call-active .demo-active-call-layout.demo-call-ui-stack {
  gap: 0.5rem;
}

#demoShowcaseCard .demo-call-waveform {
  margin-top: 0.35rem !important;
}

#demoShowcaseCard .demo-active-call-layout .end-btn {
  margin-top: 0.35rem;
}

/* ── DEMO: Stimmen-Visual — "bars" (sichtbare Balken) oder "siri" (Flügel); Lotus .demo-call-lotus--floating ─ */
.demo-lotus-slot {
  width: 100%;
  min-height: 4.35rem;
  flex-shrink: 0;
}

/* Demo-Lotus: Position per JS an #idleStatusDetail / #activeStatusDetail (top setzt app.js) */
#demoShowcaseCard > #demoCallLotusShell.demo-call-lotus--floating {
  position: absolute;
  left: 50%;
  z-index: 8;
  display: inline-block;
  width: max-content;
  transform: translate3d(-50%, 0, 0);
  transition:
    top 680ms cubic-bezier(0.33, 1.06, 0.2, 1),
    transform 520ms cubic-bezier(0.33, 1, 0.2, 1);
}

/* Klick „Anruf starten“: Lotus etwas nach oben (näher an Status + Steuerung) */
#demoShowcaseCard > #demoCallLotusShell.demo-call-lotus--floating.demo-lotus-connect-lift {
  transform: translate3d(-50%, calc(-1 * var(--demo-lotus-connect-lift, 14px)), 0);
}

@media (max-width: 767px) {
  #demoShowcaseCard > #demoCallLotusShell.demo-call-lotus--floating.demo-lotus-connect-lift {
    transform: translate3d(-50%, calc(-1 * var(--demo-lotus-connect-lift, 12px)), 0);
  }
}

#demoShowcaseCard:not(.demo-lotus-layout-ready) > #demoCallLotusShell.demo-call-lotus--floating {
  visibility: hidden;
}

.demo-call-lotus-shell.demo-call-lotus--floating {
  position: absolute;
  left: 50%;
  z-index: 8;
  display: inline-block;
  width: max-content;
  transform: translate3d(-50%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  #demoShowcaseCard.demo-showcase--call-active #demoCallLotusShell.demo-lotus-speak-ring .demo-call-lotus__img {
    filter: contrast(1.06) brightness(1.04) drop-shadow(0 1px 2px rgba(255, 255, 255, 0.72))
      drop-shadow(0 2px 10px rgba(0, 0, 0, 0.34)) !important;
  }

  #demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-connect-flourish):not(.demo-lotus-speak-warmup):not(
      .demo-lotus-speak-ring
    )
    .demo-call-lotus-glass,
  #demoCallLotusShell.demo-lotus-await-pulse:not(.demo-lotus-connect-flourish):not(.demo-lotus-speak-warmup):not(
      .demo-lotus-speak-ring
    )
    .demo-call-lotus-glass-rim,
  #demoCallLotusShell.demo-lotus-connect-flourish .demo-call-lotus-glass {
    animation: none !important;
  }

  #demoShowcaseCard > #demoCallLotusShell.demo-call-lotus--floating.demo-lotus-connect-lift {
    transform: translate3d(-50%, calc(-1 * var(--demo-lotus-connect-lift, 10px)), 0);
  }

  #demoCallLotusShell.demo-call-lotus--floating {
    transition:
      top 0.01ms linear,
      transform 0.01ms linear;
  }

  img.aiva-mascot-mark.demo-call-lotus__img {
    transition: filter 0.35s ease;
  }
}

.demo-siri-visual {
  --siri-aiva: 0.14;
  --siri-user: 0.14;
  display: none;
  position: relative;
  width: 100%;
  max-width: 8rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 auto;
  pointer-events: none;
}

.waveform-container--frameless[data-demo-voice-visual="siri"] {
  min-height: 2.85rem;
}

.waveform-container--frameless[data-demo-voice-visual="siri"] .demo-siri-visual {
  display: flex;
}

.waveform-container--frameless[data-demo-voice-visual="siri"] .waveform {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.waveform-container--frameless[data-demo-voice-visual="siri"] .waveform.active {
  display: flex !important;
}

.demo-siri-visual__center {
  flex: 0 0 auto;
  width: 4.15rem;
  min-width: 4.15rem;
  min-height: 2.75rem;
}

/* Dünne Siri-ähnliche „Wellenstriche“: vertikaler Gradient, scaleY wie Balken */
.demo-siri-visual__strand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2px;
  height: 1.5rem;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 280ms;
}

.demo-showcase--call-active .demo-siri-visual__strand {
  opacity: 1;
}

.demo-siri-visual__strand-cap {
  display: block;
  width: 1.5px;
  height: 100%;
  max-height: 1.5rem;
  border-radius: 999px;
  transform-origin: center center;
  will-change: transform;
  transition: transform 72ms cubic-bezier(0.45, 0.05, 0.25, 1);
  box-shadow:
    0 0 10px rgba(124, 58, 237, 0.22),
    0 0 6px rgba(34, 211, 238, 0.18);
}

.demo-siri-visual__strand--left .demo-siri-visual__strand-cap {
  background: linear-gradient(
    180deg,
    rgba(167, 139, 250, 0.95) 0%,
    rgba(99, 102, 241, 0.92) 42%,
    rgba(34, 211, 238, 0.88) 100%
  );
  transform: scaleY(calc(0.28 + var(--siri-aiva, 0.14) * 1.05));
}

.demo-siri-visual__strand--right .demo-siri-visual__strand-cap {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.95) 0%,
    rgba(99, 102, 241, 0.9) 48%,
    rgba(192, 38, 211, 0.82) 100%
  );
  transform: scaleY(calc(0.28 + var(--siri-user, 0.14) * 1.05));
  box-shadow:
    0 0 10px rgba(56, 189, 248, 0.22),
    0 0 6px rgba(192, 38, 211, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .demo-siri-visual__strand {
    transition: opacity 0.2s ease;
  }

  .demo-siri-visual__strand-cap {
    transition: none;
  }
}

/* ── CALL STATE TRANSITIONS ───────────────────────────────────────────────── */
.call-state {
  width: 100%;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.call-state.is-hidden {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0;
}

/* ── Pilot / Aufbau: Lauftext-Leiste unter dem Header (Glas wie Navbar) ───── */
.aiva-pilot-banner {
  position: fixed;
  top: var(--aiva-pilot-banner-top, 3.75rem);
  left: 0;
  right: 0;
  z-index: 49;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  color: rgb(51 65 85);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

@supports (backdrop-filter: blur(1px)) {
  .aiva-pilot-banner {
    background: rgba(255, 255, 255, 0.55);
  }
}

.aiva-pilot-banner__viewport {
  overflow: hidden;
  width: 100%;
  padding: 0.55rem 0;
}

.aiva-pilot-banner__track {
  display: flex;
  width: max-content;
  gap: 4rem;
  padding-inline: 1rem;
  animation: aivaPilotBannerMarquee 95s linear infinite;
  will-change: transform;
}

.aiva-pilot-banner__text {
  flex: 0 0 auto;
  white-space: nowrap;
}

@keyframes aivaPilotBannerMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiva-pilot-banner__track {
    animation: none;
    width: 100%;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 1rem 0.5rem;
  }

  .aiva-pilot-banner__text {
    white-space: normal;
    text-align: center;
  }

  .aiva-pilot-banner__text + .aiva-pilot-banner__text {
    display: none;
  }
}

body.has-pilot-banner main {
  padding-top: calc(var(--aiva-pilot-banner-top, 3.75rem) + var(--aiva-pilot-banner-height, 2.5rem) + 1.25rem) !important;
}

/* index.html: Header-Nav — Hover in AiVA-Hellblau statt Schwarz */
#site-header .site-header-nav-link {
  border-radius: 9999px;
  padding: 0.35rem 0.65rem;
  margin: -0.35rem -0.65rem;
  color: rgb(71 85 105);
  transition:
    color 0.25s ease,
    background-color 0.25s ease;
}

#site-header .site-header-nav-link:hover {
  color: #4d8da1;
  background-color: #f0f4f8;
}

/* ── Mobile navigation (Landing) ───────────────────────────────────────────── */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(108, 164, 181, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.site-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(108, 164, 181, 0.42);
  color: #1e293b;
}

.site-nav-toggle:focus-visible {
  outline: 2px solid rgba(107, 163, 181, 0.55);
  outline-offset: 2px;
}

.site-nav-toggle__icon {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  position: relative;
  transition: background 0.2s ease;
}

.site-nav-toggle__icon::before,
.site-nav-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, top 0.2s ease;
}

.site-nav-toggle__icon::before {
  top: -6px;
}

.site-nav-toggle__icon::after {
  top: 6px;
}

.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__icon {
  background: transparent;
}

.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-nav-toggle[aria-expanded='true'] .site-nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav-panel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 1rem 0.85rem;
  border-top: 1px solid rgba(108, 164, 181, 0.18);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-nav-panel[hidden] {
  display: none !important;
}

.site-nav-panel__link {
  display: block;
  padding: 0.55rem 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
}

.site-nav-panel__link:hover {
  color: #1e293b;
  background: rgba(108, 164, 181, 0.1);
}

.site-nav-panel__link:focus-visible {
  outline: 2px solid rgba(107, 163, 181, 0.45);
  outline-offset: 2px;
}

body.site-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .site-nav-toggle {
    display: none;
  }

  .site-nav-panel {
    display: none !important;
  }
}

#site-header .site-header-nav-link:focus-visible {
  outline: 2px solid rgba(107, 163, 181, 0.45);
  outline-offset: 2px;
}

/* demo.html: „Zurück zur Startseite“ — feine Türkis-Kante wie Demo-Anruf-Karte */
.demo-header-back-link {
  border: 1px solid rgba(107, 163, 181, 0.48);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
    0 0 0 0.5px rgba(0, 196, 204, 0.12);
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-header-back-link:hover {
  border-color: rgba(107, 163, 181, 0.62);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.42),
    0 0 12px rgba(0, 196, 204, 0.1),
    0 0 0 0.5px rgba(0, 196, 204, 0.18);
}

/* ── START / END BUTTONS (demo page) ─────────────────────────────────────── */
.start-btn {
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.start-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: scale(0.98);
}

/* Start-Button: Telefon nur als weiße Kontur, Innenfläche transparent (Button-Türkis scheint durch) */
.start-btn .call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.start-btn .call-icon__svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  fill: none;
  stroke: currentColor;
}

.end-btn {
  animation: redGlowPulse 1.55s ease-in-out infinite;
}

.end-btn__phone-icon {
  width: 1.625rem;
  height: 1.625rem;
  color: #fff;
}

/* ── Demo: „Bereit“-Punkt = Erreichbarkeit (SDK + Netz), nicht nur Dekoration ─ */
.idle-status-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: #94a3b8;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
  transition:
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.idle-status-dot--ready {
  background: radial-gradient(circle at 35% 28%, #ecfdf5 0%, #4ade80 38%, #16a34a 100%);
  /* Statisches Grün-Leuchten — kein Pulsieren */
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.42),
    0 0 14px rgba(34, 197, 94, 0.48),
    0 0 26px rgba(34, 197, 94, 0.3);
  animation: none;
}

.idle-status-dot--connecting {
  background: #fbbf24;
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.45),
    0 0 14px rgba(245, 158, 11, 0.35);
  animation: idleDotConnectingPulse 1.1s ease-in-out infinite;
}

.idle-status-dot--offline {
  background: #64748b;
  box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.5);
  animation: none;
}

.idle-status-dot--unavailable {
  background: radial-gradient(circle at 35% 30%, #ffe4e6 0%, #fb7185 45%, #e11d48 100%);
  box-shadow:
    0 0 0 2px rgba(244, 63, 94, 0.4),
    0 0 14px rgba(244, 63, 94, 0.35);
  animation: idleDotWarnPulse 1.6s ease-in-out infinite;
}

@keyframes idleDotConnectingPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(0.92);
  }
}

@keyframes idleDotWarnPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(244, 63, 94, 0.35),
      0 0 10px rgba(244, 63, 94, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(244, 63, 94, 0.45),
      0 0 16px rgba(244, 63, 94, 0.38);
  }
}

@media (prefers-reduced-motion: reduce) {
  .idle-status-dot--connecting,
  .idle-status-dot--unavailable {
    animation: none !important;
  }
}

@keyframes redGlowPulse {
  0%, 100% {
    box-shadow: 0 18px 60px rgba(244, 63, 94, 0.18), 0 0 0 1px rgba(244, 63, 94, 0.25),
      0 0 40px rgba(244, 63, 94, 0.12);
  }
  50% {
    box-shadow: 0 22px 75px rgba(244, 63, 94, 0.28), 0 0 0 1px rgba(244, 63, 94, 0.32),
      0 0 55px rgba(244, 63, 94, 0.18);
  }
}

/* ── DEMO CALL BUTTON (legacy class kept for demo.html) ───────────────────── */
.demo-call-btn {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-call-btn.is-live {
  background: rgba(244, 63, 94, 0.92);
  box-shadow: 0 18px 60px rgba(244, 63, 94, 0.22);
  animation: redGlowPulse 1.55s ease-in-out infinite;
}

.demo-call-btn.was-live {
  animation: endSuccessFlash 520ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes endSuccessFlash {
  0%   { box-shadow: 0 22px 80px rgba(34, 197, 94, 0.26), 0 0 0 1px rgba(34, 197, 94, 0.28); }
  100% { box-shadow: 0 18px 60px rgba(37, 99, 235, 0.22); }
}

/* ── WAVEFORM (demo page active state) ────────────────────────────────────── */
.waveform-container {
  padding: 1.25rem 0;
}

.waveform {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  height: 100px;
  padding: 0.85rem 1rem;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(248, 252, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.56) 100%
  );
  backdrop-filter: blur(26px) saturate(195%);
  -webkit-backdrop-filter: blur(26px) saturate(195%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.88),
    inset 0 -8px 24px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 10px 32px rgba(15, 23, 42, 0.05),
    0 0 80px rgba(0, 196, 204, 0.08);
  position: relative;
  z-index: 100;
}

.waveform.active {
  display: flex;
}

.waveform::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(0, 196, 204, 0.09),
    rgba(255, 255, 255, 0.12) 38%,
    transparent 72%
  );
  pointer-events: none;
}

.waveform-bar {
  flex: 0 0 auto;
  width: 2px;
  height: 6px;
  border-radius: 999px;
  transform-origin: center;
  will-change: transform;
  transition: transform 72ms cubic-bezier(0.45, 0.05, 0.25, 1);
}

.waveform-bar--aiva {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.52));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
  transform: scaleY(calc(0.42 + var(--waveform-scale, 1) * 0.42));
}

.waveform-bar--user {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.42));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
  transition: transform 58ms cubic-bezier(0.45, 0.05, 0.25, 1);
  transform: scaleY(calc(0.38 + var(--user-waveform-scale, 0.12) * 3.4));
}

.waveform.is-speaking .waveform-bar--aiva {
  animation: none;
  transform: scaleY(calc(0.5 + var(--waveform-scale, 1) * 5.8));
}

.waveform:not(.is-speaking) .waveform-bar--aiva {
  animation: waveformIdleOrganic ease-in-out infinite;
  animation-duration: calc(0.62s + (var(--i) * 0.021s));
  animation-delay: calc(var(--i) * -0.051s);
}

.waveform:not(.is-speaking) .waveform-bar--user {
  animation: none;
}

.waveform.is-releasing .waveform-bar {
  animation: waveformRelease 520ms cubic-bezier(0.45, 0.05, 0.2, 1) 1 forwards;
  animation-delay: calc(var(--i) * 0.028s);
}

/* Unregelmäßige Peaks + pro Balken andere Laufzeit → deutlich weniger „eine Welle“ */
@keyframes waveformIdleOrganic {
  0%,
  100% {
    transform: scaleY(0.26);
    opacity: 0.46;
  }
  16% {
    transform: scaleY(1.42);
    opacity: 0.74;
  }
  31% {
    transform: scaleY(0.38);
    opacity: 0.52;
  }
  49% {
    transform: scaleY(2.18);
    opacity: 0.92;
  }
  64% {
    transform: scaleY(0.45);
    opacity: 0.58;
  }
  81% {
    transform: scaleY(1.58);
    opacity: 0.84;
  }
}

@keyframes waveformRelease {
  0%   { transform: scaleY(2.8); opacity: 0.9; }
  100% { transform: scaleY(0.35); opacity: 0.52; }
}

@media (prefers-reduced-motion: reduce) {
  .waveform:not(.is-speaking) .waveform-bar--aiva {
    animation: none !important;
    transform: scaleY(0.52);
    opacity: 0.62;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SHOWCASE CARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Showcase container col (needed for float-card positioning) ────────────── */
.showcase-col {
  position: relative;
  padding: 24px 0;
  overflow: visible;
}

/*
 * Äußerer Rahmen + Laufbahn: helleres Kristallglas — weniger Schwarz,
 * mehr Lichtkante + dezenter Türkis-Schimmer, luftigere Schatten.
 */
.showcase-sunlit-shell {
  --showcase-shell-pad: clamp(9px, 0.9vw, 14px);
  position: relative;
  padding: var(--showcase-shell-pad);
  border-radius: clamp(27px, 1.5vw + 22px, 36px);
  background: transparent;
  border: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 0 0 2px rgba(0, 196, 204, 0.11),
    0 0 0 3px rgba(71, 85, 105, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.38) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.65),
    inset 0 -1px 20px rgba(255, 255, 255, 0.1),
    0 28px 56px rgba(15, 23, 42, 0.07),
    0 10px 24px rgba(15, 23, 42, 0.045),
    0 0 80px rgba(0, 196, 204, 0.11);
  transition: box-shadow 0.45s ease;
}

/* Laufbahn: schimmernd, lichtdurchlässig (gedämpftes Slate + Weiß + Türkis) */
.showcase-sunlit-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 4px rgba(148, 163, 184, 0.22),
    inset 0 0 0 5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 calc(var(--showcase-shell-pad) - 3px) rgba(0, 196, 204, 0.1),
    inset 0 0 0 calc(var(--showcase-shell-pad) - 2px) rgba(255, 255, 255, 0.22),
    inset 0 0 0 calc(var(--showcase-shell-pad) - 1px) rgba(51, 65, 85, 0.22),
    inset 0 2px 18px rgba(255, 255, 255, 0.18),
    inset 0 -6px 20px rgba(0, 196, 204, 0.06);
}

@media (hover: hover) and (pointer: fine) {
  .showcase-sunlit-shell:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.55),
      0 0 0 2px rgba(0, 196, 204, 0.14),
      0 0 0 3px rgba(71, 85, 105, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.44) inset,
      inset 0 1px 2px rgba(255, 255, 255, 0.72),
      inset 0 -1px 20px rgba(255, 255, 255, 0.12),
      0 34px 68px rgba(15, 23, 42, 0.08),
      0 12px 28px rgba(15, 23, 42, 0.055),
      0 0 96px rgba(0, 196, 204, 0.13);
  }

  .showcase-sunlit-shell:hover::before {
    box-shadow:
      inset 0 0 0 4px rgba(148, 163, 184, 0.28),
      inset 0 0 0 5px rgba(255, 255, 255, 0.26),
      inset 0 0 0 calc(var(--showcase-shell-pad) - 3px) rgba(0, 196, 204, 0.13),
      inset 0 0 0 calc(var(--showcase-shell-pad) - 2px) rgba(255, 255, 255, 0.28),
      inset 0 0 0 calc(var(--showcase-shell-pad) - 1px) rgba(51, 65, 85, 0.26),
      inset 0 2px 20px rgba(255, 255, 255, 0.22),
      inset 0 -6px 22px rgba(0, 196, 204, 0.08);
  }
}

/* ── Floating activity cards ───────────────────────────────────────────────── */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(107,163,181,0.12);
  white-space: nowrap;
  z-index: 10;
  animation: floatUp 3.5s ease-in-out infinite;
}

.float-card--1 {
  top: 4px;
  left: -8px;
  animation-delay: 0s;
}

.float-card--2 {
  top: 38%;
  right: -10px;
  animation-delay: 1.1s;
}

.float-card--3 {
  bottom: 4px;
  left: 12%;
  animation-delay: 0.55s;
}

.float-card-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.float-card-dot--green { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.5); }
.float-card-dot--teal  { background: #6BA3B5; box-shadow: 0 0 6px rgba(107,163,181,0.5); }

@keyframes floatUp {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-8px); }
}

/* Hide floating cards on small screens – they'd overflow */
@media (max-width: 767px) {
  .float-card { display: none; }
}

/* ── Status bar (AiVA-Zeile): milchiges Frostglas — klar abgesetzt von .sc-pdf-wrap ─ */
.showcase-statusbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  margin: 0 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(252, 253, 255, 0.52) 38%,
    rgba(248, 250, 252, 0.58) 62%,
    rgba(255, 255, 255, 0.68) 100%
  );
  backdrop-filter: blur(26px) saturate(195%);
  -webkit-backdrop-filter: blur(26px) saturate(195%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.92),
    inset 0 -3px 14px rgba(148, 163, 184, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 8px 26px rgba(15, 23, 42, 0.06),
    0 0 48px rgba(0, 196, 204, 0.07);
}

.showcase-statusbar__label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 18px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #528fa1 0%, #6ba3b5 48%, #8bbfcf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65))
    drop-shadow(0 2px 9px rgba(107, 163, 181, 0.36));
}

.showcase-statusbar #sc-indicator {
  color: rgba(51, 65, 85, 0.9);
}

/* ── Waveform ────────────────────────────────────────────────────────────── */
.showcase-wave-area {
  padding: 14px 16px;
  background: rgba(107, 163, 181, 0.055);
  border-radius: 16px;
  border: 1px solid rgba(107, 163, 181, 0.12);
}

.showcase-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 54px;
}

.showcase-waveform span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4D8DA1 0%, #6BA3B5 60%, rgba(107,163,181,0.35) 100%);
  animation: showcaseBar 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.058s);
  will-change: height, opacity;
}

@keyframes showcaseBar {
  0%, 100% { height: 5px;  opacity: 0.38; }
  25%       { height: 28px; opacity: 0.85; }
  50%       { height: 44px; opacity: 1;    }
  75%       { height: 20px; opacity: 0.7;  }
}

/* ── Rotating message rows ───────────────────────────────────────────────── */
.showcase-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: showcaseMsgIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  margin-bottom: 8px;
}

.showcase-msg-row--end {
  justify-content: flex-end;
}

@keyframes showcaseMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.showcase-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}

.showcase-avatar--p {
  background: #e2e8f0;
  color: #475569;
}

.showcase-avatar--a {
  background: #4D8DA1;
  color: #fff;
}

.showcase-bubble {
  max-width: 78%;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #334155;
  border-radius: 12px;
}

.showcase-bubble--p {
  background: rgba(241, 245, 249, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 4px 12px 12px 12px;
}

.showcase-bubble--a {
  background: rgba(107, 163, 181, 0.13);
  border: 1px solid rgba(107, 163, 181, 0.22);
  border-radius: 12px 4px 12px 12px;
  color: #1e4a5a;
}

/* ── Bottom badges ───────────────────────────────────────────────────────── */
.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.65);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

/* ── PDF Slideshow variant ───────────────────────────────────────────────── */
.showcase-glass--slides {
  padding: 18px 20px 16px;
}

/* Hauptkasten: hell schimmernd, Türkis-Glint, kaum reines Schwarz */
.showcase-glass.showcase-glass--slides {
  position: relative;
  z-index: 1;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: scale(1);
  border-radius: clamp(20px, 1.15vw + 15px, 26px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.52),
    0 0 0 2px rgba(0, 196, 204, 0.12),
    0 0 0 3px rgba(100, 116, 139, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    inset 0 -18px 36px rgba(255, 255, 255, 0.08),
    0 10px 28px rgba(15, 23, 42, 0.045);
}

/* PDF canvas wrapper — helleres, klareres „Haupt“-Glas (weniger milchig als Statusleiste) */
.sc-pdf-wrap {
  position: relative;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px) saturate(155%);
  -webkit-backdrop-filter: blur(12px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 22px rgba(15, 23, 42, 0.04);
}

/* PDF + HTML-Folien: weicher Crossfade (opacity — keine transform-Kollision mit Folie 4) */
.sc-pdf-wrap > .sc-showcase-layer {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;
  z-index: 12;
}

.sc-pdf-wrap > #sc-canvas.sc-showcase-layer {
  display: block;
}

.sc-pdf-wrap > .sc-showcase-layer.sc-showcase-layer--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
  z-index: 18;
}

@media (prefers-reduced-motion: reduce) {
  .sc-pdf-wrap > .sc-showcase-layer {
    transition-duration: 0.001ms;
    transition-delay: 0s !important;
  }
}

.sc-canvas {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  border-radius: 12px;
  transform-origin: center center;
}

.sc-canvas.sc-canvas--readable-zoom {
  transform: scale(1.08);
}

/* ── Showcase: Branding-Folien (Gamma-PNGs, zentriert, ohne internes Scrollen) ─ */
.sc-slide-brand-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0d1b2a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #f8fafc;
  -webkit-font-smoothing: antialiased;
  min-height: 0;
  max-height: 100%;
}

.sc-slide-brand-html-overlay--png {
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.4rem 0.35rem;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.sc-slide-brand-html-overlay--png .sc-slide-brand-html-overlay__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.35);
}

/* ── Showcase: „MFA-Zeit: Telefon & Koordination“ (HTML 1:1; .sc-pdf-wrap unverändert) ─ */
.sc-slide-mfa-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  padding: clamp(0.58rem, 1.65vw + 0.34rem, 1.02rem) clamp(0.62rem, 1.9vw + 0.36rem, 1.08rem)
    clamp(0.52rem, 1.55vw + 0.3rem, 0.92rem);
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.sc-slide-mfa-html-overlay .sc-slide-mfa {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.sc-slide-mfa__head {
  flex-shrink: 0;
  margin-bottom: clamp(0.28rem, 0.85vw + 0.12rem, 0.48rem);
}

.sc-slide-mfa__title {
  margin: 0;
  font-size: clamp(0.82rem, 1.38vw + 0.54rem, 1.22rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: #ffffff;
}

.sc-slide-mfa__body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(0.4rem, 1.35vw + 0.18rem, 0.68rem);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-mfa__problem {
  flex: 0 0 42%;
  max-width: 42%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.42rem, 1.15vw + 0.26rem, 0.68rem) clamp(0.44rem, 1.2vw + 0.28rem, 0.72rem);
  border-radius: 6px;
  background-color: #1e293b;
  box-sizing: border-box;
}

.sc-slide-mfa__practice {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-mfa__section-title {
  margin: 0 0 clamp(0.18rem, 0.5vw + 0.08rem, 0.28rem);
  font-size: clamp(0.68rem, 0.82vw + 0.46rem, 0.92rem);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  flex-shrink: 0;
}

.sc-slide-mfa__text {
  margin: 0 0 clamp(0.22rem, 0.55vw + 0.1rem, 0.34rem);
  font-size: clamp(0.54rem, 0.58vw + 0.4rem, 0.72rem);
  font-weight: 500;
  line-height: 1.36;
  color: #d1d5db;
}

.sc-slide-mfa__text--stat {
  margin-bottom: clamp(0.16rem, 0.42vw + 0.06rem, 0.24rem);
  color: #e2e8f0;
}

.sc-slide-mfa__text--stat strong {
  font-weight: 800;
  color: #ffffff;
}

.sc-slide-mfa__footnote {
  margin: auto 0 0;
  padding-top: clamp(0.12rem, 0.35vw + 0.04rem, 0.2rem);
  font-size: clamp(0.46rem, 0.48vw + 0.34rem, 0.58rem);
  font-weight: 500;
  line-height: 1.32;
  color: #94a3b8;
  flex-shrink: 0;
}

.sc-slide-mfa__footnote em {
  font-style: italic;
}

.sc-slide-mfa__list {
  margin: 0;
  padding: 0 0 0 0.1rem;
  list-style: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-mfa__list li {
  position: relative;
  margin: 0 0 clamp(0.14rem, 0.42vw + 0.06rem, 0.22rem);
  padding-left: 0.72rem;
  font-size: clamp(0.52rem, 0.56vw + 0.38rem, 0.68rem);
  font-weight: 500;
  line-height: 1.34;
  color: #d1d5db;
}

.sc-slide-mfa__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f8fafc;
}

.sc-slide-mfa__callout {
  display: flex;
  align-items: center;
  gap: clamp(0.32rem, 0.85vw + 0.14rem, 0.48rem);
  margin-top: auto;
  flex-shrink: 0;
  padding: clamp(0.34rem, 0.95vw + 0.2rem, 0.52rem) clamp(0.38rem, 1.05vw + 0.22rem, 0.56rem);
  border-radius: 5px;
  background-color: #0a244d;
  box-sizing: border-box;
}

.sc-slide-mfa__callout-icon {
  width: clamp(0.82rem, 1vw + 0.44rem, 1rem);
  height: clamp(0.82rem, 1vw + 0.44rem, 1rem);
  flex-shrink: 0;
  color: #ffffff;
}

.sc-slide-mfa__callout-text {
  margin: 0;
  font-size: clamp(0.52rem, 0.56vw + 0.38rem, 0.68rem);
  font-weight: 500;
  line-height: 1.34;
  color: #f8fafc;
}

@media (max-width: 620px) {
  .sc-slide-mfa__body {
    flex-direction: column;
    gap: 0.42rem;
  }

  .sc-slide-mfa__problem {
    flex: none;
    max-width: none;
  }
}

/* ── Showcase: „KI-Telefonassistenz“ — Pipeline mit AiVA-Hero-Farben (HTML; .sc-pdf-wrap unverändert) ─ */
.sc-slide-ki-html-overlay {
  --sc-ki-accent: #6ba3b5;
  --sc-ki-accent-deep: #4d8da1;
  --sc-ki-accent-light: #8bbfcf;
  --sc-ki-surface: rgba(15, 32, 44, 0.72);
  --sc-ki-glow: rgba(107, 163, 181, 0.42);

  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  padding: clamp(0.55rem, 1.6vw + 0.32rem, 0.98rem) clamp(0.58rem, 1.85vw + 0.34rem, 1.05rem)
    clamp(0.5rem, 1.5vw + 0.28rem, 0.88rem);
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: #121e2d;
  background-image:
    radial-gradient(ellipse 90% 55% at 8% 0%, rgba(77, 141, 161, 0.28), transparent 58%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(139, 191, 207, 0.14), transparent 52%);
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.sc-slide-ki-html-overlay .sc-slide-ki {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  gap: clamp(0.2rem, 0.6vw + 0.06rem, 0.34rem);
}

.sc-slide-ki__head {
  flex-shrink: 0;
}

.sc-slide-ki__title {
  margin: 0 0 clamp(0.2rem, 0.55vw + 0.08rem, 0.3rem);
  font-size: clamp(0.84rem, 1.42vw + 0.56rem, 1.24rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: #ffffff;
}

.sc-slide-ki__intro {
  margin: 0;
  font-size: clamp(0.58rem, 0.64vw + 0.44rem, 0.78rem);
  font-weight: 500;
  line-height: 1.34;
  color: #cbd5e1;
}

.sc-slide-ki__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: clamp(0.1rem, 0.35vw + 0.04rem, 0.18rem) 0;
  overflow: hidden;
}

.sc-slide-ki__pipeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 720px;
}

.sc-slide-ki__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.sc-slide-ki__step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: clamp(0.38rem, 1.05vw + 0.2rem, 0.62rem) clamp(0.32rem, 0.85vw + 0.16rem, 0.5rem)
    clamp(0.34rem, 0.95vw + 0.18rem, 0.56rem);
  border-radius: 12px;
  text-align: center;
  box-sizing: border-box;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, var(--sc-ki-surface) 42%, rgba(8, 22, 32, 0.88) 100%);
  border: 1px solid rgba(139, 191, 207, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 14px 28px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(77, 141, 161, 0.12);
  transform: translateZ(0) rotateX(2deg);
  transform-style: preserve-3d;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.sc-slide-ki__step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 38%);
  pointer-events: none;
}

.sc-slide-ki__step--focus .sc-slide-ki__step-card {
  border-color: rgba(139, 191, 207, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 18px 36px rgba(0, 0, 0, 0.4),
    0 0 28px var(--sc-ki-glow);
  transform: translateY(-3px) translateZ(12px) rotateX(0deg);
}

.sc-slide-ki__step-badge {
  position: absolute;
  top: clamp(0.28rem, 0.75vw + 0.12rem, 0.44rem);
  right: clamp(0.28rem, 0.75vw + 0.12rem, 0.44rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1rem, 1.15vw + 0.72rem, 1.28rem);
  height: clamp(1rem, 1.15vw + 0.72rem, 1.28rem);
  border-radius: 50%;
  font-size: clamp(0.44rem, 0.48vw + 0.32rem, 0.56rem);
  font-weight: 800;
  color: #0f172a;
  background: linear-gradient(135deg, var(--sc-ki-accent-light) 0%, var(--sc-ki-accent) 55%, var(--sc-ki-accent-deep) 100%);
  box-shadow: 0 4px 12px rgba(77, 141, 161, 0.45);
}

.sc-slide-ki__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.35rem, 1.65vw + 0.82rem, 1.85rem);
  height: clamp(1.35rem, 1.65vw + 0.82rem, 1.85rem);
  margin-bottom: clamp(0.14rem, 0.4vw + 0.06rem, 0.22rem);
  border-radius: 10px;
  color: #e0f2fe;
  background: linear-gradient(145deg, rgba(77, 141, 161, 0.45) 0%, rgba(18, 42, 58, 0.65) 100%);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sc-slide-ki__step-icon svg {
  width: 58%;
  height: 58%;
}

.sc-slide-ki__step-title {
  margin: 0 0 0.12em;
  font-size: clamp(0.62rem, 0.72vw + 0.46rem, 0.84rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}

.sc-slide-ki__step-sub {
  margin: 0;
  font-size: clamp(0.5rem, 0.54vw + 0.38rem, 0.66rem);
  font-weight: 500;
  line-height: 1.28;
  color: #cbd5e1;
}

.sc-slide-ki__bridge {
  position: relative;
  flex: 0 0 clamp(0.85rem, 2.2vw + 0.35rem, 1.35rem);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(2.2rem, 8vw, 3.2rem);
}

.sc-slide-ki__bridge-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--sc-ki-accent) 18%, var(--sc-ki-accent-light) 82%, transparent 100%);
  box-shadow: 0 0 12px var(--sc-ki-glow);
  opacity: 0.9;
}

.sc-slide-ki__bridge-arrow {
  position: relative;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--sc-ki-accent-light);
  filter: drop-shadow(0 0 6px var(--sc-ki-glow));
}

.sc-slide-ki__foot {
  flex-shrink: 0;
}

.sc-slide-ki__outro {
  margin: 0;
  font-size: clamp(0.54rem, 0.58vw + 0.4rem, 0.72rem);
  font-weight: 500;
  line-height: 1.32;
  color: #cbd5e1;
}

@media (max-width: 620px) {
  .sc-slide-ki__pipeline {
    flex-direction: column;
    align-items: stretch;
    perspective: none;
  }

  .sc-slide-ki__bridge {
    flex: 0 0 auto;
    min-height: clamp(0.65rem, 2.5vw, 0.95rem);
    transform: rotate(90deg);
  }

  .sc-slide-ki__step-card {
    transform: none;
  }

  .sc-slide-ki__step--focus .sc-slide-ki__step-card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-slide-ki__step-card,
  .sc-slide-ki__step--focus .sc-slide-ki__step-card {
    transform: none;
  }
}

/* ── Showcase: „Was AiVA kann — Grenzen klar definiert“ (Typo/Layout nur in der Folie; .sc-pdf-wrap unverändert) ─ */
.sc-slide-capabilities-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  padding: clamp(0.62rem, 1.75vw + 0.36rem, 1.08rem) clamp(0.65rem, 2vw + 0.38rem, 1.12rem)
    clamp(0.55rem, 1.65vw + 0.32rem, 0.98rem);
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: #121e2d;
  background-image: radial-gradient(
    115% 68% at 92% -6%,
    rgba(104, 180, 198, 0.22),
    transparent 54%
  );
  color: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.sc-slide-capabilities-html-overlay .sc-slide-cap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.sc-slide-cap__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(0.22rem, 0.7vw + 0.08rem, 0.38rem);
  flex-shrink: 0;
}

.sc-slide-cap__accent-bar {
  flex-shrink: 0;
  width: 4px;
  height: clamp(1.22rem, 2.55vw + 0.72rem, 1.92rem);
  border-radius: 2px;
  background: linear-gradient(180deg, #3eb8a8 0%, #008c7e 55%, rgba(0, 120, 108, 0.5) 100%);
  box-shadow: 0 0 10px rgba(0, 140, 126, 0.26);
}

.sc-slide-cap__title {
  margin: 0;
  font-size: clamp(0.8rem, 1.32vw + 0.52rem, 1.18rem);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -0.022em;
  color: #f8fafc;
  overflow-wrap: anywhere;
}

.sc-slide-cap__body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(0.42rem, 1.45vw + 0.2rem, 0.72rem);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-cap__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-cap__col--left {
  flex: 1.04;
}

.sc-slide-cap__col--right {
  flex: 0.96;
  gap: clamp(0.28rem, 0.85vw + 0.12rem, 0.46rem);
}

.sc-slide-cap__section-title {
  margin: 0 0 clamp(0.2rem, 0.55vw + 0.08rem, 0.32rem);
  font-size: clamp(0.72rem, 0.88vw + 0.5rem, 0.98rem);
  font-weight: 800;
  line-height: 1.24;
  color: #7fb8cb;
  flex-shrink: 0;
}

.sc-slide-cap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.26rem, 0.78vw + 0.12rem, 0.42rem);
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}

.sc-slide-cap__topic {
  margin: 0;
  padding: clamp(0.36rem, 1.05vw + 0.22rem, 0.56rem) clamp(0.38rem, 1.1vw + 0.24rem, 0.58rem);
  border: 1px solid rgba(94, 140, 156, 0.38);
  border-left: 4px solid #008c7e;
  border-radius: 0 4px 4px 0;
  background: rgba(15, 35, 48, 0.35);
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-cap__topic-title {
  margin: 0 0 0.18em;
  font-size: clamp(0.64rem, 0.72vw + 0.46rem, 0.84rem);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.sc-slide-cap__topic-text {
  margin: 0;
  font-size: clamp(0.56rem, 0.6vw + 0.42rem, 0.74rem);
  font-weight: 500;
  line-height: 1.34;
  color: rgba(229, 236, 244, 0.9);
}

.sc-slide-cap__safety {
  margin: 0;
  padding: clamp(0.36rem, 1.05vw + 0.22rem, 0.56rem) clamp(0.38rem, 1.1vw + 0.24rem, 0.58rem);
  border-radius: 4px;
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.sc-slide-cap__safety--emergency {
  background: rgba(75, 69, 0, 0.92);
}

.sc-slide-cap__safety--dsgvo {
  background: rgba(0, 61, 51, 0.92);
}

.sc-slide-cap__safety-head {
  display: flex;
  align-items: center;
  gap: 0.36rem;
  margin-bottom: 0.2em;
  flex-shrink: 0;
}

.sc-slide-cap__safety-icon {
  width: clamp(0.88rem, 1.05vw + 0.48rem, 1.08rem);
  height: clamp(0.88rem, 1.05vw + 0.48rem, 1.08rem);
  flex-shrink: 0;
  color: #d4b84a;
}

.sc-slide-cap__safety-icon--shield {
  color: #5eb8b0;
}

.sc-slide-cap__safety--emergency .sc-slide-cap__safety-title {
  color: #d4b84a;
}

.sc-slide-cap__safety--dsgvo .sc-slide-cap__safety-title {
  color: #5eb8b0;
}

.sc-slide-cap__safety-title {
  margin: 0;
  font-size: clamp(0.64rem, 0.72vw + 0.46rem, 0.84rem);
  font-weight: 800;
  line-height: 1.2;
}

.sc-slide-cap__safety-text {
  margin: 0;
  font-size: clamp(0.56rem, 0.6vw + 0.42rem, 0.74rem);
  font-weight: 500;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.94);
}

.sc-slide-cap__safety-text strong {
  font-weight: 800;
  color: #ffffff;
}

@media (max-width: 620px) {
  .sc-slide-cap__body {
    flex-direction: column;
    gap: 0.38rem;
  }

  .sc-slide-cap__col--left,
  .sc-slide-cap__col--right {
    flex: none;
  }

  .sc-slide-cap__grid {
    grid-template-columns: 1fr;
  }
}

/* ── PDF Showcase Folie 9: CTA „Bereit für die Entlastung“ (vorher Inline-Styles) ─ */
.sc-slide9-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 15;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem 4rem;
  padding-top: 8%;
  font-family: Inter, system-ui, sans-serif;
  border-radius: 16px;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(244, 250, 252, 0.65) 45%,
    rgba(232, 242, 247, 0.75) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── PDF Showcase Folie 1: Title wie PDF S. 1 — Logo statt Schrift‑„AiVA“, zentrierter Untertitel ─ */
.sc-slide1-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 15;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.sc-slide1 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 100%;
  padding: clamp(1rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.85rem);
  box-sizing: border-box;
}

.sc-slide1__glow {
  position: absolute;
  width: clamp(280px, 52vw, 520px);
  height: clamp(280px, 52vw, 520px);
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.38;
  pointer-events: none;
}

.sc-slide1__glow--tr {
  top: clamp(-140px, -18vw, -80px);
  right: clamp(-120px, -14vw, -40px);
  background: radial-gradient(circle, rgba(107, 163, 181, 0.52) 0%, rgba(200, 224, 232, 0.12) 55%, transparent 72%);
}

.sc-slide1__glow--bl {
  bottom: clamp(-140px, -22vw, -90px);
  left: clamp(-120px, -16vw, -50px);
  background: radial-gradient(circle, rgba(148, 196, 209, 0.38) 0%, rgba(255, 255, 255, 0) 70%);
}

.sc-slide1__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(42rem, 96%);
}

.sc-slide1__lotus-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 clamp(0.42rem, 1.1vw + 0.22rem, 0.72rem);
}

/* Lotus wie Header (Türkis-Gradient), zentriert über Kicker + Trennlinie */
.sc-slide1__lotus-fill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

/* Größe: überschreibt globales img.aiva-mascot-mark { height: 2.9rem !important } */
.sc-slide1-html-overlay .sc-slide1__lotus-fill > .sc-slide1__lotus-img.aiva-mascot-mark {
  display: block;
  width: auto !important;
  height: clamp(3.35rem, 6.5vw + 1.25rem, 5.15rem) !important;
  min-width: unset !important;
  max-width: none !important;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  opacity: 0 !important;
  filter: none !important;
  pointer-events: none;
}

.sc-slide1__lotus-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #4d8da1 0%, #6ba3b5 58%, #7eb5c3 100%);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.68)) drop-shadow(0 2px 9px rgba(107, 163, 181, 0.36))
    drop-shadow(0 0 14px rgba(77, 141, 161, 0.22));
  -webkit-mask-image: url('./assets/aiva-lotus-mark.png');
  mask-image: url('./assets/aiva-lotus-mark.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  pointer-events: none;
}

.sc-slide1__kicker {
  margin: 0;
  padding: 0 0.5rem;
  font-size: clamp(0.64rem, 0.92vw + 0.42rem, 0.94rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #0f172a;
}

.sc-slide1__rule {
  width: clamp(6.5rem, 22vw, 11rem);
  height: 2px;
  margin: clamp(0.82rem, 2vw + 0.45rem, 1.35rem) auto 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent 0%, #6BA3B5 20%, #6BA3B5 80%, transparent 100%);
}

.sc-slide1__lead {
  margin: clamp(0.85rem, 2vw + 0.4rem, 1.42rem) 0 0;
  padding: 0;
  font-size: clamp(0.78rem, 1vw + 0.5rem, 1.06rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: #64748b;
  max-width: 36ch;
}

/* ── PDF Showcase Folie 2 (PDF S. 2): „Der Status Quo: Praxen am Limit“ — nur Texte, zentriert, ohne Foto ─ */
.sc-slide2-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sc-slide2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding: clamp(0.85rem, 2.4vw + 0.5rem, 1.45rem) clamp(0.95rem, 2.8vw + 0.55rem, 1.55rem);
  flex: none;
  width: 100%;
  max-width: min(38rem, 94%);
  box-sizing: border-box;
}

.sc-slide2__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.28rem, 0.9vw + 0.12rem, 0.5rem);
  width: 100%;
  flex-shrink: 0;
}

.sc-slide2__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}

.sc-slide2__accent-bar {
  flex-shrink: 0;
  width: 4px;
  height: clamp(1.35rem, 2.8vw + 0.75rem, 2rem);
  border-radius: 2px;
  background: linear-gradient(180deg, #7fb8cb 0%, #5e8c9c 72%, rgba(94, 140, 156, 0.45) 100%);
}

.sc-slide2__title {
  margin: 0;
  font-size: clamp(0.88rem, 1.5vw + 0.58rem, 1.38rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #1e293b;
  flex: 0 1 auto;
  max-width: 100%;
}

.sc-slide2__sub {
  margin: 0;
  font-size: clamp(0.78rem, 1.05vw + 0.52rem, 1.05rem);
  font-weight: 600;
  line-height: 1.4;
  color: #64748b;
  width: 100%;
}

.sc-slide2__list {
  list-style: none;
  margin: clamp(1.1rem, 3.2vw + 0.45rem, 1.85rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.72rem, 2vw + 0.35rem, 1.12rem);
  width: 100%;
}

.sc-slide2__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: start;
  justify-items: start;
  text-align: left;
  width: 100%;
  max-width: min(34rem, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.sc-slide2__alert {
  width: 1.625rem;
  height: 1.625rem;
  margin-top: 0.22em;
  justify-self: center;
  align-self: start;
  border-radius: 50%;
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.sc-slide2__alert-mark {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  transform: translateY(0.5px);
}

.sc-slide2__item-text {
  max-width: 100%;
  min-width: 0;
  font-weight: 500;
  line-height: 1.48;
  color: #334155;
}

.sc-slide2__item--s .sc-slide2__item-text {
  font-size: clamp(0.68rem, 0.72vw + 0.46rem, 0.8rem);
}

.sc-slide2__item--m .sc-slide2__item-text {
  font-size: clamp(0.76rem, 0.86vw + 0.52rem, 0.92rem);
}

.sc-slide2__item--l .sc-slide2__item-text {
  font-size: clamp(0.84rem, 1vw + 0.56rem, 1.02rem);
}

.sc-slide2__item-text strong {
  font-weight: 800;
  color: #1e293b;
}

@media (max-width: 380px) {
  .sc-slide2__head {
    flex-wrap: wrap;
  }
}

/* ── PDF Showcase Folie 6 (PDF S. 6): „Messbare Entlastung“ mit Balkendiagramm ─ */
.sc-slide6-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.sc-slide6 {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(0.72rem, 1.9vw + 0.45rem, 1.28rem) clamp(0.8rem, 2.3vw + 0.48rem, 1.42rem)
    clamp(0.6rem, 1.6vw + 0.38rem, 1.05rem);
  box-sizing: border-box;
  background: #fff;
}

.sc-slide6__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 52% 44% at 96% 6%, rgba(127, 184, 203, 0.16), transparent 58%),
    radial-gradient(ellipse 48% 40% at 4% 92%, rgba(127, 184, 203, 0.12), transparent 55%);
}

.sc-slide6__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(0.35rem, 1.1vw + 0.2rem, 0.65rem);
  flex-shrink: 0;
}

.sc-slide6__accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: clamp(1.28rem, 2.65vw + 0.68rem, 1.88rem);
  border-radius: 3px;
  background: linear-gradient(180deg, #8ec4d4 0%, #6a9dad 70%, rgba(106, 157, 173, 0.5) 100%);
}

.sc-slide6__title {
  margin: 0;
  font-size: clamp(0.86rem, 1.42vw + 0.53rem, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #1e293b;
}

.sc-slide6__main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.72rem, 2vw + 0.38rem, 1.15rem);
  width: 100%;
}

.sc-slide6__chart {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: clamp(0.5rem, 1.65vw + 0.28rem, 0.95rem);
  row-gap: clamp(0.5rem, 1.35vw + 0.28rem, 0.78rem);
  align-items: center;
  width: 100%;
  max-width: min(40rem, 100%);
}

.sc-slide6__label {
  justify-self: end;
  text-align: right;
  font-size: clamp(0.64rem, 0.74vw + 0.44rem, 0.82rem);
  font-weight: 500;
  line-height: 1.28;
  color: #475569;
  padding-right: 2px;
  max-width: 11rem;
}

.sc-slide6__label strong {
  font-weight: 800;
  color: #1e293b;
}

.sc-slide6__bar-cell {
  min-width: 0;
}

.sc-slide6__bar {
  box-sizing: border-box;
  border-radius: 999px;
  min-height: clamp(30px, 4.2vw + 18px, 40px);
}

.sc-slide6__bar--full {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6e879c;
  color: #fff;
  padding: 0 clamp(0.45rem, 1.2vw + 0.25rem, 0.75rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sc-slide6__bar-text {
  font-size: clamp(0.62rem, 0.68vw + 0.42rem, 0.8rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.sc-slide6__bar-track {
  display: flex;
  align-items: stretch;
  border-radius: 999px;
  min-height: clamp(30px, 4.2vw + 18px, 40px);
  background: #e6edf3;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.sc-slide6__bar-fill {
  width: 25%;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f766e;
  padding: 0 clamp(4px, 1vw, 10px);
  border-radius: 999px 0 0 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sc-slide6__bar-fill-text {
  font-size: clamp(0.55rem, 0.58vw + 0.4rem, 0.74rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  hyphens: auto;
}

.sc-slide6__footer {
  margin: 0;
  padding: 0 clamp(0.25rem, 2vw, 0.5rem);
  text-align: center;
  max-width: min(38rem, 100%);
  font-size: clamp(0.64rem, 0.76vw + 0.44rem, 0.84rem);
  font-weight: 500;
  line-height: 1.45;
  color: #64748b;
}

.sc-slide6__footer em {
  font-style: italic;
}

.sc-slide6__footer strong {
  font-weight: 800;
  font-style: italic;
  color: #334155;
}

@media (max-width: 480px) {
  .sc-slide6__chart {
    grid-template-columns: 1fr;
    row-gap: clamp(0.35rem, 1.2vw + 0.2rem, 0.55rem);
  }

  .sc-slide6__label {
    justify-self: start;
    text-align: left;
    max-width: none;
    padding-right: 0;
  }

  .sc-slide6__label--bottom {
    margin-top: 0.15rem;
  }
}

/* ── PDF Showcase Folie 7: Datenschutz / DSGVO-orientiert — Text + freistehendes Schloss ─ */
.sc-slide7-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.sc-slide7 {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 2vw + 0.48rem, 1.35rem) clamp(0.82rem, 2.4vw + 0.52rem, 1.48rem)
    clamp(0.65rem, 1.8vw + 0.4rem, 1.15rem);
  box-sizing: border-box;
  background: #fff;
}

.sc-slide7__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 58% 48% at 2% 4%, rgba(127, 184, 203, 0.22), transparent 62%),
    radial-gradient(ellipse 52% 42% at 98% 96%, rgba(127, 184, 203, 0.16), transparent 58%);
}

.sc-slide7__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(0.58rem, 1.65vw + 0.32rem, 0.92rem);
  flex-shrink: 0;
}

.sc-slide7__accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: clamp(1.32rem, 2.75vw + 0.72rem, 1.98rem);
  border-radius: 3px;
  background: linear-gradient(180deg, #8ec4d4 0%, #6a9dad 70%, rgba(106, 157, 173, 0.5) 100%);
}

.sc-slide7__title {
  margin: 0;
  font-size: clamp(0.86rem, 1.45vw + 0.55rem, 1.32rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #1e293b;
}

.sc-slide7__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.65rem, 2.4vw + 0.42rem, 1.38rem);
  padding-bottom: 0;
}

.sc-slide7__copy {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding-right: 0;
}

.sc-slide7__tagline {
  margin: 0 0 clamp(0.38rem, 1.1vw + 0.2rem, 0.62rem);
  font-size: clamp(0.78rem, 0.95vw + 0.52rem, 1rem);
  font-weight: 800;
  line-height: 1.35;
  color: #334155;
}

.sc-slide7__lead {
  margin: 0 0 clamp(0.45rem, 1.25vw + 0.25rem, 0.72rem);
  font-size: clamp(0.68rem, 0.82vw + 0.46rem, 0.9rem);
  font-weight: 500;
  line-height: 1.48;
  color: #64748b;
}

.sc-slide7__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.32rem, 0.9vw + 0.15rem, 0.48rem);
}

.sc-slide7__list li {
  position: relative;
  padding-left: clamp(1rem, 1.35vw + 0.82rem, 1.15rem);
  font-size: clamp(0.66rem, 0.76vw + 0.46rem, 0.86rem);
  font-weight: 500;
  line-height: 1.42;
  color: #64748b;
}

.sc-slide7__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5e8c9c;
}

.sc-slide7__visual {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.38rem, 1vw + 0.18rem, 0.55rem);
  padding: clamp(4px, 0.65vw + 2px, 10px) 0 clamp(4px, 0.85vw + 2px, 12px)
    clamp(4px, 1.1vw + 2px, 14px);
  margin: 0;
  width: clamp(92px, 15vw + 42px, 130px);
  max-width: 36%;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
  align-self: center;
}

.sc-slide7__lock {
  width: clamp(48px, 8.5vw + 24px, 68px);
  height: auto;
  display: block;
  flex-shrink: 0;
  /* Ruhiger, scharfer Kontur-Schatten — kein bunter Glow */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 3px 8px rgba(15, 23, 42, 0.12));
}

.sc-slide7__lock-caption {
  margin: 0;
  font-size: clamp(0.68rem, 0.82vw + 0.46rem, 0.88rem);
  font-weight: 700;
  line-height: 1.2;
  color: #1e293b;
  text-align: center;
  max-width: 12rem;
}

.sc-slide7__lock-caption strong {
  font-weight: 800;
}

@media (max-width: 520px) {
  .sc-slide7__body {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.52rem, 2.2vw + 0.32rem, 0.88rem);
  }

  .sc-slide7__copy {
    width: 100%;
    max-width: none;
    padding-right: 0;
  }

  .sc-slide7__visual {
    align-self: flex-end;
    max-width: none;
    width: auto;
    min-width: min(132px, 44vw);
    padding: 0;
  }
}

/* ── PDF Showcase Folie 8 (PDF S. 8): „Wirtschaftlichkeit & ROI“ — hell, Zwei-Spalten + Fußnote unten ─ */
.sc-slide8-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.sc-slide8 {
  --slide8-brand: #6ba3b5;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(0.5rem, 1.35vw + 0.28rem, 0.88rem) clamp(0.65rem, 1.85vw + 0.36rem, 1.05rem)
    clamp(0.42rem, 1.2vw + 0.22rem, 0.72rem);
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
}

.sc-slide8__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  gap: clamp(0.32rem, 0.85vw + 0.14rem, 0.5rem);
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.sc-slide8__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 55% 48% at 4% 8%, rgba(107, 163, 181, 0.18), transparent 60%),
    radial-gradient(ellipse 52% 44% at 96% 92%, rgba(127, 184, 203, 0.14), transparent 58%);
}

.sc-slide8__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.sc-slide8__accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: clamp(1.28rem, 2.65vw + 0.68rem, 1.92rem);
  border-radius: 3px;
  background: linear-gradient(180deg, #7fb8cb 0%, var(--slide8-brand) 55%, rgba(107, 163, 181, 0.55) 100%);
  box-shadow: 0 0 12px rgba(107, 163, 181, 0.32);
}

.sc-slide8__title {
  margin: 0;
  font-size: clamp(0.86rem, 1.42vw + 0.53rem, 1.32rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: #1e293b;
}

.sc-slide8__body {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(0.45rem, 1.55vw + 0.24rem, 0.78rem);
  overflow: hidden;
}

.sc-slide8__lead,
.sc-slide8__card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: clamp(0.5rem, 1.35vw + 0.28rem, 0.78rem) clamp(0.55rem, 1.55vw + 0.3rem, 0.82rem);
  border-radius: clamp(11px, 1.8vw + 5px, 15px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  overflow: hidden;
}

.sc-slide8__col-head {
  flex: 0 0 auto;
  min-height: clamp(2.35rem, 6.2vw + 0.95rem, 2.85rem);
  margin-bottom: clamp(0.28rem, 0.72vw + 0.1rem, 0.42rem);
}

.sc-slide8__lead {
  background: linear-gradient(155deg, rgba(107, 163, 181, 0.14) 0%, rgba(255, 255, 255, 0.98) 52%, #fff 100%);
}

.sc-slide8__card {
  background: #fff;
}

.sc-slide8__lead-kicker,
.sc-slide8__card-kicker {
  margin: 0 0 0.22rem;
  font-size: clamp(0.56rem, 0.52vw + 0.38rem, 0.66rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slide8-brand);
}

.sc-slide8__lead-title {
  margin: 0;
  font-size: clamp(0.68rem, 0.88vw + 0.42rem, 0.88rem);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: #1e293b;
}

.sc-slide8__card-intro {
  margin: 0;
  font-size: clamp(0.58rem, 0.6vw + 0.38rem, 0.72rem);
  font-weight: 600;
  line-height: 1.32;
  color: #475569;
}

.sc-slide8__lead-list li,
.sc-slide8__list li {
  margin-bottom: clamp(0.22rem, 0.65vw + 0.1rem, 0.38rem);
  font-size: clamp(0.6rem, 0.64vw + 0.4rem, 0.74rem);
  font-weight: 500;
  line-height: 1.42;
  color: #475569;
}

.sc-slide8__lead-list li strong,
.sc-slide8__list li strong {
  font-weight: 800;
  color: #1e293b;
}

.sc-slide8__footnote {
  width: 100%;
  max-width: 32rem;
  flex: 0 0 auto;
  margin: 0;
  padding: clamp(0.14rem, 0.4vw, 0.24rem) 0.25rem 0;
  font-size: clamp(0.52rem, 0.48vw + 0.34rem, 0.62rem);
  line-height: 1.34;
  color: #64748b;
  font-style: italic;
  text-align: center;
  box-sizing: border-box;
}

.sc-slide8__list,
.sc-slide8__lead-list {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 0 1.05rem;
  list-style-type: disc;
}

.sc-slide8__list li {
  padding-left: 0.06rem;
  color: #64748b;
}

.sc-slide8__list li:last-child,
.sc-slide8__lead-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .sc-slide8__inner {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sc-slide8__body {
    grid-template-columns: 1fr;
    flex: 0 1 auto;
    gap: clamp(0.42rem, 1.75vw + 0.28rem, 0.65rem);
  }

  .sc-slide8__col-head {
    min-height: 0;
  }
}

/* PDF Showcase: Folie 4 („Smart Triage“) als Vektor-HTML — bewusst zurückhaltende Skala, nichts ragt über den Showcase-Kasten */
.sc-slide4-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
}

.sc-slide4-html-overlay--triage.sc-slide4-html-overlay--readable-boost {
  transform-origin: center center;
  transform: scale(1.055);
}

.sc-slide4-html-overlay--triage {
  padding: clamp(0.72rem, 2.1vw + 0.42rem, 1.35rem) clamp(0.75rem, 2.6vw + 0.52rem, 1.55rem)
    clamp(0.72rem, 2.1vw + 0.48rem, 1.35rem);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background-color: #121e2d;
  background-image: radial-gradient(
    120% 70% at 92% -8%,
    rgba(104, 180, 198, 0.22),
    transparent 52%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.sc-slide4-triage {
  --sc-triage-accent: #5e8c9c;
  display: flex;
  flex-direction: column;
  gap: clamp(0.38rem, 1.2vw + 0.22rem, 0.72rem);
  flex: 1;
  justify-content: flex-start;
  min-height: 0;
  max-width: 100%;
  width: 100%;
}

.sc-slide4-triage__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(2px, 0.65vw + 1px, 6px);
  flex-shrink: 0;
}

.sc-slide4-triage__accent-bar {
  flex-shrink: 0;
  width: 4px;
  height: clamp(1.38rem, 2.95vw + 0.82rem, 2.08rem);
  border-radius: 2px;
  background: linear-gradient(180deg, #7fb8cb 0%, #5e8c9c 72%, rgba(94, 140, 156, 0.45) 100%);
  box-shadow: 0 0 10px rgba(127, 184, 203, 0.28);
}

.sc-slide4-triage__title {
  margin: 0;
  font-size: clamp(0.88rem, 1.55vw + 0.62rem, 1.42rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: #f8fafc;
  overflow-wrap: anywhere;
}

.sc-slide4-triage__columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(0.62rem, 2.8vw + 0.42rem, 1.42rem);
  flex: 1;
  min-height: 0;
}

.sc-slide4-triage__copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Notfall-Zeile: unterhalb der beiden Spalten, am Fuß der Folie gedrückt (unten links) */
.sc-slide4-triage__callout-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: clamp(0.5rem, 2.5vw + 0.08rem, 1.35rem);
}

.sc-slide4-triage__callout--slide-bottom-left {
  flex: 0 1 auto;
  max-width: min(34rem, 100%);
}

@media (max-width: 520px) {
  .sc-slide4-triage__columns {
    flex-direction: column;
    gap: clamp(0.75rem, 3.2vw, 1.12rem);
  }

  .sc-slide4-triage__visual {
    order: -1;
    align-self: center;
    margin-bottom: 0.15rem;
  }

  .sc-slide4-triage__callout-row {
    margin-top: clamp(0.55rem, 3.2vw + 0.3rem, 1.05rem);
  }
}

.sc-slide4-triage__subtitle {
  margin: 0 0 clamp(0.28rem, 1vw + 0.12rem, 0.62rem);
  font-size: clamp(0.8rem, 0.92vw + 0.62rem, 1.06rem);
  font-weight: 800;
  line-height: 1.38;
  color: var(--sc-triage-accent);
}

.sc-slide4-triage__lead {
  margin: 0;
  font-size: clamp(0.72rem, 0.78vw + 0.58rem, 0.98rem);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(229, 236, 244, 0.88);
}

.sc-slide4-triage__callout {
  padding: clamp(0.58rem, 1.45vw + 0.42rem, 0.82rem)
    clamp(0.82rem, 2vw + 0.52rem, 1.12rem)
    clamp(0.58rem, 1.45vw + 0.42rem, 0.82rem)
    clamp(0.82rem, 2vw + 0.52rem, 1.08rem);
  margin: 0;
  background-color: #4a2b33;
  border-left: 5px solid #e11d48;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.sc-slide4-triage__callout p {
  margin: 0;
  font-size: clamp(0.68rem, 0.72vw + 0.54rem, 0.9rem);
  line-height: 1.46;
  color: rgba(251, 250, 250, 0.97);
}

.sc-slide4-triage__callout strong {
  font-weight: 800;
  letter-spacing: 0.015em;
}

.sc-slide4-triage__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.4rem, 1.35vw + 0.08rem, 1rem);
  min-height: 0;
  flex-shrink: 0;
  align-self: center;
}

/* Lotus: Türkis innen, feiner weißer Rand (Glas-Kante) */
.sc-slide4-triage__lotus-wrap {
  position: relative;
  display: block;
  width: clamp(5.75rem, 14vw + 2.75rem, 9.85rem);
  aspect-ratio: 300 / 200;
  max-width: 100%;
}

.sc-slide4-triage__lotus-ring {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.92);
  transform: scale(1.026);
  transform-origin: center;
  mask-image: url('./assets/aiva-lotus-mark.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('./assets/aiva-lotus-mark.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.35));
  pointer-events: none;
}

.sc-slide4-triage__lotus-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--sc-triage-accent);
  mask-image: url('./assets/aiva-lotus-mark.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('./assets/aiva-lotus-mark.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.65))
    drop-shadow(0 8px 20px rgba(0, 0, 0, 0.38));
}

/* ── PDF Showcase Folie 10 (PDF S. 10): „In 3 Schritten zur KI-Praxis“ ─ */
.sc-slide10-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.sc-slide10 {
  --slide10-bubble: clamp(2.65rem, 5vw + 1rem, 3.35rem);
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(0.72rem, 1.9vw + 0.45rem, 1.28rem) clamp(0.8rem, 2.3vw + 0.48rem, 1.42rem)
    clamp(0.55rem, 1.5vw + 0.35rem, 1rem);
  box-sizing: border-box;
  background: #fff;
}

.sc-slide10__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 52% 44% at 96% 4%, rgba(127, 184, 203, 0.16), transparent 58%),
    radial-gradient(ellipse 48% 40% at 4% 96%, rgba(127, 184, 203, 0.12), transparent 55%);
}

.sc-slide10__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(0.4rem, 1.2vw + 0.22rem, 0.72rem);
  flex-shrink: 0;
}

.sc-slide10__accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: clamp(1.28rem, 2.65vw + 0.68rem, 1.88rem);
  border-radius: 3px;
  background: linear-gradient(180deg, #8ec4d4 0%, #6a9dad 72%, rgba(106, 157, 173, 0.5) 100%);
}

.sc-slide10__title {
  margin: 0;
  font-size: clamp(0.86rem, 1.42vw + 0.53rem, 1.28rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: #1e293b;
}

.sc-slide10__diagram {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.25rem, 1.2vw, 0.65rem) 0;
}

.sc-slide10__diagram-inner {
  position: relative;
  width: 100%;
  max-width: min(41rem, 100%);
}

.sc-slide10__connector {
  display: none;
  position: absolute;
  left: calc(100% / 6);
  top: calc(var(--slide10-bubble) / 2);
  width: calc(100% * 2 / 3);
  height: 2px;
  transform: translateY(-50%);
  background: #e7edf3;
  border-radius: 1px;
  z-index: 0;
}

@media (min-width: 561px) {
  .sc-slide10__connector {
    display: block;
  }
}

.sc-slide10__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.42rem, 1.85vw + 0.22rem, 0.92rem);
  position: relative;
  z-index: 1;
}

.sc-slide10__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.sc-slide10__bubble {
  flex-shrink: 0;
  width: var(--slide10-bubble);
  height: var(--slide10-bubble);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.85vw + 0.72rem, 1.42rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(155deg, #4aa3b4 0%, #3d8f9f 52%, #347d8f 100%);
  box-shadow: 0 4px 14px rgba(58, 130, 145, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.sc-slide10__step-title {
  margin: clamp(0.48rem, 1.2vw + 0.32rem, 0.72rem) 0 clamp(0.22rem, 0.62vw + 0.12rem, 0.38rem);
  font-size: clamp(0.68rem, 0.82vw + 0.46rem, 0.88rem);
  font-weight: 800;
  line-height: 1.22;
  color: #1e293b;
  letter-spacing: -0.018em;
}

.sc-slide10__step-text {
  margin: 0;
  padding: 0 clamp(2px, 1vw, 6px);
  font-size: clamp(0.6rem, 0.72vw + 0.41rem, 0.78rem);
  font-weight: 500;
  line-height: 1.42;
  color: #64748b;
  max-width: 14rem;
}

@media (max-width: 560px) {
  .sc-slide10__steps {
    grid-template-columns: 1fr;
    gap: clamp(0.82rem, 3vw + 0.42rem, 1.25rem);
  }

  .sc-slide10__step-text {
    max-width: 22rem;
  }
}

/* ── PDF Showcase Folie 11 (PDF S. 11): „Der Wettbewerbsvorteil“ — Vektor-HTML 1:1 zur Folie ─ */
.sc-slide11-html-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  min-height: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.sc-slide11 {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 2vw + 0.5rem, 1.25rem) clamp(0.85rem, 2.4vw + 0.55rem, 1.5rem)
    clamp(0.7rem, 1.8vw + 0.45rem, 1.2rem);
  background: linear-gradient(165deg, #f9fbfc 0%, #f1f6f9 48%, #eef3f7 100%);
  color: #0f172a;
}

.sc-slide11__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.58;
}

.sc-slide11__glow--tr {
  width: clamp(140px, 42%, 260px);
  height: clamp(140px, 42%, 260px);
  top: clamp(-44px, -8vw, -20px);
  right: clamp(-52px, -10vw, -24px);
  background: radial-gradient(circle, rgba(107, 163, 181, 0.44) 0%, transparent 72%);
}

.sc-slide11__glow--bl {
  width: clamp(120px, 36%, 220px);
  height: clamp(120px, 36%, 220px);
  bottom: clamp(-36px, -7vw, -16px);
  left: clamp(-44px, -9vw, -20px);
  background: radial-gradient(circle, rgba(77, 141, 161, 0.3) 0%, transparent 70%);
}

.sc-slide11__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(0.5rem, 1.8vw + 0.25rem, 0.95rem);
}

.sc-slide11__accent-bar {
  flex-shrink: 0;
  width: 4px;
  height: clamp(1.32rem, 2.8vw + 0.72rem, 2rem);
  border-radius: 2px;
  background: linear-gradient(180deg, #7fb8cb 0%, #5e8c9c 72%, rgba(94, 140, 156, 0.45) 100%);
  box-shadow: 0 0 10px rgba(127, 184, 203, 0.28);
}

.sc-slide11__title {
  margin: 0;
  font-size: clamp(0.95rem, 1.65vw + 0.65rem, 1.48rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: #0f172a;
}

.sc-slide11__table-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.sc-slide11__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.7rem, 0.82vw + 0.54rem, 0.93rem);
  line-height: 1.42;
}

.sc-slide11__table thead tr {
  border-bottom: 2px solid rgba(94, 140, 156, 0.88);
}

.sc-slide11__th {
  padding: 0.48rem 0.3rem 0.58rem;
  font-weight: 800;
  color: #0f172a;
  vertical-align: bottom;
}

.sc-slide11__th--feature {
  text-align: left;
  width: 34%;
}

.sc-slide11__th--mfa {
  text-align: center;
  width: 33%;
}

.sc-slide11__th--aiva {
  text-align: right;
  width: 33%;
  color: #3d7588;
  font-weight: 800;
}

.sc-slide11__table tbody tr {
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.sc-slide11__table tbody tr:last-child {
  border-bottom: none;
}

.sc-slide11__table td {
  padding: clamp(0.45rem, 1.3vw + 0.22rem, 0.78rem) 0.3rem;
  color: #1e293b;
  vertical-align: middle;
}

.sc-slide11__table td:first-child {
  text-align: left;
  font-weight: 600;
}

.sc-slide11__td-center {
  text-align: center;
  font-weight: 500;
}

.sc-slide11__td-aiva {
  text-align: right;
  color: #4d8da1;
  font-weight: 600;
}

.sc-slide11__td-aiva strong {
  font-weight: 800;
}

@media (max-width: 440px) {
  .sc-slide11__table {
    font-size: 0.64rem;
  }
}

/* Skeleton loader while PDF initialises */
.sc-skeleton {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: inherit;
}

.sc-skeleton-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
}

.sc-skeleton-wave span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4D8DA1, #6BA3B5 70%, rgba(107,163,181,0.3));
  animation: showcaseBar 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
}

/* Footer: progress bar + dots */
.sc-footer {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}

.sc-progress-track {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(31, 38, 135, 0.06);
}

.sc-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(77, 141, 161, 0.88) 0%,
    #6BA3B5 45%,
    rgba(107, 163, 181, 0.75) 100%
  );
  border-radius: 100px;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
  box-shadow: 0 0 12px rgba(107, 163, 181, 0.25);
}

/* Footer-Zeile: kleine Glas-Pfeile am Rand, Dots in der Mitte (Layout des Bild-Kastens unverändert) */
.sc-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 10px);
  width: 100%;
}

.sc-footer-nav .sc-dots {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.sc-nav-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(252, 253, 255, 0.52) 38%,
    rgba(248, 250, 252, 0.58) 62%,
    rgba(255, 255, 255, 0.68) 100%
  );
  backdrop-filter: blur(26px) saturate(195%);
  -webkit-backdrop-filter: blur(26px) saturate(195%);
  color: #4d8da1;
  cursor: pointer;
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 4px 12px rgba(15, 23, 42, 0.05);
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms ease,
    box-shadow 200ms ease;
}

.sc-nav-arrow:hover {
  color: #3d7a8f;
  transform: scale(1.05);
}

.sc-nav-arrow:active {
  transform: scale(0.96);
}

.sc-nav-arrow:focus-visible {
  outline: 2px solid rgba(107, 163, 181, 0.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sc-nav-arrow {
    transition-duration: 0.001ms;
  }

  .sc-nav-arrow:hover,
  .sc-nav-arrow:active {
    transform: none;
  }
}

/* Navigation dots */
.sc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(107, 163, 181, 0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 220ms ease, transform 220ms ease, width 220ms ease;
}

.sc-dot--active {
  background: rgba(77, 141, 161, 0.92);
  width: 18px;
  border-radius: 100px;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.sc-dot:hover:not(.sc-dot--active) {
  background: rgba(107, 163, 181, 0.42);
  transform: scale(1.15);
}
/* ── System Diagnose Dashboard ──────────────────────────────────────────────── */
.sys-item        { display: inline-flex; align-items: center; gap: 4px; }
.sys-ok          { color: #16a34a; }
.sys-off         { color: #94a3b8; }

/* ── Demo: Gesprächs-Ende — fixe Statusleiste unten (kein großer Kasten) ───── */
.call-summary-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.32rem 1rem max(0.32rem, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(185%);
  -webkit-backdrop-filter: blur(18px) saturate(185%);
  box-shadow:
    0 -2px 14px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(51, 65, 85, 0.95);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s ease;
  pointer-events: none;
}

.call-summary-bar[hidden] {
  display: none !important;
}

.call-summary-bar:not([hidden]) {
  display: flex;
}

.call-summary-bar--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.call-summary-bar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.65rem;
  max-width: min(56rem, 100%);
  text-align: center;
}

.call-summary-bar__title {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0f172a;
}

.call-summary-bar__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.call-summary-bar__sep {
  width: 1px;
  height: 0.85rem;
  background: rgba(148, 163, 184, 0.55);
  flex-shrink: 0;
}

.call-summary-bar__meta {
  color: rgba(71, 85, 105, 0.95);
  white-space: nowrap;
}

.call-summary-bar__strong {
  font-weight: 700;
  color: #0f172a;
}

.call-summary-bar__quota-inline {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.call-summary-bar__quota-text {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2rem;
  white-space: nowrap;
}

.call-summary-bar__quota-slash {
  font-weight: 600;
  color: rgba(100, 116, 139, 0.85);
}

.call-summary-bar__quota-cap {
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.call-summary-bar__quota-remain {
  font-weight: 600;
  color: rgba(71, 85, 105, 0.9);
  font-size: 0.78rem;
}

.call-summary-bar__quota-meter {
  display: block;
  flex: 0 0 auto;
  width: 4.25rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 196, 204, 0.2);
  border: 1px solid rgba(77, 163, 181, 0.45);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(77, 163, 181, 0.12);
}

.call-summary-bar__quota-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #4da3b5 0%, #00c4cc 55%, #6bc4d2 100%);
  box-shadow: 0 0 8px rgba(0, 196, 204, 0.55);
  transition: width 0.45s cubic-bezier(0.33, 1, 0.2, 1);
}

.call-summary-bar__quota-inline--exhausted .call-summary-bar__quota-meter {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
}

.call-summary-bar__quota-inline--exhausted .call-summary-bar__quota-meter-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #e11d48 100%);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.35);
}

.call-summary-bar__quota-inline--exhausted .call-summary-bar__strong,
.call-summary-bar__quota-inline--exhausted .call-summary-bar__quota-remain {
  color: #b45309;
}

@media (max-width: 520px) {
  .call-summary-bar__inner {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }

  .call-summary-bar__sep:nth-of-type(2),
  .call-summary-bar__sep:nth-of-type(3) {
    display: none;
  }

  .call-summary-bar__quota-meter {
    width: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .call-summary-bar {
    transition-duration: 0.01ms;
  }
}

/* ── Sync Toast ─────────────────────────────────────────────────────────────── */
.sync-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 1.5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(108, 164, 181, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
  max-width: 320px;
  /* Hidden by default */
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.sync-toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sync-toast__icon {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.sync-toast__icon--spin::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(108, 164, 181, 0.30);
  border-top-color: #6CA4B5;
  border-radius: 50%;
  animation: toastSpin 0.8s linear infinite;
}

@keyframes toastSpin {
  to { transform: rotate(360deg); }
}

/* ── Integration Status Indicator ──────────────────────────────────────────── */
.integration-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin-top: 0.75rem;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.integration-status:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

.integration-status--idle {
  opacity: 0;
}

.integration-status--syncing {
  background: rgba(107, 163, 181, 0.12);
  border: 1px solid rgba(107, 163, 181, 0.30);
  color: #4D8DA1;
  animation: statusPulse 1.4s ease-in-out infinite;
}

.integration-status--success {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #15803d;
}

.integration-status--error {
  background: rgba(239, 68, 68, 0.09);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #b91c1c;
}

/* ── Kalender-Buchung: sichtbare HTTP-200 Bestätigung (Demo + Landing) ───────── */
.calendar-booking-confirmation {
  display: none;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 36px rgba(31, 38, 135, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 600;
  color: #14532d;
  text-align: left;
  max-width: 100%;
}

.calendar-booking-confirmation--visible {
  display: flex;
}

.calendar-booking-confirmation:not([hidden]).calendar-booking-confirmation--visible {
  display: flex;
}

.calendar-booking-confirmation__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.22);
  font-size: 0.75rem;
  line-height: 1;
}

.calendar-booking-confirmation__text {
  font-weight: 600;
  color: #166534;
}

.calendar-booking-confirmation__text strong {
  font-weight: 800;
  color: #14532d;
}

/* Nur index.html: Hinweis-Karte unten rechts (Demo: normaler Fluss unter Integration) */
.calendar-booking-confirmation--page-fixed.calendar-booking-confirmation--visible {
  position: fixed;
  bottom: 6.5rem;
  right: 1.25rem;
  z-index: 9980;
  margin-top: 0;
}

@media (max-width: 640px) {
  .calendar-booking-confirmation--page-fixed.calendar-booking-confirmation--visible {
    left: 1rem;
    right: 1rem;
    bottom: 5.5rem;
    max-width: none;
  }
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1;    }
}

/* ── Legal Pages ────────────────────────────────────────────────────────────── */
.legal-page {
  min-height: 100vh;
  color: #1e293b;
  font-family: Inter, system-ui, sans-serif;
}

.legal-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.legal-card__header {
  padding: 2.5rem 2.5rem 2rem;
  border-bottom: 1px solid rgba(108, 164, 181, 0.18);
  background: linear-gradient(135deg, rgba(108,164,181,0.06) 0%, rgba(255,255,255,0) 100%);
}

.legal-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #6CA4B5;
  background: rgba(108, 164, 181, 0.10);
  border: 1px solid rgba(108, 164, 181, 0.25);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.85rem;
}

.legal-card__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.4rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.legal-card__subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}

.legal-card__body {
  padding: 2rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.legal-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-section--warning {
  background: rgba(254, 242, 242, 0.5);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(252, 165, 165, 0.35);
  margin: 0.5rem 0;
}

.legal-section h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #334155;
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
}

.legal-section p {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.7;
  margin: 0 0 0.6rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 0.4rem 0 0.6rem 1.1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal-section ul li {
  font-size: 0.87rem;
  color: #475569;
  line-height: 1.65;
  list-style: disc;
}

/* Unterabschnitte in juristischen Seiten (ohne neue H2-Nummerierung) */
.legal-subsection .legal-subheading {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.38;
  color: #334155;
  letter-spacing: -0.018em;
}

.legal-section .legal-hint-muted,
.legal-hint-muted {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin-top: 0.65rem !important;
}

.legal-link {
  color: #6CA4B5;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s;
}

.legal-link:hover {
  color: #4D8DA1;
}

.legal-card__footer {
  padding: 1rem 2.5rem;
  background: rgba(248, 250, 252, 0.6);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: right;
}

@media (max-width: 640px) {
  .legal-card__header,
  .legal-card__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .legal-card__footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ── Enterprise Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(108, 164, 181, 0.30);
  transition: background 0.3s ease;
}

.site-footer:hover {
  background: rgba(255, 255, 255, 0.15);
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 1.75rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(108, 164, 181, 0.15);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.site-footer .aiva-logo-link .aiva-header-wordmark-fill svg.aiva-header-logo-svg {
  height: 1.75rem;
}

.site-footer__slogan {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  max-width: 20ch;
}

.site-footer__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #475569;
  background: rgba(108, 164, 181, 0.10);
  border: 1px solid rgba(108, 164, 181, 0.22);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  width: fit-content;
  max-width: 100%;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .showcase-col {
    padding: 12px 0 4px;
  }

  .showcase-sunlit-shell {
    --showcase-shell-pad: 7px;
  }

  .site-footer__badge {
    font-size: 0.64rem;
    padding: 0.22rem 0.52rem;
  }
}

.site-footer__heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
  margin: 0 0 0.25rem;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.site-footer__link {
  font-size: 0.82rem;
  color: #475569;
  text-decoration: none;
  transition: color 0.18s;
}

.site-footer__link:hover {
  color: #6CA4B5;
}

.site-footer__text {
  font-size: 0.82rem;
  color: #64748b;
}

.site-footer__copy {
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  color: #94a3b8;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING #showcase — Vertrauen & Ablauf (symmetrische Glass-Panels)
   ═══════════════════════════════════════════════════════════════════════════ */

section.aiva-showcase {
  scroll-margin-top: 6.5rem;
}

section.aiva-showcase--flow .aiva-showcase__stack {
  max-width: 100%;
}

/* ── Editorial: ab DSGVO-Band — kein Glas-Kasten, viel Weißraum ── */
.landing-dsgvo-pills__dot {
  display: inline-block;
  width: 0.28rem;
  height: 0.28rem;
  margin: 0 0.55rem;
  border-radius: 9999px;
  background: rgba(100, 116, 139, 0.45);
  vertical-align: middle;
}

.landing-trust-section {
  position: relative;
}

.landing-trust-section__accent {
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 4px;
  border-radius: 9999px;
  background: linear-gradient(
    180deg,
    rgba(5, 150, 105, 0.92) 0%,
    rgba(45, 212, 191, 0.5) 55%,
    rgba(45, 212, 191, 0.12) 100%
  );
}

.landing-editorial-points {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-editorial-points > li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #334155;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.landing-editorial-points > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.landing-editorial-points--loose > li {
  padding: 1.05rem 0;
}

.landing-editorial-points__bullet {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, #059669 0%, #34d399 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.landing-step-timeline {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
}

.landing-step-timeline::before {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 0.6rem;
  bottom: 0.75rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.45) 0%, rgba(148, 163, 184, 0.08) 100%);
}

.landing-step-timeline > li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.25rem 1.15rem;
  padding-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.landing-step-timeline > li:last-child {
  padding-bottom: 0;
}

.landing-step-timeline__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 14px rgba(15, 23, 42, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.88);
}

.landing-pricing-editorial__sep {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 163, 184, 0.35) 20%,
    rgba(45, 212, 191, 0.35) 50%,
    rgba(148, 163, 184, 0.35) 80%,
    transparent 100%
  );
}

@media (min-width: 768px) {
  .landing-step-timeline > li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.25rem 1.35rem;
    padding-bottom: 2.25rem;
  }

  .landing-step-timeline::before {
    left: 1.25rem;
  }

  .landing-step-timeline__n {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }
}

/* ── LANDING „Warum AiVA“ — Bento-Kacheln (breiter, weniger „endlos runter“) ─ */
.landing-why__bento {
  align-items: stretch;
}

@media (min-width: 1024px) {
  .landing-why__bento {
    grid-auto-rows: minmax(0, 1fr);
  }
}

.landing-why__tile {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  align-self: stretch;
}

.landing-why__list > li {
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

.landing-why__list > li:first-child {
  padding-top: 0.35rem;
}

/* Showcase linke Spalte: vier Schritte als 2×2-Raster auf Tablet+ */
@media (min-width: 768px) {
  .aiva-how-steps--bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    align-items: stretch;
  }

  .aiva-how-steps--bento .aiva-how-step {
    margin: 0;
    padding: 1rem 1rem 1.1rem;
    border-top: none;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 0 0 1px rgba(186, 199, 214, 0.35);
  }

  .aiva-how-steps--bento .aiva-how-step:first-child {
    padding-top: 1rem;
  }
}


.aiva-how-panel {
  display: flex;
  flex-direction: column;
}

.aiva-how-panel__head h2 {
  text-wrap: balance;
  line-height: 1.15;
}

.aiva-how-panel__lead {
  max-width: 38rem;
}

/* Showcase‑Panels: gleicher Tiefen- + türkis‑Schein wie Glass-Karten */
.aiva-how-panel {
  border: none !important;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    inset 0 1px 2px rgba(255, 255, 255, 0.88),
    inset 0 -1px 8px rgba(15, 23, 42, 0.1),
    0 0 22px rgba(79, 188, 199, 0.4),
    0 20px 55px rgba(2, 6, 23, 0.1),
    0 15px 35px rgba(0, 0, 0, 0.18);
}

.aiva-how-steps {
  margin: 0;
}

.aiva-how-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(203, 213, 225, 0.9);
}

.aiva-how-step:first-child {
  padding-top: 0;
  border-top: none;
}

.aiva-how-step__idx {
  flex: 0 0 2.35rem;
  width: 2.35rem;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.15;
  padding: 0.45rem 0.2rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
  border-radius: 0.5rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 3px 10px rgba(15, 23, 42, 0.14);
}

.aiva-how-step__body h3 {
  line-height: 1.25;
}

.aiva-how-tech__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aiva-how-tech__ico {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  color: #fff;
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  margin-top: 0.1rem;
}

@media (min-width: 768px) {
  .aiva-how-step {
    gap: 1.15rem;
  }

  .aiva-how-step__idx {
    flex-basis: 2.5rem;
    width: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.72rem;
  }
}