/* ==========================================================
   AI CHAMPIONS — Design System & Styles
   Mobile-first · WCAG AA · Webflow-ready · 8pt Grid
   ========================================================== */


/* ==========================================================
   0. FONTS — Lokal gehostet (DSGVO-konform)
   ========================================================== */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/RedHatDisplay-Variable.woff2') format('woff2');
}


/* ==========================================================
   1. DESIGN TOKENS — PRIMITIVES
   Raw values. Never use directly in components.
   ========================================================== */
:root {
  /* --- Primitive: Colors --- */
  --p-navy-900: #0B0B2C;
  --p-navy-800: #10103A;
  --p-navy-700: #18184E;
  --p-pink-500: #E91E8C;
  --p-pink-400: #FF2D9B;
  --p-pink-300: #FF6BB5;
  --p-purple-600: #7B1FA2;
  --p-purple-500: #9C27B0;
  --p-indigo-500: #3F51B5;
  --p-indigo-400: #5C6BC0;
  --p-white: #FFFFFF;
  --p-gray-50: #F7F7FB;
  --p-gray-100: #EFEFF5;
  --p-gray-200: #E2E2EC;
  --p-gray-400: #6B6B82;          /* A11y fix: was #9898AD (2.83:1 on white). Now 5.18:1 on #FFF, 4.85:1 on #F7F7FB — WCAG AA SC 1.4.3 */
  --p-gray-600: #5C5C75;
  --p-gray-900: #1A1A2E;
  --p-yellow-400: #FBBF24;

  /* --- Primitive: Gradients --- */
  --p-gradient-brand: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  --p-gradient-brand-hover: linear-gradient(135deg, #FF2D9B 0%, #9C27B0 50%, #5C6BC0 100%);
  --p-gradient-subtle: linear-gradient(135deg, rgba(233,30,140,0.08) 0%, rgba(63,81,181,0.08) 100%);

  /* --- Primitive: Typography --- */
  --p-font-family: 'Red Hat Display', sans-serif;

  /* Font Size Scale (0.25rem steps) */
  --p-font-xs: 0.75rem;    /* 12px */
  --p-font-sm: 1rem;       /* 16px */
  --p-font-md: 1.25rem;    /* 20px */
  --p-font-lg: 1.5rem;     /* 24px */
  --p-font-xl: 2.25rem;    /* 36px */
  --p-font-2xl: 2.75rem;   /* 44px */
  --p-font-3xl: 3.5rem;    /* 56px */
  --p-font-4xl: 4.25rem;   /* 68px */
  --p-font-display: 4rem;  /* 64px — decorative numbers */

  /* Font Weight */
  --p-weight-regular: 400;
  --p-weight-medium: 500;
  --p-weight-semibold: 600;
  --p-weight-bold: 700;
  --p-weight-extrabold: 800;
  --p-weight-black: 900;

  /* Line Height */
  --p-leading-none: 1;
  --p-leading-tight: 1.1;
  --p-leading-snug: 1.25;
  --p-leading-normal: 1.5;
  --p-leading-relaxed: 1.7;

  /* Letter Spacing */
  --p-tracking-tighter: -0.03em;
  --p-tracking-tight: -0.02em;
  --p-tracking-normal: 0;
  --p-tracking-wide: 0.04em;
  --p-tracking-wider: 0.06em;
  --p-tracking-widest: 0.1em;

  /* --- Primitive: Spacing (8pt grid, min 4px) --- */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;
  --p-space-12: 48px;
  --p-space-16: 64px;
  --p-space-20: 80px;
  --p-space-24: 96px;
  --p-space-30: 120px;
  --p-space-40: 160px;

  /* --- Primitive: Radius --- */
  --p-radius-sm: 8px;
  --p-radius-md: 16px;
  --p-radius-lg: 24px;
  --p-radius-xl: 32px;
  --p-radius-full: 9999px;

  /* --- Primitive: Easing --- */
  --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Primitive: Shadows --- */
  --p-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.16);
  --p-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
  --p-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
  --p-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.3);
  --p-shadow-glow: 0 4px 24px rgba(233, 30, 140, 0.25);
  --p-shadow-glow-lg: 0 8px 32px rgba(233, 30, 140, 0.35), 0 0 64px rgba(233, 30, 140, 0.1);


  /* ========================================================
     2. DESIGN TOKENS — SEMANTICS
     Contextual. Use these in components.
     ======================================================== */

  /* --- Semantic: Surfaces --- */
  --bg-dark: var(--p-navy-900);
  --bg-dark-elevated: var(--p-navy-800);
  --bg-dark-card: rgba(255, 255, 255, 0.04);
  --bg-dark-card-hover: rgba(255, 255, 255, 0.07);
  --bg-light: var(--p-white);
  --bg-light-subtle: var(--p-gray-50);
  --bg-light-card: var(--p-white);

  /* --- Semantic: Text on Dark --- */
  --text-dark-primary: var(--p-white);
  --text-dark-secondary: rgba(255, 255, 255, 0.72);
  --text-dark-muted: rgba(255, 255, 255, 0.55);  /* A11y fix: was 0.48 (~4.9:1). Now ~6.1:1 on #0B0B2C — WCAG AA SC 1.4.3 */

  /* --- Semantic: Text on Light --- */
  --text-light-primary: var(--p-gray-900);
  --text-light-secondary: var(--p-gray-600);
  --text-light-muted: var(--p-gray-400);

  /* --- Semantic: Brand --- */
  --brand-primary: var(--p-pink-500);
  --brand-primary-bright: var(--p-pink-400);
  --brand-primary-text: #D01A7D;    /* A11y: accessible brand pink for text on light bg — 5.09:1 on #FFF, 4.76:1 on #F7F7FB — WCAG AA SC 1.4.3 */
  --brand-gradient: var(--p-gradient-brand);
  --brand-gradient-hover: var(--p-gradient-brand-hover);
  --brand-gradient-text: linear-gradient(135deg, #E91E8C 0%, #9333EA 50%, #6366F1 100%);  /* A11y: lighter stops for gradient text — 4.6:1 / 3.6:1 / 4.4:1 on #0B0B2C, 4.0:1 / 5.3:1 / 4.4:1 on #FFF — WCAG AA large text */
  --brand-gradient-subtle: var(--p-gradient-subtle);

  /* --- Semantic: Borders --- */
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-dark-hover: rgba(255, 255, 255, 0.16);
  --border-light: var(--p-gray-200);
  --border-light-hover: var(--p-gray-400);
  --border-light-subtle: rgba(0, 0, 0, 0.06);

  /* --- Semantic: Interactive (Buttons) --- */
  --interactive-glass-bg: rgba(255, 255, 255, 0.06);
  --interactive-glass-bg-hover: rgba(255, 255, 255, 0.12);
  --interactive-glass-border: rgba(255, 255, 255, 0.15);
  --interactive-glass-border-hover: rgba(255, 255, 255, 0.3);

  /* --- Semantic: Typography Roles --- */
  --type-display: var(--p-font-2xl);           /* Hero H1 (mobile) */
  --type-h1: clamp(1.75rem, 5vw, 2.75rem);    /* Section H2s */
  --type-h2: var(--p-font-lg);                 /* Card titles, H3 */
  --type-h3: var(--p-font-md);                 /* Sub-headings */
  --type-body: var(--p-font-sm);               /* Body text */
  --type-body-lg: clamp(1rem, 2vw, 1.25rem);  /* Sublines */
  --type-body-sm: 0.875rem;                   /* Small body text */
  --type-caption: var(--p-font-xs);            /* Labels, meta */

  /* --- Semantic: Spacing Roles --- */
  --space-section-y: var(--p-space-24);         /* 96px — section vertical padding */
  --space-section-y-lg: var(--p-space-30);      /* 120px — larger sections */
  --space-header-bottom: var(--p-space-16);     /* 64px — after section headers */
  --space-card-padding: var(--p-space-8) var(--p-space-6);  /* 32px 24px */
  --space-card-gap: var(--p-space-6);           /* 24px — between cards */
  --space-element-gap: var(--p-space-2);        /* 8px — between small elements */
  --space-text-gap: var(--p-space-5);           /* 20px — after headlines */
  --space-group-gap: var(--p-space-8);          /* 32px — between groups */

  /* --- Semantic: Layout --- */
  --layout-container: 1200px;
  --layout-narrow: 856px;
}


/* ==========================================================
   3. RESET & BASE
   ========================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; max-width: 100%; }
body { font-family: var(--p-font-family); font-weight: var(--p-weight-regular); line-height: var(--p-leading-normal); color: var(--text-light-primary); background: var(--bg-light); -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100vw; position: relative; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all 0.4s var(--p-ease-out); }
ul, ol { list-style: none; }
button { font-family: var(--p-font-family); }


/* ==========================================================
   4. TYPOGRAPHY SYSTEM
   ========================================================== */
h1, h2, h3, h4 { font-family: var(--p-font-family); line-height: var(--p-leading-tight); letter-spacing: var(--p-tracking-tighter); }

.section-label { display: inline-flex; align-items: center; gap: var(--p-space-2); font-size: var(--type-caption); font-weight: var(--p-weight-black); text-transform: uppercase; letter-spacing: var(--p-tracking-widest); margin-bottom: var(--p-space-6); position: relative; }
.section-label-pink { color: var(--brand-primary-bright); }
.section-label-dark { color: var(--brand-primary-text); }  /* A11y fix: was --brand-primary (4.18:1 on white). Now 5.09:1 — WCAG AA SC 1.4.3 */

.text-gradient { background: var(--brand-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }


/* ==========================================================
   5. UTILITY: LAYOUT
   ========================================================== */
.skip-link { position: absolute; top: -100%; left: var(--p-space-4); background: var(--brand-primary); color: var(--p-white); padding: var(--p-space-3) var(--p-space-6); border-radius: var(--p-radius-sm); font-weight: var(--p-weight-semibold); z-index: 10000; transition: top 0.4s var(--p-ease-out); }
.skip-link:focus { top: var(--p-space-4); }

.container { width: 100%; max-width: var(--layout-container); margin: 0 auto; padding: 0 var(--p-space-6); }

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


/* ==========================================================
   6. BUTTONS
   ========================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-2); padding: var(--p-space-4) var(--p-space-8); border-radius: var(--p-radius-full); font-family: var(--p-font-family); font-size: var(--type-body); font-weight: var(--p-weight-semibold); cursor: pointer; border: none; white-space: nowrap; line-height: var(--p-leading-snug); position: relative; overflow: hidden; transition: all 0.4s var(--p-ease-out); }
.btn:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); }
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.4s var(--p-ease-spring); }
.btn:hover .btn-icon { transform: translateX(4px); }

.btn-primary { background: var(--brand-gradient); color: var(--text-dark-primary); box-shadow: var(--p-shadow-glow); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--brand-gradient-hover); opacity: 0; transition: opacity 0.4s var(--p-ease-out); border-radius: inherit; }
.btn-primary:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-glow-lg); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(-1px) scale(0.98); }
.btn-primary span, .btn-primary .btn-icon { position: relative; z-index: 1; }

.btn-secondary { background: var(--interactive-glass-bg); color: var(--text-dark-primary); border: 1px solid var(--interactive-glass-border); backdrop-filter: blur(8px); }
.btn-secondary:hover { background: var(--interactive-glass-bg-hover); border-color: var(--interactive-glass-border-hover); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.btn-ghost { background: transparent; color: var(--text-light-primary); border: 2px solid var(--border-light); }
.btn-ghost:hover { background: var(--bg-light-subtle); border-color: var(--text-light-muted); transform: translateY(-2px); }
.btn-lg { padding: var(--p-space-5) var(--p-space-10); font-size: var(--type-body-lg); }


/* ==========================================================
   7. NAVIGATION
   ========================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--p-space-4) 0; transition: background 0.4s var(--p-ease-out), box-shadow 0.4s var(--p-ease-out); }
.nav-scrolled { background: rgba(10, 10, 46, 0.85); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); box-shadow: inset 0 -1px 0 var(--border-dark); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { height: 28px; width: auto; flex-shrink: 0; transition: opacity 0.4s var(--p-ease-out); }
.nav-logo:hover { opacity: 0.8; }
.nav-links { display: none; align-items: center; gap: var(--p-space-8); }
/* .nav-mobile-open: top wird per JS dynamisch gesetzt (= nav.offsetHeight),
   damit es immer direkt unter der Nav sitzt — unabhaengig von scroll-state */
.nav-mobile-open { display: flex; flex-direction: column; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--bg-dark); padding: var(--p-space-6); gap: var(--p-space-5); box-shadow: var(--p-shadow-lg); overflow-y: auto; z-index: 999; margin-top: -1px; }
body.has-nav-mobile-open { overflow: hidden; position: fixed; width: 100%; }
.nav-link { font-size: var(--type-body); font-weight: var(--p-weight-medium); color: var(--text-dark-secondary); padding: var(--p-space-1) 0; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--brand-gradient); transition: all 0.4s var(--p-ease-out); transform: translateX(-50%); border-radius: 2px; }
.nav-link:hover { color: var(--text-dark-primary); }
.nav-link:hover::after { width: 100%; }
.nav-link:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-2); border-radius: 2px; }
.nav-link[aria-current="page"] { color: var(--text-dark-primary); }
.nav-link[aria-current="page"]::after { width: 100%; opacity: 0.6; }
.nav-cta { padding: var(--p-space-3) var(--p-space-6); font-size: var(--type-body); }

.nav-mobile-toggle { display: flex; flex-direction: column; gap: var(--p-space-1); align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: var(--p-space-3); min-width: 44px; min-height: 44px; transition: transform 0.3s var(--p-ease-spring); }
.nav-mobile-toggle:hover { transform: scale(1.1); }
.nav-mobile-toggle:active { transform: scale(0.95); }
.nav-mobile-toggle:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); border-radius: var(--p-radius-sm); }
.nav-mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--text-dark-primary); border-radius: 2px; transition: all 0.4s var(--p-ease-out); transform-origin: center; }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ==========================================================
   8. HERO
   ========================================================== */
.section-hero { position: relative; background: var(--bg-dark); padding: var(--p-space-30) 0 var(--p-space-30); overflow: hidden; border-radius: 0 0 var(--p-radius-xl) var(--p-radius-xl); }

/* Hero Background Video */
.hero-video-wrap { position: absolute; top: 0; right: 0; width: 65%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.5) 100%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.7) 90%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.5) 100%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.7) 90%, transparent 100%); -webkit-mask-composite: source-in; }
.hero-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.40; mix-blend-mode: lighten; filter: blur(1.5px); }

.hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-orb-1 { width: 504px; height: 504px; background: radial-gradient(circle, rgba(233,30,140,0.25) 0%, transparent 70%); top: -96px; right: -152px; animation: float-slow 12s ease-in-out infinite alternate; }
.hero-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(63,81,181,0.2) 0%, transparent 70%); bottom: -96px; left: -96px; animation: float-slow 15s ease-in-out infinite alternate-reverse; }
.hero-orb-3 { width: 304px; height: 304px; background: radial-gradient(circle, rgba(123,31,162,0.18) 0%, transparent 70%); top: 50%; left: 60%; animation: float-slow 10s ease-in-out infinite alternate; }
@keyframes float-slow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(32px, -24px) scale(1.1); } }

