/* =================================================================
   ELEVATEM · MAIN STYLES
   Layout-Primitives, Navigation, Footer, Buttons
   ================================================================= */

/* === Container === */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-text {
  width: 100%;
  max-width: var(--container-text);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* === Section === */
section {
  position: relative;
  padding-block: var(--section-py);
}

/* === Grid Helpers === */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* === Flex Helpers === */
.flex {
  display: flex;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-col {
  flex-direction: column;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }

/* =================================================================
   NAVIGATION
   ================================================================= */

.nav {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: calc(100% - var(--space-5) * 2);
  max-width: var(--container-max);
  padding: 8px 14px 8px 18px;
  /* v4.2: Kachel entfernt — keine bg, kein border, kein border-radius, kein backdrop-filter.
     Lesbarkeit wird durch .nav-fade-Gradient (siehe unten) am oberen Rand sichergestellt. */
}

/* v4.2: Sanfter Fade-Gradient am oberen Rand der Seite.
   Page-BG verblasst von oben nach unten in einem ~110px hohen Streifen.
   Nav-Text bleibt gut lesbar wenn Content darunter scrollt, ohne sichtbare Kachel. */
.nav-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  background: linear-gradient(180deg,
    rgba(30, 28, 28, 0.92) 0%,
    rgba(30, 28, 28, 0.65) 45%,
    rgba(30, 28, 28, 0.20) 80%,
    rgba(30, 28, 28, 0) 100%);
  pointer-events: none;
  z-index: calc(var(--z-nav) - 1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-logo img {
  height: 22px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text);
}

.nav-cta {
  padding: 8px 16px;
  background: #E6FF4B;
  color: #0F0F12;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.nav-cta:hover {
  background: #EFFF6A;
  color: #0F0F12;
  transform: translateY(-1px);
}

/* Mobile-Nav-Toggle */
.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  transition: background var(--duration-base) var(--ease-out);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-toggle-icon {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: background var(--duration-base) var(--ease-out);
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  bottom: -6px;
}

.nav-toggle.active .nav-toggle-icon {
  background: transparent;
}

.nav-toggle.active .nav-toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active .nav-toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile-Nav-Drawer */
@media (max-width: 991px) {
  .nav {
    top: var(--space-3);
    width: calc(100% - var(--space-4) * 2);
    padding: var(--space-3) var(--space-4);
  }

  .nav-toggle,
  .nav-links {
    display: none !important;
  }

  /* Mobile: Logo zentriert, kein Menu */
  .nav-inner {
    justify-content: center;
  }

  .nav-logo {
    margin: 0 auto;
  }
}

/* =================================================================
   MAIN — Padding-Top, damit Fixed-Nav nicht überlappt
   ================================================================= */

main {
  padding-top: calc(80px + var(--space-2));
}

/* =================================================================
   BUTTONS
   ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 480px) {
  .btn {
    white-space: normal;
    width: 100%;
    text-align: center;
  }
}

/* v3.8: Premium-Buttons — matt (kein Gradient), Solid-Color, 12px Radius, Inline-SVG-Favicon */
.btn-primary {
  border-radius: 999px;
  padding: 14px 26px 14px 14px;
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #0F0F12;
  border: 1px solid rgba(155, 195, 0, 0.4);
  background: #E6FF4B;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 10px 24px -10px rgba(230, 255, 75, 0.35);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.4, 1.2),
              background 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.btn-primary:hover {
  background: #EFFF6A;
  color: #0F0F12;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 18px rgba(0, 0, 0, 0.16),
    0 22px 44px -10px rgba(230, 255, 75, 0.55);
}

.btn-primary:active {
  transform: translateY(-1px);
  background: #DDF53F;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(230, 255, 75, 0.25);
}

.btn-secondary {
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #25252A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.18);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.4, 1.2),
              background 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.9, 0.4, 1.2);
}

.btn-secondary:hover {
  background: #2F2F35;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.22),
    0 16px 32px -10px rgba(0, 0, 0, 0.35);
}

.btn-secondary:active { transform: translateY(-1px); }

/* Favicon-Mark im Primary-Button — Inline-SVG, kein File-Dependency */
.btn-favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1E1C1C;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-favicon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
}

.btn-ghost:hover {
  color: var(--color-text);
}

.btn-lg {
  padding: var(--space-5) var(--space-7);
  font-size: var(--fs-md);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}

.btn-icon {
  padding: var(--space-3);
  width: 44px;
  height: 44px;
}

/* Arrow-Animation für CTAs */
.btn .arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* =================================================================
   HERO SECTION
   ================================================================= */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  /* v4.0: kein solid bg mehr — body-Grid scheint durch */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(45, 38, 32, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(230, 255, 75, 0.035) 0%, transparent 70%);
}

/* Sekundärer Ambient-Glow um den Notification-Stack */
.hero::before {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 50%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(
    ellipse at center,
    rgba(230, 255, 75, 0.08) 0%,
    transparent 65%
  );
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
}

.hero-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 5vw, var(--space-8));
  align-items: start;
}

/* === Content === */

.hero-content {
  position: relative;
  z-index: 2;
}

/* v3.7: Word-Reveal-System — Badge, H1-Words, Sub, CTAs, Trust animieren sequenziell */
.hero-content > .badge,
.hero-content > .hero-subheadline,
.hero-content > .hero-ctas,
.hero-content > .hero-trust {
  opacity: 0;
  animation: hero-fade-in 0.6s var(--ease-out) forwards;
}
.hero-content > .badge { animation-delay: 0s; }
.hero-content > .hero-subheadline { animation-delay: 1.0s; }
.hero-content > .hero-ctas { animation-delay: 1.2s; }
.hero-content > .hero-trust { animation-delay: 1.35s; }

.hero-headline {
  margin-block: var(--space-5) var(--space-6);
  font-size: clamp(var(--fs-2xl), 4.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Hero: rotierendes Wort (Brevo-Stil) — wechselt animiert in der Headline */
.hero-rotator {
  display: inline-block;
  color: var(--color-accent);
}
.hero-rotator-word {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.hero-rotator-word.is-out {
  opacity: 0;
  transform: translateY(-0.35em);
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator-word { transition: none; }
}

.hero-headline .text-accent {
  position: relative;
  display: inline-block;
  color: var(--color-accent);
}
.hero-subheadline {
  font-size: clamp(var(--fs-base), 1.5vw, var(--fs-md));
  color: var(--color-text-muted);
  max-width: 540px;
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-7);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  margin-top: 0;
}

.hero-trust-dot { display: none; }

.hero-trust-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
  will-change: opacity, transform;
  animation: trust-pulse 2.4s ease-in-out infinite;
}

/* === Hero-Feed (Live Shopify-Notification-Cascade) === */

.hero-feed {
  position: relative;
  min-height: 460px;
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  animation: hero-fade-in 1.2s var(--ease-out) 0.15s both;
}

.hero-feed-glow {
  position: absolute;
  inset: -5%;
  background: radial-gradient(
    ellipse 65% 75% at 50% 50%,
    rgba(230, 255, 75, 0.14) 0%,
    transparent 65%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: glow-breathe 4s ease-in-out infinite;
  will-change: opacity, transform;
}

.hero-feed-stack {
  position: relative;
  height: 420px;
  z-index: 1;
}

.feed-notif {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(22, 22, 26, 0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: var(--border-thin);
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  opacity: 0;
  animation: liquid-cascade 15s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
  will-change: transform, opacity, box-shadow;
}

.feed-notif:nth-child(1) { animation-delay: 0s; }
.feed-notif:nth-child(2) { animation-delay: 3s; }
.feed-notif:nth-child(3) { animation-delay: 6s; }
.feed-notif:nth-child(4) { animation-delay: 9s; }
.feed-notif:nth-child(5) { animation-delay: 12s; }

.shopify-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #FFFFFF url('/assets/images/shopify-icon.webp?v=3.9') center / 95% no-repeat;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.feed-notif-body {
  flex: 1;
  min-width: 0;
}

.feed-notif-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
  gap: var(--space-2);
}

.feed-notif-title {
  font-size: var(--fs-base);
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feed-notif-time {
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  font-weight: 400;
  white-space: nowrap;
}

.feed-notif-text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
}

/* === Animationen === */

@keyframes hero-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes liquid-cascade {
  0% {
    opacity: 0;
    transform: translateY(-32px) scale(1.03) rotate(2deg);
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 0 0 rgba(230, 255, 75, 0);
    z-index: 1;
  }
  3% {
    opacity: 1;
    transform: translateY(-4px) scale(1.06) rotate(-0.6deg);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.18),
      0 0 32px rgba(230, 255, 75, 0.55),
      0 4px 18px rgba(0, 0, 0, 0.3);
    z-index: 15;
  }
  6% {
    transform: translateY(0) scale(1) rotate(0);
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
      0 0 14px rgba(230, 255, 75, 0.18),
      0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 15;
  }
  19% { transform: translateY(0) scale(1); opacity: 1; z-index: 15; }
  21% {
    transform: translateY(72px) scale(0.97);
    opacity: 0.92;
    z-index: 14;
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.22);
  }
  39% { transform: translateY(72px) scale(0.97); opacity: 0.92; z-index: 14; }
  41% { transform: translateY(140px) scale(0.94); opacity: 0.72; z-index: 13; }
  59% { transform: translateY(140px) scale(0.94); opacity: 0.72; z-index: 13; }
  61% { transform: translateY(200px) scale(0.91); opacity: 0.48; z-index: 12; }
  79% { transform: translateY(200px) scale(0.91); opacity: 0.48; z-index: 12; }
  81% { transform: translateY(254px) scale(0.88); opacity: 0.22; z-index: 11; }
  94% { transform: translateY(254px) scale(0.88); opacity: 0.22; z-index: 11; }
  100% { transform: translateY(300px) scale(0.85); opacity: 0; z-index: 1; }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes trust-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* === Reduced Motion === */

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-feed,
  .hero-feed-glow,
  .feed-notif,
  .hero-trust-dot {
    animation: none !important;
  }

  /* v3.8: Word-Reveal + Staged-Animation deaktivieren */
  .hero-content > .badge,
  .hero-content > .hero-subheadline,
  .hero-content > .hero-ctas,
  .hero-content > .hero-trust {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Partners-Marquee statisch (kein Slide) */
  .partners-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Statisches Fallback: erste 3 Notifications zeigen, untereinander gestapelt */
  .feed-notif { opacity: 0; transform: none; }
  .feed-notif:nth-child(1) { opacity: 1; top: 0; }
  .feed-notif:nth-child(2) { opacity: 0.9; top: 72px; }
  .feed-notif:nth-child(3) { opacity: 0.7; top: 140px; }
  .feed-notif:nth-child(4),
  .feed-notif:nth-child(5) { display: none; }
}

