/* ==========================================================================
   BERUFSTÄTIGE PAGE STYLES
   Premium Design für Berufstätige (25-65 Jahre)
   Business-Professional Colors: Cyan, Blue, Green
   
   Kartendesign-Variationen:
   1. beruf-card--featured (Hero/Value Proposition)
   2. problem-card (Pain Points - horizontal layout)
   3. solution-card (Benefits - grid cards)
   4. timeline-card (Praxisbeispiele)
   5. roi-calculator (ROI Visual)
   6. start-card (Getting Started Steps)
   ========================================================================== */

/* ========================================================================
   HERO SECTION
   ======================================================================== */

.hero--page .hero__title .text-gradient {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-beruf {
  position: relative;
  overflow: hidden;
}

.hero-beruf__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.15), 
    rgba(88, 166, 255, 0.1)
  );
  border: 1px solid rgba(57, 208, 216, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent-cyan);
  margin-bottom: var(--space-6);
}

.hero-beruf__badge i {
  font-size: 14px;
}

/* ========================================================================
   1. BERUF CARD - FEATURED (Value Proposition)
   Große zentrale Karte mit Icon und Top-Gradient-Linie
   ======================================================================== */

.beruf-card--featured {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.1) 0%, 
    rgba(88, 166, 255, 0.08) 50%,
    rgba(16, 185, 129, 0.05) 100%
  );
  border: 2px solid rgba(57, 208, 216, 0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
  overflow: hidden;
}

.beruf-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--accent-cyan), 
    var(--accent-primary),
    var(--accent-green),
    transparent
  );
  border-radius: 0 0 4px 4px;
}

.beruf-card--featured__icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.2), 
    rgba(88, 166, 255, 0.1)
  );
  border: 2px solid rgba(57, 208, 216, 0.3);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  position: relative;
}

.beruf-card--featured__icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, 
    var(--accent-cyan), 
    var(--accent-primary)
  );
  border-radius: inherit;
  opacity: 0.3;
  filter: blur(12px);
  z-index: -1;
}

.beruf-card--featured__icon i {
  font-size: 48px;
  color: var(--accent-cyan);
}

.beruf-card--featured h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.beruf-card--featured p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 650px;
  margin: 0 auto;
}

/* ========================================================================
   2. PROBLEM CARDS (Pain Points Section)
   Horizontal-Design mit Icon links, linke Border-Accent
   ======================================================================== */

.problem-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.problem-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--accent-red));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.problem-card:hover {
  transform: translateX(8px);
  border-color: var(--card-accent, var(--accent-red));
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 0 20px var(--card-glow, rgba(248, 113, 113, 0.1));
}

.problem-card:hover::before {
  opacity: 1;
}

.problem-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(248, 113, 113, 0.15)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(248, 113, 113, 0.2));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-card__icon i {
  font-size: 32px;
  color: var(--card-accent, var(--accent-red));
}

.problem-card__content {
  flex: 1;
}

.problem-card__content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.problem-card__content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.problem-card__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(248, 113, 113, 0.1)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(248, 113, 113, 0.15));
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--card-accent, var(--accent-red));
}

.problem-card__stat i {
  font-size: 12px;
}

/* Insight Card Content Styling (alias for problem-card) */
.insight-card {
  flex-direction: column;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-4);
}

.insight-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(248, 113, 113, 0.15));
}

.insight-card .insight-card__icon,
.insight-card .problem-card__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
}

.insight-card .insight-card__icon i,
.insight-card .problem-card__icon i {
  font-size: 36px;
}

.insight-card h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-tight);
}

.insight-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Problem Card Themes */
.problem-card[data-theme="time"] {
  --card-accent: var(--accent-orange);
  --card-accent-bg: rgba(245, 158, 11, 0.15);
  --card-accent-border: rgba(245, 158, 11, 0.25);
  --card-glow: rgba(245, 158, 11, 0.15);
}