/* Reusable grid pattern — dark variant */
.grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent); pointer-events: none; }
/* Light variant */
.grid-pattern-light { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent); pointer-events: none; }
.hero-grid-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, black, transparent); pointer-events: none; }

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

.hero-label { display: inline-flex; align-items: center; gap: var(--p-space-2); background: var(--bg-dark-card); border: 1px solid var(--border-dark); border-radius: var(--p-radius-full); padding: var(--p-space-2) var(--p-space-6) var(--p-space-2) var(--p-space-4); font-size: var(--type-caption); font-weight: var(--p-weight-medium); color: var(--text-dark-secondary); margin-bottom: var(--p-space-6); backdrop-filter: blur(12px); transition: all 0.4s var(--p-ease-out); }
.hero-label-dot { width: 8px; height: 8px; background: var(--brand-primary); border-radius: 50%; box-shadow: 0 0 12px rgba(233,30,140,0.6); animation: pulse-glow 2.5s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 12px rgba(233,30,140,0.6); } 50% { opacity: 0.5; box-shadow: 0 0 4px rgba(233,30,140,0.3); } }

.hero-headline { font-size: var(--type-display); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--p-space-4); line-height: 1.08; }
.hero-headline .text-gradient { display: inline; position: relative; }
.hero-headline-accent { position: relative; display: inline-block; }

.hero-subline { font-size: var(--type-body-lg); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-8); max-width: 544px; }

.hero-buttons { display: flex; flex-direction: column; gap: var(--p-space-3); margin-bottom: var(--p-space-8); }
.hero-buttons .btn { width: 100%; }

.hero-trust { display: flex; flex-direction: column; gap: var(--p-space-4); padding-top: var(--p-space-6); border-top: 1px solid var(--border-dark); }
.trust-item { display: flex; align-items: center; gap: var(--p-space-2); color: var(--text-dark-secondary); font-size: var(--type-body); font-weight: var(--p-weight-medium); transition: color 0.4s var(--p-ease-out); }
.trust-icon { width: 20px; height: 20px; color: var(--brand-primary-bright); flex-shrink: 0; }


/* ==========================================================
   9. SOCIAL PROOF
   ========================================================== */
.section-social-proof { position: relative; z-index: 3; margin-top: -64px; padding: 0 0 var(--space-section-y); background: transparent; }

.stats-bar { background: var(--bg-light); border: none; border-radius: var(--p-radius-xl); padding: var(--p-space-8) var(--p-space-6); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); position: relative; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16); }

.stat-item { text-align: center; padding: var(--p-space-3) var(--p-space-2); position: relative; }
.stat-number { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: var(--p-weight-black); line-height: var(--p-leading-tight); margin-bottom: var(--p-space-1); }
.stat-label { font-size: var(--type-body); color: var(--text-light-muted); font-weight: var(--p-weight-medium); text-transform: uppercase; letter-spacing: var(--p-tracking-wide); }
.stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border-light); }

.logo-strip { margin-top: var(--p-space-12); text-align: center; }
.logo-strip-label { font-size: var(--type-caption); font-weight: var(--p-weight-semibold); text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-light-muted); margin-bottom: var(--p-space-8); }
.logo-marquee-wrapper { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent); }
.logo-marquee { display: flex; gap: var(--p-space-12); animation: marquee 25s linear infinite; width: max-content; }
.logo-marquee-item { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 104px; opacity: 0.55; font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-light-primary); white-space: nowrap; letter-spacing: var(--p-tracking-wide); transition: opacity 0.4s var(--p-ease-out); }  /* A11y fix: was 0.3 (1.93:1 on white). Now 3.85:1 — WCAG AA SC 1.4.3 bold text >=3:1 */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ==========================================================
   10. PROBLEMS
   ========================================================== */
.section-problems { position: relative; padding: var(--space-section-y) 0; background: var(--bg-dark); overflow: hidden; border-radius: var(--p-radius-xl); margin: 0 var(--p-space-4); }
.problems-glow { position: absolute; width: 504px; height: 504px; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,0.08) 0%, transparent 70%); bottom: -200px; right: -96px; pointer-events: none; }
.problems-glow-2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(63,81,181,0.06) 0%, transparent 70%); top: -120px; left: -80px; pointer-events: none; }

.problems-header { margin-bottom: var(--space-header-bottom); text-align: center; }
.problems-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); }
.problems-subline { font-size: var(--type-body-lg); color: var(--text-dark-secondary); max-width: 480px; line-height: var(--p-leading-relaxed); margin-left: auto; margin-right: auto; }

.problems-grid { display: flex; flex-direction: column; gap: var(--space-card-gap); position: relative; z-index: 2; }

/* Glass cards on dark bg — Webflow-compatible gradient border */
.problem-card { position: relative; background: linear-gradient(var(--bg-dark), var(--bg-dark)), linear-gradient(135deg, rgba(233,30,140,0.3), rgba(63,81,181,0.3)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--p-radius-lg); padding: var(--p-space-8); transition: all 0.5s var(--p-ease-out); }

.problem-number { font-size: var(--p-font-display); font-weight: var(--p-weight-black); line-height: var(--p-leading-none); background: var(--brand-gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-text-gap); }  /* A11y fix: uses --brand-gradient-text with lighter stops for >=3.6:1 on dark bg — WCAG AA SC 1.4.3 large text */

.problem-title { font-size: var(--type-h3); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--p-space-2); }
.problem-text { color: var(--text-dark-secondary); font-size: var(--type-body); line-height: var(--p-leading-relaxed); }


/* ==========================================================
   11. PROGRAMS
   ========================================================== */
.section-programs { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light); z-index: 4; }

.programs-wrapper { max-width: var(--layout-container); margin: 0 auto; padding: 0 var(--p-space-6); }

.programs-header { margin-bottom: var(--space-header-bottom); text-align: center; max-width: var(--layout-narrow); margin-left: auto; margin-right: auto; }
.programs-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.programs-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 480px; margin-left: auto; margin-right: auto; line-height: var(--p-leading-relaxed); }
/* Mobile: horizontal slider */
.programs-grid { display: flex; gap: var(--space-card-gap); max-width: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--p-space-6); margin: 0 calc(var(--p-space-6) * -1); }
.programs-grid::-webkit-scrollbar { display: none; }
.programs-grid:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); border-radius: var(--p-radius-md); }

.program-card { position: relative; border-radius: var(--p-radius-xl); padding: var(--p-space-10) var(--p-space-8); display: flex; flex-direction: column; transition: all 0.5s var(--p-ease-out); min-width: 280px; flex: 0 0 85%; scroll-snap-align: center; }

/* Program slider dots */
.programs-nav { display: flex; justify-content: center; gap: var(--p-space-2); margin-top: var(--p-space-6); }
.programs-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, 0.15); border: none; padding: 0; cursor: pointer; transition: all 0.4s var(--p-ease-out); }
.programs-nav-dot.active { background: var(--brand-primary); width: 24px; border-radius: 4px; }
.programs-nav-dot:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 4px; }

.program-card-main { background: var(--bg-dark); color: var(--text-dark-primary); overflow: visible; }
.program-card-main::after { content: ''; position: absolute; width: 304px; height: 304px; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,0.12) 0%, transparent 70%); top: -96px; right: -80px; pointer-events: none; transition: all 0.5s var(--p-ease-out); }

.program-card-enterprise { background: linear-gradient(var(--p-gray-50), var(--p-gray-50)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; }

.program-badge { position: absolute; top: 0; left: var(--p-space-8); transform: translateY(-50%); display: inline-flex; align-items: center; gap: var(--p-space-2); background: var(--brand-gradient); color: var(--text-dark-primary); font-size: var(--p-font-xs); font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); padding: var(--p-space-2) var(--p-space-4); border-radius: var(--p-radius-full); width: fit-content; z-index: 1; }

.program-name { font-size: var(--type-h2); font-weight: var(--p-weight-extrabold); margin-bottom: var(--p-space-2); letter-spacing: var(--p-tracking-tight); }

.program-desc { font-size: var(--type-body); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-8); flex-grow: 1; }
.program-card-main .program-desc { color: var(--text-dark-secondary); }
.program-card-enterprise .program-desc { color: var(--text-light-secondary); }

.program-price-row { display: flex; align-items: baseline; gap: var(--p-space-2); margin-bottom: var(--p-space-1); }
.price-launch-badge { display: inline-flex; align-items: center; gap: var(--p-space-1); background: linear-gradient(135deg, rgba(233,30,140,0.15), rgba(39,0,198,0.15)); border: 1px solid rgba(233,30,140,0.3); color: var(--brand-primary-bright); font-size: var(--p-font-xs); font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); padding: var(--p-space-2) var(--p-space-3); border-radius: var(--p-radius-full); margin-bottom: var(--p-space-3); align-self: flex-start; width: fit-content; }
.price-launch-badge svg { flex-shrink: 0; width: 11px; height: 11px; }
.program-price-strike { font-size: var(--type-body-lg); font-weight: var(--p-weight-medium); text-decoration: line-through; color: rgba(255,255,255,0.4); }
.program-price { font-size: var(--p-font-xl); font-weight: var(--p-weight-black); line-height: var(--p-leading-none); letter-spacing: var(--p-tracking-tighter); }

.program-price-label { font-size: var(--type-body); font-weight: var(--p-weight-medium); }
.program-card-main .program-price-label { color: var(--text-dark-secondary); }
.program-card-enterprise .program-price-label { color: var(--text-light-secondary); }

.program-price-note { font-size: var(--type-caption); margin-bottom: var(--p-space-8); }
.program-card-main .program-price-note { color: var(--text-dark-secondary); }
.program-card-enterprise .program-price-note { color: var(--text-light-secondary); }

.program-divider { width: 100%; height: 1px; border: none; margin-bottom: var(--p-space-8); }
.program-card-main .program-divider { background: var(--border-dark); }
.program-card-enterprise .program-divider { background: var(--border-light); }

.program-features { display: flex; flex-direction: column; gap: var(--space-card-gap); margin-bottom: var(--p-space-8); flex-grow: 1; }
.program-feature { display: flex; align-items: flex-start; gap: var(--p-space-3); font-size: var(--type-body); line-height: var(--p-leading-normal); }

.program-feature-check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.program-card-main .program-feature-check { background: rgba(233,30,140,0.15); color: var(--brand-primary-bright); }
.program-card-enterprise .program-feature-check { background: var(--brand-gradient-subtle); color: var(--brand-primary); }
.program-feature-check svg { width: 12px; height: 12px; }

.program-cta { width: 100%; text-align: center; }


/* ==========================================================
   12. USPs — dark glassmorphism
   ========================================================== */
.section-usps { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light); overflow: hidden; }


.usps-header { margin-bottom: var(--space-header-bottom); position: relative; z-index: 3; text-align: center; }
.usps-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.usps-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 480px; line-height: var(--p-leading-relaxed); margin-left: auto; margin-right: auto; }

.usps-grid { display: flex; flex-direction: column; gap: var(--space-card-gap); position: relative; z-index: 3; }

.usp-card { position: relative; padding: var(--p-space-8); border-radius: var(--p-radius-lg); background: linear-gradient(var(--p-white), var(--p-gray-50)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; transition: all 0.5s var(--p-ease-out); overflow: hidden; }

.usp-top { display: flex; align-items: center; gap: var(--p-space-4); margin-bottom: var(--p-space-3); }

.usp-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient-subtle); border-radius: var(--p-space-3); flex-shrink: 0; transition: all 0.4s var(--p-ease-out); }
.usp-icon svg { width: 24px; height: 24px; color: var(--brand-primary); transition: color 0.4s var(--p-ease-out); }

.usp-title { font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-light-primary); }
.usp-text { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); padding-left: var(--p-space-16); }


/* ==========================================================
   13. TESTIMONIALS
   ========================================================== */
.section-testimonials { position: relative; padding: var(--space-section-y) 0 var(--p-space-12); background: var(--bg-light-subtle); overflow: hidden; }

.testimonials-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(123,31,162,0.03) 0%, transparent 70%); top: -160px; right: -120px; pointer-events: none; }
.testimonials-glow-2 { position: absolute; width: 504px; height: 504px; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,0.03) 0%, transparent 70%); bottom: -200px; left: -96px; pointer-events: none; }

.testimonials-header { margin-bottom: var(--space-header-bottom); position: relative; z-index: 3; text-align: center; }
.testimonials-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.testimonials-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 480px; line-height: var(--p-leading-relaxed); margin-left: auto; margin-right: auto; }

/* Mobile: horizontal slider */
.testimonials-grid { display: flex; gap: var(--space-card-gap); position: relative; z-index: 3; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--p-space-6) var(--p-space-4); margin: 0 calc(var(--p-space-6) * -1); }
.testimonials-grid::-webkit-scrollbar { display: none; }
.testimonials-grid:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); border-radius: var(--p-radius-md); }

/* Slider Navigation */
.testimonials-nav { display: none; justify-content: center; gap: var(--p-space-2); margin-top: var(--p-space-6); position: relative; z-index: 3; }
.testimonials-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-light); border: none; padding: 0; cursor: pointer; transition: all 0.4s var(--p-ease-out); }
.testimonials-nav-dot.active { background: var(--brand-primary); width: 24px; border-radius: 4px; }
.testimonials-nav-dot:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 4px; }

.testimonial-card { position: relative; background: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(135deg, rgba(233,30,140,0.15), rgba(63,81,181,0.15)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--p-radius-lg); padding: var(--p-space-8); display: flex; flex-direction: column; transition: all 0.5s var(--p-ease-out); overflow: visible; min-width: 280px; flex: 0 0 85%; scroll-snap-align: center; }

.testimonial-quote-mark { position: absolute; top: -48px; right: -24px; font-size: 14rem; line-height: 1; background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.08; pointer-events: none; font-weight: 900; }

.testimonial-stars { display: flex; gap: var(--p-space-1); margin-bottom: var(--space-text-gap); position: relative; z-index: 1; }
.testimonial-star { width: 16px; height: 16px; color: var(--p-yellow-400); }

.testimonial-quote { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-8); flex-grow: 1; }

.testimonial-author { display: flex; align-items: center; gap: var(--space-card-gap); padding-top: var(--p-space-6); border-top: 1px solid var(--border-light-subtle); }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: var(--p-white); font-weight: var(--p-weight-bold); font-size: var(--type-caption); flex-shrink: 0; }
.testimonial-name { font-size: var(--type-body); font-weight: var(--p-weight-semibold); color: var(--text-light-primary); }
.testimonial-role { font-size: var(--type-caption); color: var(--text-light-muted); margin-top: var(--p-space-1); }


/* ==========================================================
   13b. INLINE CTA BANNER
   ========================================================== */
.inline-cta { padding: var(--p-space-8) 0; background: var(--bg-light); }
.inline-cta-inner { display: flex; align-items: center; justify-content: center; gap: var(--p-space-6); flex-wrap: wrap; padding: var(--p-space-6) var(--p-space-8); background: var(--bg-dark); border-radius: var(--p-radius-lg); }
.inline-cta-text { color: var(--text-dark-secondary); font-size: var(--type-body-lg); margin: 0; }
.inline-cta-text strong { color: var(--text-dark-primary); }

