/* ===== innDigital COMPLETE PREMIUM DESIGN SYSTEM TOKENS ===== */
:root {
  /* COLOR SYSTEM (70% Dark Navy, 20% Dark Blue Surfaces, 8% White Typography, 2% Sky Blue Accent) */
  --bg-primary: #071426;
  --bg-secondary: #091B30;
  --surface: #0D2138;
  --surface-hover: #102A45;
  --footer-bg: #050F1C;

  /* PRIMARY CTA & ATTENTION ACCENT (Sky Blue) */
  --primary-cta: #5CC8FF;
  --cta-hover: #82D7FF;
  --cta-active: #35B5F5;
  --accent: #3DB9F5;
  --cta-glow: rgba(92, 200, 255, 0.16);

  /* TYPOGRAPHY */
  --text-primary: #F5FAFF;
  --text-secondary: #A9BCD0;
  --text-muted: #71869C;

  /* BORDERS */
  --border: #1C3550;
  --border-subtle: #31506D;
  --border-accent: rgba(92, 200, 255, 0.16);

  /* COMPATIBILITY ALIASES */
  --bg-card: #0D2138;
  --color-blue: #3DB9F5;
  --color-cyan: #5CC8FF;
  --color-purple: #5CC8FF;
  --color-purple-light: #82D7FF;
  --color-gold: #5CC8FF;
  --color-gold-light: #82D7FF;
  --body-bg: #071426;
  --bg-form: #091B30;
  --border-form: #1C3550;
  --border-glow: #1C3550;
  --gradient-main: linear-gradient(90deg, #5CC8FF, #82D7FF);
  --gradient-gold: linear-gradient(90deg, #5CC8FF, #82D7FF);

  /* SHADOWS */
  --shadow-subtle: 0 4px 20px -2px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 12px 32px -4px rgba(7, 20, 38, 0.6);
  --shadow-elevated: 0 20px 48px -8px rgba(5, 15, 28, 0.8);
  --shadow-glow: 0 10px 30px rgba(92, 200, 255, 0.16);

  /* BORDER RADIUS */
  --radius-btn: 12px;
  --radius-input: 12px;
  --radius-card: 20px;
  --radius-card-lg: 24px;
  --radius-img: 20px;
  --radius-modal: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* TYPOGRAPHY */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* SPACING TOKENS (Multiples of 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 120, 160) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;

  /* SECTION RHYTHM & TYPOGRAPHY TOKENS */
  --section-padding: clamp(68px, 7.5vw, 108px) 0;
  --section-padding-sm: clamp(44px, 5vw, 72px) 0;
  --section-header-mb: clamp(36px, 4.5vw, 54px);
  --para-line-height: 1.68;

  /* ANIMATION SYSTEM */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 200ms ease;
  --transition-smooth: 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== LIGHT MODE ===== */
body[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f4f7ff;
  --bg-card: linear-gradient(135deg, rgba(0, 170, 255, 0.05), rgba(124, 58, 237, 0.05)), #f0f4ff;
  --color-cyan: #0076b4;
  --color-blue: #0055cc;
  --color-purple: #6d28d9;
  --color-purple-light: #7c3aed;
  --color-gold: #b45309;
  --color-gold-light: #d97706;
  --text-primary: #0d1230;
  --text-secondary: rgba(13, 18, 48, 0.83);
  --text-muted: rgba(13, 18, 48, 0.63);
  --border: rgba(0, 118, 180, 0.15);
  --border-glow: rgba(0, 118, 180, 0.35);
  --shadow-glow: 0 8px 32px rgba(0, 118, 180, 0.08);
  --body-bg: #ffffff;
  --bg-form: rgba(255, 255, 255, 0.75);
  --border-form: rgba(0, 0, 0, 0.08);
}


body[data-theme="light"] #analyseGrad stop:nth-child(1) {
  stop-color: var(--color-cyan) !important;
}

body[data-theme="light"] #analyseGrad stop:nth-child(2) {
  stop-color: var(--color-purple) !important;
}

body[data-theme="light"] .hero-badge {
  background: rgba(0, 118, 180, 0.08);
  border-color: rgba(0, 118, 180, 0.2);
  color: var(--color-cyan);
}

body[data-theme="light"] .testimonial-result {
  background: rgba(0, 118, 180, 0.08);
  border-color: rgba(0, 118, 180, 0.2);
  color: var(--color-cyan);
}

body[data-theme="light"] .trust-badge {
  background: rgba(0, 118, 180, 0.06);
  border-color: rgba(0, 118, 180, 0.15);
}

body[data-theme="light"] .wachstum-value>i {
  background: rgba(0, 118, 180, 0.08);
  border-color: rgba(0, 118, 180, 0.2);
  color: var(--color-cyan);
}

body[data-theme="light"] .contact-icon {
  background: rgba(0, 118, 180, 0.08);
  border-color: rgba(0, 118, 180, 0.2);
  color: var(--color-cyan);
}

body[data-theme="light"] .scroll-to-top {
  background: rgba(0, 85, 204, 0.06);
  border-color: rgba(0, 85, 204, 0.2);
  color: var(--color-blue);
}

body[data-theme="light"] .scroll-to-top:hover {
  background: rgba(0, 85, 204, 0.12);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

body[data-theme="light"] .reachability-option input[type="radio"]:checked+.reachability-box {
  background: rgba(0, 118, 180, 0.06);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

body[data-theme="light"] .lightbox-counter {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .lightbox-arrow {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .lightbox-arrow:hover {
  border-color: var(--color-cyan);
  background: rgba(0, 118, 180, 0.05);
  color: var(--color-cyan);
}

body[data-theme="light"] .prozess-track-fill {
  box-shadow: 0 0 8px rgba(0, 120, 220, 0.25);
}

body[data-theme="light"] .prozess-track-fill::after {
  box-shadow: 0 0 6px var(--color-cyan), 0 0 12px var(--color-purple-light);
}

body[data-theme="light"] .track-dot.active {
  box-shadow: 0 0 8px rgba(0, 120, 220, 0.4) !important;
}

body[data-theme="light"] .track-dot[data-step="4"].active {
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.4) !important;
}

body[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.7)
}

body[data-theme="light"] .hero-grid {
  background-image: linear-gradient(rgba(0, 100, 200, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 100, 200, 0.06) 1px, transparent 1px);
  background-size: 64px 64px
}

body[data-theme="light"] .nav-wrapper.scrolled {
  background: transparent;
}



body[data-theme="light"] .service-card {
  background: var(--bg-card);
  border: 1px solid rgba(0, 118, 180, 0.18);
  box-shadow: 0 12px 32px rgba(13, 18, 48, 0.03), 0 2px 4px rgba(13, 18, 48, 0.01);
}

body[data-theme="light"] .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 18, 48, 0.08), 0 4px 8px rgba(13, 18, 48, 0.03);
}

body[data-theme="light"] .service-card p {
  color: var(--text-secondary);
}

/* Light mode service card glowing border lines */
body[data-theme="light"] .service-border::before {
  background: linear-gradient(to bottom, var(--color-cyan), rgba(0, 118, 180, 0.15));
  box-shadow: 0 0 10px rgba(0, 118, 180, 0.3);
}

body[data-theme="light"] .service-border::after {
  background: linear-gradient(to bottom, var(--color-purple), rgba(109, 40, 217, 0.15));
  box-shadow: 0 0 10px rgba(109, 40, 217, 0.3);
}

body[data-theme="light"] .service-card:hover .service-border::before {
  box-shadow: 0 0 16px rgba(0, 118, 180, 0.65);
}

body[data-theme="light"] .service-card:hover .service-border::after {
  box-shadow: 0 0 16px rgba(109, 40, 217, 0.65);
}

/* Light mode badge style matching dark mode capsule */
body[data-theme="light"] .service-badge {
  background: rgba(0, 118, 180, 0.08);
  border: 1px solid rgba(0, 118, 180, 0.2);
  color: var(--color-cyan);
}

/* Light mode icon container */
body[data-theme="light"] .service-icon {
  background: var(--icon-bg, #f0f0f5);
  border: none;
  color: var(--icon-color, #4a4a5a);
}

body[data-theme="light"] .service-card:hover .service-icon {
  background: var(--icon-bg, #e8e8ed);
  color: var(--icon-color);
  transform: scale(1.05);
}

/* Color palettes for individual services in light mode */
body[data-theme="light"] #service-webdesign {
  --accent-color: #d4a373;
  /* tan/gold accent */
  --icon-bg: #faedcd;
  /* light beige background */
  --icon-color: #bc6c25;
  /* warm brown icon color */
}

body[data-theme="light"] #service-seo {
  --accent-color: #60a5fa;
  /* blue/optimierung accent */
  --icon-bg: #eff6ff;
  /* very light blue background */
  --icon-color: #2563eb;
  /* blue icon color */
}

body[data-theme="light"] #service-landingpage {
  --accent-color: #f59e0b;
  /* amber/e-commerce accent */
  --icon-bg: #fef3c7;
  /* light amber background */
  --icon-color: #d97706;
  /* amber icon color */
}

body[data-theme="light"] #service-ki {
  --accent-color: #10b981;
  /* green/automation accent */
  --icon-bg: #ecfdf5;
  /* light green background */
  --icon-color: #059669;
  /* green icon color */
}

body[data-theme="light"] .faq-item {
  background: var(--bg-card);
  border: 1px solid rgba(0, 118, 180, 0.1);
}

body[data-theme="light"] .why-us {
  background: var(--bg-card);
  border: 1px solid rgba(0, 118, 180, 0.15);
}

body[data-theme="light"] .footer {
  background: var(--bg-secondary)
}

body[data-theme="light"] .logo-inn {
  color: #0d1230
}

/* Light mode readability and contrast enhancements */
body[data-theme="light"] .section-tag {
  color: #0066cc;
  background: rgba(0, 102, 204, 0.06);
  border-color: rgba(0, 102, 204, 0.15);
}

body[data-theme="light"] .stat-icon {
  background: rgba(0, 118, 180, 0.08);
  border: 1px solid rgba(0, 118, 180, 0.25);
  color: #0066cc;
}

body[data-theme="light"] .stat strong {
  background: linear-gradient(135deg, #0055d4, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body[data-theme="light"] .stat p {
  color: var(--text-secondary);
}

body[data-theme="light"] .marquee-inner i {
  color: #0066cc;
}

body[data-theme="light"] .marquee-inner span:hover {
  color: #0055d4;
}

body[data-theme="light"] .marquee-inner span:hover i {
  color: #0055d4;
}

body[data-theme="light"] .service-badge {
  color: var(--text-secondary);
}

body[data-theme="light"] .step-static h3 {
  color: var(--text-secondary);
}

body[data-theme="light"] .step-icon {
  background: rgba(0, 118, 180, 0.08);
  border: 1px solid rgba(0, 118, 180, 0.25);
  color: #0066cc;
}

body[data-theme="light"] .prozess-step:hover .step-icon,
body[data-theme="light"] .prozess-step:focus-visible .step-icon {
  background: rgba(0, 102, 204, 0.12);
  color: #0055d4;
  box-shadow: 0 0 16px rgba(0, 102, 204, 0.15);
}

body[data-theme="light"] .why-item>i {
  background: rgba(0, 118, 180, 0.08);
  border: 1px solid rgba(0, 118, 180, 0.25);
  color: #0066cc;
}

body[data-theme="light"] .why-item span {
  color: var(--text-secondary);
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: clip;
  width: 100%;
  overflow-anchor: none;
}

section[id],
div[id].section-anchor,
#online-terminkalender,
#onlinetermin-buchung,
#calBookingCard,
article[id] {
  scroll-margin-top: 90px;
}

body {
  font-family: var(--font-main);
  background-color: #050814;
  background: var(--body-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  overflow-x: clip;
  line-height: var(--para-line-height);
  overflow-anchor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p {
  line-height: var(--para-line-height);
  text-wrap: pretty;
  margin-bottom: 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
.section-header h2,
.hero-main-title {
  text-wrap: balance;
  letter-spacing: -0.025em;
}

.stat-val,
.metric-value,
.pricing-amount,
.hwp-stat-num {
  font-variant-numeric: tabular-nums;
}

/* Performance & Scroll Anchoring: Explicitly visible so all section heights and anchor positions are exact */
.marquee-section,
.problem-founder-flip-section,
.expertise,
.referenzen,
.erstgespraech-section,
.footer {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

body.no-scroll {
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 15%;
  right: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.12), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: '';
  position: fixed;
  bottom: 15%;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

ul {
  list-style: none
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important
  }
}

/* ===== UTILITIES ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px
}

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

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border)
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.25);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 24px
}

.section-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--section-header-mb);
}

.section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  text-wrap: balance;
  letter-spacing: -0.025em;
}

.section-header p,
.section-lead {
  color: var(--text-secondary);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: var(--para-line-height);
  max-width: 680px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* REVEAL ANIMATION */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--transition), transform 0.7s var(--transition)
}

.reveal.visible {
  opacity: 1;
  transform: none
}

[data-delay="50"] {
  transition-delay: 50ms
}

[data-delay="100"] {
  transition-delay: 100ms
}

[data-delay="150"] {
  transition-delay: 150ms
}

[data-delay="200"] {
  transition-delay: 200ms
}

[data-delay="300"] {
  transition-delay: 300ms
}

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  background: #a78bfa;
  color: #fff;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(167, 139, 250, 0.4), 0 0 15px rgba(167, 139, 250, 0.25);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: var(--transition)
}

.btn-primary:hover::after {
  background: rgba(255, 255, 255, 0.1)
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(167, 139, 250, 0.5);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--border-glow);
  color: var(--text-primary);
  transition: var(--transition)
}

.btn-ghost:hover {
  background: rgba(0, 170, 255, 0.08);
  border-color: var(--color-cyan);
  transform: translateY(-2px)
}

.btn-large {
  padding: 20px 40px;
  font-size: 1.05rem
}

/* ===== NAVBAR ===== */
/* ===== FLOATING MORPHING PILL NAVBAR ===== */
.nav-wrapper {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  pointer-events: none;
  transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-wrapper.scrolled {
  top: 16px;
  background: transparent;
  padding: 0 16px;
}

/* When mobile menu overlay is open */
.nav-wrapper.menu-open {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme="light"] .nav-wrapper.menu-open {
  background: transparent;
}

.menu-open .nav-logo,
.menu-open .theme-toggle,
.menu-open .nav-faq-btn {
  position: relative;
  z-index: 1010;
}

.nav-container {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  max-width: 1200px;
  height: 54px;
  padding: 6px 8px 6px 20px;
  box-sizing: border-box;
  background: rgba(8, 14, 26, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42), 0 0 20px rgba(0, 170, 255, 0.08);
  position: relative;
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    min-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: width, transform, border-radius;
}

body[data-theme="light"] .nav-container {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 118, 180, 0.2);
  box-shadow: 0 10px 32px rgba(13, 18, 48, 0.08), 0 0 18px rgba(0, 118, 180, 0.08);
}

/* ===== SCROLLED COLLAPSED STATE (RECTANGULAR BUTTON) ===== */
.nav-wrapper.scrolled:not(.menu-expanded) .nav-container {
  width: auto;
  min-width: 154px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(8, 14, 26, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 212, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 212, 255, 0.18);
}

.nav-wrapper.scrolled:not(.menu-expanded) .nav-container:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--color-cyan);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 212, 255, 0.35);
}

body[data-theme="light"] .nav-wrapper.scrolled:not(.menu-expanded) .nav-container {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 118, 180, 0.35);
  box-shadow: 0 8px 24px rgba(13, 18, 48, 0.12), 0 0 20px rgba(0, 118, 180, 0.15);
}

body[data-theme="light"] .nav-wrapper.scrolled:not(.menu-expanded) .nav-container:hover {
  border-color: var(--color-cyan);
  box-shadow: 0 10px 30px rgba(13, 18, 48, 0.18), 0 0 28px rgba(0, 118, 180, 0.3);
}

/* Subtle glowing pulse ring on the rectangular button */
.nav-wrapper.scrolled:not(.menu-expanded) .nav-container::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.nav-wrapper.scrolled:not(.menu-expanded) .nav-container:hover::after {
  opacity: 1;
}

/* ===== LOGO IN NAVBAR ===== */
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  height: 100%;
  flex-shrink: 0;
  user-select: none;
  margin-right: 20px;
  transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-wrapper.scrolled:not(.menu-expanded) .nav-logo {
  margin-right: 0 !important;
}

.logo-full {
  display: flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-inn {
  color: #ffffff;
  transition: color 0.25s ease;
}

body[data-theme="light"] .logo-inn {
  color: #0d1230;
}

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

/* ===== CIRCLE BRAND BADGE (INSIDE COLLAPSED CIRCLE) ===== */
.logo-circle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lcb-inn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}

body[data-theme="light"] .lcb-inn {
  color: #0d1230;
}

.lcb-sub {
  font-family: var(--font-main), Arial, sans-serif;
  font-size: 7.2px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 2px;
}

/* 1:1 Full Logo displayed in rectangular button during collapsed state */
.nav-wrapper.scrolled:not(.menu-expanded) .logo-full {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  position: static !important;
  display: flex !important;
}

.nav-wrapper.scrolled:not(.menu-expanded) .logo-circle-badge,
.logo-circle-badge {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== COLLAPSIBLE MENU WRAPPER & LINKS ===== */
.nav-menu-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  opacity: 1;
  transform: translateX(0);
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* When collapsed in scrolled mode: links fold into the circle */
.nav-wrapper.scrolled:not(.menu-expanded) .nav-menu-wrap {
  max-width: 0;
  opacity: 0;
  transform: translateX(20px) scale(0.85);
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 100px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .nav-link:hover,
body[data-theme="light"] .nav-link.active {
  color: var(--color-cyan);
  background: rgba(0, 118, 180, 0.08);
}

.nav-cta {
  padding: 9px 18px;
  border-radius: 100px;
  background: #a78bfa;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(167, 139, 250, 0.35);
  white-space: nowrap;
  margin-left: 6px;
  flex-shrink: 0;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.45);
}

/* ===== DESKTOP COLLAPSE BUTTON (SHOWN WHEN EXPANDED WHILE SCROLLED) ===== */
.nav-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nav-collapse-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--color-cyan);
  transform: scale(1.08);
}

body[data-theme="light"] .nav-collapse-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
}

body[data-theme="light"] .nav-collapse-btn:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.1);
  border-color: var(--color-cyan);
}

/* In expanded state while scrolled: show the collapse button */
.nav-wrapper.scrolled.menu-expanded .nav-collapse-btn {
  display: inline-flex;
}

/* In expanded state while scrolled: full pill layout */
.nav-wrapper.scrolled.menu-expanded .nav-container {
  width: auto;
  max-width: 1200px;
  height: 54px;
  padding: 6px 10px 6px 20px;
  border-radius: 100px;
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 212, 255, 0.22);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: var(--transition);
}

.nav-toggle:hover {
  border-color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="light"] .nav-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition);
}

/* FAQ trigger button in navbar - hidden on desktop by default */
.nav-faq-btn {
  display: none;
}

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  margin-right: 16px;
  flex-shrink: 0
}

.theme-toggle-track {
  display: flex;
  align-items: center;
  width: 56px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-glow);
  border-radius: 100px;
  padding: 3px;
  transition: var(--transition);
  position: relative
}

body[data-theme="light"] .theme-toggle-track {
  background: rgba(0, 120, 220, 0.12)
}

.theme-toggle-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient-main);
  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative
}

body[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(28px);
  background: linear-gradient(135deg, #f59e0b, #fcd34d);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4)
}

.theme-toggle-thumb .icon-dark {
  font-size: 0.7rem;
  color: #fff;
  position: absolute;
  transition: opacity var(--transition), transform var(--transition)
}

.theme-toggle-thumb .icon-light {
  font-size: 0.7rem;
  color: #fff;
  position: absolute;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition)
}

body[data-theme="light"] .theme-toggle-thumb .icon-dark {
  opacity: 0
}

body[data-theme="light"] .theme-toggle-thumb .icon-light {
  opacity: 1
}

.theme-toggle:hover .theme-toggle-track {
  border-color: var(--color-cyan)
}

.theme-toggle:focus-visible .theme-toggle-track {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 24px 40px
}

.hero-bg {
  position: absolute;
  inset: 0
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 170, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 170, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px
}

.hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0, 170, 255, 0.12);
  animation: ringPulse 6s ease-in-out infinite
}

.ring-1 {
  width: 500px;
  height: 500px;
  animation-delay: 0s
}

.ring-2 {
  width: 800px;
  height: 800px;
  animation-delay: 1.5s;
  border-color: rgba(124, 58, 237, 0.1)
}

.ring-3 {
  width: 1100px;
  height: 1100px;
  animation-delay: 3s;
  border-color: rgba(0, 170, 255, 0.06)
}

@keyframes ringPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8
  }

  50% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 1
  }
}

/* ===== DIGITAL RIVER (DIGITALER FLUSS - HORIZONTAL) ===== */
.hero-river-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: min(75vh, 480px);
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.16) 0%, rgba(0, 170, 255, 0.07) 42%, transparent 72%);
  filter: blur(65px);
  pointer-events: none;
  z-index: 1;
  animation: riverAuraPulse 7s ease-in-out infinite alternate;
}

@keyframes riverAuraPulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scaleY(0.88);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1.15);
  }
}

.digital-river-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  transform: translateZ(0);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* ===== HERO SHOWCASE LAYOUT & APPLE ECOSYSTEM ===== */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: clamp(100px, 12vh, 124px) 0 40px;
}

.hero-showcase-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-header-center {
  text-align: center;
  margin-bottom: 24px;
}

.hero-main-title {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0;
}

/* ==========================================================================
   STANDALONE APPLE 3-DEVICE ECOSYSTEM SHOWCASE COMPONENT
   ========================================================================== */

:root {
  --eco-bg: #050814;
  --eco-surface: rgba(13, 19, 44, 0.75);
  --eco-surface-hover: rgba(20, 30, 68, 0.85);
  --eco-cyan: #00d4ff;
  --eco-cyan-glow: rgba(0, 212, 255, 0.35);
  --eco-border-subtle: rgba(255, 255, 255, 0.08);
  --eco-border-cyan: rgba(0, 212, 255, 0.25);
  --eco-text-primary: #ffffff;
  --eco-text-muted: #8493a8;
  --eco-emerald: #10b981;
  --eco-indigo: #818cf8;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

/* Outer Wrapper for any Hero Section */
.apple-ecosystem-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* 1. Device Selector Pills (Header-Leiste) */
.ecosystem-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  z-index: 10;
}

.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.eco-pill:hover {
  color: var(--text-primary);
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.08);
}

.eco-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.4) 0%, rgba(0, 212, 255, 0.3) 100%);
  border-color: var(--color-cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.eco-pill i {
  color: var(--color-cyan);
  font-size: 13px;
  transition: color 0.25s ease;
}

/* 2. 3D Stage */
.device-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  transform-style: preserve-3d;
  margin: 10px auto;
  z-index: 2;
}

.apple-device {
  position: absolute;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transform-origin: center center;
}

.imac-screen,
.tablet-screen,
.iphone-screen {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.imac-screen *,
.tablet-screen *,
.iphone-screen * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* ==========================================================================
   DEVICE 1: APPLE IMAC (WEBDESIGN)
   ========================================================================== */
.apple-imac {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  z-index: 2;
}

.imac-bezel {
  background: #0d111e;
  border: 3px solid #1e2538;
  border-radius: 16px;
  padding: 10px 10px 14px 10px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.imac-camera-dot {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #252e42;
  border: 1px solid #3b465e;
}

.imac-screen {
  background: #060914;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  height: 315px;
  display: flex;
  flex-direction: column;
}

.imac-browser-bar {
  background: rgba(16, 22, 44, 0.95);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--eco-border-subtle);
}

.imac-browser-dots {
  display: flex;
  gap: 5px;
}

.imac-browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.imac-browser-dots span:nth-child(1) {
  background: #ef4444;
}

.imac-browser-dots span:nth-child(2) {
  background: #eab308;
}

.imac-browser-dots span:nth-child(3) {
  background: #22c55e;
}

.imac-browser-url {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: monospace;
  font-size: 10px;
  color: var(--eco-cyan);
  flex-grow: 1;
  max-width: 220px;
  text-align: center;
  border: 1px solid rgba(0, 212, 255, 0.15);
}

.imac-badge-live {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--eco-emerald);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.speed-ring {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

.speed-ring-bg {
  fill: none;
  stroke: rgba(16, 185, 129, 0.2);
  stroke-width: 3.8;
}

.speed-ring-progress {
  fill: none;
  stroke: var(--eco-emerald);
  stroke-width: 3.8;
  stroke-linecap: round;
}

.imac-webdesign-preview {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 75% 25%, rgba(0, 212, 255, 0.12), transparent 50%),
    linear-gradient(180deg, #090e24 0%, #050814 100%);
  text-align: left;
}

.imac-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 212, 255, 0.15);
  border: 1px solid var(--eco-border-cyan);
  font-size: 9px;
  font-weight: 800;
  color: var(--eco-cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.imac-preview-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 6px 0;
  letter-spacing: -0.02em;
}

.imac-preview-desc {
  font-size: 11px;
  color: var(--eco-text-muted);
  line-height: 1.45;
}

.imac-preview-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.imac-kpi-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.imac-kpi-val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--eco-cyan);
}

.imac-kpi-lbl {
  font-size: 9px;
  color: var(--eco-text-muted);
}

.imac-screen-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.imac-action-btn {
  background: #a78bfa;
  color: #050814;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.imac-action-btn:hover {
  opacity: 0.9;
}