/* === Responsive === */

@media (max-width: 991px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Mobile: Hero-Feed verstecken, Mobile-Toast-Stack übernimmt die Rolle */
  .hero-feed {
    display: none;
  }
}

@media (max-width: 680px) {
  .hero-headline {
    margin-block: var(--space-4) var(--space-5);
  }

  .hero-subheadline {
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .hero-trust {
    font-size: var(--fs-xs);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
}

/* =================================================================
   SHARED SECTION COMPONENTS
   ================================================================= */

.section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.section-title {
  margin-block: var(--space-3) var(--space-4);
}

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 580px;
  margin-inline: auto;
}

/* =================================================================
   PARTNERS
   ================================================================= */

.partners {
  padding-block: var(--space-5);
  border-block: var(--border-thin);
  background: rgba(255,255,255,0.015);
}

/* Trust-Sektion: obere Zeile (Lockup-Card + Text), darunter der Slider */
.partners-row {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.partners-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Co-Branding-Lockup: elevatem × Shopify Partner — als erhöhte Card (Lift) */
.partner-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-md);
}
.partner-lockup-head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.partner-lockup-logos {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.lockup-elev { height: 30px; width: auto; display: block; }
.lockup-shop { height: 38px; width: auto; display: block; opacity: 0.95; }
.lockup-x {
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-faint);
}

/* Trust-Aussage (Desktop linksbündig in linker Spalte) */
.partners-label {
  text-align: left;
  max-width: none;
  margin: 0;
}
.partners-lead {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--color-text);
}
.partners-sub {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-base);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .partners-row { gap: var(--space-6); align-items: center; }
  .partners-intro {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    justify-items: center;
  }
  .partner-lockup { align-items: center; }
  .partners-label { text-align: center; padding-inline: var(--space-4); }
}

/* v3.7: Sliding Marquee statt 4er-Grid */
.partners-marquee {
  overflow: hidden;
  max-width: 1200px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.partners-track {
  display: flex;
  gap: clamp(var(--space-6), 6vw, var(--space-8));
  width: max-content;
  align-items: center;
  animation: partners-marquee-anim 50s linear infinite;
  will-change: transform;
}

.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}

@keyframes partners-marquee-anim {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.partner-logo {
  height: 72px;
  width: auto;
  max-width: none;
  opacity: 0.65;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  transition: opacity var(--duration-base) var(--ease-out);
}

.partner-logo:hover { opacity: 1; }

@media (max-width: 680px) {
  .partners { padding-block: var(--space-4); }
  .partner-logo { height: 56px; }
  .partners-track { animation-duration: 38s; gap: var(--space-6); }
}

/* =================================================================
   PARTNERSHIP (USPs)
   ================================================================= */

/* =================================================================
   PARTNERSHIP — TIMELINE SCROLL-REVEAL (v3.9)
   ================================================================= */

/* === TIMELINE HEAD === */
.tl-head { max-width: 900px; margin: 0 auto var(--space-7); padding-inline: var(--space-3); }
.tl-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(230, 255, 75, 0.06);
  border: 1px solid rgba(230, 255, 75, 0.18);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  box-shadow: 0 0 24px rgba(230, 255, 75, 0.08);
  margin-bottom: var(--space-4);
}
.tl-badge svg { width: 12px; height: 12px; color: #E6FF4B; }
.tl-title {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

/* === TIMELINE CONTAINER === */
.tl-container {
  /* v4.2: CSS-Variablen für pixelgenaues Centering von Line UND Marker.
     Beide Werte werden aus den selben Variablen berechnet → garantiert aligned. */
  --tl-line-x: 31px;       /* Mitte der vertikalen Linie im Container-Koordinatensystem */
  --tl-line-width: 2px;
  --tl-marker-size: 14px;
  --tl-pad-left: 80px;

  position: relative;
  padding-left: var(--tl-pad-left);
  max-width: 1080px;
  margin: 0 auto;
}
.tl-line-dashed {
  position: absolute;
  left: calc(var(--tl-line-x) - var(--tl-line-width) / 2);
  top: 24px; bottom: 24px;
  width: var(--tl-line-width);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 60%, transparent 60%);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  pointer-events: none;
}
.tl-line-progress {
  position: absolute;
  left: calc(var(--tl-line-x) - var(--tl-line-width) / 2);
  top: 24px;
  width: var(--tl-line-width);
  background: linear-gradient(180deg, #E6FF4B 0%, rgba(230,255,75,0.7) 100%);
  box-shadow: 0 0 8px rgba(230,255,75,0.5);
  border-radius: 1px;
  height: 0;
  /* v4.2: transition entfernt — JS setzt height jeden Frame via rAF (smoother) */
  pointer-events: none;
}

/* === TIMELINE STEP === */
.tl-step {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-6);
  position: relative;
  min-height: 260px;
  opacity: 0.65;
  transition: opacity 0.45s var(--ease-out);
}
.tl-step.is-active,
.tl-step.is-passed { opacity: 1; }

.tl-marker {
  position: absolute;
  /* Marker-Center = Line-Center: 
     marker.left = tl-line-x - tl-pad-left - marker.size/2 (relativ zum Step) */
  left: calc(var(--tl-line-x) - var(--tl-pad-left) - var(--tl-marker-size) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tl-marker-size);
  height: var(--tl-marker-size);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: #1A1817;
  z-index: 2;
  transition: background 300ms cubic-bezier(0.16, 1.2, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1.2, 0.3, 1),
              box-shadow 300ms cubic-bezier(0.16, 1.2, 0.3, 1);
}
/* Passierte Steps: Lime gefüllt, kein Puls */
.tl-step.is-passed .tl-marker {
  background: #E6FF4B;
  border-color: #E6FF4B;
  box-shadow: 0 0 0 4px rgba(230,255,75,0.08), 0 0 10px rgba(230,255,75,0.45);
}
/* Aktiver Step: Lime gefüllt, mit Puls */
.tl-step.is-active .tl-marker {
  background: #E6FF4B;
  border-color: #E6FF4B;
  box-shadow: 0 0 0 6px rgba(230,255,75,0.1), 0 0 18px rgba(230,255,75,0.7);
  animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(230,255,75,0.1), 0 0 18px rgba(230,255,75,0.7); }
  50% { box-shadow: 0 0 0 10px rgba(230,255,75,0.05), 0 0 24px rgba(230,255,75,0.9); }
}