/* ==========================================================
   14. CTA
   ========================================================== */
.section-cta { position: relative; padding: 0 0 var(--space-section-y); margin-top: calc(var(--p-space-16) * -1); background: transparent; z-index: 4; }
/* Override: wenn .section-faq direkt vor .section-cta steht (z.B. programm.html),
   kein negatives Margin — sonst haengen zwei dunkle Boxen haesslich uebereinander */
.section-faq + .section-cta { margin-top: var(--p-space-12); }

.cta-box { position: relative; border-radius: var(--p-radius-xl); padding: var(--p-space-16) var(--p-space-6); text-align: center; overflow: hidden; background: var(--bg-dark); border: 1px solid var(--border-dark); box-shadow: 0 32px 80px rgba(10, 10, 44, 0.3); }
.cta-orb-1 { position: absolute; width: 304px; height: 304px; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,0.18) 0%, transparent 70%); top: -120px; left: -80px; pointer-events: none; animation: float-slow 10s ease-in-out infinite alternate; }
.cta-orb-2 { position: absolute; width: 248px; height: 248px; border-radius: 50%; background: radial-gradient(circle, rgba(63,81,181,0.15) 0%, transparent 70%); bottom: -96px; right: -64px; pointer-events: none; animation: float-slow 12s ease-in-out infinite alternate-reverse; }
.cta-box::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--brand-gradient); opacity: 0.5; }

.cta-content { position: relative; z-index: 2; }
.cta-headline { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); letter-spacing: var(--p-tracking-tighter); }
.cta-subline { font-size: var(--type-body-lg); color: var(--text-dark-secondary); margin-bottom: var(--p-space-8); max-width: 504px; margin-left: auto; margin-right: auto; line-height: var(--p-leading-relaxed); }

.cta-buttons { display: flex; flex-direction: column; gap: var(--p-space-3); align-items: center; }
.cta-buttons .btn { width: 100%; max-width: 320px; }


/* ==========================================================
   15. FOOTER
   ========================================================== */
.footer { background: var(--bg-dark); padding: var(--p-space-20) 0 var(--p-space-8); border-radius: var(--p-radius-xl) var(--p-radius-xl) 0 0; margin-top: calc(var(--p-space-8) * -1); position: relative; z-index: 5; }
.footer-top { display: flex; flex-direction: column; gap: var(--p-space-10); margin-bottom: var(--p-space-12); }

.footer-brand-text { font-size: var(--type-body); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); margin-top: var(--space-text-gap); max-width: 280px; }

.footer-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-8); }

.footer-heading { font-size: var(--type-caption); font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: var(--p-tracking-widest); color: var(--text-dark-secondary); margin-bottom: var(--space-text-gap); }

.footer-links { display: flex; flex-direction: column; gap: var(--p-space-3); }
.footer-link { font-size: var(--type-body); color: var(--text-dark-secondary); transition: color 0.4s var(--p-ease-out); }
.footer-link:hover { color: var(--brand-primary); }
.footer-link:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); border-radius: 2px; }

.footer-bottom { display: flex; flex-direction: column; gap: var(--p-space-3); padding-top: var(--p-space-6); border-top: 1px solid var(--border-dark); }
.footer-copyright { font-size: var(--type-caption); color: var(--text-dark-secondary); }

.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--p-space-2) var(--p-space-4); width: 100%; min-width: 0; justify-content: flex-start; }
.footer-legal-link { font-size: var(--type-caption); color: var(--text-dark-secondary); transition: color 0.4s var(--p-ease-out); }
.footer-legal-link:hover { color: var(--brand-primary); }
.footer-legal-link:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); border-radius: 2px; }


/* ==========================================================
   16. SCROLL REVEAL
   ========================================================== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--p-ease-out), transform 0.7s var(--p-ease-out); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.4s; }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s var(--p-ease-out), transform 0.7s var(--p-ease-out); }
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.7s var(--p-ease-out), transform 0.7s var(--p-ease-out); }
.reveal-scale.revealed { opacity: 1; transform: scale(1); }


/* ==========================================================
   LEGAL PAGES — Reusable layout for Impressum, Datenschutz, AGB, etc.
   ========================================================== */
.legal-hero { position: relative; background: var(--bg-dark); padding: var(--p-space-24) 0 var(--p-space-12); overflow: hidden; text-align: center; border-radius: 0 0 var(--p-radius-xl) var(--p-radius-xl); }
.legal-hero-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); }

.legal-content { position: relative; background: var(--bg-light); border-radius: var(--p-radius-xl); padding: var(--p-space-12) var(--p-space-8); max-width: var(--layout-narrow); margin: calc(var(--p-space-8) * -1) auto var(--p-space-20); z-index: 2; overflow: hidden; }
.legal-content h2 { font-size: var(--type-h2); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-top: var(--p-space-10); margin-bottom: var(--p-space-4); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: var(--type-h3); font-weight: var(--p-weight-semibold); color: var(--text-light-primary); margin-top: var(--p-space-6); margin-bottom: var(--p-space-3); }
.legal-content p { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-4); }
.legal-content ul, .legal-content ol { margin-bottom: var(--p-space-4); padding-left: var(--p-space-6); }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-2); }
.legal-content a { color: var(--brand-primary-text); text-decoration: underline; }  /* A11y fix: was --brand-primary (4.18:1 on white). Now 5.09:1 — WCAG AA SC 1.4.3 */
.legal-content a:hover { color: var(--brand-primary-bright); }
.legal-content a:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 2px; }
.legal-meta { font-size: var(--type-caption); color: var(--text-light-muted); margin-bottom: var(--p-space-8); }


/* ==========================================================
   PAGE HERO — Reusable for subpages (Kontakt, Über uns, etc.)
   ========================================================== */
.section-page-hero { position: relative; background: var(--bg-dark); padding: var(--p-space-24) 0 var(--p-space-12); overflow: hidden; border-radius: 0 0 var(--p-radius-xl) var(--p-radius-xl); }
.page-hero-content { position: relative; z-index: 2; max-width: 640px; }
.page-hero-headline { font-size: var(--type-display); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--p-space-4); line-height: 1.08; letter-spacing: var(--p-tracking-tighter); }
.page-hero-subline { font-size: var(--type-body-lg); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); max-width: 544px; }


/* ==========================================================
   GLASSMORPHISM CARD — Shared component
   ========================================================== */
.glass-card { position: relative; border-radius: var(--p-radius-md); overflow: hidden; background: linear-gradient(var(--bg-light-subtle), var(--bg-light-subtle)), linear-gradient(135deg, rgba(233,30,140,0.15), rgba(63,81,181,0.15)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; }


/* ==========================================================
   CONTACT PAGE
   ========================================================== */
.section-contact { position: relative; padding: var(--p-space-4) 0 var(--space-section-y); background: var(--bg-light); }

.contact-grid { display: flex; flex-direction: column; gap: var(--p-space-8); }

/* Form Card */
.contact-form-card { padding: var(--p-space-8) var(--p-space-6); max-width: 100%; min-width: 0; box-sizing: border-box; }
.contact-form-card form, .contact-form-card fieldset, .contact-form-card .form-row, .contact-form-card .form-group { max-width: 100%; min-width: 0; }
.contact-form-card .form-input, .contact-form-card .form-textarea, .contact-form-card .form-select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.contact-form-title { font-size: var(--type-h2); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-8); }

.contact-form fieldset { border: none; padding: 0; margin: 0; }

.form-group { margin-bottom: var(--p-space-5); }
.form-row { display: flex; flex-direction: column; gap: 0; }

.form-label { display: block; font-size: var(--type-body); font-weight: var(--p-weight-medium); color: var(--text-light-primary); margin-bottom: var(--p-space-2); }
.form-required { color: var(--brand-primary-bright); }

.form-input { display: block; width: 100%; padding: var(--p-space-3) var(--p-space-4); font-family: var(--p-font-family); font-size: var(--type-body); font-weight: var(--p-weight-regular); color: var(--text-light-primary); background: var(--p-white); border: 1px solid var(--border-light); border-radius: var(--p-radius-sm); transition: border-color 0.3s var(--p-ease-out), box-shadow 0.3s var(--p-ease-out); appearance: none; -webkit-appearance: none; }
.form-input::placeholder { color: var(--text-light-muted); }
.form-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.2); }
.form-input:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: 0; border-color: var(--brand-primary); }

/* Error state */
.form-input-error { border-color: #ef4444; }
.form-input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.form-error { display: block; font-size: var(--type-caption); color: #ef4444; margin-top: var(--p-space-1); min-height: 0; }

/* Select */
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(0,0,0,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--p-space-4) center; padding-right: var(--p-space-10); cursor: pointer; }
.form-select option { background: var(--p-white); color: var(--text-light-primary); }

/* Textarea */
.form-textarea { resize: vertical; min-height: 120px; }

/* Checkbox */
.form-group-checkbox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--p-space-3); margin-top: var(--p-space-4); }
.form-checkbox { flex-shrink: 0; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-top: 2px; accent-color: var(--brand-primary); cursor: pointer; }
.form-checkbox:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: 2px; }
.form-label-checkbox { flex: 1; font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-normal); cursor: pointer; }
.form-link { color: var(--brand-primary-text); text-decoration: underline; transition: color 0.3s var(--p-ease-out); }
.form-link:hover { color: var(--brand-primary); }
.form-link:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 2px; }

.contact-submit { margin-top: var(--p-space-6); width: 100%; }

/* Contact Info Sidebar */
.contact-info { display: flex; flex-direction: column; gap: var(--p-space-4); }
.contact-info-card { padding: var(--p-space-6); display: flex; flex-direction: column; gap: var(--p-space-3); background: var(--bg-light-subtle); border: 1px solid var(--border-light-subtle); border-radius: var(--p-radius-md); }
.contact-info-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(233, 30, 140, 0.1); border-radius: var(--p-space-3); color: var(--brand-primary); }
.contact-info-title { font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-light-primary); }
.contact-info-value { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); font-style: normal; transition: color 0.3s var(--p-ease-out); }
a.contact-info-value:hover { color: var(--brand-primary); }
a.contact-info-value:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 2px; }
.contact-info-address { font-style: normal; }


/* ==========================================================
   ABOUT PAGE — Values
   ========================================================== */
.section-values { position: relative; padding: var(--p-space-4) 0 var(--space-section-y); background: var(--bg-light-subtle); }

.values-header { margin-bottom: var(--space-header-bottom); }
.values-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }

.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }

.value-card { padding: var(--p-space-6); text-align: center; background: linear-gradient(var(--p-white), var(--p-white)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; border-radius: var(--p-radius-md); }
.value-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--brand-gradient); border-radius: var(--p-radius-md); margin: 0 auto var(--p-space-4); color: var(--p-white); }
.value-title { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-2); }
.value-text { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); }


/* ==========================================================
   ABOUT PAGE — Team
   ========================================================== */
.section-team { position: relative; padding: var(--space-section-y) 0; background: var(--bg-dark); border-radius: var(--p-radius-xl); margin: 0 var(--p-space-4); }

.team-header { margin-bottom: var(--space-header-bottom); }
.team-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); }
.team-subline { font-size: var(--type-body-lg); color: var(--text-dark-secondary); max-width: 480px; line-height: var(--p-leading-relaxed); margin-left: auto; margin-right: auto; }

.team-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }

.team-card.glass-card { position: relative; padding: calc(60px + var(--p-space-6)) var(--p-space-6) var(--p-space-8); text-align: center; display: flex; flex-direction: column; align-items: center; overflow: visible; margin-top: 60px; background: var(--p-white); }

.team-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.team-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.team-avatar-initials { display: none; }

.team-name { font-size: var(--type-h3); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--p-space-1); }
.team-position { font-size: var(--type-caption); font-weight: var(--p-weight-semibold); color: var(--brand-primary-text); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); margin-bottom: var(--p-space-3); }
.team-bio { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-4); }



/* ==========================================================
   ABOUT PAGE — Parent Company (hd.group)
   ========================================================== */
.section-parent-company { position: relative; padding: 0 0 var(--space-section-y); background: var(--bg-light); }

.parent-card { padding: var(--p-space-10) var(--p-space-6); background: var(--bg-light-subtle); border-radius: var(--p-radius-md); }
.parent-content { display: flex; flex-direction: column; gap: var(--p-space-8); align-items: center; }

.parent-logo-placeholder { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.04); border-radius: var(--p-radius-md); flex-shrink: 0; }
.parent-logo-text { font-size: var(--p-font-lg); font-weight: var(--p-weight-extrabold); color: var(--text-light-primary); letter-spacing: var(--p-tracking-tight); }

.parent-info { text-align: center; }
.parent-headline { font-size: var(--type-h2); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-4); }
.parent-text { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-6); max-width: 640px; }


/* ==========================================================
   PROGRAMM PAGE — Hero Variant
   ========================================================== */

.section-hero--thankyou { padding: var(--p-space-24) 0 var(--p-space-16); min-height: auto; }


/* ==========================================================
   PROGRAMM PAGE — Curriculum Section
   ========================================================== */
.section-curriculum { position: relative; padding: var(--space-section-y) 0 var(--p-space-10); background: var(--bg-light-subtle); }
.curriculum-header { margin-bottom: var(--space-header-bottom); }
.curriculum-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.curriculum-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 544px; line-height: var(--p-leading-relaxed); }


/* ==========================================================
   ACCORDION COMPONENT
   ========================================================== */
.accordion { display: flex; flex-direction: column; gap: var(--p-space-4); max-width: var(--layout-container); }
.accordion--narrow { max-width: var(--layout-narrow); }

.accordion-item { position: relative; background: linear-gradient(var(--p-white), var(--p-white)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; border-radius: var(--p-radius-md); overflow: hidden; transition: background 0.4s var(--p-ease-out); }


.accordion-trigger { display: flex; align-items: center; gap: var(--p-space-4); width: 100%; padding: var(--p-space-6); background: none; border: none; cursor: pointer; color: var(--text-light-primary); font-family: var(--p-font-family); font-size: var(--type-body); text-align: left; transition: all 0.4s var(--p-ease-out); min-height: 44px; }
.accordion-trigger:hover { background: var(--bg-light-subtle); }
.accordion-trigger:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: -3px; border-radius: var(--p-radius-md); }

.accordion-number { font-size: var(--type-h2); font-weight: var(--p-weight-black); background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; flex-shrink: 0; min-width: 40px; }

.accordion-title { font-weight: var(--p-weight-bold); flex-grow: 1; color: var(--text-light-primary); }

.accordion-meta { font-size: var(--type-caption); font-weight: var(--p-weight-medium); color: var(--text-light-muted); text-transform: uppercase; letter-spacing: var(--p-tracking-wide); flex-shrink: 0; display: none; }

.accordion-chevron { flex-shrink: 0; color: var(--text-light-muted); transition: transform 0.4s var(--p-ease-out); }
.accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

.accordion-panel { overflow: hidden; }
.accordion-body { padding: var(--p-space-6) var(--p-space-6) var(--p-space-8); margin-top: var(--p-space-4); text-align: left; }
.accordion-body p { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-6); }

.accordion-list { display: flex; flex-direction: column; gap: var(--p-space-4); }
.accordion-list li { position: relative; padding-left: var(--p-space-6); font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); }
.accordion-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gradient); }