.imac-stand-neck {
  width: 76px;
  height: 48px;
  background: linear-gradient(180deg, #1c2236 0%, #121726 100%);
  margin: 0 auto;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.imac-stand-base {
  width: 140px;
  height: 10px;
  background: linear-gradient(180deg, #252d45 0%, #171d2e 100%);
  border-radius: 5px 5px 2px 2px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   DEVICE 2: APPLE IPAD TABLET (SEO & AI SEARCH)
   ========================================================================== */
.apple-tablet {
  bottom: 12px;
  left: 6%;
  width: 320px;
  z-index: 3;
}

.tablet-frame {
  background: #0e1322;
  border: 3px solid #232b40;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(16, 185, 129, 0.2);
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.tablet-camera-dot {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #252e42;
}

.tablet-screen {
  background: #070a16;
  border-radius: 14px;
  height: 220px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
  overflow: hidden;
}

.tablet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.tablet-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  font-size: 8.5px;
  font-weight: 800;
  color: var(--eco-emerald);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tablet-live-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: #10b981;
  font-weight: 700;
}

.pulse-dot-green {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulseGlow 2s infinite;
}

/* Tablet Interactive Filter Tabs */
.tablet-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tablet-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.tablet-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.tablet-tab-btn.active {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.tablet-tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Google Search Panel */
.tablet-search-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  color: #fff;
  margin-bottom: 5px;
}

.tablet-search-bar i {
  color: #38bdf8;
  font-size: 9.5px;
}

.tablet-search-rank {
  background: #10b981;
  color: #040817;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.tablet-rank-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 5px 8px;
}

.tablet-rank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tablet-domain-info strong {
  display: block;
  font-size: 10.5px;
  color: #fff;
  line-height: 1.2;
}

.tablet-domain-info span {
  font-size: 8.5px;
  color: #94a3b8;
}

.tablet-trophy-badge {
  background: var(--eco-emerald);
  color: #040817;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tablet-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: #94a3b8;
  margin-top: 4px;
}

.tablet-chart-header strong {
  color: #34d399;
}

.tablet-chart-bars {
  margin-top: 3px;
  height: 24px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.chart-bar {
  flex: 1;
  background: linear-gradient(180deg, #38bdf8 0%, rgba(56, 189, 248, 0.2) 100%);
  border-radius: 2px 2px 0 0;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.chart-bar:hover,
.chart-bar.active {
  background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.3) 100%);
  transform: scaleY(1.08);
}

/* AI Search Panel */
.tablet-ai-card {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-query-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  color: #38bdf8;
}

.ai-answer-box {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 2px solid #38bdf8;
}

.ai-source-badge {
  display: inline-block;
  font-size: 8px;
  color: #10b981;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ai-answer-box p {
  font-size: 9.5px;
  line-height: 1.35;
  color: #e2e8f0;
  margin: 0;
}

.ai-metric-pills {
  display: flex;
  gap: 6px;
  font-size: 8.5px;
  color: #94a3b8;
}

.ai-metric-pills span {
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 5px;
  border-radius: 4px;
}

/* Local SEO Panel */
.tablet-local-card {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.local-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.local-pin-icon {
  font-size: 16px;
  color: #ef4444;
}

.local-header-row strong {
  display: block;
  font-size: 10.5px;
  color: #fff;
}

.local-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 8.5px;
  color: #fbbf24;
}

.local-stars span {
  color: #cbd5e1;
  margin-left: 4px;
}

.local-status-badge {
  font-size: 9px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}

.tablet-home-indicator {
  width: 50px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 4px auto 0;
}

/* ==========================================================================
   DEVICE 3: APPLE IPHONE 16 PRO (KI-AUTOMATION)
   ========================================================================= */
.apple-iphone {
  bottom: 0;
  right: 7%;
  width: 220px;
  z-index: 4;
}

.iphone-frame {
  background: #0d111d;
  border: 3px solid #28334d;
  border-radius: 34px;
  padding: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 212, 255, 0.25);
  position: relative;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.iphone-island {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 14px;
  background: #000;
  border-radius: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.iphone-island-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--eco-emerald);
  box-shadow: 0 0 6px var(--eco-emerald);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.iphone-camera {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e2538;
}

.iphone-screen {
  background: #070914;
  border-radius: 26px;
  height: 345px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 9px 9px 9px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  justify-content: space-between;
  text-align: left;
}

.iphone-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.iphone-service-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  font-size: 8px;
  font-weight: 800;
  color: var(--eco-indigo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iphone-bot-status {
  font-size: 8px;
  color: var(--eco-emerald);
  display: flex;
  align-items: center;
  gap: 3px;
}

.iphone-bot-status::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--eco-emerald);
}

.iphone-chat-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.iphone-chat-body::-webkit-scrollbar {
  display: none;
}

.chat-bubble-bot {
  background: #131b33;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-radius: 10px 10px 10px 2px;
  padding: 6px 8px;
  font-size: 9px;
  line-height: 1.32;
  flex-shrink: 0;
}

.chat-bubble-user {
  background: #091B30;
  border: 1px solid #5CC8FF;
  color: #5CC8FF;
  font-weight: 600;
  border-radius: 10px 10px 2px 10px;
  padding: 5px 8px;
  font-size: 9px;
  line-height: 1.3;
  align-self: flex-end;
  display: none;
  animation: fadeIn 0.3s forwards;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(7, 20, 38, 0.5);
}

.typing-indicator {
  display: none;
  align-items: center;
  gap: 3px;
  background: #131b33;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px 10px 10px 2px;
  padding: 6px 9px;
  width: fit-content;
}

.typing-indicator span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--eco-cyan);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

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

  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat-bubble-reply {
  background: rgba(9, 27, 48, 0.9);
  border: 1px solid rgba(92, 200, 255, 0.3);
  color: #F5FAFF;
  border-radius: 10px 10px 10px 2px;
  padding: 6px 8px;
  font-size: 9px;
  line-height: 1.35;
  display: none;
  animation: fadeIn 0.3s forwards;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(7, 20, 38, 0.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.iphone-quick-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.quick-chip {
  background: rgba(9, 27, 48, 0.85);
  border: 1px solid rgba(92, 200, 255, 0.3);
  color: #5CC8FF;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.quick-chip:hover {
  background: #5CC8FF;
  border-color: #5CC8FF;
  color: #071426;
}

.quick-chip i {
  font-size: 7.5px;
}

.iphone-home-indicator {
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 4px auto 0 auto;
}

/* iMac interactive KPI active state & PageSpeed */
.imac-kpi-card {
  cursor: pointer;
  transition: all 0.25s ease;
}

.imac-kpi-card:hover,
.imac-kpi-card.active {
  background: rgba(0, 212, 255, 0.14);
  border-color: var(--eco-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);
}

.imac-badge-live {
  cursor: pointer;
  transition: all 0.25s ease;
}

.imac-badge-live:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  transform: scale(1.05);
}

/* iPhone interactive chat input */
.iphone-input-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 3px 4px 3px 8px;
  margin-top: 4px;
  box-sizing: border-box;
}

.iphone-input-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 8.5px;
  outline: none;
  font-family: inherit;
  min-width: 0;
}

.iphone-input-bar input::placeholder {
  color: #64748b;
}

.iphone-send-btn {
  background: linear-gradient(135deg, #00d4ff, #0077ff);
  border: none;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #040817;
  font-size: 7.5px;
  cursor: pointer;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.iphone-send-btn:hover {
  transform: scale(1.15);
}

/* ==========================================================================
   DYNAMIC FOCUS STATES (INTERACTIVE HIGHLIGHT - ULTRA SHARP & CRISP)
   ========================================================================== */
.device-stage.focus-imac,
.device-stage.focus-tablet,
.device-stage.focus-iphone {
  perspective: none !important;
  transform-style: flat !important;
}

.device-stage.focus-imac .apple-imac,
.device-stage.focus-tablet .apple-tablet,
.device-stage.focus-iphone .apple-iphone {
  transform-style: flat !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
  image-rendering: -webkit-optimize-contrast !important;
}

/* 1. Focus iMac (Monitor - Webdesign: bleibt gleich groß, kein Zoom) */
.device-stage.focus-imac .apple-imac {
  transform: translateX(-50%);
  z-index: 60;
}

.device-stage.focus-imac .apple-imac .imac-bezel {
  border-color: var(--eco-cyan);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(0, 212, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.device-stage.focus-imac .apple-tablet,
.device-stage.focus-imac .apple-iphone {
  opacity: 0.35;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
}

/* 2. Focus Tablet (iPad - SEO & AI Search: dezent hervorgehoben & gestochen scharf) */
.device-stage.focus-tablet .apple-tablet {
  transform: translateX(25px) translateY(-10px) scale(1.05);
  z-index: 60;
}

.device-stage.focus-tablet .apple-tablet .tablet-frame {
  border-color: var(--eco-emerald);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.device-stage.focus-tablet .apple-imac,
.device-stage.focus-tablet .apple-iphone {
  opacity: 0.35;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
}

/* 3. Focus iPhone (Smartphone - KI-Workflow: leicht vergrößert & gestochen scharf) */
.device-stage.focus-iphone .apple-iphone {
  transform: translateX(-25px) translateY(-10px) scale(1.05);
  z-index: 60;
}

.device-stage.focus-iphone .apple-iphone .iphone-frame {
  border-color: var(--eco-indigo);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.device-stage.focus-iphone .apple-imac,
.device-stage.focus-iphone .apple-tablet {
  opacity: 0.35;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .apple-imac {
    width: 440px;
  }

  .apple-tablet {
    width: 270px;
    left: 2%;
  }

  .apple-iphone {
    width: 185px;
    right: 2%;
  }

  .device-stage {
    min-height: 440px;
  }

  .device-stage.focus-imac .apple-imac {
    transform: translateX(-50%);
  }

  .device-stage.focus-tablet .apple-tablet {
    transform: translateX(18px) translateY(-8px) scale(1.04);
  }

  .device-stage.focus-iphone .apple-iphone {
    transform: translateX(-18px) translateY(-8px) scale(1.04);
  }
}

@media (max-width: 680px) {
  .device-stage {
    min-height: 480px;
    perspective: none;
  }

  .apple-imac {
    width: 92%;
    top: 0;
  }

  .apple-tablet {
    width: 64%;
    bottom: 0;
    left: 0;
  }

  .apple-iphone {
    width: 50%;
    bottom: -10px;
    right: 0;
  }

  .device-stage.focus-imac .apple-imac {
    transform: translateX(-50%);
  }

  .device-stage.focus-tablet .apple-tablet {
    transform: translateX(10%) translateY(-6px) scale(1.04);
  }

  .device-stage.focus-iphone .apple-iphone {
    transform: translateX(-10%) translateY(-6px) scale(1.04);
  }

  .device-stage.focus-imac .apple-tablet,
  .device-stage.focus-imac .apple-iphone,
  .device-stage.focus-tablet .apple-imac,
  .device-stage.focus-tablet .apple-iphone,
  .device-stage.focus-iphone .apple-imac,
  .device-stage.focus-iphone .apple-tablet {
    opacity: 0.32;
    transform: translateY(10px) scale(0.96);
  }

  .ecosystem-pills {
    gap: 8px;
  }

  .eco-pill {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .device-stage {
    min-height: 410px;
  }

  .apple-imac {
    width: 96%;
  }

  .apple-tablet {
    width: 68%;
    left: -4px;
  }

  .apple-iphone {
    width: 52%;
    right: -6px;
    bottom: -12px;
  }

  .eco-pill {
    padding: 7px 11px;
    font-size: 11px;
  }

  .hero-main-title {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
  }
}

/* Light Mode Support for Ecosystem Showcase */
body[data-theme="light"] {
  --eco-surface: rgba(255, 255, 255, 0.85);
  --eco-surface-hover: rgba(240, 245, 255, 0.95);
  --eco-border-subtle: rgba(0, 118, 180, 0.15);
  --eco-text-primary: #0d1230;
  --eco-text-muted: #64748b;
}

body[data-theme="light"] .eco-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  color: var(--text-secondary);
}

body[data-theme="light"] .eco-pill:hover {
  color: var(--text-primary);
  border-color: rgba(0, 102, 255, 0.35);
  background: rgba(0, 102, 255, 0.06);
}

body[data-theme="light"] .eco-pill.active {
  color: #0044cc;
  background: rgba(0, 102, 255, 0.12);
  border-color: #0066ff;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
}

/* ==========================================================================
   HERO BOTTOM ACTIONS
   ========================================================================== */
.hero-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  position: relative;
  z-index: 6;
}

.hero-bottom-primary {
  padding: 15px 32px;
  border-radius: 12px;
  background: #a78bfa;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(167, 139, 250, 0.4), 0 0 15px rgba(167, 139, 250, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-bottom-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 35px rgba(167, 139, 250, 0.55), 0 0 25px rgba(167, 139, 250, 0.35);
  color: #fff;
}

.hero-bottom-secondary {
  padding: 15px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-bottom-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-cyan);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

@media (max-width: 680px) {
  .hero-bottom-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-bottom-primary,
  .hero-bottom-secondary {
    width: 100%;
    justify-content: center;
  }
}

body[data-theme="light"] .hero-bottom-secondary {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}



.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 48px;
}

.stat {
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--color-cyan);
  margin-bottom: 4px
}

.stat strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2
}

.stat p {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px
}

.stat-divider {
  width: 1px;
  height: 88px;
  background: var(--border)
}

/* ===== RIVER SCROLL ===== */
.river-scroll {
  display: flex;
  align-items: center;
  justify-content: center
}

.river-svg {
  width: 40px;
  height: 80px;
  overflow: visible
}

/* Stroke-flow animation for the vertical river paths */
.river-path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: riverFlow 2.4s ease-in-out infinite;
}

.river-path-1 {
  animation-duration: 2.4s;
  animation-delay: 0s;
  opacity: 0.9;
}

.river-path-2 {
  animation-duration: 2.8s;
  animation-delay: 0.4s;
  opacity: 0.5;
}

.river-path-3 {
  animation-duration: 3.2s;
  animation-delay: 0.8s;
  opacity: 0.5;
}

@keyframes riverFlow {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -120;
    opacity: 0;
  }
}

/* Legacy v-river-line classes kept for compatibility */
.v-river-line {
  animation: vWaveFlow 3s linear infinite;
}

@keyframes vWaveFlow {
  0% {
    transform: translateY(-80px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .river-path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.6;
  }

  .v-river-line {
    animation: none;
    transform: translateY(0);
    opacity: 0.5;
  }
}

/* ===== HERO TITLE RIVER BACKGROUND ===== */
.hero-title-wrapper {
  position: relative;
  display: block;
  margin-bottom: 24px
}

.hero-river-bg {
  position: absolute;
  inset: -24px -48px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}

.hero-river-svg {
  width: 100%;
  height: 100%;
  opacity: 1;
  overflow: visible
}

.hero-title {
  position: relative;
  z-index: 1;
  margin-bottom: 0
}

/* ===== MASTER CHOREOGRAPHED RIVER FLOW & NEON FADE ===== */

/* Base translation animation for the waves (always flowing smoothly left-to-right) */
@keyframes hWaveFlow {
  0% {
    transform: translateX(-400px);
  }

  100% {
    transform: translateX(0);
  }
}

.h-river-path {
  transform-origin: center;
  stroke: var(--color-cyan);
  opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: stroke-width 0.4s ease, stroke 0.4s ease, filter 0.4s ease;
}

/* One-time quick neon entrance animations matching the swimming text cascade! */

/* 1. Mehr Anfragen (Line 1 - y=100) */
.h-river-1 {
  animation: hWaveFlow 7s linear infinite, neonFadeCyan 1.2s ease-out forwards 0.2s;
}

/* 2. Mehr Umsatz (Line 3 - y=500) */
.h-river-2 {
  animation: hWaveFlow 8s linear infinite, neonFadePurple 1.2s ease-out forwards 1.0s;
}

/* 3. Mehr Kunden (Line 2 - y=300) */
.h-river-3 {
  animation: hWaveFlow 9s linear infinite, neonFadeCyan 1.2s ease-out forwards 1.8s;
}

@keyframes neonFadeCyan {
  0% {
    opacity: 0;
    filter: none;
    stroke-width: 2px;
  }

  100% {
    opacity: 1;
    stroke: #00f3ff;
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 5px #00f3ff) drop-shadow(0 0 12px #00aaff) drop-shadow(0 0 25px #0055ff);
  }
}

@keyframes neonFadePurple {
  0% {
    opacity: 0;
    filter: none;
    stroke-width: 2px;
  }

  100% {
    opacity: 1;
    stroke: #bc7efb;
    stroke-width: 3.5px;
    filter: drop-shadow(0 0 5px #a78bfa) drop-shadow(0 0 12px #7c3aed) drop-shadow(0 0 25px #6d28d9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .h-river-path {
    animation: none !important;
    opacity: 0.95;
    stroke: #00f3ff;
    stroke-width: 3px;
    filter: drop-shadow(0 0 4px #00f3ff);
  }
}

/* ===== STAT RIVER DIVIDER ===== */
.stat-river-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  min-width: 48px
}

.stat-river-divider .river-scroll {
  opacity: 0.85
}

/* ===== MARQUEE ===== */
.marquee-section {
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(0, 170, 255, 0.03);
  overflow: hidden;
  /* Fade edges via mask */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%);
}

.marquee-track {
  display: flex;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.marquee-inner {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScroll 130s linear infinite;
  will-change: transform;
}

/* Pause on hover for better UX */
.marquee-section:hover .marquee-inner,
.marquee-track:hover .marquee-inner {
  animation-play-state: paused;
}

.marquee-inner span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  transition: color var(--transition), transform var(--transition);
  white-space: nowrap;
}

.marquee-inner span:hover {
  color: var(--color-cyan);
  transform: translateY(-2px);
}

.marquee-inner i {
  color: var(--color-cyan);
  font-size: 0.85rem;
  transition: transform var(--transition);
}

.marquee-inner span:hover i {
  transform: scale(1.2);
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-inner {
    animation: none;
  }

  .marquee-track {
    overflow-x: auto;
  }
}

/* ==========================================================================
   ÜBER MICH (PERSONAL BRANDING & OVERLAPPING CARD - BILD 1 + BILD 2)
   ========================================================================== */
.about-me-section {
  position: relative;
  padding: var(--section-padding);
  background: radial-gradient(circle at 18% 45%, rgba(92, 200, 255, 0.06) 0%, transparent 55%),
    radial-gradient(circle at 82% 35%, rgba(13, 33, 56, 0.5) 0%, transparent 60%),
    var(--bg-primary);
  overflow: hidden;
}

.about-overlap-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1080px;
  margin: 48px auto 0 auto;
  position: relative;
}

/* Rechte Spalte: Portrait-Foto mit Status-Badge */
.about-photo-col {
  flex: 0 0 460px;
  max-width: 460px;
  position: relative;
  z-index: 1;
}

.about-photo-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  aspect-ratio: 4 / 4.8;
  background: #0b1a2b;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36px;
  display: block;
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: center 40%;
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-photo-card:hover .about-photo-img {
  transform: scale(1.02);
}

.about-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 26, 43, 0.9) 0%, rgba(11, 26, 43, 0) 10%, transparent 65%, rgba(7, 20, 38, 0.7) 100%);
  pointer-events: none;
}

/* Status-Badge am unteren Fotorand (Bild 2) */
.about-photo-badge {
  position: absolute;
  bottom: 16px;
  left: 95px;
  right: 16px;
  background: rgba(7, 20, 38, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.about-badge-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #ffffff;
}

.status-indicator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  display: inline-block;
  flex-shrink: 0;
}

.about-badge-loc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.about-badge-loc i {
  color: var(--primary-cta);
  font-size: 0.8rem;
}

/* Linke Spalte: Überlappende Premium-Karte (Text links) */
.about-card-overlap {
  flex: 0 1 620px;
  max-width: 620px;
  margin-right: -90px;
  /* Overlap nach rechts über das Foto */
  margin-left: 0;
  position: relative;
  z-index: 3;
  background: rgba(13, 33, 56, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(92, 200, 255, 0.22);
  border-radius: 26px;
  padding: 38px 42px;
  box-shadow: 0 30px 75px -12px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(92, 200, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-card-overlap:hover {
  border-color: rgba(92, 200, 255, 0.38);
  box-shadow: 0 35px 85px -12px rgba(0, 0, 0, 0.85),
    0 0 50px rgba(92, 200, 255, 0.12);
}

.about-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(92, 200, 255, 0.08);
  border: 1px solid rgba(92, 200, 255, 0.24);
  color: var(--primary-cta);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.about-hero-name {
  font-size: 2.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.about-hero-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: var(--para-line-height);
  margin: 0 0 24px 0;
  text-wrap: pretty;
}

/* Feature-Tags (Bild 2) */
.about-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.about-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 27, 48, 0.85);
  border: 1px solid rgba(92, 200, 255, 0.16);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.about-feature-chip:hover {
  background: rgba(92, 200, 255, 0.12);
  border-color: var(--primary-cta);
  transform: translateY(-2px);
}

.about-feature-chip i {
  color: var(--primary-cta);
  font-size: 0.9rem;
}

/* Interaktions-Zeile (CTA + Bild 1 Kreis-Social-Buttons) */
.about-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 26px;
  background: var(--primary-cta);
  color: #061321 !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.25);
  transition: all 0.25s ease;
}

.about-primary-btn:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(92, 200, 255, 0.4);
}

.about-primary-btn i {
  transition: transform 0.2s ease;
}

.about-primary-btn:hover i {
  transform: translateX(4px);
}

.about-social-circles {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Circular Social Buttons im innDigital Dark-Glass-Stil */
.social-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(9, 27, 48, 0.85);
  border: 1px solid rgba(92, 200, 255, 0.22);
  color: var(--primary-cta) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 10px rgba(92, 200, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.social-circle-btn i {
  color: var(--primary-cta);
  transition: transform 0.25s ease, color 0.25s ease;
}

.social-circle-btn:hover {
  background: rgba(92, 200, 255, 0.16);
  border-color: var(--primary-cta);
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.35);
}

.social-circle-btn:hover i {
  color: #ffffff;
  transform: scale(1.1);
}

/* Light Theme Support */
body[data-theme="light"] .about-me-section {
  background: radial-gradient(circle at 18% 45%, rgba(0, 102, 255, 0.05) 0%, transparent 55%),
    #f8fafd;
}

body[data-theme="light"] .about-card-overlap {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 102, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 50, 150, 0.08);
}

body[data-theme="light"] .about-hero-name {
  color: #0d1230;
}

body[data-theme="light"] .about-hero-desc {
  color: #475569;
}

body[data-theme="light"] .about-photo-badge {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .about-badge-status {
  color: #0d1230;
}

body[data-theme="light"] .about-feature-chip {
  background: #f1f5f9;
  border-color: rgba(0, 102, 255, 0.12);
  color: #0f172a;
}

body[data-theme="light"] .about-feature-chip:hover {
  background: #e2e8f0;
}

body[data-theme="light"] .social-circle-btn {
  background: #f1f5f9;
  border: 1px solid rgba(0, 102, 255, 0.16);
  color: #0076b4 !important;
  box-shadow: 0 4px 12px rgba(0, 50, 150, 0.06);
}

body[data-theme="light"] .social-circle-btn i {
  color: #0076b4;
}

body[data-theme="light"] .social-circle-btn:hover {
  background: rgba(0, 102, 255, 0.12);
  border-color: #0076b4;
  color: #0076b4 !important;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.18);
}

/* Responsive Anpassungen */
@media (max-width: 991px) {

  /* Abstand zwischen Hero/Marquee und Über-Mich-Bild stark verringern */
  .about-me-section {
    padding-top: 14px !important;
    padding-bottom: 0 !important;
  }

  .about-overlap-wrapper {
    flex-direction: column-reverse;
    gap: 0;
    max-width: 480px;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  .about-photo-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 380px;
    margin: 0 auto !important;
  }

  /* Kopf / Haare mit natürlichem Abstand nach oben & Bild optimal proportioniert */
  .about-photo-card {
    border-radius: 22px !important;
    aspect-ratio: 4 / 4.25 !important;
    max-height: 360px !important;
  }

  /* Kopf & Haare ein Stück weiter tiefer setzen für harmonischen oberen Abstand */
  .about-photo-img {
    object-position: center 30px !important;
  }

  /* Status-Badge: perfekt positioniert für die Überlappung der unteren Karte (wie im Bild) */
  .about-photo-badge {
    left: 12px !important;
    right: 12px !important;
    bottom: 24px !important;
    padding: 8px 14px !important;
    z-index: 2 !important;
  }

  .about-badge-status {
    font-size: 0.84rem !important;
  }

  .about-badge-loc {
    font-size: 0.80rem !important;
  }

  /* Karte: überlappt die obere Fotokarte passgenau unter 'Ali · Inhaber' & KEIN unnötiger Platz unten */
  .about-card-overlap {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: -26px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 18px 14px !important;
    border-radius: 20px !important;
  }

  .about-card-pill {
    display: none !important;
  }

  .about-hero-name {
    font-size: 1.65rem !important;
    margin-bottom: 8px !important;
  }

  .about-hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }

  /* Dienstleistungen (Buttons kleiner darstellen) */
  .about-tags-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .about-feature-chip {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  .about-feature-chip i {
    font-size: 0.76rem !important;
  }

  /* Interaktions-Zeile: Button + Social Media ohne leeren Raum darunter */
  .about-footer-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  .about-primary-btn {
    width: 100% !important;
    height: 46px !important;
    font-size: 0.92rem !important;
  }

  /* Social-Media-Icons: exakt am Kärtchenende, kein überschüssiger Leerraum */
  .about-social-circles {
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .social-circle-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.05rem !important;
  }

  /* Abstand zum nächsten Bereich harmonisch straffen */
  .problem-founder-flip-section {
    padding-top: 16px !important;
  }

  .problem-founder-flip-section .section-header {
    margin-bottom: 20px !important;
  }

  .problem-founder-flip-section .section-tag {
    margin-bottom: 10px !important;
    padding: 5px 13px !important;
    font-size: 0.72rem !important;
  }

  .problem-founder-flip-section .section-header h2 {
    margin-bottom: 12px !important;
  }
}

@media (max-width: 540px) {
  .about-photo-col {
    max-width: 100%;
  }

  .about-photo-card {
    border-radius: 20px !important;
    aspect-ratio: 4 / 4.25 !important;
    max-height: 355px !important;
  }

  .about-photo-img {
    object-position: center 28px !important;
  }

  .about-photo-badge {
    left: 10px !important;
    right: 10px !important;
    bottom: 22px !important;
    padding: 7px 12px !important;
  }

  .about-badge-status {
    font-size: 0.80rem !important;
  }

  .about-badge-loc {
    font-size: 0.76rem !important;
  }

  .about-card-overlap {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: -24px !important;
    padding: 20px 15px 12px !important;
  }

  .social-circle-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.98rem !important;
  }

  .about-hero-name {
    font-size: 1.5rem !important;
  }

  .about-hero-desc {
    font-size: 0.85rem !important;
  }

  .referenzen .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ref-mockup-card {
    padding: 14px 10px !important;
    border-radius: 18px !important;
  }

  .ref-mockup-card img {
    max-height: 270px !important;
  }

  .ref-pills-row {
    gap: 5px !important;
  }

  .ref-pill {
    padding: 3.5px 9px !important;
    font-size: 0.71rem !important;
  }
}

/* ===== PROBLEM & PERSONAL BRAND FLIP SECTION ===== */
.problem-founder-flip-section {
  position: relative;
  padding: var(--section-padding);
  background: radial-gradient(circle at 75% 30%, rgba(92, 200, 255, 0.05) 0%, transparent 60%),
    var(--bg-primary);
  overflow: hidden;
}

/* ===== EXPERTISE ===== */
.expertise {
  padding: var(--section-padding);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px
}

.service-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  overflow: hidden;
  transition: var(--transition);
  cursor: default;
  z-index: 1;
}

@media(max-width:480px) {
  .service-card {
    padding: 32px 24px;
  }
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-glow);
}

.service-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.service-border::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5px;
  background: linear-gradient(to bottom, var(--color-cyan), rgba(0, 212, 255, 0.15));
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  transition: var(--transition);
}

.service-border::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5px;
  background: linear-gradient(to bottom, var(--color-purple), rgba(124, 58, 237, 0.15));
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
  transition: var(--transition);
}

.service-card:hover .service-border::before {
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.85);
  width: 3px;
}

.service-card:hover .service-border::after {
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.85);
  width: 3px;
}

.card-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.12), transparent 70%);
  pointer-events: none;
  transition: var(--transition)
}

.service-card:hover .card-glow {
  background: radial-gradient(circle, rgba(0, 170, 255, 0.2), transparent 70%)
}

.service-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-cyan);
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: var(--transition)
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.25), rgba(124, 58, 237, 0.25));
  color: var(--color-cyan)
}

.service-badge {
  position: absolute;
  top: 48px;
  right: 40px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap
}

@media(max-width:480px) {
  .service-badge {
    top: 32px;
    right: 24px;
    font-size: 0.62rem;
  }
}

.service-card h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.25
}

.service-card p {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 28px
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px
}

.service-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text-secondary)
}

.service-features i {
  color: var(--color-cyan);
  font-size: 0.75rem;
  flex-shrink: 0
}

.service-link {
  display: inline;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cyan);
  transition: var(--transition)
}

.service-link i {
  margin-left: 8px;
  transition: var(--transition);
}

.service-link:hover i {
  margin-left: 12px;
}

/* ===== ABOUT ===== */
.about {
  padding: clamp(64px, 8vw, 96px) 0;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.05), transparent)
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center
}

.about-visual {
  position: relative
}

.about-orb {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.1), transparent 70%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  animation: orbFloat 8s ease-in-out infinite
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1)
  }

  50% {
    transform: translate(-50%, -52%) scale(1.05)
  }
}

.about-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px
}

.about-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 16px
}

.about-card p {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.7
}

.about-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  z-index: 2;
  margin-top: 16px
}

.metric {
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center
}

.metric i {
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-bottom: 4px
}

.metric span {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.metric small {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em
}

.about-content .section-tag {
  margin-bottom: 16px
}

.about-content h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 28px
}

.about-lead {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.8
}

.about-content>p {
  color: var(--text-secondary);
  margin-bottom: 40px;
  line-height: 1.8
}

.about-values {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.value-item>i {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyan);
  font-size: 0.9rem;
  flex-shrink: 0
}

.value-item div strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.95rem
}

.value-item div span {
  font-size: 0.875rem;
  color: var(--text-secondary)
}

/* ===== TRUST ===== */
.trust {
  padding: var(--section-padding);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 64px
}

.testimonial-card {
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  transition: var(--transition);
  position: relative;
  overflow: hidden
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-main);
  opacity: 0;
  transition: var(--transition)
}

.testimonial-card:hover {
  transform: translateY(-4px)
}

.testimonial-card:hover::before {
  opacity: 1
}

.stars {
  display: flex;
  gap: 4px;
  color: var(--color-gold);
  margin-bottom: 20px;
  font-size: 0.9rem
}

blockquote {
  font-size: 0.975rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-main);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0
}

.testimonial-author strong {
  display: block;
  font-weight: 600;
  font-size: 0.925rem
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--text-muted)
}

.why-us {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 72px 64px;
  text-align: center
}

.why-us h3 {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 56px
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px
}

.why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.why-item>i {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-cyan)
}

.why-item strong {
  font-weight: 600;
  font-size: 0.95rem
}

.why-item span {
  font-size: 0.825rem;
  color: var(--text-muted)
}

/* ===== FAQ ===== */
.faq {
  padding: var(--section-padding);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-form);
  border: 1px solid var(--border-form);
  border-radius: var(--radius-xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition)
}

.faq-item:hover {
  border-color: var(--border-glow)
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  text-align: left;
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition)
}

.faq-question[aria-expanded="true"] {
  color: var(--color-cyan)
}

.faq-icon {
  font-size: 0.8rem;
  color: var(--color-cyan);
  flex-shrink: 0;
  transition: transform var(--transition)
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg)
}

.faq-answer {
  padding: 0 28px 24px;
  animation: fadeIn 0.3s ease
}

.faq-answer p {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.925rem
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Custom reset for FAQ list in Modal */
.modal-faq-list {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.modal-faq-list::before,
.modal-faq-list::after {
  display: none !important;
}

/* ===== CONTACT SECTION ===== */
.contact-section {
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: center;
}

.contact-info .section-tag {
  margin-bottom: 24px;
}

.contact-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 28px;
}

.contact-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 480px;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-cyan);
}

.contact-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition);
}

a.contact-value:hover {
  color: var(--color-cyan);
}

.contact-form-wrapper {
  position: relative;
}

.contact-form {
  padding: 48px;
  border-radius: var(--radius-xl);
  background: var(--bg-form);
  border: 1px solid var(--border-form);
  position: relative;
  overflow: hidden;
}

.contact-form::before,
.faq-list::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.15), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.contact-form::after,
.faq-list::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.contact-form>*,
.faq-list>* {
  position: relative;
  z-index: 2;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-glow);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  appearance: none;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--bg-primary);
  background-color: var(--bg-primary);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-cyan);
  border-color: var(--color-cyan);
}

.form-checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.form-checkbox label {
  font-size: 0.62rem;
  color: var(--text-muted);
  line-height: 1.35;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media (min-width: 769px) {
  .contact-form .form-checkbox label {
    font-size: 0.75rem;
  }
}

/* ===== FOOTER (Clean River & Social Media Wave Theme) ===== */
/* ===== FOOTER (Clean River & Social Media Wave Theme) ===== */
.footer.footer-river-theme {
  position: relative;
  padding: 0 0 36px;
  background: var(--bg-secondary);
  border-top: none;
  overflow: hidden;
}

/* 1. Container & River Social Wrapper */
.footer-clean-container {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-social-river-wrap {
  position: relative;
  padding: 50px 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* Animated Inn River Wave Graphic DIRECTLY in the background behind the social media symbols */
.footer-social-river-wrap .footer-wave-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: 1400px;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.footer-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.footer-wave-base {
  fill: var(--bg-secondary);
}

.footer-wave-parallax>use {
  animation: riverFlowWave 24s cubic-bezier(.55, .5, .45, .5) infinite;
}

.footer-wave-parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 9s;
}

.footer-wave-parallax>use:nth-child(2) {
  animation-delay: -4s;
  animation-duration: 14s;
}

.footer-wave-parallax>use:nth-child(3) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes riverFlowWave {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  50% {
    transform: translate3d(85px, 0, 0);
  }

  100% {
    transform: translate3d(-90px, 0, 0);
  }
}

/* 2. River Wave Social Cards Grid (Clean, nur Symbole nebeneinander) */
.footer-social-wave-grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.social-wave-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  min-height: 54px;
  flex: 0 0 54px;
  padding: 0;
  border-radius: 16px;
  background: rgba(10, 10, 31, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 170, 255, 0.2);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  z-index: 2;
  box-sizing: border-box;
}

.social-wave-card .sw-content {
  display: none;
}

/* Gentle water ripple effect in background of cards */
.social-wave-card .sw-wave-bg {
  position: absolute;
  bottom: -60%;
  left: -20%;
  width: 140%;
  height: 100%;
  border-radius: 40%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.8s ease;
  z-index: -1;
}

.social-wave-card.tiktok-card .sw-wave-bg {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, rgba(254, 44, 85, 0.12) 60%, transparent 100%);
}

.social-wave-card.instagram-card .sw-wave-bg {
  background: radial-gradient(circle, rgba(225, 48, 108, 0.22) 0%, rgba(253, 29, 29, 0.12) 40%, rgba(245, 96, 64, 0.08) 70%, transparent 100%);
}

.social-wave-card.youtube-card .sw-wave-bg {
  background: radial-gradient(circle, rgba(255, 0, 0, 0.2) 0%, rgba(0, 118, 180, 0.1) 60%, transparent 100%);
}

.social-wave-card:hover {
  transform: translateY(-5px);
}

.social-wave-card:hover .sw-wave-bg {
  opacity: 1;
  transform: rotate(360deg) scale(1.15);
}

/* Card Specific Borders & Glows on Hover */
.social-wave-card.tiktok-card:hover {
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 12px 28px rgba(0, 240, 255, 0.18), 0 0 20px rgba(254, 44, 85, 0.12);
}

