/* ==========================================================================
   SCROLLING MODULE FOR BEAVER BUILDER — FRONTEND STYLES
   100% Solid Cards, 10 Presets + None/Custom, 5 Badge Shapes & Design Tab Overrides
   ========================================================================== */.bb-scrolling-module-wrapper{
  position: relative;
  width: 100%;
  /* no font-family: theme typography applies (K10) */
  color: var(--bb-text-muted, #94a3b8);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bb-bg, #000000);
  transition: background-color 0.3s ease, color 0.3s ease;
}.bb-scrolling-module-wrapper *, .bb-scrolling-module-wrapper *::before, .bb-scrolling-module-wrapper *::after{
  box-sizing: border-box;
}

/* ==========================================================================
   10 THEME PRESETS + NONE / CUSTOM
   ========================================================================== */

/* 00: None / Custom (Solid Neutral Dark Canvas / Customizable) */.bb-scrolling-module-wrapper.theme-none{
  --bb-card-bg: #111827;
  --bb-surface: #1f2937;
  --bb-card-border: #1f2937;
  --bb-text-heading: #ffffff;
  --bb-text-subtitle: #38bdf8;
  --bb-text-muted: #94a3b8;
  --bb-accent-default: #38bdf8;
  --bb-badge-bg: #1f2937;
  --bb-badge-text: #38bdf8;
  --bb-badge-border: #38bdf8;
  --bb-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

/* 01: Dark Obsidian (Mobile Refuel Tech) */.bb-scrolling-module-wrapper.theme-dark_obsidian{
  --bb-card-bg: #0e1726;
  --bb-surface: #122036;
  --bb-card-border: rgba(0, 210, 255, 0.18);
  --bb-text-heading: #ffffff;
  --bb-text-subtitle: #00d2ff;
  --bb-text-muted: #94a3b8;
  --bb-accent-default: #00d2ff;
  --bb-badge-bg: rgba(0, 210, 255, 0.12);
  --bb-badge-text: #00d2ff;
  --bb-badge-border: rgba(0, 210, 255, 0.35);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 210, 255, 0.08);
}

/* 02: Warm Earth & Terracotta (Brenda Healing) */.bb-scrolling-module-wrapper.theme-warm_earth{
  --bb-card-bg: #2c231c;
  --bb-surface: #382c23;
  --bb-card-border: rgba(224, 122, 95, 0.22);
  --bb-text-heading: #fdf8f5;
  --bb-text-subtitle: #e07a5f;
  --bb-text-muted: #d4c3b3;
  --bb-accent-default: #e07a5f;
  --bb-badge-bg: rgba(224, 122, 95, 0.15);
  --bb-badge-text: #e07a5f;
  --bb-badge-border: rgba(224, 122, 95, 0.4);
  --bb-shadow: 0 20px 45px -12px rgba(10, 8, 6, 0.7), 0 0 20px rgba(224, 122, 95, 0.1);
}

/* 03: Royal Charcoal & Rose Gold (Coiffeur Oberle) */.bb-scrolling-module-wrapper.theme-luxury_gold{
  --bb-card-bg: #1c1c20;
  --bb-surface: #27272c;
  --bb-card-border: rgba(245, 158, 11, 0.2);
  --bb-text-heading: #ffffff;
  --bb-text-subtitle: #fbbf24;
  --bb-text-muted: #a1a1aa;
  --bb-accent-default: #f59e0b;
  --bb-badge-bg: rgba(245, 158, 11, 0.14);
  --bb-badge-text: #fbbf24;
  --bb-badge-border: rgba(245, 158, 11, 0.4);
  --bb-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.85), 0 0 24px rgba(245, 158, 11, 0.12);
}