/* ==========================================================
   PROGRAMM PAGE — Transformation Section
   ========================================================== */
.section-transformation { position: relative; padding: var(--space-section-y) 0; background: var(--bg-dark); overflow: hidden; }
.transformation-header { margin-bottom: var(--space-header-bottom); }
.transformation-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); }

.transformation-grid { display: grid; grid-template-columns: 1fr; gap: var(--p-space-6); margin-bottom: var(--p-space-16); }
.transformation-card { padding: var(--p-space-8); border-radius: var(--p-radius-xl); }
.transformation-card--before { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.transformation-card--after { background: linear-gradient(135deg, rgba(233,30,140,0.1), rgba(39,0,198,0.1)); border: 1px solid rgba(233,30,140,0.25); }

.transformation-card-title { display: flex; align-items: center; gap: var(--p-space-3); font-size: var(--type-body-lg); font-weight: var(--p-weight-bold); margin-bottom: var(--p-space-6); }
.transformation-card--before .transformation-card-title { color: var(--text-dark-secondary); }
.transformation-card--after .transformation-card-title { color: var(--brand-primary-bright); }

.transformation-list { display: flex; flex-direction: column; gap: var(--p-space-4); list-style: none; padding: 0; margin: 0; }
.transformation-item { display: flex; align-items: flex-start; gap: var(--p-space-3); font-size: var(--type-body); line-height: var(--p-leading-relaxed); }
.transformation-item--before { color: var(--text-dark-secondary); }
.transformation-item--before svg { color: rgba(255,255,255,0.3); flex-shrink: 0; margin-top: 3px; }
.transformation-item--after { color: var(--text-dark-primary); }
.transformation-item--after svg { color: var(--brand-primary-bright); flex-shrink: 0; margin-top: 3px; }

.transformation-deliverables { text-align: center; }
.transformation-deliverables-title { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-dark-primary); margin-bottom: var(--p-space-8); }
.transformation-deliverables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
.transformation-deliverable { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-3); padding: var(--p-space-6); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--p-radius-lg); transition: border-color 0.4s var(--p-ease-out); }
.transformation-deliverable:hover { border-color: rgba(233,30,140,0.3); }
.transformation-deliverable-icon { color: var(--brand-primary-bright); }
.transformation-deliverable-text { font-size: var(--type-body); font-weight: var(--p-weight-semibold); color: var(--text-dark-primary); }

/* ==========================================================
   PROGRAMM PAGE — Pricing Section
   ========================================================== */
/* ==========================================================
   PROGRAMM PAGE — Lead Magnet Section
   ========================================================== */
.section-leadmagnet { position: relative; padding: var(--p-space-10) 0 var(--space-section-y); background: var(--bg-light-subtle); }
.leadmagnet-card { display: grid; grid-template-columns: 1fr; gap: var(--p-space-10); background: var(--bg-dark); border-radius: var(--p-radius-xl); padding: var(--p-space-10) var(--p-space-8); overflow: hidden; position: relative; }
.leadmagnet-card::before { content: ''; position: absolute; top: -120px; right: -120px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(233,30,140,0.15), transparent 70%); pointer-events: none; }

.leadmagnet-content { position: relative; z-index: 1; }
.leadmagnet-headline { font-size: var(--type-h2); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); line-height: var(--p-leading-tight); }
.leadmagnet-text { font-size: var(--type-body); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-6); max-width: 520px; }

.leadmagnet-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--p-space-3); padding-top: var(--p-space-6); margin-bottom: var(--p-space-6); border-top: 1px solid rgba(255,255,255,0.08); }
.leadmagnet-benefit { display: flex; align-items: center; gap: var(--p-space-2); font-size: var(--type-body-sm); color: var(--text-dark-secondary); }
.leadmagnet-benefit svg { color: var(--brand-primary-bright); flex-shrink: 0; }

.leadmagnet-form { display: flex; flex-direction: column; gap: var(--p-space-3); }
.leadmagnet-input-row { display: flex; flex-direction: column; gap: var(--p-space-3); }
.leadmagnet-input { padding: var(--p-space-3) var(--p-space-4); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--p-radius-md); color: var(--text-dark-primary); font-size: var(--type-body); font-family: var(--p-font-family); transition: border-color 0.3s var(--p-ease-out); }
.leadmagnet-input::placeholder { color: var(--text-dark-muted); }
.leadmagnet-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(233,30,140,0.15); }
.leadmagnet-input.input-error { border-color: #ef4444; }
.leadmagnet-checkbox-group { display: flex; align-items: flex-start; gap: var(--p-space-2); }
.leadmagnet-checkbox-label { font-size: var(--type-caption); color: var(--text-dark-secondary); line-height: 1.4; cursor: pointer; }
.leadmagnet-checkbox-label a { color: var(--text-dark-primary); text-decoration: underline; text-underline-offset: 2px; }
.leadmagnet-checkbox-label a:hover { color: var(--brand-primary-bright); }
.leadmagnet-error { font-size: var(--type-caption); color: #ef4444; min-height: 0; }
.leadmagnet-error:empty { display: none; }
.leadmagnet-btn { white-space: nowrap; align-self: flex-start; }

.leadmagnet-visual { position: relative; z-index: 1; }
.leadmagnet-mockup { border-radius: var(--p-radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 24px 48px rgba(0,0,0,0.4); }
.mockup-header { display: flex; align-items: center; gap: var(--p-space-3); padding: var(--p-space-2) var(--p-space-4); background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.mockup-dots { display: flex; gap: 6px; }
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.mockup-dot:first-child { background: #ff5f57; }
.mockup-dot:nth-child(2) { background: #ffbd2e; }
.mockup-dot:nth-child(3) { background: #28c840; }
.mockup-url { font-size: 10px; color: var(--text-dark-muted); margin-left: auto; margin-right: auto; background: rgba(255,255,255,0.04); padding: 2px 12px; border-radius: 4px; }

.mockup-body { display: grid; grid-template-columns: 140px 1fr; min-height: 220px; }
.mockup-sidebar { background: rgba(255,255,255,0.03); padding: var(--p-space-3); border-right: 1px solid rgba(255,255,255,0.06); }
.mockup-sidebar-title { display: block; font-size: 10px; font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dark-secondary); margin-bottom: var(--p-space-3); padding: 0 var(--p-space-1); }
.mockup-module { display: flex; align-items: center; gap: var(--p-space-2); padding: 6px var(--p-space-2); border-radius: 6px; margin-bottom: 2px; transition: background 0.2s; }
.mockup-module--active { background: rgba(233,30,140,0.12); }
.mockup-module-icon { font-size: 10px; color: var(--text-dark-muted); width: 16px; text-align: center; flex-shrink: 0; }
.mockup-module--active .mockup-module-icon { color: var(--brand-primary-bright); }
.mockup-module--done .mockup-module-icon { color: #28c840; font-size: 10px; }
.mockup-module--done .mockup-module-text { color: var(--text-dark-muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.15); }
.mockup-module-icon--play { font-size: 8px; }
.mockup-module-text { font-size: 10px; color: var(--text-dark-secondary); line-height: 1.3; }
.mockup-module--active .mockup-module-text { color: var(--text-dark-primary); font-weight: var(--p-weight-medium); }

.mockup-main { padding: var(--p-space-3); display: flex; flex-direction: column; gap: var(--p-space-2); }
.mockup-video { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(39,0,198,0.3), rgba(233,30,140,0.15)); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.mockup-play { color: white; opacity: 0.7; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.mockup-progress-row { display: flex; align-items: center; gap: var(--p-space-2); }
.mockup-progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.mockup-progress-fill { height: 100%; width: 30%; background: var(--brand-gradient); border-radius: 2px; }
.mockup-progress-time { font-size: 9px; color: var(--text-dark-muted); }
.mockup-lesson-title { font-size: 11px; font-weight: var(--p-weight-semibold); color: var(--text-dark-primary); }


.section-pricing { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light); }
.pricing-header { margin-bottom: var(--space-header-bottom); text-align: center; }
.pricing-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.pricing-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 480px; margin-left: auto; margin-right: auto; line-height: var(--p-leading-relaxed); }

.pricing-grid { display: flex; flex-direction: column; gap: var(--p-space-6); max-width: var(--layout-narrow); margin: 0 auto; }

.pricing-card { position: relative; border-radius: var(--p-radius-lg); padding: var(--p-space-8) var(--p-space-6); display: flex; flex-direction: column; overflow: visible; }

.pricing-card--featured { background: var(--bg-dark); border: 1px solid var(--border-dark); color: var(--text-dark-primary); }
.pricing-card--featured .program-feature-check { background: rgba(233,30,140,0.15); color: var(--brand-primary-bright); }
.pricing-card--featured .program-divider { background: var(--border-dark); }
.pricing-card--featured .program-price-label { color: var(--text-dark-secondary); }
.pricing-card--featured .program-price-note { color: var(--text-dark-secondary); }
.pricing-card--featured .program-desc { color: var(--text-dark-secondary); }
.pricing-card-glow { position: absolute; width: 304px; height: 304px; border-radius: 50%; background: radial-gradient(circle, rgba(233,30,140,0.12) 0%, transparent 70%); top: -96px; right: -80px; pointer-events: none; }

.pricing-card--enterprise { background: linear-gradient(var(--bg-light-subtle), var(--bg-light-subtle)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; color: var(--text-light-primary); }


.pricing-card-name { font-size: var(--type-h2); font-weight: var(--p-weight-extrabold); margin-bottom: var(--p-space-2); letter-spacing: var(--p-tracking-tight); }
.pricing-card--featured .pricing-card-name { color: var(--text-dark-primary); }
.pricing-card--enterprise .pricing-card-name { color: var(--text-light-primary); }
.pricing-card-desc { font-size: var(--type-body); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-6); flex-grow: 1; }
.pricing-card--featured .pricing-card-desc { color: var(--text-dark-secondary); }
.pricing-card--enterprise .pricing-card-desc { color: var(--text-light-secondary); }
.pricing-card--enterprise .program-price { color: var(--text-light-primary); }
.pricing-card--enterprise .program-price-label { color: var(--text-light-secondary); }
.pricing-card--enterprise .program-price-note { color: var(--text-light-secondary); }
.pricing-card--enterprise .program-divider { background: var(--border-light); }
.pricing-card--enterprise .program-feature { color: var(--text-light-secondary); }
.pricing-card--enterprise .program-feature-check { background: var(--brand-gradient-subtle); color: var(--brand-primary); }


.pricing-cta { width: 100%; text-align: center; margin-top: auto; }


/* ==========================================================
   PROGRAMM PAGE — FAQ Section
   ========================================================== */
.section-faq { position: relative; padding: var(--space-section-y) 0; background: var(--bg-dark); border-radius: var(--p-radius-xl); margin: 0 var(--p-space-4); }
.section-faq .container { max-width: var(--layout-narrow); margin: 0 auto; }
.faq-header { margin-bottom: var(--space-header-bottom); text-align: center; }
.faq-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--space-text-gap); }

/* FAQ accordion stays dark — override light accordion defaults */
.section-faq .accordion-item { background: linear-gradient(var(--p-navy-800), var(--p-navy-800)), linear-gradient(135deg, rgba(233,30,140,0.2), rgba(63,81,181,0.2)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; }
.section-faq 
.section-faq .accordion-trigger { color: var(--text-dark-primary); }
.section-faq .accordion-trigger:hover { background: var(--bg-dark-card-hover); }
.section-faq .accordion-title { color: var(--text-dark-primary); }
.section-faq .accordion-meta { color: var(--text-dark-muted); }
.section-faq .accordion-chevron { color: var(--text-dark-muted); }
.section-faq .accordion-body p { color: var(--text-dark-secondary); }
.section-faq .accordion-list li { color: var(--text-dark-secondary); }


/* ==========================================================
   THANK-YOU PAGE — Components
   ========================================================== */
.thankyou-content { text-align: center; max-width: var(--layout-narrow); margin: 0 auto; }
.thankyou-content .hero-subline { max-width: 544px; margin-left: auto; margin-right: auto; }

.thankyou-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(233,30,140,0.1); color: var(--brand-primary-bright); margin: 0 auto var(--p-space-8); }

.thankyou-steps { display: flex; flex-direction: column; gap: var(--p-space-4); margin: var(--p-space-12) 0; text-align: left; }

.thankyou-step { display: flex; align-items: flex-start; gap: var(--p-space-4); background: linear-gradient(var(--p-navy-800), var(--p-navy-800)), linear-gradient(135deg, rgba(233,30,140,0.2), rgba(63,81,181,0.2)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; border-radius: var(--p-radius-md); padding: var(--p-space-6); position: relative; overflow: hidden; }

.thankyou-step-number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); color: var(--text-dark-primary); font-size: var(--type-body); font-weight: var(--p-weight-bold); flex-shrink: 0; }

.thankyou-step-title { font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-dark-primary); margin-bottom: var(--p-space-1); }
.thankyou-step-text { font-size: var(--type-body); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); }

.thankyou-actions { display: flex; justify-content: center; gap: var(--p-space-4); }


/* ==========================================================
   BLOG — Cards, Grid, Filter
   ========================================================== */
.section-blog { position: relative; padding: var(--p-space-4) 0 var(--space-section-y); background: var(--bg-light); }

/* Filter Tabs */
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--p-space-2); margin-bottom: var(--p-space-8); }
.blog-filter-tab { background: var(--bg-light-subtle); color: var(--text-light-secondary); border: 1px solid var(--border-light); border-radius: var(--p-radius-full); padding: var(--p-space-2) var(--p-space-5); font-family: var(--p-font-family); font-size: var(--type-caption); font-weight: var(--p-weight-semibold); cursor: pointer; transition: all 0.4s var(--p-ease-out); white-space: nowrap; }
.blog-filter-tab:hover { background: var(--border-light); border-color: var(--border-light-hover); color: var(--text-light-primary); }
.blog-filter-tab:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: var(--p-space-1); }
.blog-filter-tab.active { background: var(--brand-gradient); color: var(--text-dark-primary); border-color: transparent; box-shadow: var(--p-shadow-glow); }

/* Blog Grid */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }

/* Blog Card */
.blog-card { border-radius: var(--p-radius-md); overflow: hidden; background: linear-gradient(var(--p-white), var(--p-white)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; position: relative; transition: transform 0.5s var(--p-ease-out), box-shadow 0.5s var(--p-ease-out); }


.blog-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.blog-card-link:focus-visible { outline: 3px solid var(--brand-primary-bright); outline-offset: -3px; border-radius: var(--p-radius-md); }

.blog-card-image { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--p-navy-800), var(--p-navy-700)); position: relative; }
.blog-card-category-tag { display: inline-block; position: absolute; top: var(--p-space-3); left: var(--p-space-3); background: var(--brand-gradient); color: var(--text-dark-primary); font-size: var(--type-caption); font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); padding: var(--p-space-1) var(--p-space-3); border-radius: var(--p-radius-full); z-index: 2; }

.blog-card-body { padding: var(--p-space-6); display: flex; flex-direction: column; flex-grow: 1; }
.blog-card-meta { display: flex; align-items: center; gap: var(--p-space-2); font-size: var(--type-caption); color: var(--text-light-muted); margin-bottom: var(--p-space-3); }
.blog-card-title { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-2); line-height: var(--p-leading-snug); }
.blog-card-excerpt { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); flex-grow: 1; }