.social-wave-card.instagram-card:hover {
  border-color: rgba(225, 48, 108, 0.55);
  box-shadow: 0 12px 28px rgba(225, 48, 108, 0.2), 0 0 20px rgba(245, 96, 64, 0.12);
}

.social-wave-card.youtube-card:hover {
  border-color: rgba(255, 50, 50, 0.55);
  box-shadow: 0 12px 28px rgba(255, 0, 0, 0.18), 0 0 20px rgba(0, 118, 180, 0.1);
}

/* Icon Box */
.sw-icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0;
  transition: transform 0.3s ease;
}

.social-wave-card:hover .sw-icon-box {
  transform: scale(1.08);
}

.tiktok-card .sw-icon-box {
  background: #000000;
  color: #ffffff;
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.25);
}

.instagram-card .sw-icon-box {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(220, 39, 67, 0.35);
}

.youtube-card .sw-icon-box {
  background: #ff0000;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35);
}

/* Card Content */
.sw-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-grow: 1;
}

.sw-platform-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 0;
}

.sw-platform {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.sw-handle {
  font-size: 0.82rem;
  color: var(--color-cyan);
  font-weight: 600;
  line-height: 1.2;
}

.sw-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: color 0.25s ease, gap 0.25s ease;
  white-space: nowrap;
}

.sw-action i {
  font-size: 0.72rem;
  transition: transform 0.25s ease;
}

.social-wave-card:hover .sw-action {
  color: var(--color-cyan);
  gap: 9px;
}

.social-wave-card:hover .sw-action i {
  transform: translate(2px, -2px);
}

/* 3. Minimalist Bottom Line */
.footer-clean-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.footer-brand-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-brand-info .nav-logo {
  text-decoration: none;
  font-size: 1.25rem;
}

.footer-brand-dot {
  color: var(--text-muted);
  opacity: 0.5;
}

.footer-brand-location {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.footer-legal-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.825rem;
  color: var(--text-muted);
}

.footer-legal-sep {
  color: var(--text-muted);
  opacity: 0.5;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-legal-links a {
  font-size: 0.825rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition);
}

.footer-legal-links a:hover {
  color: var(--color-cyan);
}

.scroll-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(0, 170, 255, 0.08);
  border: 1px solid rgba(0, 170, 255, 0.25);
  color: var(--color-blue);
  font-size: 0.95rem;
  transition: var(--transition);
  cursor: pointer;
  margin-left: 6px;
}

.scroll-to-top:hover {
  background: rgba(0, 170, 255, 0.16);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  transform: translateY(-3px);
  box-shadow: 0 0 14px rgba(0, 170, 255, 0.25);
}

/* Light mode adjustments */
body[data-theme="light"] .footer.footer-river-theme {
  background: #f8fbff;
}

body[data-theme="light"] .footer-wave-base {
  fill: #f8fbff;
}

body[data-theme="light"] .social-wave-card {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 118, 180, 0.18);
  box-shadow: 0 4px 18px rgba(0, 118, 180, 0.05);
}

body[data-theme="light"] .social-wave-card:hover {
  box-shadow: 0 10px 24px rgba(0, 118, 180, 0.12);
}

body[data-theme="light"] .sw-handle {
  color: #0076b4;
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--body-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10005;
  transition: var(--transition);
}

.lightbox-close:hover {
  border-color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  transform: rotate(90deg);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10005;
  transition: var(--transition);
}

.lightbox-arrow:hover {
  border-color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  color: var(--color-cyan);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}

.lightbox-arrow.prev {
  left: 24px;
}

.lightbox-arrow.next {
  right: 24px;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 80%;
  text-align: center;
  z-index: 10001;
}

.lightbox-image-wrapper {
  position: relative;
  max-width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: var(--shadow-glow);
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-image-wrapper img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-image-wrapper img.loaded {
  opacity: 1;
  transform: scale(1);
}

.lightbox-caption {
  max-width: 600px;
}

.lightbox-tag {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-cyan);
  margin-bottom: 8px;
}

.lightbox-title {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.lightbox-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.lightbox-counter {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

/* Lightbox Mobile Adjustments */
@media (max-width: 768px) {
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .lightbox-arrow {
    position: fixed;
    top: auto;
    bottom: 24px;
    transform: none;
    width: 48px;
    height: 48px;
  }

  .lightbox-arrow.prev {
    left: 24px;
  }

  .lightbox-arrow.next {
    right: 24px;
  }

  .lightbox-content {
    max-width: 90%;
    padding-bottom: 80px;
    /* Space for fixed arrows on mobile */
  }

  .lightbox-image-wrapper img {
    max-height: 50vh;
  }

  .lightbox-title {
    font-size: 1.4rem;
  }

  .lightbox-desc {
    font-size: 0.85rem;
  }
}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .footer-social-wave-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media(max-width:768px) {
  .nav-wrapper {
    top: 14px;
    padding: 0 16px;
  }

  .nav-container {
    width: 100%;
    max-width: 100%;
    height: 50px;
    padding: 6px 12px 6px 16px;
  }

  /* Mobile scrolled menu-expanded: show mobile header bar (Logo + ? + ☰) */
  .nav-wrapper.scrolled.menu-expanded .nav-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    padding: 6px 12px 6px 16px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .nav-wrapper.scrolled.menu-expanded .nav-faq-btn {
    display: inline-flex !important;
  }

  .nav-wrapper.scrolled.menu-expanded .nav-toggle {
    display: flex !important;
  }

  /* Scrolled collapsed state on mobile */
  .nav-wrapper.scrolled:not(.menu-open):not(.menu-expanded) .nav-container {
    width: auto;
    min-width: 140px;
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
  }

  .nav-wrapper.scrolled:not(.menu-open):not(.menu-expanded) .nav-faq-btn,
  .nav-wrapper.scrolled:not(.menu-open):not(.menu-expanded) .nav-toggle {
    display: none !important;
  }

  .nav-wrapper.scrolled:not(.menu-open):not(.menu-expanded) .logo-circle-badge {
    display: none !important;
  }

  .nav-wrapper.scrolled:not(.menu-open):not(.menu-expanded) .logo-full {
    opacity: 1 !important;
    transform: scale(1) !important;
    position: static !important;
    display: flex !important;
  }

  .nav-collapse-btn {
    display: none !important;
  }

  .nav-logo {
    font-size: 1.25rem;
    margin-right: 0;
  }

  /* Mobile wrapper & menu-wrap constraints release */
  .nav-menu-wrap {
    overflow: visible !important;
    transform: none !important;
    max-width: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .nav-wrapper.scrolled:not(.menu-expanded) .nav-menu-wrap {
    max-width: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* When mobile menu overlay is open: release parent containers so fixed overlay fills screen */
  .nav-wrapper.menu-open,
  .nav-wrapper.menu-open .nav-container,
  .nav-wrapper.menu-open .nav-menu-wrap {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    will-change: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* ── Mobile Nav Overlay: covers the screen from top to bottom ── */
  .nav-links {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #080e1a !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 9999 !important;
    padding: 96px 24px 40px !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-theme="light"] .nav-links {
    background: #ffffff !important;
  }

  .nav-links.open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* In mobile drawer: hide logo & faq button so they NEVER overlap the categories (e.g. FAQ) */
  .menu-open .nav-logo,
  .menu-open .nav-faq-btn {
    display: none !important;
  }

  /* Left-aligned menu items with borders between them */
  .nav-links li {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    list-style: none !important;
  }

  body[data-theme="light"] .nav-links li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* Nav links inside the mobile list items */
  .nav-links .nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    padding: 18px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: var(--transition) !important;
  }

  /* Hover and active states for mobile links - light blue effect */
  .nav-links .nav-link:hover,
  .nav-links .nav-link:active,
  .nav-links .nav-link.active {
    color: var(--color-cyan);
  }

  /* Right arrow indicator on links */
  .nav-links .nav-link::after {
    content: "\f105";
    /* FontAwesome angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: var(--transition);
  }

  .nav-links .nav-link:hover::after,
  .nav-links .nav-link:active::after,
  .nav-links .nav-link.active::after {
    color: var(--color-cyan);
    transform: translateX(4px);
  }

  /* CTA Button list item wrapper - Centers the button */
  .nav-links li:last-child {
    border-bottom: none;
    margin-top: 32px;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* CTA Button inside mobile navigation - Keeps original pill style & styling */
  .nav-links .nav-cta {
    margin-top: 8px;
    padding: 14px 32px;
    font-size: 1rem;
  }

  .nav-toggle {
    display: flex !important;
    z-index: 10005 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .menu-open .nav-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 10005 !important;
  }

  /* ── Mobile Navigation FAQ Button (zwischen Logo und Theme-Toggle) ── */
  .nav-faq-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.35);
    color: var(--color-cyan);
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.15);
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-faq-btn:hover,
  .nav-faq-btn:active {
    transform: scale(0.92);
    background: rgba(0, 212, 255, 0.18);
    border-color: var(--color-cyan);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.4);
  }

  body[data-theme="light"] .nav-faq-btn {
    background: rgba(0, 118, 180, 0.08);
    border-color: rgba(0, 118, 180, 0.25);
    color: var(--color-cyan);
    box-shadow: 0 2px 8px rgba(0, 118, 180, 0.1);
  }

  body[data-theme="light"] .nav-faq-btn:hover,
  body[data-theme="light"] .nav-faq-btn:active {
    background: rgba(0, 118, 180, 0.16);
    border-color: var(--color-cyan);
  }

  .theme-toggle {
    margin-left: 0;
    margin-right: 8px;
  }

  /* ── Mobile: Floating FAQ Button unten rechts entfernen ── */
  .floating-cta-wrap {
    display: none !important;
  }

  /* ── Hero Stats – compact horizontal row on mobile ── */
  .hero-stats {
    flex-direction: row;
    gap: 0;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .stat {
    padding: 0 12px;
    flex: 1;
  }

  .stat-icon {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    margin-bottom: 2px;
  }

  .stat strong {
    font-size: 0.9rem;
  }

  .stat p {
    font-size: 0.65rem;
  }

  .stat-divider {
    width: 1px;
    height: 56px;
    background: var(--border);
  }

  .hero-actions {
    margin-bottom: 40px;
  }

  .about-visual {
    display: none
  }

  .why-us {
    padding: 40px 24px
  }

  /* ── Footer ── */
  .footer-social-river-wrap {
    padding: 32px 0 24px;
  }

  .footer-social-wave-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .footer-clean-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-top: 22px;
  }

  .footer-brand-info {
    justify-content: center;
    text-align: center;
  }

  .footer-legal-bar {
    justify-content: center;
    text-align: center;
  }

  /* ── Contact Info ── */
  .contact-items,
  .contact-desc {
    display: none;
  }

  .contact-grid {
    gap: 24px;
  }

  .contact-title {
    margin-bottom: 16px;
  }

  /* ── Contact Form & FAQ ── */
  .contact-form,
  .faq-list {
    padding: 24px 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* ── Section Headers ── */
  .section-header {
    margin: 0 auto 40px;
  }

  .section-header h2 {
    font-size: clamp(1.55rem, 5.5vw, 2.15rem);
    line-height: 1.22;
    text-wrap: balance;
  }

  .section-header p,
  .section-lead {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 100%;
  }
}

@media(max-width:480px) {
  .hero {
    padding: 100px 16px 64px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .btn-primary,
  .btn-ghost {
    justify-content: center;
    padding: 14px 24px;
  }

  .btn-large {
    padding: 16px 24px;
    font-size: 1rem;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }

  /* ── Contact form full padding reduction ── */
  .contact-form {
    padding: 24px 16px;
  }

  .faq-list {
    padding: 24px 12px;
  }

  .faq-question {
    padding: 20px 16px;
  }

  .faq-answer {
    padding: 0 16px 20px;
  }

  /* ── Analyse section ── */
  .analyse-card-face {
    padding: 40px 20px;
  }

  /* ── Service card adjustments ── */
  .service-card {
    padding: 28px 20px;
  }
}

/* ===== PROZESS SECTION ===== */
.prozess {
  padding: clamp(32px, 4vw, 48px) 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 170, 255, 0.03), transparent)
}

.prozess-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-bottom: 64px
}

.prozess-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px
}

@media(max-width:768px) {
  .prozess-steps {
    grid-template-columns: 1fr
  }
}

.step-number {
  font-family: var(--font-head);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.25
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.step-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-cyan);
  margin-bottom: 8px
}

.step-content h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary)
}

.step-content p {
  color: var(--text-secondary);
  font-size: 0.925rem;
  line-height: 1.75
}

.prozess-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.prozess-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted)
}

.prozess-note i {
  color: var(--color-cyan)
}

/* ===== TRUST BADGES (Kontakt) ===== */
.contact-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary)
}

.trust-badge i {
  color: var(--color-cyan);
  font-size: 0.8rem
}

/* ===== TESTIMONIAL RESULT TAG ===== */
.testimonial-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-cyan);
  margin-bottom: 16px
}

.testimonial-result i {
  font-size: 0.75rem
}

/* ===== FORM SELECT ===== */
.form-group select {
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d4ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center
}

.form-group select:focus {
  outline: none;
  border-color: var(--color-cyan);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-glow)
}

.form-group select option {
  background: var(--bg-secondary);
  color: var(--text-primary)
}

body[data-theme="light"] .form-group select {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--text-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230076b4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* ===== FORM NOTE ===== */
.form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 16px
}

.form-note i {
  color: var(--color-cyan);
  flex-shrink: 0
}

/* ===== FOOTER CTA ===== */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition)
}

.footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 170, 255, 0.3)
}

/* ===== WHY-US: 3 cols on desktop ===== */
.why-grid {
  grid-template-columns: repeat(3, 1fr)
}

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

@media(max-width:600px) {
  .why-grid {
    grid-template-columns: 1fr
  }
}

/* Services 3-column grid capped */
@media(min-width:1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

/* Contact desc strong */
.contact-desc strong {
  color: var(--text-primary);
  font-weight: 700
}

/* Hero sub strong */
.hero-sub strong {
  color: var(--text-primary);
  font-weight: 700
}

/* ===== PREMIUM CARD HOVER GLOW ===== */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.04), rgba(124, 58, 237, 0.04));
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none
}

.service-card:hover::after {
  opacity: 1
}

/* ===== SERVICES-GRID AIRIER ===== */
.services-grid {
  gap: 32px
}

/* ===== TESTIMONIALS COMPACT ===== */
.testimonials-grid {
  gap: 32px
}

blockquote {
  font-size: 0.95rem
}

/* ===== HERO BADGE REFINED ===== */
.hero-badge {
  font-size: 0.8rem;
  letter-spacing: 0.04em
}

/* ===== SOCIAL PROOF STRIP ===== */
.social-proof-strip {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(0, 170, 255, 0.025);
  overflow: hidden
}

.proof-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap
}

.proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap
}

.proof-item i {
  color: var(--color-cyan);
  font-size: 0.95rem
}

.proof-item strong {
  color: var(--text-primary)
}

.proof-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0
}

@media(max-width:768px) {
  .proof-items {
    gap: 0;
    justify-content: flex-start
  }

  .proof-divider {
    display: none
  }

  .proof-item {
    padding: 8px 16px
  }
}

/* ===== SERVICES 2-COL / 3-COL GRID ===== */
.services-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media(min-width:600px) {
  .services-grid-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media(min-width:900px) {
  .services-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ===== WACHSTUMSSYSTEME SECTION ===== */
.wachstum {
  padding: clamp(32px, 4vw, 48px) 0;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.05), transparent)
}

.wachstum-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center
}

/* On very small screens, wachstum stats in 2x2 layout */
@media(max-width:480px) {
  .wachstum-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .wachstum-stat {
    padding: 20px 16px;
  }

  .wachstum-stat span {
    font-size: 1.5rem;
  }
}

.wachstum-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.wachstum-orb {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(0, 170, 255, 0.18), rgba(124, 58, 237, 0.12), transparent 70%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(40px);
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite
}

.wachstum-graphic-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: var(--transition);
}

.wachstum-graphic-container:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-glow);
}

.wachstum-graphic {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

body[data-theme="light"] .wachstum-graphic-container {
  background: rgba(255, 255, 255, 0.8);
}

.wachstum-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  z-index: 2
}

.wachstum-stat {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: var(--transition)
}

.wachstum-stat:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow)
}

.wachstum-stat i {
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-bottom: 4px
}

.wachstum-stat span {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 700;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

.wachstum-stat small {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em
}

.wachstum-content .section-tag {
  margin-bottom: 16px
}

.wachstum-content h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 28px
}

.wachstum-lead {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 40px
}

.wachstum-values {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px
}

.wachstum-value {
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.wachstum-value>i {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyan);
  font-size: 0.9rem;
  flex-shrink: 0
}

.wachstum-value div strong {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px
}

.wachstum-value div span {
  font-size: 0.875rem;
  color: var(--text-secondary)
}

@media(max-width:1024px) {
  .wachstum-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .wachstum-visual {
    order: 2
  }

  .wachstum-content {
    order: 1
  }
}

/* ===== 6. MEINE PROJEKTE (SHOWCASE SECTION) ===== */
.referenzen {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  background: radial-gradient(circle at 50% 10%, rgba(0, 170, 255, 0.05), transparent 60%);
}

.ref-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 72px);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .ref-header-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.ref-main-heading {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.ref-serif-gold {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: #d4a359;
  background: linear-gradient(135deg, #f5d77f 0%, #d4a359 50%, #b88636 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ref-sub-heading {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.6;
}

.ref-sub-heading-desktop {
  display: inline;
}

.ref-sub-heading-mobile {
  display: none;
}

.ref-top-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.ref-top-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #d4a359;
  color: #f5d77f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(212, 163, 89, 0.2);
}

body[data-theme="light"] .ref-top-cta {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .ref-top-cta:hover {
  border-color: #b88636;
  color: #b88636;
  box-shadow: 0 8px 20px rgba(184, 134, 54, 0.15);
}

/* 2-Spalten Alternierende Reihen */
.ref-projects-list {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 100px);
}

.ref-project-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.ref-project-row.reversed {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Mockup Card (Dunkle Plate mit weichem Rand & Leuchten) */
.ref-mockup-wrapper {
  width: 100%;
}

.ref-mockup-card {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(18, 24, 48, 0.9), rgba(8, 12, 28, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: clamp(20px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

body[data-theme="light"] .ref-mockup-card {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ref-mockup-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 163, 89, 0.45);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(212, 163, 89, 0.2);
}

body[data-theme="light"] .ref-mockup-card:hover {
  border-color: rgba(184, 134, 54, 0.45);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12), 0 0 30px rgba(184, 134, 54, 0.15);
}

.ref-mockup-card img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ref-mockup-card:hover img {
  transform: scale(1.025);
}

.ref-mockup-hover-hint {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 20, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 24px;
}

.ref-mockup-card:hover .ref-mockup-hover-hint {
  opacity: 1;
}

.ref-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #d4a359;
  color: #000000;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(10px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ref-mockup-card:hover .ref-hint-chip {
  transform: translateY(0);
}

/* Info Spalte */
.ref-info-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ref-meta-tags {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4a359;
  margin-bottom: 12px;
}

body[data-theme="light"] .ref-meta-tags {
  color: #b88636;
}

.ref-item-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.ref-item-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.ref-desc-mobile {
  display: none;
}

.ref-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.ref-pill {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease;
}

body[data-theme="light"] .ref-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

.ref-actions-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Gold Button "Case Study" */
.btn-ref-case-study {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d77f 0%, #d4a359 50%, #b88636 100%);
  color: #0b0f19;
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212, 163, 89, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  text-decoration: none;
}

.btn-ref-case-study:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 163, 89, 0.55), 0 0 16px rgba(245, 215, 127, 0.4);
  color: #000000;
}

/* Outline Button "Website ansehen ↗" */
.btn-ref-website {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-ref-website:hover {
  border-color: #d4a359;
  color: #f5d77f;
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

body[data-theme="light"] .btn-ref-website {
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

body[data-theme="light"] .btn-ref-website:hover {
  border-color: #b88636;
  color: #b88636;
  background: rgba(0, 0, 0, 0.02);
}

/* Banner / CTA Box unter den 3 Projekten */
.ref-more-projects-box {
  margin-top: clamp(60px, 8vw, 90px);
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 48px);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(16, 24, 52, 0.9) 0%, rgba(8, 14, 34, 0.95) 100%);
  border: 1px solid rgba(0, 170, 255, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 35px rgba(0, 170, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

body[data-theme="light"] .ref-more-projects-box {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-color: rgba(0, 118, 180, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

.ref-more-content {
  max-width: 640px;
}

.ref-more-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 10px;
}

body[data-theme="light"] .ref-more-eyebrow {
  color: #0076b4;
}

.ref-more-title {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.25;
}

.ref-more-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.btn-all-projects-popup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00d4ff 0%, #0077ff 100%);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 1.02rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 170, 255, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  white-space: nowrap;
}

.btn-all-projects-popup:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 38px rgba(0, 170, 255, 0.5), 0 0 24px rgba(0, 212, 255, 0.4);
}

/* ==================================================
   ALL PROJECTS POPUP MODAL (STYLE WIE IM SCREENSHOT)
   ================================================== */
.apm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 6, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: clamp(12px, 2.5vw, 28px);
}

.apm-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.apm-modal-backdrop {
  position: absolute;
  inset: 0;
}

.apm-modal-container {
  position: relative;
  width: 100%;
  max-width: 1320px;
  height: 92vh;
  max-height: 920px;
  background: #090e23;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 45px rgba(0, 170, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(18px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

body[data-theme="light"] .apm-modal-container {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
}

.apm-modal-overlay.active .apm-modal-container {
  transform: scale(1) translateY(0);
}

.apm-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  z-index: 10;
  transition: all 0.2s ease;
}

.apm-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
  transform: rotate(90deg);
}

body[data-theme="light"] .apm-modal-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.apm-modal-scrollable {
  overflow-y: auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px);
  height: 100%;
}

/* Custom Scrollbar for APM Modal */
.apm-modal-scrollable::-webkit-scrollbar {
  width: 8px;
}

.apm-modal-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.apm-modal-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

body[data-theme="light"] .apm-modal-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

/* APM Header (Exakt wie im Screenshot) */
.apm-header {
  margin-bottom: 32px;
  max-width: 800px;
}

.apm-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 12px;
}

body[data-theme="light"] .apm-eyebrow {
  color: #64748b;
}

.apm-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

body[data-theme="light"] .apm-title {
  color: #0f172a;
}

.apm-subtitle {
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

body[data-theme="light"] .apm-subtitle {
  color: #64748b;
}

/* Filter Bar Pills */
.apm-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.apm-filter-bar::-webkit-scrollbar {
  display: none;
}

.apm-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.apm-filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.apm-filter-btn.active {
  background: #ffffff;
  border-color: #ffffff;
  color: #0b0f19;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
}

body[data-theme="light"] .apm-filter-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: #475569;
}

body[data-theme="light"] .apm-filter-btn:hover {
  border-color: #0f172a;
  color: #0f172a;
  background: rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .apm-filter-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

.apm-count {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* 3-Spalten Grid */
.apm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 28px);
}

/* Einzelne Karte exakt wie im Screenshot */
.apm-project-card {
  background: #0e1533;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

body[data-theme="light"] .apm-project-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.apm-project-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 163, 89, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

body[data-theme="light"] .apm-project-card:hover {
  border-color: rgba(184, 134, 54, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

/* Media Mockup Container am Kopf der Karte */
.apm-card-media {
  background: #060a1a;
  padding: 24px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] .apm-card-media {
  background: #f4f5f8;
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.apm-card-media img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apm-project-card:hover .apm-card-media img {
  transform: scale(1.04);
}

/* Card Body */
.apm-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.apm-card-meta {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}

body[data-theme="light"] .apm-card-meta {
  color: #64748b;
}

.apm-card-title {
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.3;
}

body[data-theme="light"] .apm-card-title {
  color: #0f172a;
}

.apm-card-desc {
  font-size: 0.90rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 18px;
  flex: 1;
}

body[data-theme="light"] .apm-card-desc {
  color: #64748b;
}

.apm-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}

.apm-tag-pill {
  font-size: 0.74rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

body[data-theme="light"] .apm-tag-pill {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

.apm-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .apm-card-actions {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.apm-card-actions .btn-ref-case-study {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.apm-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
  padding: 0;
}

.apm-card-link:hover {
  color: #d4a359;
}

body[data-theme="light"] .apm-card-link {
  color: #0f172a;
}

body[data-theme="light"] .apm-card-link:hover {
  color: #b88636;
}

/* ==================================================
   CASE STUDY DETAIL POPUP MODAL (#caseStudyModal)
   ================================================== */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(2, 5, 16, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: clamp(12px, 2.5vw, 28px);
}

.cs-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cs-modal-backdrop {
  position: absolute;
  inset: 0;
}

.cs-modal-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  max-height: 860px;
  background: #090e23;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(212, 163, 89, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

body[data-theme="light"] .cs-modal-container {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
}

.cs-modal-overlay.active .cs-modal-container {
  transform: scale(1) translateY(0);
}

.cs-modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  z-index: 10;
  transition: all 0.2s ease;
}

.cs-modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
  transform: rotate(90deg);
}

body[data-theme="light"] .cs-modal-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.cs-modal-scrollable {
  overflow-y: auto;
  padding: clamp(24px, 4vw, 48px);
  height: 100%;
}

.cs-modal-scrollable::-webkit-scrollbar {
  width: 8px;
}

.cs-modal-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.cs-modal-scrollable::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

body[data-theme="light"] .cs-modal-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
}

/* Modal Kopfbereich */
.cs-modal-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .cs-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.cs-modal-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cs-modal-category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4a359;
}

body[data-theme="light"] .cs-modal-category {
  color: #b88636;
}

.cs-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.cs-modal-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.15;
}

body[data-theme="light"] .cs-modal-title {
  color: #0f172a;
}

.cs-modal-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 800px;
}

/* 2-Spalten Layout */
.cs-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  margin-bottom: 36px;
}

.cs-modal-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-modal-img-card {
  background: #060a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="light"] .cs-modal-img-card {
  background: #f4f5f8;
  border-color: rgba(0, 0, 0, 0.08);
}

.cs-modal-img-card img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
}

.cs-facts-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
}

body[data-theme="light"] .cs-facts-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.cs-facts-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-theme="light"] .cs-facts-title {
  color: #0f172a;
}

.cs-facts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-facts-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.85rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}

body[data-theme="light"] .cs-facts-list li {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.cs-facts-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cs-fact-lbl {
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-fact-val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

body[data-theme="light"] .cs-fact-val {
  color: #0f172a;
}

/* Rechte Spalte: Story Schritte */
.cs-modal-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-step-block {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px;
  position: relative;
}

body[data-theme="light"] .cs-step-block {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.cs-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cs-block-problem .cs-step-badge {
  color: #f87171;
}

.cs-block-solution .cs-step-badge {
  color: #00d4ff;
}

.cs-block-result .cs-step-badge {
  color: #34d399;
}

.cs-step-block h4 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

body[data-theme="light"] .cs-step-block h4 {
  color: #0f172a;
}

.cs-step-block p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Zitat-Card */
.cs-quote-card {
  background: rgba(212, 163, 89, 0.06);
  border: 1px solid rgba(212, 163, 89, 0.25);
  border-radius: 18px;
  padding: 20px;
  position: relative;
}

.cs-quote-icon {
  font-size: 1.3rem;
  color: #d4a359;
  margin-bottom: 10px;
  display: block;
}

.cs-quote-p {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 8px;
}

body[data-theme="light"] .cs-quote-p {
  color: #1e293b;
}

.cs-quote-by {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #d4a359;
}

/* Tags Container */
.cs-tags-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-tags-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cs-tags-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-modal-tag-pill {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

body[data-theme="light"] .cs-modal-tag-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

/* Modal Footer Actions */
.cs-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

body[data-theme="light"] .cs-modal-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.cs-footer-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  font-size: 0.90rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cs-footer-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #00d4ff;
  color: #00d4ff;
}

body[data-theme="light"] .cs-footer-ghost {
  border-color: rgba(0, 0, 0, 0.15);
  color: #0f172a;
}

body[data-theme="light"] .cs-footer-ghost:hover {
  border-color: #0076b4;
  color: #0076b4;
}

.cs-footer-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00d4ff 0%, #0077ff 100%);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 170, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-footer-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 170, 255, 0.5);
  color: #ffffff;
}

/* ==================================================
   RESPONSIVE DESIGN (REFERENZEN & MODALS)
   ================================================== */
@media (max-width: 1024px) {
  .apm-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-modal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  .ref-project-row,
  .ref-project-row.reversed {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ref-project-row.reversed .ref-info-wrapper {
    order: 2;
  }

  .ref-project-row.reversed .ref-mockup-wrapper {
    order: 1;
  }

  .ref-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ref-more-projects-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  .apm-modal-container {
    height: 96vh;
    border-radius: 20px;
  }

  .apm-modal-scrollable {
    padding: 24px 16px;
  }

  .cs-modal-container {
    height: 96vh;
    border-radius: 20px;
  }

  .cs-modal-scrollable {
    padding: 24px 16px;
  }

  .cs-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-footer-ghost,
  .cs-footer-primary {
    justify-content: center;
    width: 100%;
  }

  .ref-actions-bar {
    width: 100%;
  }

  .btn-ref-case-study,
  .btn-ref-website {
    width: 100%;
    justify-content: center;
  }

  .btn-all-projects-popup {
    width: 100%;
    justify-content: center;
  }
}


/* ===== WEBSITE-ANALYSE SECTION ===== */
.analyse-section {
  padding: clamp(20px, 2.5vw, 30px) 0 clamp(32px, 4vw, 48px) 0;
  overflow-anchor: none;
}

.analyse-card-container {
  perspective: 1200px;
  width: 100%;
}

.analyse-card {
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s ease;
  min-height: 480px;
}

.analyse-card.flipped {
  transform: rotateY(180deg);
}

.analyse-card-face {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: 56px 64px;
  border: 1px solid rgba(0, 170, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
}

.analyse-card-face::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.15), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.analyse-card-face::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.analyse-card-front {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.08), rgba(124, 58, 237, 0.08));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  z-index: 2;
}

.analyse-card-back {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.08), rgba(124, 58, 237, 0.08));
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

/* Compact spacing for backside check form to fit frame */
.analyse-back-form {
  margin-top: 12px;
}

.analyse-back-form .form-group {
  margin-bottom: 14px;
}

.analyse-back-form .form-checkbox {
  margin-bottom: 16px;
}

/* Make privacy text on the backside more compact to fit the frame */
.analyse-back-form .form-checkbox label {
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.analyse-back-close {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
}

.analyse-back-close:hover {
  border-color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.05);
  color: var(--color-cyan);
  transform: rotate(90deg);
}

.analyse-back-content {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: left;
}

.analyse-back-content h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}

.analyse-back-content>p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.reachability-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.reachability-option {
  position: relative;
  cursor: pointer;
  width: 100%;
}

.reachability-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.reachability-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: var(--transition);
}