.problem-card[data-theme="stress"] {
  --card-accent: var(--accent-red);
  --card-accent-bg: rgba(248, 113, 113, 0.15);
  --card-accent-border: rgba(248, 113, 113, 0.25);
  --card-glow: rgba(248, 113, 113, 0.15);
}

.problem-card[data-theme="career"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.25);
  --card-glow: rgba(139, 92, 246, 0.15);
}

.problem-card[data-theme="future"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.25);
  --card-glow: rgba(88, 166, 255, 0.15);
}

/* Insight Card Themes (for problem cards) */
.insight-card[data-modal="emails"] {
  --card-accent: var(--accent-orange);
  --card-accent-bg: rgba(245, 158, 11, 0.15);
  --card-accent-border: rgba(245, 158, 11, 0.25);
  --card-glow: rgba(245, 158, 11, 0.15);
}

.insight-card[data-modal="meetings"] {
  --card-accent: var(--accent-red);
  --card-accent-bg: rgba(248, 113, 113, 0.15);
  --card-accent-border: rgba(248, 113, 113, 0.25);
  --card-glow: rgba(248, 113, 113, 0.15);
}

.insight-card[data-modal="reports"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.25);
  --card-glow: rgba(139, 92, 246, 0.15);
}

.insight-card[data-modal="research"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.25);
  --card-glow: rgba(88, 166, 255, 0.15);
}

/* ========================================================================
   3. SOLUTION CARDS (Benefits Section)
   Grid-Cards mit kreisförmigen Icons
   ======================================================================== */

.solution-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    var(--card-gradient-start, rgba(57, 208, 216, 0.15)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.solution-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.15));
}

.solution-card:hover::before {
  opacity: 1;
}

.solution-card__icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--card-gradient-start, rgba(57, 208, 216, 0.2)), 
    var(--card-gradient-end, rgba(57, 208, 216, 0.05))
  );
  border: 2px solid var(--card-accent-border, rgba(57, 208, 216, 0.25));
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.solution-card:hover .solution-card__icon {
  transform: scale(1.1);
}

.solution-card__icon i {
  font-size: 40px;
  color: var(--card-accent, var(--accent-cyan));
}

.solution-card__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.solution-card h3 {
  position: relative;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.solution-card p,
.benefit-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8) !important;
  display: block;
}

/* Force refresh - cache buster */
.solution-card {
  --cache-buster: 1;
}

.solution-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.1)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(57, 208, 216, 0.2));
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--card-accent, var(--accent-cyan));
  transition: all 0.3s ease;
}

.solution-card:hover .solution-card__link {
  background: var(--card-accent, var(--accent-cyan));
  color: white;
}

/* Solution Card Themes */
.solution-card[data-theme="flexibility"] {
  --card-accent: var(--accent-cyan);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.3);
  --card-gradient-start: rgba(57, 208, 216, 0.2);
  --card-gradient-end: rgba(88, 166, 255, 0.05);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.solution-card[data-theme="career"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.3);
  --card-gradient-start: rgba(88, 166, 255, 0.2);
  --card-gradient-end: rgba(139, 92, 246, 0.05);
  --card-glow: rgba(88, 166, 255, 0.15);
}

.solution-card[data-theme="network"] {
  --card-accent: var(--accent-green);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.3);
  --card-gradient-start: rgba(16, 185, 129, 0.2);
  --card-gradient-end: rgba(57, 208, 216, 0.05);
  --card-glow: rgba(16, 185, 129, 0.15);
}

.solution-card[data-theme="skills"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.3);
  --card-gradient-start: rgba(139, 92, 246, 0.2);
  --card-gradient-end: rgba(236, 72, 153, 0.05);
  --card-glow: rgba(139, 92, 246, 0.15);
}