/* ==========================================================
   BLOG ARTICLE — Hero, Body, Rich Text
   ========================================================== */
.section-article-hero { position: relative; background: var(--bg-dark); padding: var(--p-space-24) 0 var(--p-space-8); overflow: hidden; border-radius: 0 0 var(--p-radius-xl) var(--p-radius-xl); }

/* Breadcrumb */
.breadcrumb { position: relative; z-index: 2; margin-bottom: var(--p-space-6); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-2); list-style: none; }
.breadcrumb li { font-size: var(--type-caption); color: var(--text-dark-muted); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--p-space-2); color: var(--text-dark-muted); }
.breadcrumb a { color: var(--text-dark-secondary); }
.breadcrumb a:hover { color: var(--brand-primary-bright); }
.breadcrumb a:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 2px; }

.article-hero-image { width: 100%; aspect-ratio: 21 / 9; background: linear-gradient(135deg, var(--p-navy-800), var(--p-navy-700)); border-radius: var(--p-radius-md); margin-bottom: var(--p-space-8); position: relative; z-index: 2; }

.article-hero-content { position: relative; z-index: 2; max-width: var(--layout-narrow); }
.article-hero-content .blog-card-category-tag { position: static; }
.article-hero-title { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-top: var(--p-space-4); margin-bottom: var(--p-space-4); line-height: var(--p-leading-tight); }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-2); font-size: var(--type-caption); color: var(--text-dark-muted); }

.article-author { display: flex; align-items: center; gap: var(--p-space-2); }
.article-author-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: var(--text-dark-primary); font-weight: var(--p-weight-bold); font-size: var(--type-caption); flex-shrink: 0; }
.article-author-name { font-weight: var(--p-weight-semibold); color: var(--text-dark-secondary); }

/* Article Body */
.section-article-body { position: relative; padding: var(--p-space-8) 0 var(--space-section-y); background: var(--bg-light); }
.article-layout { max-width: var(--layout-narrow); margin: 0 auto; }

/* Rich Text Wrapper */
.rich-text { color: var(--text-light-secondary); font-size: var(--type-body); line-height: var(--p-leading-relaxed); }
.rich-text h2 { font-size: var(--type-h2); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-top: var(--p-space-10); margin-bottom: var(--p-space-4); line-height: var(--p-leading-tight); letter-spacing: var(--p-tracking-tighter); }
.rich-text h3 { font-size: var(--type-h3); font-weight: var(--p-weight-semibold); color: var(--text-light-primary); margin-top: var(--p-space-8); margin-bottom: var(--p-space-3); line-height: var(--p-leading-snug); letter-spacing: var(--p-tracking-tight); }
.rich-text p { margin-bottom: var(--p-space-4); }
.rich-text ul, .rich-text ol { margin-bottom: var(--p-space-4); padding-left: var(--p-space-6); }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: var(--p-space-2); line-height: var(--p-leading-relaxed); }
.rich-text blockquote { border-left: 3px solid var(--brand-primary); padding: var(--p-space-4) var(--p-space-6); margin: var(--p-space-8) 0; background: var(--bg-light-subtle); border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0; }
.rich-text blockquote p { color: var(--text-light-primary); font-size: var(--type-body-lg); font-weight: var(--p-weight-medium); font-style: italic; margin-bottom: 0; }
.rich-text code { background: rgba(0, 0, 0, 0.06); padding: 2px var(--p-space-2); border-radius: 4px; font-size: 0.9em; }
.rich-text img { border-radius: var(--p-radius-md); margin: var(--p-space-8) 0; }
.rich-text a { color: var(--brand-primary-text); text-decoration: underline; }
.rich-text a:hover { color: var(--brand-primary); }
.rich-text a:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-radius: 2px; }

/* Related Articles / Webinars */
.section-related { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light-subtle); border-top: 1px solid var(--border-light); }
.related-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-header-bottom); }
.related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }


/* ==========================================================
   WEBINARE — Cards, Grid, Sections
   ========================================================== */
.section-webinare-upcoming { position: relative; padding: var(--p-space-4) 0 var(--space-section-y); background: var(--bg-light); }
.section-webinare-past { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light-subtle); border-top: 1px solid var(--border-light); }

.webinare-section-header { margin-bottom: var(--space-header-bottom); }
.webinare-section-headline { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-light-primary); margin-bottom: var(--space-text-gap); }
.webinare-section-subline { font-size: var(--type-body-lg); color: var(--text-light-secondary); max-width: 544px; line-height: var(--p-leading-relaxed); }

/* Webinar Grid */
.webinar-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }

/* Webinar Card */
.webinar-card { border-radius: var(--p-radius-md); overflow: hidden; background: linear-gradient(var(--p-white), var(--p-white)), linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12)); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; position: relative; display: flex; flex-direction: column; }


.webinar-card-image { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--p-navy-800), var(--p-navy-700)); position: relative; }

.webinar-status-badge { display: inline-block; position: absolute; top: var(--p-space-3); left: var(--p-space-3); font-size: var(--type-caption); font-weight: var(--p-weight-bold); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); padding: var(--p-space-1) var(--p-space-3); border-radius: var(--p-radius-full); z-index: 2; }
.webinar-status-live { background: var(--brand-gradient); color: var(--text-dark-primary); }
.webinar-status-recording { background: var(--p-gray-100); color: var(--text-light-secondary); border: 1px solid var(--border-light); }

.webinar-card-body { padding: var(--p-space-6); display: flex; flex-direction: column; flex-grow: 1; }

.webinar-card-meta { display: flex; flex-wrap: wrap; gap: var(--p-space-3); margin-bottom: var(--p-space-4); }
.webinar-meta-item { display: flex; align-items: center; gap: var(--p-space-2); font-size: var(--type-caption); color: var(--text-light-muted); }
.webinar-meta-item svg { color: var(--text-light-muted); flex-shrink: 0; }

.webinar-card-title { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-4); line-height: var(--p-leading-snug); flex-grow: 1; }

.webinar-card-speaker { display: flex; align-items: center; gap: var(--p-space-3); font-size: var(--type-body); color: var(--text-light-secondary); margin-bottom: var(--p-space-6); }
.webinar-speaker-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: var(--text-dark-primary); font-weight: var(--p-weight-bold); font-size: var(--type-caption); flex-shrink: 0; }

.webinar-card-desc { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-4); }

.webinar-cta { width: 100%; text-align: center; position: relative; z-index: 2; }

/* Hero Pills */
.hero-pills { display: flex; flex-wrap: wrap; gap: var(--p-space-3); margin-top: var(--p-space-6); justify-content: center; }
.hero-pill { display: inline-flex; align-items: center; gap: var(--p-space-2); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--p-radius-full); padding: var(--p-space-2) var(--p-space-4); font-size: var(--type-caption); color: var(--text-dark-secondary); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-pill svg { color: var(--brand-primary-bright); flex-shrink: 0; }

/* Newsletter Section */
.section-webinar-newsletter { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light); }
.webinar-newsletter-box { background: var(--bg-dark); border-radius: var(--p-radius-xl); padding: var(--p-space-10) var(--p-space-6); display: flex; flex-direction: column; gap: var(--p-space-6); position: relative; overflow: hidden; border: 1px solid var(--border-dark); }
.webinar-newsletter-box::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--brand-gradient); opacity: 0.5; }
.webinar-newsletter-headline { font-size: var(--type-h2); font-weight: var(--p-weight-black); color: var(--text-dark-primary); }
.webinar-newsletter-text { font-size: var(--type-body-lg); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); }
.webinar-newsletter-form { display: flex; flex-direction: column; gap: var(--p-space-3); }
.webinar-newsletter-input-group { display: flex; flex-direction: column; gap: var(--p-space-3); }
.webinar-newsletter-input { width: 100%; padding: var(--p-space-3) var(--p-space-4); border-radius: var(--p-radius-md); border: 1px solid var(--border-dark); background: rgba(255,255,255,0.06); color: var(--text-dark-primary); font-size: var(--type-body); font-family: inherit; }
.webinar-newsletter-input::placeholder { color: var(--text-dark-muted); }
.webinar-newsletter-input:focus { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; border-color: var(--brand-primary-bright); }
.webinar-newsletter-btn { flex-shrink: 0; }
.webinar-newsletter-disclaimer { font-size: var(--type-caption); color: var(--text-dark-muted); line-height: var(--p-leading-relaxed); }
.webinar-newsletter-disclaimer a { color: var(--brand-primary-bright); text-decoration: underline; }

.webinar-newsletter-checkbox-group { display: flex; align-items: flex-start; gap: var(--p-space-3); }
.webinar-newsletter-checkbox { width: 24px; height: 24px; min-width: 24px; margin-top: 2px; accent-color: var(--brand-primary); cursor: pointer; border-radius: 3px; }
.webinar-newsletter-checkbox:focus-visible { outline: 2px solid var(--brand-primary-bright); outline-offset: 2px; }
.webinar-newsletter-error { font-size: var(--type-caption); color: #ff4d6a; margin-top: var(--p-space-2); }
.webinar-newsletter-input.input-error { border-color: #ff4d6a; outline: 1px solid #ff4d6a; }

/* Webinar Testimonials */
.section-webinar-testimonials { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light); }
.webinar-testimonials-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }


/* ==========================================================
   WEBINAR DETAIL — Hero, Body, Speaker, Registration
   ========================================================== */
.section-webinar-hero { position: relative; background: var(--bg-dark); padding: var(--p-space-24) 0 var(--p-space-8); overflow: hidden; border-radius: 0 0 var(--p-radius-xl) var(--p-radius-xl); }

.webinar-detail-hero-layout { display: flex; flex-direction: column; gap: var(--p-space-8); position: relative; z-index: 2; }

.webinar-detail-image { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--p-navy-800), var(--p-navy-700)); border-radius: var(--p-radius-md); position: relative; }

.webinar-detail-title { font-size: var(--type-h1); font-weight: var(--p-weight-black); color: var(--text-dark-primary); margin-bottom: var(--p-space-6); line-height: var(--p-leading-tight); }

.webinar-detail-meta { display: flex; flex-wrap: wrap; gap: var(--p-space-4); margin-bottom: var(--p-space-8); }
.webinar-detail-meta .webinar-meta-item { font-size: var(--type-body); color: var(--text-dark-secondary); }
.webinar-detail-meta .webinar-meta-item svg { color: var(--brand-primary-bright); }

.webinar-detail-cta { display: flex; flex-direction: column; gap: var(--p-space-3); align-items: flex-start; }
.webinar-detail-free { font-size: var(--type-caption); color: var(--text-dark-muted); }

/* Webinar Body */
.section-webinar-body { position: relative; padding: var(--p-space-8) 0 var(--space-section-y); background: var(--bg-light); }
.webinar-body-layout { display: flex; flex-direction: column; gap: var(--p-space-8); }
.webinar-body-headline { font-size: var(--type-h2); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-6); }

/* Registration Card */
.webinar-registration-card { background: var(--bg-light-subtle); border: 1px solid var(--border-light); border-radius: var(--p-radius-md); padding: var(--p-space-8) var(--p-space-6); position: relative; overflow: hidden; }
.webinar-registration-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--brand-gradient); }
.webinar-registration-title { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-3); }
.webinar-registration-text { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-6); }

.webinar-registration-form { display: flex; flex-direction: column; gap: var(--p-space-4); }
.form-field { display: flex; flex-direction: column; gap: var(--p-space-2); }
.form-optional { font-weight: var(--p-weight-regular); color: var(--text-light-muted); }
.webinar-registration-btn { width: 100%; }

/* Speaker Bio */
.section-speaker { position: relative; padding: var(--space-section-y) 0; background: var(--bg-light-subtle); border-top: 1px solid var(--border-light); }
.speaker-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--p-space-6); background: var(--p-white); border: 1px solid var(--border-light); border-radius: var(--p-radius-md); padding: var(--p-space-8) var(--p-space-6); }
.speaker-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; color: var(--text-dark-primary); font-weight: var(--p-weight-bold); font-size: var(--p-font-lg); flex-shrink: 0; }
.speaker-name { font-size: var(--type-h3); font-weight: var(--p-weight-bold); color: var(--text-light-primary); margin-bottom: var(--p-space-1); }
.speaker-title { font-size: var(--type-caption); font-weight: var(--p-weight-semibold); color: var(--brand-primary-text); text-transform: uppercase; letter-spacing: var(--p-tracking-wider); margin-bottom: var(--p-space-4); }
.speaker-bio { font-size: var(--type-body); color: var(--text-light-secondary); line-height: var(--p-leading-relaxed); max-width: 640px; }


/* ==========================================================
   17. RESPONSIVE — Tablet (768px+)
   ========================================================== */