.tl-num {
  display: block;
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  color: rgba(230,255,75,0.65);
  letter-spacing: 0.18em;
  margin-bottom: 12px;
  transition: color 0.4s ease;
}
.tl-step.is-active .tl-num,
.tl-step.is-passed .tl-num { color: #E6FF4B; }
.tl-step-title {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 12px;
  text-wrap: balance;
}
.tl-step-body {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}

/* === TIMELINE CARD (right side visual) === */
.tl-card {
  background: linear-gradient(180deg, #25232A 0%, #1C1A1F 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 22px 22px 20px;
  position: relative;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.04) inset,
    0 24px 60px -20px rgba(0,0,0,0.5),
    0 0 32px rgba(230,255,75,0.03);
  transition: box-shadow 0.5s var(--ease-out);
}
.tl-step.is-active .tl-card {
  box-shadow:
    0 0 0 0.5px rgba(230,255,75,0.1) inset,
    0 28px 70px -20px rgba(0,0,0,0.5),
    0 0 60px rgba(230,255,75,0.08);
}
.tl-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.tl-card-head svg { width: 14px; height: 14px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.card-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #E6FF4B;
  box-shadow: 0 0 8px rgba(230,255,75,0.6);
  margin-left: auto;
  animation: card-pulse 1.4s ease-in-out infinite;
}
@keyframes card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.card-tag-progress, .card-tag-status {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
}
.card-tag-progress { background: rgba(230,255,75,0.1); color: #E6FF4B; }
.card-tag-status { background: rgba(74,222,128,0.1); color: #4ADE80; }

/* === CARD 1: CALENDAR === */
.card-cal-month {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.card-cal-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-bottom: 14px;
}
.cd {
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  border-radius: 6px;
  font-weight: 500;
}
.cd-dow { font-size: 9px; color: rgba(255,255,255,0.4); height: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.cd-avail { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.cd-avail:hover { background: rgba(230,255,75,0.1); border-color: rgba(230,255,75,0.3); color: #fff; }
.cd-today { background: #E6FF4B; color: #0F0F12; font-weight: 700; border: 1px solid #E6FF4B; }
.card-cal-slot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: rgba(230,255,75,0.06);
  border: 1px solid rgba(230,255,75,0.18);
  border-radius: 8px;
}
.card-cal-slot-label { font-size: 9.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.card-cal-slot-time { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-top: 2px; }
.card-cal-pill { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: 11px; font-weight: 700; color: #E6FF4B; letter-spacing: -0.005em; }

/* === CARD 2: TASKS === */
.card-tasks { display: flex; flex-direction: column; gap: 8px; }
.card-task {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
}
.tk-check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,0.2); position: relative; }
.card-task.done .tk-check { background: #E6FF4B; border-color: #E6FF4B; }
.card-task.done .tk-check::after { content: ""; position: absolute; left: 3px; top: 1px; width: 4px; height: 7px; border: solid #0F0F12; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.card-task.wip .tk-check { border-color: #E6FF4B; background: rgba(230,255,75,0.15); }
.card-task.wip .tk-check::after { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #E6FF4B; animation: card-pulse 1.4s ease-in-out infinite; }
.tk-name { font-size: 12px; color: rgba(255,255,255,0.85); font-weight: 500; letter-spacing: -0.005em; }
.card-task.done .tk-name { color: rgba(255,255,255,0.55); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
.tk-meta { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; }
.card-task.done .tk-meta { color: rgba(74,222,128,0.7); }
.card-task.wip .tk-meta { color: #E6FF4B; }
.card-task.todo .tk-meta { color: rgba(255,255,255,0.35); }

/* === CARD 3: CHAT (24/7) === */
.card-247 { padding: 8px 0 4px; }
.card-247-big {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 52px); font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.04em; line-height: 1;
  display: inline-block; margin-right: 12px;
  vertical-align: middle;
}
.card-247-meta { display: inline-block; vertical-align: middle; font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 180px; }
.card-247-meta b { color: rgba(255,255,255,0.85); font-weight: 600; }
.card-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 16px 0 12px; }
.card-thread { display: flex; flex-direction: column; gap: 6px; }
.card-msg {
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}
.msg-av { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #4A4A4A 0%, #2A2A2A 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-weight: 700; font-size: 9px; color: rgba(255,255,255,0.9); flex-shrink: 0; }
.msg-av.av-you { background: rgba(230,255,75,0.15); color: #E6FF4B; }
.msg-name { font-weight: 600; color: rgba(255,255,255,0.9); }
.msg-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-time { color: rgba(255,255,255,0.4); font-size: 9.5px; font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; flex-shrink: 0; }

/* === CARD 4: REVENUE SPLIT === */
.card-split { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.card-split-gray { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: clamp(36px, 4.5vw, 48px); font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: -0.04em; line-height: 1; }
.card-split-slash { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: clamp(28px, 3.5vw, 36px); font-weight: 400; color: rgba(255,255,255,0.3); line-height: 1; }
.card-split-lime { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: clamp(36px, 4.5vw, 48px); font-weight: 700; color: #E6FF4B; letter-spacing: -0.04em; line-height: 1; }
.card-split-pct { font-size: 0.55em; font-weight: 600; }
.card-split-labels { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 16px; }
.csl-left { color: rgba(255,255,255,0.45); }
.csl-right { color: rgba(230,255,75,0.85); font-weight: 600; }
.card-chart { width: 100%; height: 56px; border-top: 1px dashed rgba(255,255,255,0.08); padding-top: 4px; box-sizing: content-box; }
.card-chart-axis { display: flex; justify-content: space-between; padding-top: 4px; font-size: 9.5px; color: rgba(255,255,255,0.35); font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-weight: 500; }

/* === CARD 5: ROADMAP === */
.card-46 { padding: 4px 0 2px; }
.card-46-big {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: clamp(36px, 5vw, 52px); font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.04em; line-height: 1;
  display: inline-block; margin-right: 14px;
  vertical-align: middle;
}
.card-46-suffix { font-size: 0.5em; margin-left: 4px; }
.card-46-meta { display: inline-block; vertical-align: middle; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.03em; }
.card-46-meta b { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 12px; display: block; margin-bottom: 1px; letter-spacing: -0.005em; }
.card-roadmap { margin-top: 14px; }
.rm-lane { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; margin-bottom: 6px; }
.rm-name { color: rgba(255,255,255,0.55); font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-weight: 500; font-size: 10.5px; }
.rm-track { height: 12px; background: rgba(255,255,255,0.04); border-radius: 3px; position: relative; }
.rm-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: linear-gradient(90deg, #E6FF4B 0%, rgba(230,255,75,0.4) 100%); }
.rm-axis { display: grid; grid-template-columns: 78px repeat(6, 1fr); padding-top: 6px; margin-top: 4px; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 9px; color: rgba(255,255,255,0.4); font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-weight: 500; letter-spacing: 0.04em; }
.rm-axis span { text-align: center; }
.rm-axis span:first-child { text-align: left; }

/* === CARD 6: KPIs === */
.card-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kpi { padding: 10px 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; text-align: center; }
.kpi-val { display: block; font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.kpi-up { color: #E6FF4B; }
.kpi-down { color: #E6FF4B; }
.kpi-label { font-size: 9.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.card-process { display: flex; flex-direction: column; gap: 6px; }
.cp-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; }
.cp-icon { font-size: 11px; color: #E6FF4B; text-align: center; }
.cp-text { font-size: 11.5px; color: rgba(255,255,255,0.75); font-weight: 500; }
.cp-meta { font-family: var(--font-display, 'Poppins'), system-ui, sans-serif; font-size: 10.5px; font-weight: 700; color: #E6FF4B; letter-spacing: -0.005em; }

/* === CTA BLOCK === */
.tl-cta {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  padding: 44px 36px 36px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230,255,75,0.04) 0%, transparent 70%), linear-gradient(180deg, #25232A 0%, #1A181C 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(230,255,75,0.05);
}
.tl-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.75);
  margin-bottom: 20px;
}
.tlb-dot { width: 6px; height: 6px; border-radius: 50%; background: #E6FF4B; box-shadow: 0 0 8px rgba(230,255,75,0.6); animation: card-pulse 1.4s ease-in-out infinite; }
.tl-cta-title {
  font-family: var(--font-display, 'Poppins'), system-ui, sans-serif;
  font-size: clamp(22px, 3.2vw, 30px); font-weight: 700;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 560px;
  margin-inline: auto;
  text-wrap: balance;
}
.tl-cta-body {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 480px;
}
.tl-cta-body .ac { color: #E6FF4B; font-weight: 600; }
.tl-cta-btn { display: inline-flex; }
.tl-cta-trust {
  margin: 16px 0 0;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.45);
}

/* ============ MOBILE RESPONSIVE ============ */
@media (max-width: 820px) {
  .tl-container {
    --tl-line-x: 16px;
    --tl-pad-left: 40px;
  }
  .tl-step {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding-block: var(--space-5);
    min-height: auto;
  }
  .tl-marker {
    /* Centering via Variables (left bleibt aus .tl-marker), nur top anpassen */
    top: 32px;
    transform: none;
  }
  .tl-step-body { max-width: none; }
  .tl-card { padding: 18px 16px 16px; }
  .tl-cta { padding: 32px 24px 28px; margin-top: var(--space-6); }
}

@media (max-width: 480px) {
  .tl-container {
    --tl-line-x: 14px;
    --tl-pad-left: 32px;
    --tl-marker-size: 12px;
  }
  .tl-card { padding: 16px 14px; }
  .card-cal-grid { gap: 3px; }
  .cd { height: 26px; font-size: 10px; }
  .card-kpis { gap: 6px; }
  .kpi { padding: 8px 4px; }
  .kpi-val { font-size: 18px; }
  .tl-cta { padding: 28px 20px 24px; border-radius: 16px; }
  .tl-cta-btn { width: 100%; justify-content: center; }
}

/* =================================================================
   STORY WALL
   ================================================================= */

.story-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.story-card {
  background: var(--color-bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.story-card:hover { border-color: rgba(230,255,75,0.25); }
.story-card.story-hidden { display: none; }

.story-video {
  aspect-ratio: 9 / 16;
  background-color: var(--color-bg-elevated);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.story-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.story-muted-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  opacity: 0.9;
}
.story-muted-badge svg { width: 13px; height: 13px; }

.story-meta {
  padding: var(--space-3) var(--space-3) 4px;
  font-size: var(--fs-xs);
}
.story-meta strong { display: block; color: var(--color-text); margin-bottom: 2px; }
.story-meta span { color: var(--color-text-subtle); }

/* Quote sits directly under meta; padding bottom on card via this */
.story-card .story-quote { padding: 0 var(--space-3) var(--space-3); }

.story-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
}

.storywall-note {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  margin-top: var(--space-5);
}

/* Tablet: 3 across, hidden cards still hidden until load-more */
@media (max-width: 991px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }

/* Mobile: horizontaler Swipe-Slider, ALLE Cards sichtbar, kein Load-More */
@media (max-width: 768px) {
  .story-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .story-grid::-webkit-scrollbar { height: 4px; }
  .story-grid::-webkit-scrollbar-thumb { background: rgba(230,255,75,0.3); border-radius: 2px; }
  .story-card {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .story-card.story-hidden { display: block; }
  .story-loadmore-wrap { display: none; }
}

/* =================================================================
   PROCESS (Timeline)
   ================================================================= */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: timeline;
  list-style: none;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  opacity: 0.4;
  z-index: 0;
}

.timeline-step {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  text-align: left;
}

.step-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.step-title { font-size: var(--fs-md); margin-bottom: var(--space-3); }
.step-body { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }

.step-time {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: rgba(230,255,75,0.08);
  border: 1px solid rgba(230,255,75,0.2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 991px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
}

/* =================================================================
   FOUNDER
   ================================================================= */

.founder-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}

.founder-portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(6rem, 14vw, 10rem);
  font-weight: 800;
  color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg-elevated) 0%, rgba(230,255,75,0.06) 100%);
  letter-spacing: -0.04em;
  z-index: 0;
}

.portrait-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
}

.founder-portrait img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-content .section-title { text-align: left; margin: var(--space-3) 0 var(--space-5); }
.founder-bio { font-size: var(--fs-md); color: var(--color-text-muted); line-height: var(--lh-relaxed); margin-bottom: var(--space-4); }

.founder-cta {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 1px solid rgba(230,255,75,0.3);
  padding-bottom: 2px;
  transition: border-color var(--duration-base) var(--ease-out);
}

.founder-cta:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

@media (max-width: 767px) {
  .founder-grid { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 320px; margin-inline: auto; }
}

/* =================================================================
   REVIEWS
   ================================================================= */

/* =================================================================
   GOOGLE REVIEWS (v4.3) — Card-Grid mit Google-Verified Style
   ================================================================= */

.reviews-header {
  text-align: center;
  margin-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.reviews-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}

.reviews-subtitle {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
  max-width: 600px;
}

/* === Google-Rating-Pill (5,0 ★★★★★ Google Bewertungen) === */
.reviews-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 22px;
  background: var(--color-bg-overlay);
  border: var(--border-thin);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.google-g-wrap {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.google-g-wrap svg { width: 100%; height: 100%; }
.rating-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.18);
}
.rating-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #FBBC04;
  font-size: 14px;
  line-height: 1;
}
.rating-stars i { font-size: 14px; line-height: 1; }
.rating-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* === Grid (3-col Desktop, 2-col Tablet, 1-col Mobile) === */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 991px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .reviews-grid { grid-template-columns: 1fr; } }

/* === Review-Card === */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}
.review-card:hover {
  border-color: rgba(230,255,75,0.28);
  background: rgba(255,255,255,0.035);
  transform: translateY(-2px);
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.review-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.review-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.verified-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
}

.review-time {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-weight: 400;
}

.review-google-g {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.review-stars {
  display: inline-flex;
  gap: 1px;
  color: #FBBC04;
  margin-bottom: 12px;
  line-height: 1;
}
.review-stars i {
  font-size: 14px;
  line-height: 1;
}

.review-text {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
  font-style: normal;
}

/* === Reviews CTA Button === */
.reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}
.reviews-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.reviews-cta-btn i {
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
}

/* =================================================================
   FAQ
   ================================================================= */

.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-inline: auto; }

.faq-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.faq-item:hover { border-color: rgba(230,255,75,0.22); border-left-color: rgba(230,255,75,0.4); }
.faq-item[open] {
  background: rgba(255,255,255,0.035);
  border-color: rgba(230,255,75,0.25);
  border-left-color: var(--color-accent);
  box-shadow: 0 0 30px rgba(230,255,75,0.05);
}

.faq-q {
  cursor: pointer;
  padding: 20px 64px 20px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  list-style: none;
  position: relative;
  color: var(--color-text);
  transition: color var(--duration-base) var(--ease-out);
  letter-spacing: -0.01em;
}
.faq-item[open] .faq-q { color: var(--color-accent); }
.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: rgba(230,255,75,0.10);
  border: 1px solid rgba(230,255,75,0.25);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.faq-item[open] .faq-q::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--color-accent);
  color: var(--color-bg);
}

.faq-a {
  padding: 0 24px 22px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* =================================================================
   CONTACT / QUIZ
   ================================================================= */

.quiz {
  background: var(--color-bg-elevated);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  position: relative;
  overflow: hidden;
}

.quiz-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}

.quiz-progress-bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width var(--duration-slow) var(--ease-out);
}

.quiz-step { display: none; animation: quiz-fade-in 0.3s var(--ease-out); }
.quiz-step.active { display: block; }

@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-question {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
  margin-bottom: var(--space-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.quiz-step-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}

.quiz-options { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-4); }

.quiz-options label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
  font-size: var(--fs-sm);
}

.quiz-options label:hover { background: rgba(230,255,75,0.04); border-color: rgba(230,255,75,0.28); }
.quiz-options input[type="radio"] { accent-color: var(--color-accent); width: 16px; height: 16px; flex-shrink: 0; }
.quiz-options input[type="radio"]:checked + span { color: var(--color-text); font-weight: 500; }
.quiz-options label:has(input:checked) { background: rgba(230,255,75,0.07); border-color: var(--color-accent); }

.quiz-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.quiz-field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: var(--fs-sm); color: var(--color-text-muted); }
.quiz-field input {
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-base);
}
.quiz-field input:focus { outline: none; border-color: var(--color-accent); background: rgba(230,255,75,0.04); }

.quiz-checkbox { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); cursor: pointer; }
.quiz-checkbox input { accent-color: var(--color-accent); margin-top: 3px; flex-shrink: 0; }

.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none; }

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-thin);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.quiz-step-indicator { font-size: var(--fs-sm); color: var(--color-text-subtle); }