/* Benefit Card Themes (alias for solution-card) */
.benefit-card[data-theme="efficiency"] {
  --card-accent: var(--accent-cyan);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.3);
  --card-gradient-start: rgba(57, 208, 216, 0.2);
  --card-gradient-end: rgba(88, 166, 255, 0.05);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.benefit-card[data-theme="quality"] {
  --card-accent: var(--accent-green);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.3);
  --card-gradient-start: rgba(16, 185, 129, 0.2);
  --card-gradient-end: rgba(57, 208, 216, 0.05);
  --card-glow: rgba(16, 185, 129, 0.15);
}

.benefit-card[data-theme="balance"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.3);
  --card-gradient-start: rgba(88, 166, 255, 0.2);
  --card-gradient-end: rgba(139, 92, 246, 0.05);
  --card-glow: rgba(88, 166, 255, 0.15);
}

/* Value Cards (für Problem Section) */
.value-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    var(--card-gradient-start, rgba(57, 208, 216, 0.15)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.15));
}

.value-card:hover::before {
  opacity: 1;
}

.value-card__icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--card-gradient-start, rgba(57, 208, 216, 0.2)), 
    var(--card-gradient-end, rgba(57, 208, 216, 0.05))
  );
  border: 2px solid var(--card-accent-border, rgba(57, 208, 216, 0.25));
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.value-card:hover .value-card__icon {
  transform: scale(1.1);
}

.value-card__icon i {
  font-size: 40px;
  color: var(--card-accent, var(--accent-cyan));
}

.value-card h3 {
  position: relative;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.value-card p {
  position: relative;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Value Card Themes for Problem Section */
.value-card[data-theme="orange"] {
  --card-accent: var(--accent-orange);
  --card-accent-bg: rgba(245, 158, 11, 0.15);
  --card-accent-border: rgba(245, 158, 11, 0.3);
  --card-gradient-start: rgba(245, 158, 11, 0.2);
  --card-gradient-end: rgba(245, 158, 11, 0.05);
  --card-glow: rgba(245, 158, 11, 0.15);
}

.value-card[data-theme="red"] {
  --card-accent: var(--accent-red);
  --card-accent-bg: rgba(248, 113, 113, 0.15);
  --card-accent-border: rgba(248, 113, 113, 0.3);
  --card-gradient-start: rgba(248, 113, 113, 0.2);
  --card-gradient-end: rgba(248, 113, 113, 0.05);
  --card-glow: rgba(248, 113, 113, 0.15);
}

.value-card[data-theme="primary"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.3);
  --card-gradient-start: rgba(88, 166, 255, 0.2);
  --card-gradient-end: rgba(139, 92, 246, 0.05);
  --card-glow: rgba(88, 166, 255, 0.15);
}

.value-card[data-theme="violet"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.3);
  --card-gradient-start: rgba(139, 92, 246, 0.2);
  --card-gradient-end: rgba(236, 72, 153, 0.05);
  --card-glow: rgba(139, 92, 246, 0.15);
}

.value-card[data-theme="cyan"] {
  --card-accent: var(--accent-cyan);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.3);
  --card-gradient-start: rgba(57, 208, 216, 0.2);
  --card-gradient-end: rgba(88, 166, 255, 0.05);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.value-card[data-theme="green"] {
  --card-accent: var(--accent-green);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.3);
  --card-gradient-start: rgba(16, 185, 129, 0.2);
  --card-gradient-end: rgba(57, 208, 216, 0.05);
  --card-glow: rgba(16, 185, 129, 0.15);
}

/* ========================================================================
   4. TIMELINE - PRAXISBEISPIELE
   Timeline mit Karten für praktische Beispiele
   ======================================================================== */

.timeline {
  position: relative;
  max-width: 800px;
  margin: var(--space-10) auto 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, 
    var(--accent-cyan) 0%, 
    var(--accent-primary) 30%,
    var(--accent-violet) 60%,
    var(--accent-green) 100%
  );
  border-radius: var(--radius-full);
  box-shadow: 
    0 0 20px rgba(57, 208, 216, 0.5),
    0 0 40px rgba(88, 166, 255, 0.3);
}