@media (min-width: 768px) {
  .container { padding: 0 var(--p-space-8); }
  .section-hero { padding: var(--p-space-30) 0 var(--p-space-30); }
  .hero-headline { font-size: clamp(2.75rem, 5vw, 3.5rem); }
  .hero-buttons { flex-direction: row; gap: var(--space-card-gap); }
  .hero-buttons .btn { width: auto; }
  .hero-trust { flex-direction: row; gap: var(--p-space-8); }
  .section-social-proof { margin-top: -64px; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); padding: var(--p-space-10); border-radius: var(--p-radius-xl); }
  .stat-item:nth-child(2)::after { display: block; }
  .section-problems { margin: 0 var(--p-space-8); }
  .problems-grid { flex-direction: row; flex-wrap: wrap; gap: var(--p-space-6); }
  .problem-card { flex: 1 1 calc(50% - 12px); }
  .problem-card:last-child { flex: 1 1 100%; max-width: 50%; margin: 0 auto; }
  .programs-grid { gap: var(--p-space-6); overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; max-width: var(--layout-narrow); margin-left: auto; margin-right: auto; cursor: auto !important; }
  .programs-nav { display: none; }
  .program-card { flex: 1; min-width: 0; }
  .usps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
  .testimonials-grid { flex-wrap: nowrap; gap: var(--p-space-6); overflow: hidden; scroll-snap-type: none; padding: 0; margin: 0; cursor: auto !important; scroll-behavior: smooth; }
  .testimonials-nav { display: none; }
  .testimonial-card { flex: 0 0 calc(50% - 12px); min-width: 0; }
  .cta-box { padding: var(--p-space-20) var(--p-space-12); }
  .cta-buttons { flex-direction: row; justify-content: center; }
  .cta-buttons .btn { width: auto; }
  .footer-top { flex-direction: row; justify-content: space-between; }
  .footer-columns { grid-template-columns: repeat(2, auto); justify-content: end; gap: var(--p-space-24); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .footer-legal-links { width: auto; justify-content: flex-end; gap: var(--p-space-6); flex-wrap: wrap; }
  .legal-hero { padding: var(--p-space-30) 0 var(--p-space-16); }
  .legal-content { padding: var(--p-space-12) var(--p-space-10); }

  /* Page Hero */
  .section-page-hero { padding: var(--p-space-30) 0 var(--p-space-16); }
  .page-hero-headline { font-size: clamp(2.75rem, 5vw, 3.5rem); }

  /* Contact */
  .contact-grid { flex-direction: row; align-items: flex-start; }
  .contact-form-card { flex: 3; }
  .contact-info { flex: 1; min-width: 240px; }
  .form-row { flex-direction: row; gap: var(--p-space-4); }
  .form-row .form-group { flex: 1; }
  .contact-submit { width: auto; }

  /* Values */
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }

  /* Team */
  .section-team { margin: 0 var(--p-space-8); }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }

  /* FAQ */
  .section-faq { margin: 0 var(--p-space-8); }

  /* Parent Company */
  .parent-card { padding: var(--p-space-12) var(--p-space-10); }
  .parent-content { flex-direction: row; text-align: left; align-items: flex-start; }
  .parent-info { text-align: left; }

  /* Programm page */
  
  .section-hero--thankyou { padding: var(--p-space-30) 0 var(--p-space-16); }
  .accordion-meta { display: block; }
  .accordion-trigger { padding: var(--p-space-6) var(--p-space-8); }
  .accordion-body { padding: 0 var(--p-space-8) var(--p-space-10); padding-left: calc(var(--p-space-8) + 40px + var(--p-space-4)); }
  .section-faq .accordion-body { padding-left: var(--p-space-8); }
  .pricing-grid { flex-direction: row; }
  .pricing-card { flex: 1; }
  .pricing-card--featured { padding: var(--p-space-10) var(--p-space-8); }
  .pricing-card--enterprise { padding: var(--p-space-10) var(--p-space-8); }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
  .section-article-hero { padding: var(--p-space-30) 0 var(--p-space-12); }

  /* Webinare */
  .webinar-grid { grid-template-columns: repeat(2, 1fr); gap: var(--p-space-6); }
  .webinar-testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: var(--p-space-6); }
  .webinar-newsletter-box { flex-direction: row; align-items: center; padding: var(--p-space-12) var(--p-space-10); }
  .webinar-newsletter-content { flex: 1; }
  .webinar-newsletter-form { flex: 1; }
  .webinar-newsletter-input-group { flex-direction: row; }
  .section-webinar-hero { padding: var(--p-space-30) 0 var(--p-space-12); }
  .webinar-body-layout { flex-direction: row; align-items: flex-start; }
  .webinar-body-main { flex: 3; }
  .webinar-body-sidebar { flex: 2; min-width: 280px; position: sticky; top: 100px; }
  .speaker-card { flex-direction: row; text-align: left; align-items: flex-start; padding: var(--p-space-10); }
  .speaker-info { flex: 1; }
}


/* ==========================================================
   18. RESPONSIVE — Desktop (1024px+)
   ========================================================== */
@media (min-width: 1024px) {
  .container { padding: 0 var(--p-space-12); }
  .nav-links { display: flex; }
  .nav-mobile-toggle { display: none; }
  .section-hero { padding: var(--p-space-40) 0 var(--p-space-40); min-height: 800px; display: flex; align-items: center; }
  .hero-headline { font-size: clamp(3rem, 4.5vw, var(--p-font-4xl)); }
  .section-social-proof { margin-top: -80px; }
  .section-problems { padding: var(--space-section-y-lg) 0 var(--p-space-30); }
  .section-problems { margin: 0 auto; max-width: calc(var(--layout-container) + 96px); border-radius: var(--p-radius-xl); }
  .problems-header { max-width: none; }
  .problem-card { flex: 1 1 calc(33.333% - 16px); padding: var(--p-space-10) var(--p-space-8); }
  .problem-card:last-child { flex: 1 1 calc(33.333% - 16px); max-width: none; margin: 0; }
  .section-programs { padding: var(--space-section-y-lg) 0; }
  .programs-wrapper { padding: 0 var(--p-space-12); }
  .programs-grid { max-width: var(--layout-narrow); }
  .program-card { padding: var(--p-space-12); }
  .section-usps { padding: var(--space-section-y-lg) 0; }
  .usps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--p-space-6); }
  .section-testimonials { padding: var(--space-section-y-lg) 0 var(--p-space-12); }
  .testimonial-card { flex: 0 0 calc(33.333% - 16px); min-width: 0; }
  .testimonials-grid { overflow: hidden; }
  .cta-box { padding: var(--p-space-24) var(--p-space-16); border-radius: var(--p-radius-xl); }
  .footer { padding: var(--p-space-20) 0 var(--p-space-10); }
  .legal-content { padding: var(--p-space-16) var(--p-space-12); }

  /* Page Hero */
  .section-page-hero { padding: var(--p-space-40) 0 var(--p-space-20); }
  .page-hero-headline { font-size: clamp(3rem, 4.5vw, var(--p-font-4xl)); }

  /* Contact */
  .contact-form-card { padding: var(--p-space-12) var(--p-space-10); }
  .contact-info-card { padding: var(--p-space-8); }

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

  /* Team */
  .section-team { margin: 0 auto; max-width: calc(var(--layout-container) + 96px); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-card { padding: var(--p-space-8); }

  /* Parent Company */
  .parent-card { padding: var(--p-space-16) var(--p-space-12); }
  .parent-logo-placeholder { width: 160px; height: 160px; }

  /* Programm page */
  
  .section-hero--thankyou { padding: var(--p-space-40) 0 var(--p-space-20); min-height: auto; display: flex; align-items: center; }
  .section-curriculum { padding: var(--space-section-y-lg) 0; }
  .section-transformation { padding: var(--space-section-y-lg) 0; }
  .transformation-grid { grid-template-columns: repeat(2, 1fr); }
  .transformation-deliverables-grid { grid-template-columns: repeat(4, 1fr); }
  .section-leadmagnet { padding: var(--space-section-y-lg) 0; }
  .leadmagnet-card { grid-template-columns: 1fr 1fr; padding: var(--p-space-16) var(--p-space-12); align-items: center; }
  .leadmagnet-benefits { flex-direction: column; }
  .leadmagnet-input-row { flex-direction: row; }
  .leadmagnet-input { flex: 1; }
  .section-pricing { padding: var(--space-section-y-lg) 0; }
  .pricing-card--featured { padding: var(--p-space-12) var(--p-space-10); }
  .pricing-card--enterprise { padding: var(--p-space-12) var(--p-space-10); }
  .section-faq { padding: var(--space-section-y-lg) 0; margin: 0 auto; max-width: calc(var(--layout-container) + 96px); }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .section-article-hero { padding: var(--p-space-40) 0 var(--p-space-16); }

  /* Webinare */
  .webinar-grid { grid-template-columns: repeat(3, 1fr); }
  .section-webinar-hero { padding: var(--p-space-40) 0 var(--p-space-16); }
  .webinar-detail-hero-layout { flex-direction: row; align-items: flex-start; }
  .webinar-detail-image { flex: 1; }
  .webinar-detail-info { flex: 1; }
  .webinar-registration-card { padding: var(--p-space-10) var(--p-space-8); }
  .speaker-card { padding: var(--p-space-12) var(--p-space-10); }
}


/* ==========================================================
   19. RESPONSIVE — Wide (1280px+)
   ========================================================== */
@media (min-width: 1280px) {
  .hero-headline { font-size: var(--p-font-4xl); }
  .hero-orb-1 { width: 704px; height: 704px; }
  .hero-orb-2 { width: 552px; height: 552px; }
}


/* ==========================================================
   20. MOBILE TOUCH & SPACING FIXES
   ========================================================== */

/* A11y: dots get invisible padding for 44px hit area (keyboard + touch) */
.testimonials-nav-dot, .programs-nav-dot { position: relative; padding: 18px; background-clip: content-box; }

/* Small mobile devices (≤480px) */
@media (max-width: 480px) {
  .hero-orb-1, .hero-orb-2, .hero-orb-3 { display: none; }
  .hero-video-wrap { opacity: 0.15; }
  .section-hero { padding: var(--p-space-30) 0 var(--p-space-20); }
  .cta-box { padding: var(--p-space-10) var(--p-space-4); }
  .stats-bar { gap: var(--p-space-3); padding: var(--p-space-6); }
  .footer-newsletter-btn { width: 100%; }
  .section-problems { margin: 0 var(--p-space-2); }
  .section-faq { margin: 0 var(--p-space-2); }
  .section-team { margin: 0 var(--p-space-2); }
}

/* Extra small screens (≤360px) */
@media (max-width: 360px) {
  .hero-video-wrap { display: none; }
  .section-problems { margin: 0; border-radius: var(--p-radius-md); }
  .testimonial-card { min-width: 260px; flex: 0 0 92%; }
  .program-card { min-width: 260px; flex: 0 0 92%; }
}


/* ==========================================================
   21. TESTIMONIAL CAROUSEL ARROWS
   ========================================================== */
.testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-4);
  margin-top: var(--p-space-8);
  position: relative;
  z-index: 3;
}

.testimonial-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--p-white);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s var(--p-ease-out);
  box-shadow: var(--p-shadow-sm);
  padding: 0;
  flex-shrink: 0;
}

.testimonial-arrow:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 24px rgba(233, 30, 140, 0.25), 0 0 48px rgba(123, 31, 162, 0.1);
  border-color: var(--brand-primary);
}

.testimonial-arrow:focus-visible {
  outline: 2px solid var(--brand-primary-bright);
  outline-offset: 4px;
}

.testimonial-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.testimonial-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--text-light-primary);
  transition: color 0.4s var(--p-ease-out);
}

.testimonial-arrow:hover svg {
  color: var(--brand-primary);
}

.testimonial-arrow:disabled svg {
  color: var(--text-light-muted);
}


/* ==========================================================
   22. SECTION — WARUM AI CHAMPIONS (Why Us)
   ========================================================== */
.section-why-us {
  position: relative;
  padding: var(--space-section-y) 0;
  background: var(--bg-dark);
  overflow: hidden;
}

.why-us-header {
  margin-bottom: var(--space-header-bottom);
  text-align: center;
  position: relative;
  z-index: 2;
}

.why-us-headline {
  font-size: var(--type-h1);
  font-weight: var(--p-weight-black);
  color: var(--text-dark-primary);
  margin-bottom: var(--space-text-gap);
}

.why-us-subline {
  font-size: var(--type-body-lg);
  color: var(--text-dark-secondary);
  max-width: 560px;
  line-height: var(--p-leading-relaxed);
  margin-left: auto;
  margin-right: auto;
}

.why-us-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap);
  position: relative;
  z-index: 2;
}

.why-us-item {
  display: flex;
  align-items: flex-start;
  gap: var(--p-space-6);
  padding: var(--p-space-8);
  border-radius: var(--p-radius-lg);
  background: linear-gradient(var(--bg-dark), var(--bg-dark)),
              linear-gradient(135deg, rgba(233,30,140,0.2), rgba(63,81,181,0.2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.5s var(--p-ease-out);
}

.why-us-item:hover {
  background: linear-gradient(var(--bg-dark-elevated), var(--bg-dark-elevated)),
              linear-gradient(135deg, rgba(233,30,140,0.35), rgba(63,81,181,0.35));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.why-us-number {
  font-size: var(--p-font-display);
  font-weight: var(--p-weight-black);
  line-height: var(--p-leading-none);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
  min-width: 56px;
}

.why-us-content {
  flex: 1;
}

.why-us-title {
  font-size: var(--type-h3);
  font-weight: var(--p-weight-bold);
  color: var(--text-dark-primary);
  margin-bottom: var(--p-space-2);
}

.why-us-text {
  font-size: var(--type-body);
  color: var(--text-dark-secondary);
  line-height: var(--p-leading-relaxed);
}

@media (min-width: 768px) {
  .why-us-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-card-gap);
  }
}

@media (min-width: 1024px) {
  .section-why-us {
    padding: var(--space-section-y-lg) 0;
  }

  .why-us-item {
    padding: var(--p-space-10);
  }
}


/* ==========================================================
   23. WEBINAR SINGLE PAGE
   ========================================================== */
.section-webinar-single {
  position: relative;
  padding: var(--space-section-y) 0;
  background: var(--bg-light);
  overflow: hidden;
}

.webinar-single-grid {
  display: flex;
  flex-direction: column;
  gap: var(--p-space-10);
}

.webinar-single-content {
  flex: 1;
}

.webinar-single-sidebar {
  width: 100%;
}

@media (min-width: 768px) {
  .webinar-single-grid {
    flex-direction: row;
    gap: var(--p-space-12);
    align-items: flex-start;
  }

  .webinar-single-content {
    flex: 1 1 60%;
  }

  .webinar-single-sidebar {
    flex: 0 0 360px;
    position: sticky;
    top: 120px;
  }
}

@media (min-width: 1024px) {
  .section-webinar-single {
    padding: var(--space-section-y-lg) 0;
  }

  .webinar-single-sidebar {
    flex: 0 0 400px;
  }
}


/* ==========================================================
   24. PROCESS TIMELINE — 6-Week Journey
   ========================================================== */
.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--p-space-6);
}

/* Vertical line running down the left side */
.process-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(233, 30, 140, 0.4),
    rgba(123, 31, 162, 0.4),
    rgba(63, 81, 181, 0.4)
  );
  border-radius: 1px;
}

.process-step {
  position: relative;
  padding: var(--p-space-6) 0 var(--p-space-10) var(--p-space-10);
}

.process-step:last-child {
  padding-bottom: 0;
}

/* Circle marker on the timeline */
.process-step-marker {
  position: absolute;
  left: calc(var(--p-space-6) * -1);
  top: var(--p-space-6);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-gradient);
  border: 3px solid var(--bg-light);
  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.25);
  z-index: 2;
  transition: all 0.4s var(--p-ease-out);
}

.process-step:hover .process-step-marker {
  box-shadow: 0 0 0 4px rgba(233, 30, 140, 0.2), var(--p-shadow-glow);
  transform: scale(1.15);
}

/* Dark background variant marker */
.section-why-us .process-step-marker,
[data-theme="dark"] .process-step-marker {
  border-color: var(--bg-dark);
}

.process-step-content {
  padding: var(--p-space-6) var(--p-space-8);
  border-radius: var(--p-radius-lg);
  background: linear-gradient(var(--p-white), var(--p-white)),
              linear-gradient(135deg, rgba(233,30,140,0.12), rgba(63,81,181,0.12));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  transition: all 0.5s var(--p-ease-out);
}

.process-step:hover .process-step-content {
  box-shadow: var(--p-shadow-md);
}

/* Dark background variant content card */
.section-why-us .process-step-content,
.section-problems .process-step-content {
  background: linear-gradient(var(--bg-dark), var(--bg-dark)),
              linear-gradient(135deg, rgba(233,30,140,0.25), rgba(63,81,181,0.25));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.process-step-week {
  display: inline-block;
  font-size: var(--type-caption);
  font-weight: var(--p-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--p-tracking-wider);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--p-space-2);
}

.process-step-title {
  font-size: var(--type-h3);
  font-weight: var(--p-weight-bold);
  color: var(--text-light-primary);
  margin-bottom: var(--p-space-2);
}

/* Dark bg text variants */
.section-why-us .process-step-title,
.section-problems .process-step-title {
  color: var(--text-dark-primary);
}

.process-step-desc {
  font-size: var(--type-body);
  color: var(--text-light-secondary);
  line-height: var(--p-leading-relaxed);
  margin-bottom: var(--p-space-4);
}

