/* bbn-quiz-v2.css (S359, B4 Seite 7 /narzissmus-test) | Quellen: Live-Variablen-Block,
   CDN code/quiz/bbn-quiz.css v85 wortgleich, Inline-Block rawhtml-ec478a5a;
   Schriften auf Marken-Standard abgebildet (Playfair->Edle, Inter/Lora->Klare);
   S359-Ergaenzungen am Ende. Reveal-CSS (rawhtml-13be90e6) bewusst draussen (tot seit v91). */

/* ============================================
   CSS-VARIABLEN (exakt aus FF-Original)
   ============================================ */
:root {
  --primary: #660033;
  --primary-dark: #4A0024;
  --primary-light: #8A0044;
  --secondary: #C9A35C;
  --secondary-light: #E4C98A;
  --accent: #F4E4D1;
  --dark: #2A0016;
  --dark-mid: #3D0020;
  --text: #333340;
  --text-light: #666680;
  --text-lighter: #9999AA;
  --white: #FFFFFF;
  --off-white: #FDF8F4;
  --cream: #FAF0E6;
  --success: #4CAF50;
  --warning: #FF6B35;
  --gradient-primary: linear-gradient(135deg, #660033 0%, #4A0024 50%, #4A0024 100%);
  --gradient-warm: linear-gradient(135deg, #C9A35C 0%, #E4C98A 100%);
  --gradient-hero: linear-gradient(170deg, #2A0016 0%, #4A0024 40%, #4A0024 100%);
  --shadow-sm: 0 2px 8px rgba(102,0,51,0.08);
  --shadow-md: 0 4px 20px rgba(102,0,51,0.12);
  --shadow-lg: 0 8px 40px rgba(102,0,51,0.16);
  --shadow-xl: 0 16px 60px rgba(102,0,51,0.20);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ============================================
   SIO OVERRIDES — basiert auf echtem SIO-DOM
   SIO nutzt styled-components (sc-*) mit IDs:
   - section[id^="section-"]
   - div[id^="row-"]
   - [id^="rawhtml-"] (RawHtml-Wrapper, hat text-align:center)
   ============================================ */

/* RawHtml-Wrapper setzt text-align:center — aufheben */
[id^="rawhtml-"] {
  text-align: left !important;
}

/* SIO Section/Row Padding entfernen */
section[id^="section-"] {
  padding: 0 !important;
  overflow: hidden !important;
}
div[id^="row-"] {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Schriftarten global setzen */
body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
}

/* ================================================
   BBN Quiz Page — Consolidated CSS
   Version: 85.0-cdn
   Extracted from: bbn-quiz-footer-v85.html
   Date: 2026-03-22
   CDN: /wp-content/uploads/bbn/bbn-quiz-basis.css
   ================================================ */
/* Google-Import entfernt (S359, Schriften vom eigenen Boden) */

/* ========== E-MAIL POPUP STYLES ========== */
#bbn-check-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#bbn-check-overlay.active {
  display: flex;
}
#bbn-check-popup {
  background: #2A0016;
  border: 1px solid rgba(201,163,92,0.35);
  border-radius: 16px;
  padding: 40px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: bbnPopupIn 0.3s ease;
}
@keyframes bbnPopupIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#bbn-check-popup .bbn-popup-icon {
  font-size: 42px;
  margin-bottom: 16px;
  display: block;
}
#bbn-check-popup h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #C9A35C;
  font-size: 22px;
  margin: 0 0 14px;
  line-height: 1.35;
}
#bbn-check-popup p {
  font-family: 'Source Sans 3', sans-serif;
  color:#FFFFFF;
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
}
#bbn-check-popup .bbn-popup-btn {
  display: inline-block;
  background: linear-gradient(135deg, #C9A35C, #B08B45);
  color: #2A0016;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 12px;
  width: 100%;
}
#bbn-check-popup .bbn-popup-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,163,92,0.4);
}
#bbn-check-popup .bbn-popup-close {
  display: block;
  color: rgba(255,255,255,0.4);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  background: none;
  border: none;
  text-decoration: underline;
}
#bbn-check-popup .bbn-popup-close:hover {
  color:#FFFFFF;
}

/* ========== MAIN QUIZ STYLES ========== */
/* ============================================
   FARB-VARIABLEN & GRUNDLAGEN
   Exakt nach FlexiFunnels-Original
   Fonts: geladen via link-Element (oben)
   ============================================ */