@media (min-width: 768px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.timeline-item {
  position: relative;
  padding-left: var(--space-16);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .timeline-item {
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
  }
  
  .timeline-item:nth-child(odd) .timeline-card {
    grid-column: 1;
    text-align: right;
    margin-right: var(--space-8);
  }
  
  .timeline-item:nth-child(even) .timeline-card {
    grid-column: 2;
    margin-left: var(--space-8);
  }
}

.timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, 
    var(--card-accent, var(--accent-cyan)), 
    var(--card-accent-secondary, var(--accent-primary))
  );
  border: 4px solid var(--bg-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: white;
  box-shadow: 
    0 8px 24px var(--card-glow, rgba(57, 208, 216, 0.4)),
    0 0 0 4px rgba(57, 208, 216, 0.1);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item:hover .timeline-marker {
  transform: scale(1.1);
  box-shadow: 
    0 12px 32px var(--card-glow, rgba(57, 208, 216, 0.5)),
    0 0 0 6px rgba(57, 208, 216, 0.15);
}

@media (min-width: 768px) {
  .timeline-marker {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .timeline-item:hover .timeline-marker {
    transform: translateX(-50%) scale(1.1);
  }
}

.timeline-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.timeline-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--card-accent, var(--accent-cyan)), 
    var(--card-accent-secondary, var(--accent-primary))
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.timeline-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.1));
}

.timeline-card:hover::before {
  opacity: 1;
}

.timeline-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .timeline-item:nth-child(odd) .timeline-card__header {
    flex-direction: row-reverse;
  }
}

.timeline-card__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.2)), 
    rgba(57, 208, 216, 0.05)
  );
  border: 2px solid var(--card-accent-border, rgba(57, 208, 216, 0.3));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 16px var(--card-glow, rgba(57, 208, 216, 0.15));
  transition: all 0.3s ease;
}

.timeline-card:hover .timeline-card__icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 24px var(--card-glow, rgba(57, 208, 216, 0.25));
}

.timeline-card__icon i {
  font-size: 32px;
  color: var(--card-accent, var(--accent-cyan));
}

.timeline-card__meta {
  flex: 1;
}

.timeline-card__meta h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.timeline-card__meta span {
  font-size: var(--text-sm);
  color: var(--card-accent, var(--accent-cyan));
  font-weight: var(--font-medium);
}

.timeline-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.timeline-card__result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.1), 
    transparent
  );
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--accent-green);
}

.timeline-card__result i {
  font-size: 14px;
}

/* Timeline Themes */
.timeline-item[data-theme="1"] {
  --card-accent: var(--accent-cyan);
  --card-accent-secondary: var(--accent-primary);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.25);
  --card-glow: rgba(57, 208, 216, 0.4);
}

.timeline-item[data-theme="2"] {
  --card-accent: var(--accent-primary);
  --card-accent-secondary: var(--accent-violet);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.25);
  --card-glow: rgba(88, 166, 255, 0.4);
}

.timeline-item[data-theme="3"] {
  --card-accent: var(--accent-green);
  --card-accent-secondary: var(--accent-cyan);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.25);
  --card-glow: rgba(16, 185, 129, 0.4);
}

.timeline-item[data-theme="4"] {
  --card-accent: var(--accent-violet);
  --card-accent-secondary: var(--accent-pink);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.25);
  --card-glow: rgba(139, 92, 246, 0.4);
}

/* ========================================================================
   5. ROI CALCULATOR
   Visuelle Gleichung mit animierten Zahlen
   ======================================================================== */

.roi-section {
  position: relative;
}

.roi-calculator {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-8);
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
}

.roi-calculator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(57, 208, 216, 0.1),
    transparent 60%
  );
}