.section-why-us .process-step-desc,
.section-problems .process-step-desc {
  color: var(--text-dark-secondary);
}

.process-step-deliverable {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  font-size: var(--type-body-sm);
  font-weight: var(--p-weight-semibold);
  color: var(--brand-primary-text);
  background: var(--brand-gradient-subtle);
  padding: var(--p-space-2) var(--p-space-4);
  border-radius: var(--p-radius-full);
  border: 1px solid rgba(233, 30, 140, 0.15);
}

/* Dark bg deliverable variant */
.section-why-us .process-step-deliverable,
.section-problems .process-step-deliverable {
  color: var(--brand-primary-bright);
  background: rgba(233, 30, 140, 0.12);
  border-color: rgba(233, 30, 140, 0.25);
}

/* Timeline responsive: 768px tablet */
@media (min-width: 768px) {
  .process-timeline {
    padding-left: var(--p-space-10);
  }

  .process-timeline::before {
    left: 19px;
  }

  .process-step-marker {
    left: calc(var(--p-space-10) * -1);
    width: 28px;
    height: 28px;
  }

  .process-step {
    padding-left: var(--p-space-12);
  }

  .process-step-content {
    padding: var(--p-space-8) var(--p-space-10);
  }
}

/* Timeline responsive: 1024px desktop */
@media (min-width: 1024px) {
  .process-timeline {
    padding-left: var(--p-space-12);
    max-width: var(--layout-narrow);
    margin-left: auto;
    margin-right: auto;
  }

  .process-timeline::before {
    left: 23px;
  }

  .process-step-marker {
    left: calc(var(--p-space-12) * -1);
    width: 32px;
    height: 32px;
  }

  .process-step {
    padding-left: var(--p-space-16);
  }

  .process-step-content {
    padding: var(--p-space-10) var(--p-space-12);
  }
}


/* ==========================================================
   25. UTILITIES
   ========================================================== */
.text-center { text-align: center; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-cover-rounded { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.img-cover-circle { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mt-12 { margin-top: var(--p-space-12); }
.logo-marquee-item img { width: auto; height: 32px; display: block; }


/* ==========================================================
   26. FOOTER NEWSLETTER
   ========================================================== */
.footer-newsletter { padding-top: var(--p-space-8); margin-top: var(--p-space-8); border-top: 1px solid var(--border-dark); }
.footer-newsletter-title { font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-dark-primary); margin-bottom: var(--p-space-3); }
.footer-newsletter-text { font-size: var(--type-body-sm); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); margin-bottom: var(--p-space-4); max-width: 480px; }
.footer-newsletter-form { display: flex; flex-direction: column; gap: var(--p-space-3); max-width: 480px; }
.footer-newsletter-row { display: flex; flex-direction: column; gap: var(--p-space-3); }
.footer-newsletter-input { flex: 1; padding: var(--p-space-3) var(--p-space-4); background: rgba(255,255,255,0.06); border: 1px solid var(--border-dark); border-radius: var(--p-radius-sm); color: var(--text-dark-primary); font-size: var(--type-body); font-family: var(--p-font-family); transition: border-color 0.3s var(--p-ease-out); }
.footer-newsletter-input::placeholder { color: var(--text-dark-muted); }
.footer-newsletter-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(233,30,140,0.15); }
.footer-newsletter-btn { white-space: nowrap; padding: var(--p-space-3) var(--p-space-6); }
.footer-newsletter-checkbox { display: flex; align-items: flex-start; gap: var(--p-space-2); }
.footer-newsletter-checkbox input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--brand-primary); cursor: pointer; }
.footer-newsletter-checkbox label { font-size: var(--type-caption); color: var(--text-dark-secondary); line-height: 1.4; cursor: pointer; }
.footer-newsletter-checkbox a { color: var(--text-dark-primary); text-decoration: underline; }

@media (min-width: 768px) {
  .footer-newsletter-row { flex-direction: row; }
}


/* ==========================================================
   27. ENTERPRISE PAGE
   ========================================================== */
.enterprise-benefits { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); }
.enterprise-benefit { padding: var(--p-space-6); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--p-radius-md); transition: border-color 0.4s var(--p-ease-out); }
.enterprise-benefit:hover { border-color: rgba(233,30,140,0.3); }
.enterprise-benefit-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(233,30,140,0.1); border-radius: var(--p-space-3); color: var(--brand-primary-bright); margin-bottom: var(--p-space-4); }
.enterprise-benefit-title { font-size: var(--type-body); font-weight: var(--p-weight-bold); color: var(--text-dark-primary); margin-bottom: var(--p-space-2); }
.enterprise-benefit-text { font-size: var(--type-body); color: var(--text-dark-secondary); line-height: var(--p-leading-relaxed); }

.enterprise-comparison { display: grid; grid-template-columns: 1fr; gap: var(--p-space-6); max-width: var(--layout-narrow); margin: 0 auto; }
.enterprise-vs-card { padding: var(--p-space-8); border-radius: var(--p-radius-lg); }
.enterprise-vs-standard { background: var(--bg-light-subtle); border: 1px solid var(--border-light); }
.enterprise-vs-enterprise { background: var(--bg-dark-elevated); border: 1px solid rgba(233,30,140,0.4); color: #ffffff; }
.enterprise-vs-title { font-size: var(--type-h2); font-weight: var(--p-weight-bold); margin-bottom: var(--p-space-6); }
.enterprise-vs-enterprise .enterprise-vs-title { color: #ffffff; }
.enterprise-vs-standard .enterprise-vs-title { color: var(--text-light-primary); }
.enterprise-vs-description { font-size: var(--type-body); color: rgba(255, 255, 255, 0.92); margin-bottom: var(--p-space-6); line-height: var(--p-leading-relaxed); }
.enterprise-vs-list { display: flex; flex-direction: column; gap: var(--p-space-3); }
.enterprise-vs-item { display: flex; align-items: flex-start; gap: var(--p-space-3); font-size: var(--type-body); line-height: var(--p-leading-relaxed); }
.enterprise-vs-enterprise .enterprise-vs-item { color: rgba(255, 255, 255, 0.92); }
.enterprise-vs-standard .enterprise-vs-item { color: var(--text-light-secondary); }
.enterprise-vs-check { flex-shrink: 0; margin-top: 3px; }
.enterprise-vs-enterprise .enterprise-vs-check { color: var(--brand-primary-bright); }
.enterprise-vs-standard .enterprise-vs-check { color: var(--text-light-muted); }

@media (min-width: 768px) {
  .enterprise-benefits { grid-template-columns: repeat(2, 1fr); }
  .enterprise-comparison { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .enterprise-benefits { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================
   28. PREFERS REDUCED MOTION (A11y SC 2.3.3)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .logo-marquee { animation: none; }
  .hero-label-dot { animation: none; }
  .hero-orb { animation: none; }
  .hero-video { animation: none; }
  .cta-orb-1, .cta-orb-2 { animation: none; }
  .btn:hover { transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ========================================================================
   Cookie Consent Banner
   ======================================================================== */

.consent-banner {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 44, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.consent-card {
  position: relative;
  pointer-events: auto;
  width: min(720px, calc(100% - 2rem));
  margin: 1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(11, 11, 44, 0.28), 0 4px 16px rgba(11, 11, 44, 0.12);
  border: 1px solid rgba(233, 30, 140, 0.15);
  color: #0b0b2c;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  animation: consent-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes consent-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.consent-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #0b0b2c;
  letter-spacing: -0.01em;
}

.consent-intro {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0 0 1rem;
}

.consent-intro a {
  color: #E91E8C;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  margin: 0.75rem 0 1rem;
  background: #F7F7FB;
  border-radius: 12px;
}

.consent-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #3a3a52;
  border: 1px solid rgba(11, 11, 44, 0.08);
  transition: border-color 0.15s ease;
}

.consent-option:hover {
  border-color: rgba(233, 30, 140, 0.3);
}

.consent-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #E91E8C;
  cursor: pointer;
}

.consent-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.consent-option strong {
  color: #0b0b2c;
  font-weight: 700;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.consent-actions .btn {
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  min-width: 0;
}

/* Secondary-Buttons im Consent-Banner: Override, weil .btn-secondary global
   fuer dunkle Hintergruende gebaut ist (weisser Text auf Glass) — im weissen
   Consent-Card war das unsichtbar. */
.consent-actions .btn-secondary {
  background: #F7F7FB;
  color: #0b0b2c;
  border: 1px solid rgba(11, 11, 44, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.consent-actions .btn-secondary:hover {
  background: #ffffff;
  border-color: rgba(233, 30, 140, 0.4);
  color: #0b0b2c;
}

.consent-btn-details {
  margin-right: auto;
}

@media (max-width: 640px) {
  .consent-card {
    padding: 1.25rem 1.125rem 1.125rem;
  }
  .consent-title {
    font-size: 1.125rem;
  }
  .consent-intro {
    font-size: 0.875rem;
  }
  .consent-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .consent-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .consent-btn-details {
    margin-right: 0;
  }
}

body.has-consent-banner {
  /* Kein Scroll-Lock — Banner ist non-blocking, der User soll die Datenschutz-Seite
     erreichen können, falls er von dort aus sein Consent geben will */
}

/* Footer Cookie-Re-Open-Link — auch Tastatur-erreichbar */
.consent-reopen-link {
  cursor: pointer;
}

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

.faq-hero {
  position: relative;
  padding: 7rem 0 3rem;
  background: linear-gradient(180deg, #0B0B2C 0%, #1a1a3f 100%);
  color: #ffffff;
  overflow: hidden;
}

.faq-hero-headline {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem;
  color: #ffffff;
  max-width: 52ch;
}

.faq-hero-subline {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.faq-hero-subline a {
  color: #E91E8C;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-section {
  padding: 4rem 0 6rem;
  background: #F7F7FB;
}

.container-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.faq-cluster-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(233, 30, 140, 0.15);
  letter-spacing: -0.01em;
}

.faq-cluster-title:first-of-type {
  margin-top: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.faq-item {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(11, 11, 44, 0.08);
  box-shadow: 0 2px 8px rgba(11, 11, 44, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(233, 30, 140, 0.25);
}

.faq-item[open] {
  border-color: rgba(233, 30, 140, 0.4);
  box-shadow: 0 4px 16px rgba(233, 30, 140, 0.08);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0b0b2c;
  cursor: pointer;
  list-style: none;
  line-height: 1.4;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E91E8C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #3a3a52;
  border-top: 1px solid rgba(11, 11, 44, 0.06);
  padding-top: 1rem;
  margin-top: -0.25rem;
}

.faq-answer p {
  margin: 0;
}

.faq-answer a {
  color: #E91E8C;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-cta {
  margin-top: 3rem;
  padding: 2.25rem 1.75rem;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  border-radius: 20px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 16px 48px rgba(233, 30, 140, 0.25);
}

.faq-cta h2 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.625rem;
  font-weight: 900;
  margin: 0 0 0.5rem;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.faq-cta p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.5rem;
}

.faq-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .faq-hero {
    padding: 6rem 0 2.5rem;
  }
  .faq-question {
    font-size: 0.9375rem;
    padding: 1rem 1.125rem;
  }
  .faq-answer {
    padding: 0 1.125rem 1.125rem;
    font-size: 0.875rem;
  }
  .faq-cta {
    padding: 1.75rem 1.25rem;
  }
  .faq-cta h2 {
    font-size: 1.375rem;
  }
  .faq-cta-actions {
    flex-direction: column;
  }
  .faq-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================================================
   Wissensbereich — TOC
   ======================================================================== */

.wissen-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(11, 11, 44, 0.08);
  margin-bottom: 2rem;
}

.wissen-toc-link {
  padding: 0.5rem 0.875rem;
  background: #F7F7FB;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0b0b2c;
  text-decoration: none;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.wissen-toc-link:hover {
  background: rgba(233, 30, 140, 0.08);
  border-color: rgba(233, 30, 140, 0.25);
  color: #E91E8C;
}

@media (max-width: 640px) {
  .wissen-toc {
    padding: 0.75rem;
    gap: 0.375rem;
  }
  .wissen-toc-link {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
  }
}

/* Team-Photos Duotone: DEAKTIVIERT — siehe B&W-Block weiter unten */

/* ========================================================================
   Blog Article — Author Bio Box
   ======================================================================== */

.section-author {
  padding: 3rem 0 2rem;
  background: #F7F7FB;
}

.author-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  padding: 1.75rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(11, 11, 44, 0.08);
  box-shadow: 0 2px 12px rgba(11, 11, 44, 0.04);
}

.author-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  isolation: isolate;
}

.author-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05) brightness(0.95);
}

.author-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(233, 30, 140, 0.35) 0%, rgba(123, 31, 162, 0.28) 50%, rgba(63, 81, 181, 0.35) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.author-body {
  min-width: 0;
}

.author-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #E91E8C;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.375rem;
}

.author-name {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 0.125rem;
  letter-spacing: -0.01em;
}

.author-role {
  font-size: 0.875rem;
  color: #6a6a85;
  margin: 0 0 0.75rem;
}

.author-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3a3a52;
  margin: 0 0 0.875rem;
}

.author-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #E91E8C;
  text-decoration: none;
}

.author-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .author-card {
    grid-template-columns: 72px 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  .author-avatar {
    width: 72px;
    height: 72px;
  }
  .author-name {
    font-size: 1.125rem;
  }
  .author-bio {
    font-size: 0.875rem;
  }
}

/* ========================================================================
   Footer Social Icons
   ======================================================================== */

.footer-social {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.25rem;
  align-items: center;
}

.footer-social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  background: rgba(233, 30, 140, 0.22);
  color: #ffffff;
  border-color: rgba(233, 30, 140, 0.55);
  transform: translateY(-1px);
}
.footer-social-link:focus-visible {
  outline: 2px solid var(--brand-primary-bright);
  outline-offset: 2px;
}

.footer-social-link svg {
  display: block;
  transition: transform 0.2s ease;
}

.footer-social-link:hover svg {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link,
  .footer-social-link svg {
    transition: none;
  }
  .footer-social-link:hover {
    transform: none;
  }
}

/* ========================================================================
   Consistency Fixes (Audit 2026-04-15)
   ======================================================================== */

/* Author-Avatar: gleiche Hover-Aktion wie Team-Avatar für visuelle Konsistenz */
.author-card .author-avatar-img {
  transition: filter 0.3s ease;
}

.author-card:hover .author-avatar-img {
  filter: grayscale(0%) contrast(1) brightness(1);
}

.author-card:hover .author-avatar::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Wissen/FAQ: TOC-Anker brauchen Scroll-Margin, damit Anker-Sprünge nicht unter der
   fixed Navigation verschwinden */
.faq-section h2[id],
#grundlagen,
#tools,
#konzepte,
#methodik,
#automation,
#governance {
  scroll-margin-top: 96px;
}

/* Wissen-TOC auf Mobile: etwas größere Touch-Targets für bessere Lesbarkeit */
@media (max-width: 640px) {
  .wissen-toc-link {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
  }
}

/* ========================================================================
   Logo-Marquee — Real-Logo-Override
   ======================================================================== */

/* Die Kundenlogos haben sehr unterschiedliche Aspect Ratios — von 1.06:1
   (Diakonie, quadratisch) bis 5.8:1 (Kuenker, sehr breit). Strategie:
   gemeinsame Basis-Hoehe 44px, sehr breite Logos per-file auf kleinere
   Hoehe gedrueckt damit sie die Marquee nicht dominieren. */
.logo-marquee-item:has(img) {
  opacity: 0.8;
  min-width: auto;
  height: auto;
  padding: 0 var(--p-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.logo-marquee-item:has(img):hover {
  opacity: 1;
}

.logo-marquee-item img {
  width: auto;
  height: 44px;
  max-width: none;
  display: block;
  filter: saturate(0.85);
}

/* Per-Logo-Overrides: sehr breite Logos bekommen weniger Hoehe,
   damit sie optisch balanciert mit den quadratischen sitzen */
.logo-marquee-item img[src*="kuenker"] {
  height: 28px;  /* 28 * 5.8 ≈ 162px wide */
}
.logo-marquee-item img[src*="drk"] {
  height: 38px;  /* 38 * 2.33 ≈ 89px wide */
}

@media (max-width: 768px) {
  .logo-marquee-item img {
    height: 36px;
  }
  .logo-marquee-item img[src*="kuenker"] {
    height: 24px;
  }
  .logo-marquee-item img[src*="drk"] {
    height: 32px;
  }
  .logo-marquee-item:has(img) {
    padding: 0 var(--p-space-3);
  }
}

/* ========================================================================
   Curriculum Grid (replaces old accordion layout)
   ======================================================================== */

/* Kick-off als horizontaler Pre-Header */
.curriculum-kickoff {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem 1.75rem;
  margin-top: 3rem;
  margin-bottom: 1.75rem;
  background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(123, 31, 162, 0.04) 50%, rgba(63, 81, 181, 0.05));
  border: 1px dashed rgba(233, 30, 140, 0.35);
  border-radius: 16px;
}

.curriculum-kickoff-number {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  opacity: 0.85;
}

.curriculum-kickoff-body {
  min-width: 0;
}

.curriculum-kickoff-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0.125rem 0 0.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.curriculum-kickoff-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
}

.curriculum-kickoff-deliverable {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(233, 30, 140, 0.25);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0b0b2c;
  white-space: nowrap;
}

.curriculum-kickoff-deliverable svg {
  flex-shrink: 0;
  color: #E91E8C;
}

/* 6-Wochen-Grid */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.curriculum-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(233, 30, 140, 0.25);
  box-shadow: 0 16px 40px rgba(233, 30, 140, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: hidden;
}

.curriculum-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
}

