/*
Theme Name:  Digitale Branding
Description: Premium Landing Page Child Theme – Light / Minimal Design System
Template:    twentytwentyfour
Version:     8.1.0
Author:      Digitale Branding
Text Domain: digitale-branding
*/

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  /* ── Backgrounds ── */
  --bg:           #FFFFFF;
  --bg-2:         #F7F7F5;
  --bg-card:      #FFFFFF;
  --bg-card-h:    #F3F3F1;
  --bg-footer:    #0D0D0D;

  /* ── Accent: clean black ── */
  --cyan:         #0D0D0D;
  --cyan-hover:   #333333;
  --cyan-dark:    #555555;
  --cyan-glow:    rgba(13,13,13,0.08);

  /* ── Text ── */
  --white:        #111827;   /* maps to primary text in light theme */
  --text-2:       #6B7280;
  --text-muted:   #9CA3AF;

  /* ── Borders ── */
  --border:       #E5E7EB;
  --border-h:     #D1D5DB;

  /* ── Typography ── */
  --font-h: 'Inter', 'Roboto', sans-serif;
  --font-b: 'Inter', 'Poppins', sans-serif;

  /* ── Misc ── */
  --r: 6px;
  --r-card: 12px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: all 0.3s ease;
  --cw: 1200px;

  /* ── Silver Update 29.05.26 ── */
  --color-silver:   #C0BDB5;
  --color-navy:     #1A1A2E;
  --color-gold:     #C9A96E;
  --color-offwhite: #F8F7F4;

  /* ── Premium Color System v5.1 ── */
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F8F7F4;
  --color-bg-dark:      #1A1A2E;
  --color-primary:      #1A1A2E;
  --color-accent:       #C9A96E;
  --color-accent-light: #F5EDD8;
  --color-text:         #1A1A2E;
  --color-text-muted:   #6B6B7B;
  --color-border:       #E8E4DC;
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body,
.site,
#page {
  font-family: var(--font-b);
  background: var(--bg) !important;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-top: 0 !important; /* Hero-Sektion übernimmt den Offset für die floating Nav */
  margin-top: 0 !important;
}

body.admin-bar .db-nav { top: 32px !important; }

img   { max-width: 100%; height: auto; display: block; }
ul    { list-style: none; }
a     { text-decoration: none; color: var(--cyan); transition: var(--t); }
a:hover { color: var(--cyan-hover); }
button { border: none; cursor: pointer; font-family: var(--font-b); }

/* ============================================================
   TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h) !important;
  color: var(--white) !important;
  line-height: 1.1;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 800; }
h2 { font-size: clamp(30px, 4vw, 48px);  font-weight: 700; }
h3 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

p { color: var(--text-2); line-height: 1.7; font-family: var(--font-b); }

.label,
.section-label,
.chip {
  font-family: var(--font-h) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--cyan) !important;
  display: block;
  margin-bottom: 1.25rem;
}

.text-white { color: var(--white) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center; }

/* ============================================================
   LAYOUT
============================================================ */
.container,
.wp-block-group,
.section-inner {
  max-width: var(--cw) !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

section.db-section    { padding: 100px 0; }
section.db-section-sm { padding: 60px 0; }

.section-head {
  margin-bottom: 60px;
}
.section-head.center {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.section-head p { margin-top: 1rem; font-size: 18px; color: var(--text-2); }

.divider {
  width: 48px; height: 1px;
  background: var(--border);
  margin: 1rem 0;
}
.divider.center { margin: 1rem auto; }

hr, .section-divider {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 0 !important;
}

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 32px;
  border-radius: var(--r);
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--t);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Primary — Gold */
.btn-gold,
.btn-primary,
.button-primary {
  background: var(--cyan) !important;
  color: #1A1A2E !important;
  border-color: var(--cyan) !important;
  font-weight: 700 !important;
  border-radius: var(--r) !important;
}
.btn-gold:hover,
.btn-primary:hover,
.button-primary:hover {
  background: var(--cyan-hover) !important;
  border-color: var(--cyan-hover) !important;
  color: #1A1A2E !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--cyan-glow);
}

/* Outline — White */
.btn-outline,
.btn-secondary,
.button-secondary {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid var(--white) !important;
  border-radius: var(--r) !important;
}
.btn-outline:hover,
.btn-secondary:hover,
.button-secondary:hover {
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
  background: transparent !important;
}

.btn-lg  { padding: 16px 40px; font-size: 14px; }
.btn-xl  { padding: 18px 48px; font-size: 15px; }
.btn-glow:hover { box-shadow: 0 8px 32px var(--cyan-glow); }

/* ============================================================
   LOGO — Inline SVG
============================================================ */
.db-logo-img {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none !important;
  transition: opacity .25s ease;
}
.db-logo-img:hover { opacity: .75; }

/* Wrapper hält die Größe und erzwingt weiße Farbe */
.db-logo-svg-wrap {
  display: flex;
  align-items: center;
  height: 45px;
  width: auto;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}

/* Das SVG-Element selbst — skaliert auf die Wrapper-Höhe */
.db-logo-svg-wrap svg {
  height: 45px !important;
  width: auto !important;
  max-width: 200px;
  display: block;
}

/* Footer-Logo etwas kleiner und gedimmt */
.db-logo-svg-footer {
  height: 36px;
  opacity: .55;
}
.db-logo-svg-footer svg {
  height: 36px !important;
}
.db-logo-img:hover .db-logo-svg-footer { opacity: 1; }

/* Fallback: falls noch <img> vorhanden */
.db-logo-image,
.custom-logo-link img,
.site-branding img {
  height: 45px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
  background: none !important;
}

/* ============================================================
   NAVIGATION — Floating Pill v4.6.0
============================================================ */
header,
.site-header,
#masthead,
.db-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  display: block !important;
  background: transparent !important;
  z-index: 9999 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 18px 24px 0 !important;
  transition: var(--t);
}

/* Floating-Pill-Container */
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 158, 122, 0.3);
  border-radius: 16px;
  padding: 0 28px;
  transition: var(--t);
}

/* Beim Scrollen: etwas undurchsichtiger */
.db-nav.scrolled .nav-container {
  background: rgba(0, 0, 0, 0.82) !important;
  border-color: rgba(184, 158, 122, 0.5) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.db-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
  width: 100%;
}

/* Desktop links */
.db-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.db-nav-links a {
  font-family: var(--font-b);
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--white) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: var(--t);
}
.db-nav-links a:hover { color: #dcb88e !important; }

/* Nav CTA */
.db-nav .btn-gold {
  padding: 10px 20px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

/* Hamburger */
.db-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 4px;
}
.db-hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--white);
  transition: var(--t);
}

/* Mobile overlay */
.db-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #1A1A2E;
  z-index: 9998;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.db-mobile-menu.open { display: flex; }
.db-mobile-menu a {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white) !important;
  font-family: var(--font-h);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.db-mobile-menu a:hover { color: var(--cyan) !important; }
.db-mobile-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: none;
  color: var(--white);
  font-size: 1.4rem;
  padding: .5rem;
}

/* ============================================================
   HERO — Premium Split Layout v4.6.2
   Referenz: premiumseiten.de
============================================================ */

/* Hauptsektion */
.db-hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Hintergrundbild: ersetze hero-bg.jpg durch eigenes Office/Lifestyle-Foto */
  background-image: url('assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-color: #0d0c0a; /* Fallback wenn kein Bild vorhanden */
}

/* Dunkles Gradient-Overlay — links opak, rechts transparent */
.db-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(5, 4, 2, 0.92) 0%,
    rgba(5, 4, 2, 0.75) 50%,
    rgba(5, 4, 2, 0.55) 80%,
    rgba(5, 4, 2, 0.30) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Text-Content-Bereich */
.db-hero-container {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 140px 60px 160px; /* oben: Nav-Abstand; unten: Platz für Logo-Bar */
}

/* ── Linke Spalte: Text ── */
.db-hero-content {
  max-width: 50%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Eyebrow: edles Gold/Beige */
.db-hero-eyebrow {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #b89e7a;
  margin: 0;
}

/* Headline: massiv, reinweiß */
.db-hero-h1 {
  font-family: var(--font-h);
  font-size: clamp(2.6rem, 4.8vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 0.1rem;
}

.db-hero-h1 em {
  font-style: normal;
  color: #dcb88e; /* Gold/Beige Akzent */
}

.db-hero-sub {
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.70);
  max-width: 480px;
  margin: 0;
}

/* Button-Gruppe */
.db-hero-btn-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Primär-Button: Magnetic Arrow — pill-style mit Icon-Badge */
.db-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 6px 6px 6px 24px;
  border-radius: 50px;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #050402;
  background: #dcb88e;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
  border: none;
}

.db-btn-primary .btn-text {
  flex: 1;
}

/* Icon-Badge: dunkler Kreis mit Gold-Pfeil */
.db-btn-primary .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1A1A2E;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.db-btn-primary .btn-icon svg {
  color: #dcb88e;
}

.db-btn-primary:hover {
  background: #e8c9a0;
  color: #050402;
  box-shadow: 0 8px 28px rgba(184, 158, 122, 0.35);
}

.db-btn-primary:hover .btn-icon {
  transform: translateX(4px);
}

/* Ghost-Button: transparent mit Gold-Rahmen */
.db-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 13px 28px;
  border-radius: 50px;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: transparent;
  border: 1px solid #dcb88e;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
}

.db-btn-ghost:hover {
  border-color: #b89e7a;
  color: #dcb88e;
  background: rgba(220, 184, 142, 0.08);
}

/* Social Proof Text */
.db-hero-social-proof {
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(184, 158, 122, 0.6);
  margin: 0;
}

/* ── Portrait: absolut, rechts, sitzt auf unterer Kante ── */
.db-hero-portrait-img {
  position: absolute;
  bottom: 0;
  right: 5%;
  height: 92%;
  width: auto;
  z-index: 2;
  object-fit: contain;
  object-position: bottom center;
  /* kein border-radius, kein box-shadow — freigestelltes PNG */
  pointer-events: none;
  display: block;
}

/* Platzhalter wenn oussama-portrait.png noch nicht vorhanden */
.db-hero-portrait-placeholder {
  position: absolute;
  bottom: 0;
  right: 5%;
  height: 85%;
  width: 35%;
  z-index: 2;
  background: rgba(184, 158, 122, 0.04);
  border: 1px dashed rgba(184, 158, 122, 0.25);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(184, 158, 122, 0.4);
  font-family: var(--font-b);
  font-size: 13px;
  text-align: center;
  padding: 2rem;
  pointer-events: none;
}

/* ── Logo-Bar: absolut, unten, leicht hinter Portrait ── */
.db-hero-logos {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1; /* hinter Portrait (z-index: 2) */
  padding: 20px 60px 22px;
  background: linear-gradient(transparent, rgba(5, 4, 2, 0.70));
}

.db-hero-logos-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.db-hero-logos-label {
  font-family: var(--font-h);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.db-hero-logos-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.db-logo-placeholder {
  height: 28px;
  min-width: 72px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.2);
  opacity: 0.5;
  filter: grayscale(1);
}

/* ── Responsive: Tablet (≤ 960px) ── */
@media (max-width: 960px) {
  .db-hero-container { padding: 120px 40px 240px; }
  .db-hero-content   { max-width: 60%; }
  .db-hero-h1        { font-size: clamp(2.2rem, 5.5vw, 3.2rem); }
}

/* ── Responsive: Mobil (≤ 768px) ── */
/* Portrait wird aus dem absoluten Fluss genommen und normal eingebettet */
@media (max-width: 768px) {
  .db-hero-section {
    background-position: 70% top;
    min-height: auto;
    padding-bottom: 60px;
  }
  .db-hero-section::before {
    background: rgba(5, 4, 2, 0.85); /* gleichmäßig dunkel auf Mobile */
  }
  .db-hero-container {
    padding: 100px 24px 30px;
  }
  .db-hero-content {
    max-width: 100%;
    min-width: unset;
  }
  .db-hero-h1  { font-size: clamp(2rem, 7vw, 2.8rem); }
  .db-hero-sub { font-size: 15px; max-width: 100%; }

  /* Portrait: statisch unter dem Text */
  .db-hero-portrait-img,
  .db-hero-portrait-placeholder {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    height: auto !important;
    width: 70% !important;
    max-width: 300px;
    margin: 2rem auto 0;
    display: block;
  }

  /* Logo-Bar: statisch */
  .db-hero-logos {
    position: relative !important;
    background: rgba(5, 4, 2, 0.8);
    border-top: 1px solid rgba(184, 158, 122, 0.15);
    padding: 18px 24px;
  }
  .db-hero-logos-inner { gap: 1rem; flex-wrap: wrap; }
  .db-hero-logos-row   { gap: 1rem; }
}

/* ── Responsive: Klein-Mobil (≤ 420px) ── */
@media (max-width: 420px) {
  .db-hero-h1       { font-size: 1.85rem; }
  .db-hero-btn-group { flex-direction: column; align-items: flex-start; }
  .db-btn-primary,
  .db-btn-ghost     { width: 100%; justify-content: center; }
}

/* ============================================================
   STATS
============================================================ */
.db-stats {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 60px 0;
}

.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

.db-stat-card {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  transition: var(--t);
}
.db-stat-card:last-child { border-right: none; }
.db-stat-card:hover { background: var(--bg-card-h); }

.db-stat-num,
.stat-number {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: .4rem;
  font-family: var(--font-h) !important;
  display: block;
}
.db-stat-label,
.stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--text-2) !important;
  font-family: var(--font-b) !important;
}

/* ============================================================
   SERVICES
============================================================ */
.db-services {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.db-services-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.db-services-head p { color: var(--text-2); font-size: 18px; margin-top: 1rem; }

.db-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.db-svc-card,
.card,
.service-card,
.feature-card {
  background: rgba(17, 17, 17, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(220, 184, 142, 0.18) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--t);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 3D-Inset-Shadow (gefräste Kante) + statischer Gold-Glow */
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.50),
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(220, 184, 142, 0.08) !important;
  /* Safari-Fix: erzwingt Border-Radius-Clipping auch mit transform/backdrop-filter */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* Hover: Inset-Shadow beibehalten, Gold-Glow intensivieren */
.db-svc-card:hover,
.card:hover,
.service-card:hover,
.feature-card:hover {
  background: rgba(20, 20, 20, 0.97) !important;
  border-color: rgba(220, 184, 142, 0.35) !important;
  transform: translateY(-4px);
  z-index: 2;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.50),
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(220, 184, 142, 0.18) !important;
}

/* Karten-Inhalt über Beam (::after) und Spotlight (::before) */
.db-svc-card > *,
.card > *,
.service-card > *,
.feature-card > * {
  position: relative;
  z-index: 1;
}

.db-svc-icon {
  width: 48px; height: 48px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: var(--t);
}
.db-svc-card:hover .db-svc-icon { border-color: var(--cyan); }

.db-svc-card h3 { font-size: 20px; font-weight: 600; color: var(--white) !important; }
.db-svc-card p  { font-size: 15px; color: var(--text-2) !important; line-height: 1.7; flex: 1; }

.db-svc-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan) !important;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: var(--t);
  text-decoration: none !important;
}
.db-svc-link:hover { gap: .8rem; color: var(--cyan-hover) !important; }

/* ============================================================
   QUESTIONNAIRE
============================================================ */
.db-questions {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.db-questions-head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 60px;
}
.db-questions-head p { color: var(--text-2); font-size: 18px; margin-top: 1rem; }

.db-q-list {
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

.db-q-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--bg-card);
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border);
  transition: var(--t);
  opacity: 0;
  transform: translateX(-24px);
}
.db-q-item:last-child { border-bottom: none; }
.db-q-item.visible    { opacity: 1; transform: translateX(0); }
.db-q-item:hover      { background: var(--bg-card-h); }

.db-q-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(220,184,142,.2);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2rem;
  font-family: var(--font-h);
}

.db-q-text {
  font-size: 16px;
  color: var(--text-2) !important;
  font-weight: 400;
  line-height: 1.6;
  font-family: var(--font-b);
}

.db-q-close {
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 2.5rem;
  max-width: 780px;
  margin: 2rem auto 0;
  transition: var(--t);
}
.db-q-close:hover { border-color: var(--cyan); }
.db-q-close p { font-size: 18px; font-weight: 600; color: var(--white) !important; margin-bottom: 1.5rem; }

/* ============================================================
   ÉTAPES
============================================================ */
.db-etapes {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.db-etapes-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.db-etapes-head p { color: var(--text-2); margin-top: 1rem; font-size: 18px; }

.db-etapes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.db-etape-card {
  background: rgba(17, 17, 17, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(220, 184, 142, 0.18) !important;
  border-radius: 20px !important;
  padding: 40px !important;
  position: relative;
  overflow: hidden;
  transition: var(--t);
  isolation: isolate;
  /* Statischer Cyan-Glow — identisch zu Service-Karten */
  box-shadow: 0 0 0 0 transparent, 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(220, 184, 142, 0.08) !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.db-etape-card:hover {
  background: rgba(20, 20, 20, 0.97) !important;
  border-color: rgba(220, 184, 142, 0.35) !important;
  transform: translateY(-4px);
  z-index: 2;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(220, 184, 142, 0.18) !important;
}

.db-etape-n {
  font-size: 72px;
  font-weight: 800;
  color: rgba(220,184,142,.06);
  position: absolute;
  top: .5rem; right: 1rem;
  line-height: 1;
  pointer-events: none;
  font-family: var(--font-h);
}

.db-etape-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(220,184,142,.3);
  padding: .25rem .75rem;
  border-radius: var(--r);
  margin-bottom: 1rem;
  font-family: var(--font-b);
  transition: var(--t);
}
.db-etape-card:hover .db-etape-badge { border-color: var(--cyan); }

.db-etape-card h3 { font-size: 20px; margin-bottom: .75rem; color: var(--white) !important; }
.db-etape-card p  { font-size: 15px; color: var(--text-2) !important; line-height: 1.6; }

/* ============================================================
   TESTIMONIALS
============================================================ */
.db-testimonials {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.db-testi-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.db-testi-head p { color: var(--text-2); margin-top: 1rem; }

.db-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.db-testi-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  padding: 40px !important;
  display: flex;
  flex-direction: column;
  transition: var(--t);
}
.db-testi-card:hover {
  background: var(--bg-card-h) !important;
  border-color: var(--border-h) !important;
}

.db-testi-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1.5rem;
  color: var(--cyan);
  font-size: 1rem;
}

.db-testi-quote,
.testimonial-text {
  font-size: 15px !important;
  color: var(--text-2) !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  flex: 1;
  margin-bottom: 1.5rem;
  font-family: var(--font-b) !important;
}
.db-testi-quote::before {
  content: '"';
  font-size: 60px;
  line-height: .5;
  color: var(--cyan);
  display: block;
  margin-bottom: 1.2rem;
  font-family: Georgia, serif;
  font-style: normal;
  opacity: .8;
}

.db-testi-result {
  display: inline-block;
  background: rgba(220,184,142,.08);
  border: 1px solid rgba(220,184,142,.2);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: var(--r);
  margin-bottom: 1.2rem;
  font-family: var(--font-b);
}

.db-testi-author {
  display: flex;
  align-items: center;
  gap: .9rem;
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
  margin-top: auto;
}

.db-testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-2);
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font-h);
}
.db-testi-avatar img { width: 100%; height: 100%; object-fit: cover; }

.db-testi-info .name,
.testimonial-name { font-weight: 600; font-size: 14px; color: var(--white) !important; font-family: var(--font-b); }
.db-testi-info .role,
.testimonial-title { font-size: 13px; color: var(--cyan) !important; font-family: var(--font-b); font-size: 13px; }

/* ============================================================
   Q&A / ACCORDION
============================================================ */
.db-qa {
  background: #050505;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Subtiles diagonales Linien-Muster — reines CSS, kein Foto */
.db-qa::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(220,184,142,0.03) 0px,
      rgba(220,184,142,0.03) 1px,
      transparent 1px,
      transparent 44px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(220,184,142,0.02) 0px,
      rgba(220,184,142,0.02) 1px,
      transparent 1px,
      transparent 44px
    );
  z-index: 0;
  pointer-events: none;
}

/* Alle direkten Kinder der Q&A-Sektion über dem Overlay */
.db-qa > .container {
  position: relative;
  z-index: 1;
}

.db-qa-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 60px;
}
.db-qa-head p { color: var(--text-2); margin-top: 1rem; }

.db-accordion {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.db-acc-item,
.faq-item,
.accordion-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  transition: border-color 0.3s ease, background 0.3s ease;
  position: relative;
}
/* Letztes Item: kein unterer Trennstrich */
.db-acc-item:last-child,
.faq-item:last-child { border-bottom: none !important; }

/* Gold-Akzentlinie links bei geöffnetem Item */
.db-acc-item.active {
  background: rgba(220,184,142,0.03) !important;
  border-bottom-color: rgba(220,184,142,0.15) !important;
}
.db-acc-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cyan);
  border-radius: 0 2px 2px 0;
}

.db-acc-trigger,
.faq-question,
.accordion-title {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.5rem 1.75rem 1.5rem 1.5rem;
  background: none;
  color: rgba(255,255,255,0.72) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: left;
  gap: 1rem;
  transition: color 0.25s ease, padding-left 0.25s ease;
  font-family: var(--font-b) !important;
  cursor: pointer;
  border: none;
  line-height: 1.5;
}
.db-acc-trigger:hover,
.faq-question:hover {
  color: var(--white) !important;
  padding-left: 1.75rem;
}
.db-acc-item.active .db-acc-trigger {
  color: var(--white) !important;
  font-weight: 600;
  padding-left: 1.75rem;
}

.db-acc-icon,
.faq-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(220,184,142,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cyan) !important;
  font-size: 16px;
  line-height: 1;
  transition: all 0.3s ease;
}
.db-acc-item.active .db-acc-icon {
  background: rgba(220,184,142,0.12);
  color: var(--cyan) !important;
  border-color: rgba(220,184,142,0.5);
  transform: rotate(45deg);
}

.db-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(0.4,0,0.2,1);
}
.db-acc-body-inner { padding: 0 1.75rem 1.75rem 1.75rem; }
.db-acc-body-inner p,
.faq-answer,
.accordion-content {
  font-size: 15px !important;
  color: var(--text-2) !important;
  line-height: 1.75;
  margin: 0;
  font-family: var(--font-b) !important;
}

/* ============================================================
   CTA BAND
============================================================ */
.db-cta-band {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.db-cta-band::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(220,184,142,.05) 0%, transparent 65%);
  pointer-events: none;
}
.db-cta-band h2 { margin-bottom: 1rem; }
.db-cta-band > .container > p {
  font-size: 18px;
  color: var(--text-2);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}
.db-cta-band-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   FOOTER
============================================================ */
footer,
.site-footer,
#colophon,
.db-footer {
  background: var(--bg-footer) !important;
  border-top: 1px solid var(--border) !important;
  padding: 60px 0 40px !important;
}

.db-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}

.db-footer-brand p,
footer p,
.footer-text {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  max-width: 270px;
  margin: 1.2rem 0;
  line-height: 1.7;
  font-family: var(--font-b) !important;
}

.db-footer-socials {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}
.db-footer-social {
  width: 34px; height: 34px;
  border-radius: var(--r);
  background: transparent;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: var(--t);
}
.db-footer-social:hover {
  border-color: var(--cyan);
  color: var(--cyan) !important;
}

.db-footer-col h4 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: var(--white) !important;
  margin-bottom: 1.2rem;
  font-family: var(--font-b) !important;
}
.db-footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
.db-footer-col ul li a,
footer a,
.site-footer a {
  font-size: 14px !important;
  color: var(--text-2) !important;
  transition: var(--t);
  font-family: var(--font-b) !important;
  text-decoration: none !important;
}
.db-footer-col ul li a:hover,
footer a:hover,
.site-footer a:hover { color: var(--cyan) !important; padding-left: 4px; }

.db-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.db-footer-copy { font-size: 13px; color: var(--text-muted); font-family: var(--font-b); }
.db-footer-legal { display: flex; gap: 1.5rem; }
.db-footer-legal a { font-size: 13px; color: var(--text-muted) !important; }
.db-footer-legal a:hover { color: var(--cyan) !important; }

/* ============================================================
   INPUTS & FORMS
============================================================ */
input, textarea, select {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--white) !important;
  border-radius: var(--r) !important;
  padding: 14px 18px !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  transition: var(--t);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--cyan-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* ============================================================
   SCROLL ANIMATIONS
============================================================ */
.fade-up,
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-up.visible,
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.fade-up.d1 { transition-delay: .1s; }
.fade-up.d2 { transition-delay: .2s; }
.fade-up.d3 { transition-delay: .3s; }
.fade-up.d4 { transition-delay: .4s; }

/* ============================================================
   RESPONSIVE — TABLET ≤ 1024px
============================================================ */
@media (max-width:1024px) {
  .nav-container { padding: 0 20px !important; }
  .db-services-grid  { grid-template-columns: 1fr; }
  .db-etapes-grid    { grid-template-columns: repeat(2, 1fr); }
  /* stats blijft 4 kolommen tot mobile */
  .db-footer-grid    { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ============================================================
   RESPONSIVE — MOBILE ≤ 768px
============================================================ */
@media (max-width:768px) {
  /* Nav: Floating Pill Mobile */
  header, .site-header, #masthead, .db-nav {
    padding: 12px 14px 0 !important;
  }
  .nav-container {
    border-radius: 12px !important;
    padding: 0 16px !important;
    height: 56px !important;
  }

  .db-nav-links,
  .db-nav .btn { display: none !important; }
  .db-hamburger { display: flex; }

  section.db-section { padding: 60px 0 !important; }
  .container { padding: 0 20px !important; }

  /* Hero-Responsive-Regeln sind im Hero-Block (900px/600px/380px) abgedeckt */

  .db-etapes-grid    { grid-template-columns: 1fr; }
  .db-stats-grid     { grid-template-columns: 1fr 1fr; }
  .db-footer-grid    { grid-template-columns: 1fr; }
  .db-footer-bottom  { flex-direction: column; text-align: center; }

  .db-svc-card, .db-etape-card { padding: 28px !important; }

  .db-logo-svg-wrap { height: 38px; }
  .db-logo-svg-wrap svg { height: 38px !important; }
  .db-logo-image,
  .custom-logo-link img { height: 38px !important; }
}

@media (max-width:480px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
  .btn-xl { padding: 14px 24px; font-size: 13px; }
  .db-stats-grid { grid-template-columns: 1fr; }
  .db-stats-grid .db-stat-card { border-right: none !important; border-top: 1px solid var(--border); }
  .db-stats-grid .db-stat-card:first-child { border-top: none; }
}

/* ============================================================
   TESTIMONIAL KARTEN MIT HINTERGRUNDBILD
============================================================ */

/* Container */
.testimonial-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  border: 1px solid #2a2a2a !important;
  min-height: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: var(--bg-card) !important;
  transition: var(--t) !important;
}
.testimonial-card:hover {
  border-color: rgba(220,184,142,.35) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.6) !important;
  transform: translateY(-4px);
}