.roi-equation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8);
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.05), 
    rgba(88, 166, 255, 0.03),
    rgba(16, 185, 129, 0.02)
  );
  border: 1px solid rgba(57, 208, 216, 0.15);
  border-radius: var(--radius-2xl);
  max-width: 900px;
  margin: 0 auto var(--space-10);
}

@media (min-width: 768px) {
  .roi-equation {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-8);
  }
}

.roi-equation__part,
.roi-equation__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  min-width: 140px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.roi-equation__part:hover,
.roi-equation__result:hover {
  transform: translateY(-4px);
  border-color: var(--accent-cyan);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

.roi-equation__result {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.1), 
    rgba(57, 208, 216, 0.05)
  );
  border-color: rgba(16, 185, 129, 0.3);
}

.roi-equation__icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.2), 
    rgba(88, 166, 255, 0.1)
  );
  border: 2px solid rgba(57, 208, 216, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px rgba(57, 208, 216, 0.2);
}

.roi-equation__icon--highlight {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}

.roi-equation__icon i {
  font-size: 28px;
  color: var(--accent-cyan);
}

.roi-equation__icon--highlight i {
  color: white;
}

.roi-equation__label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  text-align: center;
}

.roi-equation__operator {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--accent-cyan);
  text-shadow: 0 0 20px rgba(57, 208, 216, 0.5);
}

.roi-input,
.roi-output {
  text-align: center;
}

.roi-input__value,
.roi-output__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.roi-input__value {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roi-output__value {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roi-input__label,
.roi-output__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

.roi-operator {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-muted);
}

.roi-transformation {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.1), 
    rgba(88, 166, 255, 0.05)
  );
  border: 1px solid rgba(57, 208, 216, 0.2);
  border-radius: var(--radius-xl);
  text-align: center;
  min-width: 200px;
}

.roi-transformation__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  box-shadow: 0 8px 24px rgba(57, 208, 216, 0.3);
}

.roi-transformation__icon i {
  font-size: 28px;
  color: white;
}

.roi-transformation__label {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.roi-transformation__sublabel {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.roi-equals {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--accent-green);
}

.roi-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-primary);
}

@media (min-width: 640px) {
  .roi-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.roi-stat {
  text-align: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.05)), 
    transparent
  );
  border-radius: var(--radius-lg);
}

.roi-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--card-accent, var(--accent-cyan));
  margin-bottom: var(--space-1);
}

.roi-stat__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: var(--font-medium);
}

/* ROI Stat Themes */
.roi-stat[data-theme="time"] {
  --card-accent: var(--accent-cyan);
  --card-accent-bg: rgba(57, 208, 216, 0.1);
}

.roi-stat[data-theme="money"] {
  --card-accent: var(--accent-green);
  --card-accent-bg: rgba(16, 185, 129, 0.1);
}

.roi-stat[data-theme="career"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.1);
}

.roi-stat[data-theme="network"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.1);
}

/* ========================================================================
   STATS CARDS (Standalone Numbers)
   ======================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 800px;
  margin: var(--space-10) auto 0;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, 
    var(--card-accent, var(--accent-cyan)), 
    var(--card-accent-secondary, var(--accent-primary))
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.15));
}

.stat-card__number {
  position: relative;
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--card-accent, var(--accent-cyan));
  margin-bottom: var(--space-2);
  line-height: 1;
  opacity: 0.9;
}

.stat-card__label {
  position: relative;
  font-size: var(--text-base);
  color: var(--text-primary);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
}

.stat-card__icon {
  position: relative;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.15)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(57, 208, 216, 0.2));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
}

.stat-card__icon i {
  font-size: 18px;
  color: var(--card-accent, var(--accent-cyan));
}

/* Stat Card Themes */
.stat-card[data-theme="cyan"] {
  --card-accent: var(--accent-cyan);
  --card-accent-secondary: var(--accent-primary);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.25);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.stat-card[data-theme="blue"] {
  --card-accent: var(--accent-primary);
  --card-accent-secondary: var(--accent-violet);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.25);
  --card-glow: rgba(88, 166, 255, 0.15);
}