.reachability-option input[type="radio"]:checked+.reachability-box {
  border-color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  color: var(--color-cyan);
  box-shadow: var(--shadow-glow);
}

.reachability-option:hover .reachability-box {
  border-color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.04);
}

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

.analyse-tag {
  background: rgba(0, 212, 255, 0.15) !important;
  border-color: rgba(0, 212, 255, 0.35) !important
}

.analyse-content h2 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px
}

.analyse-content>p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 32px
}

.analyse-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px
}

.analyse-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary)
}

.analyse-checklist i {
  color: var(--color-cyan);
  font-size: 1.1rem;
  flex-shrink: 0
}

.analyse-cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-analyse {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  background: var(--gradient-main);
  color: #fff;
  transition: var(--transition);
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.25);
  position: relative;
  z-index: 2
}

.btn-analyse:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 56px rgba(0, 170, 255, 0.4)
}

.analyse-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 16px;
  position: relative;
  z-index: 2
}

.analyse-note i {
  color: var(--color-cyan)
}

/* Footer Mini Analyse Button */
.footer-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  width: fit-content;
}

.btn-analyse-mini {
  padding: 12px 24px;
  font-size: 0.9rem;
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none;
  margin-top: 0;
}

.btn-analyse-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 170, 255, 0.3);
}

.analyse-note-mini {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 8px;
  margin-bottom: 0;
  text-align: center;
}

/* Analyse Visual */
.analyse-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 2
}

.analyse-score-ring {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center
}

.analyse-ring-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.analyse-score-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 2
}

.analyse-score-num {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 800;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1
}

.analyse-score-label {
  font-size: 0.85rem;
  color: var(--text-muted)
}

.analyse-metrics {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.analyse-metric {
  display: flex;
  align-items: center;
  gap: 12px
}

.am-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: 44px;
  flex-shrink: 0
}

.am-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden
}

.am-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1)
}

.am-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  width: 28px;
  text-align: right
}

@media(max-width:900px) {
  .analyse-card-face {
    padding: 48px 32px;
  }

  .analyse-card-front {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .analyse-card-back {
    padding: 32px 24px;
  }

  .analyse-back-close {
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .reachability-box {
    padding: 12px 16px;
    font-size: 0.85rem;
  }

  .analyse-visual {
    display: none
  }
}

/* ===== BTN-FULL ===== */
.btn-full {
  width: 100%;
  justify-content: center
}

/* ===== LIGHT MODE für neue Sektionen ===== */
body[data-theme="light"] .wachstum-stat,
body[data-theme="light"] .projekt-card,
body[data-theme="light"] .analyse-card-face {
  background: var(--bg-card);
  border: 1px solid rgba(0, 118, 180, 0.15);
}

/* ===== INPUT ERROR STATE ===== */
.form-group input.input-error,
.form-group textarea.input-error,
.form-group select.input-error {
  border-color: #ff3b30 !important;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.2) !important;
}

.form-checkbox input[type="checkbox"].input-error {
  border-color: #ff3b30 !important;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.2) !important;
}

/* ===== LEGAL MODALS (IMPRESSUM & DATENSCHUTZ) ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(5, 5, 16, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  padding: 16px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform var(--transition);
  background: rgba(10, 10, 31, 0.95);
  position: relative;
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 2.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
  transition: var(--transition);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.modal-close:hover {
  color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.05);
}

body[data-theme="light"] .modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.modal-body {
  padding: 40px 32px 32px 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-body h2 {
  font-size: 2.2rem;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 24px;
  flex-shrink: 0;
  line-height: 1.2;
}

.modal-content-scroll {
  overflow-y: auto;
  padding-right: 16px;
  flex-grow: 1;
}

/* Custom Scrollbar for Modal Content */
.modal-content-scroll::-webkit-scrollbar {
  width: 6px;
}

.modal-content-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

body[data-theme="light"] .modal-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

.modal-content-scroll h3 {
  font-size: 1.25rem;
  font-family: var(--font-head);
  color: var(--color-cyan);
  margin-top: 24px;
  margin-bottom: 12px;
  font-weight: 600;
}

.modal-content-scroll h3:first-of-type {
  margin-top: 0;
}

.modal-content-scroll p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.modal-content-scroll p strong {
  color: var(--text-primary);
  font-weight: 600;
}

.modal-content-scroll a {
  color: var(--color-cyan);
  transition: var(--transition);
  word-break: break-all;
}

.modal-content-scroll a:hover {
  color: var(--color-purple-light);
  text-decoration: underline;
}

/* Light mode styling overrides */
body[data-theme="light"] .modal-overlay {
  background: rgba(240, 244, 255, 0.8);
}

body[data-theme="light"] .modal-container {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 48px rgba(13, 18, 48, 0.15);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

  .modal-overlay,
  .modal-container,
  .modal-close,
  .modal-content-scroll a {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ===== COOKIE SETTINGS MODAL ===== */
.cookie-modal-overlay {
  z-index: 3000;
}

.cookie-container {
  width: 100%;
  max-width: 580px;
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 20px !important;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: scale(0.95) translateY(20px);
  transition: transform var(--transition);
  box-shadow: 0 24px 60px rgba(5, 15, 28, 0.85) !important;
}

.cookie-modal-overlay.active .cookie-container {
  transform: scale(1) translateY(0);
}

.cookie-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cookie-shield-icon {
  font-size: 1.5rem;
  color: #5CC8FF !important;
}

.cookie-header h2 {
  font-size: 1.45rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: #F5FAFF !important;
  margin: 0;
}

.cookie-desc {
  font-size: 0.9rem;
  color: #A9BCD0 !important;
  line-height: 1.6;
  margin: 0;
}

.cookie-desc a {
  color: #5CC8FF !important;
  text-decoration: underline;
  transition: color 200ms ease;
}

.cookie-desc a:hover {
  color: #82D7FF !important;
}

.cookie-divider {
  height: 1px;
  background: #1C3550 !important;
}

.cookie-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.co-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-info h3 {
  font-size: 1.05rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: #F5FAFF !important;
  margin: 0;
}

.co-info p {
  font-size: 0.85rem;
  color: #A9BCD0 !important;
  margin: 0;
  line-height: 1.4;
}

.co-always-active {
  font-size: 0.85rem;
  font-style: italic;
  color: #64748B !important;
  white-space: nowrap;
}

.cookie-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 580px) {
  .cookie-buttons {
    grid-template-columns: 1fr;
  }
}

.cookie-btn {
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: center;
  border: none;
}

.cookie-btn.btn-essential,
.cookie-btn.btn-save {
  background: #091B30 !important;
  color: #F5FAFF !important;
  border: 1px solid #1C3550 !important;
  box-shadow: 0 4px 14px rgba(7, 20, 38, 0.35);
}

.cookie-btn.btn-essential:hover,
.cookie-btn.btn-save:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.cookie-btn.btn-accept {
  background: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 700 !important;
  border: 1px solid #5CC8FF !important;
  box-shadow: 0 4px 18px rgba(92, 200, 255, 0.35) !important;
}

.cookie-btn.btn-accept:hover {
  background: #82D7FF !important;
  border-color: #82D7FF !important;
  color: #061321 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(92, 200, 255, 0.5) !important;
}

/* Switch toggle styles */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #091B30;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #1C3550;
}

.slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #A9BCD0;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
  background-color: #5CC8FF !important;
  border-color: #5CC8FF !important;
  box-shadow: 0 0 12px rgba(92, 200, 255, 0.35);
}

input:checked+.slider::before {
  transform: translateX(20px);
  background-color: #061321 !important;
}

.slider.round {
  border-radius: 24px;
}

.slider.round::before {
  border-radius: 50%;
}

/* Light mode overrides */
body[data-theme="light"] .cookie-container {
  background: #ffffff !important;
  border-color: rgba(0, 118, 180, 0.15) !important;
  box-shadow: 0 24px 60px rgba(13, 18, 48, 0.12) !important;
}

body[data-theme="light"] .cookie-header h2 {
  color: #071426 !important;
}

body[data-theme="light"] .cookie-desc {
  color: #4A5568 !important;
}

body[data-theme="light"] .cookie-shield-icon {
  color: #0076B4 !important;
}

body[data-theme="light"] .cookie-desc a {
  color: #0076B4 !important;
}

body[data-theme="light"] .cookie-divider {
  background: rgba(0, 0, 0, 0.08) !important;
}

body[data-theme="light"] .co-info h3 {
  color: #071426 !important;
}

body[data-theme="light"] .co-info p {
  color: #64748B !important;
}

body[data-theme="light"] .co-always-active {
  color: #94A3B8 !important;
}

body[data-theme="light"] .cookie-btn.btn-essential,
body[data-theme="light"] .cookie-btn.btn-save {
  background: #f8fafc !important;
  color: #071426 !important;
  border: 1px solid rgba(0, 118, 180, 0.25) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .cookie-btn.btn-essential:hover,
body[data-theme="light"] .cookie-btn.btn-save:hover {
  background: #eef6ff !important;
  border-color: #0076B4 !important;
  color: #0076B4 !important;
}

body[data-theme="light"] .cookie-btn.btn-accept {
  background: #0076B4 !important;
  color: #ffffff !important;
  border: 1px solid #0076B4 !important;
  box-shadow: 0 4px 16px rgba(0, 118, 180, 0.25) !important;
}

body[data-theme="light"] .cookie-btn.btn-accept:hover {
  background: #0055CC !important;
  border-color: #0055CC !important;
  color: #ffffff !important;
}

body[data-theme="light"] .slider {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .slider::before {
  background-color: #ffffff;
}

body[data-theme="light"] input:checked+.slider {
  background-color: #0076B4 !important;
  border-color: #0076B4 !important;
}

body[data-theme="light"] input:checked+.slider::before {
  background-color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {

  .cookie-container,
  .cookie-btn,
  .slider,
  .slider::before {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ===== PROZESS SECTION ===== */
.prozess {
  padding: clamp(40px, 5vw, 60px) 0 0 0;
  position: relative;
  overflow: hidden;
}

@media (min-width: 901px) {
  .prozess {
    padding-bottom: clamp(120px, 15vw, 180px);
  }
}

.prozess::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0, 170, 255, 0.06) 0%, rgba(124, 58, 237, 0.04) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.prozess .container {
  position: relative;
  z-index: 1;
}

/* ── Wrapper for track + steps ── */
.prozess-area {
  margin-bottom: 72px;
}

/* ── Animated Progress Track ── */
.prozess-track {
  position: relative;
  height: 32px;
  margin-bottom: 8px;
}

.prozess-track-line {
  position: absolute;
  top: 50%;
  left: 12.5%;
  width: 75%;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-50%);
  border-radius: 2px;
  overflow: hidden;
}

.prozess-track-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-purple-light));
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.prozess-track-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 10px #ffffff,
    0 0 20px var(--color-cyan),
    0 0 35px var(--color-purple-light);
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@keyframes track-fill-pulse {
  0% {
    transform: translate(50%, -50%) scale(1);
    box-shadow: 0 0 10px #ffffff, 0 0 20px var(--color-cyan), 0 0 35px var(--color-purple-light);
  }

  50% {
    transform: translate(50%, -50%) scale(1.5);
    box-shadow: 0 0 15px #ffffff, 0 0 30px var(--color-cyan), 0 0 50px var(--color-purple-light);
  }

  100% {
    transform: translate(50%, -50%) scale(1);
    box-shadow: 0 0 10px #ffffff, 0 0 20px var(--color-cyan), 0 0 35px var(--color-purple-light);
  }
}

.prozess-track-fill.pulse::after {
  animation: track-fill-pulse 0.6s ease-in-out;
}

/* Track dots – 4 positions at column centers in a 4-col grid */
.track-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 255, 0.2);
  background: var(--bg-primary);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.track-dot[data-step="1"] {
  left: 12.5%;
}

.track-dot[data-step="2"] {
  left: 37.5%;
}

.track-dot[data-step="3"] {
  left: 62.5%;
}

.track-dot[data-step="4"] {
  left: 87.5%;
}

/* Sequentially activate dots as fill passes each */
.prozess-track.visible .track-dot[data-step="1"] {
  border-color: var(--color-cyan);
  background: var(--color-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  transition-delay: 0.4s;
}

.prozess-track.visible .track-dot[data-step="2"] {
  border-color: var(--color-cyan);
  background: var(--color-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  transition-delay: 1.0s;
}

.prozess-track.visible .track-dot[data-step="3"] {
  border-color: var(--color-cyan);
  background: var(--color-cyan);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  transition-delay: 1.6s;
}

.prozess-track.visible .track-dot[data-step="4"] {
  border-color: var(--color-purple-light);
  background: var(--color-purple-light);
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.8);
  transition-delay: 2.2s;
}

/* ── Horizontal steps grid ── */
.prozess-vertical-line {
  display: none;
}

.prozess-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Active State styles for Scroll Animation ── */
.prozess-step.active {
  border-color: var(--border-glow);
  box-shadow: 0 8px 32px rgba(0, 170, 255, 0.14);
}

.prozess-step.active::after {
  opacity: 1;
}

.prozess-step.active .step-number {
  -webkit-text-stroke: 1px rgba(0, 212, 255, 0.6);
}

.prozess-step.active .step-icon {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.28), rgba(124, 58, 237, 0.28));
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
}

.track-dot.active {
  border-color: var(--color-cyan) !important;
  background: var(--color-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.8) !important;
}

.track-dot[data-step="4"].active {
  border-color: var(--color-purple-light) !important;
  background: var(--color-purple-light) !important;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.8) !important;
}

/* ── Single step card ── */
.prozess-step {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 20px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  /* No overflow:hidden — detail panel pops out below */
}

.prozess-step::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.04), rgba(124, 58, 237, 0.04));
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.prozess-step:hover,
.prozess-step:focus-visible {
  border-color: var(--border-glow);
  box-shadow: 0 8px 32px rgba(0, 170, 255, 0.14);
  transform: translateY(-4px);
  outline: none;
  z-index: 20;
}

.prozess-step:hover::after,
.prozess-step:focus-visible::after {
  opacity: 1;
}

/* ── Static content (always visible) ── */
.step-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.step-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media (min-width: 901px) {
  .step-header-row {
    justify-content: center;
    gap: 16px;
  }
}

/* Ghost step number */
.step-number {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 212, 255, 0.18);
  letter-spacing: -0.04em;
  user-select: none;
  transition: -webkit-text-stroke var(--transition);
}

.prozess-step:hover .step-number,
.prozess-step:focus-visible .step-number {
  -webkit-text-stroke: 1px rgba(0, 212, 255, 0.6);
}

/* Icon */
.step-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.14), rgba(124, 58, 237, 0.14));
  border: 1px solid rgba(0, 212, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyan);
  font-size: 1.2rem;
  margin: 0;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.prozess-step:hover .step-icon,
.prozess-step:focus-visible .step-icon {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.28), rgba(124, 58, 237, 0.28));
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
  transform: scale(1.1) rotate(-3deg);
}

.step-static h3 {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  margin: 0;
}

/* Animated hint arrow */
.step-hint {
  font-size: 0.72rem;
  color: var(--color-cyan);
  opacity: 0.5;
  transition: opacity var(--transition), transform var(--transition);
  display: block;
}

.prozess-step:hover .step-hint,
.prozess-step:focus-visible .step-hint {
  opacity: 0;
  transform: translateY(4px);
}

/* ── Detail panel – dropdown on hover ── */
.step-detail {
  position: absolute;
  top: calc(100% + 8px);
  left: -1px;
  right: -1px;
  background: rgba(8, 8, 26, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glow);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 20px 22px 24px;
  text-align: left;
  z-index: 30;
  /* Hidden by default */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.prozess-step:hover .step-detail,
.prozess-step:focus-visible .step-detail,
.prozess-step.active-step .step-detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.prozess-step.active-step {
  border-color: var(--border-glow);
  box-shadow: 0 8px 32px rgba(0, 170, 255, 0.14);
  transform: translateY(-4px);
  outline: none;
  z-index: 20;
}

.prozess-step.active-step::after {
  opacity: 1;
}

.prozess-step.active-step .step-number {
  -webkit-text-stroke: 1px rgba(0, 212, 255, 0.6);
}

.prozess-step.active-step .step-icon {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.28), rgba(124, 58, 237, 0.28));
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.35);
  transform: scale(1.1) rotate(-3deg);
}

.prozess-step.active-step .step-hint {
  opacity: 0;
  transform: translateY(4px);
}

.step-tagline {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 10px;
  opacity: 0.9;
}

.step-detail p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* ── CTA block ── */
.prozess-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.prozess-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.prozess-note i {
  color: var(--color-cyan);
}

/* ── Light mode ── */
body[data-theme="light"] .prozess-step {
  background: var(--bg-card);
  border-color: rgba(0, 118, 180, 0.15);
  box-shadow: 0 4px 16px rgba(13, 18, 48, 0.03);
}

body[data-theme="light"] .prozess-step:hover,
body[data-theme="light"] .prozess-step.active-step {
  box-shadow: 0 12px 40px rgba(0, 120, 220, 0.1);
}

body[data-theme="light"] .step-static h3 {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  padding: 0;
  margin-top: 12px;
}

body[data-theme="light"] .step-detail {
  background: rgba(240, 244, 255, 0.98);
  border-color: rgba(0, 120, 220, 0.2);
}

body[data-theme="light"] .step-number {
  -webkit-text-stroke: 1px rgba(0, 120, 220, 0.15);
}

body[data-theme="light"] .prozess-step:hover .step-number,
body[data-theme="light"] .prozess-step.active-step .step-number {
  -webkit-text-stroke: 1px rgba(0, 120, 220, 0.45);
}

body[data-theme="light"] .track-dot {
  background: #e4eaf8;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .prozess-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Track dots for 2-col layout */
  .track-dot[data-step="1"] {
    left: 25%;
  }

  .track-dot[data-step="2"] {
    left: 75%;
  }

  .track-dot[data-step="3"] {
    left: 25%;
  }

  .track-dot[data-step="4"] {
    left: 75%;
  }

  .prozess-track-line {
    left: 25%;
    width: 50%;
  }

  .step-detail {
    /* On tablet, widen detail a bit for readability */
    left: -4px;
    right: -4px;
  }
}

@media (max-width: 600px) {
  .prozess-steps {
    grid-template-columns: 1fr;
    gap: 32px;
    position: relative;
    padding-left: 28px;
    margin-left: 12px;
  }

  .prozess-vertical-line {
    display: block;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: rgba(255, 255, 255, 0.06);
  }

  .prozess-vertical-fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--color-cyan), var(--color-purple-light));
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
  }

  /* Dot for each card on mobile vertical line */
  .prozess-step::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 36px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid rgba(255, 255, 255, 0.15);
    z-index: 5;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  }

  .prozess-step.active::before {
    border-color: var(--color-cyan);
    background: var(--color-cyan);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
  }

  .prozess-step:nth-child(4).active::before {
    border-color: var(--color-purple-light);
    background: var(--color-purple-light);
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.8);
  }

  /* Hide the horizontal track on mobile */
  .prozess-track {
    display: none;
  }

  /* On mobile, detail panels are always visible */
  .step-detail {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 16px 0 0;
    margin-top: 16px;
    box-shadow: none;
  }

  /* Hide the 'expand' hint chevron when always showing */
  .step-hint {
    display: none;
  }

  /* More compact step cards on mobile */
  .prozess-step {
    padding: 24px 20px 20px;
    text-align: left;
  }

  .step-static {
    align-items: flex-start;
  }

  .step-icon {
    margin: 0;
  }

  .step-number {
    font-size: 2.2rem;
  }

  body[data-theme="light"] .step-detail {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.08);
  }

  body[data-theme="light"] .prozess-step::before {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .prozess-step:hover,
  .prozess-step:focus-visible {
    transform: none !important;
  }

  .prozess-step:hover .step-icon,
  .prozess-step:focus-visible .step-icon {
    transform: none !important;
  }

  .prozess-track-fill {
    transition: none !important;
  }

  .track-dot {
    transition: none !important;
  }

  .step-detail {
    transition: none !important;
  }
}

/* ================================================================
   ===== INNDIGITAL 2.0 DESIGN SYSTEM & CONVERSION COMPONENTS =====
   ================================================================ */

/* --- Hero Micro-Trust & Founder Pill --- */
.hero-micro-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.hmt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.hmt-item i {
  color: var(--color-cyan);
  font-size: 0.95rem;
}

.hero-founder-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 10, 31, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 170, 255, 0.22);
  padding: 10px 20px;
  border-radius: 100px;
  margin: 32px auto 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
  max-width: 90%;
}

.hero-founder-pill:hover {
  border-color: var(--color-cyan);
  box-shadow: 0 10px 40px rgba(0, 170, 255, 0.2);
  transform: translateY(-2px);
}

.hfp-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-cyan), var(--color-purple));
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.4);
}

.hfp-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.hfp-text strong {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 600;
}

.hfp-text span {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.hfp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  margin-left: 6px;
  flex-shrink: 0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGreen 2s infinite ease-in-out;
}

@keyframes pulseGreen {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

/* --- Trust Bar --- */
.trust-bar {
  position: relative;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 36px 0;
  z-index: 10;
}

.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tb-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
}

.tb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 170, 255, 0.1);
  border: 1px solid rgba(0, 170, 255, 0.2);
  color: var(--color-cyan);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tb-info strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-weight: 600;
}

.tb-info span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* --- Section Tags --- */
.section-tag-warning {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

.section-tag-audit {
  color: var(--color-cyan) !important;
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.25) !important;
}

.section-tag-gold {
  color: #fcd34d !important;
  background: rgba(252, 211, 77, 0.12) !important;
  border-color: rgba(252, 211, 77, 0.3) !important;
}

/* --- Problem Section --- */
.problem-section {
  padding: 40px 0 50px;
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.04) 50%, transparent);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}

.problem-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.problem-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.problem-num {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(245, 158, 11, 0.2);
  line-height: 1;
}

.problem-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
}

.problem-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.48;
  margin-bottom: 14px;
  flex-grow: 1;
}

.problem-impact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.08);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid #f59e0b;
}

.problem-impact i {
  font-size: 0.75rem;
  color: #f59e0b;
}

/* --- Problem & Founder 3D Flip Card Category --- */
.problem-founder-flip-section {
  padding: 40px 0 50px;
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.04) 50%, transparent);
}

.problem-founder-flip-section .section-header {
  margin-bottom: 20px;
}

.problem-founder-flip-section .section-header h2 {
  font-size: clamp(1.65rem, 2.7vw, 2.25rem);
  margin-bottom: 8px;
  line-height: 1.25;
}

.problem-founder-flip-section .section-lead {
  font-size: 0.95rem;
  margin-bottom: 0;
  max-width: 620px;
}

.category-flip-stage {
  perspective: 2600px;
  width: 100%;
  position: relative;
  transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-flip-card {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.category-flip-card.is-flipped {
  transform: rotateY(180deg);
}

.category-flip-face {
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
}

.category-flip-front {
  position: relative;
  z-index: 2;
  transform: rotateY(0deg);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.category-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(180deg);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.category-flip-card.is-flipped .category-flip-front {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.category-flip-card.is-flipped .category-flip-back {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Flip Trigger Button (Underneath the 3 Problem Cards) */
.problem-flip-trigger-wrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-category-flip {
  position: relative;
  width: 100%;
  max-width: 820px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 28px rgba(0, 170, 255, 0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.25, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  overflow: hidden;
  display: block;
}

.btn-category-flip:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: rgba(0, 212, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 170, 255, 0.2);
}

.btn-category-flip:active {
  transform: translateY(-1px) scale(0.995);
}

.bcf-ambient-glow {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.12) 0%, rgba(124, 58, 237, 0.08) 40%, transparent 70%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.btn-category-flip:hover .bcf-ambient-glow {
  opacity: 1;
}

.bcf-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.bcf-icon-ring {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.18), rgba(124, 58, 237, 0.22));
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: var(--color-cyan);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 170, 255, 0.25);
  transition: transform 0.6s cubic-bezier(0.34, 1.25, 0.64, 1), background 0.3s ease;
}

.btn-category-flip:hover .bcf-icon-ring {
  transform: rotate(180deg) scale(1.08);
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.3), rgba(124, 58, 237, 0.35));
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.45);
}

.bcf-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

.bcf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.12);
  padding: 3px 10px;
  border-radius: 100px;
  width: fit-content;
  border: 1px solid rgba(0, 212, 255, 0.25);
}

.bcf-title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.bcf-hint {
  display: none !important;
}

.bcf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--gradient-main);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0, 170, 255, 0.35);
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bcf-pill-text-mobile,
.bcf-icon-mobile {
  display: none;
}

.btn-category-flip:hover .bcf-pill {
  transform: translateX(4px);
  box-shadow: 0 8px 24px -2px rgba(0, 170, 255, 0.55), 0 0 20px rgba(167, 139, 250, 0.4);
}

.bcf-pill i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.btn-category-flip:hover .bcf-pill i {
  transform: translateX(3px);
}

/* Flip Back Top Bar */
.flip-back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}

.btn-flip-back-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-cyan);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
}

.btn-flip-back-chip:hover {
  background: rgba(0, 170, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.4);
  color: #ffffff;
  transform: translateX(-3px);
  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.25);
}

.btn-flip-back-chip i {
  font-size: 0.78rem;
  transition: transform 0.4s ease;
}

.btn-flip-back-chip:hover i {
  transform: rotate(-180deg);
}

.flip-back-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
}

.fbi-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 2s infinite;
}

.btn-flip-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-flip-back-link:hover i {
  transform: rotate(-180deg);
  transition: transform 0.4s ease;
}

/* --- Founder Compact Card (Back Face) --- */
.founder-compact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fcc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fcc-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fcc-avatar-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 20px;
  flex-shrink: 0;
  background: #091B30;
  border: 2px solid rgba(92, 200, 255, 0.4);
  box-shadow: 0 0 20px rgba(92, 200, 255, 0.22), 0 8px 24px rgba(3, 10, 20, 0.55);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcc-avatar-crop {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 50% 32%, #19385c 0%, #0a1e36 60%, #061322 100%);
}

.fcc-avatar-img {
  position: absolute;
  width: 165px !important;
  max-width: none !important;
  height: auto !important;
  top: 3px;
  left: calc(50% + 7px);
  transform: translateX(-50%);
  display: block;
}

.fcc-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background: radial-gradient(circle at 50% 28%, #19385c 0%, #0a1e36 60%, #061322 100%);
  color: var(--primary-cta);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcc-badge-verified {
  display: none !important;
}

body[data-theme="light"] .fcc-avatar-wrap {
  background: #f0f6fc;
  border-color: rgba(0, 118, 180, 0.4);
  box-shadow: 0 0 16px rgba(0, 118, 180, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .fcc-avatar-crop,
body[data-theme="light"] .fcc-avatar-initials {
  background: radial-gradient(circle at 50% 28%, #e0f2fe 0%, #bae6fd 60%, #93c5fd 100%);
}

body[data-theme="light"] .fcc-badge-verified {
  border-color: #ffffff;
}

.fcc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fcc-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcc-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fcc-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.25);
  padding: 2px 7px;
  border-radius: 100px;
}

.fcc-role {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.fcc-role strong {
  color: var(--text-primary);
}

.fcc-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcc-social-link {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  text-decoration: none;
  transition: var(--transition);
}

.fcc-social-link:hover {
  background: rgba(0, 170, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.4);
  color: var(--color-cyan);
  transform: translateY(-2px);
}

/* 3 Solutions Grid */
.founder-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.solution-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
}

.solution-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

.solution-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.solution-num {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(0, 212, 255, 0.25);
  line-height: 1;
}

.solution-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: var(--color-cyan);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-card h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.25;
}

.solution-card p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-bottom: 12px;
  flex-grow: 1;
}

.solution-benefit {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid #10b981;
}

.solution-benefit i {
  font-size: 0.8rem;
  color: #10b981;
}

/* Compact Actions */
#founderCtaBtn,
#founderCtaBtn span {
  white-space: nowrap !important;
}

.fcc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fcc-actions-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fcc-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 768px) {
  .bcf-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .btn-category-flip {
    padding: 20px;
  }

  .bcf-pill {
    width: 100%;
    justify-content: center;
  }

  .flip-back-bar {
    display: none !important;
  }

  .founder-compact-card {
    padding: 22px 18px;
    gap: 18px;
  }

  .founder-solutions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .solution-card {
    padding: 14px 14px !important;
    border-radius: 12px !important;
  }

  .solution-card h4 {
    font-size: 0.98rem !important;
    margin-bottom: 4px !important;
  }

  .solution-card p {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .solution-benefit {
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
  }

  .fcc-header {
    display: none !important;
  }

  .fcc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .fcc-actions-left,
  .fcc-actions-right {
    width: 100%;
    flex-direction: column;
  }

  .fcc-actions-left .btn-primary,
  .fcc-actions-left .btn-ghost,
  .fcc-actions-right .btn-flip-back-chip {
    width: 100%;
    justify-content: center;
  }
}

/* ==================================================
   3 KERNLEISTUNGEN: SCROLL-DRIVEN 3D DECK BLÄTTER-ANIMATION
   ================================================== */
.services-stacked-section {
  position: relative;
  padding: 0;
  overflow: visible;
}

/* Gesamter Scroll-Weg für das Blättern durch die 3 Karten */
.services-scroll-deck {
  position: relative;
  height: 270vh;
  /* Genügend Scrollweg für 1 -> 2 -> 3 */
}

/* Das fixierte Bühnen-Element im sichtbaren Bereich */
.services-sticky-stage {
  position: sticky;
  top: 75px;
  height: calc(100vh - 85px);
  max-height: 840px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
  box-sizing: border-box;
}

/* Navigations-Leiste & Indikatoren */
.services-deck-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .services-deck-nav {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.services-nav-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.s-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

body[data-theme="light"] .s-tab-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

.s-tab-btn:hover {
  color: var(--text-primary);
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.08);
}

.s-tab-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.4) 0%, rgba(0, 212, 255, 0.3) 100%);
  border-color: var(--color-cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body[data-theme="light"] .s-tab-btn.active {
  color: #0044cc;
  background: rgba(0, 102, 255, 0.12);
  border-color: #0066ff;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.15);
}

.s-tab-num {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--color-cyan);
  font-size: 0.85rem;
}

/* Zähler & Scroll-Hinweis */
.services-deck-counter {
  display: flex;
  align-items: center;
  gap: 16px;
}

.deck-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.deck-hint i {
  color: var(--color-cyan);
  animation: bounceDownAnim 1.6s infinite;
}

@keyframes bounceDownAnim {

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

  50% {
    transform: translateY(4px);
  }
}

.deck-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.deck-curr {
  color: var(--color-cyan);
  font-size: 1.1rem;
}

.deck-nav-arrows {
  display: inline-flex;
  gap: 6px;
}

.deck-arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.deck-arrow-btn:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.1);
}

/* 3D-Bühne für die Karten */
.services-deck-stage {
  position: relative;
  perspective: 1400px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  min-height: 440px;
  flex-grow: 1;
}