.quiz-success, .quiz-error { display: none; text-align: center; padding: var(--space-6) 0; }
.quiz-success.active, .quiz-error:not([hidden]) { display: block; }

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-5);
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  box-shadow: 0 0 32px var(--color-accent-glow);
}

.quiz-error { color: #ff8b8b; }

@media (max-width: 580px) {
  .quiz-nav { flex-direction: column; }
  .quiz-nav .btn { width: 100%; }
}

/* =================================================================
   LIGHTBOX (Story-Wall Videos)
   ================================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.lightbox:not([hidden]) { display: flex; }

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.1);
  color: var(--color-text);
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}

.lightbox-close:hover { background: rgba(255,255,255,0.2); }

.lightbox-content {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 9 / 16;
}

.lightbox-frame { width: 100%; height: 100%; }
.lightbox-frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); }

/* =================================================================
   FOOTER
   ================================================================= */

.footer {
  padding-block: var(--space-9) var(--space-6);
  background: var(--color-bg);
  border-top: var(--border-thin);
  margin-top: var(--space-9);
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.footer-brand {
  max-width: 320px;
}

.footer-logo {
  display: inline-flex;
  margin-bottom: var(--space-4);
}

.footer-logo img {
  height: 28px;
  width: auto;
}

.footer-tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-7);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-thin);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-muted);
  transition: all var(--duration-base) var(--ease-out);
}

.footer-social:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .footer-top {
    flex-direction: column;
  }

  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* =================================================================
   UTILITY — Subtile Atmosphäre durch Grain-Overlay
   ================================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* =================================================================
   MOBILE-TOAST — Push-Style Shopify-Notifications
   Nur sichtbar < 992px. Überlappt Logo-Bereich.
   KEIN Lime-Akzent (auf User-Wunsch).
   ================================================================= */

.mobile-toast-stack {
  display: none;
}

@media (max-width: 991px) {
  .mobile-toast-stack {
    display: block;
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 100;
    pointer-events: none;
    height: 80px;
  }

  .toast {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(15, 15, 18, 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    opacity: 0;
    animation: mobile-toast-flow 30s ease-in-out infinite;
    will-change: transform, opacity;
    /* Swipe-Support: erlaubt vertikales Scrollen, fängt horizontale Gesten */
    touch-action: pan-y;
  }

  .toast:nth-child(1) { animation-delay: 0s; }
  .toast:nth-child(2) { animation-delay: 6s; }
  .toast:nth-child(3) { animation-delay: 12s; }
  .toast:nth-child(4) { animation-delay: 18s; }
  .toast:nth-child(5) { animation-delay: 24s; }

  /* Swipe-Away State — !important überschreibt die laufende Animation,
     bis animationiteration die Klasse wieder entfernt (= bei Cycle-Restart) */
  .toast.toast-swiped {
    opacity: 0 !important;
    transform: translateX(110%) scale(0.94) !important;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  /* Linke Swipe-Richtung als alternative Klasse */
  .toast.toast-swiped-left {
    opacity: 0 !important;
    transform: translateX(-110%) scale(0.94) !important;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  /* Touch-Dragging State (während Finger noch unten ist) */
  .toast.toast-dragging {
    transition: none !important;
    cursor: grabbing;
  }

  .toast .shopify-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .toast-body {
    flex: 1;
    min-width: 0;
  }

  .toast-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1px;
    gap: var(--space-2);
  }

  .toast-title {
    font-size: var(--fs-sm);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .toast-time {
    font-size: var(--fs-xs);
    color: var(--color-text-subtle);
    font-weight: 400;
    white-space: nowrap;
  }

  .toast-text {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.4;
    letter-spacing: -0.005em;
    margin: 0;
  }

  /* Da Toasts den Nav-Bereich überlappen, kein zusätzliches Padding nötig */
}

@keyframes mobile-toast-flow {
  /* 30s Cycle, 5 Toasts mit 6s Stagger.
     Pro Toast: 0.6s Appear · 3.0s Visible · 0.6s Disappear · 1.8s Cooldown */
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.94);
  }
  2% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  14% {
    opacity: 0;
    transform: translateY(-40px) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(0.94);
  }
}

/* Reduced-Motion: Erste Toast statisch zeigen */
@media (prefers-reduced-motion: reduce) and (max-width: 991px) {
  .toast {
    animation: none !important;
  }
  .toast:nth-child(1) {
    opacity: 1;
    transform: none;
  }
  .toast:nth-child(n+2) {
    display: none;
  }
}

/* =================================================================
   v4.0: Section-Marker (dezent) — kleiner Lime-Icon + Uppercase-Text
   Vor jedem H2 platziert. Kein Pill-Background, nur Inline-Element.
   ================================================================= */

.section-marker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(230, 255, 75, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  line-height: 1;
}

.section-marker i {
  font-size: 15px;
  color: rgba(230, 255, 75, 0.85);
  line-height: 1;
  /* "Dünner & schärfer" durch leicht reduzierte Größe + Stroke-Optimierung */
  stroke-width: 1.5;
  display: inline-flex;
  align-items: center;
}

/* =================================================================
   v4.4 — FOUNDER UPDATE
   ================================================================= */

.founder-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-5);
  text-wrap: balance;
}