.stat-card[data-theme="green"] {
  --card-accent: var(--accent-green);
  --card-accent-secondary: var(--accent-cyan);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.25);
  --card-glow: rgba(16, 185, 129, 0.15);
}

.stat-card[data-theme="violet"] {
  --card-accent: var(--accent-violet);
  --card-accent-secondary: var(--accent-pink);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.25);
  --card-glow: rgba(139, 92, 246, 0.15);
}

/* ========================================================================
   6. START CARDS (Getting Started Steps)
   Numbered Step Cards mit Progress Indicator
   ======================================================================== */

.start-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 800px;
  margin: var(--space-10) auto 0;
}

.start-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.start-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, 
    var(--card-accent, var(--accent-cyan)), 
    var(--card-accent-secondary, var(--accent-primary))
  );
  transition: width 0.3s ease;
}

.start-card:hover {
  transform: translateX(12px);
  border-color: var(--card-accent, var(--accent-cyan));
}

.start-card:hover::before {
  width: 4px;
}

.start-card__number {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, 
    var(--card-accent, var(--accent-cyan)), 
    var(--card-accent-secondary, var(--accent-primary))
  );
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: white;
  box-shadow: 0 8px 16px var(--card-glow, rgba(57, 208, 216, 0.3));
}

.start-card__content {
  position: relative;
  flex: 1;
}

.start-card__content h3,
.start-card__content h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  margin-top: 0;
}

.start-card__content p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.start-card__action {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.1)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(57, 208, 216, 0.2));
  border-radius: 50%;
  color: var(--card-accent, var(--accent-cyan));
  transition: all 0.3s ease;
}

.start-card:hover .start-card__action {
  background: var(--card-accent, var(--accent-cyan));
  color: white;
  transform: translateX(4px);
}

/* Start Card Themes */
.start-card[data-theme="1"] {
  --card-accent: var(--accent-cyan);
  --card-accent-secondary: var(--accent-primary);
  --card-accent-bg: rgba(57, 208, 216, 0.1);
  --card-accent-border: rgba(57, 208, 216, 0.2);
  --card-glow: rgba(57, 208, 216, 0.3);
}

.start-card[data-theme="2"] {
  --card-accent: var(--accent-primary);
  --card-accent-secondary: var(--accent-violet);
  --card-accent-bg: rgba(88, 166, 255, 0.1);
  --card-accent-border: rgba(88, 166, 255, 0.2);
  --card-glow: rgba(88, 166, 255, 0.3);
}

.start-card[data-theme="3"] {
  --card-accent: var(--accent-green);
  --card-accent-secondary: var(--accent-cyan);
  --card-accent-bg: rgba(16, 185, 129, 0.1);
  --card-accent-border: rgba(16, 185, 129, 0.2);
  --card-glow: rgba(16, 185, 129, 0.3);
}

.start-card[data-theme="4"] {
  --card-accent: var(--accent-violet);
  --card-accent-secondary: var(--accent-pink);
  --card-accent-bg: rgba(139, 92, 246, 0.1);
  --card-accent-border: rgba(139, 92, 246, 0.2);
  --card-glow: rgba(139, 92, 246, 0.3);
}

/* ========================================================================
   CTA SECTION
   ======================================================================== */

.cta-section--beruf {
  padding-bottom: var(--space-20);
}

.cta-card--beruf {
  background: linear-gradient(135deg, 
    rgba(57, 208, 216, 0.08) 0%, 
    rgba(88, 166, 255, 0.05) 50%,
    rgba(16, 185, 129, 0.03) 100%
  );
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(57, 208, 216, 0.2);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.cta-card--beruf__icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  box-shadow: 0 8px 24px rgba(57, 208, 216, 0.3);
}

.cta-card--beruf__icon i {
  font-size: 40px;
  color: white;
}