/* 04: Pure Clean Light Mode (Modern SaaS / Clean White) */.bb-scrolling-module-wrapper.theme-clean_light{
  --bb-card-bg: #ffffff;
  --bb-surface: #f6f2f5;
  --bb-card-border: rgba(15, 23, 42, 0.1);
  --bb-text-heading: #0f172a;
  --bb-text-subtitle: #0284c7;
  --bb-text-muted: #475569;
  --bb-accent-default: #0284c7;
  --bb-badge-bg: rgba(2, 132, 199, 0.1);
  --bb-badge-text: #0284c7;
  --bb-badge-border: rgba(2, 132, 199, 0.3);
  --bb-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 05: Nordic Frost (Ice Blue & Mint) */.bb-scrolling-module-wrapper.theme-nordic_frost{
  --bb-card-bg: #101f2b;
  --bb-surface: #182e3f;
  --bb-card-border: rgba(45, 212, 191, 0.2);
  --bb-text-heading: #f0fdfa;
  --bb-text-subtitle: #2dd4bf;
  --bb-text-muted: #99f6e4;
  --bb-accent-default: #2dd4bf;
  --bb-badge-bg: rgba(45, 212, 191, 0.12);
  --bb-badge-text: #2dd4bf;
  --bb-badge-border: rgba(45, 212, 191, 0.35);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.7), 0 0 20px rgba(45, 212, 191, 0.1);
}

/* 06: Midnight Velvet & Neon Ultraviolet */.bb-scrolling-module-wrapper.theme-midnight_neon{
  --bb-card-bg: #190e30;
  --bb-surface: #241445;
  --bb-card-border: rgba(168, 85, 247, 0.25);
  --bb-text-heading: #faf5ff;
  --bb-text-subtitle: #c084fc;
  --bb-text-muted: #d8b4fe;
  --bb-accent-default: #a855f7;
  --bb-badge-bg: rgba(168, 85, 247, 0.15);
  --bb-badge-text: #c084fc;
  --bb-badge-border: rgba(168, 85, 247, 0.4);
  --bb-shadow: 0 22px 50px -12px rgba(13, 7, 26, 0.9), 0 0 24px rgba(168, 85, 247, 0.15);
}

/* 07: Deep Botanical & Sage Emerald */.bb-scrolling-module-wrapper.theme-emerald_sage{
  --bb-card-bg: #0e2e22;
  --bb-surface: #143d2e;
  --bb-card-border: rgba(16, 185, 129, 0.22);
  --bb-text-heading: #ecfdf5;
  --bb-text-subtitle: #34d399;
  --bb-text-muted: #a7f3d0;
  --bb-accent-default: #10b981;
  --bb-badge-bg: rgba(16, 185, 129, 0.14);
  --bb-badge-text: #34d399;
  --bb-badge-border: rgba(16, 185, 129, 0.35);
  --bb-shadow: 0 20px 45px -12px rgba(7, 26, 19, 0.8), 0 0 20px rgba(16, 185, 129, 0.1);
}

/* 08: Sunset Crimson & Amber Flare */.bb-scrolling-module-wrapper.theme-sunset_aurora{
  --bb-card-bg: #2a0f1d;
  --bb-surface: #3b1529;
  --bb-card-border: rgba(244, 63, 94, 0.25);
  --bb-text-heading: #fff1f2;
  --bb-text-subtitle: #fb7185;
  --bb-text-muted: #fecdd3;
  --bb-accent-default: #f43f5e;
  --bb-badge-bg: rgba(244, 63, 94, 0.15);
  --bb-badge-text: #fb7185;
  --bb-badge-border: rgba(244, 63, 94, 0.4);
  --bb-shadow: 0 22px 50px -12px rgba(24, 9, 16, 0.85), 0 0 24px rgba(244, 63, 94, 0.12);
}

/* 09: Monolithic Graphite & Titanium Silver */.bb-scrolling-module-wrapper.theme-monochrome_steel{
  --bb-card-bg: #27272a;
  --bb-surface: #3f3f46;
  --bb-card-border: rgba(255, 255, 255, 0.16);
  --bb-text-heading: #ffffff;
  --bb-text-subtitle: #e4e4e7;
  --bb-text-muted: #d4d4d8;
  --bb-accent-default: #e4e4e7;
  --bb-badge-bg: rgba(255, 255, 255, 0.1);
  --bb-badge-text: #f4f4f5;
  --bb-badge-border: rgba(255, 255, 255, 0.3);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.7);
}

/* 10: Champagne Silk & Warm Alabaster (Luxury Light) */.bb-scrolling-module-wrapper.theme-champagne_silk{
  --bb-card-bg: #ffffff;
  --bb-surface: #f6f2f5;
  --bb-card-border: rgba(180, 83, 9, 0.14);
  --bb-text-heading: #292524;
  --bb-text-subtitle: #b45309;
  --bb-text-muted: #57534e;
  --bb-accent-default: #b45309;
  --bb-badge-bg: rgba(180, 83, 9, 0.1);
  --bb-badge-text: #b45309;
  --bb-badge-border: rgba(180, 83, 9, 0.28);
  --bb-shadow: 0 16px 36px -10px rgba(180, 83, 9, 0.08), 0 1px 3px rgba(180, 83, 9, 0.04);
}