.founder-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}
.founder-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  white-space: nowrap;
}
.founder-stat--markets .founder-stat-num {
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0.02em;
}
.founder-stat-label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.founder-direct-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-6);
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.founder-direct-link:hover {
  gap: 14px;
  opacity: 0.85;
}
.founder-direct-link i {
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 580px) {
  .founder-stats { gap: 12px; }
  .founder-stat-num { font-size: clamp(0.85rem, 4vw, 1.15rem); }
  .founder-stat--markets .founder-stat-num { font-size: clamp(0.72rem, 3.1vw, 0.95rem); }
  .founder-stat-label { font-size: 0.72rem; line-height: 1.3; }
}
@media (max-width: 360px) {
  .founder-stats { gap: 8px; }
  .founder-stat--markets .founder-stat-num { font-size: 0.7rem; letter-spacing: 0; }
}

/* =================================================================
   v4.4 — REVIEWS Partnership Subtitle
   ================================================================= */

.review-partnership {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* =================================================================
   v4.4 — SCHNELLRECHNER
   ================================================================= */

.calc-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 820px) {
  .calc-card {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }
}

/* === Sliders === */
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.calc-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-input-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.calc-input-name {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}
.calc-input-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  line-height: 1;
}

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: grab;
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 3px rgba(230,255,75,0.18), 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 5px rgba(230,255,75,0.25), 0 4px 12px rgba(0,0,0,0.5);
}
.calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 3px rgba(230,255,75,0.18), 0 4px 10px rgba(0,0,0,0.4);
  cursor: grab;
}
.calc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(230,255,75,0.35);
}

/* Fixed slider (elevatem-Anteil at 7%) */
.calc-input-fixed { position: relative; }
.calc-slider-fixed {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  cursor: not-allowed;
}
.calc-slider-fixed-thumb {
  position: absolute;
  /* 7% von max 20% Beispielwert → ca. 35% Position, but visually wir setzen sie auf ~58% per screenshot */
  left: 58%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 3px rgba(230,255,75,0.18), 0 4px 10px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
}
.calc-fixed-note {
  font-size: 11px;
  color: var(--color-text-subtle);
  font-style: italic;
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}

/* === Output Panel === */
.calc-output {
  padding: var(--space-5);
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.calc-output-label {
  font-size: 11px;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.calc-output-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.calc-output-currency {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1;
}
.calc-output-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1;
}
.calc-output-delta {
  font-size: var(--fs-sm);
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.calc-output-breakdown {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.calc-row-label {
  color: var(--color-text-muted);
}
.calc-row-value {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.calc-positive { color: var(--color-text); }
.calc-row-share .calc-row-label,
.calc-row-share .calc-row-value { color: var(--color-accent); }
.calc-row-total {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
  margin-top: 4px;
}
.calc-row-total .calc-row-label { color: var(--color-text); font-weight: 600; }

.calc-disclaimer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  font-style: italic;
  letter-spacing: -0.005em;
  max-width: 720px;
  margin-inline: auto;
}

/* =================================================================
   v4.4 — PASST ZU DIR (Fit-Check)
   ================================================================= */

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 820px) {
  .fit-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.fit-card {
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  transition: border-color 0.3s var(--ease-out);
}
.fit-card-yes:hover { border-color: rgba(22,163,74,0.35); }
.fit-card-no:hover { border-color: rgba(220,38,38,0.30); }

.fit-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fit-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.fit-icon svg { width: 100%; height: 100%; }
.fit-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.015em;
}

.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}
.fit-card-no .fit-list li { color: rgba(255,255,255,0.55); }

.fit-bullet {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
}
.fit-bullet-yes { background: #22C55E; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.fit-bullet-no { background: rgba(220,38,38,0.55); }

/* =================================================================
   v4.5 — PRINZIPIEN (4 USPs replacing #ablauf)
   ================================================================= */

.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 820px) {
  .principles-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.principle-card {
  position: relative;
  padding: 28px 26px 26px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  transition: border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
  overflow: hidden;
}
.principle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(230,255,75,0.06), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.principle-card:hover {
  border-color: rgba(230,255,75,0.28);
  background: rgba(255,255,255,0.035);
  transform: translateY(-2px);
}
.principle-card:hover::before { opacity: 1; }

.principle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(230,255,75,0.08);
  border: 1px solid rgba(230,255,75,0.18);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.principle-icon svg {
  width: 24px;
  height: 24px;
}

.principle-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.principle-body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
}

/* =================================================================
   v4.5 — COMPARISON-TABLE
   ================================================================= */

.compare-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  margin: 0 -2px; /* slight bleed for shadow */
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 520px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
}

.compare-table thead th {
  padding: 22px 20px 20px;
  text-align: left;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 500;
  vertical-align: top;
}

.compare-col-head {
  min-width: 180px;
}
.compare-col-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.compare-col-sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: 0;
}

.compare-col-elevatem {
  background: rgba(230,255,75,0.06);
  border-left: 1px solid rgba(230,255,75,0.22);
  border-right: 1px solid rgba(230,255,75,0.22);
  border-top: 1px solid rgba(230,255,75,0.22);
  position: relative;
}
.compare-col-elevatem .compare-col-name {
  color: var(--color-accent);
}

.compare-axis-head {
  width: 200px;
  background: transparent !important;
}

.compare-axis {
  padding: 18px 20px;
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: -0.005em;
  vertical-align: middle;
}
.compare-table tbody tr:last-child .compare-axis,
.compare-table tbody tr:last-child .compare-cell { border-bottom: 0; }

.compare-cell {
  padding: 18px 20px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: -0.005em;
  vertical-align: middle;
}

.compare-cell-elevatem {
  background: rgba(230,255,75,0.04);
  border-left: 1px solid rgba(230,255,75,0.18);
  border-right: 1px solid rgba(230,255,75,0.18);
  color: var(--color-text);
  font-weight: 500;
  position: relative;
}
.compare-cell-elevatem::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px rgba(230,255,75,0.65);
}
.compare-cell-elevatem { padding-left: 32px; }

.compare-table tbody tr:last-child .compare-col-elevatem,
.compare-table tbody tr:last-child .compare-cell-elevatem {
  border-bottom: 1px solid rgba(230,255,75,0.22);
}

.compare-note {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.5;
}
.compare-note strong { color: var(--color-text); font-weight: 600; }

@media (max-width: 820px) {
  .compare-wrapper {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
  .compare-table {
    min-width: 640px;
    font-size: var(--fs-xs);
  }
  .compare-axis,
  .compare-cell { padding: 14px 14px; }
  .compare-cell-elevatem { padding-left: 28px; }
  .compare-cell-elevatem::before { left: 10px; width: 6px; height: 6px; }
  .compare-col-name { font-size: 1rem; }
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
   v4.6 — HERO BULLETS + TRUST-BADGE
   ================================================================= */

.hero-bullets {
  list-style: none;
  margin: var(--space-3) 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.hero-bullet-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: rgba(230,255,75,0.10);
  border: 1px solid rgba(230,255,75,0.25);
  border-radius: 50%;
}
.hero-bullet-check svg { width: 14px; height: 14px; }

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-3);
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  flex-wrap: wrap;
}
.hero-trust-stars { display: inline-flex; gap: 1px; color: #FBBC04; line-height: 1; }
.hero-trust-stars i { font-size: 13px; line-height: 1; }
.hero-trust-score {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.hero-trust-divider {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.18);
}
.hero-trust-text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

/* =================================================================
   v4.6 — TRUST-STATS-STRIP (unter Partner-Logos)
   ================================================================= */

.trust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.trust-stat {
  text-align: center;
}
.trust-stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.trust-stat-label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 220px;
  margin-inline: auto;
}
@media (max-width: 820px) {
  .trust-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 480px) {
  .trust-stats { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* =================================================================
   v4.6 — FORMEL (Die elevatem-Formel) — replaces old timeline
   ================================================================= */

.formel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (max-width: 820px) { .formel-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

.formel-card {
  position: relative;
  padding: 32px 28px 28px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  transition: border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
  overflow: hidden;
}
.formel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(230,255,75,0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.formel-card:hover {
  border-color: rgba(230,255,75,0.30);
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
}
.formel-card:hover::before { opacity: 1; }

.formel-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.formel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(230,255,75,0.08);
  border: 1px solid rgba(230,255,75,0.20);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  margin-left: var(--space-3);
  vertical-align: middle;
}
.formel-icon svg { width: 28px; height: 28px; }

.formel-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.formel-body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  letter-spacing: -0.005em;
  margin: 0;
}

/* =================================================================
   v4.6 — ABLAUF (Timeline mit Visuals)
   ================================================================= */

.ablauf-timeline {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 60px;
}
.ablauf-line {
  position: absolute;
  left: 22px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 60%, transparent 60%);
  background-size: 2px 8px;
  background-repeat: repeat-y;
  pointer-events: none;
}
.ablauf-line-progress {
  position: absolute;
  left: 22px;
  top: 30px;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, #E6FF4B 0%, rgba(230,255,75,0.7) 100%);
  box-shadow: 0 0 8px rgba(230,255,75,0.5);
  border-radius: 1px;
  pointer-events: none;
}

.ablauf-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  opacity: 0.65;
  transition: opacity 0.4s var(--ease-out);
  align-items: center;
}
.ablauf-step.is-active,
.ablauf-step.is-passed { opacity: 1; }