:root {
  --primary: #660033;
  --primary-dark: #4A0024;
  --primary-light: #8A0044;
  --secondary: #C9A35C;
  --secondary-light: #E4C98A;
  --accent: #F4E4D1;
  --dark: #2A0016;
  --dark-mid: #3D0020;
  --text: #333340;
  --text-light: #666680;
  --text-lighter: #9999AA;
  --white: #FFFFFF;
  --off-white: #FDF8F4;
  --cream: #FAF0E6;
  --success: #4CAF50;
  --warning: #FF6B35;
  --gradient-primary: linear-gradient(135deg, #660033 0%, #4A0024 50%, #4A0024 100%);
  --gradient-warm: linear-gradient(135deg, #C9A35C 0%, #E4C98A 100%);
  --gradient-hero: linear-gradient(170deg, #2A0016 0%, #4A0024 40%, #4A0024 100%);
  --shadow-sm: 0 2px 8px rgba(102,0,51,0.08);
  --shadow-md: 0 4px 20px rgba(102,0,51,0.12);
  --shadow-lg: 0 8px 40px rgba(102,0,51,0.16);
  --shadow-xl: 0 16px 60px rgba(102,0,51,0.20);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ============================================
   SYSTEME.IO FORCE OVERRIDES
   SIO verwendet styled-components (sc-*) Klassen,
   NICHT Bootstrap. Der RawHtml-Wrapper (sc-ejaYJg)
   setzt text-align:center — das muss überschrieben werden.
   Wir nutzen stabile ID-Attribut-Selektoren.
   ============================================ */

/* --- SIO RawHtml-Wrapper: text-align:center aufheben --- */
[id^="rawhtml-"] {
  text-align: left !important;
}

/* --- SIO Section/Row/Column Padding entfernen --- */
section[id^="section-"] {
  padding: 0 !important;
  overflow: hidden !important;
}
div[id^="row-"] {
  padding: 0 !important;
  max-width: 100% !important;
}

/* --- Globale Schriftarten --- */
[id^="rawhtml-"] {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--text) !important;
  line-height: 1.7 !important;
}
[id^="rawhtml-"] h1,
[id^="rawhtml-"] h2,
[id^="rawhtml-"] h3,
[id^="rawhtml-"] h4,
[id^="rawhtml-"] h5,
[id^="rawhtml-"] h6 {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
}

/* ============================================
   ANIMATIONEN (alle aus FF-Original)
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-Animation */
.animate-on-scroll {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.animate-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ============================================
   CONTAINER
   ============================================ */
.bbn-container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* SIO-spezifisch: Container innerhalb RawHtml-Wrapper */
[id^="rawhtml-"] .bbn-container {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   TOP-BAR — FF: var(--dark) = #2A0016
   ============================================ */
.top-bar {
  background: var(--dark) !important;
  padding: 10px 0 !important;
  text-align: center !important;
  color: var(--white) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.top-bar span {
  color: var(--secondary) !important;
  font-weight: 600 !important;
}
.pulse-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background: var(--success) !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  animation: pulse 2s infinite !important;
  vertical-align: middle !important;
}

/* ============================================
   HERO — FF: Dunkler Gradient mit Welle
   ============================================ */
.hero {
  background: var(--gradient-hero) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 80px 0 150px !important;
  min-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
}
/* SVG-Punkt-Pattern Overlay */
.hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Wellenform am unteren Rand */
.hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important; right: 0 !important;
  height: 120px !important;
  background: var(--off-white) !important;
  clip-path: ellipse(70% 100% at 50% 100%) !important;
  z-index: 1 !important;
}
.hero .bbn-container { position: relative !important; z-index: 2 !important; }
.bbn-v5-hero-trust { position: relative !important; z-index: 10 !important; }
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}
/* Hero Badge — gold auf dunkel */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(201,163,92,0.15) !important;
  border: 1px solid rgba(201,163,92,0.3) !important;
  color: var(--secondary) !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  animation: fadeIn 1s ease !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.hero-badge svg { width: 16px !important; height: 16px !important; color: var(--secondary) !important; }
/* Hero H1 — weiß auf dunkel */
.hero h1 {
  color: var(--white) !important;
  font-size: 3.2rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
  animation: fadeInUp 0.8s ease !important;
}
.hero h1 em {
  font-style: italic !important;
  color: var(--secondary) !important;
  display: block !important;
  font-size: 0.667em !important;
  text-decoration: none !important;
}
.hero-sub {
  color:#FFFFFF !important;
  font-size: 1.2rem !important;
  line-height: 1.7 !important;
  margin-bottom: 32px !important;
  max-width: 540px !important;
  animation: fadeInUp 0.8s ease 0.2s both !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.hero-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
  animation: fadeInUp 0.8s ease 0.4s both !important;
}
.hero-feature {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color:#FFFFFF !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Check-Kreise — gold/transparent auf dunkel */
.check {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background: rgba(201,163,92,0.2) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.check svg,
.ft-svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--secondary) !important;
}
.hero-cta-area {
  animation: fadeInUp 0.8s ease 0.6s both !important;
}

/* ============================================
   BUTTON PRIMARY — FF: Gold/Sekundär, Pill-Form
   ============================================ */
.btn-primary,
a.btn-primary,
a.gjs-btn.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--secondary) !important;
  color: var(--dark) !important;
  padding: 18px 40px !important;
  border-radius: 50px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(201,163,92,0.4) !important;
  letter-spacing: 0.5px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(201,163,92,0.5) !important;
  background: var(--secondary-light) !important;
}
.btn-primary svg { width: 20px !important; height: 20px !important; }

/* Hero Trust — hell auf dunkel */
.hero-trust {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 20px !important;
  color:#FFFFFF !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.hero-trust-avatars { display: flex !important; }
.avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-left: -8px !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.avatar:first-child { margin-left: 0 !important; }

/* ============================================
   HERO VISUAL CARD — Glasmorphismus
   ============================================ */
.hero-visual {
  animation: fadeIn 1.2s ease 0.3s both !important;
}
.hero-card {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-xl) !important;
  padding: 40px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  color: white !important;
}
.hero-card::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important; left: -50% !important;
  width: 200% !important; height: 200% !important;
  background: radial-gradient(circle at 30% 30%, rgba(201,163,92,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}
/* Schmetterling — Goldener Gradient-Kreis mit Float-Animation */
.hero-card-icon {
  width: 80px !important;
  height: 80px !important;
  background: var(--gradient-warm) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 24px !important;
  animation: float 3s ease-in-out infinite !important;
  font-size: 2.5rem !important;
}
.hero-card h3 {
  color: var(--white) !important;
  font-size: 1.6rem !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}
.hero-card p {
  color:#FFFFFF !important;
  text-align: center !important;
  font-size: 1rem !important;
  margin-bottom: 28px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  line-height: 1.6 !important;
}
.hero-card-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 16px !important;
  text-align: center !important;
}
.hero-stat {
  padding: 16px 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: var(--radius-md) !important;
}
.hero-stat-num {
  color: var(--secondary) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.hero-stat-label {
  color:#FFFFFF !important;
  font-size: 1rem !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Floating Decorations */
.floating-element {
  position: absolute !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 50% !important;
  animation: float 4s ease-in-out infinite !important;
  display: block !important;
}
.float-1 { width: 60px !important; height: 60px !important; top: -20px !important; right: -20px !important; animation-delay: 0s !important; }
.float-2 { width: 40px !important; height: 40px !important; bottom: 20px !important; left: -15px !important; animation-delay: 1s !important; }
.float-3 { width: 30px !important; height: 30px !important; top: 40% !important; right: -10px !important; animation-delay: 2s !important; }

/* ============================================
   SOCIAL PROOF BAR — FF: weiß, Border oben/unten
   ============================================ */
.social-proof-bar {
  background: var(--white) !important;
  border-top: 1px solid rgba(102,0,51,0.06) !important;
  border-bottom: 1px solid rgba(102,0,51,0.06) !important;
  padding: 32px 0 !important;
}
.proof-bar-inner {
  display: flex !important;
  justify-content: center !important;
  gap: 48px !important;
  flex-wrap: wrap !important;
}
.proof-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.proof-icon {
  width: 44px !important;
  height: 44px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  flex-shrink: 0 !important;
}
.proof-text strong {
  display: block !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.proof-text { color: var(--text-light) !important; font-size: 1rem !important; }

/* ============================================
   GLOBALE SECTION STYLES
   ============================================ */
.section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--primary) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin-bottom: 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Gold-Linie vor dem Eyebrow */
.section-eyebrow::before {
  content: '' !important;
  width: 30px !important;
  height: 2px !important;
  background: var(--secondary) !important;
}
.section-title {
  font-size: 2.6rem !important;
  font-weight: 400 !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}
.section-title span,
.section-title em {
  color: var(--primary) !important;
  font-style: normal !important;
}
.section-subtitle {
  font-size: 1.15rem !important;
  color: var(--text-light) !important;
  max-width: 700px !important;
  line-height: 1.8 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   PROBLEM SECTION — FF: Off-White, LINKSBÜNDIG
   ============================================ */
.problem-section {
  background: var(--off-white) !important;
  padding: 100px 0 !important;
}
.problem-section .section-eyebrow { color: var(--primary) !important; }
.problem-section .section-title { color: var(--dark) !important; }
.problem-section .section-title span { color: var(--primary) !important; }
.problem-section .section-subtitle { color: var(--text-light) !important; margin-bottom: 48px !important; }
.problem-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  margin-top: 60px !important;
  align-items: start !important;
}
.problem-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
/* Problem Items — weiß mit linkem Border */
.problem-item {
  display: flex !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  background: var(--white) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s ease !important;
  border-left: 4px solid transparent !important;
}
.problem-item:hover {
  border-left-color: var(--primary) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateX(4px) !important;
}
.problem-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #FFF0F0 !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
}
.problem-item h4 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin-bottom: 4px !important;
}
.problem-item p {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  line-height: 1.6 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Problem Story/Sidebar — Burgundy-Gradient */
.problem-sidebar {
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-lg) !important;
  padding: 40px !important;
  color: var(--white) !important;
  position: relative !important;
  overflow: hidden !important;
}
.problem-sidebar::before {
  content: '"' !important;
  position: absolute !important;
  top: -10px !important; left: 20px !important;
  font-size: 10rem !important;
  font-family: 'Cormorant Garamond', serif !important;
  color: rgba(255,255,255,0.06) !important;
  line-height: 1 !important;
}
.problem-sidebar h3 {
  font-size: 1.5rem !important;
  margin-bottom: 20px !important;
  color: var(--secondary-light) !important;
  position: relative !important;
}
.problem-sidebar p {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color:#FFFFFF !important;
  margin-bottom: 16px !important;
  position: relative !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.problem-sidebar-author {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  position: relative !important;
}
.anita-author-photo {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  border: 3px solid rgba(255,255,255,0.25) !important;
}
.author-name { font-weight: 600 !important; font-size: 1rem !important; color: white !important; }
.author-title { color:#FFFFFF !important; font-size: 1rem !important; }

/* ============================================
   RECOGNITION (WARNSIGNALE) — FF: Weiß, zentriert
   ============================================ */
.recognition-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
  text-align: center !important;
}
.recognition-intro {
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}
.warning-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.warning-card {
  background: var(--off-white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px 28px !important;
  text-align: center !important;
  transition: all 0.4s ease !important;
  border: 2px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
}
.warning-card:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}
.warning-num {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: rgba(102,0,51,0.06) !important;
  line-height: 1 !important;
  font-family: 'Cormorant Garamond', serif !important;
}
.warning-card-icon {
  font-size: 2rem !important;
  margin-bottom: 16px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(201,163,92,0.1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.warning-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin-bottom: 8px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.warning-card p {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  line-height: 1.6 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.warning-cta {
  text-align: center !important;
  margin-top: 50px !important;
  padding-bottom: 60px !important;
}
.warning-cta-title {
  font-size: 1.2rem !important;
  color: var(--dark) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-style: normal !important;
}
.warning-cta-sub {
  color: var(--text-light) !important;
  font-size: 0.95rem !important;
  margin-bottom: 24px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-style: normal !important;
}

/* ============================================
   WARNING SECTION — Zentrierung
   ============================================ */
.warning-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
  text-align: center !important;
}
.warning-section .section-eyebrow {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.warning-section .section-title {
  text-align: center !important;
}
.warning-section .section-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 48px !important;
}

/* ============================================
   QUIZ — FF: Dunkler Gradient, Glasmorphismus
   ============================================ */
.quiz-section {
  background: var(--gradient-hero) !important;
  padding: 100px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Quiz SVG-Pattern */
.quiz-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v22H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20z'/%3E%3C/g%3E%3C/svg%3E") !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.quiz-section .bbn-container { position: relative !important; z-index: 1 !important; }
.quiz-section .section-eyebrow {
  color: var(--secondary) !important;
  display: flex !important;
  width: fit-content !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 16px !important;
}
.quiz-section .section-eyebrow::before {
  background: var(--secondary) !important;
}
.quiz-section .section-title {
  color: var(--white) !important;
  font-size: 2.6rem !important;
  text-align: center !important;
}
.quiz-section .section-title span { color: var(--secondary) !important; }
.quiz-section .section-subtitle {
  color:#FFFFFF !important;
  font-size: 1.1rem !important;
  max-width: 650px !important;
  margin: 0 auto 50px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  text-align: center !important;
}
/* Quiz Container — Glasmorphismus */
.quiz-card {
  max-width: 780px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
}
.quiz-progress {
  padding: 20px 32px !important;
  background: rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.quiz-progress-text {
  color:#FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.quiz-progress-text span { color: var(--secondary) !important; }
.quiz-progress-bar-bg {
  flex: 1 !important;
  margin-left: 20px !important;
  height: 6px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.quiz-progress-bar-fill {
  height: 100% !important;
  background: linear-gradient(135deg, #C9A35C 0%, #B08B45 100%) !important;
  border-radius: 3px !important;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
  width: 0%;
}
.quiz-card .quiz-question { padding: 40px 40px 32px !important; }
.quiz-question { display: none !important; }
.quiz-question.active { display: block !important; animation: fadeInUp 0.5s ease !important; }
.quiz-question h3 {
  color: var(--white) !important;
  font-size: 1.35rem !important;
  margin-bottom: 28px !important;
  line-height: 1.4 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
}
.q-num {
  color: var(--secondary) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 400 !important;
}
.quiz-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
/* Quiz-Optionen — transparent auf dunkel */
.quiz-option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  color:#FFFFFF !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.quiz-option:hover {
  background: rgba(201,163,92,0.12) !important;
  border-color: rgba(201,163,92,0.3) !important;
}
.quiz-option.selected {
  background: rgba(201,163,92,0.15) !important;
  border-color: var(--secondary) !important;
}
.radio-circle {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  position: relative !important;
  transition: all 0.2s !important;
}
.quiz-option.selected .radio-circle {
  border-color: var(--secondary) !important;
  background: var(--secondary) !important;
}
.quiz-option.selected .radio-circle::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: var(--dark) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.quiz-nav {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 32px !important;
  gap: 16px !important;
  padding: 0 40px 32px !important;
}
.quiz-btn {
  padding: 14px 20px !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.quiz-btn-back {
  background: rgba(255,255,255,0.08) !important;
  color:#FFFFFF !important;
  visibility: hidden;
}
.quiz-btn-back:hover { color: var(--white) !important; }
.quiz-btn-next {
  background: var(--secondary) !important;
  color: var(--dark) !important;
  box-shadow: 0 4px 16px rgba(201,163,92,0.3) !important;
}
.quiz-btn-next:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(201,163,92,0.4) !important;
}
.quiz-btn-next:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.quiz-nav.quiz-nav-hidden { display: none !important; }

/* Quiz Result */
.quiz-result { display: none !important; text-align: center !important; padding: 40px 40px 32px !important; }
.quiz-result.active { display: block !important; animation: fadeInUp 0.6s ease !important; }
.quiz-result-icon {
  font-size: 3rem !important;
  margin-bottom: 16px !important;
  animation: heartbeat 2s infinite !important;
}
.quiz-result h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 20px !important;
}
.quiz-score-bar { margin-bottom: 24px !important; }
.quiz-score-bar-bg {
  height: 12px !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
}
.quiz-score-bar-fill {
  height: 100% !important;
  border-radius: 100px !important;
  width: 0%;
  transition: width 1.5s ease !important;
}
.score-high { background: linear-gradient(90deg, #FF6B6B, #EE5A24) !important; }
.score-mid { background: linear-gradient(90deg, #FECA57, #FF9F43) !important; }
.score-low { background: linear-gradient(90deg, #1DD1A1, #10AC84) !important; }
.quiz-score-label {
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin-top: 8px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.quiz-result p {
  font-size: 1rem !important;
  color:#FFFFFF !important;
  line-height: 1.7 !important;
  margin-top: 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   LEAD FORM (Abschnitt 2 - natives SIO-Formular)
   FF: Gradient-Hero Hintergrund, Glasmorphismus
   ============================================ */
.bbn-form-section {
  background: var(--gradient-hero) !important;
  padding: 80px 24px 80px !important;
  display: none;
}
.bbn-form-section.visible { display: block !important; }

/* Glass-Karte: wraps den SIO row-Div = kompletter Formular-Bereich */
.bbn-form-section div[id^="row-"] {
  max-width: 780px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  padding: 24px 40px 24px !important;
  box-sizing: border-box !important;
}

/* Block-2 Header (inline-style display:none + bg:#2A0016 überschreiben) */
#bbn-form-section {
  background: transparent !important;
  padding: 0 0 12px !important;
  text-align: center !important;
}
.bbn-form-header {
  background: transparent !important;
  padding: 20px 0 12px !important;
  margin-bottom: 0 !important;
}
.bbn-form-header h3 {
  color: var(--white) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
}
.bbn-form-header p {
  color:#FFFFFF !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  max-width: 500px !important;
  margin: 0 auto 0 !important;
  line-height: 1.6 !important;
}

/* Block-3 Footer (inline-style bg:#2A0016 überschreiben) */
#bbn-form-footer {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  display: none;
}
#bbn-form-footer p {
  color: rgba(255,255,255,0.45) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

/* SIO Formular Inputs — dunkel/transparent */
.bbn-form-section .sf-form-wrapper,
.bbn-form-section form {
  max-width: 100% !important;
  margin: 0 auto !important;
}
.bbn-form-section input[type="text"],
.bbn-form-section input[type="email"],
.bbn-form-section input[type="tel"] {
  width: 100% !important;
  padding: 14px 18px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--white) !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}
.bbn-form-section input::placeholder { color: rgba(255,255,255,0.4) !important; }
.bbn-form-section input:focus {
  border-color: var(--secondary) !important;
  box-shadow: 0 0 0 3px rgba(201,163,92,0.15) !important;
}

/* Submit-Button: Sticky-CTA-Gradient + Puls + Hover */
@keyframes pulseFormBtn {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(201,163,92,0.45), 0 0 0 0 rgba(201,163,92,0);
  }
  50% {
    box-shadow: 0 6px 32px rgba(201,163,92,0.65), 0 0 0 10px rgba(201,163,92,0.1);
  }
}
@keyframes pulseCtaText {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.025); }
}
@keyframes bbnCountdownShrink {
  from { width: 100%; }
  to   { width: 0%; }
}
@keyframes bbnShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes bbnPulseText {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.015); }
}
@property --snake-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes snakeSpin {
  to { --snake-angle: 360deg; }
}
@keyframes snakeRotateFallback {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Snake-Border Wrapper ── */
.snake-border-wrap {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  /* Moderne Browser: conic-gradient direkt animiert via @property */
  background: conic-gradient(
    from var(--snake-angle) at 50% 50%,
    transparent             0deg,
    transparent             240deg,
    rgba(196,149,106,0.0)   241deg,
    rgba(196,149,106,0.3)   265deg,
    rgba(196,149,106,0.7)   285deg,
    #B08B45                 305deg,
    #C9A35C                 325deg,
    #E4C98A                 345deg,
    rgba(232,194,149,0.0)   360deg
  );
  animation: snakeSpin 3.5s linear infinite;
}
/* Fallback: ::before rotiert für Browser ohne @property Support */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .snake-border-wrap {
    background: rgba(255,255,255,0.08);
    animation: none;
  }
  .snake-border-wrap::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
      transparent           0deg,
      transparent           240deg,
      rgba(196,149,106,0.15) 260deg,
      rgba(196,149,106,0.45) 280deg,
      #B08B45               300deg,
      #C9A35C               320deg,
      #E4C98A               340deg,
      #C9A35C               355deg,
      transparent           360deg
    );
    animation: snakeRotateFallback 3.5s linear infinite;
  }
}
.snake-border-inner {
  position: relative;
  background: rgba(28, 18, 48, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 15px;
  padding: 18px 28px;
  text-align: center;
}
/* Snake-Wrap speziell für About-Bild — kein Inner-Div nötig,
   da .about-image-frame selbst den opaken Hintergrund liefert */
.about-snake-wrap {
  border-radius: var(--radius-xl) !important;
  padding: 2px !important;
  display: block !important;
  position: relative !important;
}
.bbn-form-section .sf-button,
.bbn-form-section button[type="submit"],
.bbn-form-section .btn,
.bbn-form-section a.sf-button {
  background: linear-gradient(135deg, #C9A35C 0%, #B08B45 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 18px 40px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #2A0016 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
  animation: pulseFormBtn 2.4s ease-in-out infinite !important;
  text-align: center !important;
  display: block !important;
  font-family: 'Source Sans 3', sans-serif !important;
  letter-spacing: 0.3px !important;
  margin-top: 8px !important;
}
.bbn-form-section .sf-button:hover,
.bbn-form-section button[type="submit"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 40px rgba(201,163,92,0.6) !important;
  background: linear-gradient(135deg, #E4C98A 0%, #C9A35C 100%) !important;
  animation: none !important;
}
.form-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 1rem !important;
  color:#FFFFFF !important;
  margin-top: 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.form-trust svg { width: 16px !important; height: 16px !important; }

/* ============================================
   SOLUTION — FF: Off-White, zentriert
   ============================================ */
.solution-section {
  background: var(--off-white) !important;
  padding: 100px 0 !important;
  text-align: center !important;
}
.solution-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}
.solution-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.solution-card {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px 28px !important;
  border: 1px solid rgba(102,0,51,0.06) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.4s ease !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.solution-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: var(--gradient-warm) !important;
  transform: scaleX(0) !important;
  transition: transform 0.4s ease !important;
}
.solution-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-6px) !important;
}
.solution-card:hover::after { transform: scaleX(1) !important; }
.solution-card-icon {
  width: 64px !important;
  height: 64px !important;
  background: var(--accent) !important;
  border-radius: var(--radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.6rem !important;
  margin: 0 auto 20px !important;
}
.solution-card h3 { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--dark) !important; margin-bottom: 12px !important; font-family: 'Source Sans 3', sans-serif !important; }
.solution-card p { font-size: 1rem !important; color: var(--text-light) !important; line-height: 1.6 !important; font-family: 'Source Sans 3', sans-serif !important; }

/* ============================================
   ABOUT / CREDIBILITY — FF: Weiß, linksbündig
   ============================================ */
.about-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
}
.about-grid {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 56px !important;
  align-items: start !important;
}
.about-content-top { grid-column: 1 !important; grid-row: 1 !important; }
.about-content-body { grid-column: 1 !important; grid-row: 2 !important; }
.about-image { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: start !important; }
.about-image { position: relative !important; }
.about-image-frame {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(170deg, #2A0016 0%, #4A0024 40%, #4A0024 100%) !important;
  border-radius: var(--radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-shadow: 0 0 0 2px #C9A35C, 0 0 16px rgba(201,163,92,0.35) !important;
}
@keyframes aboutPulse {
  0%, 100% { transform: scale(1.00); }
  50%       { transform: scale(1.025); }
}
/* Snake-Wrap um Anitas Foto — Gold sichtbar auf dunklem Hintergrund */
.about-img-snake-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  padding: 2px !important;
  position: relative !important;
  display: block !important;
  flex-shrink: 0 !important;
  background: conic-gradient(
    from var(--snake-angle) at 50% 50%,
    transparent 0deg,
    transparent 240deg,
    rgba(196,149,106,0.0) 241deg,
    rgba(196,149,106,0.3) 265deg,
    rgba(196,149,106,0.7) 285deg,
    #B08B45 305deg,
    #C9A35C 325deg,
    #E4C98A 345deg,
    rgba(232,194,149,0.0) 360deg
  ) !important;
  animation: snakeSpin 3.5s linear infinite !important;
}
.about-img-snake-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 12px !important;
  animation: aboutPulse 4s ease-in-out infinite !important;
  transition: transform 0.4s ease !important;
  cursor: pointer !important;
}
.about-img-snake-wrap img:hover {
  transform: scale(1.04) !important;
  animation-play-state: paused !important;
}
.about-image-placeholder {
  width: 200px !important;
  height: 200px !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 4rem !important;
}
.about-badge {
  position: absolute !important;
  bottom: -16px !important;
  right: -16px !important;
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px 24px !important;
  box-shadow: var(--shadow-lg) !important;
  text-align: center !important;
  border: 2px solid #C9A35C !important;
}
.about-badge-num {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  line-height: 1 !important;
}
.about-badge-label {
  font-size: 0.875rem !important;
  color: var(--text-light) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.bbn-v5-anita-badge .about-badge-num { color: #C9A35C !important; }
.bbn-v5-anita-badge .about-badge-label { color: #C9A35C !important; }
.about-content .section-eyebrow { margin-bottom: 12px !important; }
.about-content h2 {
  font-size: 2.4rem !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}
.about-content h2 span { color: var(--primary) !important; }
.about-content .lead-text {
  font-size: 1.1rem !important;
  color: var(--text) !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
  font-weight: 500 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.about-content p {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.about-credentials {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 28px !important;
}
.credential {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: var(--off-white) !important;
  border-radius: var(--radius-sm) !important;
}
.credential-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}
.credential span {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   PROCESS — FF: Off-White, Timeline, HELL
   ============================================ */
.process-section {
  background: var(--off-white) !important;
  padding: 100px 0 !important;
}
.process-header {
  text-align: center !important;
  margin-bottom: 70px !important;
}
.process-section .section-eyebrow { color: var(--primary) !important; }
.process-section .section-title { color: var(--dark) !important; }
.process-section .section-title span { color: var(--primary) !important; }
.process-section .section-subtitle { color: var(--text-light) !important; margin: 0 auto !important; }
.process-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  position: relative !important;
}
/* Timeline-Linie — Gradient */
.process-steps::before {
  content: '' !important;
  position: absolute !important;
  left: 35px !important;
  top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(to bottom, var(--secondary), var(--primary)) !important;
  border-radius: 2px !important;
}
.process-step {
  display: flex !important;
  gap: 28px !important;
  padding: 28px 0 !important;
  position: relative !important;
}
/* Step-Nummern — Weiß mit Gold-Border, rund */
.process-step-num {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  background: var(--white) !important;
  border: 3px solid var(--secondary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.process-step-content {
  background: var(--white) !important;
  border-radius: var(--radius-md) !important;
  padding: 28px !important;
  box-shadow: var(--shadow-sm) !important;
  flex: 1 !important;
  transition: all 0.3s ease !important;
}
.process-step-content:hover { box-shadow: var(--shadow-md) !important; }
.process-step-content h3 {
  font-size: 1.2rem !important;
  color: var(--dark) !important;
  margin-bottom: 8px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
}
.process-step-content p {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  line-height: 1.7 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   TESTIMONIALS — FF: Weiß, zentriert
   ============================================ */
.testimonial-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
}
.testimonial-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}
.testimonial-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 48px !important;
}
.testimonial-card {
  background: var(--off-white) !important;
  border: 1px solid rgba(102,0,51,0.06) !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}
.testimonial-card::before {
  content: '"' !important;
  position: absolute !important;
  top: 16px !important; right: 24px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 5rem !important;
  color: rgba(102,0,51,0.06) !important;
  line-height: 1 !important;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}
.testimonial-stars { color: #FFC107 !important; font-size: 1rem !important; margin-bottom: 16px !important; letter-spacing: 2px !important; }
.testimonial-text {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--text) !important;
  font-style: italic !important;
  margin-bottom: 20px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.testimonial-author { display: flex !important; align-items: center !important; gap: 12px !important; padding-top: 16px !important; border-top: 1px solid rgba(102,0,51,0.08) !important; }
.testimonial-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--gradient-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.testimonial-name { font-weight: 700 !important; color: var(--dark) !important; font-size: 1rem !important; font-family: 'Source Sans 3', sans-serif !important; }
.testimonial-detail { font-size: 1rem !important; color: var(--text-light) !important; font-family: 'Source Sans 3', sans-serif !important; }
/* Featured Testimonial */
.testimonial-featured {
  background: var(--gradient-primary) !important;
  border-radius: var(--radius-xl) !important;
  padding: 48px !important;
  color: white !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  margin-top: 40px !important;
  align-items: center !important;
}
.testimonial-featured-text h3,
.testimonial-featured h3 { color: var(--secondary-light) !important; font-size: 1.6rem !important; margin-bottom: 16px !important; }
.testimonial-featured-text p,
.testimonial-featured p { color:#FFFFFF !important; font-size: 1.05rem !important; line-height: 1.8 !important; margin-bottom: 20px !important; font-family: 'Source Sans 3', sans-serif !important; }
.testimonial-featured-author { color: var(--white) !important; font-weight: 600 !important; margin-top: 16px !important; font-size: 1rem !important; font-family: 'Source Sans 3', sans-serif !important; }
.testimonial-featured-author span { color: var(--secondary) !important; }
.testimonial-featured-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
.featured-stat { text-align: center !important; padding: 24px !important; background: rgba(255,255,255,0.08) !important; border-radius: var(--radius-md) !important; }
.featured-stat-num { font-size: 2.2rem !important; font-weight: 700 !important; color: var(--secondary) !important; font-family: 'Cormorant Garamond', serif !important; line-height: 1 !important; }
.featured-stat-label { font-size: 1rem !important; color:#FFFFFF !important; margin-top: 8px !important; font-family: 'Source Sans 3', sans-serif !important; }

/* ============================================
   TRANSFORMATION — FF: Off-White
   ============================================ */
.transformation-section {
  background: var(--off-white) !important;
  padding: 100px 0 !important;
}
.transformation-header {
  text-align: center !important;
  margin-bottom: 50px !important;
}
.transformation-grid {
  display: grid !important;
  grid-template-columns: 1fr 80px 1fr !important;
  gap: 20px !important;
  align-items: start !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}
.transformation-col h3 {
  font-size: 1.3rem !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700 !important;
}
.before-col h3 {
  color: #C62828 !important;
  border-bottom: 3px solid #C62828 !important;
}
.after-col h3 {
  color: var(--success) !important;
  border-bottom: 3px solid var(--success) !important;
}
.transformation-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 60px !important;
}
.arrow-icon {
  width: 60px !important;
  height: 60px !important;
  background: var(--gradient-primary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 1.5rem !important;
  box-shadow: var(--shadow-md) !important;
}
.col-title { font-size: 1.2rem !important; font-weight: 700 !important; margin-bottom: 20px !important; font-family: 'Source Sans 3', sans-serif !important; }
.transformation-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  font-size: 1rem !important;
  color: var(--text) !important;
  line-height: 1.5 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.transformation-item .icon { font-size: 1.1rem !important; flex-shrink: 0 !important; margin-top: 2px !important; }

/* ============================================
   FAQ — FF: Weiß
   ============================================ */
.faq-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
}
.faq-section .bbn-container { text-align: center !important; }
.faq-section .section-eyebrow { display: inline-flex !important; }
.faq-section .section-title { text-align: center !important; }
.faq-section .section-subtitle { text-align: center !important; margin: 0 auto 48px !important; }
.faq-list { max-width: 800px !important; margin: 40px auto 0 !important; text-align: left !important; }
.faq-item {
  background: var(--off-white) !important;
  border: 1px solid rgba(102,0,51,0.06) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
}
.faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  gap: 16px !important;
  transition: all 0.3s ease !important;
}
.faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  gap: 16px !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  line-height: 1.4 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
}
.faq-question:hover { color: var(--primary) !important; }
.faq-toggle {
  width: 32px !important;
  height: 32px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  color: var(--primary) !important;
  min-width: 32px !important;
  transition: all 0.3s ease !important;
}
.faq-item.active .faq-toggle {
  background: var(--primary) !important;
  color: white !important;
  transform: rotate(45deg) !important;
}
.faq-answer { max-height: 0; overflow: hidden !important; transition: max-height 0.3s ease !important; }
.faq-answer-inner {
  padding: 0 24px 20px !important;
  font-size: 1rem !important;
  color: var(--text-light) !important;
  line-height: 1.7 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   GUARANTEE — FF: Off-White, Gold-Siegel
   ============================================ */
/* ============================================
   GUARANTEE — Dunkler Hero-Hintergrund + Glas
   ============================================ */
.guarantee-section {
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(170deg, #2A0016 0%, #4A0024 40%, #4A0024 100%) !important;
  padding: 80px !important;
  position: relative !important;
}
/* Glasmorphismus-Karte mit direktem Snake-Effekt */
@property --gbox-snake-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes gboxSnakeSpin {
  to { --gbox-snake-angle: 360deg; }
}
.guarantee-box {
  max-width: 800px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--radius-xl) !important;
  padding: 48px !important;
  display: flex !important;
  gap: 40px !important;
  align-items: center !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;
}
/* Snake-Ring direkt auf der Box */
.guarantee-box::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: calc(var(--radius-xl) + 3px) !important;
  background: conic-gradient(
    from var(--gbox-snake-angle),
    transparent 0deg,
    transparent 210deg,
    rgba(201,163,92,0.15) 240deg,
    rgba(201,163,92,0.5) 270deg,
    #C9A35C 300deg,
    #E4C98A 315deg,
    #C9A35C 330deg,
    rgba(201,163,92,0.5) 345deg,
    transparent 360deg
  ) !important;
  animation: gboxSnakeSpin 3.5s linear infinite !important;
  z-index: -1 !important;
}
/* Innerer Hintergrund blockt Snake — opakes Dunkel matching Sektionshintergrund */
.guarantee-box::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(28, 18, 48, 0.92) !important;
  z-index: -1 !important;
}
/* Garantie-Siegel — Goldener Kreis, doppelte Größe, Puls */
@keyframes shieldPulse {
  0%, 100% { transform: scale(1.00); box-shadow: 0 4px 30px rgba(201,163,92,0.4); }
  50%       { transform: scale(1.04); box-shadow: 0 8px 50px rgba(201,163,92,0.7); }
}
.guarantee-shield-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
}
.guarantee-shield {
  width: 280px !important;
  min-width: 280px !important;
  height: 280px !important;
  background: var(--gradient-warm) !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  animation: shieldPulse 3.5s ease-in-out infinite !important;
  position: relative !important;
  z-index: 1 !important;
}
.guarantee-shield-icon { font-size: 4rem !important; }
.guarantee-shield-text {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--dark) !important;
  margin-top: 6px !important;
  line-height: 1.3 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Text auf dunklem Hintergrund */
.guarantee-content h3 { font-size: 1.5rem !important; color: var(--white) !important; margin-bottom: 12px !important; }
.guarantee-content h3 span { color: var(--secondary) !important; }
.guarantee-content p { font-size: 1rem !important; color:#FFFFFF !important; line-height: 1.8 !important; font-family: 'Source Sans 3', sans-serif !important; }

/* ============================================
   URGENCY — FF: Burgundy Gradient (NICHT dunkel!)
   ============================================ */
.urgency-section {
  background: var(--gradient-primary) !important;
  padding: 80px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}
.urgency-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: radial-gradient(circle at 20% 50%, rgba(201,163,92,0.1) 0%, transparent 50%) !important;
  pointer-events: none !important;
}
.urgency-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}
.urgency-section h2 {
  color: var(--white) !important;
  font-size: 2.2rem !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.urgency-section h2 span { color: var(--secondary) !important; }
.urgency-section p {
  color:#FFFFFF !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 12px !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.urgency-features {
  display: flex !important;
  justify-content: center !important;
  gap: 32px !important;
  margin: 32px 0 !important;
  flex-wrap: wrap !important;
}
.urgency-feature {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color:#FFFFFF !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.urgency-feature svg { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
/* btn-secondary — Snake direkt auf Button, Puls, Hover-Farbwechsel */
@keyframes btnSnakeSpin {
  to { --btn-snake-angle: 360deg; }
}
@keyframes btnPulse {
  0%, 100% { transform: scale(1.00); box-shadow: 0 4px 25px rgba(201,163,92,0.35); }
  50%       { transform: scale(1.03); box-shadow: 0 8px 40px rgba(201,163,92,0.6); }
}
@property --btn-snake-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.btn-secondary, a.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--white) !important;
  color: var(--primary) !important;
  padding: 18px 40px !important;
  border-radius: 50px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  margin-top: 16px !important;
  position: relative !important;
  z-index: 0 !important;
  border: none !important;
  animation: btnPulse 3s ease-in-out infinite !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}
/* Snake-Ring via ::before */
.btn-secondary::before, a.btn-secondary::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  border-radius: 54px !important;
  background: conic-gradient(
    from var(--btn-snake-angle),
    transparent 0deg,
    transparent 210deg,
    rgba(201,163,92,0.15) 240deg,
    rgba(201,163,92,0.5) 270deg,
    #C9A35C 300deg,
    #E4C98A 315deg,
    #C9A35C 330deg,
    rgba(201,163,92,0.5) 345deg,
    transparent 360deg
  ) !important;
  animation: btnSnakeSpin 3s linear infinite !important;
  z-index: -1 !important;
}
/* Weißer Hintergrund sitzt auf dem Snake */
.btn-secondary::after, a.btn-secondary::after {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: 50px !important;
  background: var(--white) !important;
  z-index: -1 !important;
  transition: background 0.3s ease !important;
}
/* Hover: Farben tauschen */
.btn-secondary:hover, a.btn-secondary:hover {
  color: var(--white) !important;
  animation-play-state: paused !important;
  transform: scale(1.04) !important;
}
.btn-secondary:hover::after, a.btn-secondary:hover::after {
  background: var(--primary) !important;
}

/* ============================================
   FINAL CTA — FF: Weiß, zentriert
   ============================================ */
.final-cta-section {
  background: var(--white) !important;
  padding: 100px 0 !important;
  text-align: center !important;
}
.final-cta-section h2 {
  font-size: 2.6rem !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  margin-bottom: 20px !important;
}
.final-cta-section h2 span { color: var(--primary) !important; }
/* Unterüberschrift — max-width wie FF-Original */
.final-cta-section > .bbn-container > p {
  font-size: 1.1rem !important;
  color: var(--text-light) !important;
  max-width: 560px !important;
  margin: 0 auto 40px !important;
  line-height: 1.8 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
/* Feature-Boxen (HTML: .final-features / .final-feature) */
.final-features {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 780px !important;
  margin: 0 auto 40px !important;
}
.final-feature {
  padding: 28px 20px !important;
  background: var(--off-white) !important;
  border-radius: var(--radius-md) !important;
  text-align: center !important;
}
.final-feature-icon {
  font-size: 1.8rem !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.final-feature h4 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dark) !important;
  margin-bottom: 4px !important;
}
.final-feature p {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  margin: 0 !important;
}
/* Button-Abstand */
.final-cta-section .btn-primary {
  margin-bottom: 20px !important;
  display: inline-block !important;
}
/* Social Proof unter Button */
.final-social-proof {
  font-size: 1rem !important;
  color: var(--text-light) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  margin-top: 16px !important;
}

/* ============================================
   FOOTER — FF: Dunkel
   ============================================ */
.site-footer,
.footer {
  background: #1B2A4E !important;
  padding: 48px 0 80px !important;
  text-align: center !important;
  color:#FFFFFF !important;
}
/* "Bye Bye Narzisst" — Farbe wie Sticky-Footer-Button (Gold) */
.footer-brand {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--secondary) !important;
  margin-bottom: 16px !important;
}
.footer-brand span { color: var(--secondary) !important; }
.footer-logo {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--secondary) !important;
  margin-bottom: 16px !important;
}
.footer-logo span { color: var(--secondary) !important; }
.footer-desc {
  color:#FFFFFF !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
  line-height: 1.6 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.footer p,
.site-footer p {
  color:#FFFFFF !important;
  font-size: 1rem !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.footer-copy {
  color: rgba(255,255,255,0.35) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  font-family: 'Source Sans 3', sans-serif !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.footer-links {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.footer-links a {
  color:#FFFFFF !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  transition: color 0.3s ease !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.footer-links a:hover { color: var(--secondary) !important; }

/* ============================================
   STICKY CTA — FF: Dunkel, von unten gleitend
   ============================================ */
.sticky-cta {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  background: var(--dark) !important;
  padding: 14px 24px !important;
  z-index: 9999 !important;
  transform: translateY(100%) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
}
.sticky-cta.visible { transform: translateY(0) !important; }
.sticky-cta-text {
  color: var(--white) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}
.sticky-cta-text span {
  color: var(--secondary) !important;
  display: block !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}
.sticky-cta .btn-cta, .sticky-cta .btn-primary {
  padding: 12px 28px !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #C9A35C 0%, #B08B45 100%) !important;
  color: #2A0016 !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* ============================================
   BUCHUNGSSEITE
   ============================================ */
.booking-page { background: var(--off-white) !important; min-height: 100vh !important; }
.booking-header {
  background: var(--gradient-primary) !important;
  padding: 40px 0 !important;
  text-align: center !important;
  color: white !important;
}
.booking-header h1 { font-size: 2rem !important; font-weight: 700 !important; color: white !important; margin-bottom: 12px !important; }
.booking-header p { font-size: 1rem !important; color:#FFFFFF !important; max-width: 600px !important; margin: 0 auto !important; line-height: 1.6 !important; font-family: 'Source Sans 3', sans-serif !important; }
.booking-header .booking-icon { font-size: 3rem !important; margin-bottom: 16px !important; }
.booking-steps { display: flex !important; justify-content: center !important; gap: 32px !important; margin-top: 24px !important; }
.booking-step { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 1rem !important; color:#FFFFFF !important; font-family: 'Source Sans 3', sans-serif !important; }
.booking-step .step-check {
  width: 24px !important; height: 24px !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.2) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important;
}
.booking-step.completed .step-check { background: var(--success) !important; }
.booking-step.current .step-check { background: var(--secondary) !important; color: var(--dark) !important; font-weight: 700 !important; }
.booking-content {
  max-width: 800px !important; margin: -40px auto 0 !important;
  padding: 0 24px 60px !important; position: relative !important; z-index: 1 !important;
}
.booking-card {
  background: white !important; border-radius: var(--radius-xl) !important;
  padding: 40px !important; box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(102,0,51,0.06) !important;
}
.booking-card h2 { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--dark) !important; text-align: center !important; margin-bottom: 8px !important; }
.booking-card .booking-subtitle { font-size: 1rem !important; color: var(--text-light) !important; text-align: center !important; margin-bottom: 32px !important; line-height: 1.6 !important; font-family: 'Source Sans 3', sans-serif !important; }
.tidycal-embed { min-height: 600px !important; border: 1px solid rgba(102,0,51,0.06) !important; border-radius: var(--radius-md) !important; overflow: hidden !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero h1 { font-size: 2.6rem !important; }
  .hero-grid { gap: 40px !important; }
  .about-grid { grid-template-columns: 1fr 320px !important; gap: 40px !important; }
  .section-title { font-size: 2.2rem !important; }
}
@media (max-width: 768px) {
  .hero { padding: 60px 0 80px !important; min-height: auto !important; }
  .hero-grid { grid-template-columns: 1fr !important; text-align: center !important; }
  .hero-sub { margin-left: auto !important; margin-right: auto !important; }
  .hero-features { align-items: center !important; }
  .hero-cta-area { display: flex !important; flex-direction: column !important; align-items: center !important; }
  .hero-trust { justify-content: center !important; }
  .hero h1 { font-size: 2.2rem !important; }
  .hero-visual { order: -1 !important; max-width: 400px !important; margin: 0 auto 32px !important; }
  .hero-card { padding: 28px !important; }
  .hero-card-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 10px !important; }
  .hero::after { height: 60px !important; }
  .section-title { font-size: 2rem !important; }
  .quiz-section .section-title { font-size: 2rem !important; }
  .proof-bar-inner { gap: 24px !important; }
  .problem-grid { grid-template-columns: 1fr !important; }
  .warning-grid { grid-template-columns: 1fr !important; max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; }
  .solution-grid { grid-template-columns: 1fr !important; max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; }
  .about-grid { grid-template-columns: 1fr !important; text-align: center !important; }
  .about-content-top, .about-content-body, .about-image { grid-column: auto !important; grid-row: auto !important; }
  .about-image { max-width: 300px !important; margin: 0 auto !important; }
  .about-image-frame { max-width: 300px !important; margin: 0 auto !important; }
  .about-content .section-eyebrow { justify-content: center !important; }
  .about-credentials { grid-template-columns: 1fr !important; }
  .process-steps::before { left: 24px !important; }
  .process-step-num { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 1.1rem !important; }
  .process-step { gap: 16px !important; }
  .testimonial-grid { grid-template-columns: 1fr !important; max-width: 450px !important; margin-left: auto !important; margin-right: auto !important; }
  .testimonial-featured { grid-template-columns: 1fr !important; padding: 32px !important; }
  .testimonial-featured-stats { grid-template-columns: 1fr 1fr !important; }
  .transformation-grid { grid-template-columns: 1fr !important; }
  .transformation-arrow { padding: 0 !important; transform: rotate(90deg) !important; justify-content: center !important; }
  .guarantee-box { flex-direction: column !important; padding: 32px !important; text-align: center !important; }
  .guarantee-shield { width: 200px !important; min-width: 200px !important; height: 200px !important; }
  .final-features { grid-template-columns: 1fr !important; max-width: 350px !important; margin-left: auto !important; margin-right: auto !important; }
  .final-cta-section h2 { font-size: 2rem !important; }
  .urgency-features { flex-direction: column !important; align-items: center !important; }
  .sticky-cta { flex-direction: column !important; text-align: center !important; }
  .quiz-card .quiz-question { padding: 24px 20px 16px !important; }
  .quiz-nav { padding: 0 20px 24px !important; }
  .booking-steps { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .booking-card { padding: 24px !important; }
  .bbn-container { padding: 0 16px !important; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 1.8rem !important; }
  .section-title { font-size: 1.7rem !important; }
  .quiz-section .section-title { font-size: 1.7rem !important; }
  .hero-card-stats { grid-template-columns: 1fr !important; }
  .proof-bar-inner { flex-direction: column !important; gap: 16px !important; }
  .btn-primary, a.btn-primary, a.gjs-btn.btn-primary { padding: 16px 32px !important; font-size: 1rem !important; }
}


/* ===== BBN Premium-Icons S279 (generiert, Single-Source) ===== */
.credential-icon{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#8A0044,#4A0024)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;box-shadow:0 3px 10px rgba(107,26,63,.28);}
.credential-icon::before{content:"";display:block;width:26px;height:26px;background:center/contain no-repeat;}
.bbn-v5-anita-credentials .credential:nth-child(1) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-book-open%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%207v14%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%20%2F%3E%20%3C%2Fsvg%3E");}
.bbn-v5-anita-credentials .credential:nth-child(2) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-mic%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2019v3%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2010v2a7%207%200%200%201-14%200v-2%22%20%2F%3E%20%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2213%22%20rx%3D%223%22%20%2F%3E%20%3C%2Fsvg%3E");}
.bbn-v5-anita-credentials .credential:nth-child(3) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-award%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m15.477%2012.89%201.515%208.526a.5.5%200%200%201-.81.47l-3.58-2.687a1%201%200%200%200-1.197%200l-3.586%202.686a.5.5%200%200%201-.81-.469l1.514-8.526%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%226%22%20%2F%3E%20%3C%2Fsvg%3E");}
.bbn-v5-anita-credentials .credential:nth-child(4) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-heart-handshake%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19.414%2014.414C21%2012.828%2022%2011.5%2022%209.5a5.5%205.5%200%200%200-9.591-3.676.6.6%200%200%201-.818.001A5.5%205.5%200%200%200%202%209.5c0%202.3%201.5%204%203%205.5l5.535%205.362a2%202%200%200%200%202.879.052%202.12%202.12%200%200%200-.004-3%202.124%202.124%200%201%200%203-3%202.124%202.124%200%200%200%203.004%200%202%202%200%200%200%200-2.828l-1.881-1.882a2.41%202.41%200%200%200-3.409%200l-1.71%201.71a2%202%200%200%201-2.828%200%202%202%200%200%201%200-2.828l2.823-2.762%22%20%2F%3E%20%3C%2Fsvg%3E");}
.about-credentials .credential:nth-child(1) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-graduation-cap%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2010v6%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%20%2F%3E%20%3C%2Fsvg%3E");}
.about-credentials .credential:nth-child(2) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E");}
.about-credentials .credential:nth-child(3) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-award%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m15.477%2012.89%201.515%208.526a.5.5%200%200%201-.81.47l-3.58-2.687a1%201%200%200%200-1.197%200l-3.586%202.686a.5.5%200%200%201-.81-.469l1.514-8.526%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%226%22%20%2F%3E%20%3C%2Fsvg%3E");}
.about-credentials .credential:nth-child(4) .credential-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-heart-handshake%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19.414%2014.414C21%2012.828%2022%2011.5%2022%209.5a5.5%205.5%200%200%200-9.591-3.676.6.6%200%200%201-.818.001A5.5%205.5%200%200%200%202%209.5c0%202.3%201.5%204%203%205.5l5.535%205.362a2%202%200%200%200%202.879.052%202.12%202.12%200%200%200-.004-3%202.124%202.124%200%201%200%203-3%202.124%202.124%200%200%200%203.004%200%202%202%200%200%200%200-2.828l-1.881-1.882a2.41%202.41%200%200%200-3.409%200l-1.71%201.71a2%202%200%200%201-2.828%200%202%202%200%200%201%200-2.828l2.823-2.762%22%20%2F%3E%20%3C%2Fsvg%3E");}
.transformation-item .icon{display:inline-flex!important;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;vertical-align:middle;font-size:0!important;margin-right:8px;}
.transformation-item .icon::before{content:"";display:block;width:21px;height:21px;background:center/contain no-repeat;}
.before-col .transformation-item .icon{background:#ECE7E1;}
.after-col .transformation-item .icon{background:radial-gradient(circle at 32% 26%,#8A0044,#4A0024);}
.before-col .transformation-item:nth-child(2) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-footprints%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2016v-2.38C4%2011.5%202.97%2010.5%203%208c.03-2.72%201.49-6%204.5-6C9.37%202%2010%203.8%2010%205.5c0%203.11-2%205.66-2%208.68V16a2%202%200%201%201-4%200Z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2020v-2.38c0-2.12%201.03-3.12%201-5.62-.03-2.72-1.49-6-4.5-6C14.63%206%2014%207.8%2014%209.5c0%203.11%202%205.66%202%208.68V20a2%202%200%201%200%204%200Z%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2017h4%22%20%2F%3E%20%3Cpath%20d%3D%22M4%2013h4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(3) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-brain%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2018V5%22%20%2F%3E%20%3Cpath%20d%3D%22M15%2013a4.17%204.17%200%200%201-3-4%204.17%204.17%200%200%201-3%204%22%20%2F%3E%20%3Cpath%20d%3D%22M17.598%206.5A3%203%200%201%200%2012%205a3%203%200%201%200-5.598%201.5%22%20%2F%3E%20%3Cpath%20d%3D%22M17.997%205.125a4%204%200%200%201%202.526%205.77%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2018a4%204%200%200%200%202-7.464%22%20%2F%3E%20%3Cpath%20d%3D%22M19.967%2017.483A4%204%200%201%201%2012%2018a4%204%200%201%201-7.967-.517%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2018a4%204%200%200%201-2-7.464%22%20%2F%3E%20%3Cpath%20d%3D%22M6.003%205.125a4%204%200%200%200-2.526%205.77%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(4) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-heart-crack%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12.409%205.824c-.702.792-1.15%201.496-1.415%202.166l2.153%202.156a.5.5%200%200%201%200%20.707l-2.293%202.293a.5.5%200%200%200%200%20.707L12%2015%22%20%2F%3E%20%3Cpath%20d%3D%22M13.508%2020.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5a5.5%205.5%200%200%201%209.591-3.677.6.6%200%200%200%20.818.001A5.5%205.5%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5z%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(5) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-user-x%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%20%2F%3E%20%3Cline%20x1%3D%2217%22%20x2%3D%2222%22%20y1%3D%228%22%20y2%3D%2213%22%20%2F%3E%20%3Cline%20x1%3D%2222%22%20x2%3D%2217%22%20y1%3D%228%22%20y2%3D%2213%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(6) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-cloud-rain%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2014.899A7%207%200%201%201%2015.71%208h1.79a4.5%204.5%200%200%201%202.5%208.242%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2014v6%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2014v6%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2016v6%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(7) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-lock%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col .transformation-item:nth-child(8) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-eye-off%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A99F97%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10.733%205.076a10.744%2010.744%200%200%201%2011.205%206.575%201%201%200%200%201%200%20.696%2010.747%2010.747%200%200%201-1.444%202.49%22%20%2F%3E%20%3Cpath%20d%3D%22M14.084%2014.158a3%203%200%200%201-4.242-4.242%22%20%2F%3E%20%3Cpath%20d%3D%22M17.479%2017.499a10.75%2010.75%200%200%201-15.417-5.151%201%201%200%200%201%200-.696%2010.75%2010.75%200%200%201%204.446-5.143%22%20%2F%3E%20%3Cpath%20d%3D%22m2%202%2020%2020%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(2) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-message-circle%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(3) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-gem%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10.5%203%208%209l4%2013%204-13-2.5-6%22%20%2F%3E%20%3Cpath%20d%3D%22M17%203a2%202%200%200%201%201.6.8l3%204a2%202%200%200%201%20.013%202.382l-7.99%2010.986a2%202%200%200%201-3.247%200l-7.99-10.986A2%202%200%200%201%202.4%207.8l2.998-3.997A2%202%200%200%201%207%203z%22%20%2F%3E%20%3Cpath%20d%3D%22M2%209h20%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(4) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-crown%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.562%203.266a.5.5%200%200%201%20.876%200L15.39%208.87a1%201%200%200%200%201.516.294L21.183%205.5a.5.5%200%200%201%20.798.519l-2.834%2010.246a1%201%200%200%201-.956.734H5.81a1%201%200%200%201-.957-.734L2.02%206.02a.5.5%200%200%201%20.798-.519l4.276%203.664a1%201%200%200%200%201.516-.294z%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2021h14%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(5) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-heart-handshake%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M19.414%2014.414C21%2012.828%2022%2011.5%2022%209.5a5.5%205.5%200%200%200-9.591-3.676.6.6%200%200%201-.818.001A5.5%205.5%200%200%200%202%209.5c0%202.3%201.5%204%203%205.5l5.535%205.362a2%202%200%200%200%202.879.052%202.12%202.12%200%200%200-.004-3%202.124%202.124%200%201%200%203-3%202.124%202.124%200%200%200%203.004%200%202%202%200%200%200%200-2.828l-1.881-1.882a2.41%202.41%200%200%200-3.409%200l-1.71%201.71a2%202%200%200%201-2.828%200%202%202%200%200%201%200-2.828l2.823-2.762%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(6) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-smile%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2014s1.5%202%204%202%204-2%204-2%22%20%2F%3E%20%3Cline%20x1%3D%229%22%20x2%3D%229.01%22%20y1%3D%229%22%20y2%3D%229%22%20%2F%3E%20%3Cline%20x1%3D%2215%22%20x2%3D%2215.01%22%20y1%3D%229%22%20y2%3D%229%22%20%2F%3E%20%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(7) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23E8C9A0%22%3E%3Cpath%20d%3D%22M12%207.5c-.9-1.6-2.5-2.9-4.4-2.9C5%204.6%203%206.4%203%209c0%202.7%202.6%204.2%205.4%204.2%201.7%200%203-.8%203.6-1.9zM12%207.5c.9-1.6%202.5-2.9%204.4-2.9C19%204.6%2021%206.4%2021%209c0%202.7-2.6%204.2-5.4%204.2-1.7%200-3-.8-3.6-1.9zM12%2011.3c-.6%201.2-1.7%202.3-3.3%202.6C6.5%2014.3%205%2015.7%205.2%2017.7%205.4%2019.4%207.4%2019.8%209%2019c1.8-.9%203-3%203-6.1zM12%2011.3c.6%201.2%201.7%202.3%203.3%202.6%202.2.4%203.7%201.8%203.5%203.8-.2%201.7-2.2%202.1-3.8%201.3-1.8-.9-3-3-3-6.1z%22%2F%3E%3C%2Fsvg%3E");}
.after-col .transformation-item:nth-child(8) .icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sparkles%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");}
.before-col h3{color:#8A7F86!important;border-bottom-color:#E4DAD2!important;}
.after-col h3{color:#660033!important;border-bottom-color:#C9A35C!important;}
.transformation-arrow{display:none!important;}
.transformation-grid{grid-template-columns:1fr 1fr!important;}
.solution-card-icon{width:56px!important;height:56px!important;border-radius:50%!important;background:radial-gradient(circle at 32% 28%,#8A0044,#4A0024)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;box-shadow:0 3px 10px rgba(107,26,63,.26);}
.solution-card-icon::before{content:"";display:block;width:27px;height:27px;background:center/contain no-repeat;}
.solution-section .solution-card:nth-child(1) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-search%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%20%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section .solution-card:nth-child(2) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-shield%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section .solution-card:nth-child(3) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-dumbbell%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M17.596%2012.768a2%202%200%201%200%202.829-2.829l-1.768-1.767a2%202%200%200%200%202.828-2.829l-2.828-2.828a2%202%200%200%200-2.829%202.828l-1.767-1.768a2%202%200%201%200-2.829%202.829z%22%20%2F%3E%20%3Cpath%20d%3D%22m2.5%2021.5%201.4-1.4%22%20%2F%3E%20%3Cpath%20d%3D%22m20.1%203.9%201.4-1.4%22%20%2F%3E%20%3Cpath%20d%3D%22M5.343%2021.485a2%202%200%201%200%202.829-2.828l1.767%201.768a2%202%200%201%200%202.829-2.829l-6.364-6.364a2%202%200%201%200-2.829%202.829l1.768%201.767a2%202%200%200%200-2.828%202.829z%22%20%2F%3E%20%3Cpath%20d%3D%22m9.6%2014.4%204.8-4.8%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section .solution-card:nth-child(4) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-unlock%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%209.9-1%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section .solution-card:nth-child(5) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sparkles%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section .solution-card:nth-child(6) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sunrise%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%202v8%22%20%2F%3E%20%3Cpath%20d%3D%22m4.93%2010.93%201.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2018h2%22%20%2F%3E%20%3Cpath%20d%3D%22M20%2018h2%22%20%2F%3E%20%3Cpath%20d%3D%22m19.07%2010.93-1.41%201.41%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2022H2%22%20%2F%3E%20%3Cpath%20d%3D%22m8%206%204-4%204%204%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2018a4%204%200%200%200-8%200%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(1) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-target%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(2) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(3) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-heart%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M2%209.5a5.5%205.5%200%200%201%209.591-3.676.56.56%200%200%200%20.818%200A5.49%205.49%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5l-5.492%205.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(4) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-zap%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(5) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-lock%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.solution-section ~ .solution-section .solution-card:nth-child(6) .solution-card-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sprout%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%209.536V7a4%204%200%200%201%204-4h1.5a.5.5%200%200%201%20.5.5V5a4%204%200%200%201-4%204%204%204%200%200%200-4%204c0%202%201%203%201%205a5%205%200%200%201-1%203%22%20%2F%3E%20%3Cpath%20d%3D%22M4%209a5%205%200%200%201%208%204%205%205%200%200%201-8-4%22%20%2F%3E%20%3Cpath%20d%3D%22M5%2021h14%22%20%2F%3E%20%3C%2Fsvg%3E");}
.proof-icon{width:44px!important;height:44px!important;border-radius:50%!important;background:radial-gradient(circle at 32% 28%,#8A0044,#4A0024)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:0!important;}
.proof-icon::before{content:"";display:block;width:22px;height:22px;background:center/contain no-repeat;}
.proof-item:nth-child(1) .proof-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-graduation-cap%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M22%2010v6%22%20%2F%3E%20%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%20%2F%3E%20%3C%2Fsvg%3E");}
.proof-item:nth-child(2) .proof-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-lock%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.proof-item:nth-child(3) .proof-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-monitor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2216%22%20y1%3D%2221%22%20y2%3D%2221%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%2217%22%20y2%3D%2221%22%20%2F%3E%20%3C%2Fsvg%3E");}


/* ===== BBN Premium S280 (A-2026-0123), generiert, Single-Source ===== */
.bbn-v5-check-section .section-eyebrow{display:flex!important;width:fit-content!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important;}
.bbn-v5-check-section .section-title{text-align:center!important;}
.final-feature-icon{width:56px!important;height:56px!important;border-radius:50%!important;background:radial-gradient(circle at 32% 28%,#8A0044,#4A0024)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:0!important;margin:0 auto 14px!important;box-shadow:0 3px 10px rgba(107,26,63,.26);}
.final-feature-icon::before{content:""!important;display:block;width:27px;height:27px;background:center/contain no-repeat;}
.final-features .final-feature:nth-child(1) .final-feature-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-timer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cline%20x1%3D%2210%22%20x2%3D%2214%22%20y1%3D%222%22%20y2%3D%222%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2215%22%20y1%3D%2214%22%20y2%3D%2211%22%20%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E");}
.final-features .final-feature:nth-child(2) .final-feature-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-lock%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.final-features .final-feature:nth-child(3) .final-feature-icon::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-gift%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208v13%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%20%2F%3E%20%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%20%2F%3E%20%3C%2Fsvg%3E");}
.btn-primary.bbn-v5-hero-btn,.btn-primary.bbn-v5-bridge-btn,.bbn-v5-check-cta .btn-primary,.final-cta-section .btn-primary{display:inline-block!important;position:relative!important;padding-left:52px!important;}
.btn-primary.bbn-v5-hero-btn::before,.btn-primary.bbn-v5-bridge-btn::before,.final-cta-section .btn-primary::before{content:""!important;position:absolute!important;left:24px;top:50%;transform:translateY(-50%);width:19px;height:19px;background:center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-search%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231A1A2E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%20%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E");}
.bbn-v5-check-cta .btn-primary::before{content:""!important;position:absolute!important;left:24px;top:50%;transform:translateY(-50%);width:19px;height:19px;background:center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231A1A2E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%20%2F%3E%20%3C%2Fsvg%3E");}
.hero-trust-avatars .avatar:nth-child(-n+4){font-size:0!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
.hero-trust-avatars .avatar:nth-child(1){background-image:url("/wp-content/uploads/2026/07/bbn-testimonial-narzissmus-01-avatar.webp")!important;}
.hero-trust-avatars .avatar:nth-child(2){background-image:url("/wp-content/uploads/2026/07/bbn-testimonial-narzissmus-07-avatar.webp")!important;}
.hero-trust-avatars .avatar:nth-child(3){background-image:url("/wp-content/uploads/2026/07/bbn-testimonial-narzissmus-09-avatar-1.webp")!important;}
.hero-trust-avatars .avatar:nth-child(4){background-image:url("/wp-content/uploads/2026/07/bbn-testimonial-narzissmus-14-avatar-1.webp")!important;}
.testimonial-avatar{font-size:0!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
.testimonial-grid .testimonial-card:nth-child(1) .testimonial-avatar{background-image:url("/wp-content/uploads/2026/07/stimme-15.webp")!important;}
.testimonial-grid .testimonial-card:nth-child(2) .testimonial-avatar{background-image:url("/wp-content/uploads/2026/07/stimme-08.webp")!important;}
.testimonial-grid .testimonial-card:nth-child(3) .testimonial-avatar{background-image:url("/wp-content/uploads/2026/07/bbn-testimonial-narzissmus-09-avatar-1.webp")!important;}
.testimonial-section .bbn-container::after{content:"Symbolfotos, Namen zum Schutz der Privatsphäre geändert."!important;display:block!important;text-align:center!important;margin-top:22px!important;font-size:0.875rem!important;font-style:italic!important;color:var(--text-light)!important;font-family:'Source Sans 3',sans-serif!important;}
.bbn2-trust{display:block!important;}
#resultTitle.result-high::before,#resultTitle.result-mid::before,#resultTitle.result-low::before{content:""!important;display:inline-block;width:24px;height:24px;vertical-align:-5px;margin-right:9px;background:center/contain no-repeat;}
#resultTitle.result-high::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-triangle-alert%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23F44336%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3Z%22%20%2F%3E%20%3Cpath%20d%3D%22M12%209v4%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2017h.01%22%20%2F%3E%20%3C%2Fsvg%3E");}
#resultTitle.result-mid::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-circle-alert%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF9800%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%20%2F%3E%20%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%20%2F%3E%20%3C%2Fsvg%3E");}
#resultTitle.result-low::before{background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-shield-check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234CAF50%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%20%2F%3E%20%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%20%2F%3E%20%3C%2Fsvg%3E");}
.bbn-form-header h3{display:inline-block!important;position:relative!important;padding-left:36px!important;}
.bbn-form-header h3::before{content:""!important;position:absolute!important;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;background:center/contain no-repeat;background-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-gift%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E8C9A0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%20%2F%3E%20%3Cpath%20d%3D%22M12%208v13%22%20%2F%3E%20%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%20%2F%3E%20%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%20%2F%3E%20%3C%2Fsvg%3E");}


/* ---- A-2026-0123 S281: Hero-Reihenfolge Handy (Anita-Fund) ----
   Text/Test zuerst, Karte danach. Ueberstimmt das Inline-order:-1 der SIO-Seite
   (laedt spaeter, gewinnt). Desktop (>900px) unberuehrt. */
@media (max-width: 900px) {
  .bbn-v5-hero-card { order: 0 !important; }
}


/* ---- A-2026-0123 S281: goldener Rand auf Testimonial-Bilder (eBook-LP-Stil) ----
   Feiner goldener Rand wie auf der eBook-Landingpage (.bbn-avatars img). */
.testimonial-grid .testimonial-card .testimonial-avatar {
  border: 3px solid #E4C98A !important;
  box-shadow: 0 3px 8px rgba(102,0,51,0.3), inset 0 0 0 1px rgba(255,255,255,0.2) !important;
}


/* ---- A-2026-0123 S281: goldener Rand auf die kleinen Hero-Vertrauens-Avatare (eBook-Stil) ----
   Gleicher Kreis wie die Testimonial-Karten, nur die 4 Gesichter, der + Zaehler bleibt. */
.hero-trust-avatars .avatar:nth-child(-n+4) {
  border: 3px solid #E4C98A !important;
  box-shadow: 0 3px 8px rgba(102,0,51,0.3), inset 0 0 0 1px rgba(255,255,255,0.2) !important;
}


/* ---- A-2026-0123 S281: Hero-Logo statt Emoji (Marken-Schmetterling) ----
   Das runde Branding-Logo ersetzt den Gold-Gradient-Kreis mit dem Emoji.
   Groesse, Schweben und Kreisform bleiben. */
.hero-card-icon {
  background: url('/wp-content/uploads/2026/07/bbn-butterfly-logo-circle-512.png') center / contain no-repeat !important;
  font-size: 0 !important;
}


/* ---- A-2026-0123 S281: Bild-Schutz (gezielt, Startseiten-Muster plus Overlay) ----
   Kein Ziehen, keine Auswahl, kein iOS-Bild-Callout auf den Grafiken. Die zwei echten
   Anita-Fotos nicht direkt greifbar (Rechtsklick faellt durch, kein Bild-Menue) plus
   ein transparentes Overlay ueber den Foto-Rahmen. */
img, picture, .testimonial-avatar, .avatar, .hero-card-icon {
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}
.bbn-v5-anita-photo, .bbn2-photo { pointer-events: none !important; }
.bbn-v5-anita-photo-frame { position: relative !important; }
.bbn-v5-anita-photo-frame::after, .bbn2-photo-wrap::after {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: 5 !important;
}

/* === S282: Cormorant Garamond Override fuer SIO-Inline-Selektoren === */
.bbn-v5-h1,
.bbn-v5-quote-mark,
.bbn-v5-counter-number,
.bbn-v5-anita-badge .about-badge-num,
.bbn-v5-bridge-h2,
.bbn2-headline,
.bbn2-signature,
.bbn2-timer-display {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
}

/* Anita-h2 und Hero-Karten-h3: duenner, kursiv, gold-soft */
.bbn-v5-anita-h2,
.bbn-v5-hero-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #C9A35C !important;
}

/* Hero-h1: wie Startseite (cream, em-Block, gold-soft) */
.bbn-v5-h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.02em !important;
}
.bbn-v5-h1 em {
  font-style: italic !important;
}

/* Ueberschriften im Bunny-CSS ebenfalls auf Startseiten-Gewicht anpassen */
.hero-card h3,
.about-badge-num,
.featured-stat-num,
.footer-brand {
  font-weight: 500 !important;
}

/* === S282b: Bridge-Butterfly als Marken-Logo + Footer-Schriftzug === */
.bbn-v5-bridge-icon {
  background: url('/wp-content/uploads/2026/07/bbn-butterfly-logo-circle-512.png') center / contain no-repeat !important;
  font-size: 0 !important;
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 20px !important;
}

/* Footer: "Bye Bye" weiss und dick, "Narzisst" gold, duenn und kursiv */
.footer-brand {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.footer-brand span {
  color: var(--secondary) !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* === S282c-1: Garantie-Schild Emoji zu Premium-Schild (dunkel auf Gold-Kreis) === */
.guarantee-shield-icon {
  font-size: 0 !important;
  width: 64px !important;
  height: 64px !important;
  background: url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-shield-check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231A1A2E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat !important;
  margin: 0 auto !important;
}

/* ── 1. Spiegel-Moment (Top Bar Ersatz) ───────────── */

.bbn-v5-mirror {

  background: linear-gradient(135deg, #1A000D 0%, #2A0016 100%);

  border-bottom: 1px solid rgba(201,163,92,0.2);

  padding: 14px 0;

  text-align: center;

  position: sticky;

  top: 0;

  z-index: 9000;

}



.bbn-v5-mirror-text {

  font-family: 'Source Sans 3', Georgia, serif;

  font-size: clamp(14px, 2vw, 17px);

  font-style: normal;

  color:#FFFFFF;

  letter-spacing: 0.03em;

  line-height: 1.5;

  margin: 0;

}



/* ── 2. Hero Anpassungen ──────────────────────────── */

.bbn-v5-hero-inner {

  display: grid;

  grid-template-columns: 1fr 400px;

  gap: 60px;

  align-items: center;

}



@media (max-width: 900px) {

  .bbn-v5-hero-inner {

    grid-template-columns: 1fr;

    gap: 40px;

  }

  .bbn-v5-hero-card { order: -1; max-width: 380px; margin: 0 auto; }

}



.bbn-v5-h1 {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: clamp(28px, 5vw, 52px);

  font-weight: 700;

  line-height: 1.18;

  color: #FFFFFF;

  margin-bottom: 20px;

}



.bbn-v5-h1 em {

  color: #C9A35C;

  font-style: normal;

}



.bbn-v5-hero-lead {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 17px;

  line-height: 1.7;

  color:#FFFFFF;

  margin-bottom: 28px;

}



.bbn-v5-hero-btn {

  margin-bottom: 24px;

  display: inline-block;

}



.bbn-v5-hero-trust {

  display: flex;

  align-items: center;

  gap: 12px;

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  color:#FFFFFF;

  position: relative;

  z-index: 3;

}



.bbn-v5-hero-card {

  background: rgba(255,255,255,0.06);

  backdrop-filter: blur(16px);

  border: 2.5px solid rgba(201,163,92,0.85);

  outline: 1.5px solid rgba(201,163,92,0.18);

  outline-offset: 5px;

  border-radius: 24px;

  padding: 36px 32px;

  position: relative;

  overflow: hidden;

  box-shadow:

    0 0 0 1px rgba(201,163,92,0.12),

    0 0 24px rgba(201,163,92,0.18),

    0 8px 32px rgba(0,0,0,0.35);

}



.bbn-v5-card-icon {

  font-size: 40px;

  margin-bottom: 12px;

}



.bbn-v5-hero-card h3 {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 22px;

  color: #fff;

  margin-bottom: 10px;

  text-align: center;

}



.bbn-v5-hero-card p {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  line-height: 1.6;

  color:#FFFFFF;

  margin-bottom: 20px;

}



/* ── 4. Sandras Nacht ─────────────────────────────── */

.bbn-v5-mirror-section {

  background: linear-gradient(180deg, #2A0016 0%, #1F0011 100%);

  padding: 80px 0 60px;

}



.bbn-v5-mirror-card {

  max-width: 760px;

  margin: 0 auto 36px;

  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(201,163,92,0.2);

  border-left: 4px solid rgba(201,163,92,0.7);

  border-radius: 4px 16px 16px 4px;

  padding: 40px 48px;

  position: relative;

}



@media (max-width: 680px) {

  .bbn-v5-mirror-card { padding: 28px 24px; }

}



.bbn-v5-quote-mark {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 80px;

  line-height: 0.6;

  color: rgba(201,163,92,0.25);

  position: absolute;

  top: 20px;

  left: 20px;

}



.bbn-v5-mirror-quote {

  font-family: 'Source Sans 3', Georgia, serif;

  font-size: clamp(16px, 2.2vw, 19px);

  line-height: 1.75;

  color:#FFFFFF;

  font-style: normal;

  padding-left: 20px;

}



.bbn-v5-mirror-quote p { margin-bottom: 18px; }

.bbn-v5-mirror-quote p:last-of-type { margin-bottom: 0; }



.bbn-v5-mirror-quote em {

  color: #C9A35C;

  font-style: normal;

}



.bbn-v5-mirror-ending {

  font-weight: 700;

  color:#FFFFFF !important;

  font-size: 1.1em !important;

  margin-top: 8px !important;

}



.bbn-v5-mirror-label {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  color:#FFFFFF;

  letter-spacing: 0.06em;

  margin-top: 20px;

  text-align: right;

  font-style: normal;

}



.bbn-v5-mirror-response {

  max-width: 620px;

  margin: 0 auto;

  text-align: center;

  font-family: 'Source Sans 3', sans-serif;

  font-size: 17px;

  line-height: 1.7;

  color:#FFFFFF;

}



.bbn-v5-mirror-response strong em {

  color: #C9A35C;

  font-style: normal;

}



.bbn-v5-mirror-response p { margin-bottom: 12px; }



/* ── 5. Interaktive Checkliste ────────────────────── */

.bbn-v5-check-section {

  background: var(--bg-warm, #FAF6F1);

  padding: 80px 0 72px;

}



.bbn-v5-check-subtitle {

  max-width: 620px;

  margin: 0 auto 40px;

}



.bbn-v5-checklist {

  max-width: 720px;

  margin: 0 auto 32px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.bbn-v5-check-item {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  background: #fff;

  border: 2px solid #E5DDD5;

  border-radius: 14px;

  padding: 18px 22px;

  cursor: pointer;

  transition: border-color 0.25s, background 0.25s, transform 0.15s;

  user-select: none;

}



.bbn-v5-check-item:hover {

  border-color: #C9A35C;

  transform: translateX(3px);

}



.bbn-v5-check-item.checked {

  border-color: #660033;

  background: linear-gradient(135deg, #FDF0F5 0%, #FFF5F8 100%);

  transform: translateX(4px);

}



.bbn-v5-check-box {

  width: 26px;

  height: 26px;

  border-radius: 8px;

  border: 2px solid #C9A35C;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 2px;

  transition: background 0.2s, border-color 0.2s;

  background: transparent;

}



.bbn-v5-check-item.checked .bbn-v5-check-box {

  background: #660033;

  border-color: #660033;

}



.bbn-v5-check-icon {

  color: #fff;

  font-size: 14px;

  font-weight: 800;

  opacity: 0;

  transition: opacity 0.2s;

}



.bbn-v5-check-item.checked .bbn-v5-check-icon {

  opacity: 1;

}



.bbn-v5-check-text {

  font-family: 'Source Sans 3', sans-serif;

  flex: 1;

}



.bbn-v5-check-text strong {

  display: block;

  font-size: 15px;

  color: #2D2D3A;

  margin-bottom: 4px;

  line-height: 1.3;

}



.bbn-v5-check-text span {

  font-size: 14px;

  color: #6B7280;

  line-height: 1.5;

}



.bbn-v5-check-item.checked .bbn-v5-check-text strong {

  color: #660033;

}



/* Zähler */

.bbn-v5-check-counter {

  max-width: 720px;

  margin: 0 auto 24px;

  text-align: center;

  padding: 20px;

  background: linear-gradient(135deg, #660033, #6B1A42);

  border-radius: 14px;

  color: #fff;

  animation: bbnCounterAppear 0.4s ease;

}



@keyframes bbnCounterAppear {

  from { opacity: 0; transform: scale(0.95); }

  to   { opacity: 1; transform: scale(1); }

}



.bbn-v5-counter-number {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 48px;

  font-weight: 700;

  color: #C9A35C;

  line-height: 1;

  margin-bottom: 8px;

}



.bbn-v5-counter-text {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 15px;

  color:#FFFFFF;

  line-height: 1.5;

}



.bbn-v5-check-cta {

  max-width: 720px;

  margin: 0 auto;

  text-align: center;

  padding: 28px;

  background: rgba(102,0,51,0.07);

  border: 2px solid rgba(102,0,51,0.18);

  border-radius: 16px;

  animation: bbnCounterAppear 0.4s ease;

}



.bbn-v5-check-cta p {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  color: #2D2D3A;

  line-height: 1.65;

  margin-bottom: 16px;

}



.bbn-v5-check-cta strong { color: #660033; }



/* ── 6. Anitas Geschichte ─────────────────────────── */

.bbn-v5-anita-section {

  background: var(--bg-section, #F5EDE4);

  padding: 80px 0 80px;

}



.bbn-v5-anita-grid {

  display: grid;

  grid-template-columns: 380px 1fr;

  gap: 64px;

  align-items: start;

}



@media (max-width: 900px) {

  .bbn-v5-anita-grid {

    grid-template-columns: 1fr;

    gap: 40px;

    text-align: center;

  }

  .bbn-v5-anita-photo-wrap { margin: 0 auto; }

  .bbn-v5-anita-credentials { justify-content: center; }

}



.bbn-v5-anita-photo-wrap {

  position: relative;

  max-width: 360px;

}



.bbn-v5-anita-photo-frame {

  border-radius: 20px;

  overflow: hidden;

  border: 2.5px solid rgba(201,163,92,0.85);

  outline: 1.5px solid rgba(201,163,92,0.18);

  outline-offset: 5px;

  box-shadow:

    0 0 0 1px rgba(201,163,92,0.12),

    0 0 24px rgba(201,163,92,0.18),

    0 12px 40px rgba(0,0,0,0.2);

}



.bbn-v5-anita-photo {

  width: 100%;

  display: block;

  object-fit: cover;

}



.bbn-v5-anita-badge {

  position: absolute;

  bottom: -16px;

  right: -16px;

  background: linear-gradient(135deg, #660033, #6B1A42);

  border-radius: 14px;

  padding: 12px 18px;

  text-align: center;

  box-shadow: 0 4px 20px rgba(0,0,0,0.25);

  border: 2px solid #C9A35C;

}



.bbn-v5-anita-badge .about-badge-num {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: 28px;

  font-weight: 700;

  color: #C9A35C;

  line-height: 1;

}



.bbn-v5-anita-badge .about-badge-label {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 14px;

  color: #C9A35C;

  margin-top: 2px;

  letter-spacing: 0.04em;

}



.bbn-v5-anita-h2 {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: clamp(22px, 3.5vw, 34px);

  font-weight: 700;

  color: var(--dark, #2A0016);

  margin-bottom: 24px;

  line-height: 1.25;

}



.bbn-v5-anita-h2 span {

  color: var(--primary, #660033);

}



.bbn-v5-anita-story {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  line-height: 1.75;

  color: #2D2D3A;

  margin-bottom: 28px;

}



.bbn-v5-anita-story p { margin-bottom: 16px; }

.bbn-v5-anita-story p:last-child { margin-bottom: 0; }



.bbn-v5-anita-pivot {

  background: rgba(102,0,51,0.07);

  border-left: 3px solid #660033;

  border-radius: 0 8px 8px 0;

  padding: 14px 18px;

  margin: 4px 0 16px !important;

  font-style: normal;

  color: #2D2D3A !important;

}



.bbn-v5-anita-credentials {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



/* ── 7. Quiz-Übergang ─────────────────────────────── */

.bbn-v5-quiz-bridge {

  background: linear-gradient(170deg, #2A0016 0%, #4A0024 100%);

  padding: 72px 0;

  text-align: center;

}



.bbn-v5-bridge-inner {

  max-width: 660px;

  margin: 0 auto;

}



.bbn-v5-bridge-icon {

  font-size: 48px;

  margin-bottom: 20px;

  display: block;

  animation: bbnBridgeFloat 3s ease-in-out infinite;

}



@keyframes bbnBridgeFloat {

  0%,100% { transform: translateY(0); }

  50%     { transform: translateY(-8px); }

}



.bbn-v5-bridge-h2 {

  font-family: 'Cormorant Garamond', Georgia, serif;

  font-size: clamp(24px, 4vw, 38px);

  font-weight: 700;

  color: #fff;

  margin-bottom: 16px;

  line-height: 1.25;

}



.bbn-v5-bridge-h2 em {

  color: #C9A35C;

  font-style: normal;

}



.bbn-v5-bridge-text {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  line-height: 1.7;

  color:#FFFFFF;

  margin-bottom: 24px;

}



.bbn-v5-bridge-features {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;

  margin-bottom: 28px;

  font-family: 'Source Sans 3', sans-serif;

  font-size: 16px;

  color:#FFFFFF;

}



.bbn-v5-bridge-btn {

  font-size: 16px;

  padding: 18px 40px;

}

/* ============================================================
   S359-Ergaenzungen (B4 Seite 7, eigener Boden)
   ============================================================ */
/* Marken-Schmetterling (SVG statt Emoji, Volker-Auftrag 18.07.) */
.bbn-butterfly { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.hero-card-icon .bbn-butterfly { width: 44px; height: 44px; }
.quiz-result-icon .bbn-butterfly { width: 48px; height: 48px; }
.transformation-item .icon .bbn-butterfly { width: 1.2em; height: 1.2em; }
.sticky-cta-text .bbn-butterfly { width: 1.25em; height: 1.25em; vertical-align: -0.22em; }
#bbn-quiz-submit .bbn-butterfly, .btn-secondary .bbn-butterfly { width: 1.2em; height: 1.2em; vertical-align: -0.2em; margin-right: 6px; }
.bbn-form-section h3 .bbn-butterfly { width: 1.15em; height: 1.15em; vertical-align: -0.18em; margin-right: 6px; }

/* Fuss: Wortmarke in Marken-Farben (Volker 18.07.: Farbtausch), Links gold */
.site-footer .footer-brand { color: #E4C98A !important; font-weight: 700 !important; }
.site-footer .footer-brand span { color: #C3C9D2 !important; font-style: italic !important; font-weight: 400 !important; }
.site-footer .footer-links a { color: #E4C98A !important; }
.site-footer .footer-links a:hover { color: #E4C98A !important; }

/* Sticky-Leiste: goldfarbene Schrift (Volker 18.07.) */
.sticky-cta-text { color: #E4C98A !important; }
.sticky-cta-text span { color: rgba(228, 201, 138, 0.8) !important; }

/* Bruecken-Zeichen traegt sein Logo jetzt ohne Emoji-Inhalt */
.bbn-v5-bridge-icon { font-size: 0 !important; }

/* ---------- Eigenes Formular (statt SIO-Formular) ----------
   Hintergrund plus Grund-Polster kommen aus dem CDN-Blatt
   (.bbn-form-section, var(--gradient-hero)); die Glas-Karte entspricht der
   Live-Regel fuer die SIO-Formular-Reihe (div[id^=row-]). */
.bbn-form-inner {
  max-width: 780px; margin: 0 auto;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; overflow: hidden;
  padding: 24px 40px; box-sizing: border-box;
}
.bbn-form-section h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 700; color: #ffffff; margin: 0; text-align: center; }
.bbn-form-section .snake-border-wrap { margin-bottom: 22px; }
.bbn-form-intro { color:#FFFFFF; font-family: 'Source Sans 3', sans-serif; font-size: 1.02rem; line-height: 1.75; text-align: center; margin: 0 0 30px; }
.bbn-feld { margin-bottom: 14px; }
.bbn-form-section input[type="text"], .bbn-form-section input[type="email"], .bbn-form-section select {
  width: 100%; box-sizing: border-box; padding: 16px 18px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px; color: #ffffff; font-size: 1rem;
  font-family: 'Source Sans 3', sans-serif; outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bbn-form-section input::placeholder { color: rgba(255,255,255,0.45); }
.bbn-form-section input:focus, .bbn-form-section select:focus { border-color: #C9A35C; box-shadow: 0 0 0 2px rgba(201,163,92,0.25); }
.bbn-form-section select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><polyline points="1,1 7,7 13,1" fill="none" stroke="%23D4A574" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.bbn-form-section select option { background: #2A0016; color: #ffffff; }
#bbn-anrede-error, #bbn-dsgvo-error { display: none; color: #ff6b6b; font-size: 1rem; margin: 6px 0 0 2px; font-family: 'Source Sans 3', sans-serif; }
#bbn-email-error { display: none; color: #ff6b6b; font-size: 16px; font-family: 'Source Sans 3', sans-serif; margin-top: 6px; padding: 0 4px; }
#bbn-dsgvo-wrapper { margin: 12px 0 20px; padding: 14px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; box-sizing: border-box; transition: border-color 0.25s ease; }
#bbn-dsgvo-wrapper label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
#bbn-dsgvo-check { width: 18px; height: 18px; min-width: 18px; margin-top: 3px; cursor: pointer; accent-color: #C9A35C; flex-shrink: 0; }
#bbn-dsgvo-wrapper label > span { color:#FFFFFF; font-size: 1rem; line-height: 1.65; font-family: 'Source Sans 3', sans-serif; }
#bbn-dsgvo-wrapper label strong { color:#FFFFFF; }
#bbn-dsgvo-wrapper label a { color: #C9A35C; text-decoration: underline; white-space: nowrap; }
#bbn-dsgvo-wrapper .bbn-pflicht { color: rgba(255,255,255,0.35); font-size: 1rem; }
#bbn-quiz-submit {
  background: linear-gradient(135deg, #C9A35C 0%, #B08B45 100%); color: #2A0016;
  border: none; border-radius: 50px; padding: 18px 40px; font-size: 1.05rem;
  font-weight: 700; width: 100%; cursor: pointer; font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.3px; display: block; box-sizing: border-box;
  animation: pulseFormBtn 2.4s ease-in-out infinite; margin-top: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#bbn-quiz-submit:hover { background: linear-gradient(135deg, #E4C98A 0%, #C9A35C 100%); transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 40px rgba(201,163,92,0.6); animation-play-state: paused; }
#bbn-quiz-submit:disabled { opacity: 0.6; cursor: wait; animation: none; }
.bbn-ssl-hinweis { color: rgba(255,255,255,0.45); font-family: 'Source Sans 3', sans-serif; font-size: 1rem; margin: 14px 0 0; text-align: center; display: block; }


/* ============================================================================
   S409: die Testseite auf die Marke gezogen (Volker-Auftrag nach dem Screenshot)
   Die Seite hatte ein eigenes Farbsystem: Gold #D4A574 statt #C9A35C,
   Grundton #8B2252 statt Beerenrot #660033. Beides ist oben getauscht,
   hier stehen nur noch die acht Stellen, die eine eigene Regel brauchen.
   ============================================================================ */

/* 2. Der Hero-Verlauf: gleiche Form wie bisher, aber aus dem Beerenrot heraus. */
:root{
  --gradient-hero:linear-gradient(170deg,#2A0016 0%,#4A0024 40%,#660033 100%);
  --gradient-warm:linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%);
}

/* 3. "Was dir passiert, hat einen Namen": Gold, kursiv, ausdruecklich NICHT fett.
   Die alte Regel setzte font-style auf normal und das Gewicht auf 700. */
.bbn-v5-h1 em{
  color:#E4C98A!important;
  font-style:italic!important;
  font-weight:400!important;
}

/* 4. Der Knopf bekommt das Glanz-Gold, die Schrift darauf bleibt dunkel. */
.btn-primary,a.btn-primary,a.gjs-btn.btn-primary{
  background:linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%)!important;
  box-shadow:0 1px 0 #8C6A2F inset,0 2px 8px rgba(0,0,0,.3)!important;
  color:#1B2A4E!important;
}
.btn-primary:hover,a.btn-primary:hover{
  background:linear-gradient(135deg,#B08B45 0%,#C9A35C 40%,#F2DFA6 50%,#C9A35C 60%,#B08B45 100%)!important;
  box-shadow:0 8px 30px rgba(201,163,92,.45)!important;
}

/* 5. Die Kreise um die Testimonials: Marken-Gold statt Sandton. */
.hero-trust-avatars .avatar:nth-child(-n+4),
.avatar:nth-child(-n+4){
  border:3px solid #C9A35C!important;
  box-shadow:0 3px 8px rgba(102,0,51,.35),inset 0 0 0 1px rgba(255,255,255,.2)!important;
}
.avatar{background:#660033!important}

/* 6. Der Kasten mit dem Schmetterling: Rahmen in Marken-Gold. */
.bbn-v5-hero-card{
  border:2.5px solid #C9A35C!important;
  outline:1.5px solid rgba(201,163,92,.35)!important;
}

/* 7. Die Zahlen im Kasten. */
.hero-stat-num{color:#E4C98A!important;font-weight:600!important}
.hero-stat-label{color:#FFFFFF!important}

/* 8. Die Pille oben. Sie ist kein Knopf, sondern eine Beschriftung.
   WEISSER GRUND (Volker-Wunsch S409): der halbdurchsichtige Goldschleier sah auf
   dem dunklen Verlauf schmutzig aus.
   FOLGE, die zwingend dazugehoert: auf Weiss kann die Schrift NICHT goldhell
   bleiben, das waere Kontrast 1,5. Sie bekommt den dunklen Goldton #7F612D,
   der auf Weiss 5,9 erreicht. Dieselbe Regel wie ueberall: heller Grund,
   dunkles Gold. */
.hero-badge{
  background:#FFFFFF!important;
  border:1px solid rgba(201,163,92,.7)!important;
  color:#7F612D!important;
  box-shadow:0 2px 10px rgba(0,0,0,.18)!important;
}
.hero-badge svg{color:#7F612D!important}

/* 1. Die Wortmarke im Kaestchen. Sie war reiner Text ohne Auszeichnung und
   deshalb komplett kursiv und gold. Jetzt traegt sie die Marken-Teile, und
   die Regel darf ihre Farben NICHT mehr ueberschreiben. */
.bbn-v5-hero-card h3{
  font-family:'Cormorant Garamond',Georgia,serif!important;
  font-size:24px!important;
  color:inherit!important;
  font-style:normal!important;
  font-weight:400!important;
  text-align:center!important;
  margin-bottom:10px!important;
}
.bbn-v5-hero-card h3 .bbn-wm__strong{
  font-weight:700!important;font-style:normal!important;color:#E4C98A!important;
}
.bbn-v5-hero-card h3 .bbn-wm__weak{
  font-weight:300!important;font-style:italic!important;color:#C3C9D2!important;
}


/* S409: 'Du bist nicht verrueckt' anderthalb Mal so gross wie die Zeile
   darunter, Aufbau wie auf der Startseite. Die zweite Zeile steht im em,
   also bekommt sie zwei Drittel (1 geteilt durch 1,5). */
.hero h1.bbn-v5-h1 em,.bbn-v5-hero h1.bbn-v5-h1 em,h1.bbn-v5-h1 em{font-size:.667em!important;display:inline-block!important;line-height:1.15!important}


/* ============================================================================
   S409-EINHEITLICH (Volker-Wunsch): EIN beerenroter Verlauf ueber die ganze
   Seite. Vorher trug jeder Abschnitt seinen eigenen dunklen Ton, teils blau,
   teils fast schwarz. Das fiel bei jedem Screenshot neu auf.
   Die Familie: #2A0016 (tief) -> #4A0024 (mittel) -> #660033 (Beerenrot).
   ============================================================================ */
.hero,.bbn-v5-hero{background:linear-gradient(170deg,#2A0016 0%,#4A0024 40%,#660033 100%)!important}
.bbn-v5-mirror{background:linear-gradient(135deg,#2A0016 0%,#4A0024 100%)!important}
.bbn-v5-mirror-section{background:linear-gradient(180deg,#4A0024 0%,#660033 100%)!important}
.bbn-v5-quiz-bridge{background:linear-gradient(170deg,#4A0024 0%,#660033 100%)!important}
.guarantee-section{background:linear-gradient(170deg,#2A0016 0%,#4A0024 40%,#660033 100%)!important}
.about-image-frame{background:linear-gradient(170deg,#2A0016 0%,#4A0024 40%,#660033 100%)!important}
.bbn-v5-anita-pivot{background:linear-gradient(180deg,#4A0024 0%,#660033 100%)!important}
.problem-sidebar{background:linear-gradient(135deg,#660033 0%,#4A0024 50%,#2A0016 100%)!important}
.site-footer,.footer{background:#2A0016!important}


/* S409: die ::first-letter-Regeln sind ENTFERNT. Sie blendeten den ersten
   Buchstaben des Knopf-Textes aus, damit das Lupen-Emoji im Text unsichtbar
   wird und stattdessen das saubere Symbol aus ::before erscheint. Sobald das
   Skript den Text auf 'Test laeuft' aendert, verschwand dadurch das T.
   Statt der Regel wird das Emoji aus dem Seitentext entfernt: dann braucht
   niemand mehr einen Buchstaben zu verstecken. */


/* ============================================================================
   S410-WEISS: Volkers fuenf Screenshots vom 31.07.2026, in einem Zug.
   Die Farbwerte oben im Blatt sind bereits von halbdurchsichtigem Weiss auf
   volles Weiss gezogen. Hier steht nur, was eine eigene Regel braucht.
   ============================================================================ */

/* BILD 1 und 5: der Sticky Header ist der Hook. Er war 14 bis 17 Pixel gross
   und stand in 85 Prozent Weiss, also grau. Jetzt volles Weiss und eine Stufe
   groesser. */
.bbn-v5-mirror-text{
  color:#FFFFFF!important;
  font-size:clamp(17px,2.4vw,21px)!important;
  font-weight:600!important;
}

/* BILD 1: die Frage-Karte hob sich nicht vom Seiten-Hintergrund ab, weil ihr
   Grund `rgba(255,255,255,0.06)` war, also praktisch durchsichtig. Jetzt traegt
   die Karte den Ton, den die Kopfleiste bisher hatte, und die Kopfleiste wird
   schwarz. Damit steht die Karte als eigener Koerper auf der Seite. */
.quiz-card{
  background:#3F001F!important;
  border:1px solid rgba(201,163,92,.28)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.35)!important;
}
.quiz-progress{
  background:#000000!important;
  border-radius:12px 12px 0 0!important;
}
.quiz-progress-text{color:#FFFFFF!important}
.quiz-progress-text span{color:#E4C98A!important}
.quiz-progress-bar-bg{background:rgba(255,255,255,.18)!important}

/* BILD 1: die Antwort-Felder standen ebenfalls auf sechs Prozent Weiss und
   verschwammen mit der Karte. Deckender Ton, eine Stufe heller als die Karte. */
.quiz-option{
  background:#55002A!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#FFFFFF!important;
}
.quiz-option:hover{
  background:#680034!important;
  border-color:rgba(201,163,92,.5)!important;
}

/* BILD 1: das angewaehlte Feld soll sich deutlich abheben. Vorher lag ein
   Gold-Schleier von 15 Prozent darauf, das war neben dem Goldrahmen kaum zu
   sehen. Jetzt traegt es den Goldrahmen UND einen sichtbar helleren Grund. */
.quiz-option.selected{
  background:linear-gradient(135deg,rgba(201,163,92,.30) 0%,rgba(201,163,92,.16) 100%)!important;
  border:2px solid #C9A35C!important;
  color:#FFFFFF!important;
  box-shadow:0 0 0 1px rgba(201,163,92,.35),0 4px 18px rgba(0,0,0,.3)!important;
}

/* BILD 1: der Knopf "Weiter" bekommt das Glanz-Gold der Marke.
   Die Schrift bleibt Mitternachtsblau, siehe der Vermerk im Kopf dieser Datei:
   Weiss auf Gold erreicht 2,4 und ist damit unter der Schwelle 4,5, die das
   Standard-Blatt v1.3 seit gestern verlangt. Volker entscheidet am Bild. */
.quiz-btn-next{
  background:linear-gradient(135deg,#C9A35C 0%,#D9BE7E 40%,#F2DFA6 50%,#D9BE7E 60%,#C9A35C 100%)!important;
  color:#1B2A4E!important;
  font-weight:700!important;
  box-shadow:0 1px 0 #8C6A2F inset,0 2px 10px rgba(0,0,0,.35)!important;
}
.quiz-btn-back{color:#FFFFFF!important;background:rgba(255,255,255,.12)!important}

/* BILD 3: Anitas Zitat. Der Kasten wurde gestern dunkel, seine Schrift blieb
   dunkel, und damit war er ein unlesbarer Klotz. Beides gehoert zusammen. */
.bbn-v5-anita-pivot,
.bbn-v5-anita-pivot em,
.bbn-v5-anita-pivot strong{
  color:#FFFFFF!important;
}
.bbn-v5-anita-pivot{
  border-left:3px solid #C9A35C!important;
  padding:18px 22px!important;
}

/* BILD 4: der Zitat-Kasten der Klientin bekommt unser Mitternachtsblau,
   als Verlauf von dunkel oben links nach heller unten rechts. */
.bbn-v5-mirror-card{
  background:linear-gradient(135deg,#1B2A4E 0%,#2E3F66 100%)!important;
  border:1px solid rgba(201,163,92,.35)!important;
}
.bbn-v5-mirror-quote,
.bbn-v5-mirror-ending,
.bbn-v5-mirror-label,
.bbn-v5-mirror-response{
  color:#FFFFFF!important;
}
.bbn-v5-mirror-quote em,
.bbn-v5-mirror-response strong em{color:#E4C98A!important}

/* BILD 5: die Hero-Texte. Sie standen zwischen 55 und 78 Prozent Weiss. */
.bbn-v5-hero-lead,
.bbn-v5-hero-trust,
.bbn-v5-hero-card p,
.hero-trust,
.hero-stat-label{
  color:#FFFFFF!important;
}

/* ----------------------------------------------------------------------------
   NACHTRAG aus der GERENDERTEN Messung, nicht aus dem Blatt gelesen.
   Nachdem das Rosa weg war, blieben sechs Stellen unter der Schwelle 4,5.
   Alle vom selben Typ: heller Goldton auf HELLEM Grund. Das Standard-Blatt
   v1.3 verlangt dort den dunklen Goldton, die Regel gab es, nur angewendet
   war sie hier nicht.
   ---------------------------------------------------------------------------- */

/* Anitas Ueberschrift stand in #C9A35C auf Creme: Kontrast 2,04. Sie teilte sich
   eine Regel mit dem Kaestchen im Hero, und DORT ist der Grund dunkel, da war
   Gold richtig. Eine Regel fuer zwei entgegengesetzte Gruende geht nie gut. */
.bbn-v5-anita-h2{color:#7F612D!important}

/* Die Sterne der Stimmen standen in einem grellen Gelb auf Creme: 1,55. */
.testimonial-stars{color:#7F612D!important}

/* Die Vorher-Spalte stand in Grau auf Creme: 3,65. Sie SOLL zurueckhaltend
   wirken, das ist Absicht und bleibt. Sie bekommt darum nicht die volle Tinte,
   sondern den gedaempften Ton des Standard-Blatts, der die Absicht behaelt und
   die Schwelle trotzdem nimmt. Klasse am lebenden Bild gemessen, nicht geraten. */
.transformation-col.before-col h3{color:#5A5A63!important}

/* Das grosse Anfuehrungszeichen im Zitat-Kasten. Gemessen stand es in
   `rgba(201,163,92,0.25)`, also mit einem Viertel Deckkraft, und war auf dem
   neuen Mitternachtsblau kaum zu sehen. */
.bbn-v5-quote-mark{color:#E4C98A!important;opacity:.9!important}

/* Die Fusszeile stand in 35 Prozent Weiss auf dem tiefen Beerenrot: gerendert
   ergab das Kontrast 3,05. Sie lag unter der Schwelle dieses Werkzeugs und war
   damit "bewusst unberuehrt", aber die gerenderte Messung widerspricht: eine
   Copyright-Zeile ist Nebentext und Nebentext wird gelesen.
   Genau dafuer gibt es die Messung NACH dem Bau.
   Sie bekommt volles Weiss und kein abgeschwaechtes: der erste Versuch stand
   auf 72 Prozent, und die EIGENE Gegenprobe dieses Werkzeugs hat ihn sofort
   beanstandet. Zu Recht, denn eine Ausnahme in genau der Regel, die man gerade
   durchsetzt, ist keine Ausnahme, sondern ein Loch. */
.footer-copy{color:#FFFFFF!important}


/* ============================================================================
   ZWEITE RUNDE S410, nach Volkers Durchsicht der reparierten Pruefseite.
   ============================================================================ */

/* KOPF UND FUSS BLEIBEN BLAU (Volker-Korrektur).
   In S409 wurden sie auf den durchgehenden Beerenrot-Verlauf gezogen, unter der
   Ueberschrift "EIN Verlauf ueber die ganze Seite". Das war zu weit gefasst:
   gemeint waren die ABSCHNITTE der Seite, nicht der Rahmen. Kopf und Fuss tragen
   das Mitternachtsblau der Marke, so wie auf jeder anderen Seite auch. */
.bbn-v5-mirror{
  background:linear-gradient(135deg,#1B2A4E 0%,#16223F 100%)!important;
}
.site-footer,.footer{background:#1B2A4E!important}

/* DER STICKY-BALKEN UNTEN, der beim Start des Tests verschwindet: schwarz. */
.sticky-cta{background:#000000!important}
.sticky-cta,.sticky-cta p,.sticky-cta span{color:#FFFFFF!important}

/* DIE ZWEI EMOJIS IN DER VORHER-NACHHER-UEBERSCHRIFT.
   Sie standen als Zeichen IM TEXT der Seite und wirkten billig neben den
   gestalteten Kreisen darunter. Dieselbe Technik wie dort: das Zeichen wird aus
   dem Seitentext ENTFERNT (nicht per CSS versteckt, das hat in S409 einen
   Buchstaben verschluckt), und hier steht das Vektor-Symbol davor.
   Farben wie in den Spalten darunter: links gedaempft, rechts die Marke. */
.transformation-col h3{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.transformation-col h3::before{
  content:""!important;
  flex:0 0 auto!important;
  width:32px!important; height:32px!important;
  border-radius:999px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
}
.transformation-col.before-col h3::before{
  background-color:#ECE7E1!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")!important;
}
.transformation-col.after-col h3::before{
  background-color:#660033!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4C98A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")!important;
}