/* Karte 3 ohne Bild — dunkler Hintergrund */
.testimonial-card--plain {
  background: var(--bg-card) !important;
  justify-content: flex-end !important;
}
.testimonial-card--plain .testimonial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Hintergrundbild füllt ganze Karte */
.testimonial-bg-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.testimonial-bg-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: brightness(0.55) !important;
  display: block !important;
}

/* Gradient-Overlay von unten */
.testimonial-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.92) 100%
  ) !important;
  z-index: 1 !important;
}

/* Content über dem Bild */
.testimonial-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 32px !important;
}

/* Sterne */
.testimonial-stars {
  color: var(--cyan) !important;
  font-size: 18px !important;
  margin-bottom: 12px !important;
  letter-spacing: 4px !important;
  display: block;
}

/* Großes Anführungszeichen */
.testimonial-quote {
  color: var(--cyan) !important;
  font-size: 52px !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
  font-family: Georgia, serif !important;
  display: block;
  opacity: .9;
}

/* Zitat-Text */
.testimonial-text {
  color: #e0e0e0 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-style: italic !important;
  margin-bottom: 20px !important;
  font-family: var(--font-b) !important;
}

/* Ergebnis-Badge */
.testimonial-result-badge {
  display: inline-block !important;
  background: transparent !important;
  border: 1px solid var(--cyan) !important;
  color: var(--cyan) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  padding: 6px 14px !important;
  border-radius: var(--r) !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  font-family: var(--font-b) !important;
}

/* Autor-Bereich */
.testimonial-author {
  border-top: 1px solid rgba(255,255,255,.15) !important;
  padding-top: 16px !important;
  margin-top: 0 !important;
}
.testimonial-name {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 4px !important;
  font-family: var(--font-b) !important;
}
.testimonial-title {
  color: var(--cyan) !important;
  font-size: 13px !important;
  font-family: var(--font-b) !important;
}

/* Mobile */
@media (max-width:1024px) {
  .db-testi-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .testimonial-card { min-height: 400px !important; }
}
@media (max-width:768px) {
  .testimonial-card { min-height: 360px !important; }
}

/* ============================================================
   ABOUT / STORY SEKTION
============================================================ */
.db-story {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.db-story-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.db-story-text h2 { margin-bottom: 1.5rem; }
.db-story-text p  { font-size: 16px; line-height: 1.8; }

.db-story-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.db-story-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.db-story-stat strong {
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  font-family: var(--font-h);
  line-height: 1;
}
.db-story-stat span {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-b);
}

.db-story-img-wrap {
  position: relative;
}
.story-image {
  width: 100% !important;
  max-width: 500px !important;
  height: 600px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: var(--r-card) !important;
  border: 1px solid var(--border) !important;
  display: block !important;
  margin-left: auto;
  transition: var(--t);
}
.db-story-img-wrap:hover .story-image {
  border-color: rgba(220,184,142,.35);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}

@media (max-width:1024px) {
  .db-story-inner { grid-template-columns: 1fr; gap: 3rem; }
  .story-image { max-width: 100% !important; height: 400px !important; margin: 0 auto; }
}
@media (max-width:768px) {
  .story-image { height: 280px !important; }
  .db-story-stats { gap: 1.5rem; }
}

/* ============================================================
   VISUAL STRIP — bild4.jpg
============================================================ */
.db-visual-strip {
  position: relative;
  overflow: hidden;
  max-height: 420px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.deco-image {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
  filter: brightness(0.45) contrast(1.1) !important;
}

.db-visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
  background: radial-gradient(ellipse at center, rgba(220,184,142,.06) 0%, transparent 65%);
}

.db-visual-text {
  font-family: var(--font-h) !important;
  font-size: clamp(22px, 3.5vw, 40px) !important;
  font-weight: 800 !important;
  color: var(--white) !important;
  line-height: 1.2;
  max-width: 720px;
  letter-spacing: -.02em;
}

@media (max-width:768px) {
  .deco-image { height: 320px !important; }
  .db-visual-strip { max-height: 320px; }
}

/* ============================================================
   EFFEKT 1: SPOTLIGHT GLOW KARTEN
   Gold-Lichtfleck folgt der Maus; Position via JS --mouse-x/y
============================================================ */

/* Karten brauchen position:relative für das ::before */
.db-svc-card,
.db-testi-card,
.db-etape-card,
.db-stat-card,
.db-acc-item,
.db-q-close,
.card,
.service-card,
.feature-card,
.testimonial-card,
.social-card {
  position: relative;
  overflow: hidden;
}

/* Glow-Pseudo-Element — zentriert auf --mouse-x / --mouse-y */
.db-svc-card::before,
.db-testi-card::before,
.db-etape-card::before,
.db-stat-card::before,
.db-acc-item::before,
.db-q-close::before,
.card::before,
.service-card::before,
.feature-card::before,
.testimonial-card::before,
.social-card::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(220, 184, 142, 0.13) 0%,
    rgba(220, 184, 142, 0.05) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  left: var(--mouse-x, 50%);
  top:  var(--mouse-y, 50%);
  z-index: 0;
  will-change: left, top, opacity;
}

/* Glow sichtbar machen beim Hover */
.db-svc-card:hover::before,
.db-testi-card:hover::before,
.db-etape-card:hover::before,
.db-stat-card:hover::before,
.db-acc-item:hover::before,
.db-q-close:hover::before,
.card:hover::before,
.service-card:hover::before,
.feature-card:hover::before,
.testimonial-card:hover::before,
.social-card:hover::before {
  opacity: 1;
}

/* Spotlight-Effekt auf Service- und Team-Karten deaktiviert — statisches Design */
.db-svc-card::before,
.db-svc-card::after,
.team-card::before,
.team-card::after { display: none !important; }

/* Hover-Rand Gold + leichter Schatten */
.db-svc-card:hover,
.db-testi-card:hover,
.db-etape-card:hover,
.db-stat-card:hover,
.card:hover,
.service-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.social-card:hover {
  border-color: rgba(220, 184, 142, 0.35) !important;
  box-shadow: 0 8px 30px rgba(220, 184, 142, 0.08) !important;
}

/* Karten-Inhalt immer über dem Glow */
.db-svc-card > *,
.db-testi-card > *,
.db-etape-card > *,
.db-stat-card > *,
.db-acc-item > *,
.db-q-close > *,
.card > *,
.service-card > *,
.feature-card > *,
.testimonial-card > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   EFFEKT 2: NEON FLOW — Hero-Hintergrund
============================================================ */

/* Keyframes */
@keyframes neonFlow {
  0%   { transform: translateY(110vh) rotate(45deg); opacity: 0; }
  8%   { opacity: .6; }
  92%  { opacity: .6; }
  100% { transform: translateY(-110vh) rotate(45deg); opacity: 0; }
}

@keyframes neonPulse {
  0%,100% { opacity: .1;  transform: scale(1); }
  50%      { opacity: .28; transform: scale(1.05); }
}

/* Container — absolute über Hero-Inhalt */
.neon-flow-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Hero-Content über dem Hintergrund */
.db-hero-section > *:not(.db-hero-section::before) {
  position: relative;
  z-index: 1;
}

/* Neon-Linien */
.neon-line {
  position: absolute;
  width: 1px;
  height: 45%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #dcb88e 30%,
    #e8c9a0 50%,
    #dcb88e 70%,
    transparent 100%
  );
  animation: neonFlow linear infinite;
  will-change: transform, opacity;
}

.neon-line:nth-child(1) { left: 12%; animation-duration:  8s; animation-delay:  0s;   opacity: .50; }
.neon-line:nth-child(2) { left: 32%; animation-duration: 12s; animation-delay:  2.5s; opacity: .28; height: 60%; }
.neon-line:nth-child(3) { left: 58%; animation-duration:  9s; animation-delay:  5s;   opacity: .40; width: 2px; }
.neon-line:nth-child(4) { left: 78%; animation-duration: 11s; animation-delay:  1s;   opacity: .20; height: 55%; }
.neon-line:nth-child(5) { left: 91%; animation-duration:  7s; animation-delay:  3.5s; opacity: .32; }

/* Pulsierende Kreise */
.neon-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(220, 184, 142, 0.14);
  pointer-events: none;
  animation: neonPulse ease-in-out infinite;
}

.neon-circle:nth-child(6) {
  width: 420px; height: 420px;
  bottom: -160px; right: -110px;
  animation-duration: 6s; animation-delay: 0s;
}
.neon-circle:nth-child(7) {
  width: 640px; height: 640px;
  bottom: -280px; right: -220px;
  border-color: rgba(220, 184, 142, 0.07);
  animation-duration: 8s; animation-delay: 2s;
}
.neon-circle:nth-child(8) {
  width: 220px; height: 220px;
  top: 40px; left: -60px;
  border-color: rgba(220, 184, 142, 0.10);
  animation-duration: 5s; animation-delay: 1s;
}

/* Mobile: weniger Linien für Performance */
@media (max-width: 768px) {
  .neon-line:nth-child(2),
  .neon-line:nth-child(4),
  .neon-line:nth-child(5),
  .neon-circle:nth-child(7) { display: none; }
}

/* Reduced-motion: alles ausblenden */
@media (prefers-reduced-motion: reduce) {
  .neon-line,
  .neon-circle { display: none !important; }
}

/* ============================================================
   STATS — Responsive Grid
============================================================ */
.db-stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 768px) {
  .db-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .db-stat-card:nth-child(2) { border-right: none !important; }
  .db-stat-card:nth-child(n+3) { border-top: 1px solid var(--border) !important; }
}
@media (max-width: 480px) {
  .db-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* .db-hero-proof wurde in v4.5.0 entfernt (Logo-Bar ersetzt die Proof-Bar) */

/* ============================================================
   QUESTIONNAIRE — Karten-Grid
============================================================ */
.questions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin-top: 48px !important;
}

.question-card {
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  padding: 32px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.question-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #dcb88e, transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.question-card:hover {
  border-color: #dcb88e !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(220,184,142,0.10) !important;
}

.question-card:hover::before { opacity: 1 !important; }

.question-number {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: var(--cyan) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  font-family: var(--font-h) !important;
  display: block;
}

.question-icon {
  font-size: 18px !important;
  color: var(--cyan) !important;
  margin-bottom: 16px !important;
  opacity: 0.55 !important;
  display: block;
}

.question-text {
  font-size: 16px !important;
  color: #cccccc !important;
  line-height: 1.6 !important;
  font-family: var(--font-b) !important;
  margin-bottom: 24px !important;
}

.question-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.indicator-no {
  font-size: 11px !important;
  color: #666666 !important;
  letter-spacing: 2px !important;
  font-family: var(--font-b) !important;
  white-space: nowrap;
}

.indicator-yes {
  font-size: 11px !important;
  color: var(--cyan) !important;
  letter-spacing: 2px !important;
  font-family: var(--font-b) !important;
  white-space: nowrap;
}

.indicator-line {
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #333333, var(--cyan)) !important;
}

@media (max-width: 768px) {
  .questions-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   CTA BAND — Solo-Button
============================================================ */
.db-cta-band-btns {
  justify-content: center !important;
}

.db-cta-solo {
  max-width: 560px !important;
  width: auto !important;
  justify-content: center !important;
}

/* ============================================================
   SERVICES — Karten-Nummern
============================================================ */
.service-number {
  font-size: 56px !important;
  font-weight: 800 !important;
  color: transparent !important;
  -webkit-text-stroke: 1px #2a2a2a !important;
  font-family: var(--font-h) !important;
  line-height: 1 !important;
  margin-bottom: 20px !important;
  transition: -webkit-text-stroke 0.3s ease !important;
  display: block;
}

.db-svc-card:hover .service-number {
  -webkit-text-stroke: 1px var(--cyan) !important;
}

.service-line {
  width: 40px !important;
  height: 2px !important;
  background: var(--cyan) !important;
  margin-bottom: 24px !important;
  transition: width 0.3s ease !important;
  display: block;
}

.db-svc-card:hover .service-line { width: 80px !important; }

.service-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 16px !important;
  font-family: var(--font-h) !important;
}

.service-text {
  font-size: 15px !important;
  color: var(--text-2) !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
  flex: 1 !important;
}

.service-link {
  letter-spacing: 1px !important;
  transition: letter-spacing 0.3s ease !important;
}

.db-svc-card:hover .service-link { letter-spacing: 2px !important; }

/* db-svc-icon — SVG Icons */
.db-svc-icon { display: block !important; color: var(--cyan) !important; }

/* ============================================================
   EXIT INTENT POPUP
============================================================ */
.exit-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .3s ease, visibility .3s ease !important;
  padding: 20px !important;
}

.exit-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes popupIn {
  from { transform: scale(.9) translateY(20px); opacity: 0; }
  to   { transform: scale(1)  translateY(0);    opacity: 1; }
}

.exit-popup {
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 16px !important;
  padding: 48px !important;
  max-width: 560px !important;
  width: 100% !important;
  position: relative !important;
  text-align: center !important;
  animation: popupIn .4s ease !important;
}