.ablauf-marker {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: #1A1817;
  z-index: 2;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ablauf-step.is-passed .ablauf-marker {
  background: #E6FF4B;
  border-color: #E6FF4B;
  box-shadow: 0 0 0 4px rgba(230,255,75,0.08), 0 0 10px rgba(230,255,75,0.45);
}
.ablauf-step.is-active .ablauf-marker {
  background: #E6FF4B;
  border-color: #E6FF4B;
  box-shadow: 0 0 0 6px rgba(230,255,75,0.1), 0 0 18px rgba(230,255,75,0.7);
  animation: tl-pulse 2.4s ease-in-out infinite;
}

.ablauf-step-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.ablauf-step-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ablauf-step-body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.ablauf-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ablauf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.ablauf-tag svg { width: 13px; height: 13px; color: var(--color-accent); flex-shrink: 0; }

.ablauf-visual-card {
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ablauf-vc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ablauf-vc-head svg { width: 16px; height: 16px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.ablauf-vc-head.is-split { justify-content: space-between; }
.ablauf-vc-head-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ablauf-vc-head-badge {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-accent); background: rgba(230,255,75,0.10);
  border: 1px solid rgba(230,255,75,0.25); border-radius: var(--radius-pill);
  padding: 2px 9px; white-space: nowrap;
}
.ablauf-vc-head-live {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent);
}
.ablauf-vc-head-live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent);
  box-shadow: 0 0 8px rgba(230,255,75,0.7); animation: ablauf-pulse 2s ease-in-out infinite;
}
@keyframes ablauf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Schritt 01 — Kalender */
.ablauf-cal-month { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--color-text); margin-bottom: 12px; }
.ablauf-cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ablauf-cal-dow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-subtle); text-transform: uppercase; padding-bottom: 2px; }
.ablauf-cal-day { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.ablauf-cal-day.is-dim { color: var(--color-text-subtle); opacity: 0.4; background: transparent; border-color: transparent; }
.ablauf-cal-day.is-sel { background: var(--color-accent); color: #12140a; border-color: var(--color-accent); box-shadow: 0 0 14px rgba(230,255,75,0.45); }
.ablauf-cal-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: rgba(230,255,75,0.08); border: 1px solid rgba(230,255,75,0.20); border-left: 3px solid var(--color-accent); }
.ablauf-cal-slot-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ablauf-cal-slot-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-subtle); }
.ablauf-cal-slot-value { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.ablauf-cal-slot-tag { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--color-accent); white-space: nowrap; flex-shrink: 0; }

/* Schritt 02 — Onboarding-Board */
.ablauf-board { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ablauf-board-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); font-size: var(--fs-sm); }
.ablauf-board-check { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,0.18); color: transparent; }
.ablauf-board-check svg { width: 11px; height: 11px; }
.ablauf-board-task { flex: 1; min-width: 0; color: var(--color-text-muted); }
.ablauf-board-status { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.ablauf-board-row.is-done .ablauf-board-check { background: var(--color-accent); border-color: var(--color-accent); color: #12140a; }
.ablauf-board-row.is-done .ablauf-board-status { color: var(--color-accent); opacity: 0.7; }
.ablauf-board-row.is-progress { border-color: rgba(230,255,75,0.22); background: rgba(230,255,75,0.04); }
.ablauf-board-row.is-progress .ablauf-board-check { border-color: var(--color-accent); color: var(--color-accent); }
.ablauf-board-row.is-progress .ablauf-board-task { color: var(--color-text); }
.ablauf-board-row.is-progress .ablauf-board-status { color: var(--color-accent); }
.ablauf-board-row.is-todo .ablauf-board-task { color: var(--color-text-subtle); }
.ablauf-board-row.is-todo .ablauf-board-status { color: var(--color-text-subtle); }

/* Schritt 03 — Creative-/Anzeigen-Vorschau */
.ablauf-ad { display: flex; flex-direction: column; gap: 10px; }
.ablauf-ad-top { display: flex; align-items: center; gap: 9px; }
.ablauf-ad-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), #aecb00); display: flex; align-items: center; justify-content: center; color: #12140a; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.ablauf-ad-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ablauf-ad-name { font-weight: 700; font-size: 12.5px; color: var(--color-text); }
.ablauf-ad-meta { font-size: 10px; color: var(--color-text-subtle); display: inline-flex; align-items: center; gap: 4px; }
.ablauf-ad-meta svg { width: 10px; height: 10px; }
.ablauf-ad-media { position: relative; height: 92px; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 120% at 72% 0%, rgba(230,255,75,0.18), rgba(255,255,255,0.03) 70%); border: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; }
.ablauf-ad-badge { position: absolute; top: 8px; left: 8px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #12140a; background: var(--color-accent); padding: 2px 7px; border-radius: 5px; }
.ablauf-ad-product { width: 38px; height: 56px; border-radius: 7px 7px 9px 9px; background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55)); box-shadow: 0 8px 20px rgba(0,0,0,0.4); position: relative; }
.ablauf-ad-product::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 14px; height: 8px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,0.75); }
.ablauf-ad-product::after { content: ''; position: absolute; left: 6px; right: 6px; top: 16px; height: 18px; border-radius: 3px; background: rgba(230,255,75,0.55); }
.ablauf-ad-copy { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; margin: 0; }
.ablauf-ad-cta { display: block; text-align: center; padding: 8px; border-radius: 8px; background: rgba(230,255,75,0.12); border: 1px solid rgba(230,255,75,0.3); color: var(--color-accent); font-weight: 700; font-size: 12px; }

/* Schritt 04 — Märkte & Expansion */
.ablauf-mkt { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ablauf-mkt-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05); font-size: var(--fs-sm); }
.ablauf-mkt-code { width: 30px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; background: rgba(255,255,255,0.06); color: var(--color-text-muted); flex-shrink: 0; }
.ablauf-mkt-name { flex: 1; min-width: 0; color: var(--color-text-muted); }
.ablauf-mkt-status { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-subtle); }
.ablauf-mkt-row.is-live .ablauf-mkt-code { background: rgba(230,255,75,0.14); color: var(--color-accent); }
.ablauf-mkt-row.is-live .ablauf-mkt-status { color: var(--color-accent); opacity: 0.7; }
.ablauf-mkt-row.is-progress { border-color: rgba(230,255,75,0.22); background: rgba(230,255,75,0.04); }
.ablauf-mkt-row.is-progress .ablauf-mkt-code { background: rgba(230,255,75,0.14); color: var(--color-accent); }
.ablauf-mkt-row.is-progress .ablauf-mkt-name { color: var(--color-text); }
.ablauf-mkt-row.is-progress .ablauf-mkt-status { color: var(--color-accent); }
.ablauf-mkt-row.is-next .ablauf-mkt-name { color: var(--color-text-subtle); }
.market-flag { display: none; }

@media (max-width: 820px) {
  .ablauf-timeline { padding-left: 40px; }
  .ablauf-line, .ablauf-line-progress { left: 14px; }
  .ablauf-marker { left: -33px; }
  .ablauf-step { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-5); }
}
@media (max-width: 480px) {
  .ablauf-timeline { padding-left: 32px; }
  .ablauf-line, .ablauf-line-progress { left: 10px; }
  .ablauf-marker { left: -26px; width: 12px; height: 12px; }
  .ablauf-step-title { font-size: 1.25rem; }
}

/* === ABLAUF CTA === */
.ablauf-cta {
  text-align: center;
  margin-top: var(--space-7);
  padding: var(--space-6);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
}
.ablauf-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.ablauf-cta-body {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.ablauf-cta-btn { display: inline-flex; margin-bottom: 14px; }
.ablauf-cta-trust {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin: 0;
  font-style: italic;
}

/* =================================================================
   v4.6 — STORY-QUOTE (Zitat unter Video-Testimonials)
   ================================================================= */

.story-quote {
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.005em;
  background: none;
  border: none;
  border-radius: 0;
}

/* =================================================================
   v4.6 — COMPARISON-TABLE PREMIUM UPGRADE
   ================================================================= */

.compare-col-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  margin-bottom: 4px;
}

.compare-col-elevatem {
  background: linear-gradient(180deg, rgba(230,255,75,0.14) 0%, rgba(230,255,75,0.06) 100%) !important;
  border-left: 2px solid rgba(230,255,75,0.45) !important;
  border-right: 2px solid rgba(230,255,75,0.45) !important;
  border-top: 2px solid rgba(230,255,75,0.45) !important;
  position: relative;
}
.compare-col-elevatem::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
  pointer-events: none;
}

.compare-cell-elevatem {
  background: rgba(230,255,75,0.08) !important;
  border-left: 2px solid rgba(230,255,75,0.35) !important;
  border-right: 2px solid rgba(230,255,75,0.35) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
}
.compare-cell-elevatem::before {
  background: var(--color-accent) !important;
  box-shadow: 0 0 8px rgba(230,255,75,0.85) !important;
  width: 10px !important;
  height: 10px !important;
}