.cta-card--beruf__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.cta-card--beruf__text {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.cta-card--beruf__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}

@media (min-width: 640px) {
  .cta-card--beruf__buttons {
    flex-direction: row;
  }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 767px) {
  .beruf-card--featured {
    padding: var(--space-6) var(--space-4);
  }
  
  .beruf-card--featured__icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-4);
  }
  
  .beruf-card--featured__icon i {
    font-size: 32px;
  }
  
  .beruf-card--featured h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
  }
  
  .beruf-card--featured h3 {
    font-size: var(--text-lg);
  }
  
  .beruf-card--featured p {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
  }
  
  .problem-card {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .problem-card__icon {
    width: 56px;
    height: 56px;
  }
  
  .timeline {
    padding-left: var(--space-2);
  }
  
  .timeline-card {
    padding: var(--space-5);
  }
  
  .roi-calculator {
    padding: var(--space-8) var(--space-5);
  }
  
  .roi-input__value,
  .roi-output__value {
    font-size: var(--text-3xl);
  }
  
  .start-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  
  .start-card__action {
    align-self: flex-end;
  }
}

@media (max-width: 639px) {
  .solution-card {
    padding: var(--space-6) var(--space-5);
  }
  
  .solution-card__icon {
    width: 72px;
    height: 72px;
  }
  
  .solution-card__icon i {
    font-size: 32px;
  }
  
  .stat-card__number {
    font-size: var(--text-2xl);
  }
}

/* ========================================================================
   ALIAS CLASSES - For HTML compatibility
   insight-card = problem-card, benefit-card = solution-card
   ======================================================================== */

/* insight-card uses problem-card styles */
.insight-card,
.problem-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.insight-card::before,
.problem-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--accent-red));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.insight-card:hover,
.problem-card:hover {
  transform: translateX(8px);
  border-color: var(--card-accent, var(--accent-red));
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 0 20px var(--card-glow, rgba(248, 113, 113, 0.1));
}

.insight-card:hover::before,
.problem-card:hover::before {
  opacity: 1;
}

.insight-card__icon,
.problem-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(248, 113, 113, 0.15)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(248, 113, 113, 0.2));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-card__icon i,
.problem-card__icon i {
  font-size: 32px;
  color: var(--card-accent, var(--accent-red));
}

/* benefit-card uses solution-card styles */
.benefit-card,
.solution-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card::before,
.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    var(--card-gradient-start, rgba(57, 208, 216, 0.15)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.benefit-card:hover,
.solution-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.15));
}

.benefit-card:hover::before,
.solution-card:hover::before {
  opacity: 1;
}

.benefit-card__icon,
.solution-card__icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--card-gradient-start, rgba(57, 208, 216, 0.2)), 
    var(--card-gradient-end, rgba(57, 208, 216, 0.05))
  );
  border: 2px solid var(--card-accent-border, rgba(57, 208, 216, 0.25));
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.benefit-card:hover .benefit-card__icon,
.solution-card:hover .solution-card__icon {
  transform: scale(1.1);
}

.benefit-card__icon i,
.solution-card__icon i {
  font-size: 40px;
  color: var(--card-accent, var(--accent-cyan));
}

.benefit-card__link,
.solution-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.1)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(57, 208, 216, 0.2));
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--card-accent, var(--accent-cyan));
  transition: all 0.3s ease;
}

.benefit-card:hover .benefit-card__link,
.solution-card:hover .solution-card__link {
  background: var(--card-accent, var(--accent-cyan));
  color: white;
}

/* ========================================================================
   BRIDGE CARDS (Vision-Style)
   Horizontal-Design mit Icon links - wie in vision.html
   ======================================================================== */