/* Einzelne Blätter-Karten */
.service-flip-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 440px;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, filter 0.5s ease;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* ZUSTAND: AKTIV (Im Fokus) */
.service-flip-card.state-active {
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  opacity: 1;
  filter: blur(0px);
  pointer-events: auto;
  z-index: 10;
}

/* ZUSTAND: VORBEI (Bereits nach oben umgeblättert) */
.service-flip-card.state-passed {
  transform: translate3d(0, -50px, -80px) scale(0.93) rotateX(14deg);
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}

/* ZUSTAND: NÄCHSTE KARTE (Wartet leicht versetzt darunter) */
.service-flip-card.state-next {
  transform: translate3d(0, 36px, -50px) scale(0.95) rotateX(-8deg);
  opacity: 0.35;
  filter: blur(2px);
  pointer-events: none;
  z-index: 5;
}

/* ZUSTAND: WEIT ENTFERNT */
.service-flip-card.state-far {
  transform: translate3d(0, 70px, -110px) scale(0.88) rotateX(-16deg);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}

/* Karten-Innenleben (2 Spalten: Links Intro & CTA, Rechts Checkliste & Kennzahl) */
.sfc-inner {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 36px;
  padding: 34px 38px;
  border-radius: 24px;
  background: rgba(10, 10, 31, 0.94);
  border: 1px solid rgba(0, 212, 255, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(0, 102, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  align-items: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

body[data-theme="light"] .sfc-inner {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 102, 255, 0.22);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 0 30px rgba(0, 102, 255, 0.08);
}

.sfc-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff, #0066ff, transparent);
}

.sfc-col-info {
  display: flex;
  flex-direction: column;
}

.sfc-col-info h3 {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 10px 0 12px 0;
}

.sfc-col-info .scc-desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.sfc-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.sfc-col-features {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 26px;
}

body[data-theme="light"] .sfc-col-features {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.sfc-features-title {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cyan);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sfc-col-features .scc-checklist {
  margin-bottom: 16px;
  gap: 11px;
}

.sfc-col-features .scc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.sfc-col-features .scc-checklist li i {
  color: var(--color-cyan);
  margin-top: 3px;
  flex-shrink: 0;
}

.sfc-col-features .scc-checklist li strong {
  color: var(--text-primary);
}

/* Stat Callout Badge */
.sfc-stat-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 102, 255, 0.15) 100%);
  border: 1px solid rgba(0, 212, 255, 0.25);
}

.sfc-stat-val {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-cyan);
  white-space: nowrap;
}

.sfc-stat-lbl {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* Mobile & Tablet Anpassung */
@media (max-width: 900px) {
  .services-scroll-deck {
    height: 250vh;
  }

  .sfc-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
    max-height: 520px;
    overflow-y: auto;
  }

  .services-deck-stage {
    min-height: 480px;
  }

  .service-flip-card {
    min-height: 480px;
  }
}

@media (max-width: 640px) {
  .services-scroll-deck {
    height: 220vh;
  }

  .services-sticky-stage {
    top: 60px;
    height: calc(100vh - 65px);
  }

  .services-deck-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .services-nav-tabs {
    gap: 6px;
  }

  .s-tab-btn {
    padding: 6px 10px;
    font-size: 0.76rem;
    border-radius: 9px;
  }

  .sfc-inner {
    padding: 16px 14px;
    gap: 12px;
  }

  .sfc-col-info h3 {
    font-size: 1.12rem;
    margin: 4px 0 6px;
  }

  .sfc-col-features {
    padding: 12px;
  }
}

/* Legacy fallback für Core Services Grid */
.services-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 50px;
}

.service-core-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  backdrop-filter: blur(14px);
  position: relative;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.scc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.scc-number {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 800;
  color: rgba(0, 212, 255, 0.25);
}

.scc-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.scc-icon-wrap {
  margin-bottom: 24px;
}

.scc-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--color-cyan);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 170, 255, 0.15);
}

.service-core-card h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1.35;
}

.scc-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

.scc-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.scc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.scc-checklist li i {
  color: var(--color-cyan);
  font-size: 0.95rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.scc-checklist li strong {
  color: var(--text-primary);
}

.scc-action {
  margin-top: auto;
}

.btn-service-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition);
}

.btn-service-link:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

.btn-service-link i {
  transition: transform 0.25s ease;
}

.btn-service-link:hover i {
  transform: translateX(4px);
}

.services-slider-cta {
  display: none;
}

/* --- Secondary Services Bar --- */
.secondary-services {
  margin-top: 48px;
  padding: 24px 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}

.secondary-services-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.secondary-services-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

.sec-pill i {
  color: var(--color-purple-light);
}

/* --- Wachstum Actions & Micro Note --- */
.wachstum-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 36px;
}

.wachstum-actions .micro-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-left: 8px;
}

.wachstum-actions .micro-note i {
  font-size: 0.72rem;
  color: #10b981;
}

body[data-theme="light"] .wachstum-actions .micro-note {
  color: var(--text-secondary);
}

/* ===== REFERENZEN SHOWCASE (MODERN ALTERNATING 2-COLUMN LAYOUT) ===== */
.referenzen {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
}

/* 1. Header Row (Headline + Subtitel links, CTA Button rechts) */
.ref-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.ref-header-text {
  max-width: 980px;
}

.ref-main-heading {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

/* Der charakteristische gold-serif Kursivstil wie im Referenzbild */
.ref-serif-gold {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  color: #e5b342;
  letter-spacing: -0.01em;
  display: inline-block;
}

body[data-theme="light"] .ref-serif-gold {
  color: #b47a16;
}

.ref-sub-heading {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 980px;
}

.ref-header-action {
  flex-shrink: 0;
}

.ref-top-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ref-top-cta i {
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

.ref-top-cta:hover {
  transform: translateY(-2px);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
}

.ref-top-cta:hover i {
  transform: translate(2px, -2px);
}

body[data-theme="light"] .ref-top-cta {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  color: #0d1230;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .ref-top-cta:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 118, 180, 0.06);
}

/* 2. Projekte-Liste (Alternating Two-Column Grid) */
.ref-projects-list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
}

.ref-project-row {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* Bei ungeraden bzw. geraden Zeilen wird die Richtung umgekehrt */
.ref-project-row.reversed {
  grid-template-columns: 1fr 1.18fr;
}

/* 3. Mockup Wrapper & Card */
.ref-mockup-wrapper {
  position: relative;
  width: 100%;
}

.ref-mockup-card {
  position: relative;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), #0e1424;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(24px, 4vw, 44px) clamp(20px, 3.5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.ref-mockup-card img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35));
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ref-mockup-hover-hint {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ref-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: rgba(13, 18, 32, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.4);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translateY(8px);
  transition: transform 0.3s ease;
}

.ref-hint-chip i {
  color: var(--color-cyan);
}

.ref-mockup-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 212, 255, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(0, 212, 255, 0.12);
}

.ref-mockup-card:hover img {
  transform: scale(1.025);
}

.ref-mockup-card:hover .ref-mockup-hover-hint {
  opacity: 1;
}

.ref-mockup-card:hover .ref-hint-chip {
  transform: translateY(0);
}

body[data-theme="light"] .ref-mockup-card {
  background: #f7f8fc;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

body[data-theme="light"] .ref-mockup-card img {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

body[data-theme="light"] .ref-mockup-card:hover {
  border-color: rgba(0, 118, 180, 0.3);
  box-shadow: 0 24px 54px rgba(13, 18, 48, 0.08);
}

/* 4. Projekt Information (Content Spalte) */
.ref-info-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ref-meta-tags {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

body[data-theme="light"] .ref-meta-tags {
  color: #64748b;
}

.ref-item-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.ref-item-desc {
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.68;
  margin: 0 0 26px 0;
  max-width: 580px;
}

/* Pills / Tags */
.ref-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.ref-pill {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 5px 14px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.ref-pill:hover {
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
}

body[data-theme="light"] .ref-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(13, 18, 48, 0.78);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

body[data-theme="light"] .ref-pill:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
}

/* 5. Aktions-Buttons (Golden Case Study + Outline Website ansehen) */
.ref-actions-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Der goldene Case Study Button wie im Referenzbild */
.btn-ref-case-study {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #d8ac54, #b8860b);
  color: #0c101c;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(184, 134, 11, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ref-case-study i {
  font-size: 0.9rem;
}

.btn-ref-case-study:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 26px rgba(184, 134, 11, 0.5);
}

body[data-theme="light"] .btn-ref-case-study {
  background: linear-gradient(135deg, #cda250, #b07d18);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Der dezente Outline Button "Website ansehen" */
.btn-ref-website {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ref-website i {
  font-size: 0.82rem;
  transition: transform 0.25s ease;
}

.btn-ref-website:hover {
  transform: translateY(-2px);
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 212, 255, 0.06);
}

.btn-ref-website:hover i {
  transform: translate(2px, -2px);
}

body[data-theme="light"] .btn-ref-website {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
  color: #0d1230;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .btn-ref-website:hover {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: rgba(0, 118, 180, 0.05);
}

/* Galerie Bottom CTA */
.referenzen-bottom-cta {
  text-align: center;
  margin-top: clamp(48px, 6vw, 72px);
}

/* Responsive Verhalten */
@media (max-width: 992px) {
  .ref-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .ref-project-row,
  .ref-project-row.reversed {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Auf Smartphones immer Mockup oben, Info unten */
  .ref-project-row.reversed .ref-mockup-wrapper {
    order: 1;
  }

  .ref-project-row.reversed .ref-info-wrapper {
    order: 2;
  }

  .ref-mockup-card {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .ref-actions-bar {
    width: 100%;
  }

  .btn-ref-case-study,
  .btn-ref-website {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    font-size: 0.88rem;
  }
}

/* ===== CASE STUDY DETAIL POPUP MODAL ===== */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.cs-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 0.35s ease;
}

.cs-modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 940px;
  max-height: 88vh;
  border-radius: 26px;
  background: rgba(13, 18, 34, 0.94);
  border: 1px solid rgba(0, 170, 255, 0.25);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 212, 255, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(18px);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.cs-modal-overlay.active .cs-modal-container {
  transform: scale(1) translateY(0);
}

.cs-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
}

.cs-modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

.cs-modal-scrollable {
  padding: 40px 44px;
  overflow-y: auto;
  max-height: calc(88vh - 4px);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 255, 0.3) transparent;
}

.cs-modal-scrollable::-webkit-scrollbar {
  width: 6px;
}

.cs-modal-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 255, 0.3);
  border-radius: 10px;
}

/* Modal Header */
.cs-modal-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
  margin-bottom: 32px;
}

.cs-modal-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cs-modal-category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.cs-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 9999px;
}

.cs-modal-title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px 0;
  line-height: 1.15;
}

.cs-modal-lead {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 720px;
}

/* 2-Spalten Grid im Modal */
.cs-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  margin-bottom: 36px;
}

/* Linke Spalte */
.cs-modal-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-modal-img-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-modal-img-card img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
}

.cs-facts-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  padding: 22px 24px;
}

.cs-facts-title {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-facts-title i {
  color: var(--color-cyan);
}

.cs-facts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-facts-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cs-facts-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cs-fact-lbl {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.cs-fact-val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.cs-fact-highlight {
  color: #10b981;
}

/* Rechte Spalte (Story Blöcke) */
.cs-modal-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-step-block {
  border-radius: 16px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.cs-step-badge {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cs-block-problem .cs-step-badge {
  color: #f59e0b;
}

.cs-block-solution .cs-step-badge {
  color: var(--color-cyan);
}

.cs-block-result .cs-step-badge {
  color: #10b981;
}

.cs-step-block h4 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.cs-step-block p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-block-result strong {
  color: #10b981;
}

/* Zitat Karte */
.cs-quote-card {
  position: relative;
  border-radius: 16px;
  padding: 18px 22px 18px 46px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.06));
  border: 1px solid rgba(0, 212, 255, 0.25);
}

.cs-quote-icon {
  position: absolute;
  top: 18px;
  left: 18px;
  color: var(--color-cyan);
  font-size: 1.1rem;
}

.cs-quote-p {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.55;
  margin: 0 0 6px 0;
}

.cs-quote-by {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-purple-light);
}

/* Tags im Modal */
.cs-tags-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-tags-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-tags-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-modal-tag-pill {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 9999px;
}

/* Modal Footer Actions */
.cs-modal-footer {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.cs-footer-ghost {
  padding: 12px 22px;
  border-radius: 9999px;
}

.cs-footer-primary {
  padding: 12px 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Light Mode Overrides für Modal */
body[data-theme="light"] .cs-modal-backdrop {
  background: rgba(13, 18, 48, 0.65);
}

body[data-theme="light"] .cs-modal-container {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.2);
  box-shadow: 0 32px 80px rgba(13, 18, 48, 0.2);
}

body[data-theme="light"] .cs-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
}

body[data-theme="light"] .cs-modal-img-card,
body[data-theme="light"] .cs-facts-card,
body[data-theme="light"] .cs-step-block {
  background: #f8faff;
  border-color: rgba(0, 118, 180, 0.12);
}

body[data-theme="light"] .cs-facts-list li {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] .cs-modal-tag-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text-primary);
}

@media (max-width: 820px) {
  .cs-modal-scrollable {
    padding: 30px 20px;
  }

  .cs-modal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-modal-footer {
    flex-direction: column-reverse;
  }

  .cs-footer-ghost,
  .cs-footer-primary {
    width: 100%;
    justify-content: center;
  }
}

/* --- Founder / Personal Brand Section (Kompakt vereint) --- */
.founder-section {
  padding: 70px 0;
  position: relative;
}

.founder-card-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  padding: 44px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.founder-profile-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
}

.founder-badge-avatar-large {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--gradient-main);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.4), 0 0 16px rgba(167, 139, 250, 0.25);
}

.fbal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.fbal-initials {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
}

.fbal-verified {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #050510;
}


/* --- Social Media Links auf der linken Profilseite --- */
.founder-left-socials {
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fls-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cyan);
}

.fls-title i {
  font-size: 0.7rem;
}

.fls-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.fls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.fls-item:hover {
  transform: translateX(3px);
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.fls-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.fls-instagram .fls-icon {
  background: linear-gradient(135deg, rgba(225, 48, 108, 0.2), rgba(253, 29, 29, 0.2));
  color: #e1306c;
  border: 1px solid rgba(225, 48, 108, 0.3);
}

.fls-tiktok .fls-icon {
  background: rgba(0, 242, 254, 0.15);
  color: var(--color-cyan);
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.fls-youtube .fls-icon {
  background: rgba(255, 0, 0, 0.15);
  color: #ff3333;
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.fls-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
}

.fls-meta strong {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
}

.fls-meta span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.fls-arrow {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.fls-item:hover .fls-arrow {
  color: var(--color-cyan);
  transform: translate(2px, -2px);
}

.fpc-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fpc-title {
  font-size: 0.85rem;
  color: var(--color-cyan);
  font-weight: 500;
  margin-bottom: 8px;
}

.fpc-location {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.fpc-location i {
  color: var(--color-cyan);
}

.fpc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 24px;
}

.fpc-tags span {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.fpc-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseGreen 2s infinite ease-in-out;
}

.founder-text-column h2 {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3.2vw, 2.35rem);
  line-height: 1.22;
  color: var(--text-primary);
  margin: 12px 0 16px;
  text-wrap: balance;
}

.founder-intro {
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 18px;
  font-weight: 500;
  max-width: 620px;
  text-wrap: balance;
}

.founder-bio {
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.founder-quote-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 32px;
  position: relative;
}

.quote-mark {
  color: var(--color-cyan);
  font-size: 1.2rem;
  margin-bottom: 8px;
  display: block;
}

.founder-quote-box blockquote {
  font-size: 1rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.founder-commitments {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.fc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
}

.fc-item i {
  color: var(--color-cyan);
  font-size: 1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.fc-item strong {
  color: var(--text-primary);
  margin-right: 6px;
}

.fc-item span {
  color: var(--text-secondary);
}

.founder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}



/* --- Erstgespräch Section (Integriertes 4-Schritte-System & Cal.com) --- */
.section-anchor {
  position: absolute;
  top: -85px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.erstgespraech-section {
  padding: 100px 0;
  position: relative;
}

.erstgespraech-container {
  padding: 56px 48px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 170, 255, 0.2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  background: rgba(17, 24, 39, 0.65);
  backdrop-filter: blur(20px);
}

.erstgespraech-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 32px;
}

.erstgespraech-intro {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.eg-intro-header {
  margin-bottom: 14px;
}

/* Mobiler Ablauf-Kreislauf (auf Desktop ausgeblendet) */
.eg-mobile-cycle {
  display: none;
}

/* Stepper Tabs Navigation */
.eg-stepper-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.eg-stepper-nav::-webkit-scrollbar {
  display: none;
}

.eg-nav-dot {
  flex: 1;
  min-width: 85px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.eg-nav-dot .eg-nd-num {
  font-family: var(--font-head);
  font-size: 0.78rem;
  opacity: 0.7;
}

.eg-nav-dot:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.eg-nav-dot.active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(124, 58, 237, 0.16));
  border-color: rgba(0, 212, 255, 0.4);
  color: var(--color-cyan);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.2);
}

.eg-nav-dot.active .eg-nd-num {
  opacity: 1;
  font-weight: 700;
}

.eg-nav-dot.completed {
  color: #10b981;
}

/* Container with Vertical Timeline (Kein inneres Scrollen) */
.eg-steps-scroll-wrapper {
  position: relative;
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 4px 6px 4px 34px;
  margin-bottom: 0;
}

/* Vertical Timeline Track & Glowing Fill */
.eg-timeline-line {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 14px;
  width: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  pointer-events: none;
}

.eg-timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-cyan), #3b82f6, var(--color-purple));
  box-shadow: 0 0 12px var(--color-cyan), 0 0 20px rgba(0, 212, 255, 0.4);
  border-radius: 2px;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fließende Fluss-Wellen-Animation auf der Timeline */
.eg-timeline-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  width: 6px;
  height: 48px;
  background: radial-gradient(circle, #00f0ff 0%, rgba(0, 240, 255, 0) 75%);
  border-radius: 50%;
  animation: riverPulseDown 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes riverPulseDown {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 48px);
    opacity: 0;
  }
}

.eg-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Step Card */
.eg-step-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.eg-step-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateX(4px);
}

.eg-step-card.active {
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.12), rgba(124, 58, 237, 0.08));
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 8px 28px rgba(0, 170, 255, 0.18), inset 0 0 18px rgba(0, 212, 255, 0.05);
  transform: translateX(6px);
}

.eg-step-card.completed {
  border-color: rgba(16, 185, 129, 0.3);
}

/* Indicator Circle */
.eg-step-indicator {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.eg-si-num {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.eg-si-check {
  display: none;
  font-size: 0.9rem;
  color: #10b981;
}

.eg-step-card.active .eg-step-indicator {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.6);
}

.eg-step-card.active .eg-step-indicator .eg-si-num {
  color: #050510;
}

.eg-step-card.completed .eg-step-indicator {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
}

.eg-step-card.completed .eg-step-indicator .eg-si-num {
  display: none;
}

.eg-step-card.completed .eg-step-indicator .eg-si-check {
  display: inline-block;
}

/* Step Content Body */
.eg-step-body {
  flex: 1;
  min-width: 0;
}

.eg-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.eg-step-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-cyan);
}

.eg-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 212, 255, 0.08);
  color: var(--color-cyan);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.eg-step-body h3 {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 6px;
  line-height: 1.35;
}

.eg-step-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.eg-step-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #10b981;
  font-weight: 500;
}

.eg-step-meta i {
  font-size: 0.82rem;
}

/* Cal.com Booking Column & Card */
.cal-booking-column {
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: start;
}

.cal-booking-card {
  display: flex;
  flex-direction: column;
  height: auto;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 170, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: 24px 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.cal-booking-header {
  margin-bottom: 12px;
  text-align: center;
}

.cal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  margin-bottom: 6px;
}

.cal-instruction {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
}

.cal-embed-wrapper {
  width: 100%;
  flex: none;
  height: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  position: relative;
}

#my-cal-inline {
  width: 100%;
  height: 590px;
  min-height: 520px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #091B30 !important;
}

#my-cal-inline iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  border: none !important;
  display: block;
  background: transparent !important;
}

.cal-category-header {
  display: none;
}

/* Cal Booking Tabs (Switcher between Online-Kalender and Direkt-Nachricht) */
.cal-booking-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}

body[data-theme="light"] .cal-booking-tabs {
  background: rgba(0, 0, 0, 0.04);
}

.cal-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cal-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.cal-tab-btn.active {
  background: rgba(0, 170, 255, 0.16);
  color: #ffffff;
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 4px 14px rgba(0, 170, 255, 0.18);
}

body[data-theme="light"] .cal-tab-btn.active {
  background: #ffffff;
  color: var(--color-blue);
  border-color: rgba(0, 85, 204, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cal-tab-pane {
  display: none;
  width: 100%;
}

.cal-tab-pane.active {
  display: flex;
  flex-direction: column;
}

.cal-booking-card .contact-form {
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 170, 255, 0.15);
  border-radius: var(--radius-md);
}

body[data-theme="light"] .cal-booking-card .contact-form {
  background: #f8fafc;
  border-color: rgba(0, 118, 180, 0.15);
}

.cal-booking-card .contact-form .form-group {
  margin-bottom: 16px;
}

.cal-booking-card .contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .cal-booking-card .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.cal-booking-card .contact-form input,
.cal-booking-card .contact-form select,
.cal-booking-card .contact-form textarea {
  padding: 12px 14px;
  font-size: 0.92rem;
  border-radius: 10px;
}

.cal-booking-card .contact-form .form-checkbox {
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.cal-booking-card .contact-form .form-checkbox a {
  color: var(--color-cyan);
}

.cal-booking-card .contact-form .btn-full {
  width: 100%;
  justify-content: center;
  padding: 14px 24px;
  font-size: 0.95rem;
}

/* Form 'oder' Divider & WhatsApp Action Button */
.form-or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0;
  position: relative;
  text-align: center;
}

.form-or-divider::before,
.form-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.form-or-divider span {
  padding: 0 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: lowercase;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.btn-whatsapp-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.3);
  color: #25d366;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  box-sizing: border-box;
}

.btn-whatsapp-action:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}

.btn-whatsapp-action i {
  font-size: 1.15rem;
}

body[data-theme="light"] .btn-whatsapp-action {
  background: rgba(37, 211, 102, 0.12);
  color: #15803d;
  border-color: rgba(37, 211, 102, 0.4);
}

body[data-theme="light"] .btn-whatsapp-action:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.ebcb-phone .ebcb-btn-icon {
  background: rgba(0, 170, 255, 0.1);
  color: var(--color-cyan);
  border: 1px solid rgba(0, 170, 255, 0.25);
}

.ebcb-phone:hover {
  background: rgba(0, 170, 255, 0.15);
  border-color: var(--color-cyan);
  color: #fff;
  transform: translateY(-2px);
}

.ebcb-maps .ebcb-btn-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.ebcb-maps:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #fff;
  transform: translateY(-2px);
}

/* --- Bottom Direct Contact Bar (WhatsApp, E-Mail, Telefon) --- */
.eg-bottom-contact-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  margin-top: 10px;
}

.ebcb-left {
  max-width: 420px;
}

.ebcb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #25d366;
  background: rgba(37, 211, 102, 0.1);
  border: 1px solid rgba(37, 211, 102, 0.25);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}

.ebcb-title {
  font-family: var(--font-head);
  font-size: 1.08rem;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.3;
}

.ebcb-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

.ebcb-channels {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ebcb-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-primary);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ebcb-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.ebcb-btn-icon i {
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
}

.ebcb-btn-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.ebcb-sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  line-height: 1.2;
}

.ebcb-btn-info strong {
  font-size: 0.86rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.ebcb-arrow {
  font-size: 0.76rem;
  opacity: 0.6;
  margin-left: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.ebcb-whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(37, 211, 102, 0.04));
  border-color: rgba(37, 211, 102, 0.35);
}

.ebcb-whatsapp .ebcb-btn-icon {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.4);
}

.ebcb-whatsapp:hover {
  transform: translateY(-2px);
  border-color: #25d366;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}

.ebcb-whatsapp:hover .ebcb-arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

.ebcb-email {
  border-color: rgba(0, 170, 255, 0.25);
}

.ebcb-email .ebcb-btn-icon {
  background: rgba(0, 170, 255, 0.12);
  color: var(--color-cyan);
}

.ebcb-email:hover {
  transform: translateY(-2px);
  border-color: var(--color-cyan);
  box-shadow: 0 8px 24px rgba(0, 170, 255, 0.2);
}

.ebcb-email:hover .ebcb-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.ebcb-phone .ebcb-btn-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.ebcb-phone:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ebcb-phone:hover .ebcb-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.cal-noscript-fallback {
  text-align: center;
  padding: 60px 20px;
}

.cal-noscript-fallback p {
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.cal-card-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.cal-card-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-card-footer span i {
  color: #10b981;
}

.cal-direct-link {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--color-cyan);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.cal-direct-link:hover {
  text-decoration: underline;
  transform: translateX(2px);
  color: var(--color-purple-light);
}

.cal-direct-link:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== CALENDAR POPUP MODAL ===== */
.cal-modal-overlay {
  z-index: 2600;
}

.cal-modal-container {
  max-width: 960px;
  width: 95%;
  height: 86vh;
  max-height: 840px;
  background: rgba(10, 10, 31, 0.96);
  border: 1px solid rgba(0, 170, 255, 0.3);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.cal-modal-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.cal-modal-header {
  margin-bottom: 14px;
  text-align: left;
  flex-shrink: 0;
}

.cal-modal-header .cal-badge {
  margin-bottom: 6px;
}

.cal-modal-header h2 {
  font-size: 1.7rem;
  margin: 0 0 4px;
  line-height: 1.25;
}

.cal-modal-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}

.cal-modal-embed-wrap {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0a0a1f;
  border: 1px solid rgba(0, 170, 255, 0.2);
  position: relative;
}

#my-cal-modal-inline {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a1f;
}

#my-cal-modal-inline iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block;
  background: #0a0a1f !important;
}

body[data-theme="light"] .cal-modal-container {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 118, 180, 0.25);
  box-shadow: 0 32px 80px rgba(13, 18, 48, 0.2);
}

body[data-theme="light"] .cal-modal-embed-wrap,
body[data-theme="light"] #my-cal-modal-inline,
body[data-theme="light"] #my-cal-modal-inline iframe {
  background: #ffffff !important;
  border-color: rgba(0, 118, 180, 0.15);
}

/* --- Final CTA Section --- */
.final-cta-section {
  padding: 80px 0;
}

.final-cta-card {
  padding: 64px 48px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 212, 255, 0.3);
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 170, 255, 0.12), rgba(124, 58, 237, 0.12));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.final-cta-content {
  max-width: 720px;
  margin: 0 auto;
}

.final-cta-content h2 {
  font-family: var(--font-head);
  font-size: 2.3rem;
  color: var(--text-primary);
  margin: 16px 0;
  line-height: 1.25;
}

.final-cta-lead {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 36px;
}

.final-cta-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.final-cta-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.final-cta-trust i {
  color: var(--color-cyan);
  margin-right: 6px;
}

/* --- Light Mode Refinements for 2.0 Components --- */
body[data-theme="light"] .hmt-item {
  background: rgba(0, 118, 180, 0.06);
  border-color: rgba(0, 118, 180, 0.15);
  color: var(--text-secondary);
}

body[data-theme="light"] .hero-founder-pill {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 118, 180, 0.25);
  box-shadow: 0 8px 32px rgba(0, 118, 180, 0.12);
}

body[data-theme="light"] .trust-bar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .problem-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .btn-category-flip {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.25);
  box-shadow: 0 10px 30px rgba(0, 118, 180, 0.08);
}

body[data-theme="light"] .btn-category-flip:hover {
  border-color: rgba(0, 118, 180, 0.5);
  box-shadow: 0 16px 40px rgba(0, 118, 180, 0.15);
}

body[data-theme="light"] .bcf-title {
  color: var(--text-primary);
}

body[data-theme="light"] .bcf-hint {
  color: var(--text-secondary);
}