.compare-table tbody tr:last-child .compare-cell-elevatem {
  border-bottom: 2px solid rgba(230,255,75,0.45) !important;
}

/* =================================================================
   v4.7 — HERO SUBHEAD TAGLINE (statt Bullets)
   ================================================================= */
.hero-subhead-tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}

/* =================================================================
   v4.7 — PAIN-SEKTION (Kennst du das?)
   ================================================================= */
.pains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .pains-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pains-grid { grid-template-columns: 1fr; } }

.pain-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body body";
  column-gap: 13px;
  row-gap: 9px;
  align-items: center;
  padding: 19px 20px;
  background: linear-gradient(150deg, rgba(255,80,80,0.06) 0%, rgba(255,255,255,0.02) 55%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.pain-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,90,90,0.7), transparent);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-out);
}
.pain-card:hover {
  border-color: rgba(255,90,90,0.3);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -18px rgba(255,70,70,0.38);
}
.pain-card:hover::before { opacity: 1; }
.pain-x {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,80,80,0.13);
  border: 1px solid rgba(255,90,90,0.3);
  color: #ff6b6b;
  margin: 0;
  box-shadow: 0 0 16px rgba(255,70,70,0.2);
}
.pain-x svg { width: 19px; height: 19px; }
.pain-title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.pain-body {
  grid-area: body;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0;
}

/* =================================================================
   v4.7 — FORMEL FLOW (horizontales Stufen-Layout)
   ================================================================= */
.formel-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.formel-flow-line {
  position: absolute;
  top: 26px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, rgba(230,255,75,0.5), rgba(230,255,75,0.15));
  z-index: 0;
}
.formel-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.formel-step-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.formel-step-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.formel-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 2px solid rgba(230,255,75,0.30);
  color: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(30,28,28,1), 0 0 22px rgba(230,255,75,0.12);
}
.formel-step-icon svg { width: 26px; height: 26px; }
.formel-step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.formel-step-body {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
}
@media (max-width: 820px) {
  .formel-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    max-width: 460px;
    margin-inline: auto;
  }
  /* Linie wird vertikal */
  .formel-flow-line {
    display: block;
    top: 38px;
    bottom: 38px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(230,255,75,0.5), rgba(230,255,75,0.15));
  }
  .formel-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "icon title"
      "icon body";
    column-gap: 18px;
    row-gap: 2px;
    align-items: start;
    text-align: left;
    padding: 14px 0;
  }
  .formel-step-top {
    grid-area: icon;
    margin-bottom: 0;
    justify-content: flex-start;
    align-self: start;
  }
  .formel-step-title { grid-area: title; }
  .formel-step-body { grid-area: body; }
  .formel-step-icon {
    width: 56px;
    height: 56px;
    box-shadow: 0 0 0 6px var(--color-bg), 0 0 22px rgba(230,255,75,0.14);
  }
  .formel-step-title { margin-top: 6px; font-size: 1.2rem; }
  .formel-step-body { font-size: var(--fs-sm); }
}
@media (max-width: 460px) {
  .formel-flow { max-width: none; }
  .formel-step { grid-template-columns: 50px 1fr; column-gap: 14px; }
  .formel-flow-line { left: 24px; }
  .formel-step-icon { width: 50px; height: 50px; }
  .formel-step-icon svg { width: 24px; height: 24px; }
}

/* =================================================================
   v4.7 — ABLAUF Step-01 Mini-CTA
   ================================================================= */
.ablauf-step-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: gap 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.ablauf-step-cta:hover { gap: 10px; opacity: 0.85; }
.ablauf-step-cta .arrow { transition: transform 0.2s var(--ease-out); }
.ablauf-step-cta:hover .arrow { transform: translateX(2px); }

/* =================================================================
   v4.7 — ABLAUF Kalender-Widget (echte Verfügbarkeiten)
   ================================================================= */
.ablauf-cal { margin-top: 4px; }
.ablauf-cal-month {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.ablauf-cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.acd {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-text-subtle);
  background: rgba(255,255,255,0.025);
}
.acd-dow {
  height: 20px;
  background: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  font-weight: 600;
}
.acd-avail {
  color: var(--color-text);
  background: rgba(230,255,75,0.08);
  border: 1px solid rgba(230,255,75,0.22);
  cursor: pointer;
}
.acd-today {
  color: var(--color-bg);
  background: var(--color-accent);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(230,255,75,0.45);
}
.ablauf-cal-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(230,255,75,0.07);
  border: 1px solid rgba(230,255,75,0.20);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}
.slot-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(230,255,75,0.8);
  flex-shrink: 0;
}

/* === ABLAUF Onboarding-Checklist icons (inline SVG) === */
.vc-check, .vc-spin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent);
}
.vc-check svg, .vc-spin svg { width: 16px; height: 16px; }
.vc-spin svg { animation: spin 1.6s linear infinite; }
.vc-todo {
  display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.25); border-radius: 50%;
}
@media (max-width: 480px) {
  .acd { height: 28px; font-size: 11px; }
  .pains-grid { gap: var(--space-3); }
}

/* =================================================================
   v4.7 — Inline-SVG Sterne & External-Link (ersetzen ti-Font-Icons)
   ================================================================= */
.star-ico { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.rating-stars .star-ico { width: 15px; height: 15px; }
.review-stars .star-ico { width: 14px; height: 14px; }
.ext-ico { width: 16px; height: 16px; display: inline-block; vertical-align: middle; opacity: 0.75; }
.reviews-cta-btn .ext-ico { width: 16px; height: 16px; }

/* =================================================================
   v4.7 — BEGRENZTE KAPAZITÄT (Scarcity)
   ================================================================= */
.capacity-card {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230,255,75,0.07) 0%, rgba(255,255,255,0.02) 55%);
  border: 1px solid rgba(230,255,75,0.20);
}
.capacity-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(230,255,75,0.16), transparent 65%);
  pointer-events: none;
}
.capacity-inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.capacity-text { text-align: left; }
.capacity-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 540px;
}
.capacity-body {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 var(--space-5);
}
.capacity-btn { display: inline-flex; }

/* Scarcity-Visual (illustrativ — keine Live-Zahl) */
.capacity-visual { display: flex; justify-content: center; }
.capacity-meter {
  width: 100%;
  max-width: 320px;
  padding: 22px 22px 20px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(230,255,75,0.20);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 30px rgba(230,255,75,0.06);
}
.cap-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cap-meter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-subtle);
  font-weight: 700;
}
.cap-meter-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  padding: 3px 9px;
  background: rgba(230,255,75,0.12);
  border: 1px solid rgba(230,255,75,0.28);
  border-radius: var(--radius-pill);
}
.cap-free-line {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.cap-free-num {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  margin-right: 5px;
}
.cap-bar {
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  margin-bottom: 12px;
}
.cap-bar-fill {
  display: block;
  height: 100%;
  width: 75%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(230,255,75,0.85), var(--color-accent));
  box-shadow: 0 0 12px rgba(230,255,75,0.5);
}
.cap-meter-note {
  font-size: 11px;
  color: var(--color-text-subtle);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 820px) {
  .capacity-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .capacity-text { text-align: center; }
  .capacity-title, .capacity-body { max-width: none; margin-inline: auto; }
  .capacity-visual { order: -1; }
  .capacity-meter { max-width: 280px; }
}

.badge-dot-pulse {
  position: relative;
  animation: cap-dot-pulse 2s ease-in-out infinite;
}
@keyframes cap-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,255,75,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(230,255,75,0); }
}

/* =================================================================
   v4.7 — VERGLEICH Mobile: Tabelle → gestapelte Karten (≤768px)
   ================================================================= */