.curriculum-card-number {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  margin-bottom: 0.375rem;
}

.curriculum-card-week {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #E91E8C;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.curriculum-card-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0.375rem 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.curriculum-card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
  flex-grow: 1;
}

.curriculum-card-deliverable {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 11, 44, 0.08);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #0b0b2c;
  font-weight: 600;
}

.curriculum-card-deliverable svg {
  flex-shrink: 0;
  color: #E91E8C;
  margin-top: 1px;
}

/* Finale-Card (Woche 6) mit dezentem Gradient-BG */
.curriculum-card--finale {
  background: linear-gradient(135deg, #ffffff 0%, rgba(233, 30, 140, 0.04) 100%);
  border-color: rgba(233, 30, 140, 0.18);
}

.curriculum-card--finale::before {
  opacity: 1;
}

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

@media (max-width: 640px) {
  .curriculum-grid {
    grid-template-columns: 1fr;
  }
  .curriculum-kickoff {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.25rem;
  }
  .curriculum-kickoff-deliverable {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .curriculum-kickoff-number {
    font-size: 2.5rem;
  }
  .curriculum-card {
    padding: 1.5rem 1.25rem 1.25rem;
  }
  .curriculum-card-number {
    font-size: 2.25rem;
  }
}

/* ========================================================================
   Pricing — Solo dominant, Enterprise schmaler daneben (60/40 Split)
   Minimaler Override — nur flex-Gewichtung, originale Card-Optik bleibt
   ======================================================================== */

@media (min-width: 768px) {
  .pricing-card--featured {
    flex: 1.55;
  }
  .pricing-card--enterprise {
    flex: 1;
  }
}

/* Solo-CTA moderater — nicht mehr full-width Bloeckchen */
.pricing-card--featured .pricing-cta {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (max-width: 640px) {
  .pricing-card--featured .pricing-cta {
    max-width: none;
  }
}

/* ========================================================================
   Enterprise Page — Sales Sections
   ======================================================================== */

/* Hero Stats Row */
.enterprise-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.enterprise-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.enterprise-hero-stat-value {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

.enterprise-hero-stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.enterprise-hero-ctas {
  display: flex;
  gap: 0.875rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Pain Points Section */
.section-enterprise-pain {
  padding: var(--space-section-y) 0;
  background: var(--bg-light);
}

.enterprise-pain-header {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.enterprise-pain-headline {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: #0b0b2c;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
}

.enterprise-pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--layout-narrow);
  margin: 0 auto;
}

@media (max-width: 880px) {
  .enterprise-pain-grid {
    grid-template-columns: 1fr;
  }
}

.enterprise-pain-card {
  padding: 2rem 1.75rem;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 44, 0.08);
  border-radius: 16px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.enterprise-pain-card:hover {
  transform: translateY(-3px);
  border-color: rgba(233, 30, 140, 0.25);
  box-shadow: 0 16px 40px rgba(233, 30, 140, 0.1);
}

.enterprise-pain-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(63, 81, 181, 0.08));
  border-radius: 12px;
  color: #E91E8C;
  margin-bottom: 1rem;
}

.enterprise-pain-card h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.enterprise-pain-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3a3a52;
  margin: 0;
}

/* Process Steps Section */
.section-enterprise-process {
  padding: var(--space-section-y) 0;
  background: var(--bg-dark);
  color: #fff;
}

.enterprise-process-header {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.enterprise-process-headline {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem;
}

.enterprise-process-subline {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.enterprise-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: var(--layout-narrow);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  counter-reset: process;
}

@media (max-width: 1024px) {
  .enterprise-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .enterprise-process-grid {
    grid-template-columns: 1fr;
  }
}

.enterprise-process-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.enterprise-process-step:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(233, 30, 140, 0.35);
}

.enterprise-process-number {
  display: block;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.enterprise-process-step h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.enterprise-process-step p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Logo Row */
.section-enterprise-logos {
  padding: 3rem 0;
  background: var(--bg-light);
  border-top: 1px solid rgba(11, 11, 44, 0.08);
  border-bottom: 1px solid rgba(11, 11, 44, 0.08);
}

.enterprise-logos-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(11, 11, 44, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 1.75rem;
}

/* Enterprise Benefits Section — flat full-width dark,
   NICHT als floating rounded card wie .section-problems */
.section-enterprise-benefits {
  position: relative;
  padding: 0 0 var(--space-section-y);  /* kein top-padding, merged mit section-enterprise-process darueber */
  background: var(--bg-dark);
  color: var(--text-dark-primary);
}

.section-enterprise-benefits .problems-header {
  padding-top: var(--space-section-y);
  margin-bottom: var(--space-header-bottom);
}

/* Process-Section bekommt reduziertes bottom-padding, damit sie in die
   benefits-Section fliesst */
.section-enterprise-process {
  padding-bottom: var(--space-section-y);
}

.section-enterprise-benefits + .section-enterprise-process,
.section-enterprise-process + .section-enterprise-benefits {
  padding-top: 0;
}

/* ========================================================================
   Webinar Content Section — Refresh (no form, CTAs → WebinarGeek)
   ======================================================================== */

.webinar-section-headline {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 900;
  color: #0b0b2c;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0.625rem 0 1.25rem;
}

.webinar-intro,
.webinar-learn,
.webinar-agenda {
  margin-bottom: 3rem;
}

.webinar-intro-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #3a3a52;
  margin: 0;
}

/* Learn Grid */
.webinar-learn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}

@media (max-width: 640px) {
  .webinar-learn-grid {
    grid-template-columns: 1fr;
  }
}

.webinar-learn-card {
  position: relative;
  padding: 1.5rem 1.375rem;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 44, 0.08);
  border-radius: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.webinar-learn-card:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 30, 140, 0.3);
  box-shadow: 0 12px 28px rgba(233, 30, 140, 0.08);
}

.webinar-learn-card--wide {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #ffffff 0%, rgba(233, 30, 140, 0.05) 100%);
  border-color: rgba(233, 30, 140, 0.2);
}

.webinar-learn-number {
  display: inline-block;
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
}

.webinar-learn-card h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 0.375rem;
  line-height: 1.3;
}

.webinar-learn-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
}

/* Inline CTA zwischen Sections */
.webinar-inline-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.625rem 1.75rem;
  margin: 3rem 0;
  background: linear-gradient(135deg, #0b0b2c 0%, #1a1a3f 100%);
  border-radius: 18px;
  border: 1px solid rgba(233, 30, 140, 0.25);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(11, 11, 44, 0.12);
}

.webinar-inline-cta-text h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.1875rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.webinar-inline-cta-text p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

@media (max-width: 640px) {
  .webinar-inline-cta {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }
}

/* Agenda Timeline */
.webinar-agenda-timeline {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  position: relative;
}

.webinar-agenda-timeline::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 44px;
  width: 2px;
  background: linear-gradient(180deg, #E91E8C 0%, #7B1FA2 50%, #3F51B5 100%);
  opacity: 0.25;
}

.webinar-agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  padding: 0.75rem 0;
  align-items: flex-start;
}

.webinar-agenda-time {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 28px;
  background: #ffffff;
  border: 2px solid #E91E8C;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #E91E8C;
  letter-spacing: 0.02em;
  margin-left: 10px;
  z-index: 1;
}

.webinar-agenda-content h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.webinar-agenda-content p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
}

@media (max-width: 640px) {
  .webinar-agenda-timeline::before {
    left: 36px;
  }
  .webinar-agenda-item {
    grid-template-columns: 80px 1fr;
    gap: 0.875rem;
  }
  .webinar-agenda-time {
    width: 60px;
    font-size: 0.6875rem;
    margin-left: 6px;
  }
}

/* Audience Callout */
.webinar-audience {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 1.625rem;
  margin: 2rem 0;
  background: linear-gradient(135deg, rgba(233, 30, 140, 0.04), rgba(63, 81, 181, 0.04));
  border: 1px solid rgba(233, 30, 140, 0.18);
  border-radius: 16px;
}

.webinar-audience-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  color: #E91E8C;
}

.webinar-audience h3 {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}

.webinar-audience p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
}

/* Quote Block */
.webinar-quote {
  position: relative;
  padding: 2rem 2rem 1.5rem;
  margin: 2rem 0 0;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 44, 0.08);
  border-radius: 16px;
}

.webinar-quote-mark {
  color: rgba(233, 30, 140, 0.2);
  margin-bottom: 0.5rem;
}

.webinar-quote blockquote {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.45;
  color: #0b0b2c;
  margin: 0 0 0.875rem;
  letter-spacing: -0.005em;
}

.webinar-quote figcaption {
  font-size: 0.8125rem;
  color: #6a6a85;
  font-weight: 600;
}

/* Registration Card — Redesign (no form, WebinarGeek CTA) */
.webinar-registration-card {
  position: sticky;
  top: 96px;
  padding: 1.75rem 1.625rem 1.5rem;
  background: linear-gradient(180deg, #0b0b2c 0%, #1a1a3f 100%);
  border: 1px solid rgba(233, 30, 140, 0.3);
  border-radius: 18px;
  color: #ffffff;
  box-shadow: 0 24px 48px rgba(11, 11, 44, 0.18);
}

.webinar-registration-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: linear-gradient(135deg, #E91E8C 0%, #7B1FA2 100%);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.webinar-registration-title {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.625rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.webinar-registration-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1.25rem;
}

.webinar-registration-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.webinar-registration-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.webinar-registration-benefits svg {
  flex-shrink: 0;
  color: #E91E8C;
  margin-top: 2px;
}

.webinar-registration-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.webinar-registration-meta {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ========================================================================
   Team-Photos — Pure B&W (ueber-uns.html)
   User-Feedback: "Bilder nicht zentral ueber dem Namen, ganz in schwarz weiss"

   WICHTIG: NICHT position, top, left oder transform aendern — die originale
   Card-Regel an Zeile ~673 macht position: absolute + translate(-50%, -50%),
   damit das Avatar mittig ueber der Card schwebt. Override nur
   Visual-Properties.
   ======================================================================== */

.team-avatar {
  background: #f3f3f8;  /* neutraler Fallback, kein Gradient mehr */
  isolation: isolate;
}

.team-avatar::after {
  display: none;
  content: none;
}

.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;  /* crop nach oben, damit Gesichter zentriert sind */
  display: block;
  filter: grayscale(100%) contrast(1.08) brightness(0.97);
  transition: transform 0.3s ease;
  will-change: transform;
}

.team-avatar:hover .team-avatar-img {
  filter: grayscale(100%) contrast(1.08) brightness(0.97);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .team-avatar-img,
  .team-avatar:hover .team-avatar-img {
    transition: none;
    transform: none;
  }
}

/* ========================================================================
   Leadmagnet Card — Mobile Order Fix
   Auf Mobile: Visual (Checkliste-Mockup) VOR Content, damit das Bild
   oben sichtbar ist statt unter dem langen Form-Block versteckt.
   Desktop bleibt Side-by-Side mit natuerlicher DOM-Reihenfolge.
   ======================================================================== */
@media (max-width: 767px) {
  .leadmagnet-card {
    gap: var(--p-space-6);
  }
  .leadmagnet-visual {
    order: -1;
  }
  .leadmagnet-content {
    order: 0;
  }
}

/* ========================================================================
   Tools Partner Section — Die Tools, mit denen wir arbeiten
   Logo-Grid mit echten Tools (Claude, OpenAI, Gemini, Langdock, n8n,
   Make, Zapier). Wird auf index.html, programm.html, enterprise.html
   eingesetzt.
   ======================================================================== */
.section-tools-partner {
  position: relative;
  padding: var(--p-space-16) 0;
  background: var(--bg-light);
}

.tools-partner-header {
  text-align: center;
  max-width: var(--layout-narrow);
  margin: 0 auto var(--p-space-10);
}

.tools-partner-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #E91E8C;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--p-space-3);
}

.tools-partner-headline {
  font-family: 'Red Hat Display', system-ui, sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: #0b0b2c;
  margin: 0 0 var(--p-space-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tools-partner-subline {
  font-size: 1rem;
  line-height: 1.55;
  color: #3a3a52;
  margin: 0;
}

.tools-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  max-width: var(--layout-narrow);
  margin: 0 auto;
}

.tools-partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 44, 0.08);
  border-radius: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tools-partner-item:hover {
  border-color: rgba(233, 30, 140, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(233, 30, 140, 0.08);
}

.tools-partner-logo {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.72);
  transition: filter 0.25s ease;
}

.tools-partner-item:hover .tools-partner-logo {
  filter: grayscale(0%) opacity(1);
}


@media (min-width: 640px) {
  .tools-partner-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-tools-partner {
    padding: var(--p-space-20) 0;
  }
  .tools-partner-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  .tools-partner-item {
    height: 96px;
  }
  .tools-partner-logo {
    max-height: 48px;
  }
}