body[data-theme="light"] .btn-flip-back-chip {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.2);
  color: var(--color-blue);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .btn-flip-back-chip:hover {
  background: rgba(0, 118, 180, 0.08);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

body[data-theme="light"] .flip-back-indicator {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .founder-compact-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] .fcc-header,
body[data-theme="light"] .fcc-actions {
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .solution-card {
  background: #f8faff;
  border-color: rgba(0, 118, 180, 0.15);
}

body[data-theme="light"] .solution-card:hover {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.35);
  box-shadow: 0 10px 30px rgba(0, 118, 180, 0.08);
}

body[data-theme="light"] .fcc-social-link {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
}

body[data-theme="light"] .fcc-social-link:hover {
  background: rgba(0, 118, 180, 0.1);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

body[data-theme="light"] .service-core-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .btn-service-link {
  background: rgba(0, 118, 180, 0.05);
  border-color: rgba(0, 118, 180, 0.15);
  color: var(--text-primary);
}

body[data-theme="light"] .case-study-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"] .csc-badge-highlight {
  background: rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .csc-quote {
  background: rgba(0, 118, 180, 0.04);
}

body[data-theme="light"] .founder-card-layout {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}

body[data-theme="light"] .founder-profile-column {
  background: rgba(0, 118, 180, 0.03);
  border-color: rgba(0, 118, 180, 0.12);
}

body[data-theme="light"] .founder-quote-box {
  background: rgba(0, 118, 180, 0.04);
  border-color: rgba(0, 118, 180, 0.18);
}

body[data-theme="light"] .social-hub-box {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .social-channel-card {
  background: rgba(0, 118, 180, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .erstgespraech-container {
  background: linear-gradient(135deg, rgba(0, 118, 180, 0.04), rgba(109, 40, 217, 0.04)), #ffffff;
  border-color: rgba(0, 118, 180, 0.2);
}

body[data-theme="light"] .eg-stepper-nav {
  background: rgba(0, 118, 180, 0.04);
  border-color: rgba(0, 118, 180, 0.14);
}

body[data-theme="light"] .eg-nav-dot {
  color: var(--text-muted);
}

body[data-theme="light"] .eg-nav-dot:hover {
  background: rgba(0, 118, 180, 0.08);
  color: var(--text-primary);
}

body[data-theme="light"] .eg-nav-dot.active {
  background: linear-gradient(135deg, rgba(0, 118, 180, 0.12), rgba(109, 40, 217, 0.08));
  border-color: rgba(0, 118, 180, 0.35);
  color: var(--color-cyan);
}

body[data-theme="light"] .eg-step-card {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body[data-theme="light"] .eg-step-card:hover {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.3);
}

body[data-theme="light"] .eg-step-card.active {
  background: linear-gradient(135deg, rgba(0, 118, 180, 0.05), rgba(109, 40, 217, 0.03)), #ffffff;
  border-color: var(--color-cyan);
  box-shadow: 0 8px 24px rgba(0, 118, 180, 0.12);
}

body[data-theme="light"] .eg-step-indicator {
  background: rgba(0, 118, 180, 0.06);
  border-color: rgba(0, 118, 180, 0.18);
}

body[data-theme="light"] .eg-step-card.active .eg-step-indicator {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
}

body[data-theme="light"] .eg-step-card.active .eg-step-indicator .eg-si-num {
  color: #ffffff;
}

body[data-theme="light"] .eg-bottom-contact-bar {
  background: #ffffff;
  border-color: rgba(0, 118, 180, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .ebcb-title {
  color: var(--text-primary);
}

body[data-theme="light"] .ebcb-btn {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .ebcb-btn:hover {
  background: #ffffff;
}

body[data-theme="light"] .ebcb-whatsapp {
  background: rgba(37, 211, 102, 0.06);
  border-color: rgba(37, 211, 102, 0.35);
}

body[data-theme="light"] .cal-booking-card,
body[data-theme="light"] .erstgespraech-intro {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .cal-embed-wrapper,
body[data-theme="light"] #my-cal-inline {
  background: #ffffff !important;
  border-color: rgba(0, 118, 180, 0.15) !important;
}

body[data-theme="light"] #my-cal-inline iframe {
  background: #ffffff !important;
}

body[data-theme="light"] .final-cta-card {
  background: linear-gradient(135deg, rgba(0, 118, 180, 0.08), rgba(109, 40, 217, 0.08)), #ffffff;
  border-color: rgba(0, 118, 180, 0.25);
}

/* ================================================================
   ===== MOBILE FIRST RESPONSIVE RULES (375px, 412px, 768px, 1024px) =====
   ================================================================ */

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

  .problem-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .problem-solution-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }

  .services-core-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-studies-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .founder-card-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 28px;
  }

  .shb-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .erstgespraech-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .erstgespraech-container {
    padding: 40px 24px;
  }

  .eg-steps-scroll-wrapper {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-left: 28px;
  }

  .eg-bottom-contact-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
  }

  .ebcb-left {
    max-width: 100%;
  }

  .ebcb-channels {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .ebcb-btn {
    width: 100%;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .ebcb-arrow {
    margin-left: auto;
  }
}

@keyframes ctaPulseGlow {

  0%,
  100% {
    box-shadow: 0 8px 22px rgba(167, 139, 250, 0.4), 0 0 14px rgba(167, 139, 250, 0.25);
  }

  50% {
    box-shadow: 0 12px 30px rgba(167, 139, 250, 0.7), 0 0 24px rgba(167, 139, 250, 0.45);
  }
}

@keyframes bcfRotateReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes bcfPulseGlowStrong {

  0%,
  100% {
    box-shadow: 0 0 14px rgba(92, 200, 255, 0.45), 0 4px 14px rgba(7, 20, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 28px rgba(92, 200, 255, 0.88), 0 0 12px rgba(255, 255, 255, 0.65), 0 6px 20px rgba(7, 20, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.85);
    transform: scale(1.02);
  }
}

@media (max-width: 768px) {

  /* ==============================================================
     1. UNWICHTIGE ÜBERSCHRIFTEN & UNTERÜBERSCHRIFTEN AUSBLENDEN
     Hält die Seite auf Smartphones kurz, direkt und fokussiert
     ============================================================== */
  #leistungen-heading,
  .expertise .section-header h2,
  .section-lead,
  .section-header p,
  .about-lead,
  .final-cta-lead,
  .hide-mobile,
  .section-tag-warning,
  .deck-hint,
  .sfc-features-title,
  .eg-step-badge,
  .cal-instruction,
  .bcf-hint,
  .bcf-badge,
  .fcc-role strong,
  .problem-impact {
    display: none !important;
  }

  /* Gestraffte Sektions-Header auf Mobile */
  .section-header {
    margin: 0 auto 20px !important;
  }

  .section-tag {
    margin-bottom: 10px !important;
    padding: 4px 12px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
  }

  .section-header h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.75rem) !important;
    margin-bottom: 0 !important;
    line-height: 1.24 !important;
  }

  /* Vertikale Sektions-Abstände: Einheitlich für ALLE Abschnitte auf Mobile */
  .hero {
    padding: 80px 0 38px !important;
    min-height: auto !important;
  }

  .about-me-section,
  .problem-founder-flip-section,
  .founder-section,
  .expertise,
  .services-stacked-section,
  .referenzen,
  .erstgespraech-section,
  .final-cta-section {
    padding: 38px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .marquee-section {
    display: none !important;
  }

  .hero-headline {
    font-size: clamp(1.85rem, 6.8vw, 2.35rem) !important;
  }

  .hero-txt-line {
    font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }

  /* ==============================================================
     2. MOBILE BUTTONS, HAPTIK & MICRO-ANIMATIONEN
     ============================================================== */
  /* Spürbares, federndes Tap-Feedback beim Drücken */
  .btn-primary:active,
  .btn-ghost:active,
  .btn-secondary:active,
  .btn-category-flip:active,
  .floating-cta-btn:active,
  .s-tab-btn:active,
  .eco-pill:active,
  .eg-nav-dot:active,
  .btn-whatsapp-action:active,
  .ebcb-btn:active,
  .btn-service-link:active,
  .btn-preview-lightbox:active,
  .imac-action-btn:active,
  .nav-cta:active,
  .modal-faq-cta-btn:active,
  .cookie-btn:active,
  button[type="submit"]:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  /* CTA-Buttons: Garantiert auf EINER Zeile auf Smartphones */
  .btn-primary,
  .btn-ghost,
  .hero-bottom-primary,
  .hero-bottom-secondary,
  .btn-whatsapp-action,
  #founderCtaBtn,
  #heroCta,
  #submitFormBtn,
  .fcc-actions-left .btn-primary {
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    padding: 13px 10px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
    gap: 6px !important;
    width: 100% !important;
    letter-spacing: -0.015em !important;
  }

  .btn-primary span,
  .btn-ghost span,
  #founderCtaBtn span,
  #heroCta span,
  #submitFormBtn span,
  .fcc-actions-left .btn-primary span {
    white-space: nowrap !important;
    display: inline-block !important;
    letter-spacing: -0.015em !important;
  }

  #founderCtaBtn span.founder-cta-text-desktop {
    display: none !important;
  }

  #founderCtaBtn span.founder-cta-text-mobile {
    display: inline-block !important;
  }

  .btn-primary i,
  .btn-ghost i,
  #founderCtaBtn i,
  #heroCta i,
  #submitFormBtn i {
    flex-shrink: 0 !important;
  }

  /* Hero Bottom Buttons */
  .hero-bottom-actions {
    margin-top: 18px !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-bottom-primary {
    animation: ctaPulseGlow 3s ease-in-out infinite !important;
  }

  /* Flip Button: Auf Mobile als moderner, klickstarker CTA-Button */
  .btn-category-flip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    cursor: pointer !important;
  }

  .bcf-ambient-glow {
    display: none !important;
  }

  .bcf-main {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .bcf-icon-ring,
  .bcf-body {
    display: none !important;
  }

  .bcf-pill {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 22px !important;
    font-size: clamp(0.88rem, 3.8vw, 0.98rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    border-radius: 12px !important;
    background: #5CC8FF !important;
    color: #061321 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 16px rgba(92, 200, 255, 0.45), 0 4px 14px rgba(7, 20, 38, 0.4) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    animation: bcfPulseGlowStrong 2.4s ease-in-out infinite !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  }

  .bcf-pill:active,
  .btn-category-flip:active .bcf-pill {
    transform: scale(0.98) !important;
  }

  .bcf-icon-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    color: #061321 !important;
    flex-shrink: 0 !important;
    animation: bcfRotateReverse 3.5s linear infinite !important;
    transform-origin: center center !important;
  }

  .bcf-icon-desktop {
    display: inline-flex !important;
    font-size: 0.92rem !important;
    flex-shrink: 0 !important;
    color: #061321 !important;
    margin-left: 2px !important;
    transition: transform 0.3s ease !important;
  }

  .btn-category-flip:hover .bcf-icon-desktop,
  .btn-category-flip:active .bcf-icon-desktop {
    transform: translateX(4px) !important;
  }

  .bcf-pill-text-desktop {
    display: none !important;
  }

  .bcf-pill-text-mobile {
    display: inline !important;
    color: #061321 !important;
    font-weight: 700 !important;
  }

  /* Flip-Back Bar (Personal Brand Indikator & Zurück-Button) in mobiler Ansicht entfernen */
  .flip-back-bar {
    display: none !important;
  }

  /* ==============================================================
     3. KOMPAKTE KARTEN & LAYOUTS (PROBLEM, REFERENZEN, SERVICES)
     ============================================================== */
  .problem-card {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }

  .problem-card h3 {
    font-size: 1.08rem !important;
    margin-bottom: 6px !important;
  }

  .problem-card p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* ── 3 Kernleistungen: Horizontales Swipen nach links & Alles auf einem Blick ohne extra Scrollen ── */
  .expertise .section-header {
    margin: 0 auto 8px !important;
  }

  .services-stacked-section {
    position: relative !important;
    overflow: hidden !important;
  }

  .services-scroll-deck {
    height: auto !important;
    position: static !important;
  }

  .services-sticky-stage {
    position: static !important;
    top: auto !important;
    height: auto !important;
    padding: 0 !important;
  }

  .services-deck-nav {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    justify-content: space-between !important;
  }

  .services-nav-tabs {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .s-tab-btn {
    flex: 1 !important;
    padding: 8px 6px !important;
    font-size: 0.72rem !important;
    border-radius: 9px !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .services-deck-counter {
    display: none !important;
  }

  /* Horizontale Wisch-Bühne für die 3 Kernleistungen */
  .services-deck-stage {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 14px !important;
    padding: 4px 18px 14px 4px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    min-height: auto !important;
    perspective: none !important;
  }

  .services-deck-stage::-webkit-scrollbar {
    display: none !important;
  }

  /* Jede Karte als eigenständige Wisch-Karte (86% Breite mit Peek) */
  .service-flip-card,
  .service-flip-card.state-active,
  .service-flip-card.state-next,
  .service-flip-card.state-far,
  .service-flip-card.state-passed {
    flex: 0 0 86% !important;
    width: 86% !important;
    max-width: 86% !important;
    min-width: 275px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 18px !important;
    z-index: 1 !important;
  }

  /* Karteninhalt: Alles auf einem Blick ohne internes Scrollen */
  .sfc-inner {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 14px !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }

  .sfc-col-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .scc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .scc-number {
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }

  .scc-badge {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }

  .scc-icon-wrap {
    display: none !important;
  }

  .sfc-col-info h3 {
    font-size: 0.98rem !important;
    line-height: 1.25 !important;
    margin: 2px 0 6px !important;
    font-weight: 700 !important;
  }

  .scc-desc {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    color: var(--text-secondary) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .sfc-col-features {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 8px !important;
  }

  .sfc-features-title {
    display: none !important;
  }

  .scc-checklist {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 10px !important;
  }

  .scc-checklist li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    padding: 0 !important;
  }

  .scc-checklist li i {
    font-size: 0.68rem !important;
    color: var(--color-cyan) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .scc-checklist li div {
    font-size: 0.74rem !important;
    color: var(--text-secondary) !important;
  }

  .scc-checklist li div strong {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }

  .sfc-stat-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background: rgba(0, 212, 255, 0.07) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sfc-stat-val {
    font-size: 0.98rem !important;
    font-weight: 800 !important;
    color: var(--color-cyan) !important;
    flex-shrink: 0 !important;
  }

  .sfc-stat-lbl {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    color: var(--text-secondary) !important;
  }

  .scc-desc,
  .scc-action {
    display: none !important;
  }

  .services-swipe-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 4px !important;
  }

  .services-slider-cta {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  .services-slider-cta .btn-primary {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    display: inline-flex !important;
    border-radius: 12px !important;
  }

  /* ── Meine Projekte: Überschrift etwas größer & Untertitel kompakt auf 2 Zeilen ── */
  .ref-main-heading {
    font-size: clamp(1.65rem, 5.5vw, 1.95rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
  }

  .ref-sub-heading {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .ref-sub-heading-desktop {
    display: none !important;
  }

  .ref-sub-heading-mobile {
    display: inline !important;
  }

  .ref-sub-br {
    display: none !important;
  }

  .ref-more-projects-center {
    margin-top: 24px !important;
    margin-bottom: 6px !important;
  }

  /* ── Meine Projekte: Perfekt zentriert in der mobilen Ansicht (kein Ankleben am rechten Rand) ── */
  .referenzen .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .ref-projects-list {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 40px !important;
  }

  .ref-project-row,
  .ref-project-row.reversed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
    box-sizing: border-box !important;
    gap: 22px !important;
  }

  .ref-mockup-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .ref-mockup-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }

  .ref-mockup-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 320px !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .ref-info-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Projekt-Beschreibung auf Mobile: Exakt 5 Zeilen (Desktop bleibt unverändert) */
  .ref-desc-desktop {
    display: none !important;
  }

  .ref-desc-mobile {
    display: inline !important;
  }

  .ref-item-desc {
    font-size: 0.92rem !important;
    line-height: 1.52 !important;
    margin-bottom: 18px !important;
  }

  /* Leistungs-Pills auf Mobile: Exakt 5 Leistungen in 2 Zeilen (6. Pille auf Mobile ausblenden) */
  .ref-pills-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 20px !important;
  }

  .ref-pill {
    padding: 4px 10px !important;
    font-size: 0.74rem !important;
  }

  .ref-pills-row .ref-pill:nth-child(n+6) {
    display: none !important;
  }

  .projects-swipe-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-bottom: 24px !important;
    padding: 0 20px 0 4px !important;
  }

  .projects-swipe-dots {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .p-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 100px !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    -webkit-tap-highlight-color: transparent;
  }

  .p-dot.active {
    width: 24px !important;
    background: var(--color-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.55) !important;
  }

  .projects-swipe-hint {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .projects-swipe-hint i {
    color: var(--color-cyan) !important;
    font-size: 0.85rem !important;
  }

  .csc-body {
    padding: 18px 16px !important;
  }

  .csc-meta {
    margin-bottom: 8px !important;
    font-size: 0.74rem !important;
  }

  .csc-title {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
  }

  .csc-flow {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .csc-flow-step {
    padding-left: 10px !important;
  }

  .csc-flow-step .flow-label {
    font-size: 0.72rem !important;
  }

  .csc-flow-step p {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  .csc-quote {
    padding: 10px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }

  .csc-quote p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* Ablauf & Erstgespräch: Auf Mobile als zwei getrennte, optimal proportionierte Bereiche */
  .erstgespraech-container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .erstgespraech-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 0 !important;
  }

  /* Fenster 1: Transparenter Ablauf (Eigener getrennter Bereich vor dem Kalender) */
  .erstgespraech-intro {
    background: rgba(17, 24, 39, 0.72) !important;
    border: 1px solid rgba(0, 170, 255, 0.22) !important;
    border-radius: 20px !important;
    padding: 22px 14px 20px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 170, 255, 0.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .eg-intro-header,
  .eg-node-num {
    display: none !important;
  }

  /* Fenster 2: Online-Terminkalender & Nachricht schreiben (Zusammen als eine eigene Kategorie) */
  .cal-booking-column {
    width: 100% !important;
  }

  .cal-category-header {
    display: block !important;
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  .cal-booking-tabs {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 18px !important;
    gap: 4px !important;
    padding: 4px !important;
    background: #0c1228 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 170, 255, 0.22) !important;
    overflow: hidden !important;
  }

  .cal-tab-btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 9px 4px !important;
    font-size: clamp(0.70rem, 2.75vw, 0.80rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    border-radius: 10px !important;
    gap: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
  }

  .cal-tab-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .cal-tab-btn i {
    font-size: 0.82rem !important;
    flex-shrink: 0 !important;
  }

  .cal-tab-btn.active {
    background: rgba(0, 170, 255, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(0, 212, 255, 0.55) !important;
    box-shadow: 0 4px 16px rgba(0, 170, 255, 0.25) !important;
  }

  body[data-theme="light"] .cal-booking-tabs {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 118, 180, 0.2) !important;
  }

  body[data-theme="light"] .cal-tab-btn.active {
    background: #ffffff !important;
    color: var(--color-blue) !important;
    border-color: rgba(0, 85, 204, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  }

  @media (max-width: 360px) {
    .cal-tab-btn {
      padding: 8px 3px !important;
      font-size: 0.68rem !important;
      gap: 4px !important;
    }

    .cal-tab-btn i {
      font-size: 0.76rem !important;
    }
  }

  /* Ablauf: Auf Smartphones kompakter animierter Kreislauf statt langes Scrollen */
  .eg-stepper-nav,
  .eg-steps-scroll-wrapper {
    display: none !important;
  }

  .eg-mobile-cycle {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 8px auto 16px !important;
  }

  /* ==============================================================
     DIGITALER FLUSS (MOBILE PROZESS-ANIMATION IM STIL VON BILD 2)
     ============================================================== */
  .eg-river-stage {
    position: relative !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 110px !important;
    margin: 4px auto 14px !important;
  }

  .eg-river-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  /* 1. Weicher Glow-Aura der hellblauen Linie */
  .eg-river-glow-aura {
    fill: none !important;
    stroke: rgba(0, 212, 255, 0.35) !important;
    stroke-width: 9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: url(#egRiverAuraFilter) !important;
    animation: riverAuraGlowPulse 3s ease-in-out infinite alternate !important;
  }

  /* 2. Die saubere, animierte hellblaue Flusslinie */
  .eg-river-main-line {
    fill: none !important;
    stroke: #00d4ff !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.85)) !important;
  }

  /* 3. Digitale Lichtpunkte, die im Fluss mitschwimmen */
  .eg-swim-dot {
    opacity: 0.95;
    filter: drop-shadow(0 0 5px #00d4ff) drop-shadow(0 0 10px rgba(0, 212, 255, 0.85)) !important;
  }

  @keyframes riverAuraGlowPulse {
    0% {
      opacity: 0.25;
      stroke-width: 7;
    }

    100% {
      opacity: 0.55;
      stroke-width: 11;
    }
  }

  /* 4 Fluss-Stationen (Nodes) entlang der Welle */
  .eg-node.eg-river-node {
    position: absolute !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(8, 14, 34, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(0, 170, 255, 0.32) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    z-index: 5 !important;
    padding: 0 !important;
    color: var(--text-secondary) !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  }

  .eg-node-num {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
  }

  .eg-node i {
    font-size: 0.90rem !important;
    margin: 2px 0 1px !important;
    color: var(--color-cyan) !important;
    transition: transform 0.25s ease !important;
  }

  .eg-node-title {
    font-size: 0.54rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
  }

  /* Exakte Koordinaten auf der Flusswelle (3 Stationen) */
  #egNode1 {
    left: 16.2% !important;
    top: 45% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #egNode2 {
    left: 50% !important;
    top: 60% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  #egNode3 {
    left: 83.8% !important;
    top: 45% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Aktiver Fluss-Node mit strahlendem Cyber-Glow */
  .eg-node.eg-river-node.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.35), rgba(124, 58, 237, 0.35)) !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 20px #00d4ff, 0 0 35px rgba(0, 212, 255, 0.6), inset 0 0 10px rgba(0, 212, 255, 0.4) !important;
  }

  #egNode1.active,
  #egNode2.active,
  #egNode3.active {
    transform: translate(-50%, -50%) scale(1.15) !important;
  }

  .eg-node.active .eg-node-num {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .eg-node.active .eg-node-title {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .eg-node.active i {
    color: #ffffff !important;
    transform: scale(1.12) !important;
    filter: drop-shadow(0 0 6px #00d4ff) !important;
  }

  /* Fluss Text-Karte (Details unter dem Fluss) */
  .eg-river-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    min-height: 120px !important;
    border-radius: 14px !important;
    background: rgba(10, 16, 38, 0.88) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    box-shadow: inset 0 0 20px rgba(0, 212, 255, 0.08), 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(0, 212, 255, 0.16) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 16px 16px 14px !important;
    text-align: left !important;
    z-index: 4 !important;
    margin: 0 auto 10px !important;
    box-sizing: border-box !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  .eg-river-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 6px !important;
  }

  .eg-river-card-step {
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0.03em !important;
  }

  .eg-river-card.transitioning {
    opacity: 0.3 !important;
    transform: translateY(4px) scale(0.98) !important;
  }

  @keyframes riverCardPopIn {
    0% {
      opacity: 0.4;
      transform: translateY(6px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .eg-river-card.pop-zoom {
    animation: riverCardPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  .eg-river-card .eg-hub-badge {
    display: inline-block !important;
    padding: 3px 9px !important;
    border-radius: 100px !important;
    background: rgba(0, 212, 255, 0.15) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    color: var(--color-cyan) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0 !important;
  }

  .eg-river-card .eg-hub-title {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    text-align: left !important;
  }

  .eg-river-card .eg-hub-desc {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: var(--text-secondary) !important;
    margin: 0 0 10px !important;
    text-align: left !important;
    display: block !important;
  }

  .eg-river-card .eg-hub-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    color: var(--color-cyan) !important;
    font-weight: 600 !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    padding: 3px 10px !important;
    border-radius: 100px !important;
  }

  .eg-river-card .eg-hub-meta i {
    font-size: 0.72rem !important;
  }

  /* Light-Mode Anpassungen */
  body[data-theme="light"] .eg-river-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 118, 180, 0.35) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 16px rgba(0, 170, 255, 0.12) !important;
  }

  body[data-theme="light"] .eg-river-card .eg-hub-title {
    color: var(--color-navy) !important;
  }

  body[data-theme="light"] .eg-river-card .eg-hub-desc {
    color: var(--text-muted) !important;
  }

  body[data-theme="light"] .eg-node.eg-river-node {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 118, 180, 0.32) !important;
  }

  body[data-theme="light"] .eg-node.eg-river-node.active {
    background: #ffffff !important;
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 18px rgba(0, 170, 255, 0.5) !important;
  }

  body[data-theme="light"] .eg-node.eg-river-node.active .eg-node-num,
  body[data-theme="light"] .eg-node.eg-river-node.active .eg-node-title,
  body[data-theme="light"] .eg-node.eg-river-node.active i {
    color: var(--color-blue) !important;
  }

  /* Kreislauf Footer & Dots */
  .eg-cycle-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .eg-cycle-dots {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .eg-c-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 100px !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .eg-c-dot.active {
    width: 20px !important;
    background: var(--color-cyan) !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.6) !important;
  }

  .eg-cycle-hint {
    font-size: 0.70rem !important;
    color: var(--text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .eg-cycle-hint i {
    color: var(--color-cyan) !important;
    font-size: 0.72rem !important;
  }

  body[data-theme="light"] .eg-node {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 118, 180, 0.25) !important;
    color: #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  body[data-theme="light"] .eg-cycle-hub {
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.98), rgba(240, 245, 255, 0.96)) !important;
    border-color: rgba(0, 118, 180, 0.3) !important;
    box-shadow: inset 0 0 20px rgba(0, 118, 180, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  }

  body[data-theme="light"] .eg-hub-title {
    color: #0f172a !important;
  }

  body[data-theme="light"] .eg-orbit-track {
    stroke: rgba(0, 118, 180, 0.18) !important;
  }

  /* Cal.com Booking Card: Breiter dargestellt & bündig abgeschlossen (ohne leeren Spalt unten) */
  .cal-booking-card {
    background: #050814 !important;
    border: 1px solid rgba(0, 170, 255, 0.22) !important;
    border-radius: 16px !important;
    padding: 12px 6px 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 170, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .cal-embed-wrapper {
    background: #091B30 !important;
    border: 1px solid #1C3550 !important;
    border-radius: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  #my-cal-inline {
    height: 670px !important;
    min-height: 660px !important;
    max-height: none !important;
    overflow: visible !important;
    background: #091B30 !important;
    width: 100% !important;
  }

  #my-cal-inline iframe {
    height: 670px !important;
    min-height: 660px !important;
    max-height: none !important;
    width: 100% !important;
    border: none !important;
    overflow: visible !important;
    background: #091B30 !important;
  }

  .cal-card-footer {
    margin-top: 10px !important;
    padding: 4px 6px 0 !important;
  }

  .cal-booking-card .contact-form {
    background: #0c1228 !important;
    border: 1px solid rgba(0, 170, 255, 0.18) !important;
  }

  .cal-modal-container {
    width: 96% !important;
    height: 90vh !important;
    max-height: none !important;
  }

  .cal-modal-body {
    padding: 20px 14px 18px !important;
  }

  .cal-modal-header h2 {
    font-size: 1.25rem !important;
  }

  .final-cta-card {
    padding: 32px 18px !important;
    border-radius: 18px !important;
  }

  .final-cta-content h2 {
    font-size: 1.55rem !important;
  }

  .founder-text-column h2 {
    font-size: 1.55rem !important;
  }
}

@media (max-width: 480px) {
  .hero-micro-trust {
    flex-direction: column;
    align-items: stretch;
  }

  .hmt-item {
    justify-content: center;
  }

  .hero-founder-pill {
    padding: 8px 14px;
  }

  .hfp-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  .hfp-text strong {
    font-size: 0.85rem;
  }

  .hfp-text span {
    font-size: 0.75rem;
  }

  .hfp-badge {
    display: none;
  }

  .problem-card {
    padding: 16px 14px !important;
  }

  .service-core-card {
    padding: 22px 16px !important;
  }

  .csc-body {
    padding: 16px 14px !important;
  }

  .device-stage {
    min-height: 360px !important;
  }

  .apple-imac {
    width: 96% !important;
  }

  /* iMac: Farben & Stil exakt an die Corporate Identity (Cyan/Navy/Glassmorphism) angepasst (nur Mobile) */
  .apple-imac .imac-bezel {
    padding: 8px 8px 12px !important;
    border-radius: 18px !important;
    background: #091728 !important;
    border: 2px solid rgba(92, 200, 255, 0.25) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(92, 200, 255, 0.12) !important;
  }

  .apple-imac .imac-screen {
    height: 335px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(92, 200, 255, 0.16) !important;
  }

  .apple-imac .imac-browser-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
    background: #060e1a !important;
    border-bottom: 1px solid rgba(92, 200, 255, 0.14) !important;
  }

  .apple-imac .imac-browser-url {
    max-width: 135px !important;
    font-size: 8.5px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(9, 27, 48, 0.9) !important;
    border: 1px solid rgba(92, 200, 255, 0.22) !important;
    color: #5CC8FF !important;
  }

  .apple-imac .imac-badge-live {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
    background: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
  }

  .apple-imac .speed-ring {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  .apple-imac #imacSpeedText {
    white-space: nowrap !important;
    font-size: 8.8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
    color: #34d399 !important;
  }

  .apple-imac .imac-webdesign-preview {
    padding: 10px 10px 8px !important;
    background: radial-gradient(circle at 80% 20%, rgba(92, 200, 255, 0.14), transparent 55%),
      linear-gradient(180deg, #091B30 0%, #06101E 100%) !important;
  }

  .apple-imac .imac-service-tag {
    background: rgba(92, 200, 255, 0.12) !important;
    border: 1px solid rgba(92, 200, 255, 0.3) !important;
    color: #5CC8FF !important;
    border-radius: 6px !important;
  }

  .apple-imac .imac-preview-title {
    font-size: 1.05rem !important;
    margin: 4px 0 !important;
    line-height: 1.2 !important;
    color: #F5FAFF !important;
  }

  .apple-imac .imac-preview-desc {
    font-size: 9.6px !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
    color: #A9BCD0 !important;
  }

  .apple-imac .imac-preview-kpis {
    margin-top: 6px !important;
    gap: 5px !important;
  }

  .apple-imac .imac-kpi-card {
    padding: 5px 3px !important;
    background: rgba(9, 27, 48, 0.8) !important;
    border: 1px solid rgba(92, 200, 255, 0.18) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
  }

  .apple-imac .imac-kpi-card.active {
    background: rgba(92, 200, 255, 0.16) !important;
    border-color: #5CC8FF !important;
    box-shadow: 0 0 14px rgba(92, 200, 255, 0.32) !important;
  }

  .apple-imac .imac-kpi-val {
    font-size: 12.5px !important;
    color: #5CC8FF !important;
    font-weight: 800 !important;
  }

  .apple-imac .imac-kpi-lbl {
    font-size: 7.8px !important;
    color: #A9BCD0 !important;
    font-weight: 500 !important;
  }

  .apple-imac .imac-screen-action {
    margin-top: 6px !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .apple-imac #imacDynamicNotice {
    font-size: 9.8px !important;
    color: #5CC8FF !important;
    font-weight: 600 !important;
  }

  .apple-imac .imac-action-btn {
    background: #5CC8FF !important;
    color: #061321 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 5px 12px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(92, 200, 255, 0.38) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .apple-imac .imac-action-btn:hover,
  .apple-imac .imac-action-btn:active {
    background: #82D7FF !important;
    color: #061321 !important;
    box-shadow: 0 6px 18px rgba(92, 200, 255, 0.55) !important;
  }

  .apple-tablet {
    width: 66% !important;
  }

  .apple-iphone {
    width: 44% !important;
    max-width: 175px !important;
    bottom: -10px !important;
    right: 2% !important;
  }

  .apple-iphone .iphone-frame {
    border-radius: 24px !important;
    padding: 5px !important;
  }

  .apple-iphone .iphone-screen {
    height: 245px !important;
    border-radius: 19px !important;
    padding: 16px 6px 6px 6px !important;
  }

  .apple-iphone .iphone-island {
    top: 8px !important;
    width: 42px !important;
    height: 10px !important;
  }

  .apple-iphone .chat-bubble-bot,
  .apple-iphone .chat-bubble-user,
  .apple-iphone .chat-bubble-reply {
    font-size: 7.8px !important;
    padding: 4px 6px !important;
    line-height: 1.28 !important;
  }

  .apple-iphone .quick-chip {
    padding: 4px 6px !important;
    font-size: 7.2px !important;
    min-height: auto !important;
  }

  .apple-iphone .iphone-input-bar {
    padding: 2px 4px !important;
  }

  .apple-iphone .iphone-input-bar input {
    font-size: 7.5px !important;
  }

  .apple-iphone .iphone-send-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 7px !important;
  }

  .founder-actions {
    flex-direction: column;
    width: 100%;
  }

  .founder-actions .btn-primary,
  .founder-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ==================================================
   FLOATING CTA: KOSTENLOSES ERSTGESPRÄCH (UNTEN RECHTS)
   Scrollt dauerhaft im sichtbaren Bereich mit (fixed)
   ================================================== */
.floating-cta-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}

.floating-cta-btn {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 22px;
  background: #a78bfa !important;
  color: #ffffff !important;
  font-family: var(--font-main);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  border-radius: 12px;
  box-shadow: 0 10px 25px -4px rgba(167, 139, 250, 0.5), 0 0 24px rgba(167, 139, 250, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  white-space: nowrap;
}

/* ==================================================
   UNIVERSALER GLOW- & DURCHSCHEIN-EFFEKT FÜR ALLE CTA-BUTTONS
   ================================================== */
.floating-cta-btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-service-link,
.nav-cta,
.bcf-pill,
.cookie-btn,
.btn-preview-lightbox,
#footerCheckBtn,
#heroCta,
#heroRefBtn,
#wachstumCtaBtn,
#referenzenAllBtn,
#openFaqModalBtn,
button[type="submit"] {
  position: relative !important;
  overflow: hidden !important;
}

/* Sicherstellen, dass Text & Icons immer über dem Glow-Durchschein liegen */
.floating-cta-btn>*,
.btn-primary>*,
.btn-secondary>*,
.btn-ghost>*,
.btn-service-link>*,
.nav-cta>*,
.bcf-pill>*,
.cookie-btn>*,
.btn-preview-lightbox>*,
#footerCheckBtn>*,
#heroCta>*,
#heroRefBtn>*,
#wachstumCtaBtn>*,
#referenzenAllBtn>*,
#openFaqModalBtn>*,
button[type="submit"]>* {
  position: relative;
  z-index: 2;
}

/* Moderner Glow-Lichtreflex / Durchschein-Effekt von links nach rechts */
.floating-cta-btn::after,
.btn-primary::after,
.btn-secondary::after,
.btn-ghost::after,
.btn-service-link::after,
.nav-cta::after,
.bcf-pill::after,
.cookie-btn::after,
.btn-preview-lightbox::after,
#footerCheckBtn::after,
#heroCta::after,
#heroRefBtn::after,
#wachstumCtaBtn::after,
#referenzenAllBtn::after,
#openFaqModalBtn::after,
button[type="submit"]::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -130%;
  width: 70%;
  height: 200%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.15) 20%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.15) 80%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(25deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

/* Animation startet, wenn man auf den Button geht (Hover & Focus) */
.floating-cta-btn:hover::after,
.floating-cta-btn:focus-visible::after,
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-secondary:hover::after,
.btn-secondary:focus-visible::after,
.btn-ghost:hover::after,
.btn-ghost:focus-visible::after,
.btn-service-link:hover::after,
.btn-service-link:focus-visible::after,
.nav-cta:hover::after,
.nav-cta:focus-visible::after,
.bcf-pill:hover::after,
.btn-category-flip:hover .bcf-pill::after,
.cookie-btn:hover::after,
.cookie-btn:focus-visible::after,
.btn-preview-lightbox:hover::after,
.btn-preview-lightbox:focus-visible::after,
#footerCheckBtn:hover::after,
#footerCheckBtn:focus-visible::after,
#heroCta:hover::after,
#heroCta:focus-visible::after,
#heroRefBtn:hover::after,
#heroRefBtn:focus-visible::after,
#wachstumCtaBtn:hover::after,
#wachstumCtaBtn:focus-visible::after,
#referenzenAllBtn:hover::after,
#referenzenAllBtn:focus-visible::after,
#openFaqModalBtn:hover::after,
#openFaqModalBtn:focus-visible::after,
button[type="submit"]:hover::after,
button[type="submit"]:focus-visible::after {
  opacity: 1;
  animation: glowShimmerSweep 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes glowShimmerSweep {
  0% {
    left: -130%;
  }

  100% {
    left: 210%;
  }
}

.floating-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 34px -4px rgba(167, 139, 250, 0.65), 0 0 28px rgba(167, 139, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn-primary:hover,
#heroCta:hover,
#wachstumCtaBtn:hover,
#footerCheckBtn:hover {
  box-shadow: 0 14px 34px -4px rgba(167, 139, 250, 0.65), 0 0 28px rgba(167, 139, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.nav-cta:hover {
  box-shadow: 0 10px 28px -2px rgba(167, 139, 250, 0.55), 0 0 24px rgba(167, 139, 250, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover,
#heroRefBtn:hover,
#referenzenAllBtn:hover,
#openFaqModalBtn:hover {
  box-shadow: 0 8px 24px -2px rgba(0, 170, 255, 0.35), 0 0 18px rgba(0, 212, 255, 0.25);
}

.floating-cta-btn:active {
  transform: translateY(-1px) scale(0.99);
}

.floating-cta-btn:focus-visible {
  outline: 3px solid #00d4ff;
  outline-offset: 3px;
}

/* Pulsierender grüner Live-Statuspunkt */
.fcta-pulse-beacon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.fcta-ping {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #10b981;
  opacity: 0.8;
  animation: fctaPulseAnimation 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fcta-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px #10b981;
}

@keyframes fctaPulseAnimation {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  70% {
    transform: scale(2.4);
    opacity: 0;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.fcta-icon {
  font-size: 1rem;
  color: #ffffff;
  transition: transform 0.2s ease;
}

.floating-cta-btn:hover .fcta-icon {
  transform: scale(1.1);
}

.fcta-text {
  font-weight: 700;
  line-height: 1;
}

.fcta-arrow {
  font-size: 0.82rem;
  transition: transform 0.2s ease;
  color: rgba(255, 255, 255, 0.9);
}

.floating-cta-btn:hover .fcta-arrow {
  transform: translateX(4px);
}

/* Responsive: In mobiler Ansicht Floating-Button komplett ausblenden */
@media (max-width: 768px) {

  .floating-cta-wrap,
  aside.floating-cta-wrap,
  #floatingFaq,
  .floating-cta-btn,
  #floatingFaqBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcta-ping {
    animation: none;
  }

  .floating-cta-btn {
    transition: none;
  }
}

/* ==================================================
   FAQ POP-UP MODAL (BRAND STYLE & RESPONSIV)
   ================================================== */
#faq-modal {
  padding: 16px;
  box-sizing: border-box;
}

#faq-modal .modal-container {
  width: 100% !important;
  max-width: 580px !important;
  max-height: min(90vh, 760px) !important;
  margin: auto !important;
  border-radius: 20px !important;
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  box-shadow: 0 24px 60px rgba(5, 15, 28, 0.9), 0 0 30px rgba(92, 200, 255, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

body[data-theme="light"] #faq-modal .modal-container {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15) !important;
}

#faq-modal .modal-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 10px !important;
  color: #A9BCD0 !important;
  font-size: 1.6rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 200ms ease !important;
}

#faq-modal .modal-close:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

body[data-theme="light"] #faq-modal .modal-close {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

body[data-theme="light"] #faq-modal .modal-close:hover {
  background: #F1F5F9 !important;
  border-color: #0076B4 !important;
  color: #0076B4 !important;
}

#faq-modal .modal-body {
  padding: 24px 24px 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#faq-modal .modal-body h2 {
  font-size: clamp(1.25rem, 3.8vw, 1.45rem) !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  padding-right: 48px !important;
  line-height: 1.25 !important;
  color: #F5FAFF !important;
  background: linear-gradient(135deg, #F5FAFF 60%, #5CC8FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body[data-theme="light"] #faq-modal .modal-body h2 {
  color: #0F172A !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

#faq-modal .faq-modal-subtitle {
  font-size: clamp(0.82rem, 2.5vw, 0.88rem) !important;
  color: #A9BCD0 !important;
  margin: 0 0 16px 0 !important;
  padding-right: 48px !important;
  line-height: 1.45 !important;
}

body[data-theme="light"] #faq-modal .faq-modal-subtitle {
  color: #64748B !important;
}

#faq-modal .modal-content-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #1C3550 transparent !important;
}

#faq-modal .modal-content-scroll::-webkit-scrollbar {
  width: 5px !important;
}

#faq-modal .modal-content-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

#faq-modal .modal-content-scroll::-webkit-scrollbar-thumb {
  background: #1C3550 !important;
  border-radius: 4px !important;
}

#faq-modal .modal-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#faq-modal .faq-item {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 14px !important;
  transition: all 200ms ease !important;
  overflow: hidden !important;
}

#faq-modal .faq-item:hover {
  border-color: rgba(92, 200, 255, 0.4) !important;
  background: #0D223B !important;
}

body[data-theme="light"] #faq-modal .faq-item {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

body[data-theme="light"] #faq-modal .faq-item:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

#faq-modal .faq-question {
  padding: 13px 16px !important;
  font-size: clamp(0.86rem, 2.5vw, 0.92rem) !important;
  font-weight: 600 !important;
  color: #F5FAFF !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  gap: 12px !important;
  border-radius: 14px !important;
  line-height: 1.35 !important;
}

#faq-modal .faq-question:hover {
  color: #5CC8FF !important;
}

body[data-theme="light"] #faq-modal .faq-question {
  color: #0F172A !important;
}

body[data-theme="light"] #faq-modal .faq-question:hover {
  color: #0076B4 !important;
}

#faq-modal .faq-question .faq-icon {
  font-size: 0.85rem !important;
  color: #5CC8FF !important;
  transition: transform 250ms ease !important;
  flex-shrink: 0 !important;
}

#faq-modal .faq-question[aria-expanded="true"] {
  color: #5CC8FF !important;
}

#faq-modal .faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg) !important;
}