@media (max-width: 768px) {
  .compare-wrapper {
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 0;
  }
  .compare-table {
    display: block;
    min-width: 0;
    width: 100%;
    background: none;
    border: none;
    border-radius: 0;
  }
  .compare-table thead { display: none; }
  .compare-table tbody { display: block; }
  .compare-table tbody tr {
    display: block;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 6px 6px 10px;
    overflow: hidden;
  }
  /* Kriterium als Lime-Karten-Header */
  .compare-table tbody .compare-axis {
    display: block;
    width: auto;
    background: none !important;
    border: none;
    padding: 14px 16px 10px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: -0.015em;
  }
  /* Jede Zelle: Spaltenname (data-label) + Wert gestapelt */
  .compare-table tbody .compare-cell {
    display: block;
    border: none;
    padding: 8px 16px;
    color: var(--color-text-muted);
  }
  .compare-table tbody .compare-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-subtle);
    font-weight: 700;
    margin-bottom: 3px;
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
  }
  /* elevatem-Zelle hervorgehoben als eigener Block — stärker + Logo */
  .compare-table tbody .compare-cell-elevatem {
    background: linear-gradient(135deg, rgba(230,255,75,0.16) 0%, rgba(230,255,75,0.07) 100%) !important;
    border: 1.5px solid rgba(230,255,75,0.45) !important;
    border-radius: 12px;
    margin: 8px 12px 6px;
    padding: 12px 16px !important;
    color: var(--color-text);
    font-weight: 600;
    box-shadow: 0 0 24px rgba(230,255,75,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .compare-table tbody .compare-cell-elevatem::before {
    content: "" !important;
    display: block;
    width: 104px !important;
    height: 24px !important;
    margin-bottom: 8px;
    background: url('/assets/images/logo.png') no-repeat left center !important;
    background-size: contain !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  /* letzte-Zeile-Border-Resets neutralisieren */
  .compare-table tbody tr:last-child .compare-col-elevatem,
  .compare-table tbody tr:last-child .compare-cell-elevatem {
    border: 1px solid rgba(230,255,75,0.22) !important;
  }
}

/* =================================================================
   v4.7b — Quiz Kapazitäts-Anmerkung (am Terminierungs-Schritt)
   ================================================================= */
.quiz-capacity-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 12px 14px;
  background: rgba(230,255,75,0.06);
  border: 1px solid rgba(230,255,75,0.18);
  border-radius: 10px;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.qcn-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 1px;
}
.qcn-icon svg { width: 16px; height: 16px; }

/* =================================================================
   v4.7b — THANK-YOU PAGE (/danke/)
   ================================================================= */
.danke-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.danke-main { width: 100%; max-width: 640px; }
.danke-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(230,255,75,0.06) 0%, rgba(255,255,255,0.02) 60%);
  border: 1px solid rgba(230,255,75,0.18);
}
.danke-glow {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(230,255,75,0.14), transparent 65%);
  pointer-events: none;
}
.danke-inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 6vw, 56px);
  text-align: center;
}
.danke-logo { display: inline-block; margin-bottom: var(--space-5); }
.danke-logo img { height: 34px; width: auto; }
.danke-check { width: 72px; height: 72px; margin: 0 auto var(--space-4); }
.danke-check svg { width: 100%; height: 100%; }
.danke-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 var(--space-3);
}
.danke-lead {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto var(--space-6);
}
.danke-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  max-width: 420px;
  margin: 0 auto var(--space-6);
}
.danke-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.danke-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.danke-step p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); line-height: 1.45; }
.danke-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  line-height: 1.5;
  max-width: 440px;
  margin: 0 auto var(--space-5);
}
.danke-btn { display: inline-flex; }

/* =================================================================
   v4.8 — FAQ Feinschliff (Gradient bei offen + Reveal-Animation)
   ================================================================= */
.faq-item[open] {
  background: linear-gradient(160deg, rgba(230,255,75,0.07) 0%, rgba(255,255,255,0.02) 55%) !important;
}
.faq-item[open] .faq-a {
  animation: faqReveal 0.38s var(--ease-out);
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-q:hover { color: var(--color-accent); }
.faq-q:hover::after { background: rgba(230,255,75,0.18); }

/* =================================================================
   v4.8.2 — Tap-to-Unmute Overlay (Story-Videos)
   Erster Tap aufs Video aktiviert den Ton; danach native Controls.
   ================================================================= */
.story-unmute {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.story-unmute .su-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(230,255,75,0.45);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.story-unmute .su-badge svg { width: 14px; height: 14px; color: var(--color-accent); }
.story-unmute:hover .su-badge { background: rgba(0,0,0,0.8); transform: translateY(-2px); }

/* =================================================================
   v4.9 — PROOF kombiniert (Video-Testimonials + Google-Reviews in einer Sektion)
   ================================================================= */
.proof-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,255,75,0.22), transparent);
  max-width: 220px;
  margin: var(--space-6) auto var(--space-7);
}
.proof-combined .reviews-header {
  margin-top: 0;
}
/* Google-Block in kombinierter Sektion etwas kompakter als Vollsektion */
.proof-combined .reviews-title { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* =================================================================
   elevatem-Formel — gepinnte Panel-Sequenz (v4.9.11)
   Header sitzt IM gepinnten Bereich (kein Abstand zum Mainpart).
   Desktop: gepinnt + Cross-Fade. Mobile: gestapelt + Scroll-Reveal.
   ================================================================= */
.partnership { position: relative; overflow: clip; }
.partnership::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 100%);
}
.formel-pin { position: relative; }
.formel-pin-inner { position: relative; }
.formel-pin-inner > .container { position: relative; z-index: 1; }

/* Header (sitzt über den Panels) */
.formel-head { text-align: center; }
.formel-headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 6vw, 66px); letter-spacing: -0.02em; line-height: 1.05;
  color: #fff; margin: 16px 0 0;
}

/* Stage = Container der Panels */
.formel-stage { position: relative; }

/* Panel-Grundlayout (auch im Stack-Fallback) */
.formel-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(16px, 4.5vw, 72px);
  align-items: center;
  padding: clamp(30px, 5.5vh, 64px) 0;
}
.formel-panel + .formel-panel { border-top: 1px solid rgba(255,255,255,0.08); }

/* Große Ziffer */
.formel-num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(104px, 18vw, 280px); line-height: 0.8; letter-spacing: -0.045em;
  background: linear-gradient(158deg, #ededed 0%, #9a9a9a 40%, #454545 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; user-select: none;
}

/* Content */
.formel-content { min-width: 0; }
.formel-eyebrow {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent);
}
.formel-eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 2px;
  background: var(--color-accent); margin-right: 12px; flex-shrink: 0;
}
.formel-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.8vw, 58px); letter-spacing: -0.02em; line-height: 1.05;
  color: #fff; margin: 14px 0 0; hyphens: manual; overflow-wrap: break-word;
}
.formel-panel .text-accent { color: var(--color-accent); }
.formel-body {
  font-family: var(--font-body); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6;
  color: var(--color-text-subtle, #9a978f); max-width: 32em; margin: 16px 0 0;
}

/* Stat-Reihe */
.formel-stat-row { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 38px); margin-top: clamp(20px, 3vh, 36px); flex-wrap: wrap; }
.formel-stat { display: flex; flex-direction: column; gap: 5px; }
.formel-stat-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); color: var(--color-accent); line-height: 1; letter-spacing: -0.02em; }
.formel-stat-label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-subtle, #9a978f); }
.formel-stat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.14); flex-shrink: 0; }

/* Balken (Panel 01) — zweifarbig: Du (weiß) + elevatem (lime, rechts) */
.formel-bar-wrap { width: min(100%, 470px); }
.formel-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.formel-bar-du { position: absolute; left: 0; top: 0; height: 100%; width: 93%; background: rgba(255,255,255,0.82); border-radius: 999px; }
.formel-bar-fill { position: absolute; right: 0; top: 0; height: 100%; width: 7%; min-width: 22px; background: var(--color-accent); border-radius: 999px; box-shadow: 0 0 14px rgba(230,255,75,0.55); }
.formel-bar-labels { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-body); font-size: 12px; color: var(--color-text-subtle, #9a978f); }

/* Kurve (Panel 03) */
.formel-chart { width: clamp(120px, 15vw, 190px); }
.formel-chart svg { width: 100%; height: 44px; display: block; }

/* Dots */
.formel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.formel-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.22); transition: width 0.4s, background 0.4s; }
.formel-dot.is-active { background: var(--color-accent); width: 26px; }

/* ===== MIT JS: Desktop gepinnt, Header oben, Panels überblenden ===== */
.formel-js .formel-pin { height: 400vh; }
.formel-js .formel-pin-inner {
  position: sticky; top: 0; height: 100vh; display: flex; align-items: stretch;
}
.formel-js .formel-pin-inner > .container {
  display: flex; flex-direction: column;
  height: 100%; padding-top: clamp(36px, 7vh, 84px); padding-bottom: clamp(26px, 4.5vh, 56px);
}
.formel-js .formel-head { flex-shrink: 0; }
.formel-js .formel-stage { flex: 1; position: relative; min-height: 0; margin-top: clamp(20px, 3.5vh, 44px); }
.formel-js .formel-panel {
  position: absolute; inset: 0; margin: auto; height: max-content; padding: 0; border-top: none;
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.55s;
  pointer-events: none;
}
.formel-js .formel-panel.is-current {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.formel-js .formel-dots { flex-shrink: 0; margin-top: clamp(14px, 2.5vh, 28px); }

/* ===== Mobile: gestapelt + Scroll-Reveal ===== */
@media (max-width: 860px) {
  .formel-panel { grid-template-columns: 1fr; gap: 8px; }
  .formel-num { font-size: clamp(80px, 28vw, 144px); }
  .formel-headline { font-size: clamp(30px, 8vw, 44px); }
  .formel-js .formel-pin { height: auto; }
  .formel-js .formel-pin-inner { position: static; height: auto; display: block; }
  .formel-js .formel-pin-inner > .container { display: block; height: auto; padding-top: 0; padding-bottom: 0; }
  .formel-js .formel-stage { margin-top: 0; }
  .formel-js .formel-panel {
    position: relative; inset: auto; margin: 0; height: auto; padding: clamp(30px, 5.5vh, 52px) 0;
    opacity: 0; visibility: visible; transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
    pointer-events: auto;
  }
  .formel-js .formel-panel.formel-in { opacity: 1; transform: none; }
  .formel-js .formel-panel + .formel-panel { border-top: 1px solid rgba(255,255,255,0.08); }
  .formel-js .formel-dots { display: none; }
}

/* ===== Reduced-Motion: sichtbar, ohne Bewegung ===== */
@media (prefers-reduced-motion: reduce) {
  .formel-js .formel-pin { height: auto; }
  .formel-js .formel-pin-inner { position: static; height: auto; display: block; }
  .formel-js .formel-pin-inner > .container { display: block; height: auto; padding-top: 0; padding-bottom: 0; }
  .formel-js .formel-stage { margin-top: 0; }
  .formel-js .formel-panel { position: relative; inset: auto; margin: 0; height: auto; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none; }
  .formel-js .formel-panel + .formel-panel { border-top: 1px solid rgba(255,255,255,0.08); }
  .formel-js .formel-dots { display: none; }
}