/* ==========================================================================
   THE 5 BADGE SHAPE PRESETS
   ========================================================================== */.bb-badges-hidden .bb-scroll-badge, .bb-badges-hidden .bb-card-badge{
  display: none !important;
}.bb-scroll-badge, .bb-card-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* no font-family: theme typography applies (K10) */
  background: var(--bb-badge-bg, rgba(0, 210, 255, 0.12));
  color: var(--bb-badge-text, var(--bb-accent-default, #00d2ff));
  border: 1px solid var(--bb-badge-border, rgba(0, 210, 255, 0.35));
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  user-select: none;
}

/* Shape 1: Classic Rounded Pill */.bb-badge-shape-pill{
  border-radius: 999px !important;
  padding: 5px 16px;
  font-size: var(--bb-badge-size, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Shape 2: Tech Bracket [ HUD ] */.bb-badge-shape-bracket{
  border-radius: 3px !important;
  padding: 4px 14px;
  font-size: var(--bb-badge-size, 0.74rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  background: var(--bb-badge-bg, rgba(0, 210, 255, 0.12));
  border: 1px solid var(--bb-badge-border, rgba(0, 210, 255, 0.35));
  border-left: 3px solid var(--bb-accent-default, #00d2ff);
  border-right: 3px solid var(--bb-accent-default, #00d2ff);
}.bb-badge-shape-bracket::before{
  content: '[';
  font-weight: 900;
  color: var(--bb-accent-default, #00d2ff);
  margin-right: 4px;
}.bb-badge-shape-bracket::after{
  content: ']';
  font-weight: 900;
  color: var(--bb-accent-default, #00d2ff);
  margin-left: 4px;
}

/* Shape 3: Minimalist Pulsing Status Dot */.bb-badge-shape-dot{
  border-radius: 8px !important;
  padding: 5px 14px 5px 10px;
  font-size: var(--bb-badge-size, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}.bb-badge-shape-dot::before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: bbBadgePulse 1.8s infinite ease-in-out;
}@keyframes bbBadgePulse{
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* Shape 4: Dynamic Velocity Slant */.bb-badge-shape-slanted{
  transform: skewX(-12deg);
  border-radius: 4px !important;
  padding: 5px 16px;
  font-size: var(--bb-badge-size, 0.74rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.2);
}.bb-badge-shape-slanted > *{
  transform: skewX(12deg);
  display: inline-block;
}

/* Shape 5: Frosted Liquid Glassmorphism */.bb-badge-shape-glass{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px !important;
  padding: 6px 16px;
  font-size: var(--bb-badge-size, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   THE 6 CARD SHAPE PRESETS (KACHELFORMEN)
   ========================================================================== */.bb-scrolling-module-wrapper{
  --card-radius: 20px;
}.bb-scrolling-module-wrapper.card-shape-rounded{
  --card-radius: 20px;
}.bb-scrolling-module-wrapper.card-shape-sharp{
  --card-radius: 4px;
}.bb-scrolling-module-wrapper.card-shape-pebble{
  --card-radius: 36px;
}.bb-scrolling-module-wrapper.card-shape-diagonal{
  --card-radius: 34px 8px 34px 8px;
}.bb-scrolling-module-wrapper.card-shape-organic{
  --card-radius: 8px 38px 8px 38px;
}.bb-scrolling-module-wrapper.card-shape-square{
  --card-radius: 0;
}

/* Universal clipping & border radius — ONLY the outer card SHELL wrappers get the shape.
   Sub-elements like .bb-card-banner, .bb-card-body, .bb-card-img etc. must NOT get
   border-radius here — they rely on parent overflow:hidden for natural clipping. */.bb-scrolling-module-wrapper .bb-card-deck-item, .bb-scrolling-module-wrapper .bb-stream-card, .bb-scrolling-module-wrapper .bb-arc-card, .bb-scrolling-module-wrapper .bb-slot-card, .bb-scrolling-module-wrapper .bb-rev-card, .bb-scrolling-module-wrapper .bb-stack-card{
  border-radius: var(--card-radius) !important;
  overflow: hidden !important;
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */.bb-scroll-section-header{
  text-align: center;
  padding: 60px 24px 20px;
  max-width: 900px;
  margin: 0 auto;
}.bb-scroll-header-badge-row{
  width: 100%;
  margin-bottom: 12px;
}.bb-scroll-header-badge-row .bb-scroll-badge{
  display: inline-flex;
}.bb-scroll-header-title{
  /* no font-family: theme typography applies (K10) */
  font-size: var(--bb-header-title-size, clamp(2rem, 4vw, 3.2rem));
  font-weight: 800;
  line-height: 1.15;
  color: var(--bb-header-title, var(--bb-text-heading, #ffffff)) !important;
  margin: 16px 0 14px;
  letter-spacing: -0.02em;
}.bb-scroll-header-desc{
  font-size: var(--bb-header-desc-size, 1.05rem);
  line-height: 1.6;
  color: var(--bb-header-desc, var(--bb-text-muted, #94a3b8)) !important;
  margin: 0;
}

/* Viewport Pin Container */.bb-scroll-viewport{
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Beaver Builder editor: no pin viewport — prevents scroll jumps while editing */

/* Common Solid Card Styling */.bb-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}.bb-card-number{
  /* no font-family: theme typography applies (K10) */
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--bb-text-muted, rgba(255, 255, 255, 0.3));
  opacity: 0.5;
}.bb-card-media{
  margin-bottom: 16px;
}.bb-card-img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0 !important; /* No own radius — parent card overflow:hidden clips top corners */
  display: block;
}.bb-card-icon-box{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--bb-surface, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--bb-card-border, rgba(255, 255, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--card-accent, var(--bb-accent-default, #00d2ff));
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}.bb-card-subtitle{
  display: block;
  font-size: var(--bb-card-subtitle-size, 0.78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-text-subtitle, var(--card-accent, var(--bb-accent-default, #00d2ff)));
  margin-bottom: 6px;
}.bb-card-title{
  /* no font-family: theme typography applies (K10) */
  font-size: var(--bb-card-title-size, 1.5rem);
  font-weight: 700;
  color: var(--bb-text-heading, #ffffff);
  margin: 0 0 10px;
  line-height: 1.25;
}.bb-card-desc{
  font-size: var(--bb-card-desc-size, 0.92rem);
  line-height: 1.6;
  color: var(--bb-text-muted, #94a3b8);
  margin: 0 0 20px;
}.bb-card-action{
  margin-top: auto;
}.bb-card-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bb-surface, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--bb-card-border, rgba(255, 255, 255, 0.15));
  color: var(--bb-text-heading, #ffffff);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: var(--bb-button-text-size, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}.bb-card-btn:hover{
  background: var(--card-accent, var(--bb-accent-default, #00d2ff));
  color: #000000;
  border-color: var(--card-accent, var(--bb-accent-default, #00d2ff));
  box-shadow: 0 4px 16px rgba(0, 210, 255, 0.3);
}

/* ==========================================================================
   EFFECT 01: PRECISION KINETIC HORIZON
   ========================================================================== */.bb-scroll-viewport.effect-1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

/* ==========================================================================
   EFFECT 02: SKEWED VELOCITY RUNWAY
   ========================================================================== */

/* counter-skew removed */.bb-card-slant-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}.bb-card-slant-top i{
  font-size: 1.6rem;
  color: var(--card-accent, var(--bb-accent-default, #00d2ff));
}.bb-card-mini-img{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}

/* ==========================================================================
   EFFECT 03: 3D CARD DECK CASCADE
   ========================================================================== */.bb-scroll-viewport.effect-3{
  perspective: 1400px;
}.bb-banner-icon{
  font-size: 2.2rem;
  color: #ffffff;
}

/* ==========================================================================
   EFFECT 04: DUAL COUNTER-STREAMS
   ========================================================================== */.bb-pill-text strong{
  display: block;
  font-size: 1rem;
  color: var(--bb-text-heading, #ffffff);
}.bb-pill-text span{
  font-size: 0.8rem;
  color: var(--bb-text-muted, #94a3b8);
}

/* ==========================================================================
   EFFECT 05: ARCED CURVED HORIZON
   ========================================================================== */.bb-scroll-viewport.effect-5{
  justify-content: flex-start;
  align-items: center;
}

/* ==========================================================================
   EFFECT 06: BANDIT SLOT REELS
   ========================================================================== */.bb-slot-window{
  height: 460px;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), inset 0 0 35px rgba(0, 0, 0, 0.9);
  padding: 12px;
}.bb-slot-card{
  height: 436px;
  background: var(--bb-card-bg, #0e1726);
  border: 1px solid var(--bb-card-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--card-radius, 20px);
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: var(--bb-shadow);
}.bb-slot-card.is-target{
  border: 2px solid rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.35);
}.bb-slot-card .bb-card-banner{
  height: 160px;
  flex-shrink: 0;
}.bb-slot-card .bb-card-body{
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}.bb-slot-card .bb-card-desc{
  margin-bottom: 0;
}

/* ==========================================================================
   EFFECT 08: 3D REVOLVER SNAP
   ========================================================================== */.bb-scroll-viewport.effect-8{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
}.bb-fx8-revolver{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  width: 100%;
}.bb-revolver-stage{
  position: relative;
  width: 440px;
  max-width: 90vw;
  height: 490px;
  transform-style: preserve-3d;
  margin-bottom: 24px;
}.bb-rev-card{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bb-card-bg, #0e1726) !important;
  border: 1px solid var(--bb-card-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--card-radius, 26px);
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}.bb-rev-card.is-active{
  border-color: var(--card-accent, var(--bb-accent-default, #00d2ff));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 25px var(--card-accent, rgba(0, 210, 255, 0.3));
}.bb-rev-card .bb-card-banner{
  height: 190px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}.bb-rev-card .bb-card-body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--bb-card-bg, #0e1726);
}.bb-revolver-indicators{
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}.bb-rev-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}.bb-rev-dot.active{
  width: 28px;
  background: var(--bb-accent-default, #00d2ff);
  box-shadow: 0 0 16px var(--bb-accent-default, #00d2ff);
}

/* ==========================================================================
   EFFECT 09: SPLIT CURTAIN REVEAL (full-bleed split screen — matches HTML preview)
   ========================================================================== */.bb-scroll-viewport.effect-9{
  display: block;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}.bb-card-badge-row{
  width: 100%;
  margin-bottom: 8px;
}.bb-card-badge-row .bb-card-badge, .bb-card-head .bb-card-badge{
  display: inline-flex;
}.bb-pill-text{
  width: 100%;
}

/* ==========================================================================
   EFFECT 10: PERSPECTIVE STACK TRANSFER
   ========================================================================== */

/* Responsive adjustments */

/* ==========================================================================
   CARD BANNER STYLING (FULL BLEED UPPER HALF)
   ========================================================================== */.bb-card-banner{
  height: 190px;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-accent, #1e293b);
  /* NO border-radius here! The parent card wrapper's overflow:hidden clips the top
     corners to the card shape. The banner's bottom edge stays perfectly straight. */
  border-radius: 0 !important;
  flex-shrink: 0;
}.bb-card-banner-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important; /* Image must NOT get any radius — parent overflow:hidden handles clipping */
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}.bb-card-banner::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 2;
  pointer-events: none;
}.bb-card-banner-num{
  position: absolute;
  left: 20px;
  bottom: 12px;
  z-index: 3;
  /* no font-family: theme typography applies (K10) */
  font-size: var(--bb-number-size, 2.2rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.85);
}.bb-card-banner .bb-card-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}.bb-card-banner-icon{
  position: relative;
  z-index: 2;
  font-size: 3rem;
  color: #fff;
}.bb-slot-card:hover .bb-card-banner-img{
  transform: scale(1.08);
}.bb-card-body{
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}.bb-card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bb-card-border, rgba(255, 255, 255, 0.08));
}

/* ==========================================================================
   EFFECT 02: DIAGONAL RUNWAY PLANE & SKEW
   ========================================================================== */

/* Bild & Banner bleiben in der Kachel-Neigung (-3.5deg) */

/* Nur Text & Ziffern werden entzerrt, damit sie gerade lesbar sind */

/* ==========================================================================
   EFFECT 07: ACCORDION STRETCH HORIZON (STACKED: UPPER IMAGE / LOWER CONTENT)
   ========================================================================== */.bb-scroll-viewport.effect-7{
  display: block;
  padding: 0;
  overflow: hidden;
}.bb-spine-num{
  /* no font-family: theme typography applies (K10) */
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--card-accent, var(--bb-accent-default, #00d2ff));
}.bb-spine-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* no font-family: theme typography applies (K10) */
  font-size: 1rem;
  font-weight: 700;
  color: var(--bb-text-muted, #94a3b8);
  letter-spacing: 0.05em;
  white-space: nowrap;
}.bb-spine-mark{
  color: var(--card-accent, var(--bb-accent-default, #00d2ff));
}

/* ==========================================================================
   DESIGNER PALETTES (20, from Easy Flow Hero designer palettes)
   [bg, accent, text] per palette
   ========================================================================== */.bb-scrolling-module-wrapper.theme-ochre-studio{
  --bb-card-bg: color-mix(in srgb, #d98835 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #d98835 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #ffffff 35%, transparent);
  --bb-text-heading: #ffffff;
  --bb-text-subtitle: #ffffff;
  --bb-text-muted: color-mix(in srgb, #ffffff 62%, #d98835);
  --bb-accent-default: #ffffff;
  --bb-badge-bg: color-mix(in srgb, #ffffff 14%, transparent);
  --bb-badge-text: #ffffff;
  --bb-badge-border: color-mix(in srgb, #ffffff 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-indigo-dark{
  --bb-card-bg: color-mix(in srgb, #090d16 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #090d16 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #6366f1 35%, transparent);
  --bb-text-heading: #f8fafc;
  --bb-text-subtitle: #6366f1;
  --bb-text-muted: color-mix(in srgb, #f8fafc 62%, #090d16);
  --bb-accent-default: #6366f1;
  --bb-badge-bg: color-mix(in srgb, #6366f1 14%, transparent);
  --bb-badge-text: #6366f1;
  --bb-badge-border: color-mix(in srgb, #6366f1 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-emerald-forest{
  --bb-card-bg: color-mix(in srgb, #145c54 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #145c54 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #10b981 35%, transparent);
  --bb-text-heading: #f4faf7;
  --bb-text-subtitle: #10b981;
  --bb-text-muted: color-mix(in srgb, #f4faf7 62%, #145c54);
  --bb-accent-default: #10b981;
  --bb-badge-bg: color-mix(in srgb, #10b981 14%, transparent);
  --bb-badge-text: #10b981;
  --bb-badge-border: color-mix(in srgb, #10b981 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-amber-gold{
  --bb-card-bg: color-mix(in srgb, #18181b 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #18181b 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #f59e0b 35%, transparent);
  --bb-text-heading: #fffbeb;
  --bb-text-subtitle: #f59e0b;
  --bb-text-muted: color-mix(in srgb, #fffbeb 62%, #18181b);
  --bb-accent-default: #f59e0b;
  --bb-badge-bg: color-mix(in srgb, #f59e0b 14%, transparent);
  --bb-badge-text: #f59e0b;
  --bb-badge-border: color-mix(in srgb, #f59e0b 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-ocean-sky{
  --bb-card-bg: color-mix(in srgb, #0f172a 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #0f172a 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #38bdf8 35%, transparent);
  --bb-text-heading: #f0f9ff;
  --bb-text-subtitle: #38bdf8;
  --bb-text-muted: color-mix(in srgb, #f0f9ff 62%, #0f172a);
  --bb-accent-default: #38bdf8;
  --bb-badge-bg: color-mix(in srgb, #38bdf8 14%, transparent);
  --bb-badge-text: #38bdf8;
  --bb-badge-border: color-mix(in srgb, #38bdf8 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-botanical-retro{
  --bb-card-bg: color-mix(in srgb, #576238 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #576238 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #FFD95D 35%, transparent);
  --bb-text-heading: #F0EADC;
  --bb-text-subtitle: #FFD95D;
  --bb-text-muted: color-mix(in srgb, #F0EADC 62%, #576238);
  --bb-accent-default: #FFD95D;
  --bb-badge-bg: color-mix(in srgb, #FFD95D 14%, transparent);
  --bb-badge-text: #FFD95D;
  --bb-badge-border: color-mix(in srgb, #FFD95D 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-urban-horizon{
  --bb-card-bg: color-mix(in srgb, #EE6C29 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #EE6C29 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #282B2B 35%, transparent);
  --bb-text-heading: #7AA6B3;
  --bb-text-subtitle: #282B2B;
  --bb-text-muted: color-mix(in srgb, #7AA6B3 62%, #EE6C29);
  --bb-accent-default: #282B2B;
  --bb-badge-bg: color-mix(in srgb, #282B2B 14%, transparent);
  --bb-badge-text: #282B2B;
  --bb-badge-border: color-mix(in srgb, #282B2B 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-earthy-studio{
  --bb-card-bg: color-mix(in srgb, #CF8852 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #CF8852 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #E8E7E3 35%, transparent);
  --bb-text-heading: #525333;
  --bb-text-subtitle: #E8E7E3;
  --bb-text-muted: color-mix(in srgb, #525333 62%, #CF8852);
  --bb-accent-default: #E8E7E3;
  --bb-badge-bg: color-mix(in srgb, #E8E7E3 14%, transparent);
  --bb-badge-text: #E8E7E3;
  --bb-badge-border: color-mix(in srgb, #E8E7E3 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-coastal-classic{
  --bb-card-bg: color-mix(in srgb, #162660 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #162660 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #D0E6FD 35%, transparent);
  --bb-text-heading: #F1E4D1;
  --bb-text-subtitle: #D0E6FD;
  --bb-text-muted: color-mix(in srgb, #F1E4D1 62%, #162660);
  --bb-accent-default: #D0E6FD;
  --bb-badge-bg: color-mix(in srgb, #D0E6FD 14%, transparent);
  --bb-badge-text: #D0E6FD;
  --bb-badge-border: color-mix(in srgb, #D0E6FD 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-mediterranean-warmth{
  --bb-card-bg: color-mix(in srgb, #6F6134 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #6F6134 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #E1C68F 35%, transparent);
  --bb-text-heading: #FAE7C9;
  --bb-text-subtitle: #E1C68F;
  --bb-text-muted: color-mix(in srgb, #FAE7C9 62%, #6F6134);
  --bb-accent-default: #E1C68F;
  --bb-badge-bg: color-mix(in srgb, #E1C68F 14%, transparent);
  --bb-badge-text: #E1C68F;
  --bb-badge-border: color-mix(in srgb, #E1C68F 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-floral-meadow{
  --bb-card-bg: color-mix(in srgb, #3D402F 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #3D402F 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #FCF9D8 35%, transparent);
  --bb-text-heading: #C99FCD;
  --bb-text-subtitle: #FCF9D8;
  --bb-text-muted: color-mix(in srgb, #C99FCD 62%, #3D402F);
  --bb-accent-default: #FCF9D8;
  --bb-badge-bg: color-mix(in srgb, #FCF9D8 14%, transparent);
  --bb-badge-text: #FCF9D8;
  --bb-badge-border: color-mix(in srgb, #FCF9D8 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-vintage-mint-berry{
  --bb-card-bg: color-mix(in srgb, #69A481 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #69A481 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #E7EDEB 35%, transparent);
  --bb-text-heading: #7C1F31;
  --bb-text-subtitle: #E7EDEB;
  --bb-text-muted: color-mix(in srgb, #7C1F31 62%, #69A481);
  --bb-accent-default: #E7EDEB;
  --bb-badge-bg: color-mix(in srgb, #E7EDEB 14%, transparent);
  --bb-badge-text: #E7EDEB;
  --bb-badge-border: color-mix(in srgb, #E7EDEB 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-nordic-fjord{
  --bb-card-bg: color-mix(in srgb, #1A3038 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #1A3038 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #9FB8AD 35%, transparent);
  --bb-text-heading: #F4F6F0;
  --bb-text-subtitle: #9FB8AD;
  --bb-text-muted: color-mix(in srgb, #F4F6F0 62%, #1A3038);
  --bb-accent-default: #9FB8AD;
  --bb-badge-bg: color-mix(in srgb, #9FB8AD 14%, transparent);
  --bb-badge-text: #9FB8AD;
  --bb-badge-border: color-mix(in srgb, #9FB8AD 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-terracotta-sunset{
  --bb-card-bg: color-mix(in srgb, #C85A32 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #C85A32 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #E5A93C 35%, transparent);
  --bb-text-heading: #F7EFE3;
  --bb-text-subtitle: #E5A93C;
  --bb-text-muted: color-mix(in srgb, #F7EFE3 62%, #C85A32);
  --bb-accent-default: #E5A93C;
  --bb-badge-bg: color-mix(in srgb, #E5A93C 14%, transparent);
  --bb-badge-text: #E5A93C;
  --bb-badge-border: color-mix(in srgb, #E5A93C 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-midnight-velvet{
  --bb-card-bg: color-mix(in srgb, #2D1E2F 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #2D1E2F 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #9B7285 35%, transparent);
  --bb-text-heading: #F3E8DC;
  --bb-text-subtitle: #9B7285;
  --bb-text-muted: color-mix(in srgb, #F3E8DC 62%, #2D1E2F);
  --bb-accent-default: #9B7285;
  --bb-badge-bg: color-mix(in srgb, #9B7285 14%, transparent);
  --bb-badge-text: #9B7285;
  --bb-badge-border: color-mix(in srgb, #9B7285 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-forest-sanctuary{
  --bb-card-bg: color-mix(in srgb, #273629 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #273629 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #C89947 35%, transparent);
  --bb-text-heading: #E6EDE4;
  --bb-text-subtitle: #C89947;
  --bb-text-muted: color-mix(in srgb, #E6EDE4 62%, #273629);
  --bb-accent-default: #C89947;
  --bb-badge-bg: color-mix(in srgb, #C89947 14%, transparent);
  --bb-badge-text: #C89947;
  --bb-badge-border: color-mix(in srgb, #C89947 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-matcha-peach{
  --bb-card-bg: color-mix(in srgb, #405538 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #405538 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #F2A882 35%, transparent);
  --bb-text-heading: #FCF6EC;
  --bb-text-subtitle: #F2A882;
  --bb-text-muted: color-mix(in srgb, #FCF6EC 62%, #405538);
  --bb-accent-default: #F2A882;
  --bb-badge-bg: color-mix(in srgb, #F2A882 14%, transparent);
  --bb-badge-text: #F2A882;
  --bb-badge-border: color-mix(in srgb, #F2A882 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-riviera-twilight{
  --bb-card-bg: color-mix(in srgb, #193652 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #193652 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #DF7658 35%, transparent);
  --bb-text-heading: #F6EEE4;
  --bb-text-subtitle: #DF7658;
  --bb-text-muted: color-mix(in srgb, #F6EEE4 62%, #193652);
  --bb-accent-default: #DF7658;
  --bb-badge-bg: color-mix(in srgb, #DF7658 14%, transparent);
  --bb-badge-text: #DF7658;
  --bb-badge-border: color-mix(in srgb, #DF7658 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-modern-bauhaus{
  --bb-card-bg: color-mix(in srgb, #1E3354 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #1E3354 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #E59A26 35%, transparent);
  --bb-text-heading: #EDEBE4;
  --bb-text-subtitle: #E59A26;
  --bb-text-muted: color-mix(in srgb, #EDEBE4 62%, #1E3354);
  --bb-accent-default: #E59A26;
  --bb-badge-bg: color-mix(in srgb, #E59A26 14%, transparent);
  --bb-badge-text: #E59A26;
  --bb-badge-border: color-mix(in srgb, #E59A26 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}.bb-scrolling-module-wrapper.theme-velvet-espresso{
  --bb-card-bg: color-mix(in srgb, #342217 86%, #ffffff);
  --bb-surface: color-mix(in srgb, #342217 78%, #ffffff);
  --bb-card-border: color-mix(in srgb, #BF8B4D 35%, transparent);
  --bb-text-heading: #F3EBE0;
  --bb-text-subtitle: #BF8B4D;
  --bb-text-muted: color-mix(in srgb, #F3EBE0 62%, #342217);
  --bb-accent-default: #BF8B4D;
  --bb-badge-bg: color-mix(in srgb, #BF8B4D 14%, transparent);
  --bb-badge-text: #BF8B4D;
  --bb-badge-border: color-mix(in srgb, #BF8B4D 40%, transparent);
  --bb-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.45);
}

/* 6th badge shape: soft rectangle */.bb-scrolling-module-wrapper .bb-scroll-badge.bb-badge-shape-soft, .bb-scrolling-module-wrapper .bb-card-badge.bb-badge-shape-soft{
  border-radius: 10px;
  padding: 5px 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* card geometry overrides (schema cardWidth / cardGap / cardRadius) */