#faq-modal .faq-answer {
  padding: 0 16px 14px 16px !important;
  font-size: clamp(0.81rem, 2.3vw, 0.86rem) !important;
  line-height: 1.6 !important;
  color: #A9BCD0 !important;
}

body[data-theme="light"] #faq-modal .faq-answer {
  color: #475569 !important;
}

#faq-modal .faq-answer p {
  margin: 0 !important;
}

#faq-modal .modal-faq-footer {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #1C3550 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

body[data-theme="light"] #faq-modal .modal-faq-footer {
  border-top-color: #E2E8F0 !important;
}

#faq-modal .modal-faq-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-main) !important;
  font-size: clamp(0.84rem, 2.7vw, 0.92rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #061321 !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: #5CC8FF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(92, 200, 255, 0.25) !important;
  transition: all 200ms ease !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: 48px !important;
}

#faq-modal .modal-faq-cta-btn:hover {
  background: #82D7FF !important;
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.38) !important;
  transform: translateY(-1px) !important;
}

.faq-btn-text-desktop {
  display: inline !important;
}

.faq-btn-text-mobile {
  display: none !important;
}

#faq-modal .modal-faq-cta-btn span {
  white-space: normal !important;
}

#faq-modal .modal-faq-cta-btn i {
  font-size: 0.8rem !important;
  transition: transform 200ms ease !important;
  flex-shrink: 0 !important;
}

#faq-modal .modal-faq-cta-btn:hover i {
  transform: translateX(3px) !important;
}

/* Mobile Optimierungen für das FAQ-Modal */
@media (max-width: 640px) {
  .faq-btn-text-desktop {
    display: none !important;
  }

  .faq-btn-text-mobile {
    display: inline !important;
  }

  #faq-modal {
    padding: 10px !important;
  }

  #faq-modal .modal-container {
    max-height: calc(100dvh - 20px) !important;
    border-radius: 18px !important;
  }

  #faq-modal .modal-body {
    padding: 18px 14px 14px 14px !important;
  }

  #faq-modal .modal-close {
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 1.45rem !important;
    border-radius: 9px !important;
  }

  #faq-modal .modal-body h2 {
    font-size: 1.22rem !important;
    margin-bottom: 4px !important;
    padding-right: 44px !important;
  }

  #faq-modal .faq-modal-subtitle {
    font-size: 0.8rem !important;
    margin-bottom: 12px !important;
    padding-right: 44px !important;
    line-height: 1.4 !important;
  }

  #faq-modal .faq-question {
    padding: 11px 12px !important;
    font-size: 0.85rem !important;
    gap: 8px !important;
  }

  #faq-modal .faq-answer {
    padding: 0 12px 12px 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  #faq-modal .modal-faq-footer {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  #faq-modal .modal-faq-cta-btn {
    padding: 12px 16px !important;
    min-height: 48px !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }

  #faq-modal .modal-faq-cta-btn span {
    white-space: nowrap !important;
  }
}