.bridge-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.bridge-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card-accent, var(--accent-cyan));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bridge-card:hover {
  transform: translateX(8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 0 20px var(--card-glow, rgba(57, 208, 216, 0.1));
}

.bridge-card:hover::before {
  opacity: 1;
}

.bridge-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, 
    var(--card-accent-bg, rgba(57, 208, 216, 0.15)), 
    transparent
  );
  border: 1px solid var(--card-accent-border, rgba(57, 208, 216, 0.2));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bridge-card__icon i {
  font-size: 32px;
  color: var(--card-accent, var(--accent-cyan));
}

.bridge-card__content {
  flex: 1;
}

.bridge-card__content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.bridge-card__content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.bridge-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--card-accent, var(--accent-cyan));
  transition: gap 0.3s ease;
}

.bridge-card:hover .bridge-card__link {
  gap: var(--space-2);
}

/* Bridge Card Themes */
.bridge-card[data-theme="cyan"] {
  --card-accent: var(--accent-cyan);
  --card-accent-bg: rgba(57, 208, 216, 0.15);
  --card-accent-border: rgba(57, 208, 216, 0.25);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.bridge-card[data-theme="violet"] {
  --card-accent: var(--accent-violet);
  --card-accent-bg: rgba(139, 92, 246, 0.15);
  --card-accent-border: rgba(139, 92, 246, 0.25);
  --card-glow: rgba(139, 92, 246, 0.15);
}

.bridge-card[data-theme="green"] {
  --card-accent: var(--accent-green);
  --card-accent-bg: rgba(16, 185, 129, 0.15);
  --card-accent-border: rgba(16, 185, 129, 0.25);
  --card-glow: rgba(16, 185, 129, 0.15);
}

.bridge-card[data-theme="primary"] {
  --card-accent: var(--accent-primary);
  --card-accent-bg: rgba(88, 166, 255, 0.15);
  --card-accent-border: rgba(88, 166, 255, 0.25);
  --card-glow: rgba(88, 166, 255, 0.15);
}

/* ========================================================================
   VALUE CARDS (Vision-Style)
   Grid-Cards mit runden Icons
   ======================================================================== */

.value-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    var(--card-gradient-start, rgba(57, 208, 216, 0.15)),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  border-color: var(--card-accent, var(--accent-cyan));
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 40px var(--card-glow, rgba(57, 208, 216, 0.15));
}

.value-card:hover::before {
  opacity: 1;
}

.value-card__icon {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    var(--card-gradient-start, rgba(57, 208, 216, 0.2)), 
    var(--card-gradient-end, rgba(57, 208, 216, 0.05))
  );
  border: 2px solid var(--card-accent-border, rgba(57, 208, 216, 0.25));
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.value-card:hover .value-card__icon {
  transform: scale(1.1);
}

.value-card__number {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--card-accent, var(--accent-cyan)), var(--accent-primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--font-bold);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.value-card__icon i {
  font-size: 40px;
  color: var(--card-accent, var(--accent-cyan));
}

.value-card h3 {
  position: relative;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.value-card p {
  position: relative;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Value Card Themes */
.value-card[data-theme="cyan"] {
  --card-accent: var(--accent-cyan);
  --card-gradient-start: rgba(57, 208, 216, 0.2);
  --card-gradient-end: rgba(57, 208, 216, 0.05);
  --card-accent-border: rgba(57, 208, 216, 0.3);
  --card-glow: rgba(57, 208, 216, 0.15);
}

.value-card[data-theme="primary"] {
  --card-accent: var(--accent-primary);
  --card-gradient-start: rgba(88, 166, 255, 0.2);
  --card-gradient-end: rgba(88, 166, 255, 0.05);
  --card-accent-border: rgba(88, 166, 255, 0.3);
  --card-glow: rgba(88, 166, 255, 0.15);
}

.value-card[data-theme="green"] {
  --card-accent: var(--accent-green);
  --card-gradient-start: rgba(16, 185, 129, 0.2);
  --card-gradient-end: rgba(16, 185, 129, 0.05);
  --card-accent-border: rgba(16, 185, 129, 0.3);
  --card-glow: rgba(16, 185, 129, 0.15);
}