/* ============================================================
   BH CTA-Box – Frontend Styles
   Nutzt die CSS-Variablen des Themes bohillebrand.
   Fallback-Werte für Standalone-Nutzung (Admin-Vorschau).
   ============================================================ */

/* ── Fallback-Variablen (nur wenn Theme sie nicht setzt) ── */
.bh-cta {
  --_blue:      var(--blue, #2563eb);
  --_blue-50:   var(--blue-50, #eff6ff);
  --_blue-100:  var(--blue-100, #dbeafe);
  --_blue-200:  var(--blue-200, #bfdbfe);
  --_blue-400:  var(--blue-400, #60a5fa);
  --_blue-500:  var(--blue-500, #3b82f6);
  --_blue-600:  var(--blue-600, #2563eb);
  --_blue-700:  var(--blue-700, #1d4ed8);
  --_blue-900:  var(--blue-900, #1e3a5f);
  --_white:     var(--white, #ffffff);
  --_gray-50:   var(--gray-50, #f8fafc);
  --_gray-100:  var(--gray-100, #f1f5f9);
  --_gray-200:  var(--gray-200, #e2e8f0);
  --_gray-400:  var(--gray-400, #94a3b8);
  --_gray-500:  var(--gray-500, #64748b);
  --_gray-700:  var(--gray-700, #334155);
  --_gray-900:  var(--gray-900, #0f172a);
  --_radius:    var(--radius, 16px);
  --_radius-sm: var(--radius-sm, 10px);
  --_shadow:    var(--shadow, 0 1px 3px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.04));
  --_shadow-lg: var(--shadow-lg, 0 4px 12px rgba(0,0,0,.05), 0 20px 60px rgba(0,0,0,.08));

  margin: 2rem 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Shared Elements ── */
.bh-cta-hook {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .6rem;
}
.bh-cta-promise {
  font-size: 1.25rem; font-weight: 800; line-height: 1.3;
  margin-bottom: .6rem;
}
.bh-cta-usp {
  font-size: .9rem; line-height: 1.6;
  margin-bottom: 1.25rem;
}
.bh-cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.5rem; border-radius: var(--_radius-sm);
  font-size: .9rem; font-weight: 700; text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s;
  cursor: pointer; border: none;
}
.bh-cta-btn:hover { transform: translateY(-2px); }
.bh-cta-arrow {
  width: 16px; height: 16px; fill: none;
  stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s;
}
.bh-cta-btn:hover .bh-cta-arrow { transform: translateX(3px); }

/* ── Animation – unsichtbar bis IntersectionObserver triggert ── */
.bh-cta-animate {
  opacity: 0;
  transform: translateY(20px);
}
.bh-cta-visible {
  animation-fill-mode: forwards;
}

/* ============================================================
   VARIANTE 1 – Elegante Karte
   ============================================================ */
.bh-cta-v1 {
  position: relative;
  background: var(--_white);
  border: 1px solid var(--_blue-200);
  border-radius: var(--_radius);
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(37,99,235,.08);
  overflow: hidden;
}
.bh-cta-v1::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--_blue-400), var(--_blue-700));
}
.bh-cta-v1 .bh-cta-hook    { color: var(--_blue); }
.bh-cta-v1 .bh-cta-promise { color: var(--_gray-900); }
.bh-cta-v1 .bh-cta-usp     { color: var(--_gray-500); }
.bh-cta-v1 .bh-cta-btn {
  background: var(--_blue); color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}
.bh-cta-v1 .bh-cta-btn:hover {
  background: var(--_blue-700);
  box-shadow: 0 8px 24px rgba(37,99,235,.3);
}

.bh-cta-v1.bh-cta-visible {
  animation: bhCtaFadeUp .6s ease-out forwards;
}

/* ============================================================
   VARIANTE 2 – Gradient Spotlight
   ============================================================ */
.bh-cta-v2 {
  position: relative;
  background: linear-gradient(135deg, var(--_blue-600) 0%, var(--_blue-900) 100%);
  border-radius: var(--_radius);
  padding: 2.25rem 2rem;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37,99,235,.2);
  overflow: hidden;
}
.bh-cta-v2::after {
  content: '';
  position: absolute; top: -40%; right: -10%;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.bh-cta-v2 .bh-cta-hook    { color: var(--_blue-200); }
.bh-cta-v2 .bh-cta-promise { color: #fff; }
.bh-cta-v2 .bh-cta-usp     { color: rgba(255,255,255,.8); }
.bh-cta-v2 .bh-cta-btn {
  background: #fff; color: var(--_blue-700);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.bh-cta-v2 .bh-cta-btn:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.bh-cta-v2.bh-cta-visible {
  animation: bhCtaScaleIn .5s ease-out forwards;
}

/* ============================================================
   VARIANTE 3 – Linker Akzent
   ============================================================ */
.bh-cta-v3 {
  position: relative;
  background: var(--_blue-50);
  border-left: 4px solid var(--_blue);
  border-radius: 0 var(--_radius) var(--_radius) 0;
  padding: 1.75rem 2rem;
}
.bh-cta-v3 .bh-cta-hook    { color: var(--_blue); }
.bh-cta-v3 .bh-cta-promise { color: var(--_gray-900); }
.bh-cta-v3 .bh-cta-usp     { color: var(--_gray-500); }
.bh-cta-v3 .bh-cta-btn {
  background: var(--_blue); color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.2);
}
.bh-cta-v3 .bh-cta-btn:hover {
  background: var(--_blue-700);
  box-shadow: 0 8px 24px rgba(37,99,235,.3);
}

.bh-cta-v3.bh-cta-visible {
  animation: bhCtaSlideRight .5s ease-out forwards;
}

/* ============================================================
   VARIANTE 4 – Zweigeteilte Box
   ============================================================ */
.bh-cta-v4 {
  display: flex; align-items: stretch;
  background: var(--_white);
  border: 1px solid var(--_gray-200);
  border-radius: var(--_radius);
  overflow: hidden;
  box-shadow: var(--_shadow);
}
.bh-cta-v4-content {
  flex: 1; padding: 1.75rem;
}
.bh-cta-v4-action {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--_blue-50);
  padding: 1.75rem 2rem;
  min-width: 200px;
  border-left: 1px solid var(--_blue-100);
  text-align: center;
}
.bh-cta-v4 .bh-cta-hook    { color: var(--_blue); }
.bh-cta-v4 .bh-cta-promise { color: var(--_gray-900); }
.bh-cta-v4 .bh-cta-usp     { color: var(--_gray-500); margin-bottom: 0; }
.bh-cta-v4 .bh-cta-btn {
  background: var(--_blue); color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
  white-space: nowrap;
  animation: bhCtaPulse 3s ease-in-out 2s infinite;
}
.bh-cta-v4 .bh-cta-btn:hover {
  background: var(--_blue-700);
  box-shadow: 0 8px 24px rgba(37,99,235,.3);
  animation: none;
}
.bh-cta-v4-hint {
  font-size: .72rem; color: var(--_gray-400); margin-top: .6rem;
}

.bh-cta-v4.bh-cta-visible {
  animation: bhCtaFadeUp .6s ease-out forwards;
}

@media (max-width: 600px) {
  .bh-cta-v4 { flex-direction: column; }
  .bh-cta-v4-action {
    border-left: none;
    border-top: 1px solid var(--_blue-100);
    min-width: auto; padding: 1.25rem;
  }
}

/* ============================================================
   VARIANTE 5 – Floating Card
   ============================================================ */
.bh-cta-v5 {
  position: relative;
  background: var(--_white);
  border-radius: 20px;
  padding: 2.25rem 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(37,99,235,.1), 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid var(--_blue-100);
}
.bh-cta-v5::before {
  content: '';
  position: absolute; inset: -1px; border-radius: 21px;
  background: linear-gradient(135deg, var(--_blue-200), transparent 50%, var(--_blue-100));
  z-index: -1; opacity: .6;
}
.bh-cta-icon {
  width: 48px; height: 48px; margin: 0 auto .75rem;
  background: var(--_blue-50); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  animation: bhCtaIconBounce 2s ease-in-out 1.5s infinite;
}
.bh-cta-icon svg { width: 24px; height: 24px; color: var(--_blue); }
.bh-cta-v5 .bh-cta-hook    { color: var(--_blue); }
.bh-cta-v5 .bh-cta-promise { color: var(--_gray-900); }
.bh-cta-v5 .bh-cta-usp {
  color: var(--_gray-500);
  max-width: 480px; margin-left: auto; margin-right: auto;
  margin-bottom: 1.25rem;
}
.bh-cta-v5 .bh-cta-btn {
  background: var(--_blue); color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}
.bh-cta-v5 .bh-cta-btn:hover {
  background: var(--_blue-700);
  box-shadow: 0 8px 24px rgba(37,99,235,.3);
}

.bh-cta-v5.bh-cta-visible {
  animation: bhCtaFadeUp .7s ease-out forwards;
}

/* ============================================================
   VARIANTE 6 – Kachel (wie Startseite)
   ============================================================ */
@property --bh-cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes bhCtaGradientSpin {
  0%   { --bh-cta-angle: 0deg; }
  100% { --bh-cta-angle: 360deg; }
}
@keyframes bhCtaShimmerSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bh-cta-v6 {
  position: relative;
  display: flex; flex-direction: column;
  padding: 3px;
  border-radius: 20px;
  text-decoration: none; color: inherit;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s cubic-bezier(.22,1,.36,1);
  max-width: none;
}
.bh-cta-v6:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(37,99,235,.12);
}

/* Animated gradient border glow */
.bh-cta-v6-glow {
  position: absolute; inset: 0;
  border-radius: 20px; overflow: hidden;
  background: conic-gradient(
    from var(--bh-cta-angle, 0deg),
    var(--_blue, #2563eb),
    var(--_blue-400, #60a5fa),
    var(--_blue-100, #dbeafe),
    var(--_blue-400, #60a5fa),
    var(--_blue, #2563eb)
  );
  opacity: .45;
  animation: bhCtaGradientSpin 4s linear infinite;
  transition: opacity .4s ease;
  z-index: 0;
}
.bh-cta-v6:hover .bh-cta-v6-glow { opacity: 1; }

/* Shimmer sweep */
.bh-cta-v6-glow::after {
  content: '';
  position: absolute; inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, transparent 340deg,
    rgba(255,255,255,.35) 350deg,
    rgba(255,255,255,.5) 355deg,
    rgba(255,255,255,.35) 358deg,
    transparent 360deg
  );
  opacity: 0; transition: opacity .4s ease;
}
.bh-cta-v6:hover .bh-cta-v6-glow::after {
  opacity: 1;
  animation: bhCtaShimmerSweep 1.8s cubic-bezier(.4,0,.2,1) forwards;
}

/* Inner card */
.bh-cta-v6-inner {
  position: relative; z-index: 1;
  background: var(--_white, #fff);
  border-radius: 17px;
  padding: 1.75rem 2rem;
  flex: 1;
  transition: background .45s cubic-bezier(.22,1,.36,1);
}
.bh-cta-v6:hover .bh-cta-v6-inner {
  background: var(--_gray-50, #f8fafc);
}

/* Badge = Hook */
.bh-cta-v6-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 100px;
  background: var(--_blue, #2563eb); color: #fff;
  margin-bottom: .75rem;
}

/* Head = Icon + Versprechen */
.bh-cta-v6-head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem;
}
.bh-cta-v6-icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--_blue-50, #eff6ff);
  border-radius: 12px;
  color: var(--_blue, #2563eb);
}
.bh-cta-v6-icon svg { width: 24px; height: 24px; }
.bh-cta-v6-titel {
  font-size: 1.2rem; font-weight: 700;
  color: var(--_gray-900, #0f172a);
  margin: 0; line-height: 1.3;
}

/* Text = USP */
.bh-cta-v6-text {
  font-size: .95rem; line-height: 1.7;
  color: var(--_gray-500, #64748b);
  margin: 0 0 .75rem;
}

/* Button */
.bh-cta-v6-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600;
  color: var(--_blue, #2563eb);
  padding: .55rem 1.2rem;
  border-radius: 100px;
  background: var(--_blue-50, #eff6ff);
  text-decoration: none;
  transition: background .2s, color .2s, gap .2s;
}
.bh-cta-v6:hover .bh-cta-v6-btn {
  background: var(--_blue, #2563eb); color: #fff; gap: .6rem;
}

/* ── V6 Farbvariante: DUNKEL ── */
.bh-cta-v6--dunkel .bh-cta-v6-inner { background: var(--_blue-900, #1e3a5f); }
.bh-cta-v6--dunkel .bh-cta-v6-glow {
  background: conic-gradient(from var(--bh-cta-angle, 0deg),
    var(--_blue-400), var(--_blue-200), #fff, var(--_blue-200), var(--_blue-400));
}
.bh-cta-v6--dunkel .bh-cta-v6-titel { color: #fff; }
.bh-cta-v6--dunkel .bh-cta-v6-text  { color: rgba(255,255,255,.7); }
.bh-cta-v6--dunkel .bh-cta-v6-icon  { background: rgba(255,255,255,.1); color: var(--_blue-400); }
.bh-cta-v6--dunkel .bh-cta-v6-badge { background: var(--_blue-400); color: var(--_blue-900); }
.bh-cta-v6--dunkel .bh-cta-v6-btn   { background: rgba(255,255,255,.1); color: var(--_blue-400); }
.bh-cta-v6--dunkel:hover .bh-cta-v6-btn   { background: #fff; color: var(--_blue-900); }
.bh-cta-v6--dunkel:hover .bh-cta-v6-inner { background: #253d5a; }
.bh-cta-v6--dunkel:hover { box-shadow: 0 12px 40px rgba(30,58,95,.25); }

/* ── V6 Farbvariante: GRADIENT ── */
.bh-cta-v6--gradient .bh-cta-v6-glow {
  background: conic-gradient(from var(--bh-cta-angle, 0deg),
    #fff, var(--_blue-200), #fff, var(--_blue-200), #fff);
}
.bh-cta-v6--gradient .bh-cta-v6-inner {
  background: linear-gradient(135deg, var(--_blue, #2563eb), var(--_blue-500, #3b82f6), var(--_blue-400, #60a5fa));
}
.bh-cta-v6--gradient .bh-cta-v6-titel { color: #fff; }
.bh-cta-v6--gradient .bh-cta-v6-text  { color: rgba(255,255,255,.85); }
.bh-cta-v6--gradient .bh-cta-v6-icon  { background: rgba(255,255,255,.2); color: #fff; }
.bh-cta-v6--gradient .bh-cta-v6-badge { background: #fff; color: var(--_blue); }
.bh-cta-v6--gradient .bh-cta-v6-btn   { background: rgba(255,255,255,.2); color: #fff; }
.bh-cta-v6--gradient:hover .bh-cta-v6-btn   { background: #fff; color: var(--_blue); }
.bh-cta-v6--gradient:hover .bh-cta-v6-inner {
  background: linear-gradient(135deg, #4b8ced, #6ea8f7, #a3c9fd);
}
.bh-cta-v6--gradient:hover { box-shadow: 0 12px 40px rgba(37,99,235,.2); }

/* ── V6 Farbvariante: DEZENT ── */
.bh-cta-v6--dezent .bh-cta-v6-glow {
  background: conic-gradient(from var(--bh-cta-angle, 0deg),
    var(--_gray-200), var(--_gray-100), var(--_gray-300, #cbd5e1), var(--_gray-100), var(--_gray-200));
  animation-duration: 6s;
}
.bh-cta-v6--dezent .bh-cta-v6-inner { background: var(--_gray-50); }
.bh-cta-v6--dezent .bh-cta-v6-icon  { background: #fff; color: var(--_gray-500); }
.bh-cta-v6--dezent .bh-cta-v6-badge { background: var(--_gray-200); color: var(--_gray-700); }
.bh-cta-v6--dezent .bh-cta-v6-btn   { background: #fff; color: var(--_gray-700); }
.bh-cta-v6--dezent:hover .bh-cta-v6-btn   { background: var(--_gray-700); color: #fff; }
.bh-cta-v6--dezent:hover .bh-cta-v6-inner { background: var(--_gray-100); }
.bh-cta-v6--dezent:hover { box-shadow: 0 12px 40px rgba(0,0,0,.06); }

.bh-cta-v6.bh-cta-visible {
  animation: bhCtaFadeUp .6s ease-out forwards;
}

@media (max-width: 480px) {
  .bh-cta-v6-inner { padding: 1.25rem; }
  .bh-cta-v6-icon  { width: 38px; height: 38px; }
  .bh-cta-v6-icon svg { width: 20px; height: 20px; }
}

/* ============================================================
   DARK MODE
   ============================================================ */

/* Theme dark mode (.dark-mode on body or html) */
.dark-mode .bh-cta-v1,
.dark .bh-cta-v1,
[data-theme="dark"] .bh-cta-v1 {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.dark-mode .bh-cta-v1::before,
.dark .bh-cta-v1::before,
[data-theme="dark"] .bh-cta-v1::before {
  background: linear-gradient(90deg, var(--_blue-400), var(--_blue-600));
}
.dark-mode .bh-cta-v1 .bh-cta-hook,
.dark .bh-cta-v1 .bh-cta-hook,
[data-theme="dark"] .bh-cta-v1 .bh-cta-hook { color: var(--_blue-400); }
.dark-mode .bh-cta-v1 .bh-cta-promise,
.dark .bh-cta-v1 .bh-cta-promise,
[data-theme="dark"] .bh-cta-v1 .bh-cta-promise { color: #e2e8f0; }
.dark-mode .bh-cta-v1 .bh-cta-usp,
.dark .bh-cta-v1 .bh-cta-usp,
[data-theme="dark"] .bh-cta-v1 .bh-cta-usp { color: #94a3b8; }
.dark-mode .bh-cta-v1 .bh-cta-btn,
.dark .bh-cta-v1 .bh-cta-btn,
[data-theme="dark"] .bh-cta-v1 .bh-cta-btn {
  background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3);
}

/* V2 – Gradient Spotlight (dunkler Gradient) */
.dark-mode .bh-cta-v2,
.dark .bh-cta-v2,
[data-theme="dark"] .bh-cta-v2 {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.dark-mode .bh-cta-v2 .bh-cta-btn,
.dark .bh-cta-v2 .bh-cta-btn,
[data-theme="dark"] .bh-cta-v2 .bh-cta-btn {
  background: #e2e8f0; color: #1e3a5f;
}

/* V3 – Linker Akzent */
.dark-mode .bh-cta-v3,
.dark .bh-cta-v3,
[data-theme="dark"] .bh-cta-v3 {
  background: rgba(30,58,95,.3);
  border-left-color: var(--_blue-400);
}
.dark-mode .bh-cta-v3 .bh-cta-hook,
.dark .bh-cta-v3 .bh-cta-hook,
[data-theme="dark"] .bh-cta-v3 .bh-cta-hook { color: var(--_blue-400); }
.dark-mode .bh-cta-v3 .bh-cta-promise,
.dark .bh-cta-v3 .bh-cta-promise,
[data-theme="dark"] .bh-cta-v3 .bh-cta-promise { color: #e2e8f0; }
.dark-mode .bh-cta-v3 .bh-cta-usp,
.dark .bh-cta-v3 .bh-cta-usp,
[data-theme="dark"] .bh-cta-v3 .bh-cta-usp { color: #94a3b8; }
.dark-mode .bh-cta-v3 .bh-cta-btn,
.dark .bh-cta-v3 .bh-cta-btn,
[data-theme="dark"] .bh-cta-v3 .bh-cta-btn {
  background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3);
}

/* V4 – Zweigeteilte Box */
.dark-mode .bh-cta-v4,
.dark .bh-cta-v4,
[data-theme="dark"] .bh-cta-v4 {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.dark-mode .bh-cta-v4-action,
.dark .bh-cta-v4-action,
[data-theme="dark"] .bh-cta-v4-action {
  background: rgba(30,58,95,.4);
  border-left-color: #334155;
}
.dark-mode .bh-cta-v4 .bh-cta-hook,
.dark .bh-cta-v4 .bh-cta-hook,
[data-theme="dark"] .bh-cta-v4 .bh-cta-hook { color: var(--_blue-400); }
.dark-mode .bh-cta-v4 .bh-cta-promise,
.dark .bh-cta-v4 .bh-cta-promise,
[data-theme="dark"] .bh-cta-v4 .bh-cta-promise { color: #e2e8f0; }
.dark-mode .bh-cta-v4 .bh-cta-usp,
.dark .bh-cta-v4 .bh-cta-usp,
[data-theme="dark"] .bh-cta-v4 .bh-cta-usp { color: #94a3b8; }
.dark-mode .bh-cta-v4-hint,
.dark .bh-cta-v4-hint,
[data-theme="dark"] .bh-cta-v4-hint { color: #64748b; }
.dark-mode .bh-cta-v4 .bh-cta-btn,
.dark .bh-cta-v4 .bh-cta-btn,
[data-theme="dark"] .bh-cta-v4 .bh-cta-btn {
  background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3);
}

/* V5 – Floating Card */
.dark-mode .bh-cta-v5,
.dark .bh-cta-v5,
[data-theme="dark"] .bh-cta-v5 {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.1);
}
.dark-mode .bh-cta-v5::before,
.dark .bh-cta-v5::before,
[data-theme="dark"] .bh-cta-v5::before {
  background: linear-gradient(135deg, #334155, transparent 50%, #1e3a5f);
}
.dark-mode .bh-cta-icon,
.dark .bh-cta-icon,
[data-theme="dark"] .bh-cta-icon {
  background: rgba(30,58,95,.5);
}
.dark-mode .bh-cta-icon svg,
.dark .bh-cta-icon svg,
[data-theme="dark"] .bh-cta-icon svg { color: var(--_blue-400); }
.dark-mode .bh-cta-v5 .bh-cta-hook,
.dark .bh-cta-v5 .bh-cta-hook,
[data-theme="dark"] .bh-cta-v5 .bh-cta-hook { color: var(--_blue-400); }
.dark-mode .bh-cta-v5 .bh-cta-promise,
.dark .bh-cta-v5 .bh-cta-promise,
[data-theme="dark"] .bh-cta-v5 .bh-cta-promise { color: #e2e8f0; }
.dark-mode .bh-cta-v5 .bh-cta-usp,
.dark .bh-cta-v5 .bh-cta-usp,
[data-theme="dark"] .bh-cta-v5 .bh-cta-usp { color: #94a3b8; }
.dark-mode .bh-cta-v5 .bh-cta-btn,
.dark .bh-cta-v5 .bh-cta-btn,
[data-theme="dark"] .bh-cta-v5 .bh-cta-btn {
  background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3);
}

/* ── prefers-color-scheme Fallback ── */
@media (prefers-color-scheme: dark) {
  .bh-cta-v1 {
    background: #1e293b; border-color: #334155;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }
  .bh-cta-v1::before { background: linear-gradient(90deg, var(--_blue-400), var(--_blue-600)); }
  .bh-cta-v1 .bh-cta-hook    { color: var(--_blue-400); }
  .bh-cta-v1 .bh-cta-promise { color: #e2e8f0; }
  .bh-cta-v1 .bh-cta-usp     { color: #94a3b8; }
  .bh-cta-v1 .bh-cta-btn     { background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3); }

  .bh-cta-v2 {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
  }
  .bh-cta-v2 .bh-cta-btn { background: #e2e8f0; color: #1e3a5f; }

  .bh-cta-v3 { background: rgba(30,58,95,.3); border-left-color: var(--_blue-400); }
  .bh-cta-v3 .bh-cta-hook    { color: var(--_blue-400); }
  .bh-cta-v3 .bh-cta-promise { color: #e2e8f0; }
  .bh-cta-v3 .bh-cta-usp     { color: #94a3b8; }
  .bh-cta-v3 .bh-cta-btn     { background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3); }

  .bh-cta-v4 { background: #1e293b; border-color: #334155; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
  .bh-cta-v4-action { background: rgba(30,58,95,.4); border-left-color: #334155; }
  .bh-cta-v4 .bh-cta-hook    { color: var(--_blue-400); }
  .bh-cta-v4 .bh-cta-promise { color: #e2e8f0; }
  .bh-cta-v4 .bh-cta-usp     { color: #94a3b8; }
  .bh-cta-v4-hint             { color: #64748b; }
  .bh-cta-v4 .bh-cta-btn     { background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3); }

  .bh-cta-v5 { background: #1e293b; border-color: #334155; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
  .bh-cta-v5::before { background: linear-gradient(135deg, #334155, transparent 50%, #1e3a5f); }
  .bh-cta-icon      { background: rgba(30,58,95,.5); }
  .bh-cta-icon svg  { color: var(--_blue-400); }
  .bh-cta-v5 .bh-cta-hook    { color: var(--_blue-400); }
  .bh-cta-v5 .bh-cta-promise { color: #e2e8f0; }
  .bh-cta-v5 .bh-cta-usp     { color: #94a3b8; }
  .bh-cta-v5 .bh-cta-btn     { background: var(--_blue-500); box-shadow: 0 4px 16px rgba(59,130,246,.3); }
}

/* Wenn das Theme .dark-mode auf body hat, übersteuert das prefers-color-scheme.
   Die body:not(.dark-mode) Selektoren sorgen dafür, dass Light-Mode explizit bleibt. */
body:not(.dark-mode) .bh-cta-v1 { background: var(--_white); border-color: var(--_blue-200); }
body:not(.dark-mode) .bh-cta-v1 .bh-cta-hook    { color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v1 .bh-cta-promise { color: var(--_gray-900); }
body:not(.dark-mode) .bh-cta-v1 .bh-cta-usp     { color: var(--_gray-500); }
body:not(.dark-mode) .bh-cta-v1 .bh-cta-btn     { background: var(--_blue); box-shadow: 0 4px 16px rgba(37,99,235,.25); }

body:not(.dark-mode) .bh-cta-v2 { background: linear-gradient(135deg, var(--_blue-600) 0%, var(--_blue-900) 100%); }
body:not(.dark-mode) .bh-cta-v2 .bh-cta-btn { background: #fff; color: var(--_blue-700); }

body:not(.dark-mode) .bh-cta-v3 { background: var(--_blue-50); border-left-color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v3 .bh-cta-hook    { color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v3 .bh-cta-promise { color: var(--_gray-900); }
body:not(.dark-mode) .bh-cta-v3 .bh-cta-usp     { color: var(--_gray-500); }
body:not(.dark-mode) .bh-cta-v3 .bh-cta-btn     { background: var(--_blue); }

body:not(.dark-mode) .bh-cta-v4 { background: var(--_white); border-color: var(--_gray-200); }
body:not(.dark-mode) .bh-cta-v4-action { background: var(--_blue-50); border-left-color: var(--_blue-100); }
body:not(.dark-mode) .bh-cta-v4 .bh-cta-hook    { color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v4 .bh-cta-promise { color: var(--_gray-900); }
body:not(.dark-mode) .bh-cta-v4 .bh-cta-usp     { color: var(--_gray-500); }
body:not(.dark-mode) .bh-cta-v4 .bh-cta-btn     { background: var(--_blue); }

body:not(.dark-mode) .bh-cta-v5 { background: var(--_white); border-color: var(--_blue-100); }
body:not(.dark-mode) .bh-cta-icon { background: var(--_blue-50); }
body:not(.dark-mode) .bh-cta-icon svg { color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v5 .bh-cta-hook    { color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v5 .bh-cta-promise { color: var(--_gray-900); }
body:not(.dark-mode) .bh-cta-v5 .bh-cta-usp     { color: var(--_gray-500); }
body:not(.dark-mode) .bh-cta-v5 .bh-cta-btn     { background: var(--_blue); }

/* V6 – Kachel: Dark Mode */
.dark-mode .bh-cta-v6-inner,
.dark .bh-cta-v6-inner,
[data-theme="dark"] .bh-cta-v6-inner { background: #1c1c24; }
.dark-mode .bh-cta-v6:hover .bh-cta-v6-inner,
.dark .bh-cta-v6:hover .bh-cta-v6-inner,
[data-theme="dark"] .bh-cta-v6:hover .bh-cta-v6-inner { background: #23232e; }
.dark-mode .bh-cta-v6-glow,
.dark .bh-cta-v6-glow,
[data-theme="dark"] .bh-cta-v6-glow { opacity: .3; }
.dark-mode .bh-cta-v6:hover .bh-cta-v6-glow,
.dark .bh-cta-v6:hover .bh-cta-v6-glow,
[data-theme="dark"] .bh-cta-v6:hover .bh-cta-v6-glow { opacity: .7; }
.dark-mode .bh-cta-v6-titel,
.dark .bh-cta-v6-titel,
[data-theme="dark"] .bh-cta-v6-titel { color: #e2e8f0; }
.dark-mode .bh-cta-v6-text,
.dark .bh-cta-v6-text,
[data-theme="dark"] .bh-cta-v6-text { color: #94a3b8; }
.dark-mode .bh-cta-v6-icon,
.dark .bh-cta-v6-icon,
[data-theme="dark"] .bh-cta-v6-icon { background: rgba(37,99,235,.15); color: var(--_blue-400); }
.dark-mode .bh-cta-v6-badge,
.dark .bh-cta-v6-badge,
[data-theme="dark"] .bh-cta-v6-badge { background: var(--_blue-500); }
.dark-mode .bh-cta-v6-btn,
.dark .bh-cta-v6-btn,
[data-theme="dark"] .bh-cta-v6-btn { background: rgba(37,99,235,.15); color: var(--_blue-400); }
.dark-mode .bh-cta-v6:hover .bh-cta-v6-btn,
.dark .bh-cta-v6:hover .bh-cta-v6-btn,
[data-theme="dark"] .bh-cta-v6:hover .bh-cta-v6-btn { background: var(--_blue-500); color: #fff; }

/* V6 Dunkel-Variante in Dark Mode */
.dark-mode .bh-cta-v6--dunkel .bh-cta-v6-inner,
.dark .bh-cta-v6--dunkel .bh-cta-v6-inner,
[data-theme="dark"] .bh-cta-v6--dunkel .bh-cta-v6-inner { background: #0f1a2e; }
.dark-mode .bh-cta-v6--dunkel:hover .bh-cta-v6-inner,
.dark .bh-cta-v6--dunkel:hover .bh-cta-v6-inner,
[data-theme="dark"] .bh-cta-v6--dunkel:hover .bh-cta-v6-inner { background: #182640; }

/* V6 Dezent-Variante in Dark Mode */
.dark-mode .bh-cta-v6--dezent .bh-cta-v6-inner,
.dark .bh-cta-v6--dezent .bh-cta-v6-inner,
[data-theme="dark"] .bh-cta-v6--dezent .bh-cta-v6-inner { background: #1c1c24; }
.dark-mode .bh-cta-v6--dezent .bh-cta-v6-icon,
.dark .bh-cta-v6--dezent .bh-cta-v6-icon,
[data-theme="dark"] .bh-cta-v6--dezent .bh-cta-v6-icon { background: #282832; }
.dark-mode .bh-cta-v6--dezent .bh-cta-v6-btn,
.dark .bh-cta-v6--dezent .bh-cta-v6-btn,
[data-theme="dark"] .bh-cta-v6--dezent .bh-cta-v6-btn { background: #282832; }

/* prefers-color-scheme dark fallback for V6 */
@media (prefers-color-scheme: dark) {
  .bh-cta-v6-inner { background: #1c1c24; }
  .bh-cta-v6:hover .bh-cta-v6-inner { background: #23232e; }
  .bh-cta-v6-glow { opacity: .3; }
  .bh-cta-v6:hover .bh-cta-v6-glow { opacity: .7; }
  .bh-cta-v6-titel { color: #e2e8f0; }
  .bh-cta-v6-text  { color: #94a3b8; }
  .bh-cta-v6-icon  { background: rgba(37,99,235,.15); color: var(--_blue-400); }
  .bh-cta-v6-badge { background: var(--_blue-500); }
  .bh-cta-v6-btn   { background: rgba(37,99,235,.15); color: var(--_blue-400); }
  .bh-cta-v6:hover .bh-cta-v6-btn { background: var(--_blue-500); color: #fff; }
}

/* body:not(.dark-mode) overrides for V6 – keep light when theme is light */
body:not(.dark-mode) .bh-cta-v6-inner { background: var(--_white, #fff); }
body:not(.dark-mode) .bh-cta-v6-glow  { opacity: .45; }
body:not(.dark-mode) .bh-cta-v6-titel { color: var(--_gray-900); }
body:not(.dark-mode) .bh-cta-v6-text  { color: var(--_gray-500); }
body:not(.dark-mode) .bh-cta-v6-icon  { background: var(--_blue-50); color: var(--_blue); }
body:not(.dark-mode) .bh-cta-v6-badge { background: var(--_blue); }
body:not(.dark-mode) .bh-cta-v6-btn   { background: var(--_blue-50); color: var(--_blue); }

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes bhCtaFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bhCtaScaleIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bhCtaSlideRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bhCtaPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37,99,235,.25); }
  50%      { box-shadow: 0 4px 24px rgba(37,99,235,.45); }
}
@keyframes bhCtaIconBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}