/* Gold-Linie oben */
.exit-popup::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #dcb88e, transparent) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Close-Button */
.exit-close {
  position: absolute !important;
  top: 16px !important; right: 16px !important;
  background: transparent !important;
  border: 1px solid #2a2a2a !important;
  color: #666666 !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .2s ease !important;
  line-height: 1 !important;
}
.exit-close:hover {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Label */
.exit-label {
  font-size: 11px !important;
  letter-spacing: 4px !important;
  color: #dcb88e !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  font-family: var(--font-h) !important;
}

/* Titel */
.exit-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
  font-family: var(--font-h) !important;
  letter-spacing: -.02em !important;
}
.exit-title-accent { color: #dcb88e !important; }

/* Fließtext */
.exit-text {
  font-size: 16px !important;
  color: #999999 !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
  font-family: var(--font-b) !important;
}
.exit-text strong { color: #ffffff !important; }

/* Vorteils-Liste */
.exit-benefits {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  text-align: left !important;
}
.exit-benefit {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  color: #cccccc !important;
  font-family: var(--font-b) !important;
}
.exit-check {
  color: #dcb88e !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* CTA-Button */
.exit-cta-btn {
  display: block !important;
  background: #dcb88e !important;
  color: #1A1A2E !important;
  padding: 18px 32px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  transition: background .3s ease, transform .3s ease !important;
}
.exit-cta-btn:hover {
  background: #e8c9a0 !important;
  color: #1A1A2E !important;
  transform: translateY(-2px) !important;
}

/* Ablehnen-Link */
.exit-decline {
  font-size: 12px !important;
  color: #444444 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  margin-bottom: 24px !important;
  transition: color .2s ease !important;
  font-family: var(--font-b) !important;
  display: block !important;
}
.exit-decline:hover { color: #666666 !important; }

/* Mobile */
@media (max-width: 768px) {
  .exit-popup { padding: 32px 24px !important; }
  .exit-title { font-size: 26px !important; }
}

/* ============================================================
   SCROLLBAR + TEXT SELECTION
============================================================ */
::selection,
::-moz-selection {
  background: rgba(220, 184, 142, 0.25) !important;
  color: #ffffff !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #1A1A2E;
}
::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #dcb88e;
}

/* ============================================================
   SCROLL ANIMATIONS — fade-up
============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.fade-up.d1 { transition-delay: 0.10s; }
.fade-up.d2 { transition-delay: 0.20s; }
.fade-up.d3 { transition-delay: 0.30s; }
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   HERO VIDEO
============================================================ */
.db-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-card);
  display: block;
}

/* ============================================================
   STICKY MOBILE CTA
============================================================ */
.db-sticky-cta {
  display: none;
  visibility: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 12px 16px;
  background: transparent;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
}

.db-sticky-cta.visible {
  visibility: visible;
  background: linear-gradient(to top, #1A1A2E 70%, transparent);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.db-sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: #dcb88e;
  color: #1A1A2E;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: var(--r);
  box-shadow: 0 4px 20px rgba(220,184,142,0.35);
  transition: background 0.3s ease, transform 0.2s ease;
}
.db-sticky-cta-btn:hover {
  background: #e8c9a0;
  transform: translateY(-1px);
}

@media (min-width: 769px) {
  .db-sticky-cta { display: none !important; }
}
@media (max-width: 768px) {
  .db-sticky-cta { display: block; }
}

/* ============================================================
   MOBILE OPTIMISATION — max-width: 768px
============================================================ */
@media (max-width: 768px) {

  /* Navigation */
  .db-nav-links { display: none !important; }
  .db-nav .btn  { display: none !important; }
  .db-hamburger { display: flex !important; }
  .db-nav-inner { padding: 0 !important; }

  /* Hero v4.5.0 — responsive Regeln sind im Hero-Block definiert */
  .db-hero-eyebrow { font-size: 10px !important; letter-spacing: 2px !important; }

  .btn-xl {
    font-size: 13px !important;
    padding: 14px 20px !important;
    letter-spacing: 1.5px !important;
  }

  /* Services */
  .db-services-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Story */
  .db-story-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .story-image { height: 260px !important; }
  .db-story-stats { flex-wrap: wrap !important; gap: 1.5rem !important; }

  /* Étapes */
  .db-etapes-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Testimonials */
  .db-testi-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .testimonial-card { min-height: 400px !important; }

  /* Q&A accordion */
  .db-acc-trigger { font-size: 15px !important; padding: 16px 20px !important; }

  /* CTA band */
  .db-cta-band { padding: 60px 0 100px !important; }
  .db-cta-band h2 { font-size: clamp(22px, 6vw, 30px) !important; }
  .db-cta-solo { max-width: 100% !important; font-size: 13px !important; }

  /* Section headings */
  .db-services-head h2,
  .db-questions-head h2,
  .db-etapes-head h2,
  .db-testi-head h2,
  .db-qa-head h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  /* Sections padding */
  .db-section { padding: 60px 0 !important; }
  .db-section-sm { padding: 40px 0 !important; }

  /* Container */
  .container { padding: 0 20px !important; }

  /* Visual strip */
  .deco-image       { height: 280px !important; }
  .db-visual-strip  { max-height: 280px !important; }
  .db-visual-text   { font-size: clamp(18px, 5vw, 26px) !important; }

  /* Footer */
  .db-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .db-footer-bottom {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }

  /* Exit popup */
  .exit-popup { padding: 28px 20px !important; margin: 10px !important; }
  .exit-title { font-size: 22px !important; }

  /* Questions grid */
  .questions-grid { grid-template-columns: 1fr !important; }

}

/* Hero 480px: in Hero-Block-Responsive abgedeckt */

/* ============================================================
   FIX 1: OVERFLOW-X KOMPLETT VERHINDERN — MOBILE
============================================================ */
@media (max-width: 768px) {
  html, body,
  .site, #page,
  .site-content,
  main, article,
  .container,
  .wp-block-group {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  img, video, iframe, embed, object {
    max-width: 100% !important;
  }
}

/* ============================================================
   FIX 2: HERO TEXT — KEIN ÜBERLAUF (v4.5.0)
============================================================ */
@media (max-width: 768px) {
  .db-hero-h1 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

  .db-hero-eyebrow {
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  .db-hero-sub {
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

/* ============================================================
   FIX 3: HERO PROOF BAR — 2×2 GRID AUF SEHR KLEINEN SCREENS
============================================================ */
@media (max-width: 480px) {
  .db-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-wrap: unset !important;
    overflow-x: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .db-hero-proof-divider {
    display: none !important;
  }

  .db-hero-proof-item {
    padding: 18px 12px !important;
    border: 1px solid #1a1a1a !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .db-hero-proof-item strong {
    font-size: 20px !important;
    display: block !important;
  }

  .db-hero-proof-item span {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================
   FIX 5: VISUAL STRIP "VOTRE TRANSFORMATION" — MOBILE
============================================================ */
@media (max-width: 768px) {
  .db-visual-strip {
    min-height: 300px !important;
    max-height: 350px !important;
    overflow: hidden !important;
  }

  .deco-image {
    height: 350px !important;
    object-position: center center !important;
    background-attachment: scroll !important;
  }

  .db-visual-overlay {
    padding: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.4) 0%,
      rgba(0,0,0,0.8) 100%
    ) !important;
  }

  .db-visual-text {
    font-size: clamp(18px, 5.5vw, 26px) !important;
    text-align: center !important;
    padding: 0 10px !important;
    max-width: 100% !important;
  }

  .db-visual-overlay .btn {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 12px !important;
    padding: 14px 16px !important;
    text-align: center !important;
  }
}

/* ============================================================
   FIX 8: LEERE BLÖCKE IM FOOTER VERBERGEN
============================================================ */
.db-footer span:empty,
.db-footer div:empty,
.db-footer p:empty {
  display: none !important;
}

/* Sticky CTA NIEMALS im Footer-Bereich */
footer .db-sticky-cta,
.db-footer .db-sticky-cta {
  display: none !important;
}

/* ============================================================
   FIX 9: UMFASSENDES MOBIL-PADDING — ALLE SEKTIONEN
============================================================ */
@media (max-width: 768px) {

  /* Buttons volle Breite auf Mobile */
  .btn-gold.btn-xl,
  .btn-gold.btn-lg,
  .db-cta-solo {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 16px 18px !important;
    letter-spacing: 1px !important;
    box-sizing: border-box !important;
  }

  /* Story Stats kleiner */
  .db-story-stat strong { font-size: 24px !important; }
  .db-story-stat span   { font-size: 11px !important; }

  /* Étapes Karten */
  .db-etape-card {
    padding: 24px !important;
  }

  /* Testimonial-Karten höher auf Mobile */
  .testimonial-card {
    min-height: 480px !important;
  }

  /* Accordion Items */
  .db-acc-body-inner {
    padding: 0 20px 20px !important;
    font-size: 14px !important;
  }

  /* Footer Links klickbar */
  .db-footer-col ul li { margin-bottom: 8px !important; }
  .db-footer-col a {
    font-size: 15px !important;
    line-height: 1.8 !important;
    display: inline-block !important;
    padding: 4px 0 !important;
  }

  /* Footer Socials */
  .db-footer-socials {
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }
  .db-footer-social {
    width: 40px !important;
    height: 40px !important;
  }

  /* Footer Bottom */
  .db-footer-legal {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .db-footer-legal a {
    font-size: 12px !important;
  }

  /* Chip Labels */
  .chip { font-size: 10px !important; letter-spacing: 2px !important; }

  /* Hero Social Proof Text */
  .db-hero-social-proof { font-size: 9px !important; }

  /* Service Karten */
  .db-svc-card { padding: 28px 20px !important; }
  .service-number { font-size: 44px !important; }
  .service-title  { font-size: 18px !important; }

  /* Q-Close */
  .db-q-close p { font-size: 14px !important; }
}

@media (max-width: 380px) {
  /* Hero-Klassen (380px) im Hero-Block definiert */
  .btn-gold.btn-xl       { font-size: 12px !important; padding: 14px 14px !important; }

  .db-services-head h2,
  .db-etapes-head h2,
  .db-testi-head h2,
  .db-qa-head h2         { font-size: 20px !important; }
}

/* ============================================================
   FIX 1: HERO TITEL — DESKTOP / MOBILE VERSIONEN
============================================================ */
.hero-title-mobile  { display: none !important; }
.hero-title-desktop { display: block !important; }

@media (max-width: 768px) {
  .hero-title-desktop { display: none !important; }
  .hero-title-mobile  {
    display: block !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    font-family: var(--font-h) !important;
    letter-spacing: -.02em !important;
    margin-bottom: 16px !important;
    word-break: break-word !important;
  }
  .hero-title-mobile em {
    color: #dcb88e !important;
    font-style: normal !important;
  }
}

/* ============================================================
   FIX 3: HERO CTA BUTTON — MOBILE GRÖSSE
============================================================ */
@media (max-width: 768px) {
  .db-hero-checklist-col .btn-gold,
  .db-hero-checklist-col .btn-xl {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    padding: 14px 16px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   FIX 4: TRANSFORMATION SECTION — PARALLAX BG
============================================================ */
.transformation-section {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  min-height: 420px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.transformation-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.58) !important;
  z-index: 0 !important;
}

.transformation-content {
  position: relative !important;
  z-index: 1 !important;
  padding: 80px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2rem !important;
}

.transformation-content .db-visual-text {
  font-size: clamp(26px, 4vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: var(--font-h) !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
  max-width: 800px !important;
}

@media (max-width: 768px) {
  .transformation-section {
    background-attachment: scroll !important;
    min-height: 360px !important;
  }
  .transformation-content {
    padding: 48px 20px !important;
    gap: 1.5rem !important;
  }
  .transformation-content .db-visual-text {
    font-size: clamp(20px, 6vw, 28px) !important;
  }
  .transformation-content .btn {
    width: 100% !important;
    max-width: 340px !important;
    font-size: 12px !important;
    padding: 14px 18px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ============================================================
   FIX 5: STORY/ABOUT SEKTION — DEZENTER BG AUF MOBILE
============================================================ */
@media (max-width: 768px) {
  .db-story {
    position: relative !important;
    overflow: hidden !important;
  }
  .db-story::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--story-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.07 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .db-story > .container {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Mini-Stats als 2×2 Grid */
  .db-story-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .db-story-stat {
    padding: 16px !important;
    background: #1A1A2E !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 8px !important;
    text-align: left !important;
    flex-direction: column !important;
  }
  .db-story-stat strong {
    font-size: 24px !important;
    display: block !important;
    margin-bottom: 4px !important;
  }
  .db-story-stat span {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
}

/* ============================================================
   FIX 6: HERO CHECKLIST — KEIN ABSCHNEIDEN AUF MOBILE
============================================================ */
@media (max-width: 768px) {
  .db-hero-checklist {
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }
  .db-hero-check-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding-right: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
  }
  .db-check-icon {
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    color: var(--cyan) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .db-hero-check-item span:last-child {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   FIX 7: HERO PROOF BAR — 2×2 GRID AUF MOBILE
============================================================ */
@media (max-width: 768px) {
  .db-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    flex-wrap: unset !important;
    overflow-x: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid #1a1a1a;
    border-left: 1px solid #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
  }
  .db-hero-proof-divider {
    display: none !important;
  }
  .db-hero-proof-item {
    padding: 18px 10px !important;
    border-right: 1px solid #1a1a1a !important;
    border-bottom: 1px solid #1a1a1a !important;
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .db-hero-proof-item strong {
    font-size: 22px !important;
    display: block !important;
    color: #ffffff !important;
  }
  .db-hero-proof-item span {
    font-size: 9px !important;
    letter-spacing: 1px !important;
    display: block !important;
    margin-top: 2px !important;
  }
}

/* ============================================================
   FIX 8: GLOBALES OVERFLOW — VERSCHÄRFT
============================================================ */
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {
  section, div, article, aside, nav, header, footer {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Exit-Popup von max-width-Regel ausnehmen */
  .exit-overlay,
  .exit-popup,
  .exit-popup * {
    max-width: initial !important;
  }
  .exit-popup { max-width: 560px !important; }

  img, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Video-Höhe explizit behalten */
  .db-hero-video { height: 100% !important; }
  .db-hero-video-wrap video { height: 220px !important; }
}

/* ============================================================
   FIX 1: HERO PROOF BAR — 2×2 GRID PROFESSIONELL
============================================================ */
@media (max-width: 768px) {
  .db-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 24px 0 0 !important;
    flex-wrap: unset !important;
  }
  .db-hero-proof-divider { display: none !important; }
  .db-hero-proof-item {
    padding: 24px 12px !important;
    text-align: center !important;
    background: #1A1A2E !important;
    border-right: 1px solid #2a2a2a !important;
    border-bottom: 1px solid #2a2a2a !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .db-hero-proof-item:nth-child(4n) { border-right: none !important; }
  .db-hero-proof-item:nth-child(4n-1) { border-right: none !important; }
  .db-hero-proof-item:nth-child(3),
  .db-hero-proof-item:nth-child(4) { border-bottom: none !important; }
  .db-hero-proof-item strong {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 6px !important;
    font-family: 'Roboto', sans-serif !important;
  }
  .db-hero-proof-item span {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    color: #666666 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.3 !important;
    display: block !important;
  }
}

/* ============================================================
   FIX 2: BILDER MIT ROTEN X AUF MOBILE AUSBLENDEN
============================================================ */
@media (max-width: 768px) {
  .db-story-img-wrap,
  .story-image {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .db-story-img-wrap,
  .story-image {
    display: block !important;
  }
}

/* ============================================================
   FIX 3: SERVICES GRID — 4 SPALTEN AUF DESKTOP
============================================================ */
@media (min-width: 769px) {
  .db-services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .db-services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ============================================================
   FIX 4: HIDE-ON-MOBILE KLASSE
============================================================ */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
  /* Leere Bereiche und Banner */
  section:empty,
  div.banner:empty,
  div.block:empty {
    display: none !important;
  }
}

/* ============================================================
   FIX 5: ÉTAPES SEKTION — DEZENTER HINTERGRUND
============================================================ */
.db-etapes {
  position: relative !important;
  overflow: hidden !important;
}
.db-etapes::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--etapes-bg) !important;
  background-size: cover !important;
  background-position: center right !important;
  opacity: 0.15 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.db-etapes > .container {
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width: 768px) {
  .db-etapes::before {
    opacity: 0.10 !important;
    background-position: center !important;
  }
}

/* ============================================================
   FIX 6: ÉTAPES KARTEN — PROFESSIONELL AUF MOBILE
============================================================ */
@media (max-width: 768px) {
  .db-etapes-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .db-etape-card {
    padding: 28px 24px !important;
    background: rgba(17, 17, 17, 0.95) !important;
    border: 1px solid rgba(220, 184, 142, 0.18) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(220, 184, 142, 0.08) !important;
  }
  /* Gold linke Border nur bei erster Karte */
  .db-etape-card::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: #dcb88e !important;
    border-radius: 12px 0 0 12px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }
  .db-etape-card:first-child::after {
    opacity: 1 !important;
  }
  .db-etape-n {
    font-size: 44px !important;
    font-weight: 800 !important;
    color: transparent !important;
    -webkit-text-stroke: 1px #2a2a2a !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
  }
  .db-etape-badge {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: #dcb88e !important;
    border: 1px solid rgba(220,184,142,0.4) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-bottom: 12px !important;
    background: rgba(220,184,142,0.05) !important;
  }
  .db-etape-card h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    letter-spacing: -.01em !important;
  }
  .db-etape-card p {
    font-size: 13px !important;
    color: #999999 !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   ABOUT — À PROPOS
============================================================ */
.about-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 100px 0 !important;
}
.about-bg-image {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  opacity: 0.07 !important;
  z-index: 0 !important;
}
.about-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.75) 60%, rgba(0,0,0,.4) 100%) !important;
  z-index: 1 !important;
}
.about-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 720px !important;
}
.about-content h2 {
  font-size: clamp(28px,4vw,42px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 24px !important;
  line-height: 1.2 !important;
}
.about-content p {
  font-size: 16px !important;
  color: #999999 !important;
  line-height: 1.8 !important;
  margin-bottom: 16px !important;
}
.about-stats {
  display: flex !important;
  gap: 40px !important;
  margin-top: 40px !important;
  padding-top: 40px !important;
  border-top: 1px solid #2a2a2a !important;
  flex-wrap: wrap !important;
}
.about-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.about-stat-number {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: var(--font-h) !important;
  line-height: 1 !important;
}
.about-stat-label {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: #666666 !important;
  text-transform: uppercase !important;
}
@media (max-width: 768px) {
  .about-section { padding: 70px 0 !important; }
  .about-content h2 { font-size: 26px !important; }
  .about-stats { gap: 20px !important; margin-top: 28px !important; padding-top: 28px !important; }
  .about-stat-number { font-size: 26px !important; }
  .about-bg-image { opacity: 0.05 !important; }
}

/* ============================================================
   TESTIMONIALS — Case Studies
============================================================ */
.testimonials-section { background: var(--bg) !important; }

.testimonial-case {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 60px !important;
  margin-bottom: 80px !important;
  padding-bottom: 80px !important;
  border-bottom: 1px solid #1a1a1a !important;
  align-items: start !important;
}
.testimonial-case:last-child { border-bottom: none !important; margin-bottom: 0 !important; }
.testimonial-case.reverse { direction: rtl !important; }
.testimonial-case.reverse > * { direction: ltr !important; }

.testimonial-case-img {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}
.testimonial-case-img img {
  width: 100% !important;
  height: 320px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
.testimonial-case-badge {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  background: #dcb88e !important;
  color: #1A1A2E !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  font-family: var(--font-h) !important;
}
.testimonial-case-quote p {
  font-size: 15px !important;
  color: #cccccc !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}
.testimonial-case-author strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.testimonial-case-author span {
  display: block !important;
  color: #dcb88e !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}
.testimonial-case-author .testimonial-stars {
  color: #dcb88e !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
}
.testimonial-case-block {
  padding: 18px 22px !important;
  margin-bottom: 10px !important;
  border-radius: 8px !important;
  border-left: 3px solid transparent !important;
}
.testimonial-case-block.problem { background: rgba(255,60,60,.05) !important; border-left-color: #ff4444 !important; }
.testimonial-case-block.goal    { background: rgba(220,184,142,.05) !important; border-left-color: #dcb88e !important; }
.testimonial-case-block.solution{ background: rgba(0,200,100,.05) !important; border-left-color: #00c864 !important; }
.testimonial-case-block h4 {
  font-size: 10px !important;
  letter-spacing: 3px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-family: var(--font-h) !important;
}
.testimonial-case-block.problem h4 { color: #ff6b6b !important; }
.testimonial-case-block.goal h4    { color: #dcb88e !important; }
.testimonial-case-block.solution h4{ color: #00c864 !important; }
.testimonial-case-block p {
  font-size: 13px !important;
  color: #999999 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.testimonial-case-results {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
  margin-top: 20px !important;
  padding: 20px 24px !important;
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
}
.result-item { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.result-number {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: var(--font-h) !important;
  line-height: 1 !important;
}
.result-label {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: #666666 !important;
  text-transform: uppercase !important;
}
.result-divider {
  width: 1px !important;
  height: 50px !important;
  background: #2a2a2a !important;
  flex-shrink: 0 !important;
}
@media (max-width: 768px) {
  .testimonial-case {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    direction: ltr !important;
  }
  .testimonial-case.reverse { direction: ltr !important; }
  .testimonial-case-img img { height: 240px !important; }
  .testimonial-case-results { gap: 16px !important; }
  .result-number { font-size: 26px !important; }
}

/* ============================================================
   TEAM
============================================================ */
/* Team-Section: reiner schwarzer Hintergrund */
.team-section {
    background-color: var(--bg) !important;
}

.team-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  margin-bottom: 70px !important;
  align-items: start !important;
}
.team-header-left h2 {
  font-size: clamp(26px,3.5vw,40px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  line-height: 1.2 !important;
}
.team-header-left p {
  font-size: 15px !important;
  color: #999999 !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
}
.team-quote {
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  border-left: 3px solid #dcb88e !important;
  border-radius: 12px !important;
  padding: 32px !important;
}
.team-quote p {
  font-size: 17px !important;
  color: #cccccc !important;
  font-style: italic !important;
  line-height: 1.75 !important;
  margin-bottom: 24px !important;
}
.team-quote-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.team-quote-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 2px solid #dcb88e !important;
  flex-shrink: 0 !important;
}
.team-quote-author strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.team-quote-author span {
  color: #dcb88e !important;
  font-size: 12px !important;
}
/* Team-Grid: 2 Karten oben (Driss + Oussama), 3 Karten unten.
   6-Spalten-Raster ermöglicht präzise Positionierung. */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px !important;
}
/* Reihe 1 — 2 Karten je 3 Spalten */
.team-card:nth-child(1) { grid-column: 1 / 4 !important; }
.team-card:nth-child(2) { grid-column: 4 / 7 !important; }
/* Reihe 2 — 3 Karten je 2 Spalten */
.team-card:nth-child(3) { grid-column: 1 / 3 !important; }
.team-card:nth-child(4) { grid-column: 3 / 5 !important; }
.team-card:nth-child(5) { grid-column: 5 / 7 !important; }
.team-card {
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color .3s ease, transform .3s ease !important;
  /* Safari-Fix: erzwingt Border-Radius-Clipping auf Mobilgeräten */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.team-card:hover {
  border-color: #dcb88e !important;
  /* Glow bewusst subtil gehalten — Textur soll sichtbar bleiben */
  box-shadow: 0 8px 32px rgba(220, 184, 142, 0.12), 0 2px 8px rgba(0,0,0,0.6) !important;
  transition: border-color .3s ease, box-shadow .3s ease !important;
}
.team-card-img { overflow: hidden !important; }
.team-card-img img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  filter: grayscale(25%) !important;
  transition: filter .3s ease !important;
}
.team-card:hover .team-card-img img {
  filter: grayscale(0%) !important;
}
.team-card-info { padding: 24px !important; }
.team-card-info h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}
.team-role {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: #dcb88e !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  font-family: var(--font-h) !important;
}
.team-card-info p {
  font-size: 13px !important;
  color: #666666 !important;
  line-height: 1.65 !important;
}
@media (max-width: 768px) {
  .team-header { grid-template-columns: 1fr !important; gap: 32px !important; margin-bottom: 40px !important; }

  /* Einspaltig stapeln + alle nth-child-Spalten-Zuweisungen zurücksetzen */
  .team-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .team-card:nth-child(1),
  .team-card:nth-child(2),
  .team-card:nth-child(3),
  .team-card:nth-child(4),
  .team-card:nth-child(5) { grid-column: auto !important; }

  .team-card-img img { height: 240px !important; }
}

/* Tablet 769–1024px: 6-Spalten-Raster funktioniert nativ, kein Override nötig.
   Karten werden schmaler aber bleiben korrekt 3+2 zentriert. */

/* ============================================================
   ACTION — CONTACT
============================================================ */
.action-section {
  background: #1A1A2E !important;
  overflow: hidden !important;
}
.action-inner {
  display: grid !important;
  grid-template-columns: 1fr 1.3fr !important;
  min-height: 620px !important;
  align-items: stretch !important;
}
.action-image {
  position: relative !important;
  overflow: hidden !important;
}
.action-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  min-height: 620px !important;
  filter: brightness(0.85) !important;
  transition: filter .4s ease !important;
}
.action-section:hover .action-image img { filter: brightness(0.95) !important; }
.action-content {
  background: #1A1A2E !important;
  padding: 80px 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}
.action-content h2 {
  font-size: clamp(26px,3.5vw,42px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 24px !important;
  margin-top: 12px !important;
}
.action-content p {
  font-size: 15px !important;
  color: #999999 !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
}
.action-urgency {
  font-size: 16px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 28px !important;
  margin-top: 8px !important;
}
.action-btn {
  margin-bottom: 24px !important;
  align-self: flex-start !important;
}
.action-trust {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.action-trust span {
  font-size: 12px !important;
  color: #C0BDB5 !important;
}
@media (max-width: 768px) {
  .action-inner { grid-template-columns: 1fr !important; min-height: unset !important; }
  .action-image img { min-height: 320px !important; height: 320px !important; }
  .action-content { padding: 40px 24px !important; }
  .action-content h2 { font-size: 26px !important; }
  .action-btn { width: 100% !important; justify-content: center !important; }
  .action-trust { gap: 12px !important; }
}

/* ============================================================
   FIX 5: FOOTER — EINHEITLICHE LINK-GESTALTUNG
============================================================ */
.db-footer a {
  color: #999999 !important;
  font-size: 14px !important;
  line-height: 2.2 !important;
  text-decoration: none !important;
  transition: color .25s ease !important;
  font-family: var(--font-b) !important;
}
.db-footer a:hover { color: #dcb88e !important; }
.db-footer a[href^="mailto"] {
  color: #999999 !important;
  word-break: break-all !important;
}

/* ============================================================
   TEAM SECTION — Hintergrund & Karten-Hover (v3.7)
   ============================================================ */

/* Sektion Basis — NUR position/overflow, kein background-Shorthand (würde background-image nullen) */
.team-section {
  position: relative !important;
  overflow: hidden !important;
}

/* Dezentes Gold-Glow in der Mitte */
.team-bg-effect {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 800px !important;
  height: 400px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(220, 184, 142, 0.04) 0%,
    transparent 70%
  ) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Dezentes Gitter-Muster */
.team-bg-grid {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(220, 184, 142, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 184, 142, 0.025) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Alle Team-Inhalte über dem Hintergrund */
.team-section .container,
.team-section .team-header,
.team-section .team-grid,
.team-section .team-quote {
  position: relative !important;
  z-index: 1 !important;
}

/* Team-Karten — Service-Stil: Gold-Border, 3D-Inset-Shadow, statischer Glow */
.team-card {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(17, 17, 17, 0.92) !important;
  border: 1px solid rgba(220, 184, 142, 0.18) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.05),
    inset -1px -1px 2px rgba(0, 0, 0, 0.50),
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(220, 184, 142, 0.08) !important;
}

/* Gold-Linie oben beim Hover (Pseudo-Element) */
.team-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #dcb88e, transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  z-index: 2 !important;
}

.team-card:hover {
  border-color: rgba(220, 184, 142, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2) !important;
  transition: box-shadow 0.3s ease !important;
}

.team-card:hover::before {
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .team-bg-grid {
    background-size: 40px 40px !important;
  }
  .team-bg-effect {
    width: 340px !important;
    height: 260px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: none !important;
  }
  .team-card::before {
    transition: none !important;
  }
}

/* ============================================================
   TRANSFORMATION SECTION — Mobile Fix (v3.8)
   background-attachment: fixed funktioniert auf iOS nicht
   ============================================================ */
@media (max-width: 768px) {
  /* Inline-div mit fixed background auf mobile → scroll */
  section[aria-label="Votre transformation"] div[aria-hidden="true"]:first-child {
    background-attachment: scroll !important;
  }
}

/* ============================================================
   TEAM GRID — 5 Karten, 2. Reihe zentriert (v3.9)
   Technik: 6-Spalten-Grid, jede Karte belegt 2 Spalten.
   Karte 4 startet an Spalte 2, Karte 5 an Spalte 4 → zentriert.
   ============================================================ */
@media (min-width: 769px) {
  .team-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }
  .team-grid .team-card {
    grid-column: span 2 !important;
  }
  /* 2. Reihe: Karte 4 und 5 zentriert */
  .team-grid .team-card:nth-child(4) {
    grid-column: 2 / span 2 !important;
  }
  .team-grid .team-card:nth-child(5) {
    grid-column: 4 / span 2 !important;
  }
}

/* ============================================================
   GLOBALE MOBILE FIXES — v3.9
   ============================================================ */

/* Globales Basis */
html, body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}
img, video, iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* ── Navigation Mobile ── */
@media (max-width: 768px) {
  .db-nav {
    padding: 10px 12px 0 !important;
  }
  .nav-container {
    height: 52px !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
  }
  .custom-logo-link img {
    height: 36px !important;
    width: auto !important;
  }
  .main-navigation ul {
    padding: 16px !important;
  }
  .main-navigation ul li a {
    font-size: 14px !important;
    padding: 12px 16px !important;
    line-height: 1.5 !important;
  }
}

/* ── Hero Mobile ── */
@media (max-width: 768px) {
  .db-hero,
  .db-hero-baulig {
    padding: 80px 20px 60px !important;
  }
  .hero-title-mobile {
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.3px !important;
    word-break: break-word !important;
    hyphens: none !important;
  }
  .db-hero-bold-sub {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .db-hero-eyebrow,
  .db-hero-note {
    font-size: 11px !important;
  }
  .db-hero-check-item {
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* ── Stats / Proof Bar Mobile ── */
@media (max-width: 768px) {
  .db-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  .db-hero-proof-item {
    padding: 20px 12px !important;
    text-align: center !important;
    border-right: 0.5px solid #1a1a1a !important;
    border-bottom: 0.5px solid #1a1a1a !important;
  }
  .db-hero-proof-item:nth-child(even) {
    border-right: none !important;
  }
  .db-hero-proof-item:nth-child(3),
  .db-hero-proof-item:nth-child(4) {
    border-bottom: none !important;
  }
  .db-hero-proof-item strong {
    font-size: 28px !important;
  }
  .db-hero-proof-item span {
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
  .db-hero-proof-divider {
    display: none !important;
  }
}

/* ── Services Mobile ── */
@media (max-width: 768px) {
  .db-services-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .db-svc-card {
    padding: 28px 20px !important;
  }
  .service-number {
    font-size: 36px !important;
  }
  .service-title {
    font-size: 17px !important;
  }
}

/* ── Section-Überschriften Mobile ── */
@media (max-width: 768px) {
  h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.2px !important;
  }
  h3 {
    font-size: 18px !important;
  }
  .chip {
    font-size: 9px !important;
    letter-spacing: 3px !important;
  }
  .db-section,
  section[id] {
    padding: 60px 20px !important;
  }
}

/* ── Team Mobile ── */
@media (max-width: 768px) {
  .team-header {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .team-grid .team-card:nth-child(4),
  .team-grid .team-card:nth-child(5) {
    grid-column: auto !important;
    margin: 0 !important;
  }
  .team-card-img img {
    height: 260px !important;
    object-fit: cover !important;
  }
  .team-quote {
    padding: 24px 20px !important;
  }
}

/* ── Testimonials Mobile ── */
@media (max-width: 768px) {
  .testimonial-case {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    direction: ltr !important;
    margin-bottom: 48px !important;
    padding-bottom: 48px !important;
  }
  .testimonial-case.reverse {
    direction: ltr !important;
  }
  .testimonial-case-img img {
    height: 240px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .testimonial-case-results {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .result-number {
    font-size: 28px !important;
  }
}

/* ── Action Sektion Mobile ── */
@media (max-width: 768px) {
  .action-inner {
    grid-template-columns: 1fr !important;
  }
  .action-image img {
    height: 300px !important;
    min-height: 300px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .action-content {
    padding: 40px 20px !important;
  }
  .action-content h2 {
    font-size: 26px !important;
  }
  .action-trust {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ── Buttons Mobile ── */
@media (max-width: 768px) {
  .btn,
  .btn-gold,
  .action-btn,
  a[href*="calendly"].btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    padding: 14px 16px !important;
    letter-spacing: 1px !important;
    display: flex !important;
  }
}

/* ── FAQ Mobile ── */
@media (max-width: 768px) {
  .db-acc-trigger {
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 20px 0 !important;
  }
  .db-acc-body-inner p {
    font-size: 14px !important;
  }
}

/* ── Exit Popup Mobile ── */
@media (max-width: 768px) {
  .exit-overlay {
    padding: 12px !important;
    align-items: flex-end !important;
  }
  .exit-popup {
    padding: 28px 20px !important;
    border-radius: 12px 12px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .exit-title {
    font-size: 22px !important;
  }
  .exit-cta-btn {
    font-size: 12px !important;
    padding: 14px 16px !important;
  }
}

/* ── Footer Mobile ── */
@media (max-width: 768px) {
  .db-footer {
    padding: 48px 20px 120px !important;
  }
  .db-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .db-footer-col a,
  .db-footer-brand a {
    font-size: 14px !important;
    line-height: 2.2 !important;
    display: block !important;
  }
  .db-footer-socials {
    justify-content: flex-start !important;
  }
}

/* ── Sticky CTA Mobile ── */
@media (max-width: 768px) {
  .db-sticky-cta {
    padding: 10px 16px 24px !important;
  }
  .db-sticky-cta-btn {
    font-size: 12px !important;
    padding: 14px !important;
    border-radius: 6px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── Kleine Geräte (iPhone SE, 320px) ── */
@media (max-width: 380px) {
  .hero-title-mobile,
  h1 {
    font-size: 24px !important;
  }
  h2 {
    font-size: 22px !important;
  }
  .db-hero-proof-item strong {
    font-size: 24px !important;
  }
  .btn,
  .btn-gold {
    font-size: 10px !important;
    padding: 12px !important;
    letter-spacing: 0.5px !important;
  }
  .exit-title {
    font-size: 20px !important;
  }
}

/* ── Tablet (769px – 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  h1,
  .db-hero-baulig-h1 {
    font-size: 40px !important;
  }
  .db-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .team-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  section {
    padding: 80px 40px !important;
  }
  .testimonial-case {
    grid-template-columns: 1fr 1.2fr !important;
    gap: 40px !important;
  }
}

/* ============================================================
   GSAP FALLBACK — Sicherheitsnetz falls GSAP nicht lädt (v4.0)
   GSAP-Inline-Styles überschreiben dieses CSS automatisch,
   sobald GSAP korrekt geladen ist.
   ============================================================ */
h1, h2, h3, p,
.btn, .btn-gold,
.db-hero-eyebrow,
.db-hero-baulig-h1,
.hero-title-desktop,
.hero-title-mobile,
.db-hero-bold-sub,
.db-hero-check-item,
.db-hero-proof-item,
.db-svc-card,
.db-etape-card,
.team-card,
.team-quote,
.testimonial-case,
.about-stat,
.db-acc-item,
.question-card,
.action-image,
.action-content {
  visibility: visible;
}

/* ============================================================
   SWIPER — Testimonials Slider (v4.1)
   ============================================================ */
.testimonials-swiper {
  padding-bottom: 60px !important;
  margin-top: 48px !important;
  overflow: hidden !important;
}

.swiper-slide {
  height: auto !important;
}

/* Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
  background: #1A1A2E !important;
  border: 1px solid #2a2a2a !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  color: #dcb88e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
  cursor: pointer !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #dcb88e !important;
  border-color: #dcb88e !important;
  color: #1A1A2E !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

.swiper-button-prev i,
.swiper-button-next i {
  font-size: 15px !important;
}

/* Pagination Dots */
.swiper-pagination-bullet {
  background: #333333 !important;
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  transition: width 0.3s ease, background 0.3s ease !important;
}

.swiper-pagination-bullet-active {
  background: #dcb88e !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ============================================================
   LIGHTBOX2 — Anpassung Dark Theme (v4.1)
   ============================================================ */
.lb-overlay {
  background: rgba(0, 0, 0, 0.95) !important;
}

.lb-image {
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
}

.lb-caption {
  color: #dcb88e !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  font-family: var(--font-b) !important;
}

.lb-number {
  color: #666666 !important;
  font-size: 11px !important;
}

.lb-close {
  opacity: 0.8 !important;
}

/* Lightbox Cursor auf Team-Fotos */
.team-card-img a {
  display: block !important;
  position: relative !important;
}

.team-card-img a::after {
  content: '\f00e' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.3s ease, color 0.3s ease !important;
  opacity: 0 !important;
  border-radius: 4px 4px 0 0 !important;
}

.team-card-img a:hover::after {
  background: rgba(220, 184, 142, 0.2) !important;
  opacity: 1 !important;
}

/* ============================================================
   FONT AWESOME — Icons Styling (v4.1)
   ============================================================ */

/* Service-Icons */
.db-svc-icon {
  color: #dcb88e !important;
  font-size: 22px !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* Testimonial Block-Icons */
.testimonial-case-block h4 .fa-solid {
  margin-right: 6px !important;
  font-size: 11px !important;
  opacity: 0.9 !important;
}

.testimonial-case-block.problem h4 .fa-triangle-exclamation {
  color: #ff6b6b !important;
}

.testimonial-case-block.goal h4 .fa-bullseye {
  color: #dcb88e !important;
}

.testimonial-case-block.solution h4 .fa-circle-check {
  color: #51cf66 !important;
}

/* Hero Checklist FA-Check */
.db-check-icon {
  color: #dcb88e !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  font-size: 13px !important;
  margin-top: 2px !important;
}

/* FAQ Icon */
.db-acc-icon {
  color: #dcb88e !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}

.db-acc-item.active .db-acc-icon {
  transform: rotate(180deg) !important;
}

/* Étapes Badge Icon */
.db-etape-badge .fa-arrow-right {
  font-size: 10px !important;
  margin-right: 4px !important;
}

/* Footer Social FA-Icons */
.db-footer-social .fa-brands {
  font-size: 18px !important;
}

/* Nav CTA Calendar Icon */
.btn.btn-gold .fa-regular {
  margin-right: 6px !important;
  font-size: 13px !important;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
  }
  .swiper-button-prev {
    left: 0 !important;
  }
  .swiper-button-next {
    right: 0 !important;
  }
  .testimonials-swiper {
    padding-bottom: 50px !important;
  }
}

/* ============================================================
   ICON & LIGHTBOX BUG FIX — v4.2
   Weiße Quadrate entstehen wenn Font Awesome Webfonts nicht
   geladen werden. font-display: block verhindert unsichtbare
   Zeichen während des Ladens.
   ============================================================ */

/* Font Awesome Webfont korrekt rendern */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: block;
}
@font-face {
  font-family: 'Font Awesome 6 Pro';
  font-display: block;
}

/* Lightbox Pfeil/Close Icons nicht mit ::before überschreiben */
.lb-prev:before,
.lb-next:before,
.lb-close:before {
  content: none !important;
}

/* Pseudo-Elemente mit font-display block laden */
*:before,
*:after {
  font-display: block;
}

/* ============================================================
   À PROPOS — Hintergrundbild bild6.jpg (v4.2)
   Exakter CSS-Klassenname: #about (inline styles bereits vorhanden,
   dieser Block ergänzt als Fallback via ::before)
   ============================================================ */
#about {
  position: relative !important;
  overflow: hidden !important;
}

/* Fallback falls inline-div nicht lädt */
#about::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('images/bild6.jpg') !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  opacity: 0 !important;
  z-index: 0 !important;
}

/* Alle direkten Kinder über dem Hintergrund */
#about > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   VOTRE TRANSFORMATION — Hintergrundbild bild7.jpg (v4.2)
   Section hat kein id/class-Attribut, wird über aria-label
   identifiziert: section[aria-label="Votre transformation"]
   ============================================================ */
section[aria-label="Votre transformation"] {
  position: relative !important;
  overflow: hidden !important;
}

/* Alle Kinder über den inline-Divs */
section[aria-label="Votre transformation"] > div[style*="z-index: 2"],
section[aria-label="Votre transformation"] > div[style*="z-index:2"] {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   MOBILE — Background-attachment Fallback (v4.2)
   ============================================================ */
@media (max-width: 768px) {
  #about::before {
    background-attachment: scroll !important;
    opacity: 0 !important;
  }
  section[aria-label="Votre transformation"] div[aria-hidden="true"]:first-child {
    background-attachment: scroll !important;
  }
}

/* ============================================================
   AUFGABE 1 — Footer Logo SVG
   ============================================================ */
.footer-logo-svg {
    height: 55px !important;
    width: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
    filter: brightness(1) !important;
}

/* ============================================================
   AUFGABE 2 — Team Bilder
   ============================================================ */
.team-card img,
.team-member img,
.equipe-card img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

/* ============================================================
   AUFGABE 3 — À Propos Sektion: bild3.jpg dezent im Hintergrund
   ============================================================ */
#about {
    position: relative !important;
    overflow: hidden !important;
}
#about::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 55% !important;
    height: 100% !important;
    background-image: url('images/bild3.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    opacity: 0.07 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
#about .container,
#about > div,
#about > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   AUFGABE 4 — Votre transformation Sektion: bild4.jpg dezent im Hintergrund
   ============================================================ */
#transformation {
    position: relative !important;
    overflow: hidden !important;
}
#transformation::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/bild4.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    opacity: 0.06 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
#transformation .container,
#transformation > div,
#transformation > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   RESPONSIVE CSS
   ============================================================ */
@media (max-width: 1024px) {
    .footer-logo-svg {
        height: 45px !important;
    }
}

@media (max-width: 768px) {
    .footer-logo-svg {
        height: 40px !important;
    }
    .team-card img,
    .team-member img,
    .equipe-card img {
        height: 280px !important;
    }
}

@media (max-width: 480px) {
    .footer-logo-svg {
        height: 35px !important;
    }
    .team-card img,
    .team-member img,
    .equipe-card img {
        height: 250px !important;
    }
}

/* ════ HINTERGRUND-BILDER FÜR SEKTIONEN ════ */

/* À PROPOS — Position für Hintergrund-Overlay */
#about {
  position: relative !important;
  overflow: hidden !important;
}

/* ════ À PROPOS HINTERGRUND MOBILE ════ */
@media (max-width: 768px) {
  .about-bg-overlay {
    width: 100% !important;
    opacity: 0.05 !important;
  }
}

/* ════ TESTIMONIALS GRID ════ */

.testimonials-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 60px !important;
  margin-top: 48px !important;
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  display: none !important;
}

/* ════ TEAM BILDER ════ */
.team-member-img,
.team-card img,
.equipe-card img,
.team-member img {
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 8px 8px 0 0 !important;
}

@media (max-width: 768px) {
    .team-member-img,
    .team-card img,
    .equipe-card img,
    .team-member img {
        height: 260px !important;
    }
}

/* ════ SERVICE ICON CONTAINER ════ */
.db-svc-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    background: rgba(0, 212, 255, 0.05) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.db-svc-icon:hover {
    transform: translateY(-5px) !important;
    background: rgba(0, 212, 255, 0.1) !important;
}

/* ════ TEAM MEMBER — professioneller Hover ════ */
.db-team-member {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 2px solid transparent !important;
}

.db-team-member:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 212, 255, 0.15) !important;
    transform: translateY(-3px) !important;
}

.db-team-member img {
    transition: filter 0.4s ease !important;
}

.db-team-member:hover img {
    filter: brightness(1.1) contrast(1.05) !important;
}

/* ════ TEAM CARDS — STATISCH (kein Transform/Skalieren, aber Glow bleibt) ════ */
.team-card,
.db-team-member {
    transform: none !important;
    cursor: default !important;
}

.team-card:hover,
.db-team-member:hover {
    /* Inset-Shadow beibehalten, Gold-Glow intensivieren beim Hover */
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.05),
        inset -1px -1px 2px rgba(0, 0, 0, 0.50),
        0 8px 30px rgba(0, 0, 0, 0.6),
        0 0 24px rgba(220, 184, 142, 0.12) !important;
    border-color: rgba(220, 184, 142, 0.30) !important;
    transform: none !important;
}

.team-card-img img,
.db-team-member img {
    transition: none !important;
}

.team-card:hover .team-card-img img,
.db-team-member:hover img {
    filter: none !important;
    transform: none !important;
}

.db-team-modal,
.modal-backdrop {
    display: none !important;
    pointer-events: none !important;
}

/* ========================================
   SERVICES SECTION - CIRCUIT BOARD PATTERN
   ======================================== */

/* Services: reiner Hintergrund — kein Circuit-Board-Muster */
.db-services,
.db-services-section,
section.services {
    background-color: var(--bg);
    padding: 100px 20px;
}

/* Service Cards — number styles */
.db-svc-card .service-number,
.db-service-card .number {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--cyan);
    opacity: 0.15;
    margin-bottom: 1.5rem;
    line-height: 1;
}

.db-svc-card {
    padding-top: 2.5rem;
}

/* ========================================
   HERO VIDEO — MOBILE OPTIMIERUNG
   ======================================== */

@media (max-width: 768px) {
    .db-hero video {
        min-width: 300%;
        left: 50%;
    }
}

/* ========================================
   TRUST SECTION (BILD12)
   ======================================== */

.db-trust-section {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   AUTO-DIAGNOSTIC QUIZ — ORBITAL DESIGN
══════════════════════════════════════════════════════════════ */

/* ── Section ── */
.db-quiz {
    position: relative;
    padding: 70px 0;
    background-color: var(--bg);
    overflow: hidden;
}

/* ── Header ── */
.db-quiz-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.db-quiz-header h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}
.db-quiz-header p {
    color: var(--text-2);
    margin-bottom: 0;
}

/* ── Orbital Arena ──
   width: 100% = füllt den Container-Contentbereich (nach Padding).
   aspect-ratio: 1 hält die Arena quadratisch ohne JS.
   height-Fallback für Safari <15 (kein aspect-ratio). */
.orb-arena {
    position: relative;
    width: 100%;
    max-width: 648px;
    /* Fallback: explizite Höhe für ältere Browser (648 × 1.2 = 778px) */
    height: 778px;
    margin: 0 auto 1.5rem;
    /* Scroll-in entrance */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34,1.1,0.64,1);
}
/* aspect-ratio überschreibt den height-Fallback in modernen Browsern */
@supports (aspect-ratio: 1) {
    .orb-arena { height: auto; aspect-ratio: 1; }
}
.orb-arena.orb-entered {
    opacity: 1;
    transform: scale(1);
}

/* SVG overlay for connection lines */
.orb-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* Decorative concentric orbit rings */
.orb-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0,212,255,0.07);
    pointer-events: none;
    z-index: 1;
}
.orb-ring::before {
    content: '';
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    border: 1px dashed rgba(0,212,255,0.035);
}
.orb-ring::after {
    content: '';
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.04);
}

/* ── Center Hub ── */
.orb-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(100px, 24%, 128px);
    height: clamp(100px, 24%, 128px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 40%,
        rgba(0,212,255,0.13) 0%,
        rgba(2,4,12,0.97) 62%
    );
    border: 1.5px solid rgba(0,212,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow:
        0 0 28px rgba(0,212,255,0.07) inset,
        0 0 0 1px rgba(0,212,255,0.06),
        0 8px 32px rgba(0,0,0,0.5);
}

.orb-hub-pulse {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.16);
    animation: orb-pulse 3.8s ease-out infinite;
    pointer-events: none;
}
.orb-hub-pulse--1 { width: 148%; height: 148%; animation-delay: 0s; }
.orb-hub-pulse--2 { width: 188%; height: 188%; animation-delay: 1.9s; border-color: rgba(0,212,255,0.07); }

@keyframes orb-pulse {
    0%   { transform: scale(0.82); opacity: 0.9; }
    100% { transform: scale(1.08); opacity: 0; }
}

.orb-hub-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.orb-hub-title {
    font-family: var(--font-h);
    font-size: clamp(0.38rem, 1vw, 0.52rem);
    letter-spacing: 0.24em;
    color: var(--cyan);
    font-weight: 700;
    text-transform: uppercase;
}
.orb-hub-counter {
    font-family: var(--font-h);
    font-size: clamp(1.2rem, 3.2vw, 1.65rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    transition: color 0.4s;
}
.orb-hub-sub {
    font-family: var(--font-h);
    font-size: clamp(0.35rem, 0.9vw, 0.48rem);
    letter-spacing: 0.18em;
    color: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Question Nodes ── */
.orb-node {
    position: absolute;
    top: 50%;
    left: 50%;
    /* JS sets --nx and --ny */
    transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px)));
    width: clamp(52px, 12.5%, 70px);
    height: clamp(52px, 12.5%, 70px);
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.85);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    /* Entrance: fade in */
    opacity: 0;
    transition:
        opacity 0.5s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}
.orb-arena.orb-entered .orb-node { opacity: 1; }

/* Hover & focus */
.orb-node:hover,
.orb-node:focus-visible {
    border-color: rgba(0,212,255,0.5);
    background: rgba(0,212,255,0.08);
    box-shadow: 0 0 22px rgba(0,212,255,0.2), 0 0 8px rgba(0,212,255,0.15) inset;
    transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px))) scale(1.12);
    transition:
        opacity 0.5s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* Active (panel open for this node) */
.orb-node.active {
    border-color: var(--cyan);
    background: rgba(0,212,255,0.1);
    box-shadow: 0 0 28px rgba(0,212,255,0.38), 0 0 12px rgba(0,212,255,0.22) inset;
    transform: translate(calc(-50% + var(--nx, 0px)), calc(-50% + var(--ny, 0px))) scale(1.2);
    transition:
        opacity 0.5s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* Answered states */
.orb-node.answered-oui {
    border-color: rgba(0,212,255,0.55);
    background: rgba(0,212,255,0.1);
    box-shadow: 0 0 16px rgba(0,212,255,0.18);
}
.orb-node.answered-non {
    border-color: rgba(255,80,80,0.5);
    background: rgba(255,55,55,0.09);
    box-shadow: 0 0 16px rgba(255,60,60,0.15);
}

/* Spinning glow ring on active node */
.orb-node-glow {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.orb-node.active .orb-node-glow {
    border-color: rgba(0,212,255,0.22);
    box-shadow: 0 0 18px rgba(0,212,255,0.25);
    animation: node-spin 4s linear infinite;
}
@keyframes node-spin { to { transform: rotate(360deg); } }

/* Node number */
.orb-node-num {
    font-family: var(--font-h);
    font-size: clamp(0.7rem, 1.8vw, 0.9rem);
    font-weight: 700;
    color: rgba(255,255,255,0.38);
    transition: color 0.3s, opacity 0.25s, transform 0.25s;
    position: relative;
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}
.orb-node:hover .orb-node-num,
.orb-node:focus-visible .orb-node-num,
.orb-node.active .orb-node-num { color: var(--cyan); opacity: 1; }

/* Check / X mark */
.orb-node-check {
    position: absolute;
    font-size: clamp(0.88rem, 2.4vw, 1.1rem);
    opacity: 0;
    transform: scale(0) rotate(-20deg);
    transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
    z-index: 2;
}
.orb-node.answered-oui .orb-node-check::after { content: '✓'; color: var(--cyan); }
.orb-node.answered-non .orb-node-check::after { content: '✗'; color: #ff6b6b; }
.orb-node.answered-oui .orb-node-check,
.orb-node.answered-non .orb-node-check {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
/* Fade out number when answered */
.orb-node.answered-oui .orb-node-num,
.orb-node.answered-non .orb-node-num {
    opacity: 0;
    transform: scale(0.4);
}

/* ── Question Panel ── */
.orb-panel {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    background: rgba(4,7,18,0.97);
    border: 1px solid rgba(0,212,255,0.18);
    border-radius: 20px;
    padding: 1.75rem 2rem 1.5rem;
    position: relative;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.25,0.64,1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 0 0 1px rgba(0,212,255,0.06),
        0 2px 0 rgba(0,212,255,0.1),
        0 24px 64px rgba(0,0,0,0.65);
}
.orb-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.orb-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.32);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.25s;
    padding: 0;
}
.orb-panel-close:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.22);
    transform: rotate(90deg);
}

.orb-panel-num {
    font-family: var(--font-h);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(0,212,255,0.1);
    line-height: 1;
    display: block;
    margin-bottom: 0.35rem;
}
.orb-panel-question {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
    margin: 0 0 1.5rem;
    padding-right: 2.5rem;
}
.orb-panel-answers {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.orb-ans-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.48);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-b);
}
.orb-ans-btn:hover { transform: translateY(-2px); }
.orb-ans-btn svg { flex-shrink: 0; }
.orb-ans-non:hover,
.orb-ans-non[aria-pressed="true"] {
    background: rgba(255,55,55,0.12);
    border-color: rgba(255,80,80,0.45);
    color: #ff6b6b;
    box-shadow: 0 4px 20px rgba(255,55,55,0.1), 0 0 0 1px rgba(255,80,80,0.08);
}
.orb-ans-oui:hover,
.orb-ans-oui[aria-pressed="true"] {
    background: rgba(0,212,255,0.1);
    border-color: rgba(0,212,255,0.4);
    color: var(--cyan);
    box-shadow: 0 4px 20px rgba(0,212,255,0.1), 0 0 0 1px rgba(0,212,255,0.08);
}

.orb-panel-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.orb-nav-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.28);
    font-size: 0.78rem;
    padding: 0.38rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-b);
}
.orb-nav-btn:not(:disabled):hover {
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
}
.orb-nav-btn:disabled { opacity: 0.18; cursor: default; }

/* ── Progress bar ── */
.db-quiz-progress-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto 3.5rem;
}
.db-quiz-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.07);
    border-radius: 99px;
    overflow: hidden;
}
.db-quiz-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan), #00ff9d);
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.db-quiz-progress-text {
    font-size: 0.78rem;
    color: var(--text-2);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* ── Results Panel ── */
.db-quiz-results {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.db-quiz-results.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.db-quiz-results-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* Score ring */
.db-quiz-score-ring {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}
.db-quiz-ring-svg {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}
.db-quiz-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.06);
    stroke-width: 8;
}
.db-quiz-ring-fill {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.4s ease;
}
.db-quiz-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.db-quiz-ring-num {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-h);
}
.db-quiz-ring-sub {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text-2);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Result message */
.db-quiz-result-msg { flex: 1; }
.db-quiz-result-title {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.db-quiz-result-body {
    color: var(--text-2);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* CTA row */
.db-quiz-result-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.db-quiz-reset-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.2s;
    font-family: var(--font-b);
    padding: 4px 8px;
}
.db-quiz-reset-btn:hover { color: rgba(255,255,255,0.7); }

/* Score-level color overrides */
.db-quiz-results[data-score-level="urgent"]  .db-quiz-ring-fill   { stroke: #ff5050; }
.db-quiz-results[data-score-level="urgent"]  .db-quiz-result-title { color: #ff6b6b; }
.db-quiz-results[data-score-level="moderate"] .db-quiz-ring-fill  { stroke: #ffaa00; }
.db-quiz-results[data-score-level="good"]    .db-quiz-ring-fill   { stroke: #00d4a0; }

/* ── Responsive ── */
@media (max-width: 600px) {
    /* Kein horizontales Padding auf der Section — Container übernimmt */
    .db-quiz { padding: 60px 0 80px; }

    /* Arena auf kleinen Screens: Fallback-Höhe = verfügbare Breite */
    .orb-arena {
        /* Container hat 20px Padding pro Seite = 40px gesamt */
        height: calc(100vw - 40px);
        max-width: calc(100vw - 40px);
    }
    @supports (aspect-ratio: 1) {
        .orb-arena { height: auto; max-width: 100%; }
    }

    .orb-panel { padding: 1.25rem 1.25rem 1rem; }
    .orb-panel-num { font-size: 2rem; }
    .orb-panel-question { padding-right: 2rem; font-size: 0.95rem; }

    /* Antwort-Buttons auf kleinen Screens etwas grösser für Touch */
    .orb-ans-btn { padding: 1rem 0.75rem; font-size: 0.88rem; }

    .db-quiz-results-inner {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.75rem 1.25rem;
    }
    .db-quiz-result-msg { text-align: center; }
}
@media (max-width: 400px) {
    /* Sehr kleine Screens (320px iPhone SE) */
    .orb-hub-counter { font-size: 1.1rem; }
    .orb-panel-answers { flex-direction: column; }
    .orb-ans-btn { padding: 0.85rem 1rem; }
}

/* ============================================================
   OFFRE PREMIUM — Excellence Training (v4.8.0)
============================================================ */
.db-offer {
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.db-offer-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(220,184,142,0.10) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.db-offer-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.db-offer-card {
  background: var(--bg-card);
  border: 2px solid rgba(220,184,142,0.25);
  border-radius: 20px;
  padding: 60px;
  max-width: 780px;
  width: 100%;
  box-shadow: 0 0 60px rgba(220,184,142,0.05);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.db-offer-card:hover {
  box-shadow: 0 0 80px rgba(220,184,142,0.12);
  border-color: rgba(220,184,142,0.4);
}

.db-offer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.db-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(220,184,142,0.08);
  border: 1px solid rgba(220,184,142,0.35);
  border-radius: 50px;
  padding: 6px 16px;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

.db-offer-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  animation: db-badge-pulse 2s ease-in-out infinite;
}

@keyframes db-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

.db-offer-sub {
  font-size: 17px;
  color: rgba(255,255,255,0.50);
  margin-bottom: 2.5rem;
  line-height: 1.75;
}

.db-offer-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.db-offer-feat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.db-offer-feat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(220,184,142,0.10);
  color: var(--cyan);
  flex-shrink: 0;
}

.db-offer-feat div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.db-offer-feat strong {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.db-offer-feat span {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}

.db-offer-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.db-offer-cta {
  width: 100%;
  justify-content: center !important;
  text-align: center;
}

.db-offer-trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.db-offer-trust span {
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #C0BDB5;
}

@media (max-width: 768px) {
  .db-offer-card { padding: 36px 28px; }
  .db-offer-top  { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .db-offer-card    { padding: 24px 16px; }
  .db-offer-trust   { gap: 1rem; }
  .db-offer-sub     { font-size: 15px; }
}


/* ============================================================
   COMPARATIF — Approche Traditionnelle vs DB Consulting (v4.8.0)
============================================================ */
.db-comparatif {
  position: relative;
  background: var(--bg);
}

.db-comp-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 60px;
}

.db-comp-head p {
  margin-top: 1rem;
  font-size: 18px;
}

.db-comp-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
}

.db-comp-col {
  padding: 40px;
  border-radius: 16px;
}

.db-comp-bad {
  background: rgba(255,70,70,0.03);
  border: 1px solid rgba(255,70,70,0.12);
}

.db-comp-good {
  background: rgba(220,184,142,0.04);
  border: 1px solid rgba(220,184,142,0.2);
  box-shadow: 0 0 40px rgba(220,184,142,0.05);
  transition: box-shadow 0.4s ease;
}

.db-comp-good:hover {
  box-shadow: 0 0 60px rgba(220,184,142,0.10);
}

.db-comp-col-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.db-comp-col-header h3 {
  font-size: 18px !important;
  line-height: 1.3;
}

.db-comp-col-header small {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 400;
  display: block;
}

.db-comp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.db-comp-icon-bad  { background: rgba(255,70,70,0.10); color: #ff5555; }
.db-comp-icon-good { background: rgba(220,184,142,0.12); color: var(--cyan); }

.db-comp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.db-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.db-comp-item svg { flex-shrink: 0; margin-top: 2px; }

.db-comp-item-bad  svg { color: rgba(255,70,70,0.65); }
.db-comp-item-good svg { color: var(--cyan); }

.db-comp-item div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.db-comp-item strong {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.db-comp-item-bad strong { color: rgba(255,255,255,0.65); }

.db-comp-item span {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.db-comp-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  align-self: center;
}

.db-comp-vs span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-2);
}

.db-comp-cta {
  text-align: center;
  margin-top: 3.5rem;
}

@media (max-width: 900px) {
  .db-comp-grid {
    grid-template-columns: 1fr;
  }
  .db-comp-vs {
    padding: 1.25rem 0;
  }
  .db-comp-vs span {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .db-comp-col { padding: 28px 20px; }
}


/* ============================================================
   LIGHT THEME OVERRIDES — v5.0.0
   All dark-hardcoded values are overridden here.
   Footer stays dark; everything else → white/light.
============================================================ */

/* ── Global ── */
body,
.site,
#page {
  background: #FFFFFF !important;
  color: #6B7280 !important;
}

/* ── Headings: dark text on light bg ── */
h1, h2, h3, h4, h5, h6,
.db-hero-h1,
.exit-title,
.exit-title-accent {
  color: #111827 !important;
}

/* ── Chips / Labels ── */
.label,
.section-label,
.chip {
  color: #0D0D0D !important;
  background: #F3F3F1;
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 1.25rem;
}

/* ── Links (outside footer / dark sections) ── */
a { color: #0D0D0D; }
a:hover { color: #333333; }

/* ── Divider ── */
.divider { background: #E5E7EB; }

/* ============================================================
   NAVIGATION — Light Frosted Glass
============================================================ */
header, .db-nav {
  padding: 14px 24px 0 !important;
}

.nav-container {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid #E5E7EB !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}

.db-nav.scrolled .nav-container {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
}

.db-nav-links a {
  color: #374151 !important;
  letter-spacing: 1px !important;
}
.db-nav-links a:hover { color: #0D0D0D !important; }

/* Nav CTA button in light nav */
.db-nav .btn-gold {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
  padding: 10px 20px !important;
  font-size: 11px !important;
}
.db-nav .btn-gold:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #FFFFFF !important;
}

/* Hamburger lines dark */
.db-hamburger span { background: #111827 !important; }

/* Logo: black on light background */
.db-logo-svg-wrap {
  filter: brightness(0) !important;
}

/* Mobile menu: white background */
.db-mobile-menu {
  background: #FFFFFF !important;
}
.db-mobile-menu a {
  color: #111827 !important;
}
.db-mobile-menu a:hover { color: #0D0D0D !important; }
.db-mobile-close { color: #111827 !important; }

/* ============================================================
   BUTTONS — Light Theme
============================================================ */
.btn-gold,
.btn-primary,
.button-primary {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
}
.btn-gold:hover,
.btn-primary:hover,
.button-primary:hover {
  background: #333333 !important;
  border-color: #333333 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 28px rgba(13,13,13,0.18) !important;
}

.btn-outline,
.btn-secondary,
.button-secondary {
  color: #111827 !important;
  border-color: #111827 !important;
}
.btn-outline:hover,
.btn-secondary:hover {
  border-color: #0D0D0D !important;
  color: #0D0D0D !important;
}

/* ============================================================
   HERO — Light / Clean Split
============================================================ */
.db-hero-section {
  background-color: #F7F7F5 !important;
  background-image: none !important;
  min-height: 92vh !important;
}

.db-hero-section::before {
  display: none !important;
}

.db-hero-eyebrow {
  color: #6B7280 !important;
}

.db-hero-h1 {
  color: #111827 !important;
}

.db-hero-h1 em {
  color: #0D0D0D !important;
  font-style: italic;
}

.db-hero-sub {
  color: #6B7280 !important;
}

.db-hero-social-proof {
  color: #9CA3AF !important;
}

/* Pill Primary Button: black bg, white text */
.db-btn-primary {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
}
.db-btn-primary .btn-icon {
  background: #FFFFFF !important;
}
.db-btn-primary .btn-icon svg {
  color: #0D0D0D !important;
}
.db-btn-primary:hover {
  background: #333333 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 28px rgba(13,13,13,0.20) !important;
}

/* Ghost Button: dark border, dark text */
.db-btn-ghost {
  color: #111827 !important;
  border-color: #D1D5DB !important;
  background: transparent !important;
}
.db-btn-ghost:hover {
  border-color: #0D0D0D !important;
  color: #0D0D0D !important;
  background: rgba(13,13,13,0.04) !important;
}

/* Logo bar */
.db-hero-logos {
  background: linear-gradient(transparent, rgba(247, 247, 245, 0.9)) !important;
}
.db-hero-logos-label { color: rgba(107,114,128,0.7) !important; }
.db-logo-placeholder {
  background: rgba(0,0,0,0.05) !important;
  color: rgba(0,0,0,0.3) !important;
}

/* ============================================================
   SERVICES — Light Cards
============================================================ */
.db-services {
  background: #FFFFFF !important;
}

.db-svc-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.db-svc-card:hover {
  background: #FAFAFA !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

.service-number {
  color: #E5E7EB !important;
}
.service-line {
  background: #E5E7EB !important;
}
.service-title { color: #111827 !important; }
.service-text  { color: #6B7280 !important; }
.db-svc-link,
.service-link  { color: #0D0D0D !important; }

/* ============================================================
   À PROPOS — Light Section
============================================================ */
.db-about {
  background: #F7F7F5 !important;
  color: #6B7280 !important;
}
.db-about::before,
.about-bg-overlay,
.about-dark-overlay {
  display: none !important;
}
.db-about * { position: relative; z-index: auto !important; }

.about-stat-number { color: #111827 !important; }
.about-stat-label  { color: #6B7280 !important; }

/* ============================================================
   ÉTAPES / PROCESS — Light
============================================================ */
.db-etapes,
[class*="etapes"] {
  background: #FFFFFF !important;
}
.etape-card,
.db-etape-card,
.step-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.etape-number,
.step-number {
  color: #E5E7EB !important;
  font-size: 3rem !important;
}

/* ============================================================
   OFFRE PREMIUM — Light
============================================================ */
.db-offer {
  background: #F7F7F5 !important;
}
.db-offer h2 { color: #111827 !important; }
.db-offer-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  color: #6B7280 !important;
}
.db-offer-card h3 { color: #111827 !important; }
.db-badge-pulse {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
}

/* ============================================================
   COMPARATIF — Light
============================================================ */
.db-comparatif {
  background: #FFFFFF !important;
}
.db-comp-before,
.db-comp-after {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}
.db-comp-after {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
}
.db-comp-after h3,
.db-comp-after li { color: #FFFFFF !important; }

/* ============================================================
   TESTIMONIALS — Light
============================================================ */
.db-testimonials,
#testimonials {
  background: #F7F7F5 !important;
}
.testimonial-card,
.swiper-slide .db-testimonial-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.testimonial-name { color: #111827 !important; }
.testimonial-role { color: #9CA3AF !important; }
.testimonial-text { color: #6B7280 !important; }
.testimonial-stars { color: #F59E0B !important; }

/* Swiper navigation arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #0D0D0D !important;
}

/* ============================================================
   TEAM — Light
============================================================ */
.db-team {
  background: #FFFFFF !important;
}
.team-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
}
.team-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
.team-name  { color: #111827 !important; }
.team-role  { color: #6B7280 !important; }

/* ============================================================
   Q&A / FAQ — Light
============================================================ */
.db-qa,
#qa {
  background: #F7F7F5 !important;
}
.db-qa::before { display: none !important; }

.db-acc-item {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}
.db-acc-item:hover {
  border-color: #D1D5DB !important;
}
.db-acc-item.active {
  border-color: #0D0D0D !important;
}
.db-acc-item.active::before {
  background: #0D0D0D !important;
}
.db-acc-trigger {
  color: #111827 !important;
  background: transparent !important;
}
.db-acc-trigger:hover { color: #0D0D0D !important; }
.db-acc-body,
.db-acc-body-inner { color: #6B7280 !important; }
.db-acc-icon { color: #0D0D0D !important; }

/* ============================================================
   CTA / ACTION SECTION — Dark (stays intentionally dark)
============================================================ */
.db-cta-section,
.db-action-section,
.action-section,
#contact {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
}
.db-cta-section h2,
.db-action-section h2,
.action-content h2,
#contact h2 { color: #FFFFFF !important; }
.db-cta-section p,
.db-action-section p,
.action-content p,
#contact p  { color: rgba(255,255,255,0.7) !important; }

/* CTA section trust/urgency text */
.action-trust span { color: rgba(255,255,255,0.6) !important; }
.action-urgency    { color: rgba(255,255,255,0.5) !important; }

/* CTA section buttons stay white-on-dark */
.db-cta-section .btn-gold,
.db-action-section .btn-gold,
.action-section .btn-gold {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  border-color: #FFFFFF !important;
}
.db-cta-section .btn-gold:hover,
.db-action-section .btn-gold:hover {
  background: rgba(255,255,255,0.9) !important;
}

/* ============================================================
   FOOTER — Stays Dark
============================================================ */
.db-footer {
  background: #0D0D0D !important;
  color: rgba(255,255,255,0.6) !important;
}
.db-footer h4 { color: #FFFFFF !important; }
.db-footer a  { color: rgba(255,255,255,0.6) !important; }
.db-footer a:hover { color: #FFFFFF !important; }
.db-footer p  { color: rgba(255,255,255,0.5) !important; }
.db-footer-copy { color: rgba(255,255,255,0.4) !important; }
.db-footer-legal a { color: rgba(255,255,255,0.5) !important; }
.db-footer-legal a:hover { color: #FFFFFF !important; }

/* Footer logo stays white */
.footer-logo-svg { filter: brightness(0) invert(1) !important; }

/* Footer social icons */
.db-footer-social { color: rgba(255,255,255,0.5) !important; }
.db-footer-social:hover { color: #FFFFFF !important; }

/* ============================================================
   EXIT POPUP — Light
============================================================ */
.exit-overlay {
  background: rgba(0,0,0,0.60) !important;
}
.exit-popup {
  background: #FFFFFF !important;
  color: #6B7280 !important;
}
.exit-label { color: #9CA3AF !important; }
.exit-title { color: #111827 !important; }
.exit-title-accent { color: #0D0D0D !important; }
.exit-text  { color: #6B7280 !important; }
.exit-check { color: #0D0D0D !important; }
.exit-cta-btn {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
}
.exit-cta-btn:hover {
  background: #333333 !important;
}
.exit-decline { color: #9CA3AF !important; }
.exit-close   { color: #6B7280 !important; }

/* ============================================================
   STICKY MOBILE CTA — Dark stays
============================================================ */
.db-sticky-cta {
  background: #0D0D0D !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}
.db-sticky-cta-btn { color: #FFFFFF !important; }

/* ============================================================
   AUTO-DIAGNOSTIC QUIZ — Light
============================================================ */
.db-quiz,
.db-quiz-section {
  background: #F7F7F5 !important;
}
.quiz-card,
.db-quiz-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;
  color: #6B7280 !important;
}
.quiz-card h3,
.db-quiz-card h3 { color: #111827 !important; }
.quiz-btn,
.db-quiz-btn {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
}
.quiz-btn:hover,
.db-quiz-btn:hover {
  background: #333333 !important;
}

/* Orbital nodes */
.quiz-node,
.db-quiz-node {
  background: #FFFFFF !important;
  border-color: #D1D5DB !important;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.quiz-node.active,
.db-quiz-node.active {
  background: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
}

/* ============================================================
   HARDCODED DARK BG OVERRIDES
   Replaces all #0a0a0a / #111111 / #1a1a1a instances that
   are outside the footer/CTA dark sections.
============================================================ */
/* Generic section bg overrides */
.db-section {
  background: #FFFFFF;
}
.db-section:nth-child(even) {
  background: #F7F7F5;
}

/* Override bg-card variable uses */
[style*="background: var(--bg-card)"],
[style*="background:var(--bg-card)"] {
  background: #FFFFFF !important;
}

/* ============================================================
   SCROLL ANIMATIONS — keep opacity/visibility functional
   (GSAP clearProps handles these at runtime)
============================================================ */
.fade-up {
  opacity: 1 !important;
}

/* ============================================================
   RESPONSIVE — Mobile adjustments for light theme
============================================================ */
@media (max-width: 600px) {
  .db-hero-section {
    background-color: #F7F7F5 !important;
    min-height: 80vh !important;
  }
  .nav-container {
    background: rgba(255,255,255,0.95) !important;
  }
}

@media (max-width: 380px) {
  .db-btn-primary {
    font-size: 13px !important;
    padding: 5px 5px 5px 18px !important;
  }
}


/* Action content column stays dark */
.action-content {
  background: #0D0D0D !important;
}


/* ============================================================
   PREMIUM VISUAL UPGRADE — v5.1.0
   Warmes Gold-Akzent-System, Kontrast-Sektionen,
   mehr Energie und Premium-Gefühl.
   Nur style.css — keine PHP-Änderungen.
============================================================ */

/* ── Globale Basis ── */
body, .site, #page {
  background: var(--color-bg) !important;
  color: var(--color-text-muted) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text) !important;
}

p { color: var(--color-text-muted) !important; }

a { color: var(--color-primary); }
a:hover { color: var(--color-accent); }

/* ── Section-Labels / Chips ── */
.label, .section-label, .chip {
  color: var(--color-accent) !important;
  background: var(--color-accent-light) !important;
  border: 1px solid rgba(201,169,110,0.25) !important;
  letter-spacing: 0.15em !important;
  font-size: 11px !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
}

/* ── H2 Sektionstittel ── */
h2 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

/* ── Trennlinien zwischen hellen Sektionen ── */
.db-section + .db-section {
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   NAVIGATION — Premium angepasst
============================================================ */
.nav-container {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 20px rgba(26,26,46,0.06) !important;
}
.db-nav.scrolled .nav-container {
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 4px 28px rgba(26,26,46,0.10) !important;
}
.db-nav-links a {
  color: var(--color-primary) !important;
}
.db-nav-links a:hover { color: var(--color-accent) !important; }

/* Header-CTA: dunkel, Gold beim Hover */
.db-nav .btn-gold {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}
.db-nav .btn-gold:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* Hamburger: primary color */
.db-hamburger span { background: var(--color-primary) !important; }

/* Logo: zeige in primary-farbe (dunkel) */
.db-logo-svg-wrap {
  filter: brightness(0) saturate(100%) !important;
}

/* ============================================================
   BUTTONS — Premium
============================================================ */
/* Primär-Button (Pill-Shape im Hero) */
.db-btn-primary {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}
.db-btn-primary .btn-icon {
  background: var(--color-accent-light) !important;
}
.db-btn-primary .btn-icon svg {
  color: var(--color-accent) !important;
}
.db-btn-primary:hover {
  background: #2d2d4a !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 32px rgba(26,26,46,0.22) !important;
}

/* Ghost-Button: primary border */
.db-btn-ghost {
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  background: transparent !important;
}
.db-btn-ghost:hover {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

/* Alle .btn-gold überall: primary mit Gold-Hover */
.btn-gold,
.btn-primary,
.button-primary {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}
.btn-gold:hover,
.btn-primary:hover,
.button-primary:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 28px rgba(201,169,110,0.30) !important;
}

/* Sekundär-Buttons */
.btn-outline,
.btn-secondary,
.button-secondary {
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
  background: transparent !important;
}
.btn-outline:hover,
.btn-secondary:hover {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   HERO — Diagonal Gradient + Geometrie
============================================================ */
.db-hero-section {
  background: linear-gradient(135deg, #FFFFFF 60%, var(--color-accent-light) 100%) !important;
  background-image: linear-gradient(135deg, #FFFFFF 60%, var(--color-accent-light) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Geometrisches Kreis-Element rechts */
.db-hero-section::after {
  content: '' !important;
  position: absolute !important;
  top: 5% !important;
  right: -8% !important;
  width: 520px !important;
  height: 520px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(201,169,110,0.25) !important;
  background: radial-gradient(circle, rgba(245,237,216,0.45) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Zweiter Kreis, dezenter Versatz */
.db-hero-content::before {
  content: '' !important;
  position: absolute !important;
  top: 20% !important;
  right: -15% !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(201,169,110,0.12) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Eyebrow */
.db-hero-eyebrow { color: var(--color-accent) !important; }

/* H1 */
.db-hero-h1 { color: var(--color-text) !important; }
.db-hero-h1 em {
  color: var(--color-accent) !important;
  font-style: italic !important;
  position: relative !important;
}

/* Sub-Text */
.db-hero-sub { color: var(--color-text-muted) !important; }

/* Trust-Line mit Gold-Ornament */
.db-hero-social-proof {
  color: var(--color-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.db-hero-social-proof::before {
  content: '—' !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Logo-Strip */
.db-hero-logos {
  background: var(--color-bg-soft) !important;
  border-top: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
}
.db-hero-logos-label { color: var(--color-text-muted) !important; opacity: 0.6 !important; }
.db-logo-placeholder {
  background: rgba(201,169,110,0.08) !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: rgba(26,26,46,0.35) !important;
}

/* ============================================================
   SERVICES — bg-soft, Gold-Karten
============================================================ */
.db-services {
  background: var(--color-bg-soft) !important;
}

.db-svc-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 12px rgba(26,26,46,0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Gold-Trennlinie oben */
.db-svc-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--color-accent) !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}
.db-svc-card:hover::before {
  opacity: 1 !important;
}

.db-svc-card:hover {
  box-shadow: 0 8px 40px rgba(201,169,110,0.15) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(201,169,110,0.3) !important;
}

/* Nummerierung */
.service-number {
  color: var(--color-accent) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* Trennlinie in der Karte */
.service-line {
  background: var(--color-accent) !important;
  height: 2px !important;
  opacity: 0.35 !important;
}
.db-svc-card:hover .service-line { opacity: 0.7 !important; }

/* Titel und Text */
.service-title { color: var(--color-text) !important; }
.service-text  { color: var(--color-text-muted) !important; }

/* "En savoir plus" → goldene Farbe */
.db-svc-link,
.service-link {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.db-svc-link:hover,
.service-link:hover {
  color: #a8884f !important;
}

/* Services Heading */
.db-services-head h2 { color: var(--color-text) !important; }
.db-services-head p  { color: var(--color-text-muted) !important; }

/* ============================================================
   À PROPOS — weiß, dunkle Stat-Karten
============================================================ */
.db-about,
#about {
  background: var(--color-bg) !important;
}

.about-content h2 { color: var(--color-text) !important; }
.about-content p  { color: var(--color-text-muted) !important; }

/* Stats als dunkle Premium-Karten */
.about-stats {
  display: flex !important;
  gap: 20px !important;
  margin-top: 32px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--color-border) !important;
  flex-wrap: wrap !important;
}

.about-stat {
  background: var(--color-bg-dark) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  flex: 1 !important;
  min-width: 120px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

.about-stat-number {
  color: var(--color-accent) !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  font-family: var(--font-h) !important;
}
.about-stat-label {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

/* "Découvrir notre méthode" Button: outlined gold */
#about .btn-gold,
.db-about .btn-gold {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1.5px solid var(--color-accent) !important;
  box-shadow: none !important;
}
#about .btn-gold:hover,
.db-about .btn-gold:hover {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 28px rgba(201,169,110,0.25) !important;
}

/* ============================================================
   ÉTAPES / PROCESSUS — bg-soft
============================================================ */
.db-etapes,
#etapes {
  background: var(--color-bg-soft) !important;
}
.db-etapes::before { display: none !important; }

.db-etapes-head h2 { color: var(--color-text) !important; }
.db-etapes-head p  { color: var(--color-text-muted) !important; }

/* Étapes-Karten */
.db-etape-card,
.etape-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 12px rgba(26,26,46,0.04) !important;
}
.db-etape-card:hover,
.etape-card:hover {
  box-shadow: 0 8px 32px rgba(201,169,110,0.12) !important;
  border-color: rgba(201,169,110,0.3) !important;
}

.etape-number,
.step-number {
  color: var(--color-accent) !important;
  opacity: 0.35 !important;
}

/* ============================================================
   PROGRAMME ELITE / OFFER — weiß
============================================================ */
.db-offer,
#offer {
  background: var(--color-bg) !important;
}

.db-offer h2 { color: var(--color-text) !important; }

.db-offer-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 12px rgba(26,26,46,0.04) !important;
}
.db-offer-card:hover {
  box-shadow: 0 8px 40px rgba(201,169,110,0.12) !important;
  border-color: rgba(201,169,110,0.3) !important;
}
.db-offer-card h3 { color: var(--color-text) !important; }

.db-badge-pulse {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}

/* ============================================================
   COMPARATIF — bg-soft
============================================================ */
.db-comparatif,
#comparatif {
  background: var(--color-bg-soft) !important;
}
.db-comp-before {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
}
.db-comp-after {
  background: var(--color-bg-dark) !important;
  border-color: var(--color-bg-dark) !important;
}
.db-comp-after h3 { color: #FFFFFF !important; }
.db-comp-after li { color: rgba(255,255,255,0.75) !important; }

/* ============================================================
   AUTO-DIAGNOSTIC / QUIZ — DARK KONTRAST-SEKTION
============================================================ */
.db-quiz,
.db-quiz-section {
  background: var(--color-bg-dark) !important;
  position: relative !important;
}

/* Subtiles Raster-Pattern auf dunklem Bg */
.db-quiz::before,
.db-quiz-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(201,169,110,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.db-quiz > *,
.db-quiz-section > * { position: relative !important; z-index: 1 !important; }

/* Quiz Heading weiß */
.db-quiz-header h2 { color: #FFFFFF !important; }
.db-quiz-header p  { color: rgba(255,255,255,0.55) !important; }
.db-quiz-header .chip {
  background: rgba(201,169,110,0.15) !important;
  color: var(--color-accent) !important;
  border-color: rgba(201,169,110,0.3) !important;
}

/* Orbital Hub: goldene Outline auf dunklem Bg */
.orb-hub {
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(201,169,110,0.35) !important;
  box-shadow: 0 0 40px rgba(201,169,110,0.10) !important;
}
.orb-hub-title,
.orb-hub-sub {
  color: var(--color-accent) !important;
  opacity: 0.7 !important;
}
.orb-hub-counter { color: #FFFFFF !important; }

/* Pulse-Ringe: Gold */
.orb-hub-pulse {
  border-color: rgba(201,169,110,0.12) !important;
}

/* Node-Buttons: dunkles Bg, goldene Border, weißer Text */
.orb-node {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(201,169,110,0.30) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.30) !important;
}
.orb-node .orb-node-num { color: rgba(255,255,255,0.7) !important; }

.orb-node:hover,
.orb-node:focus-visible {
  background: rgba(201,169,110,0.12) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 20px rgba(201,169,110,0.20) !important;
}

.orb-node.active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #FFFFFF !important;
}
.orb-node.active .orb-node-num { color: #FFFFFF !important; }

/* SVG connection lines */
.orb-svg line { stroke: rgba(201,169,110,0.20) !important; }

/* ============================================================
   TESTIMONIALS — bg-soft
============================================================ */
.db-testimonials,
#testimonials {
  background: var(--color-bg-soft) !important;
}

.db-testimonials h2 { color: var(--color-text) !important; }

.testimonial-card,
.swiper-slide .db-testimonial-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 16px rgba(26,26,46,0.05) !important;
}
.testimonial-name  { color: var(--color-text) !important; }
.testimonial-role  { color: var(--color-text-muted) !important; }
.testimonial-text  { color: var(--color-text-muted) !important; }
.testimonial-stars { color: var(--color-accent) !important; }

/* Swiper nav arrows */
.swiper-button-next,
.swiper-button-prev { color: var(--color-accent) !important; }
.swiper-pagination-bullet-active { background: var(--color-accent) !important; }

/* ============================================================
   TEAM — weiß, goldene Hover-Border
============================================================ */
.db-team,
#team {
  background: var(--color-bg) !important;
}
.db-team h2 { color: var(--color-text) !important; }

.team-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 12px rgba(26,26,46,0.04) !important;
  transition: all 0.3s ease !important;
}
.team-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 32px rgba(201,169,110,0.15) !important;
  transform: translateY(-3px) !important;
}

/* Goldene Bottom-Border beim Hover */
.team-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--color-accent) !important;
  border-radius: 0 0 var(--r-card) var(--r-card) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.team-card:hover::after { opacity: 1 !important; }

.team-name { color: var(--color-text) !important; }
.team-role  { color: var(--color-text-muted) !important; }

/* ============================================================
   Q&A / FAQ — DARK KONTRAST-SEKTION
============================================================ */
.db-qa,
#qa {
  background: var(--color-bg-dark) !important;
}
.db-qa::before { display: none !important; }

.db-qa-head h2 { color: #FFFFFF !important; }
.db-qa-head p  { color: rgba(255,255,255,0.55) !important; }
.db-qa-head .chip {
  background: rgba(201,169,110,0.15) !important;
  color: var(--color-accent) !important;
  border-color: rgba(201,169,110,0.30) !important;
}

/* FAQ Accordion: dunkel mit goldenen Elementen */
.db-acc-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--r-card) !important;
}
.db-acc-item:hover {
  border-color: rgba(201,169,110,0.30) !important;
  background: rgba(201,169,110,0.05) !important;
}
.db-acc-item.active {
  border-color: rgba(201,169,110,0.45) !important;
  background: rgba(201,169,110,0.07) !important;
}

/* Goldener linker Streifen */
.db-acc-item.active::before {
  background: var(--color-accent) !important;
}

.db-acc-trigger {
  color: rgba(255,255,255,0.90) !important;
}
.db-acc-trigger:hover { color: #FFFFFF !important; }

/* FAQ Icon: goldenes Plus/Minus */
.db-acc-icon { color: var(--color-accent) !important; }

.db-acc-body,
.db-acc-body-inner {
  color: rgba(255,255,255,0.60) !important;
}

/* ============================================================
   CTA / ACTION — DARK bleibt dunkel
============================================================ */
.action-section,
#contact {
  background: var(--color-bg-dark) !important;
}
.action-content {
  background: #1A1A2E !important;
}
.action-content h2 { color: #FFFFFF !important; }
.action-content p  { color: rgba(255,255,255,0.65) !important; }
.action-urgency    { color: rgba(255,255,255,0.45) !important; }
.action-trust span { color: rgba(255,255,255,0.55) !important; }

/* CTA-Button in dunkler Sektion: Gold */
.action-section .btn-gold,
.action-content .btn-gold {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}
.action-section .btn-gold:hover,
.action-content .btn-gold:hover {
  background: #a8884f !important;
  border-color: #a8884f !important;
  box-shadow: 0 8px 32px rgba(201,169,110,0.35) !important;
}

/* Foto-Seite im Split-Layout: leicht heller */
.action-image img {
  filter: brightness(0.9) !important;
}
.action-section:hover .action-image img {
  filter: brightness(1.0) !important;
}

/* ============================================================
   FOOTER — #0A0A0A, goldene Hover-Akzente
============================================================ */
.db-footer {
  background: #0A0A0A !important;
}
.db-footer h4 { color: #FFFFFF !important; }
.db-footer p  { color: rgba(255,255,255,0.45) !important; }
.db-footer a  { color: rgba(255,255,255,0.55) !important; }
.db-footer a:hover { color: var(--color-accent) !important; }
.db-footer-copy { color: rgba(255,255,255,0.35) !important; }
.db-footer-legal a:hover { color: var(--color-accent) !important; }
.db-footer-social { color: rgba(255,255,255,0.50) !important; }
.db-footer-social:hover { color: var(--color-accent) !important; }

/* Footer-Trennlinie */
.db-footer-bottom {
  border-top-color: rgba(255,255,255,0.07) !important;
}

/* ============================================================
   EXIT POPUP — Light mit Gold-Akzent
============================================================ */
.exit-popup {
  background: #FFFFFF !important;
}
.exit-label  { color: var(--color-accent) !important; font-weight: 600 !important; }
.exit-title  { color: var(--color-text) !important; }
.exit-title-accent { color: var(--color-accent) !important; }
.exit-text   { color: var(--color-text-muted) !important; }
.exit-check  { color: var(--color-accent) !important; }
.exit-cta-btn {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}
.exit-cta-btn:hover {
  background: #a8884f !important;
  color: #FFFFFF !important;
}
.exit-decline { color: var(--color-text-muted) !important; }
.exit-close { color: var(--color-text-muted) !important; }

/* ============================================================
   STICKY CTA (Mobile) — Primary-Farbe
============================================================ */
.db-sticky-cta {
  background: var(--color-primary) !important;
}
.db-sticky-cta-btn { color: #FFFFFF !important; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  .db-hero-section::after { width: 280px !important; height: 280px !important; right: -10% !important; }
  .about-stat { min-width: calc(50% - 10px) !important; }
  .orb-node { background: rgba(255,255,255,0.08) !important; }
}

@media (max-width: 600px) {
  .db-hero-section::after { display: none !important; }
  .about-stat { min-width: 100% !important; }
}

@media (max-width: 380px) {
  h2 { font-size: 1.75rem !important; }
}



/* ============================================================
   MARKETING.MBA BUTTON SYSTEM — v5.2.0
   Weißer Hintergrund, dünne Gold-Border beim Hover,
   kleine Versalien — alle alten Button-Styles überschrieben.
============================================================ */

/* ── Basis-Reset für alle Button-Klassen ── */
.btn,
.btn-gold, .btn-primary, .button-primary,
.btn-outline, .btn-secondary, .button-secondary,
.btn-lg, .btn-xl, .btn-glow,
.db-btn-primary, .db-btn-ghost,
.db-quiz-cta-btn, .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 8px !important;
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  border: 1px solid #D4C9B0 !important;
  /* Pill-Form aufheben */
  border-radius: 8px !important;
}

/* ── PRIMÄR-BUTTON: weißer Hintergrund ── */
.btn-gold,
.btn-primary,
.button-primary,
.db-btn-primary,
.db-quiz-cta-btn,
.action-btn {
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  border-color: #D4C9B0 !important;
  padding: 14px 28px !important;
  box-shadow: 0 1px 4px rgba(26,26,46,0.06) !important;
}
.btn-gold:hover,
.btn-primary:hover,
.button-primary:hover,
.db-btn-primary:hover,
.db-quiz-cta-btn:hover,
.action-btn:hover {
  background: #F5F0E8 !important;
  border-color: var(--color-accent) !important;
  color: #1A1A2E !important;
  box-shadow: 0 2px 12px rgba(201,169,110,0.18) !important;
  transform: none !important;
}

/* ── SEKUNDÄR / GHOST ── */
.btn-outline,
.btn-secondary,
.button-secondary,
.db-btn-ghost {
  background: transparent !important;
  color: #6B6B7B !important;
  border-color: #D4C9B0 !important;
  padding: 14px 28px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
.btn-outline:hover,
.btn-secondary:hover,
.button-secondary:hover,
.db-btn-ghost:hover {
  background: transparent !important;
  border-color: var(--color-accent) !important;
  color: #1A1A2E !important;
  transform: none !important;
}

/* ── HEADER-CTA (Navigation) ── */
.db-nav .btn-gold,
.header-cta {
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  border: 1px solid #D4C9B0 !important;
  border-radius: 6px !important;
  padding: 9px 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.db-nav .btn-gold:hover,
.header-cta:hover {
  background: #F5F0E8 !important;
  border-color: var(--color-accent) !important;
  color: #1A1A2E !important;
}

/* ── HERO Pill-Button → flacher rechteckiger Stil ── */
/* Überschreibt den Pill/Pfeil-Button komplett */
.db-btn-primary {
  padding: 14px 28px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  border: 1px solid #D4C9B0 !important;
  gap: 10px !important;
}
.db-btn-primary .btn-icon {
  display: none !important;  /* Icon-Badge ausblenden */
}
.db-btn-primary:hover {
  background: #F5F0E8 !important;
  border-color: var(--color-accent) !important;
  color: #1A1A2E !important;
  transform: none !important;
  box-shadow: 0 2px 12px rgba(201,169,110,0.18) !important;
}

/* ── DARK-SECTION BUTTON (.btn-light) ── */
.btn-light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: 8px !important;
  color: #1A1A2E !important;
  padding: 14px 32px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.btn-light:hover {
  background: #F5F0E8 !important;
  border-color: var(--color-accent) !important;
  color: #1A1A2E !important;
}

/* ── CTA Final (dunkle Sektion) → goldener Button ── */
.action-section .btn-gold,
.action-content .btn-gold,
#contact .btn-gold {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
}
.action-section .btn-gold:hover,
.action-content .btn-gold:hover,
#contact .btn-gold:hover {
  background: #b8924d !important;
  border-color: #b8924d !important;
  color: #FFFFFF !important;
}

/* ── FAQ Quiz-Reset-Button ── */
.db-quiz-reset-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.60) !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
}
.db-quiz-reset-btn:hover {
  border-color: rgba(201,169,110,0.40) !important;
  color: var(--color-accent) !important;
}

/* ── Größen-Varianten ── */
.btn-lg  { padding: 16px 36px !important; font-size: 13px !important; }
.btn-xl  { padding: 16px 36px !important; font-size: 13px !important; }

/* ── Glow deaktivieren (Marketing.MBA-Stil ist minimal) ── */
.btn-glow:hover { box-shadow: 0 2px 12px rgba(201,169,110,0.18) !important; }


/* ============================================================
   INFOGRAFIK A — Problèmes (6 dunkle Karten)
============================================================ */
.section-problems {
  padding: 100px 0;
  background: #1A1A2E;
  color: #FFFFFF;
}
.section-problems .section-label,
.section-problems .chip {
  background: rgba(201,169,110,0.12) !important;
  color: var(--color-accent) !important;
  border-color: rgba(201,169,110,0.25) !important;
}
.section-problems h2 {
  color: #FFFFFF !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  margin-top: 12px !important;
}
.section-problems .section-subtitle {
  color: rgba(255,255,255,0.50) !important;
  font-size: 17px !important;
  margin-top: 12px !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow-x: auto;
}
@media (max-width: 768px) {
  .section-problems .section-subtitle { white-space: normal !important; max-width: 90% !important; }
}
.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #2A2A2A;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 56px;
}
.problem-card {
  background: #1A1A2E;
  padding: 40px 32px;
  transition: background 0.2s ease;
}
.problem-card:hover { background: #242442; }
.problem-icon {
  font-size: 26px;
  margin-bottom: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.problem-card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin-bottom: 10px !important;
  line-height: 1.3 !important;
}
.problem-card p {
  font-size: 14px !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .problems-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .problems-grid { grid-template-columns: 1fr; border-radius: 8px; }
  .problem-card  { padding: 28px 24px; }
}


/* ============================================================
   INFOGRAFIK B — Why / La Vérité Inconfortable
============================================================ */
.section-why {
  padding: 100px 0;
  background: #FFFFFF;
}
.section-why .section-label,
.section-why .chip {
  color: var(--color-accent) !important;
  background: var(--color-accent-light) !important;
  border-color: rgba(201,169,110,0.25) !important;
}
.section-why h2 {
  color: var(--color-text) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  margin-top: 12px !important;
}
.why-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--color-border);
}
.why-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
  transition: background 0.2s ease;
}
.why-item:hover { background: #FDFCF9; }
.why-number {
  font-size: 52px;
  font-weight: 700;
  color: #E8E4DC;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: var(--font-h);
}
.why-item p {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: #4A4A5A !important;
  max-width: 680px !important;
  padding-top: 6px !important;
}
.why-item p strong { color: #1A1A2E !important; }
.why-item p em     { color: var(--color-accent) !important; font-style: normal !important; }

@media (max-width: 768px) {
  .why-item { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .why-number { font-size: 36px; }
}


/* ============================================================
   INFOGRAFIK C — Before / After Comparatif
============================================================ */
.section-before-after {
  padding: 100px 0;
  background: var(--color-bg-soft);
}
.section-before-after .section-label,
.section-before-after .chip {
  color: var(--color-accent) !important;
  background: var(--color-accent-light) !important;
  border-color: rgba(201,169,110,0.25) !important;
}
.section-before-after h2 {
  color: var(--color-text) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  margin-top: 12px !important;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  align-items: start;
}
.comparison-col {
  border-radius: 12px;
  padding: 40px;
}
.comparison-col.before {
  background: #FFFFFF;
  border: 1px solid #E8E4DC;
}
.comparison-col.after {
  background: #1A1A2E;
  color: #FFFFFF;
  border: none;
}
.col-header { margin-bottom: 28px; }
.col-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.before-badge {
  background: #F5F0E8;
  color: #9A9A8A;
}
.after-badge {
  background: var(--color-accent);
  color: #FFFFFF;
}
.comparison-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.comparison-list li {
  padding: 16px 0 16px 24px !important;
  border-bottom: 1px solid !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  position: relative !important;
}
.comparison-col.before .comparison-list li {
  border-color: #F0EDE6 !important;
  color: #8A8A7A !important;
}
.comparison-col.before .comparison-list li::before {
  content: "✗" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  color: #D0CCC5 !important;
  font-size: 13px !important;
}
.comparison-col.after .comparison-list li {
  border-color: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.65) !important;
}
.comparison-col.after .comparison-list li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  color: var(--color-accent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.comparison-col.after h3,
.comparison-col.after .col-header { /* branding header text */ }

@media (max-width: 768px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-col  { padding: 28px 24px; }
}



/* ============================================================
   KORREKTUREN v5.3.0
   1. Label/Badge: fit-content
   2. Étapes: alle Karten hell
   3. FAQ: weißer Hintergrund
   4. Quiz: komprimiert
   5. Hero Portrait
============================================================ */

/* ── 1. LABEL / CHIP: nie full-width ── */
.chip,
.section-label,
.label,
.col-badge,
.db-badge-pulse,
.exit-label {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* ── 2. ÉTAPES: alle Karten einheitlich hell ── */
.db-etape-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 14px rgba(26,26,46,0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-mask-image: none !important;
}
.db-etape-card:hover {
  background: #FDFCF9 !important;
  border-color: rgba(201,169,110,0.40) !important;
  box-shadow: 0 8px 32px rgba(201,169,110,0.14) !important;
  transform: translateY(-3px) !important;
}
.db-etape-card h3 {
  color: var(--color-text) !important;
}
.db-etape-card p {
  color: var(--color-text-muted) !important;
}
.db-etape-n {
  color: var(--color-accent) !important;
  opacity: 0.15 !important;
  -webkit-text-stroke: 0 !important;
}
.db-etape-badge {
  color: var(--color-accent) !important;
  border-color: rgba(201,169,110,0.35) !important;
  background: var(--color-accent-light) !important;
}
/* Mobile-Überschreibung ebenfalls hell */
@media (max-width: 600px) {
  .db-etape-card {
    background: #FFFFFF !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 2px 10px rgba(26,26,46,0.05) !important;
  }
  .db-etape-card::after { display: none !important; }
  .db-etape-card h3 { color: var(--color-text) !important; }
  .db-etape-card p   { color: var(--color-text-muted) !important; }
  .db-etape-n { color: var(--color-accent) !important; opacity: 0.15 !important; -webkit-text-stroke: 0 !important; }
}

/* ── 3. FAQ: weißer Hintergrund, elegantes Accordion ── */
.db-qa,
#qa {
  background: #FFFFFF !important;
}
.db-qa::before { display: none !important; }

.db-qa-head h2 {
  color: var(--color-text) !important;
}
.db-qa-head p {
  color: var(--color-text-muted) !important;
}
.db-qa-head .chip {
  background: var(--color-accent-light) !important;
  color: var(--color-accent) !important;
  border-color: rgba(201,169,110,0.30) !important;
}

/* FAQ Accordion Cards: hell mit eleganter Border */
.db-accordion .db-acc-item {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.db-accordion .db-acc-item:hover {
  border-color: rgba(201,169,110,0.45) !important;
  box-shadow: 0 2px 16px rgba(201,169,110,0.10) !important;
}
.db-accordion .db-acc-item.active {
  border-color: var(--color-accent) !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.14) !important;
}

/* Goldener linker Streifen bei geöffnetem Item */
.db-accordion .db-acc-item.active::before {
  background: var(--color-accent) !important;
}

.db-accordion .db-acc-trigger {
  color: var(--color-text) !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.db-accordion .db-acc-trigger:hover {
  color: var(--color-primary) !important;
}

/* Goldene +/- Icons */
.db-acc-icon {
  color: var(--color-accent) !important;
  flex-shrink: 0 !important;
}

.db-acc-body,
.db-acc-body-inner {
  color: var(--color-text-muted) !important;
}

/* ── 4. AUTO-DIAGNOSTIC: komprimiert auf ~500px ── */
.db-quiz {
  padding: 50px 0 !important;
}
.db-quiz-header {
  margin-bottom: 1.5rem !important;
}
.orb-arena {
  max-width: 380px !important;
  height: 380px !important;
  margin-bottom: 1rem !important;
}
@supports (aspect-ratio: 1) {
  .orb-arena {
    height: auto !important;
    aspect-ratio: 1 !important;
    max-width: 380px !important;
  }
}

/* ── 5. HERO PORTRAIT — Driss Allou rechts ── */
.db-hero-section {
  /* Position: relative schon gesetzt — nichts ändern nötig */
}

.db-hero-portrait {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 40% !important;
  max-width: 520px !important;
  height: 90% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  /* Subtiler goldener linker Schatten als Übergang */
  mask-image: linear-gradient(to right, transparent 0%, black 15%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%) !important;
}

.db-hero-portrait-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  /* Subtiler goldener Box-Shadow / Overlay-Effekt */
  filter: drop-shadow(-8px 0 24px rgba(201,169,110,0.18)) !important;
}

/* Sicherstellen dass Text-Content darüber liegt */
.db-hero-container { z-index: 2 !important; position: relative !important; }

/* Portrait auf Mobile ausblenden */
@media (max-width: 900px) {
  .db-hero-portrait { display: none !important; }
  .db-hero-content  { max-width: 100% !important; }
}



/* ============================================================
   KORREKTUREN v5.4.0
   1. Quiz: Orbital → kompaktes Grid
   2. Team: Row-Divs, Namen-Stile, kein Bild-Filter
   3. Footer: hell
   4. Hero Portrait: kein rechter Rand
============================================================ */

/* ─────────────────────────────────────────
   1. AUTO-DIAGNOSTIC — Grid-Layout
   JS-Hooks (data-q, #orb-arena, .orb-node) bleiben erhalten.
   Nur das visuelle Layout wird von Orbit auf Grid umgestellt.
───────────────────────────────────────── */
.db-quiz {
  padding: 80px 0 !important;
  background: #1A1A2E !important;
}

/* Arena → CSS-Grid statt Orbit */
.orb-arena {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  position: static !important;
  height: auto !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Dekorative Orbital-Elemente ausblenden */
.orb-hub,
.orb-ring,
.orb-svg { display: none !important; }

/* Nodes: Grid-Karten statt absolut positionierte Kreise */
.orb-node {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  border: 1px solid #2A2A2A !important;
  background: #1A1A1A !important;
  cursor: pointer !important;
  z-index: auto !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  opacity: 1 !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  transition-delay: 0s !important;
}
.orb-node:hover,
.orb-node:focus-visible {
  border-color: var(--color-accent) !important;
  background: #1F1A12 !important;
  transform: none !important;
  box-shadow: none !important;
}
.orb-node.active {
  border-color: var(--color-accent) !important;
  background: rgba(201,169,110,0.10) !important;
}
.orb-node.answered-oui {
  border-color: rgba(34,197,94,0.50) !important;
  background: rgba(34,197,94,0.07) !important;
}
.orb-node.answered-non {
  border-color: rgba(239,68,68,0.50) !important;
  background: rgba(239,68,68,0.07) !important;
}

/* Node-Inhalte */
.orb-node-glow { display: none !important; }

.orb-node-num {
  position: static !important;
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  font-family: var(--font-h) !important;
}

.orb-node-question {
  display: block !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.70) !important;
  line-height: 1.55 !important;
  font-family: var(--font-b) !important;
  font-weight: 400 !important;
}

.orb-node-check {
  display: none !important; /* Checkmark in Grid nicht nötig — State durch Border-Farbe */
}
/* Checkmark für beantwortete Nodes wieder einblenden */
.orb-node.answered-oui .orb-node-check,
.orb-node.answered-non .orb-node-check {
  display: block !important;
  margin-top: 10px !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.50) !important;
}

/* Panel-Overlay unter dem Grid */
.orb-panel {
  max-width: 900px !important;
  margin: 0 auto !important;
  position: static !important;
  transform: none !important;
}

/* Responsive Grid */
@media (max-width: 768px) {
  .orb-arena {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .orb-arena { grid-template-columns: 1fr !important; }
  .orb-node  { padding: 20px 18px !important; }
}


/* ─────────────────────────────────────────
   2. TEAM — Row-Divs, Namen, kein Filter
───────────────────────────────────────── */

/* Team-Grid: Flex-Column statt 6-Spalten-Grid */
.team-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
/* Alte nth-child grid-column Regeln deaktivieren */
.team-card:nth-child(1),
.team-card:nth-child(2),
.team-card:nth-child(3),
.team-card:nth-child(4),
.team-card:nth-child(5) {
  grid-column: auto !important;
}

/* Row Wrappers */
.team-row { width: 100% !important; }

.team-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 840px !important;
  margin: 0 auto !important;
}

.team-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* Team-Karten: hell */
.team-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  box-shadow: 0 2px 12px rgba(26,26,46,0.05) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative !important;
}
.team-card:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 32px rgba(201,169,110,0.15) !important;
  transform: none !important;
}

/* Bilder: KEIN Filter, KEIN Grayscale, KEIN Hover-Effekt */
.team-card-img img,
.team-card img {
  filter: none !important;
  opacity: 1 !important;
  -webkit-filter: none !important;
  transition: transform 0.4s ease !important;
}
.team-card:hover .team-card-img img,
.team-card:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.03) !important;
}

/* Namen und Rollen */
.team-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
.team-title {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: block !important;
  font-family: var(--font-h) !important;
}
.team-desc {
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* team-card-info Padding */
.team-card-info {
  padding: 22px 24px 24px !important;
}

/* Alte .team-role-Stile — auf neue Klassen umleiten */
.team-role {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Responsive */
@media (max-width: 900px) {
  .team-row-2 { grid-template-columns: 1fr 1fr !important; }
  .team-row-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .team-row-2,
  .team-row-3 { grid-template-columns: 1fr !important; }
}


/* ─────────────────────────────────────────
   3. FOOTER — hell (weiß)
───────────────────────────────────────── */
.db-footer,
footer,
.site-footer,
#colophon {
  background: #FFFFFF !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

.db-footer h4,
.db-footer h3,
footer h4,
footer h3 {
  color: var(--color-text) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.db-footer a,
footer a {
  color: var(--color-text-muted) !important;
}
.db-footer a:hover,
footer a:hover {
  color: var(--color-accent) !important;
}

.db-footer p,
footer p {
  color: var(--color-text-muted) !important;
}

.db-footer-copy,
.footer-copyright {
  color: #AAAAAA !important;
}

.db-footer-legal a {
  color: #AAAAAA !important;
}
.db-footer-legal a:hover {
  color: var(--color-accent) !important;
}

.db-footer-bottom {
  border-top-color: var(--color-border) !important;
}

/* Footer-Logo: dunkel (statt weiß invertiert) */
.footer-logo-svg,
footer .logo img,
.db-footer img[class*="logo"] {
  filter: none !important;
}

/* Social Icons */
.db-footer-social {
  color: var(--color-text-muted) !important;
  border-color: var(--color-border) !important;
}
.db-footer-social:hover {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Sticky CTA (Mobile) passt sich an — bleibt dunkel für Kontrast */
.db-sticky-cta { background: var(--color-primary) !important; }


/* ─────────────────────────────────────────
   4. HERO PORTRAIT — bis zum rechten Rand,
   kein weißer Gap
───────────────────────────────────────── */
.db-hero-section {
  overflow: hidden !important;
}

.db-hero-portrait {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 48% !important;
  max-width: none !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
  /* Linke Kante weich in Hero-Hintergrund überblenden */
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 12%, black 28%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 12%, black 28%) !important;
}

.db-hero-portrait-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 30% top !important;
  display: block !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text-Content klar über dem Portrait */
.db-hero-container {
  position: relative !important;
  z-index: 2 !important;
}
.db-hero-content {
  max-width: 52% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile: Portrait ausblenden */
@media (max-width: 900px) {
  .db-hero-portrait { display: none !important; }
  .db-hero-content  { max-width: 100% !important; }
}



/* ============================================================
   FIX v5.5.0
   1. Hero Portrait — kein rechter Rand
      Ursache: theme.json setzt padding-right: min(6.5rem, 8vw)
      auf .wp-site-blocks — das beschneidet den Hero.
   2. CTA-Bild — kein Brightness-Effekt
============================================================ */

/* ── 1. WordPress Block-Theme Root-Padding entfernen ──
   Alle Sektionen dieser Landing Page haben eigene Container.
   Das Theme-Padding auf .wp-site-blocks wird nicht benötigt
   und ist der Grund für den weißen Streifen rechts im Hero.
───────────────────────────────────────── */
.wp-site-blocks,
.is-layout-constrained,
.is-layout-flow,
.wp-block-post-content,
.entry-content,
#content,
main#main-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-inline: 0 !important;
}

/* Hero-Sektion: explizit volle Viewport-Breite */
.db-hero-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Portrait: volle Höhe, exakt bis zum rechten Rand */
.db-hero-portrait {
  position: absolute !important;
  inset: 0 0 0 auto !important;   /* top:0 right:0 bottom:0 left:auto */
  width: 48% !important;
  max-width: none !important;
  pointer-events: none !important;
  overflow: hidden !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.5) 10%,
    black 25%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.5) 10%,
    black 25%
  ) !important;
  /* Sicherheits-Überstand: 1px vermeidet Sub-Pixel-Gap */
  right: -1px !important;
}

.db-hero-portrait-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 35% top !important;
  display: block !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Text über dem Portrait halten */
.db-hero-container { position: relative !important; z-index: 2 !important; }
.db-hero-content   { max-width: 52% !important; position: relative !important; z-index: 2 !important; }

/* Mobile */
@media (max-width: 900px) {
  .db-hero-portrait { display: none !important; }
  .db-hero-content  { max-width: 100% !important; }
}


/* ── 2. CTA-SEKTION — Bild-Filter komplett entfernen ──
   Alle bisherigen brightness()-Regeln aus früheren Versionen
   werden hier endgültig mit filter: none überschrieben.
───────────────────────────────────────── */
.action-image img,
.action-section .action-image img,
.action-section:hover .action-image img,
#contact .action-image img,
#contact:hover .action-image img {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  brightness: unset !important;
  transition: none !important;
  transform: none !important;
}

/* Kein Scale/Transform auf dem Bild-Wrapper */
.action-image {
  overflow: hidden !important;
}
.action-image:hover img,
.action-section:hover .action-image img {
  filter: none !important;
  transform: none !important;
}



/* ══════════════════════════════════════
   FOOTER v5.7.0 — Gold Glow Style
══════════════════════════════════════ */

/* Override old dark-theme footer rules */
footer,
.site-footer,
#colophon,
.db-footer {
  background: #F8F7F4 !important;
  border-top: none !important;
  padding: 64px 40px 32px !important;
}

/* Reset old link overrides inside footer */
.db-footer a,
footer a,
.site-footer a {
  color: #5A5A6A !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
  padding-left: 0 !important;
}
footer a:hover,
.site-footer a:hover,
.db-footer a:hover { padding-left: 0 !important; }

body { background-color: #F8F7F4; }

.site-main, #main, .main-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.db-footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
  width: 100%;
  overflow: hidden;
  border: none !important;
}

.db-footer::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: -80px;
  left: 20%;
  width: 340px;
  height: 340px;
  background: rgba(201, 169, 110, 0.18);
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}

.db-footer::after {
  content: '';
  pointer-events: none;
  position: absolute;
  bottom: -60px;
  right: 15%;
  width: 300px;
  height: 300px;
  background: rgba(201, 169, 110, 0.13);
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}

.db-footer-glass {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 60px;
  border-radius: 20px;
  background: radial-gradient(circle at 25% 60%, rgba(255,255,255,0.98) 0%, rgba(251,247,240,0.95) 60%, rgba(248,243,234,0.97) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(201, 169, 110, 0.25) !important;
  box-shadow: 0 0 80px rgba(201,169,110,0.12), 0 8px 48px rgba(201,169,110,0.08), 0 2px 16px rgba(0,0,0,0.04);
  overflow: hidden;
}

.db-footer-glass::before {
  content: '';
  position: absolute;
  top: -60px; left: 10%;
  width: 280px; height: 280px;
  background: rgba(201,169,110,0.12);
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.db-footer-glass::after {
  content: '';
  position: absolute;
  bottom: -40px; right: 8%;
  width: 240px; height: 240px;
  background: rgba(201,169,110,0.09);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.db-footer-grid,
.db-footer-divider,
.db-footer-bottom-bar {
  position: relative;
  z-index: 2;
}

.db-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.6fr !important;
  gap: 48px !important;
  align-items: start;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.db-footer-logo {
  display: inline-block;
  margin-bottom: 18px;
  text-decoration: none !important;
}

.db-footer-logo img,
.db-footer-logo-img {
  height: 52px;
  width: auto;
}

.db-footer-brand p,
.db-footer-desc {
  font-size: 13.5px !important;
  color: #6B6B7B !important;
  line-height: 1.8 !important;
  max-width: 260px;
  margin: 0 0 24px !important;
}

.db-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  border-radius: 8px !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,0.06) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.db-footer-social:hover {
  border-color: #C9A96E !important;
  background: rgba(201,169,110,0.15) !important;
  color: #B8922A !important;
  transform: translateY(-1px);
  padding-left: 0 !important;
}

.db-footer-heading {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #C9A96E !important;
  margin: 0 0 18px !important;
  text-transform: uppercase !important;
}

.db-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.db-footer-links li { margin-bottom: 11px !important; }

.db-footer-links a {
  font-size: 13.5px !important;
  color: #5A5A6A !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  padding-left: 0 !important;
}

.db-footer-links a:hover {
  color: #C9A96E !important;
  padding-left: 0 !important;
}

.db-footer-contact-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
}

.db-footer-contact-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 13px !important;
}

.db-footer-contact-list svg {
  color: #C9A96E !important;
  flex-shrink: 0;
  margin-top: 1px;
}

.db-footer-contact-list a,
.db-footer-contact-list span {
  font-size: 13px !important;
  color: #5A5A6A !important;
  text-decoration: none !important;
  line-height: 1.5;
  transition: color 0.2s;
}

.db-footer-contact-list a:hover { color: #C9A96E !important; }

.db-footer-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 6px;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, #C9A96E 0%, #B8922A 100%) !important;
  color: #1A1A2E !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 16px rgba(201,169,110,0.35);
  border: none !important;
}

.db-footer-cta:hover {
  background: linear-gradient(135deg, #D4B87A 0%, #C9A96E 100%) !important;
  box-shadow: 0 6px 24px rgba(201,169,110,0.45);
  transform: translateY(-1px);
  color: #1A1A2E !important;
}

.db-footer-divider {
  border: none !important;
  border-top: 1px solid rgba(201,169,110,0.2) !important;
  margin: 40px 0 24px;
}

.db-footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.db-footer-copy {
  font-size: 12px !important;
  color: #9B9BA8 !important;
  margin: 0;
}

.db-footer-bottom-links {
  display: flex;
  gap: 20px;
}

.db-footer-bottom-links a {
  font-size: 12px !important;
  color: #9B9BA8 !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.db-footer-bottom-links a:hover {
  color: #C9A96E !important;
  padding-left: 0 !important;
}

/* Live dot animation */
.db-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.db-live-dot::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C9A96E;
  animation: db-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes db-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}

/* ── Responsive: 1024px → 2-column ── */
@media (max-width: 1024px) {
  .db-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .db-footer-glass { padding: 44px 40px; }
}

/* ── Responsive: 640px → 1-column ── */
@media (max-width: 640px) {
  .db-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .db-footer-glass {
    padding: 36px 24px;
    border-radius: 14px;
    margin: 0 16px;
  }
  .db-footer {
    padding: 40px 0 24px !important;
  }
  .db-footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Responsive: 380px ── */
@media (max-width: 380px) {
  .db-footer-glass { margin: 0 12px; padding: 28px 18px; }
  .db-footer-heading { font-size: 9px !important; }
  .db-footer-links a,
  .db-footer-contact-list a,
  .db-footer-desc { font-size: 13px !important; }
}

/* ══════════════════════════════════════
   TEAM NAMES v5.7.0
══════════════════════════════════════ */
.team-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  margin: 20px 0 6px !important;
  letter-spacing: -0.01em;
}

.team-title {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: #C9A96E !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════
   AUTO-DIAGNOSTIC: Remove extra space v5.7.0
══════════════════════════════════════ */
.auto-diagnostic-section,
[id*="auto-diagnostic"],
[id*="diagnostic"] {
  padding-bottom: 60px !important;
  min-height: unset !important;
  height: auto !important;
}

.diagnostic-widget-wrapper,
.diagnostic-orbit-container,
.auto-diagnostic-section > div {
  min-height: unset !important;
  height: auto !important;
}

/* ══════════════════════════════════════
   HERO: Decorative circles z-index fix v5.7.0
══════════════════════════════════════ */
.hero-section { overflow: hidden; position: relative; }

.hero-decorative-circles,
.hero-circle,
.hero-section [class*="circle"],
.hero-section [class*="decoration"] {
  z-index: 0 !important;
}

.hero-image-wrapper,
.hero-right,
.hero-section [class*="col"]:last-child {
  z-index: 2 !important;
  position: relative !important;
}

/* ══════════════════════════════════════
   SECTION SPACING HARMONISATION v5.7.0
══════════════════════════════════════ */
section { scroll-margin-top: 80px; }

.section-services, [id*="services"] { padding-bottom: 60px !important; }
.section-about, [id*="apropos"]     { padding-top: 60px !important; }
.section-faq, [id*="faq"], [id*="qa"] {
  padding-top: 60px !important;
  margin-top: 0 !important;
}


/* ══════════════════════════════════════
   v5.8.0 — Footer Logo + Hero Buttons + Trust Line
══════════════════════════════════════ */

/* ── Footer logo: Navy-dark default → Gold on hover (Lösung B) ── */
.db-footer-logo img,
.db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(800%) hue-rotate(195deg) brightness(85%) !important;
  height: 52px !important;
  width: auto !important;
  display: block;
  transition: filter 0.3s ease !important;
}

.db-footer-logo:hover img,
.db-footer-logo:hover .db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(500%) hue-rotate(5deg) brightness(95%) !important;
}

/* ── Hero primary button: Gold gradient + pulse ── */
.db-btn-primary {
  background: linear-gradient(135deg, #C9A96E 0%, #A8782A 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(201,169,110,0.45), 0 2px 8px rgba(201,169,110,0.2) !important;
  animation: hero-btn-pulse 2.5s ease-in-out infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

.db-btn-primary .btn-icon {
  background: rgba(255,255,255,0.2) !important;
}

.db-btn-primary .btn-icon svg {
  color: #FFFFFF !important;
}

/* Glanz-Sweep beim Hover */
.db-btn-primary::before {
  content: '' !important;
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}

.db-btn-primary:hover::before {
  left: 150%;
}

.db-btn-primary:hover {
  background: linear-gradient(135deg, #D4B87A 0%, #C9A96E 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 40px rgba(201,169,110,0.55), 0 4px 12px rgba(201,169,110,0.3) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}

@keyframes hero-btn-pulse {
  0%   { box-shadow: 0 6px 28px rgba(201,169,110,0.45), 0 0 0 0 rgba(201,169,110,0.4); }
  50%  { box-shadow: 0 6px 28px rgba(201,169,110,0.45), 0 0 0 10px rgba(201,169,110,0); }
  100% { box-shadow: 0 6px 28px rgba(201,169,110,0.45), 0 0 0 0 rgba(201,169,110,0); }
}

/* ── Hero secondary button: Ghost style ── */
.db-btn-ghost {
  background: transparent !important;
  color: #1A1A2E !important;
  border: 1.5px solid #D4C9B0 !important;
  box-shadow: none !important;
}

.db-btn-ghost:hover {
  border-color: #C9A96E !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,0.05) !important;
  transform: translateY(-1px) !important;
}

/* ── Trust line: stars + refined style ── */
.db-hero-social-proof {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: #8A8A9A !important;
  margin-top: 8px !important;
  text-transform: uppercase;
}

.db-hero-social-proof::before {
  content: '★★★★★' !important;
  color: #C9A96E !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .db-btn-primary { animation: none !important; }
}


/* ══════════════════════════════════════
   v5.9.0 — 7 Corrections
══════════════════════════════════════ */

/* ── 1. AUTO-DIAGNOSTIC: Remove black empty space ── */
/* Root cause: .db-quiz-results sits in flow with opacity:0 — takes space */
.db-quiz-results {
  display: none !important;
}
.db-quiz-results.visible {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.db-quiz,
#questions {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  padding-bottom: 64px !important;
  overflow: hidden !important;
}

/* Also target any explicit diagnostic selector */
#auto-diagnostic,
.auto-diagnostic-section,
[id*="diagnostic"] {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  padding-bottom: 64px !important;
}

#auto-diagnostic > *,
.auto-diagnostic-section > *,
.diagnostic-container,
.diagnostic-wrapper {
  height: auto !important;
  min-height: unset !important;
}

/* ── 2. TEAM NAMES — Strengthen CSS ── */
.team-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  margin: 20px 0 5px !important;
  letter-spacing: -0.01em;
}

.team-title {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: #C9A96E !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

/* ── 3. PROGRAMME — CTA Button golden ── */
#offer .btn-gold,
#offer .btn.btn-gold,
.db-offer-cta,
.db-offer-cta.btn-gold {
  background: linear-gradient(135deg, #C9A96E 0%, #A8782A 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(201,169,110,0.4) !important;
}

#offer .btn-gold:hover,
#offer .btn.btn-gold:hover,
.db-offer-cta:hover {
  background: linear-gradient(135deg, #D4B87A 0%, #C9A96E 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 32px rgba(201,169,110,0.5) !important;
  transform: translateY(-2px) !important;
}

/* ── 4. FAQ — Ensure visibility + clean white style ── */
.db-qa,
#qa {
  display: block !important;
  visibility: visible !important;
  background: #FFFFFF !important;
  padding: 80px 0 !important;
}

.db-qa-head h2 {
  color: #1A1A2E !important;
}

.db-qa-head p {
  color: #6B6B7B !important;
}

.db-qa-head .chip {
  background: rgba(201,169,110,0.1) !important;
  color: #C9A96E !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
}

.db-accordion .db-acc-item {
  background: #FFFFFF !important;
  border: 1px solid #E8E4DC !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}

.db-acc-trigger {
  color: #1A1A2E !important;
  font-weight: 500 !important;
}

.db-acc-trigger:hover {
  color: #C9A96E !important;
}

.db-acc-icon {
  color: #C9A96E !important;
}

/* ── 5. ALL IMAGES — Remove hover dark effect globally ── */
.testimonial-card img,
.team-card img,
.team-card-img img,
section img:not(.db-footer-logo-img):not(.logo):not(.db-nav img) {
  filter: none !important;
  opacity: 1 !important;
  transition: transform 0.3s ease !important;
}

.testimonial-card::before,
.testimonial-card::after,
.team-card::before,
.team-card::after {
  background: none !important;
  opacity: 0 !important;
}

/* ── 6. SECTION LABEL BADGES — consistent gold style ── */
.chip,
.section-label,
[class*="section-badge"],
[class*="label-badge"],
.section-tag {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: rgba(201,169,110,0.10) !important;
  border: 1px solid rgba(201,169,110,0.30) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  color: #C9A96E !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* On dark sections: slightly brighter */
.dark-section .chip,
.dark-section .section-label,
[style*="background: #0"] .section-label {
  background: rgba(201,169,110,0.15) !important;
  border-color: rgba(201,169,110,0.4) !important;
}

/* ── 7. HEADER CTA — golden hover ── */
.db-nav .btn-gold {
  border: 1px solid rgba(201,169,110,0.4) !important;
  transition: all 0.2s ease !important;
}

.db-nav .btn-gold:hover {
  border-color: #C9A96E !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,0.07) !important;
}

/* Mobile menu CTA also gets gold hover */
.db-mobile-menu .btn-gold:hover {
  border-color: #C9A96E !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,0.07) !important;
}

/* FAQ Accordion JS styles (for new .faq-item variant if added) */
.faq-item {
  border-bottom: 1px solid #E8E4DC;
}

.faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 22px 0 !important;
  background: none !important;
  border: none !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #1A1A2E !important;
  cursor: pointer !important;
  gap: 16px !important;
}

.faq-icon {
  font-size: 20px !important;
  color: #C9A96E !important;
  font-weight: 300 !important;
  flex-shrink: 0;
  transition: transform 0.3s ease !important;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg) !important;
}


/* ══════════════════════════════════════
   v6.0.0 — 8 Corrections (definitive)
══════════════════════════════════════ */

/* ─── 1. AUTO-DIAGNOSTIC: fix orb-panel + results taking invisible space ─── */

/* orb-panel: was opacity:0 but in flow → takes up ~200px */
.orb-panel {
  display: none !important;
}
.orb-panel.visible {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* quiz results: already display:none from v5.9.0 — reinforce */
.db-quiz-results {
  display: none !important;
}
.db-quiz-results.visible {
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Reduce excess dark padding */
.db-quiz,
#questions {
  padding: 60px 0 !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
}

/* ─── 2. TEAM NAMES: force visible ─── */
.team-card .team-name,
.team-card-info .team-name,
.team-name {
  display: block !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1A1A2E !important;
  margin: 16px 0 5px !important;
  letter-spacing: -0.01em !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ─── 3. TEAM LAYOUT: 2+3 rows ─── */
.team-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  max-width: 840px !important;
  margin: 0 auto !important;
}

.team-row-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 768px) {
  .team-row-2,
  .team-row-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .team-row-2,
  .team-row-3 { grid-template-columns: 1fr !important; }
}

/* ─── 4. PROGRAMME ELITE BUTTON: gold gradient ─── */
#offer .btn-gold,
.db-offer-cta,
.db-offer-cta-wrap .btn-gold {
  background: linear-gradient(135deg, #C9A96E, #B8935A) !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 16px 40px !important;
  border-radius: 4px !important;
  box-shadow: 0 6px 24px rgba(201,169,110,0.4) !important;
  transition: all 0.3s ease !important;
}

#offer .btn-gold:hover,
.db-offer-cta:hover {
  background: linear-gradient(135deg, #D4B87A, #C9A96E) !important;
  box-shadow: 0 10px 32px rgba(201,169,110,0.55) !important;
  transform: translateY(-2px) !important;
  color: #1A1A2E !important;
}

/* ─── 5. CTA FINAL IMAGE: no dark effect by default ─── */
.action-image img {
  filter: none !important;
  opacity: 1 !important;
  brightness: unset !important;
}

.action-image:hover img {
  filter: brightness(0.92) !important;
}

.action-section .action-image img,
#contact .action-image img {
  filter: none !important;
  opacity: 1 !important;
}

/* ─── 6. FAQ: ensure visible, white bg, clean accordion ─── */
.db-qa,
#qa {
  display: block !important;
  visibility: visible !important;
  background: #FFFFFF !important;
  padding: 80px 0 !important;
}

.db-qa-head h2 { color: #1A1A2E !important; }
.db-qa-head p  { color: #6B6B7B !important; }

.db-accordion .db-acc-item {
  background: #FFFFFF !important;
  border: 1px solid #E8E4DC !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}

.db-accordion .db-acc-item:hover {
  border-color: rgba(201,169,110,0.5) !important;
  box-shadow: 0 4px 16px rgba(201,169,110,0.1) !important;
}

.db-acc-trigger {
  color: #1A1A2E !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.db-acc-trigger:hover { color: #C9A96E !important; }

.db-acc-icon,
.db-acc-trigger svg {
  color: #C9A96E !important;
}

/* ─── 7. HEADER CTA: gold hover ─── */
.db-nav .btn-gold,
header .btn-gold {
  transition: all 0.3s ease !important;
}

.db-nav .btn-gold:hover,
header .btn-gold:hover {
  background: #B8935A !important;
  color: #FFFFFF !important;
  border-color: #B8935A !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.4) !important;
}

/* ─── 8. SECTION BADGE: unified .section-badge class ─── */
.section-badge,
.chip {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: rgba(201,169,110,0.15) !important;
  color: #C9A96E !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  width: auto !important;
  max-width: fit-content !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════
   v6.1.0 — 3 Visual Fixes
══════════════════════════════════════ */

/* ─── 1. HEADER CTA: premium gold gradient (replaces outlined style) ─── */
.db-nav .btn-gold,
.db-nav a.btn-gold,
header .btn-gold {
  background: linear-gradient(135deg, #C9A96E 0%, #B8935A 100%) !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.35) !important;
  transition: all 0.3s ease !important;
  animation: none !important;
}

.db-nav .btn-gold:hover,
.db-nav a.btn-gold:hover,
header .btn-gold:hover {
  background: linear-gradient(135deg, #D4B47A 0%, #C9A96E 100%) !important;
  box-shadow: 0 6px 30px rgba(201,169,110,0.5) !important;
  transform: translateY(-1px) !important;
  color: #1A1A2E !important;
  border-color: transparent !important;
}

/* ─── 2. BEFORE/AFTER — left column "Sans DB Consulting": dark bg + white text ─── */
.comparison-col.before {
  background: rgba(26,26,46,0.92) !important;
  border: 1px solid rgba(201,169,110,0.15) !important;
  color: #F8F7F4 !important;
}

.comparison-col.before .col-badge,
.comparison-col.before .before-badge {
  background: rgba(248,247,244,0.1) !important;
  color: rgba(248,247,244,0.7) !important;
  border: 1px solid rgba(248,247,244,0.2) !important;
}

.comparison-col.before .comparison-list li {
  color: rgba(248,247,244,0.75) !important;
  border-color: rgba(248,247,244,0.1) !important;
}

.comparison-col.before .comparison-list li::before {
  color: rgba(248,247,244,0.35) !important;
}

/* ─── 3. FOOTER LOGO: restore to larger size ─── */
.db-footer-logo img,
.db-footer-logo-img {
  width: 160px !important;
  height: auto !important;
  max-width: 180px !important;
  min-width: 120px !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(800%) hue-rotate(195deg) brightness(85%) !important;
  transition: filter 0.3s ease !important;
  display: block !important;
}

.db-footer-logo:hover img,
.db-footer-logo:hover .db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(500%) hue-rotate(5deg) brightness(95%) !important;
}


/* ══════════════════════════════════════
   v6.2.0 — Unified CTAs + Footer Brand
══════════════════════════════════════ */

/* ─── 1. GLOBAL GOLD CTA — all primary buttons unified ─── */

/* Primary: full gold gradient — covers every button variant on the page */
.btn-primary-gold,
.btn.btn-gold,
.btn-gold.btn-lg,
.btn-gold.btn-xl,
.btn-gold.btn-glow,
.db-offer-cta,
.db-quiz-cta-btn,
.action-btn,
.db-comp-cta .btn-gold {
  background: linear-gradient(135deg, #C9A96E 0%, #B8935A 100%) !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.35) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.btn-primary-gold:hover,
.btn.btn-gold:hover,
.btn-gold.btn-lg:hover,
.btn-gold.btn-xl:hover,
.btn-gold.btn-glow:hover,
.db-offer-cta:hover,
.db-quiz-cta-btn:hover,
.action-btn:hover,
.db-comp-cta .btn-gold:hover {
  background: linear-gradient(135deg, #D4B47A 0%, #C9A96E 100%) !important;
  box-shadow: 0 6px 30px rgba(201,169,110,0.5) !important;
  transform: translateY(-1px) !important;
  color: #1A1A2E !important;
}

/* Hero primary button — same gradient, keep pulse animation */
.db-btn-primary {
  background: linear-gradient(135deg, #C9A96E 0%, #B8935A 100%) !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.35) !important;
  transition: all 0.3s ease !important;
}

.db-btn-primary:hover {
  background: linear-gradient(135deg, #D4B47A 0%, #C9A96E 100%) !important;
  box-shadow: 0 6px 30px rgba(201,169,110,0.5) !important;
  transform: translateY(-1px) !important;
  color: #1A1A2E !important;
}

.db-btn-primary .btn-icon {
  background: rgba(26,26,46,0.15) !important;
}

.db-btn-primary .btn-icon svg {
  color: #1A1A2E !important;
}

/* Services "En savoir plus" links — gold outlined */
.db-svc-link,
.service-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #C9A96E !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201,169,110,0.3) !important;
  padding-bottom: 2px !important;
  transition: all 0.2s ease !important;
}

.db-svc-link:hover,
.service-link:hover {
  color: #B8935A !important;
  border-bottom-color: #B8935A !important;
  gap: 10px !important;
}

/* Hero ghost button — gold outlined, NOT filled */
.db-btn-ghost {
  background: transparent !important;
  color: #C9A96E !important;
  border: 2px solid #C9A96E !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}

.db-btn-ghost:hover {
  background: rgba(201,169,110,0.08) !important;
  border-color: #B8935A !important;
  color: #B8935A !important;
  transform: translateY(-1px) !important;
}

/* Sticky mobile CTA — gold gradient */
.db-sticky-cta-btn {
  background: linear-gradient(135deg, #C9A96E 0%, #B8935A 100%) !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  border: none !important;
}

.db-sticky-cta-btn:hover {
  background: linear-gradient(135deg, #D4B47A 0%, #C9A96E 100%) !important;
  color: #1A1A2E !important;
}

/* ─── 2. FOOTER BRAND: larger logo + tagline ─── */
.db-footer-logo img,
.db-footer-logo-img {
  width: 200px !important;
  height: auto !important;
  max-width: 220px !important;
  min-width: 140px !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(800%) hue-rotate(195deg) brightness(85%) !important;
  transition: filter 0.3s ease !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.db-footer-logo:hover img,
.db-footer-logo:hover .db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(500%) hue-rotate(5deg) brightness(95%) !important;
}

.footer-tagline {
  font-size: 11px !important;
  color: rgba(201,169,110,0.7) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  line-height: 1.8 !important;
}


/* ══════════════════════════════════════
   v6.3.0 — Logo, Shine CTAs, Comparatif
══════════════════════════════════════ */

/* ─── 1. FOOTER LOGO: 280px width ─── */
.db-footer-logo img,
.db-footer-logo-img {
  width: 280px !important;
  height: auto !important;
  max-width: 300px !important;
  min-width: 180px !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(800%) hue-rotate(195deg) brightness(85%) !important;
  transition: filter 0.3s ease !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.db-footer-logo:hover img,
.db-footer-logo:hover .db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(500%) hue-rotate(5deg) brightness(95%) !important;
}

/* ─── 2. SHINY GOLD — keyframes + global class ─── */
@keyframes btn-shine {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Master shine gradient — applied to every primary CTA */
.btn-primary-gold,
.btn.btn-gold,
.btn-gold.btn-lg,
.btn-gold.btn-xl,
.btn-gold.btn-glow,
.db-btn-primary,
.db-offer-cta,
.db-quiz-cta-btn,
.action-btn,
.db-comp-cta .btn-gold,
.db-nav .btn-gold,
.db-nav a.btn-gold,
header .btn-gold,
.db-sticky-cta-btn {
  background: linear-gradient(
    105deg,
    #B8935A 0%,
    #C9A96E 20%,
    #E8D5A3 40%,
    rgba(255,255,255,0.33) 50%,
    #E8D5A3 60%,
    #C9A96E 80%,
    #B8935A 100%
  ) !important;
  background-size: 200% auto !important;
  animation: btn-shine 3s linear infinite !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.4) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.btn-primary-gold:hover,
.btn.btn-gold:hover,
.btn-gold.btn-lg:hover,
.btn-gold.btn-xl:hover,
.btn-gold.btn-glow:hover,
.db-btn-primary:hover,
.db-offer-cta:hover,
.db-quiz-cta-btn:hover,
.action-btn:hover,
.db-comp-cta .btn-gold:hover,
.db-nav .btn-gold:hover,
header .btn-gold:hover,
.db-sticky-cta-btn:hover {
  box-shadow: 0 8px 35px rgba(201,169,110,0.6) !important;
  transform: translateY(-2px) !important;
  animation-duration: 1.5s !important;
  color: #1A1A2E !important;
}

/* Hero btn-icon: stays visible on gold bg */
.db-btn-primary .btn-icon {
  background: rgba(26,26,46,0.12) !important;
}
.db-btn-primary .btn-icon svg { color: #1A1A2E !important; }

/* Kill the old pulse animation on hero button (replaced by shine) */
.db-btn-primary {
  animation: btn-shine 3s linear infinite !important;
}

/* Mobile: disable animation to save battery */
@media (max-width: 640px) {
  .btn.btn-gold,
  .btn-gold.btn-xl,
  .btn-gold.btn-lg,
  .db-btn-primary,
  .db-offer-cta,
  .action-btn {
    animation: none !important;
    background: linear-gradient(135deg, #C9A96E 0%, #B8935A 100%) !important;
    background-size: auto !important;
  }
}

/* Footer CTA mini button also shines */
.db-footer-cta {
  background: linear-gradient(
    105deg,
    #B8935A 0%,
    #C9A96E 20%,
    #E8D5A3 40%,
    rgba(255,255,255,0.33) 50%,
    #E8D5A3 60%,
    #C9A96E 80%,
    #B8935A 100%
  ) !important;
  background-size: 200% auto !important;
  animation: btn-shine 3s linear infinite !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  border: none !important;
}

.db-footer-cta:hover {
  animation-duration: 1.5s !important;
  box-shadow: 0 6px 24px rgba(201,169,110,0.5) !important;
  transform: translateY(-1px) !important;
  color: #1A1A2E !important;
}

/* ─── 3. COMPARATIF "Approche Traditionnelle": light bg + dark text ─── */
.db-comp-bad {
  background: #fdf1f1 !important;
  border: 1px solid rgba(204,68,68,0.15) !important;
}

/* Header text: dark */
.db-comp-bad .db-comp-col-header h3,
.db-comp-bad .db-comp-col-header h3 small {
  color: #1A1A2E !important;
}

.db-comp-bad .db-comp-col-header small {
  color: #666666 !important;
}

/* Section divider border */
.db-comp-bad .db-comp-col-header {
  border-bottom-color: rgba(204,68,68,0.15) !important;
}

/* Icon: red on light bg */
.db-comp-icon-bad {
  background: rgba(204,68,68,0.08) !important;
  color: #cc4444 !important;
}

/* List item icons */
.db-comp-item-bad svg {
  color: #cc4444 !important;
}

/* Strong titles: red */
.db-comp-item-bad strong {
  color: #cc4444 !important;
}

/* Description text: readable dark */
.db-comp-item-bad span,
.db-comp-bad .db-comp-item span {
  color: #444444 !important;
}


/* ══════════════════════════════════════
   v6.4.0 — Footer layout + Buttons complets
══════════════════════════════════════ */

/* ── 1. FOOTER GRID: 4 colonnes, brand top-gauche ── */
.db-footer-grid {
  display: grid !important;
  grid-template-columns: 2.2fr 1fr 1fr 1.5fr !important;
  gap: 48px !important;
  align-items: start !important;
  align-content: start !important;
}

.db-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  align-self: start !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* ── 2. TITRES DE COLONNES: or sur fond crème ── */
.db-footer-glass .db-footer-heading,
.db-footer-grid h4,
.db-footer-grid .db-footer-heading {
  color: #C9A96E !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

/* ── 3. LIENS FOOTER: gris foncé sur fond crème ── */
.db-footer-glass .db-footer-links a,
.db-footer-glass .db-footer-contact-list a,
.db-footer-glass .db-footer-contact-list span {
  color: #5A5A6A !important;
}
.db-footer-glass .db-footer-links a:hover,
.db-footer-glass .db-footer-contact-list a:hover {
  color: #C9A96E !important;
}

/* ── 4. SOCIAL ICONS CONTAINER: flex row ── */
.db-footer-brand .db-footer-social {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  margin-top: 8px !important;
}

/* Icônes sociales individuelles */
.db-social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  border-radius: 8px !important;
  color: #8B8B9B !important;
  background: rgba(201,169,110,0.06) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
}
.db-social-link:hover {
  border-color: #C9A96E !important;
  color: #C9A96E !important;
  background: rgba(201,169,110,0.12) !important;
  transform: translateY(-1px) !important;
}

/* ── 5. BARRE INFÉRIEURE: texte lisible sur fond crème ── */
.db-footer-glass .db-footer-copy {
  color: #8B8B9B !important;
  font-size: 13px !important;
}
.db-footer-glass .db-footer-bottom-links a {
  color: #8B8B9B !important;
  font-size: 13px !important;
}
.db-footer-glass .db-footer-bottom-links a:hover {
  color: #C9A96E !important;
}

/* ── 6. EXIT POPUP CTA: même effet gold shine ── */
.exit-cta-btn {
  background: linear-gradient(
    105deg,
    #B8935A 0%,
    #C9A96E 20%,
    #E8D5A3 40%,
    rgba(255,255,255,0.33) 50%,
    #E8D5A3 60%,
    #C9A96E 80%,
    #B8935A 100%
  ) !important;
  background-size: 200% auto !important;
  animation: btn-shine 3s linear infinite !important;
  color: #1A1A2E !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(201,169,110,0.4) !important;
  padding: 18px 36px !important;
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}
.exit-cta-btn:hover {
  box-shadow: 0 8px 35px rgba(201,169,110,0.6) !important;
  transform: translateY(-2px) !important;
  animation-duration: 1.5s !important;
  color: #1A1A2E !important;
}

/* ── 7. RESPONSIVE: ≤1024px 2 colonnes, brand pleine largeur ── */
@media (max-width: 1024px) {
  .db-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
  .db-footer-brand {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
}
@media (max-width: 640px) {
  .db-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .db-footer-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}

/* ══════════════════════════════════════
   v6.5.0 — Mobile Responsive Komplett
   14 Sektionen • Breakpoints 1024 / 640px
══════════════════════════════════════ */

/* ── 1. ÉTAPES: 3→2 Spalten Tablet ── */
@media (max-width: 1024px) {
  .db-etapes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 640px) {
  .db-etapes-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 2. HEADINGS: Fluid ≤640px ── */
@media (max-width: 640px) {
  h2 {
    font-size: clamp(1.55rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important;
    line-height: 1.3 !important;
  }
}

/* ── 3. HAUPT-CTAs: volle Breite ≤640px ── */
@media (max-width: 640px) {
  .btn.btn-gold,
  .btn-gold,
  .action-btn,
  .db-btn-primary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .db-btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Pill-Button: Icon wieder rechts bündig */
  .db-btn-primary .btn-icon {
    margin-left: auto !important;
  }
}

/* ── 4. SEKTIONS-SEITENABSTÄNDE ≤640px ── */
@media (max-width: 640px) {
  .db-services,
  .db-etapes,
  .db-quiz.db-section,
  .db-offer,
  .section-problems,
  .section-why,
  .section-before-after,
  .testimonials-section,
  .team-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Offer-Glow-Overflow unterdrücken */
  .db-offer {
    overflow: hidden !important;
  }
}

/* ── 5. QUIZ: Kompakte Darstellung ≤640px ── */
@media (max-width: 640px) {
  .db-quiz-header h2,
  .db-quiz-header .db-quiz-header-title {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
  }
  .db-quiz-header p {
    font-size: 14px !important;
  }
  .orb-arena {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 6. ABOUT-STATS: 1 Spalte ≤640px ── */
@media (max-width: 640px) {
  .about-stats {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .about-stat {
    min-width: 100% !important;
    padding: 20px 24px !important;
    text-align: center !important;
  }
}

/* ── 7. SERVICES GRID ≤640px (Fallback) ── */
@media (max-width: 640px) {
  .db-services-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ── 8. TEAM GRID ≤640px ── */
@media (max-width: 640px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .team-row,
  .team-row-2,
  .team-row-3 {
    grid-template-columns: 1fr !important;
    grid-column: 1 !important;
    max-width: 100% !important;
  }
  .team-card img,
  .team-card-img img {
    height: 280px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* ── 9. TESTIMONIALS: Linker Block kompakter ≤640px ── */
@media (max-width: 640px) {
  .testimonials-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .testimonial-case-img img {
    height: 220px !important;
  }
  .testimonial-case-results {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ── 10. FOOTER BOTTOM-BAR ≤640px ── */
@media (max-width: 640px) {
  .db-footer {
    padding: 24px 16px 20px !important;
  }
  .db-footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding-top: 14px !important;
  }
  .db-footer-bottom-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* ── 11. GLOBAL OVERFLOW ≤640px ── */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ══════════════════════════════════════
   v6.5.1 — Shine-Effekt: solides Gold + gleitender Lichtstreifen
   Ersetzt Gradient-Sweep durch ::after Overlay
══════════════════════════════════════ */

/* ── Neuer Keyframe: Streifen gleitet einmal durch, dann Pause ── */
@keyframes shine-streak {
  0%   { transform: translateX(-180%); }
  55%  { transform: translateX(280%); }
  100% { transform: translateX(280%); }
}

/* ── 1. Alle Gold-CTAs: solides Gold, alte Gradient-Animation stoppen ── */
.btn-primary-gold,
.btn.btn-gold,
.btn-gold,
.db-btn-primary,
.db-offer-cta,
.db-quiz-cta-btn,
.action-btn,
.db-footer-cta,
.exit-cta-btn,
.db-sticky-cta-btn,
.db-nav a.btn-gold,
.db-nav .btn-gold,
header a.btn-gold {
  background: #C9A96E !important;
  background-image: none !important;
  background-size: auto !important;
  animation: none !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover: leicht heller, kein Farbjump */
.btn-primary-gold:hover,
.btn.btn-gold:hover,
.btn-gold:hover,
.db-btn-primary:hover,
.db-offer-cta:hover,
.db-quiz-cta-btn:hover,
.action-btn:hover,
.db-footer-cta:hover,
.exit-cta-btn:hover,
.db-sticky-cta-btn:hover,
.db-nav a.btn-gold:hover,
header a.btn-gold:hover {
  background: #D4B47A !important;
  background-image: none !important;
}

/* ── 2. Lichtstreifen via ::after — gleitet über die einheitliche Goldfläche ── */
.btn-primary-gold::after,
.btn.btn-gold::after,
.btn-gold::after,
.db-btn-primary::after,
.db-offer-cta::after,
.db-quiz-cta-btn::after,
.action-btn::after,
.db-footer-cta::after,
.exit-cta-btn::after,
.db-sticky-cta-btn::after,
.db-nav a.btn-gold::after,
.db-nav .btn-gold::after,
header a.btn-gold::after {
  content: '' !important;
  position: absolute !important;
  top: -20% !important;
  left: 0 !important;
  width: 45% !important;
  height: 140% !important;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 80%
  ) !important;
  animation: shine-streak 2.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Text & Icons bleiben über dem Streifen ── */
.btn.btn-gold > *,
.btn-gold > *,
.db-btn-primary > *,
.action-btn > *,
.db-sticky-cta-btn > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ── 3. Mobile: Shine deaktivieren (Akku schonen) ── */
@media (max-width: 640px) {
  .btn-primary-gold::after,
  .btn.btn-gold::after,
  .btn-gold::after,
  .db-btn-primary::after,
  .db-offer-cta::after,
  .db-quiz-cta-btn::after,
  .action-btn::after,
  .db-footer-cta::after,
  .exit-cta-btn::after,
  .db-sticky-cta-btn::after,
  .db-nav a.btn-gold::after,
  header a.btn-gold::after {
    display: none !important;
  }
}

/* ══════════════════════════════════════
   v6.5.2 — Footer: kompakter + Logo größer
══════════════════════════════════════ */

/* ── 1. ÄUSSERES FOOTER-PADDING: reduziert ── */
.db-footer {
  padding: 32px 0 24px !important;
}

/* ── 2. GLASS-CARD: kompakteres Innen-Padding ── */
.db-footer-glass {
  padding: 40px 56px 28px !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
}

/* ── 3. GRID: engerer Abstand zwischen Spalten ── */
.db-footer-grid {
  gap: 36px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ── 4. LOGO-WRAPPER: kein extra Abstand unten ── */
.db-footer-logo {
  display: block !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
}

/* ── 5. LOGO-BILD: 260px breit, kein margin-bottom ── */
.db-footer-logo img,
.db-footer-logo-img {
  width: 260px !important;
  max-width: 260px !important;
  min-width: unset !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 0 !important;
  opacity: 0.95 !important;
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(800%) hue-rotate(195deg) brightness(85%) !important;
  transition: filter 0.3s ease !important;
}

.db-footer-logo:hover img,
.db-footer-logo:hover .db-footer-logo-img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(35%) saturate(500%) hue-rotate(5deg) brightness(95%) !important;
}

/* ── 6. TAGLINE: direkter Anschluss ans Logo ── */
.footer-tagline {
  font-size: 10px !important;
  color: rgba(201,169,110,0.75) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  line-height: 1.7 !important;
  margin-top: 14px !important;
  margin-bottom: 10px !important;
}

/* ── 7. BESCHREIBUNGSTEXT: kompakter ── */
.db-footer-desc,
.db-footer-brand p {
  font-size: 13px !important;
  color: #6B6B7B !important;
  line-height: 1.7 !important;
  max-width: 260px !important;
  margin: 0 0 14px !important;
}

/* ── 8. TRENNLINIE: weniger Abstand ── */
.db-footer-divider {
  margin: 22px 0 16px !important;
}

/* ── 9. SPALTEN-HEADINGS: kompakter ── */
.db-footer-heading,
.db-footer-glass .db-footer-heading,
.db-footer-grid h4 {
  margin: 0 0 12px !important;
}

/* ── 10. LINK-ABSTÄNDE: enger ── */
.db-footer-links li {
  margin-bottom: 8px !important;
}
.db-footer-contact-list li {
  margin-bottom: 10px !important;
}
.db-footer-contact-list {
  margin: 0 0 14px !important;
}

/* ── 11. RESPONSIVE: Tablet ── */
@media (max-width: 1024px) {
  .db-footer-glass {
    padding: 32px 36px 24px !important;
  }
}
@media (max-width: 640px) {
  .db-footer-glass {
    padding: 28px 18px 20px !important;
    margin: 0 12px !important;
  }
  .db-footer-logo img,
  .db-footer-logo-img {
    width: 200px !important;
    max-width: 200px !important;
  }
  .footer-tagline {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════
   v6.5.3 — LOGO SVG FIX: logo.svg erstellt, viewBox getrimmt
   Phantom-Baseline-Gap entfernen, Filter entfernen, Größe sichern
══════════════════════════════════════════════════════ */

/* Wrapper: Baseline-Gap durch inline-block img eliminieren */
.db-footer-logo {
  line-height: 0 !important;
  font-size: 0 !important;
  display: block !important;
}

/* Footer-Logo: 260px, kein Filter — dunkelgrau auf Crème sichtbar */
.db-footer-logo img,
.db-footer-logo-img {
  width: 260px !important;
  max-width: 260px !important;
  min-width: unset !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
  margin-bottom: 0 !important;
}

/* Header: Inline-SVG-Logo responsiv */
.db-logo-svg-wrap svg,
.db-logo-img svg {
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
}

@media (max-width: 640px) {
  .db-footer-logo img,
  .db-footer-logo-img {
    width: 200px !important;
    max-width: 200px !important;
  }
  .db-logo-svg-wrap svg,
  .db-logo-img svg {
    width: 130px !important;
    max-width: 130px !important;
  }
}

/* ══════════════════════════════════════════════════════
   v6.5.4 — LOGO 2× GRÖẞER + WHITESPACE-ELIMINIERUNG
   Brand-Spalte oben starten lassen, Logo füllt Spaltenbreite
══════════════════════════════════════════════════════ */

/* Grid: alle Spalten oben ausrichten */
.db-footer-glass .db-footer-grid {
  align-items: start !important;
  align-content: start !important;
}

/* Brand-Spalte: Flex von OBEN nach unten, kein Zentrieren */
.db-footer-glass .db-footer-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-self: start !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Logo-Anchor: volle Spaltenbreite, kein Leerraum */
.db-footer-brand .db-footer-logo,
.db-footer-glass .db-footer-logo {
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* Logo-IMG: 2× größer = volle Spaltenbreite ausfüllen */
.db-footer-brand .db-footer-logo img,
.db-footer-brand .db-footer-logo-img,
.db-footer-glass .db-footer-logo img,
.db-footer-glass .db-footer-logo-img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobil ≤640px: Logo max 240px */
@media (max-width: 640px) {
  .db-footer-brand .db-footer-logo,
  .db-footer-glass .db-footer-logo {
    width: 100% !important;
  }
  .db-footer-brand .db-footer-logo img,
  .db-footer-brand .db-footer-logo-img {
    max-width: 240px !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════
   v6.5.5 — HEADER LOGO HOVER → GOLD #C9A96E
   Inline SVG via filter auf .db-logo-svg-wrap
   Normal: original dunkelgrau | Hover: Gold
══════════════════════════════════════════════════════ */

.db-logo-svg-wrap {
  display: inline-block;
  transition: filter 0.3s ease;
}

.db-logo-img:hover .db-logo-svg-wrap {
  filter: brightness(0) saturate(100%)
          invert(72%) sepia(35%) saturate(600%)
          hue-rotate(5deg) brightness(95%) contrast(90%) !important;
}

/* ══════════════════════════════════════════════════════
   v6.6.0 — Exit Popup Textfarben-Fix + Header Logo Overflow-Fix
   Popup: Dark-Mode-Farben überschreiben die auf weißem BG unsichtbar sind
   Header: SVG height-based sizing, kein Overflow aus Nav-Pill
══════════════════════════════════════════════════════ */

/* ── EXIT POPUP: Container-Basis ── */
.exit-popup {
  background: #FFFFFF !important;
  color: #1A1A2E !important;
  padding: 48px 52px !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25) !important;
}

/* Problem 1: Fließtext-Strong war weiß auf weiß → navy */
.exit-text strong {
  color: #1A1A2E !important;
}

/* Problem 2: Benefit-Items waren #cccccc (light gray) → dunkel */
.exit-benefit {
  color: #333333 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Problem 3: Badge "ATTENDEZ!" — gold, kompakt */
.exit-label {
  color: #C9A96E !important;
  letter-spacing: 2px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Problem 1 Ergänzung: Accent-Span bleibt gold */
.exit-title-accent {
  color: #C9A96E !important;
}

/* Problem 5: "Non merci" — dezent, hover gold */
.exit-decline {
  color: #888888 !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.exit-decline:hover {
  color: #C9A96E !important;
}

/* ── HEADER LOGO: Overflow-Fix ── */
/* Auf Höhe umstellen statt Breite — SVG passt in den 64px-Pill */
.db-logo-svg-wrap {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  overflow: hidden !important;
  transition: filter 0.3s ease !important;
}
.db-logo-svg-wrap svg {
  height: 44px !important;
  width: auto !important;
  max-width: 190px !important;
  display: block !important;
}

@media (max-width: 600px) {
  .db-logo-svg-wrap { height: 36px !important; }
  .db-logo-svg-wrap svg { height: 36px !important; max-width: 150px !important; }
}
@media (max-width: 380px) {
  .db-logo-svg-wrap { height: 30px !important; }
  .db-logo-svg-wrap svg { height: 30px !important; max-width: 120px !important; }
}

/* ══════════════════════════════════════════════════════
   v6.7.0 — Silver Update: Navy, Gold, Silver, Off-White
   (1) #000000 → #1A1A2E global (erledigt via replace_all)
   (2) Problem-Ikons: gold
   (3) Borders auf hellem BG: --color-silver #C0BDB5
   (4) Sekundäre Texte auf weißem BG: --color-silver
══════════════════════════════════════════════════════ */

/* ── 1. Problem-Sektion: alle Icons explizit gold ── */
/* Emojis erben CSS-color nicht direkt, aber SVG/FA-Icons schon */
.problem-icon {
  color: #C9A96E !important;
}
.section-problems i,
.section-problems [class*="fa-"],
.section-problems svg {
  color: #C9A96E !important;
  fill: #C9A96E !important;
  stroke: #C9A96E !important;
}
/* Alle anderen dark-Sektions-Icons (services, why, about) ebenfalls gold */
.section-why svg,
.section-why i,
.db-about svg,
.db-about i {
  color: #C9A96E !important;
  fill: #C9A96E !important;
}

/* ── 2. Silver Borders auf hellem Hintergrund ── */
/* Exit-Popup: war #2a2a2a → silber, passt auf weißem BG */
.exit-popup {
  border: 1px solid var(--color-silver) !important;
}
.exit-close {
  border: 1px solid var(--color-silver) !important;
}
.exit-close:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}

/* HR / Trennlinien */
hr,
.db-footer-divider {
  border-color: var(--color-silver) !important;
  opacity: 1 !important;
}

/* Header-Linie (Nav-Container auf hellem BG) */
.nav-container {
  border-color: var(--color-silver) !important;
}

/* Footer-Rand oben */
.db-footer-glass {
  border-top: 1px solid var(--color-silver) !important;
}

/* Karten-Borders auf hellen Sektionen (Stats, Services, Étapes) */
.db-stats-grid,
.db-stat-card,
.db-etape-card {
  border-color: var(--color-silver) !important;
}

/* ── 3. Sekundäre Texte auf weißem / crème Hintergrund → silver ── */
.db-stat-label,
.stat-label,
.section-subtitle,
.about-stat-label,
.db-footer-desc,
.db-footer-copy,
.db-footer-bottom-links a,
.db-footer-contact-list li,
.db-footer-contact-list a {
  color: var(--color-silver) !important;
}

/* Footer-Links: silver als Basis, gold beim Hover */
.db-footer-links a {
  color: var(--color-silver) !important;
}
.db-footer-links a:hover {
  color: var(--color-gold) !important;
}

/* ── 4. Konsistenz: keine reinen Schwarz-Icons mehr ── */
/* Swiper-Pfeile & sonstige UI-Icons ohne explizite Farbe */
.swiper-button-prev::after,
.swiper-button-next::after {
  color: var(--color-silver) !important;
}

@media (max-width: 600px) {
  .section-subtitle { font-size: 15px !important; }
}
@media (max-width: 380px) {
  .db-stat-label { font-size: 11px !important; }
}


/* ══════════════════════════════════════════════════════════
   AUTO-DIAGNOSTIC — HORIZONTAL SCROLL CARDS (v7.0.0)
══════════════════════════════════════════════════════════ */
.db-hscroll-diag {
  background: #0F0F1A;
  padding: 100px 0 80px;
}
.db-hscroll-header {
  text-align: center;
  margin-bottom: 48px;
}
.db-hscroll-header h2 {
  color: #FFFFFF;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-top: 12px;
}
.db-hscroll-header p {
  color: #C0BDB5;
  font-size: 16px;
  margin-top: 8px;
}

/* Scroll-Wrapper */
.db-hscroll-nav-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.db-hscroll-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  padding: 8px 4px 20px;
}
.db-hscroll-track::-webkit-scrollbar { display: none; }

/* Karten */
.db-diag-card {
  min-width: 280px;
  height: 160px;
  background: #1A1A2E;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(201,169,110,0.15);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: default;
}
.db-diag-card:hover {
  transform: translateY(-4px);
  border-color: #C9A96E;
  background: #22224A;
}

/* Badge */
.db-diag-card-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.db-diag-badge-label {
  border: 1px dashed #C9A96E;
  color: #C9A96E;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-b);
}
.db-diag-badge-num {
  background: #C9A96E;
  color: #1A1A2E;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  font-family: var(--font-b);
}

/* Karten-Inhalt */
.db-diag-card-title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.db-diag-card-sub {
  color: #C0BDB5;
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* Pfeil-Buttons */
.db-hscroll-arrow {
  width: 42px;
  height: 42px;
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.25);
  color: #C9A96E;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.db-hscroll-arrow:hover {
  background: rgba(201,169,110,0.18);
  border-color: #C9A96E;
}

@media (max-width: 768px) {
  .db-hscroll-arrow { display: none; }
  .db-diag-card { min-width: 240px; height: auto; min-height: 150px; }
}
@media (max-width: 380px) {
  .db-diag-card { min-width: 200px; padding: 16px; }
  .db-diag-card-title { font-size: 14px; }
}


/* ══════════════════════════════════════════════════════════
   NOTRE SYSTÈME — SYSTEM MAP (v7.0.0)
══════════════════════════════════════════════════════════ */
.db-systeme {
  background: #0F0F1A;
  padding: 100px 0;
  border-top: 1px solid rgba(201,169,110,0.1);
}
.db-systeme-header {
  text-align: center;
  margin-bottom: 56px;
}
.db-systeme-label {
  color: #C9A96E;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font-b);
  margin: 0 0 12px;
}
.db-systeme-title {
  color: #FFFFFF;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.db-systeme-title em {
  color: #C9A96E;
  font-style: normal;
}

/* Layer-Stapel */
.db-layer-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}
.db-layer-container {
  border-radius: 8px;
  padding: 24px;
}
.db-layer-1 { border: 1px solid #C9A96E; }
.db-layer-2 { border: 1px solid #C0BDB5; }
.db-layer-3 { border: 1px solid rgba(201,169,110,0.3); }

/* Layer-Header */
.db-layer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.db-layer-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-b);
  text-transform: uppercase;
}
.db-layer-1 .db-layer-num { background: #C9A96E; color: #1A1A2E; }
.db-layer-2 .db-layer-num { background: #C0BDB5; color: #1A1A2E; }
.db-layer-3 .db-layer-num {
  background: rgba(201,169,110,0.12);
  color: #C9A96E;
  border: 1px solid rgba(201,169,110,0.35);
}
.db-layer-name {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-b);
}

/* Layer-Karten-Reihe */
.db-layer-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.db-layer-cards--center {
  justify-content: center;
}
.db-layer-card {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 16px;
  flex: 1;
  min-width: 150px;
}
.db-layer-card-title {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}
.db-layer-card-sub {
  color: #C0BDB5;
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}

/* Verbindungslinie */
.db-layer-connector {
  border-left: 1px dashed #C9A96E;
  height: 32px;
  width: 1px;
  margin: 0 auto;
  opacity: 0.5;
}

/* Layer-3 Zentral-Text */
.db-layer-3-center {
  color: #C0BDB5;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .db-layer-cards { flex-direction: column; }
  .db-layer-card { min-width: unset; }
  .db-layer-container { padding: 18px; }
}
@media (max-width: 380px) {
  .db-layer-card { padding: 12px; }
  .db-layer-card-title { font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════
   NOTRE SYSTÈME — SYSTEM MAP v2 (v7.1.0)
══════════════════════════════════════════════════════════ */
.systeme-section {
  background: #0F0F1A;
  padding: 80px 40px;
}
.systeme-section .section-badge {
  display: inline-block;
  background: rgba(201,169,110,.12);
  color: #C9A96E;
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.systeme-section h2 {
  font-size: 36px;
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.3;
}
.systeme-section h2 em {
  color: #C9A96E;
  font-style: italic;
}
.systeme-sub {
  font-size: 12px;
  color: #C0BDB5;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.systeme-sub2 {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin-bottom: 32px;
}

/* Top Grid */
.top-grid-sys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.top-card-sys {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.top-dot-sys {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(201,169,110,.15);
  border: 1px solid rgba(201,169,110,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.top-dot-sys span {
  width: 8px;
  height: 8px;
  background: #C9A96E;
  border-radius: 50%;
  display: block;
}
.top-card-title { font-size: 13px; font-weight: 700; color: white; }
.top-card-sub { font-size: 11px; color: #C0BDB5; margin-top: 2px; }

/* Connector */
.sys-connector {
  display: flex;
  justify-content: center;
  margin: 6px auto;
}
.sys-connector-line {
  width: 1px;
  height: 28px;
  border-left: 1px dashed rgba(201,169,110,.35);
}

/* Layer Blöcke */
.layer-block-sys {
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 6px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.layer-block-sys.l1 { border: 1px solid #C9A96E; }
.layer-block-sys.l2 { border: 1px solid #C0BDB5; }
.layer-block-sys.l3 { border: 1px solid rgba(201,169,110,.25); }

.layer-header-sys {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.layer-pill-gold-sys {
  background: #C9A96E; color: #1A1A2E;
  font-size: 9px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; letter-spacing: 1px;
}
.layer-pill-silver-sys {
  background: #C0BDB5; color: #1A1A2E;
  font-size: 9px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; letter-spacing: 1px;
}
.layer-pill-dim-sys {
  background: rgba(201,169,110,.2); color: #C9A96E;
  font-size: 9px; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; letter-spacing: 1px;
}
.layer-name-sys {
  color: white; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}

/* Inner Grids */
.inner-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.inner-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 10px; }
.inner-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }

/* Inner Karten */
.inner-card-sys {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  padding: 14px;
}
.inner-card-sys .ic-flow {
  font-size: 10px; color: #666; margin-bottom: 6px;
}
.inner-card-sys .ic-flow span { color: #C9A96E; }
.inner-card-sys .ic-title {
  font-size: 13px; font-weight: 700; color: white; margin-bottom: 4px;
}
.inner-card-sys .ic-sub {
  font-size: 11px; color: #C0BDB5; line-height: 1.5; margin-bottom: 8px;
}

/* Tags */
.sys-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sys-tag {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 2px 7px;
  font-size: 10px; color: #aaa;
}
.sys-tag.gold {
  background: rgba(201,169,110,.1);
  border-color: rgba(201,169,110,.25);
  color: #C9A96E;
}

/* Layer 3 */
.l3-center-text {
  text-align: center; font-size: 12px;
  color: #666; font-style: italic; margin-bottom: 14px;
}

/* Responsive */
@media (max-width: 900px) {
  .systeme-section { padding: 60px 20px; }
  .inner-grid-4 { grid-template-columns: repeat(2,1fr); }
  .systeme-section h2 { font-size: 28px; }
}
@media (max-width: 600px) {
  .top-grid-sys { grid-template-columns: 1fr 1fr; }
  .inner-grid-3, .inner-grid-2 { grid-template-columns: 1fr; }
  .inner-grid-4 { grid-template-columns: 1fr; }
  .layer-block-sys { padding: 16px; }
}
@media (max-width: 380px) {
  .top-grid-sys { grid-template-columns: 1fr; }
  .systeme-section { padding: 48px 14px; }
}

/* ── Logo Band ── */
.logo-band {
  background: #F8F7F4;
  padding: 24px 40px;
  text-align: center;
}
.logo-band-label {
  font-size: 11px;
  color: #C0BDB5;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--font-b, 'Poppins', sans-serif);
}
.logo-band-row {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.logo-band-placeholder {
  width: 120px;
  height: 50px;
  background: #f0ede8;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .logo-band { padding: 20px 20px; }
  .logo-band-row { gap: 16px; }
  .logo-band-placeholder { width: 80px; height: 36px; }
}

/* ── Trust-Badge Sub-Text unter CTA Buttons ── */
.btn-sub-trust {
  font-size: 11px;
  color: #C0BDB5;
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* ── Témoignages Grid (marketing.mba-Stil) ── */
.testi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.testi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testi-quote-mark {
  color: #C9A96E;
  font-size: 60px;
  line-height: 0.8;
  font-family: Georgia, serif;
  margin-bottom: 4px;
}
.testi-quote-text {
  color: white;
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
  flex: 1;
  margin: 0;
}
.testi-divider {
  border: none;
  border-top: 1px solid rgba(192,189,181,0.2);
  margin: 0;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testi-author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #C9A96E;
  object-fit: cover;
  flex-shrink: 0;
}
.testi-author-info strong {
  display: block;
  color: white;
  font-weight: 700;
  font-size: 14px;
}
.testi-author-info span {
  display: block;
  color: #C0BDB5;
  font-size: 12px;
}
.testi-stat-badge {
  background: rgba(201,169,110,0.1);
  border: 1px solid rgba(201,169,110,0.3);
  color: #C9A96E;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 900px) {
  .testi-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .testi-card { padding: 20px; }
  .testi-quote-mark { font-size: 44px; }
}

/* ── FAQ Abstände optimiert ── */
.db-acc-item {
  margin-bottom: 8px !important;
  border-radius: 8px !important;
}
.db-acc-trigger {
  padding: 16px 20px !important;
}
.db-acc-body-inner {
  padding: 0 20px 16px 20px !important;
}

/* ── Étapes / Notre Méthode: Schritt-Nummern Gold, Titel Navy ── */
.db-etape-n {
  color: #C9A96E !important;
  opacity: 0.35 !important;
  -webkit-text-stroke: 0 !important;
}
.db-etape-card h3 {
  color: #1A1A2E !important;
}

/* ── Footer Disclaimer ── */
.footer-disclaimer {
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 28px 60px !important;
  margin: 0 !important;
  font-size: 11px;
  color: rgba(26, 26, 46, 0.5);
  line-height: 1.9;
  border-top: 1px solid rgba(192,189,181,0.25);
  box-sizing: border-box;
}
.footer-disclaimer p {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 14px auto;
}
.footer-disclaimer p:last-child {
  margin-bottom: 0;
}
.footer-disclaimer strong {
  color: rgba(26, 26, 46, 0.65);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .footer-disclaimer { padding: 24px 24px !important; }
}

/* ══════════════════════════════════════════════════════════
   v8.1.0 FIXES
══════════════════════════════════════════════════════════ */

/* FIX 2: Horizontale Trust Badges — einheitlich unter allen primären CTAs */
.btn-trust-horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 10px;
  font-size: 13px;
  color: #888;
  flex-wrap: wrap;
}
.btn-trust-horizontal span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-trust-horizontal span::before {
  content: "✓";
  color: #888;
}

/* FIX 3: About Stats vertikal rechts */
.about-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 48px !important;
  max-width: 100% !important;
}
.about-content {
  flex: 1 !important;
  min-width: 0 !important;
}
.about-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.about-stat {
  width: 200px !important;
  padding: 20px 24px !important;
  background: rgba(26,26,46,0.7) !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
  border-radius: 8px !important;
}
@media (max-width: 900px) {
  .about-inner { flex-direction: column !important; }
  .about-stats { align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; }
  .about-stat { width: auto !important; flex: 1 1 120px !important; }
}

/* FIX 4: Méthode Sektion heller Hintergrund */
.db-etapes {
  background: #F8F7F4 !important;
  border-bottom: 1px solid #E8E4DC !important;
}
.db-etapes-head h2 { color: #1A1A2E !important; }
.db-etapes-head p  { color: #6B6B7B !important; }

/* FIX 5: Étapes-Karten dezent auf hellem Grund */
.db-etape-card {
  background: #FFFFFF !important;
  border: 1px solid #C0BDB5 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.db-etape-card:hover {
  box-shadow: 0 4px 20px rgba(26,26,46,0.08) !important;
  border-color: #C9A96E !important;
}
.db-etape-card h3 { color: #1A1A2E !important; }
.db-etape-card p  { color: #6B6B7B !important; }

/* FIX 6: System-Map Titel lesbar */
.systeme-section h2   { color: rgba(255,255,255,0.92) !important; }
.systeme-section h2 em { color: #C9A96E !important; font-style: italic; }

/* FIX 7: Programme Elite Icon-Wrapper */
.programme-icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(201,169,110,0.1);
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* FIX 9: Team-Karten einheitlich */
.team-card { min-height: 420px !important; }
.team-card .team-name  { font-size: 18px !important; font-weight: 700 !important; color: #1A1A2E !important; margin-bottom: 4px !important; }
.team-card .team-title { font-size: 12px !important; color: #C9A96E !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-weight: 600 !important; margin-bottom: 10px !important; }
.team-card .team-desc,
.team-card .team-bio   { font-size: 13px !important; color: #666 !important; line-height: 1.6 !important; }

/* FIX 11: .cta-final-trust → merged into .btn-trust-horizontal */