/* ===== Contact Form States & Honeypot ===== */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.form-status {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.form-status.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.form-status.error i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.btn-loading {
  opacity: 0.85;
  cursor: not-allowed !important;
  pointer-events: none;
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: btnSpin 0.75s linear infinite;
  vertical-align: middle;
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   innDigital COMPLETE PREMIUM DESIGN SYSTEM ENFORCEMENT
   Dark Navy · White Typography · Sky Blue Attention · Premium Spacing
   ========================================================================== */

/* 1. GLOBAL BASE & COLOR ENFORCEMENT */
html {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  font-family: var(--font-main);
}

body {
  background-color: var(--bg-primary) !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-main) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
  overflow-x: clip !important;
}

/* Deactivate old ambient neon blobs */
body::before,
body::after {
  display: none !important;
}

h1,
.hero-main-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  text-wrap: nowrap !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

@media (max-width: 600px) {

  h1,
  .hero-main-title {
    font-size: clamp(1.35rem, 6.2vw, 1.75rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

h2,
.section-header h2,
.ref-main-heading,
.apm-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.2rem, 2.1vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  color: var(--text-primary) !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

@media (max-width: 899px) {

  h2,
  .section-header h2,
  .ref-main-heading,
  .apm-title {
    font-size: clamp(1.05rem, 3.8vw, 1.4rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

.section-header {
  max-width: 1140px !important;
  margin: 0 auto 36px !important;
}

h3 {
  font-family: var(--font-head) !important;
  font-size: clamp(1.1rem, 1.6vw, 1.38rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

h4 {
  font-family: var(--font-head) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

p {
  color: var(--text-secondary);
  line-height: 1.68;
}

.gradient-text,
.hero-highlight,
.ref-serif-gold {
  background: linear-gradient(90deg, #5CC8FF, #82D7FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: inherit !important;
  font-style: normal !important;
}

/* Section Spacing System - Kompakte Abstände bei allen Kategorien */
.problem-founder-flip-section,
.expertise,
.referenzen,
.erstgespraech-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

@media (max-width: 1024px) {

  .problem-founder-flip-section,
  .expertise,
  .referenzen,
  .erstgespraech-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 640px) {

  .problem-founder-flip-section,
  .expertise,
  .referenzen,
  .erstgespraech-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* 2. BUTTONS & CTA SYSTEM */
/* PRIMARY BUTTON */
.btn-primary,
.nav-cta,
.hero-btn-primary,
.hero-bottom-primary,
.fcc-actions-left .btn-primary,
.services-slider-cta .btn-primary,
.footer-primary-btn,
.modal-faq-cta-btn,
.cs-footer-primary,
#submitFormBtn,
button.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  background: #5CC8FF !important;
  color: #061321 !important;
  border-radius: 12px !important;
  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
  white-space: nowrap !important;
}

.btn-primary:hover,
.nav-cta:hover,
.hero-btn-primary:hover,
.hero-bottom-primary:hover,
.fcc-actions-left .btn-primary:hover,
.services-slider-cta .btn-primary:hover,
.footer-primary-btn:hover,
.modal-faq-cta-btn:hover,
.cs-footer-primary:hover,
#submitFormBtn:hover,
button.btn-primary:hover {
  background: #82D7FF !important;
  color: #061321 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 30px rgba(92, 200, 255, 0.16) !important;
}

.btn-primary:active,
.nav-cta:active,
.hero-btn-primary:active,
.hero-bottom-primary:active,
.footer-primary-btn:active,
#submitFormBtn:active {
  background: #35B5F5 !important;
  transform: translateY(0) !important;
}

.btn-primary i,
.nav-cta i,
.hero-btn-primary i,
.hero-bottom-primary i,
.footer-primary-btn i {
  color: #061321 !important;
}

/* SECONDARY BUTTON */
.btn-ghost,
.hero-btn-secondary,
.hero-bottom-secondary,
.btn-ref-case-study,
.cs-footer-ghost,
.apm-card-actions .btn-ref-case-study,
button.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 1px solid #31506D !important;
  color: #F5FAFF !important;
  border-radius: 12px !important;
  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease !important;
  white-space: nowrap !important;
}

.btn-ghost:hover,
.hero-btn-secondary:hover,
.hero-bottom-secondary:hover,
.btn-ref-case-study:hover,
.cs-footer-ghost:hover,
.apm-card-actions .btn-ref-case-study:hover,
button.btn-ghost:hover {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #F5FAFF !important;
  transform: translateY(-1px) !important;
}

.btn-ghost i,
.hero-btn-secondary i,
.btn-ref-case-study i {
  color: #5CC8FF !important;
}

/* Compact Case study buttons inside project cards */
.ref-actions-bar .btn-ref-case-study,
.ref-actions-bar .btn-ref-website,
.apm-card-actions .btn-ref-case-study,
.apm-card-actions .apm-card-link {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
}

.ref-actions-bar .btn-ref-website,
.apm-card-actions .apm-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #A9BCD0 !important;
  background: transparent !important;
  border: 1px solid #1C3550 !important;
  transition: all 200ms ease !important;
}

.ref-actions-bar .btn-ref-website:hover,
.apm-card-actions .apm-card-link:hover {
  border-color: #5CC8FF !important;
  color: #F5FAFF !important;
  background: #0D2138 !important;
}

/* 3. NAVIGATION */
.nav-wrapper {
  background: transparent !important;
  transition: background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease !important;
}

.nav-wrapper.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

.nav-logo {
  font-family: var(--font-head) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  margin-right: 36px;
  transition: margin-right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-wrapper.scrolled:not(.menu-expanded) .nav-logo {
  margin-right: 0 !important;
}

.logo-inn {
  color: #F5FAFF !important;
}

.logo-digital {
  background: linear-gradient(90deg, #5CC8FF, #82D7FF) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  padding-bottom: 6px !important;
  margin-bottom: -6px !important;
}

.nav-links {
  gap: 6px !important;
}

.nav-link {
  color: #A9BCD0 !important;
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  transition: color 200ms ease !important;
}

.nav-link:hover,
.nav-link.active {
  color: #F5FAFF !important;
}

.nav-cta {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1120px) and (min-width: 769px) {
  .nav-links {
    gap: 4px !important;
  }
  .nav-link {
    padding: 6px 8px !important;
    font-size: 0.84rem !important;
  }
  .nav-cta {
    padding: 0 14px !important;
    font-size: 0.84rem !important;
  }
  .nav-logo {
    margin-right: 12px !important;
  }
}

/* 4. HERO SECTION */
.hero {
  background: radial-gradient(circle at 70% 20%, rgba(92, 200, 255, 0.10), transparent 38%), #071426 !important;
  padding: 96px 0 40px !important;
  min-height: auto !important;
  align-items: flex-start !important;
}

@media (max-width: 768px) {
  .hero {
    padding: 80px 0 24px !important;
  }
}

.hero-grid {
  opacity: 0.15 !important;
  background-image: linear-gradient(#1C3550 1px, transparent 1px), linear-gradient(90deg, #1C3550 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}

.hero-header-center {
  margin-bottom: 20px !important;
  max-width: 960px !important;
}

.hero-supporting-text {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
  color: #A9BCD0 !important;
  max-width: 680px !important;
  margin: 20px auto 0 !important;
}

.hero-bottom-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 32px !important;
}

/* Hero Apple Device Mockups refinement */
.apple-ecosystem-wrapper {
  margin: 16px auto 0 !important;
}

.eco-pill {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

.eco-pill:hover {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #F5FAFF !important;
}

.eco-pill.active {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

/* ===== 4. HERO 3D DEVICES (Bildschirm, Tablett & Smartphone - Einheitliche Website-Farbwelt) ===== */
.apple-imac .imac-bezel {
  background: #0D2138 !important;
  border: 2px solid #1C3550 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(92, 200, 255, 0.08) !important;
}

.apple-imac .imac-stand-neck {
  background: linear-gradient(180deg, #091B30 0%, #071426 100%) !important;
  border-left: 1px solid #1C3550 !important;
  border-right: 1px solid #1C3550 !important;
}

.apple-imac .imac-stand-base {
  background: linear-gradient(180deg, #0D2138 0%, #091B30 100%) !important;
  border: 1px solid #1C3550 !important;
}

.imac-screen,
.tablet-screen,
.iphone-screen {
  background: #071426 !important;
  border: 1px solid #1C3550 !important;
}

.imac-browser-bar,
.tablet-header,
.iphone-chat-header {
  background: #091B30 !important;
  border-bottom: 1px solid #1C3550 !important;
}

.imac-browser-url {
  background: #071426 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
}

.imac-badge-live {
  background: rgba(92, 200, 255, 0.1) !important;
  border: 1px solid rgba(92, 200, 255, 0.25) !important;
  color: #5CC8FF !important;
}

.imac-badge-live .speed-ring-bg {
  stroke: rgba(92, 200, 255, 0.2) !important;
}

.imac-badge-live .speed-ring-progress {
  stroke: #5CC8FF !important;
}

.imac-webdesign-preview {
  background: radial-gradient(circle at 80% 20%, rgba(92, 200, 255, 0.09), transparent 50%),
    linear-gradient(180deg, #091B30 0%, #071426 100%) !important;
}

.imac-service-tag {
  background: rgba(92, 200, 255, 0.12) !important;
  border: 1px solid rgba(92, 200, 255, 0.25) !important;
  color: #5CC8FF !important;
}

.imac-preview-title {
  color: #F5FAFF !important;
}

.imac-preview-desc {
  color: #A9BCD0 !important;
}

.imac-kpi-card {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.imac-kpi-card:hover,
.imac-kpi-card.active {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
  box-shadow: 0 4px 14px rgba(92, 200, 255, 0.18) !important;
}

.imac-kpi-val {
  color: #5CC8FF !important;
  font-family: var(--font-head) !important;
}

.imac-kpi-lbl {
  color: #71869C !important;
}

.imac-screen-action {
  border-top: 1px solid #1C3550 !important;
}

#imacDynamicNotice {
  color: #5CC8FF !important;
}

.imac-action-btn {
  background: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(92, 200, 255, 0.25) !important;
  transition: all 0.2s ease !important;
}

.imac-action-btn:hover {
  background: #82D7FF !important;
  transform: translateY(-1px) !important;
}

/* Tablet (iPad) Farben */
.tablet-frame {
  background: #0D2138 !important;
  border: 2px solid #1C3550 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(92, 200, 255, 0.08) !important;
}

.tablet-service-tag {
  background: rgba(92, 200, 255, 0.12) !important;
  border: 1px solid rgba(92, 200, 255, 0.25) !important;
  color: #5CC8FF !important;
}

.tablet-live-status {
  color: #5CC8FF !important;
}

.pulse-dot-green {
  background: #5CC8FF !important;
  box-shadow: 0 0 6px #5CC8FF !important;
}

.tablet-tabs {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
}

.tablet-tab-btn {
  color: #A9BCD0 !important;
}

.tablet-tab-btn:hover {
  color: #F5FAFF !important;
  background: #102A45 !important;
}

.tablet-tab-btn.active {
  background: rgba(92, 200, 255, 0.16) !important;
  color: #5CC8FF !important;
  border: 1px solid #5CC8FF !important;
}

.tablet-search-bar {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #F5FAFF !important;
}

.tablet-search-bar i {
  color: #5CC8FF !important;
}

.tablet-search-rank {
  background: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 800 !important;
}

.tablet-rank-card,
.tablet-ai-card,
.tablet-local-card {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
}

.tablet-domain-info strong {
  color: #F5FAFF !important;
}

.tablet-domain-info span {
  color: #71869C !important;
}

.tablet-trophy-badge {
  background: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 800 !important;
}

.tablet-chart-header {
  color: #A9BCD0 !important;
}

.tablet-chart-header strong {
  color: #5CC8FF !important;
}

.chart-tag {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

.chart-bar {
  background: linear-gradient(180deg, #5CC8FF 0%, rgba(92, 200, 255, 0.25) 100%) !important;
}

.chart-bar:hover,
.chart-bar.active {
  background: linear-gradient(180deg, #82D7FF 0%, rgba(92, 200, 255, 0.6) 100%) !important;
  box-shadow: 0 0 10px rgba(92, 200, 255, 0.4) !important;
}

.ai-query-tag {
  color: #5CC8FF !important;
}

.ai-answer-box {
  background: #091B30 !important;
  border-left: 2px solid #5CC8FF !important;
}

.ai-source-badge {
  color: #5CC8FF !important;
}

.ai-answer-box p {
  color: #F5FAFF !important;
}

.ai-metric-pills span {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

.local-pin-icon {
  color: #5CC8FF !important;
}

.local-header-row strong {
  color: #F5FAFF !important;
}

.local-stars {
  color: #fbbf24 !important;
}

.local-stars span {
  color: #A9BCD0 !important;
}

.local-status-badge {
  background: rgba(92, 200, 255, 0.12) !important;
  border: 1px solid rgba(92, 200, 255, 0.25) !important;
  color: #5CC8FF !important;
}

/* Smartphone (iPhone) Farben */
.iphone-frame {
  background: #0D2138 !important;
  border: 2px solid #1C3550 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(92, 200, 255, 0.1) !important;
}

.iphone-island {
  background: #050F1C !important;
}

.iphone-island-pulse {
  background: #5CC8FF !important;
  box-shadow: 0 0 6px #5CC8FF !important;
}

.iphone-service-tag {
  background: rgba(92, 200, 255, 0.12) !important;
  border: 1px solid rgba(92, 200, 255, 0.25) !important;
  color: #5CC8FF !important;
}

.iphone-bot-status {
  color: #5CC8FF !important;
}

.iphone-bot-status::before {
  background: #5CC8FF !important;
}

.chat-bubble-bot {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #F5FAFF !important;
}

.chat-bubble-user {
  background: #102A45 !important;
  border: 1px solid #5CC8FF !important;
  color: #5CC8FF !important;
  box-shadow: 0 4px 14px rgba(7, 20, 38, 0.5) !important;
}

.chat-bubble-reply {
  background: #0D2138 !important;
  border: 1px solid rgba(92, 200, 255, 0.3) !important;
  color: #F5FAFF !important;
  box-shadow: 0 2px 10px rgba(7, 20, 38, 0.3) !important;
}

.typing-indicator {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
}

.typing-indicator span {
  background: #5CC8FF !important;
}

.quick-chip {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
}

.quick-chip:hover {
  background: #5CC8FF !important;
  border-color: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 700 !important;
}

.iphone-input-bar {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
}

.iphone-input-bar input {
  color: #F5FAFF !important;
}

.iphone-input-bar input::placeholder {
  color: #71869C !important;
}

.iphone-send-btn {
  background: #5CC8FF !important;
  color: #061321 !important;
}

.iphone-send-btn:hover {
  background: #82D7FF !important;
}

/* 5. SERVICES (3 Premium Cards) */
.services-stacked-section {
  background: #071426 !important;
}

.section-tag {
  background: rgba(92, 200, 255, 0.08) !important;
  border: 1px solid rgba(92, 200, 255, 0.2) !important;
  color: #5CC8FF !important;
}

.services-sticky-stage {
  min-height: calc(100vh - 75px) !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-bottom: 24px !important;
}

.services-deck-stage {
  min-height: 520px !important;
  height: auto !important;
  flex-grow: 0 !important;
}

.service-flip-card {
  min-height: 520px !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
}

.sfc-inner {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 24px !important;
  padding: 26px 30px !important;
  box-shadow: 0 12px 32px -4px rgba(7, 20, 38, 0.6) !important;
  overflow: visible !important;
  align-items: stretch !important;
  gap: 24px 30px !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  transition: background 250ms ease, transform 250ms ease, border-color 250ms ease !important;
}

.sfc-inner:hover {
  background: #102A45 !important;
  border-color: rgba(92, 200, 255, 0.28) !important;
  transform: translateY(-2px) !important;
}

.scc-number {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #5CC8FF !important;
  font-family: var(--font-head) !important;
}

.scc-badge {
  background: rgba(92, 200, 255, 0.08) !important;
  border: 1px solid rgba(92, 200, 255, 0.2) !important;
  color: #5CC8FF !important;
  border-radius: 100px !important;
  padding: 4px 14px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.scc-icon {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
}

.sfc-col-info h3 {
  color: #F5FAFF !important;
  font-size: 1.55rem !important;
  line-height: 1.3 !important;
  margin: 16px 0 12px !important;
}

.scc-desc {
  color: #A9BCD0 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

.btn-service-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #5CC8FF !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: gap 200ms ease, color 200ms ease !important;
}

.btn-service-link:hover {
  color: #82D7FF !important;
  gap: 12px !important;
}

.sfc-col-features {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 16px !important;
  padding: 24px !important;
}

.sfc-features-title {
  color: #F5FAFF !important;
  font-weight: 600 !important;
}

.sfc-features-title i,
.scc-checklist li i {
  color: #5CC8FF !important;
}

.scc-checklist li {
  color: #A9BCD0 !important;
}

.scc-checklist li strong {
  color: #F5FAFF !important;
}

.sfc-stat-chip {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

.sfc-stat-val {
  color: #5CC8FF !important;
  font-weight: 800 !important;
  font-size: 1.35rem !important;
}

.sfc-stat-lbl {
  color: #A9BCD0 !important;
  font-size: 0.85rem !important;
}

.s-tab-btn {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

.s-tab-btn.active {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

/* 6. CASE STUDIES (Meine Projekte - Großzügiges, gut lesbares 2-Spalten-Layout) */
.referenzen {
  background: #071426 !important;
  padding: var(--section-padding) !important;
}

.ref-header-row {
  margin-bottom: 32px !important;
}

.ref-header-text {
  max-width: 980px !important;
}

.ref-sub-heading {
  max-width: 980px !important;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important;
  line-height: 1.6 !important;
  color: #A9BCD0 !important;
}

.ref-sub-br {
  display: inline;
}

.ref-projects-list {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(48px, 6vw, 68px) !important;
}

.ref-project-row {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 1.18fr 1fr !important;
  gap: clamp(28px, 4.5vw, 56px) !important;
  align-items: center !important;
  transition: none !important;
}

.ref-project-row.reversed {
  grid-template-columns: 1fr 1.18fr !important;
}

.ref-mockup-wrapper {
  width: 100% !important;
}

.ref-mockup-card {
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid #1C3550 !important;
  background: #0D2138 !important;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 3.2vw, 40px) !important;
  height: clamp(330px, 28vw, 410px) !important;
  max-height: 420px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 34px -4px rgba(7, 20, 38, 0.5) !important;
  cursor: pointer !important;
  transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease !important;
}

.ref-mockup-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(92, 200, 255, 0.4) !important;
  box-shadow: 0 20px 44px -4px rgba(7, 20, 38, 0.7), 0 0 24px rgba(92, 200, 255, 0.18) !important;
}

.ref-mockup-card img {
  border-radius: 12px !important;
  width: 100% !important;
  height: auto !important;
  max-height: clamp(280px, 24vw, 350px) !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.42)) !important;
  transition: transform 300ms ease !important;
}

.ref-mockup-card:hover img {
  transform: scale(1.025) !important;
}

.ref-info-wrapper {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Kompaktes Highlight-Badge (wie +340% Anfragen) */
.ref-big-result {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  background: rgba(92, 200, 255, 0.08) !important;
  border: 1px solid rgba(92, 200, 255, 0.2) !important;
  border-radius: 100px !important;
  margin-bottom: 10px !important;
  width: fit-content !important;
}

.ref-result-number {
  font-family: var(--font-head) !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #5CC8FF !important;
  letter-spacing: -0.02em !important;
}

.ref-result-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #A9BCD0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.ref-meta-tags {
  color: #71869C !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.ref-item-title {
  color: #F5FAFF !important;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}

.ref-item-desc {
  color: #A9BCD0 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  max-width: 560px !important;
}

.ref-pills-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.ref-pill {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
  border-radius: 8px !important;
  padding: 4px 11px !important;
  font-size: 0.8rem !important;
}

.ref-actions-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ref-actions-bar .btn-ref-case-study {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: #5CC8FF !important;
  color: #061321 !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(92, 200, 255, 0.22) !important;
  transition: all 180ms ease !important;
  white-space: nowrap !important;
}

.ref-actions-bar .btn-ref-case-study:hover {
  background: #82D7FF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(92, 200, 255, 0.32) !important;
}

.ref-actions-bar .btn-ref-case-study i {
  color: #061321 !important;
  font-size: 0.88rem !important;
}

.ref-actions-bar .btn-ref-website {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid #1C3550 !important;
  color: #F5FAFF !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 180ms ease !important;
  white-space: nowrap !important;
}

.ref-actions-bar .btn-ref-website:hover {
  background: rgba(92, 200, 255, 0.08) !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
  transform: translateY(-1px) !important;
}

.ref-actions-bar .btn-ref-website i {
  font-size: 0.82rem !important;
}

@media (max-width: 768px) {
  .ref-sub-br {
    display: none !important;
  }

  .ref-projects-list {
    gap: 36px !important;
  }

  .ref-project-row,
  .ref-project-row.reversed {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ref-mockup-card {
    height: 240px !important;
    max-height: 250px !important;
    padding: 16px 20px !important;
  }

  .ref-mockup-card img {
    max-height: 210px !important;
  }

  .ref-actions-bar {
    flex-wrap: wrap !important;
  }

  .ref-meta-tags {
    font-size: clamp(0.58rem, 2.3vw, 0.72rem) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .cs-modal-category {
    font-size: clamp(0.60rem, 2.4vw, 0.74rem) !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .apm-card-meta {
    font-size: clamp(0.60rem, 2.4vw, 0.70rem) !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}

body[data-theme="light"] .ref-mockup-card {
  background: #f3f4f6 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

body[data-theme="light"] .ref-item-title {
  color: #0f172a !important;
}

body[data-theme="light"] .ref-item-desc {
  color: #475569 !important;
}

body[data-theme="light"] .ref-pill {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #475569 !important;
}

body[data-theme="light"] .ref-actions-bar .btn-ref-website {
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

.ref-top-cta {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  color: #F5FAFF !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  transition: all 200ms ease !important;
}

.ref-top-cta:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
}

.ref-more-projects-box {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 24px !important;
  padding: 36px !important;
}

.ref-more-projects-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 36px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.btn-all-projects-popup {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  height: 52px !important;
  padding: 0 28px !important;
  background: #5CC8FF !important;
  color: #061321 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.22) !important;
  transition: all 200ms ease !important;
}

.btn-all-projects-popup i {
  color: #061321 !important;
  font-size: 0.95rem !important;
}

.btn-all-projects-popup:hover {
  background: #82D7FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(92, 200, 255, 0.32) !important;
}

/* 7. PROCESS (Ablauf & Erstgespräch) */
.erstgespraech-section {
  position: relative !important;
  padding: var(--section-padding) !important;
}

.erstgespraech-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

@media (min-width: 769px) {
  .eg-stepper-nav {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 768px) {
  .eg-stepper-nav {
    display: none !important;
  }
}

.eg-nav-dot {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  color: #A9BCD0 !important;
  transition: all 200ms ease !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.eg-nav-dot .eg-nd-num {
  flex-shrink: 0 !important;
}

.eg-nav-dot .eg-nd-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.eg-nav-dot.active {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

.eg-timeline-line {
  background: #31506D !important;
}

.eg-timeline-progress {
  background: #5CC8FF !important;
}

.eg-step-card {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  transition: all 200ms ease !important;
}

.eg-step-card.active {
  border-color: #5CC8FF !important;
  background: #102A45 !important;
}

.eg-step-indicator {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

.eg-step-card.active .eg-step-indicator {
  background: #5CC8FF !important;
  color: #061321 !important;
  border-color: #5CC8FF !important;
}

.eg-step-badge {
  color: #5CC8FF !important;
}

.eg-step-body h3 {
  color: #F5FAFF !important;
}

/* 8. CONTACT FUNNEL & CAL.COM / RESEND */
@media (min-width: 769px) {
  .cal-booking-card {
    background: #091B30 !important;
    border: 1px solid #1C3550 !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: 0 16px 40px -4px rgba(7, 20, 38, 0.7) !important;
  }
}

.cal-booking-tabs {
  background: #071426 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 14px !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
}

.cal-tab-btn {
  flex: 1 !important;
  height: 44px !important;
  border-radius: 10px !important;
  color: #A9BCD0 !important;
  background: transparent !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 200ms ease !important;
}

.cal-tab-btn.active {
  background: #0D2138 !important;
  color: #F5FAFF !important;
  border: 1px solid #31506D !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.cal-tab-btn i {
  color: #5CC8FF !important;
}

.contact-form {
  margin-top: 20px !important;
}

.form-group label {
  color: #F5FAFF !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  margin-bottom: 6px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #071426 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 12px !important;
  color: #F5FAFF !important;
  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  padding: 12px 16px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #71869C !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #5CC8FF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(92, 200, 255, 0.12) !important;
}

.form-checkbox label {
  color: #A9BCD0 !important;
  font-size: 0.84rem !important;
}

.form-checkbox a {
  color: #5CC8FF !important;
}

/* Mail Contact Link (Dezenter Text-Link statt Button) */
.mail-contact-wrap {
  margin-top: 14px !important;
  text-align: center !important;
}

.btn-mail-contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #A9BCD0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(92, 200, 255, 0.4) !important;
  text-underline-offset: 4px !important;
  box-shadow: none !important;
  transition: all 200ms ease !important;
  cursor: pointer !important;
}

.btn-mail-contact:hover {
  background: transparent !important;
  border: none !important;
  color: #5CC8FF !important;
  text-decoration-color: #5CC8FF !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.btn-mail-contact i {
  color: #5CC8FF !important;
  font-size: 0.92rem !important;
  transition: transform 200ms ease !important;
}

.btn-mail-contact:hover i {
  transform: scale(1.1) !important;
}

body[data-theme="light"] .btn-mail-contact {
  background: transparent !important;
  border: none !important;
  color: #475569 !important;
  text-decoration-color: rgba(0, 118, 180, 0.35) !important;
  box-shadow: none !important;
}

body[data-theme="light"] .btn-mail-contact:hover {
  background: transparent !important;
  border: none !important;
  color: #0076b4 !important;
  text-decoration-color: #0076b4 !important;
}

/* 9. FAQ ACCORDION */
.modal-faq-list,
.faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.faq-item {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 16px !important;
  transition: background 200ms ease, border-color 200ms ease !important;
  overflow: hidden !important;
}

.faq-item:hover {
  background: #102A45 !important;
  border-color: #31506D !important;
}

.faq-question {
  padding: 16px 20px !important;
  color: #F5FAFF !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  cursor: pointer !important;
}

.faq-question .faq-icon {
  color: #5CC8FF !important;
  transition: transform 250ms ease !important;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg) !important;
}

.faq-answer {
  padding: 0 20px 18px !important;
  color: #A9BCD0 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
}

/* 10. PREMIUM FOOTER */
/* 10. CLEAN MINIMAL FOOTER BAR (Screenshot style) */
.footer,
.footer.footer-clean-theme {
  background: #071426 !important;
  border-top: 1px solid #1C3550 !important;
  padding: 24px 0 !important;
  color: #A9BCD0 !important;
  width: 100% !important;
}

.footer-clean-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.footer-clean-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  padding: 0 !important;
  border: none !important;
}

.footer-brand-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.footer-brand-info .nav-logo {
  text-decoration: none !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-family: var(--font-head) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.footer-brand-dot {
  color: #71869C !important;
  opacity: 0.6 !important;
}

.footer-brand-location {
  font-size: 0.88rem !important;
  color: #A9BCD0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 200ms ease !important;
}

.footer-brand-location i {
  color: #71869C !important;
  font-size: 0.9rem !important;
}

.footer-brand-location:hover {
  color: #5CC8FF !important;
}

.footer-brand-location:hover i {
  color: #5CC8FF !important;
}

.footer-legal-bar {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.footer-copy {
  font-size: 0.85rem !important;
  color: #A9BCD0 !important;
}

.footer-legal-sep {
  color: #71869C !important;
  opacity: 0.6 !important;
}

.footer-legal-links {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.footer-legal-links a {
  font-size: 0.85rem !important;
  color: #A9BCD0 !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
}

.footer-legal-links a:hover {
  color: #5CC8FF !important;
}

.scroll-to-top {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
  font-size: 0.95rem !important;
  transition: all 200ms ease !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  text-decoration: none !important;
}

.scroll-to-top:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
  color: #82D7FF !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
  .footer-clean-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .footer-brand-info {
    justify-content: center !important;
  }

  .footer-legal-bar {
    justify-content: center !important;
  }
}

/* 11. MODAL ENFORCEMENT */
.modal-container,
.cal-modal-container,
.apm-modal-container,
.cs-modal-container,
.cookie-container {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 60px rgba(5, 15, 28, 0.85) !important;
}

.modal-close,
.apm-modal-close,
.cs-modal-close {
  color: #A9BCD0 !important;
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 10px !important;
  transition: all 200ms ease !important;
}

.modal-close:hover,
.apm-modal-close:hover,
.cs-modal-close:hover {
  color: #5CC8FF !important;
  border-color: #5CC8FF !important;
}

/* 12. PROBLEM CARDS, FOUNDER CARD & FLIP BUTTON */
.problem-card,
.solution-card,
.founder-compact-card {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(7, 20, 38, 0.5) !important;
}

.problem-card:hover,
.solution-card:hover {
  background: #102A45 !important;
  border-color: rgba(92, 200, 255, 0.25) !important;
}

.problem-num,
.solution-num {
  color: #5CC8FF !important;
}

.problem-icon,
.solution-icon {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
}

.problem-card p,
.solution-card p {
  color: #A9BCD0 !important;
  font-size: 0.95rem !important;
  line-height: var(--para-line-height) !important;
  margin-bottom: 16px !important;
  text-wrap: pretty !important;
}

.eg-step-body p {
  color: #A9BCD0 !important;
  font-size: 0.94rem !important;
  line-height: var(--para-line-height) !important;
  margin-bottom: 14px !important;
  text-wrap: pretty !important;
}

.modal-content-scroll p {
  margin-bottom: 14px !important;
  line-height: var(--para-line-height) !important;
  text-wrap: pretty !important;
}

.modal-content-scroll h3 {
  margin-top: 24px !important;
  margin-bottom: 10px !important;
}

.btn-category-flip {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 16px !important;
}

.btn-category-flip:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
}

.bcf-icon-ring {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #5CC8FF !important;
}

.bcf-pill {
  background: #5CC8FF !important;
  color: #061321 !important;
}

.bcf-pill i {
  color: #061321 !important;
}

/* 13. FLOATING FAQ BUTTON & MARQUEE */
.floating-cta-btn {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  color: #F5FAFF !important;
  border-radius: 100px !important;
  padding: 10px 18px !important;
  box-shadow: 0 8px 24px rgba(7, 20, 38, 0.6) !important;
  transition: all 200ms ease !important;
}

.floating-cta-btn:hover {
  background: #102A45 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

.floating-cta-btn .fcta-icon {
  color: #5CC8FF !important;
}

.marquee-section {
  background: #091B30 !important;
  border-top: 1px solid #1C3550 !important;
  border-bottom: 1px solid #1C3550 !important;
  padding: 16px 0 !important;
}

.marquee-inner span {
  color: #A9BCD0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
}

.marquee-inner span i {
  color: #5CC8FF !important;
}

/* 14. ALL PROJECTS MODAL (STYLE & FILTERS) */
.apm-filter-btn {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  transition: all 200ms ease !important;
}

.apm-filter-btn:hover {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #F5FAFF !important;
}

.apm-filter-btn.active {
  background: #0D2138 !important;
  border-color: #5CC8FF !important;
  color: #5CC8FF !important;
}

.apm-project-card {
  background: #0D2138 !important;
  border: 1px solid #1C3550 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(7, 20, 38, 0.5) !important;
  transition: transform 200ms ease, border-color 200ms ease !important;
}

.apm-project-card:hover {
  border-color: rgba(92, 200, 255, 0.28) !important;
  transform: translateY(-2px) !important;
}

.apm-tag-pill {
  background: #091B30 !important;
  border: 1px solid #1C3550 !important;
  color: #A9BCD0 !important;
}

/* 15. MOBILE TOUCH TARGETS & ACCESSIBILITY */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.form-input,
.form-select,
.form-textarea {
  min-height: 44px;
}

.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 16. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===== 17. RESTORED MINIMAL CLEAN FOOTER BAR (EXACT SCREENSHOT RESTORATION) ===== */
.footer.footer-clean-theme {
  position: relative !important;
  background: #071426 !important;
  border-top: 1px solid rgba(28, 53, 80, 0.75) !important;
  padding: 26px 0 !important;
  width: 100% !important;
  contain-intrinsic-size: auto !important;
  content-visibility: visible !important;
}

body[data-theme="light"] .footer.footer-clean-theme {
  background: #f8fbff !important;
  border-top: 1px solid rgba(0, 118, 180, 0.15) !important;
}

.footer-clean-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.footer-clean-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}

/* Brand left side: logo + separator + location */
.footer-brand-info {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

.footer-brand-info .nav-logo {
  min-height: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  padding: 6px 0 !important;
  overflow: visible !important;
}

.footer-brand-info .nav-logo .logo-inn {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  display: inline-block !important;
}

.footer-brand-info .nav-logo .logo-digital {
  background: linear-gradient(135deg, #5CC8FF 0%, #3DB9F5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  padding-bottom: 8px !important;
  margin-bottom: -8px !important;
  overflow: visible !important;
}

.footer-brand-dot {
  color: #71869C !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  user-select: none !important;
  opacity: 0.6 !important;
}

.footer-brand-location {
  min-height: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.86rem !important;
  color: #71869C !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: default !important;
  user-select: none !important;
}

.footer-brand-location i {
  color: #71869C !important;
  font-size: 0.86rem !important;
}

/* Center social media links in footer */
.footer-social-links {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.footer-social-links .social-app-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.footer-social-links .social-app-btn i {
  font-size: 1rem !important;
}

/* Legal right side: copyright + separator + links + up-button */
.footer-legal-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

.footer-copy {
  font-size: 0.84rem !important;
  color: #71869C !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.footer-copy-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.footer-desktop-only {
  display: inline-flex !important;
}

.footer-mobile-sep,
.footer-mobile-location {
  display: none !important;
}

.footer-mobile-location {
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.84rem !important;
  color: #71869C !important;
  line-height: 1 !important;
}

.footer-mobile-location i {
  color: #71869C !important;
  font-size: 0.84rem !important;
}

.footer-mobile-sep {
  color: #71869C !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  opacity: 0.6 !important;
}

.footer-legal-sep {
  color: #71869C !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  user-select: none !important;
  opacity: 0.6 !important;
}

.footer-legal-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.footer-legal-links a {
  min-height: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.84rem !important;
  color: #71869C !important;
  text-decoration: none !important;
  transition: color 180ms ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.footer-legal-links a:hover {
  color: #5CC8FF !important;
}

body[data-theme="light"] .footer-brand-info .nav-logo .logo-inn {
  color: #0d1230 !important;
}

body[data-theme="light"] .footer-brand-location,
body[data-theme="light"] .footer-brand-location i,
body[data-theme="light"] .footer-mobile-location,
body[data-theme="light"] .footer-mobile-location i,
body[data-theme="light"] .footer-copy,
body[data-theme="light"] .footer-legal-links a,
body[data-theme="light"] .footer-brand-dot,
body[data-theme="light"] .footer-legal-sep,
body[data-theme="light"] .footer-mobile-sep {
  color: #5b6e88 !important;
}

body[data-theme="light"] .footer-brand-location:hover,
body[data-theme="light"] .footer-legal-links a:hover {
  color: #0076b4 !important;
}

/* Scroll to top button: exact square in user screenshot */
.scroll-to-top {
  min-height: 38px !important;
  max-height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  background: rgba(92, 200, 255, 0.05) !important;
  border: 1px solid rgba(92, 200, 255, 0.28) !important;
  color: #5CC8FF !important;
  font-size: 0.92rem !important;
  transition: all 200ms ease !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.scroll-to-top i {
  color: #5CC8FF !important;
  font-size: 0.88rem !important;
  transition: transform 200ms ease !important;
}

.scroll-to-top:hover {
  background: rgba(92, 200, 255, 0.12) !important;
  border-color: #5CC8FF !important;
  color: #82D7FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 12px rgba(92, 200, 255, 0.22) !important;
}

.scroll-to-top:hover i {
  transform: translateY(-1px) !important;
}

body[data-theme="light"] .scroll-to-top {
  background: rgba(0, 118, 180, 0.06) !important;
  border-color: rgba(0, 118, 180, 0.3) !important;
  color: #0076b4 !important;
}

body[data-theme="light"] .scroll-to-top i {
  color: #0076b4 !important;
}

body[data-theme="light"] .scroll-to-top:hover {
  background: rgba(0, 118, 180, 0.12) !important;
  border-color: #0076b4 !important;
}

/* Responsive adjustment for tablet/mobile:
   1. Zeile: Social Media (zentriert)
   2. Zeile: innDigital Logo (zentriert unter Social Media)
   3. Zeile: Rechtliche Links (Impressum, Datenschutz, Cookie-Einstellungen)
   4. Zeile: Scroll to Top
   5. Zeile: Copyright ganz unten (ohne Ort)
*/
@media (max-width: 900px) {
  .footer-clean-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  /* 1. Zeile: Social Media (zentriert) */
  .footer-social-links {
    order: 1 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* 2. Zeile: Logo zentriert direkt unter den Social Media Logos */
  .footer-brand-info {
    order: 2 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  .footer-brand-info .nav-logo {
    margin: 0 auto !important;
    justify-content: center !important;
  }

  /* Ort und Trennpunkte im Brand-Bereich ausblenden */
  .footer-desktop-only,
  .footer-brand-location,
  .footer-brand-dot {
    display: none !important;
  }

  /* 3. Zeile: Rechtliche Leiste */
  .footer-legal-bar {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Rechtliche Links (Impressum, Datenschutz, Cookie-Einstellungen) über dem Copyright */
  .footer-legal-links {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .footer-legal-links a {
    font-size: 0.84rem !important;
    color: #71869C !important;
  }

  .scroll-to-top {
    order: 2 !important;
    margin: 2px auto !important;
  }

  /* Copyright ganz unten unter den rechtlichen Links */
  .footer-copy-location {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .footer-copy {
    font-size: 0.82rem !important;
    color: #71869C !important;
    text-align: center !important;
  }

  /* Ort komplett entfernen auf Mobile */
  .footer-mobile-location,
  .footer-mobile-sep {
    display: none !important;
  }
}

/* ===== 18. KERNLEISTUNGEN (SERVICES) CARD WINDOWS CUTOFF FIX ===== */
.services-stacked-section {
  overflow: visible !important;
}

.services-sticky-stage {
  height: auto !important;
  min-height: calc(100vh - 75px) !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-bottom: 32px !important;
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  .services-deck-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    min-height: auto !important;
    height: auto !important;
    flex-grow: 0 !important;
    position: relative !important;
    perspective: 1200px !important;
    transform-style: preserve-3d !important;
  }

  .service-flip-card {
    grid-area: 1 / 1 / 2 / 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
  }

  .service-flip-card.state-next {
    transform: translate3d(0, 18px, -45px) scale(0.97) rotateX(-6deg) !important;
    opacity: 0.35 !important;
    filter: blur(2px) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  .service-flip-card.state-far {
    transform: translate3d(0, 32px, -80px) scale(0.92) rotateX(-12deg) !important;
    opacity: 0 !important;
    filter: blur(5px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
}

@media (min-width: 769px) {
  .sfc-inner {
    background: #0D2138 !important;
    border: 1px solid #1C3550 !important;
    border-radius: 24px !important;
    padding: 24px 28px !important;
    box-shadow: 0 12px 32px -4px rgba(7, 20, 38, 0.6) !important;
    overflow: visible !important;
    align-items: stretch !important;
    gap: 24px 28px !important;
    min-height: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .scc-header {
    margin-bottom: 12px !important;
  }

  .scc-number {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: #5CC8FF !important;
  }

  .scc-badge {
    background: rgba(92, 200, 255, 0.08) !important;
    border: 1px solid rgba(92, 200, 255, 0.2) !important;
    color: #5CC8FF !important;
    border-radius: 100px !important;
    padding: 3px 12px !important;
    font-size: 0.72rem !important;
  }

  .scc-icon-wrap {
    margin-bottom: 12px !important;
  }

  .scc-icon {
    background: #091B30 !important;
    border: 1px solid #1C3550 !important;
    color: #5CC8FF !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 1.2rem !important;
  }

  .sfc-col-info h3 {
    color: #F5FAFF !important;
    font-size: clamp(1.2rem, 1.7vw, 1.48rem) !important;
    line-height: 1.25 !important;
    margin: 4px 0 8px !important;
  }

  .scc-desc {
    color: #A9BCD0 !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  .sfc-col-features {
    background: #091B30 !important;
    border: 1px solid #1C3550 !important;
    border-radius: 16px !important;
    padding: 20px 22px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .sfc-features-title {
    color: #F5FAFF !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    margin-bottom: 10px !important;
  }

  .scc-checklist {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .scc-checklist li {
    color: #A9BCD0 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    gap: 8px !important;
  }

  .scc-checklist li strong {
    color: #F5FAFF !important;
  }

  .scc-metric-card {
    padding: 10px 14px !important;
    margin-top: 4px !important;
  }
}

/* Mobile Fehlerbehebung: Saubere, zentrierte & unverschobene Boxen auf Smartphones */
@media (max-width: 768px) {
  .services-deck-stage {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    padding: 6px 14px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .service-flip-card,
  .service-flip-card.state-active,
  .service-flip-card.state-next,
  .service-flip-card.state-far,
  .service-flip-card.state-passed {
    flex: 0 0 88% !important;
    width: 88% !important;
    max-width: 88% !important;
    min-width: 270px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  .sfc-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    background: #0D2138 !important;
    border: 1px solid #1C3550 !important;
    overflow: hidden !important;
  }

  .sfc-col-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .scc-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
  }

  .scc-number {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #5CC8FF !important;
    line-height: 1 !important;
  }

  .scc-badge {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
  }

  .scc-icon-wrap {
    display: none !important;
  }

  .sfc-col-info h3 {
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    margin: 2px 0 6px !important;
    font-weight: 700 !important;
    word-break: break-word !important;
  }

  .scc-desc {
    display: none !important;
  }

  .sfc-col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sfc-col-features {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #091B30 !important;
    border: 1px solid #1C3550 !important;
    border-radius: 14px !important;
    padding: 13px 15px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .sfc-features-title {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #F5FAFF !important;
    margin-bottom: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .scc-checklist {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .scc-checklist li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.84rem !important;
    line-height: 1.38 !important;
    padding: 0 !important;
  }

  .scc-checklist li i {
    font-size: 0.78rem !important;
    color: #5CC8FF !important;
    margin-top: 3px !important;
    flex-shrink: 0 !important;
  }

  .scc-checklist li div {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.84rem !important;
    line-height: 1.38 !important;
    color: #A9BCD0 !important;
    word-break: break-word !important;
  }

  .scc-checklist li div strong {
    color: #F5FAFF !important;
    font-weight: 600 !important;
  }

  .sfc-stat-chip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 9px 13px !important;
    border-radius: 12px !important;
    background: rgba(92, 200, 255, 0.07) !important;
    border: 1px solid rgba(92, 200, 255, 0.22) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
  }

  .sfc-stat-val {
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    color: #5CC8FF !important;
    flex-shrink: 0 !important;
  }

  .sfc-stat-lbl {
    font-size: 0.76rem !important;
    line-height: 1.32 !important;
    color: #F5FAFF !important;
    font-weight: 500 !important;
    word-break: break-word !important;
  }

  body[data-theme="light"] .sfc-stat-chip {
    background: rgba(0, 118, 180, 0.07) !important;
    border: 1px solid rgba(0, 118, 180, 0.2) !important;
  }

  body[data-theme="light"] .sfc-stat-val {
    color: #0076B4 !important;
  }

  body[data-theme="light"] .sfc-stat-lbl {
    color: #071426 !important;
  }
}

/* ===== 19. GLOBAL HEADINGS: STRICT SINGLE-LINE & COMPACT FONT-SIZE ===== */
h1,
.hero-main-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  line-height: 1.2 !important;
}

h2,
.section-header h2,
#problem-heading,
#leistungen-heading,
.ref-main-heading,
.apm-title {
  font-size: clamp(1.2rem, 2vw, 1.85rem) !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
}

.section-header {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 900px) {

  h1,
  .hero-main-title {
    font-size: clamp(1.3rem, 6vw, 1.75rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  h2,
  .section-header h2,
  #problem-heading,
  #leistungen-heading,
  .apm-title {
    font-size: clamp(1.05rem, 3.8vw, 1.35rem) !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }
}

/* ===== 20. SERVICES CENTRAL CTA (PROJEKT BESPRECHEN ZENTRIERT UNTERHALB KERNLEISTUNGEN) ===== */
.services-central-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 15 !important;
}

.services-central-cta .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 52px !important;
  padding: 0 32px !important;
  background: #5CC8FF !important;
  color: #061321 !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(92, 200, 255, 0.22) !important;
  transition: all 200ms ease !important;
}

.services-central-cta .btn-primary:hover {
  background: #82D7FF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(92, 200, 255, 0.32) !important;
}

.services-central-cta .btn-primary i {
  color: #061321 !important;
  font-size: 0.95rem !important;
  transition: transform 200ms ease !important;
}

.services-central-cta .btn-primary:hover i {
  transform: translateX(3px) !important;
}

.services-swipe-bar {
  display: none !important;
}

.projects-swipe-hint {
  display: none !important;
}

@media (max-width: 768px) {
  .services-swipe-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .services-central-cta {
    margin-top: 14px !important;
  }

  .services-central-cta .btn-primary {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .founder-brand-actions {
    flex-direction: column;
    width: 100%;
  }

  .founder-brand-actions .btn-primary,
  .founder-brand-actions .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .social-media-channels {
    flex-direction: column;
  }

  .social-channel-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===== 21. UNIFORM SECTION & CATEGORY SPACING (EINHEITLICHE ABSTÄNDE FÜR ALLE ABSCHNITTE) ===== */
@media (min-width: 769px) {
  .hero {
    padding-top: 104px !important;
    padding-bottom: 72px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .about-me-section,
  .problem-founder-flip-section,
  .founder-section,
  .expertise,
  .services-stacked-section,
  .referenzen,
  .erstgespraech-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-header,
  .ref-header-row,
  .eg-intro-header {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-top: 80px !important;
    padding-bottom: 38px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .about-me-section,
  .problem-founder-flip-section,
  .founder-section,
  .expertise,
  .services-stacked-section,
  .referenzen,
  .erstgespraech-section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .section-header,
  .ref-header-row,
  .eg-intro-header {
    margin-bottom: 18px !important;
  }

  /* Terminkalender mobil: Maximal breit & ohne leeren Bereich unten */
  .erstgespraech-section .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .cal-booking-column,
  #onlinetermin-buchung,
  #online-terminkalender {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    scroll-margin-top: 76px !important;
  }

  .cal-booking-card,
  #calBookingCard {
    padding: 12px 6px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scroll-margin-top: 76px !important;
  }

  #my-cal-inline,
  #my-cal-inline iframe {
    height: 670px !important;
    min-height: 660px !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    border: none !important;
  }

  .cal-card-footer {
    margin-top: 10px !important;
    padding: 4px 6px 0 !important;
  }

  /* Mobile Flip Button: Lösung aufdecken mit animiertem Reverse-Icon & sanftem Leuchten */
  .btn-category-flip .bcf-pill {
    background: #5CC8FF !important;
    color: #061321 !important;
    animation: bcfPulseGlowStrong 2.4s ease-in-out infinite !important;
  }

  .btn-category-flip .bcf-icon-mobile {
    display: inline-flex !important;
    animation: bcfRotateReverse 3.5s linear infinite !important;
    color: #061321 !important;
  }

  .btn-category-flip .bcf-pill-text-desktop {
    display: none !important;
  }

  .btn-category-flip .bcf-pill-text-mobile {
    display: inline !important;
    color: #061321 !important;
  }

  .btn-category-flip .bcf-icon-desktop {
    color: #061321 !important;
  }

  /* Profil-Header (Avatar, Name, Social-Icons) nur auf Mobile ausblenden */
  .fcc-header {
    display: none !important;
  }

  /* Gründer-CTA Button Text auf Mobile: Projekt besprechen */
  #founderCtaBtn span.founder-cta-text-desktop,
  .founder-cta-text-desktop {
    display: none !important;
  }

  #founderCtaBtn span.founder-cta-text-mobile,
  .founder-cta-text-mobile {
    display: inline-block !important;
  }

  /* Meine Projekte: Überschrift etwas größer & Untertitel auf 2 Zeilen */
  .ref-main-heading {
    font-size: clamp(1.65rem, 5.5vw, 1.95rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
  }

  .ref-sub-heading {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .ref-sub-heading-desktop {
    display: none !important;
  }

  .ref-sub-heading-mobile {
    display: inline !important;
  }

  /* Projekt-Kategorie/Meta-Tags auf Mobile auf eine Zeile reduzieren */
  .ref-meta-tags {
    font-size: clamp(0.58rem, 2.3vw, 0.72rem) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .cs-modal-category {
    font-size: clamp(0.60rem, 2.4vw, 0.74rem) !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .apm-card-meta {
    font-size: clamp(0.60rem, 2.4vw, 0.70rem) !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Gründer & Digital-Stratege Badge auf Mobile ausblenden */
  .about-card-pill {
    display: none !important;
  }

  /* Alle 'Projekt besprechen' Buttons auf Mobile mit gleicher Schriftgröße wie 'Arbeiten ansehen' (0.95rem) */
  #heroCta,
  #founderCtaBtn,
  #aboutCtaBtn,
  #servicesCentralCtaBtn,
  #navCtaBtn,
  .hero-btn-primary,
  .about-primary-btn,
  .services-central-cta .btn-primary,
  .btn-primary {
    font-size: 0.95rem !important;
  }

  #heroCta span,
  #founderCtaBtn span,
  #aboutCtaBtn span,
  #servicesCentralCtaBtn span,
  .hero-btn-primary span,
  .about-primary-btn span,
  .services-central-cta .btn-primary span,
  .btn-primary span {
    font-size: 0.95rem !important;
  }
}