.teaser { background: linear-gradient(135deg, #0e5570 0%, #1c6f64 52%, #46661a 100%) !important; }
  .faq { background: linear-gradient(135deg, #0e5570 0%, #7a3548 52%, #ff5541 100%) !important; }
  /* v2.2: CTA-Band — Footer-Verlauf */
  .cta-band { background: linear-gradient(135deg, #0e5570 0%, #7a3548 52%, #ff5541 100%) !important; }
  .cta-band h2 .g { color: #fff !important; }
  /* Primär-Button im CTA-Band → Gurado Grün */
  .cta-band .btn-primary { background: var(--ink) !important; color: #fff !important; }
  .cta-band .btn-primary:hover { background: #000 !important; }
  /* v2.1: Footer — Markenverlauf (cyan→grün), abgedunkelt für lesbare helle Schrift */
  .gf { background: linear-gradient(135deg, #0e5570 0%, #1c6f64 52%, #46661a 100%) !important; }

  /* v2.2: Hero-Wrap auf 90% begrenzen → Luft am linken Rand */
  .hero .wrap { width: min(90%, 1728px) !important; }

  /* Hero-Größen-Toggle: Kleiner-Variante */
  #heroVis.hero-vis--small {
    transform: translate(0px, 45px) scale(0.88) !important;
    transform-origin: top right !important;
    width: 94% !important;
    margin-right: 1% !important;
    margin-bottom: 0 !important;
    transition: transform .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), margin .4s cubic-bezier(.4,0,.2,1) !important;
  }
  /* Toggle-Pill */
  #hero-size-toggle {
    position: absolute; bottom: 20px; right: 20px; z-index: 20;
    display: flex; align-items: center; gap: 2px; padding: 4px;
    background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,.07); border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    font-family: 'Quicksand', sans-serif;
  }
  .hst-btn {
    font-size: 11px; font-weight: 600; letter-spacing: .2px;
    color: #8a9aac; background: transparent; border: none; cursor: pointer;
    padding: 5px 13px; border-radius: 999px;
    transition: background .15s, color .15s;
  }
  .hst-btn.active { background: #fff; color: #1a2533; box-shadow: 0 1px 4px rgba(0,0,0,.1); }

  /* v2.2: Hero-Bild luftiger — weniger Anschnitt */
  .hero-vis {
    transform: translate(-20px, 30px) scale(1.0) !important;
    margin-bottom: -24px !important;
    width: calc(100% + clamp(24px,4vw,60px)) !important;
    margin-right: calc(-1 * clamp(24px,4vw,60px)) !important;
  }

  @media (min-width:1500px) {
    .hero-vis { transform: translate(-20px, 32px) scale(1.0) !important; margin-bottom: -36px !important; }
  }

  /* v2.2: animierte Kästchen in der Bonuskarte-Section */
  .teaser .wrap, .faq .wrap, .gs-stepper-dark .wrap { position: relative; z-index: 2; }
  .gs-stepper-dark { position: relative; }
  .teaser .bx, .faq .bx, .gs-stepper-dark .bx { position: absolute; z-index: 1; border-radius: 6px; box-shadow: 0 8px 20px -8px rgba(20,30,15,.35); }
  @media (prefers-reduced-motion: no-preference) {
    .teaser .bx, .faq .bx, .gs-stepper-dark .bx { animation: bx-drop .9s cubic-bezier(.22,.61,.36,1) both, bx-float 4.2s ease-in-out .9s infinite; }
    .teaser .bx:nth-of-type(2), .faq .bx:nth-of-type(2), .gs-stepper-dark .bx:nth-of-type(2) { animation-delay: .15s, 1.05s; animation-duration: .9s, 5.4s; }
    .teaser .bx:nth-of-type(3), .faq .bx:nth-of-type(3), .gs-stepper-dark .bx:nth-of-type(3) { animation-delay: .28s, 1.18s; animation-duration: .9s, 3.8s; }
    .teaser .bx:nth-of-type(4), .faq .bx:nth-of-type(4), .gs-stepper-dark .bx:nth-of-type(4) { animation-delay: .42s, 1.32s; animation-duration: .9s, 5s; }
    .teaser .bx:nth-of-type(5), .gs-stepper-dark .bx:nth-of-type(5) { animation-delay: .55s, 1.45s; animation-duration: .9s, 4.6s; }
    .teaser .bx:nth-of-type(6), .gs-stepper-dark .bx:nth-of-type(6) { animation-delay: .68s, 1.58s; animation-duration: .9s, 6s; }
  }
  @media (max-width: 560px) { .teaser .bx, .faq .bx, .gs-stepper-dark .bx { display: none; } }