/* ============================================================
   TOPXPERT — DESIGN SYSTEM
   Premium Automotive Expertise
   ============================================================ */

/* === TOKENS === */
:root {
  --bg:        #07070f;
  --surface:   #0f0f1c;
  --surface-2: #181828;
  --surface-3: #1f1f32;
  --border:    rgba(255,255,255,0.06);
  --border-md: rgba(255,255,255,0.10);
  --border-accent: rgba(229,57,53,0.28);

  --blue:       #e53935;
  --blue-dark:  #c62828;
  --blue-light: #ef9a9a;
  --blue-glow:  rgba(229,57,53,0.10);
  --blue-glow-2:rgba(229,57,53,0.20);

  --text:   #ededf5;
  --text-2: #9494b0;
  --text-3: #5a5a74;
  --white:  #ffffff;

  --red:     #e53935;
  --green:   #10b981;
  --amber:   #f59e0b;

  --font-d: 'Manrope', system-ui, sans-serif;
  --font-b: 'Inter',  system-ui, sans-serif;

  --h1: clamp(2.6rem, 6vw, 5rem);
  --h2: clamp(1.8rem, 3.5vw, 2.8rem);
  --h3: clamp(1.2rem, 2vw,   1.6rem);

  --s1:0.5rem; --s2:1rem;  --s3:1.5rem; --s4:2rem;
  --s5:3rem;   --s6:4rem;  --s7:5rem;   --s8:6rem; --s9:8rem;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px; --r-f:9999px;

  --sh-sm: 0 1px 4px rgba(0,0,0,.5);
  --sh-md: 0 4px 24px rgba(0,0,0,.55);
  --sh-lg: 0 8px 48px rgba(0,0,0,.65);
  --sh-blue: 0 4px 28px rgba(229,57,53,.25);
  --sh-blue-lg: 0 8px 48px rgba(229,57,53,.35);

  --ease: cubic-bezier(.25,.46,.45,.94);
  --fast:150ms; --normal:250ms; --slow:400ms;

  --max-w: 1200px;
  --px: clamp(1rem, 4vw, 2rem);
  --hh: 72px;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:1rem;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* === ACCESSIBILITY === */
.skip-link{
  position:fixed;top:-100%;left:1rem;z-index:9999;
  background:var(--blue);color:var(--white);
  padding:.75rem 1.5rem;border-radius:var(--r-md);
  font-weight:600;font-size:.875rem;
  transition:top var(--normal) var(--ease);
}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{font-family:var(--font-d);line-height:1.15;font-weight:700;color:var(--text)}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--h2);font-weight:700;letter-spacing:-.02em}
h3{font-size:var(--h3);font-weight:700;letter-spacing:-.01em}

.gradient-text{
  background:linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 50%, #c62828 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* === LAYOUT === */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:var(--s8)}
.section--sm{padding-block:var(--s6)}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-d);font-weight:600;font-size:.9375rem;
  padding:.75rem 1.75rem;border-radius:var(--r-f);
  transition:all var(--normal) var(--ease);
  white-space:nowrap;
  border:1.5px solid transparent;
}
.btn--lg{padding:1rem 2.25rem;font-size:1rem}
.btn--sm{padding:.5rem 1.25rem;font-size:.875rem}

.btn--primary{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  box-shadow:var(--sh-blue);
}
.btn--primary:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
  transform:translateY(-1px);
  box-shadow:var(--sh-blue-lg);
}
.btn--primary:active{transform:translateY(0)}

.btn--outline{
  background:transparent;
  border-color:var(--border-md);
  color:var(--text);
}
.btn--outline:hover{
  border-color:var(--blue);
  color:var(--blue);
  background:var(--blue-glow);
}

.btn--ghost{
  background:transparent;
  color:var(--text-2);
  border-color:transparent;
}
.btn--ghost:hover{color:var(--text);background:var(--surface-2)}

.btn svg{flex-shrink:0;transition:transform var(--fast) var(--ease)}
.btn:hover svg.arrow{transform:translateX(3px)}

/* === BADGE === */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .85rem;
  border-radius:var(--r-f);
  border:1px solid var(--border-accent);
  background:var(--blue-glow);
  color:var(--blue-light);
  font-family:var(--font-d);
  font-size:.8125rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
}
.badge--white{
  background:rgba(255,255,255,.06);
  border-color:var(--border-md);
  color:var(--text-2);
}

/* === CARDS === */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s3);
  transition:all var(--normal) var(--ease);
}
.card:hover{
  border-color:var(--border-accent);
  background:var(--surface-2);
  transform:translateY(-3px);
  box-shadow:var(--sh-md),0 0 0 1px var(--border-accent);
}
.card__icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  color:var(--blue-light);
  margin-bottom:var(--s2);
}

/* === SECTION HEADER === */
.section-header{margin-bottom:var(--s6);text-align:center}
.section-header .badge{margin-bottom:var(--s2)}
.section-header h2{margin-bottom:var(--s2)}
.section-header p{color:var(--text-2);max-width:540px;margin-inline:auto;font-size:1.0625rem}

/* === DIVIDER === */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-md),transparent);margin-block:0}

/* ============================================================
   HEADER
   ============================================================ */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--hh);
  background:rgba(7,7,15,.75);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  transition:background var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
#header.scrolled{
  background:rgba(7,7,15,.96);
  box-shadow:0 1px 0 var(--border-md), 0 8px 32px rgba(0,0,0,.4);
}

/* Nav layout: logo | menu (centered, flex:1) | actions */
.nav{
  height:var(--hh);
  display:flex;align-items:center;
  gap:var(--s2);
}
.nav__logo{
  display:flex;align-items:center;gap:.5rem;
  flex-shrink:0;
  font-family:var(--font-d);font-weight:800;
  font-size:1.25rem;letter-spacing:-.03em;
  color:var(--white);
}
.nav__logo-mark{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:.7rem;font-weight:800;
  letter-spacing:.05em;flex-shrink:0;
}
.nav__logo-text em{color:var(--blue);font-style:normal}

/* Menu: takes remaining space, centered */
.nav__menu{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  gap:.125rem;
  flex-wrap:nowrap;
  overflow:visible;
}

/* Plain nav links */
.nav__menu > li > a,
.nav__dropdown-trigger{
  display:flex;align-items:center;gap:.25rem;
  padding:.4375rem .625rem;
  border-radius:var(--r-md);
  font-size:.8125rem;font-weight:500;
  color:var(--text-2);
  white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
  cursor:pointer;
}
.nav__menu > li > a:hover,
.nav__dropdown-trigger:hover,
.nav__item--has-dropdown:hover .nav__dropdown-trigger{
  color:var(--text);background:var(--surface-2);
}
.nav__menu > li > a.active{color:var(--text)}

/* Dropdown chevron rotation */
.nav__dropdown-chevron{
  transition:transform var(--fast) var(--ease);
  flex-shrink:0;
}
.nav__item--has-dropdown:hover .nav__dropdown-chevron,
.nav__item--has-dropdown:focus-within .nav__dropdown-chevron{
  transform:rotate(180deg);
}

/* Dropdown container */
.nav__item--has-dropdown{
  position:relative;
}
.nav__dropdown{
  position:absolute;
  /* top:100% = kein Gap → Hover reißt nicht ab beim Überfahren */
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:240px;
  /* padding-top = visueller Abstand ohne Hover-Gap */
  padding-top:8px;
  background:transparent;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity var(--normal) var(--ease),
    visibility 0ms var(--normal);
  z-index:200;
}
/* Innere Box mit echtem Styling */
.nav__dropdown-inner{
  background:var(--surface-2);
  border:1px solid var(--border-md);
  border-top:2px solid var(--blue);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:.375rem;
  box-shadow:var(--sh-lg);
  transform:translateY(-6px);
  transition:transform var(--normal) var(--ease);
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown,
.nav__dropdown.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--normal) var(--ease), visibility 0ms;
}
.nav__item--has-dropdown:hover .nav__dropdown-inner,
.nav__item--has-dropdown:focus-within .nav__dropdown-inner,
.nav__dropdown.open .nav__dropdown-inner{
  transform:translateY(0);
}
.nav__dropdown-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.625rem .75rem;
  border-radius:var(--r-md);
  color:var(--text-2);
  transition:all var(--fast) var(--ease);
}
.nav__dropdown-item:hover{
  background:var(--surface-3);
  color:var(--text);
}
.nav__dropdown-item:hover .nav__dropdown-icon{
  background:var(--blue-glow-2);
  color:var(--blue);
}
.nav__dropdown-icon{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:var(--r-sm);
  color:var(--blue-light);
  transition:all var(--fast) var(--ease);
}
.nav__dropdown-item strong{
  display:block;
  font-size:.875rem;font-weight:600;
  color:var(--text);
  line-height:1.2;
  margin-bottom:.1rem;
}
.nav__dropdown-item span{
  font-size:.75rem;color:var(--text-3);
}

/* Actions (right side) */
.nav__actions{
  display:flex;align-items:center;gap:.75rem;
  flex-shrink:0;
  margin-left:auto;
}

/* Burger button */
.nav__burger{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  transition:all var(--fast) var(--ease);
}
.nav__burger:hover{background:var(--surface-3);border-color:var(--border-md)}

/* === MOBILE MENU === */
.mobile-menu{
  position:fixed;top:var(--hh);left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:99;
  padding:var(--s3) var(--px);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--slow) var(--ease);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu__list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:var(--s4)}
.mobile-menu__list a{
  display:block;padding:.875rem 1rem;
  border-radius:var(--r-md);
  font-family:var(--font-d);font-size:1rem;font-weight:600;
  color:var(--text-2);
  transition:all var(--fast) var(--ease);
  border:1px solid transparent;
}
.mobile-menu__list a:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--hh) + var(--s6));
  padding-bottom:var(--s6);
  position:relative;
  overflow:hidden;
}

/* Background layers */
.hero::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 70% 40%, rgba(198,40,40,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(229,57,53,.06) 0%, transparent 50%),
    radial-gradient(ellipse 100% 100% at 100% 0%, rgba(150,0,0,.06) 0%, transparent 50%);
  pointer-events:none;
}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
  pointer-events:none;
}

.hero__inner{
  display:grid;
  grid-template-columns:5fr 6fr;
  align-items:flex-end;
  gap:var(--s5);
  margin-bottom:var(--s7);
}
.hero__content{display:flex;flex-direction:column;gap:var(--s3);z-index:1}
.hero__badge{margin-bottom:.25rem}
.hero__title{
  font-size:var(--h1);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--white);
  margin:0;
}
.hero__title em{
  font-style:normal;
  display:block;
  background:linear-gradient(120deg, #ef9a9a 0%, #e53935 40%, #c62828 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__sub{
  font-size:clamp(1rem, 1.5vw, 1.1875rem);
  color:var(--text-2);
  line-height:1.65;
  max-width:480px;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Car Visual */
.hero__visual{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.hero__car-wrap{
  position:relative;
  width:100%;
  max-width:820px;
}
/* Atmosphärischer Rotglow hinter dem Fahrzeug */
.hero__car-glow{
  position:absolute;
  top:30%;left:50%;
  transform:translate(-50%,-50%);
  width:85%;height:55%;
  background:radial-gradient(ellipse, rgba(229,57,53,.18) 0%, transparent 68%);
  filter:blur(48px);
  pointer-events:none;
  z-index:0;
}
/* Bodenshadow unter dem Fahrzeug */
.hero__car-shadow{
  position:absolute;
  bottom:-4%;left:50%;
  transform:translateX(-50%);
  width:72%;height:28px;
  background:radial-gradient(ellipse, rgba(0,0,0,.65) 0%, transparent 70%);
  filter:blur(16px);
  pointer-events:none;
  z-index:0;
}
.hero-car{
  position:relative;
  z-index:1;
  width:100%;
  max-width:820px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 24px 48px rgba(0,0,0,.55))
    drop-shadow(0 8px 20px rgba(229,57,53,.12));
  transform:translateY(0);
  transition:transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}
.hero__visual:hover .hero-car{
  transform:translateY(-6px);
  filter:
    drop-shadow(0 32px 56px rgba(0,0,0,.6))
    drop-shadow(0 12px 28px rgba(229,57,53,.18));
}

@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 6px var(--blue)}
  50%{opacity:.5;box-shadow:0 0 12px var(--blue)}
}

/* Stats */
.hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  z-index:1;
}
.stat{
  background:var(--surface);
  padding:var(--s3) var(--s3);
  display:flex;flex-direction:column;gap:.25rem;
  transition:background var(--fast) var(--ease);
}
.stat:hover{background:var(--surface-2)}
.stat__number-wrap{
  display:flex;align-items:baseline;gap:.1em;
  font-family:var(--font-d);
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:800;
  color:var(--white);
  line-height:1;
}
.stat__suffix{color:var(--blue);font-size:.6em}
.stat__label{font-size:.8125rem;color:var(--text-3);font-weight:500}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{
  padding-block:var(--s5);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.trust__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.trust__item{
  background:var(--surface);
  padding:var(--s3) var(--s3);
  display:flex;align-items:center;gap:var(--s2);
  transition:background var(--normal) var(--ease);
}
.trust__item:hover{background:var(--surface-2)}
.trust__icon{
  width:44px;height:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  color:var(--blue);
}
.trust__text strong{
  display:block;
  font-family:var(--font-d);font-weight:700;font-size:.9375rem;
  color:var(--text);margin-bottom:.125rem;
}
.trust__text span{font-size:.8125rem;color:var(--text-3)}

/* ============================================================
   PROBLEM → LÖSUNG
   ============================================================ */
.problem{background:var(--bg)}
.problem__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s4);
  align-items:start;
}
.problem__side{
  padding:var(--s4);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface);
}
.problem__side--dark{border-color:rgba(239,68,68,.15);background:rgba(239,68,68,.04)}
.problem__side--light{border-color:var(--border-accent);background:var(--blue-glow)}
.problem__side h3{margin-bottom:var(--s3);font-size:1.25rem}
.problem__list{display:flex;flex-direction:column;gap:var(--s2)}
.problem__item{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:var(--s2);
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.problem__item--bad{border-color:rgba(239,68,68,.12);background:rgba(239,68,68,.03)}
.problem__item--good{border-color:var(--border-accent);background:var(--blue-glow)}
.problem__dot{
  width:20px;height:20px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
  font-size:.625rem;font-weight:800;
}
.problem__dot--bad{background:rgba(239,68,68,.15);color:var(--red)}
.problem__dot--good{background:var(--blue-glow-2);color:var(--blue)}
.problem__item-text strong{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.1rem}
.problem__item-text span{font-size:.8125rem;color:var(--text-2)}

/* ============================================================
   LEISTUNGEN
   ============================================================ */
.leistungen{background:var(--surface)}
.leistungen__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s2);
}
.leistung-card{
  padding:var(--s3);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface-2);
  transition:all var(--normal) var(--ease);
  position:relative;
  overflow:hidden;
}
.leistung-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, var(--blue-glow) 0%, transparent 60%);
  opacity:0;
  transition:opacity var(--normal) var(--ease);
}
.leistung-card:hover::before{opacity:1}
.leistung-card:hover{
  border-color:var(--border-accent);
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
}
.leistung-card__icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  color:var(--blue);
  margin-bottom:var(--s2);
  position:relative;z-index:1;
}
.leistung-card h3{
  font-size:1.0625rem;margin-bottom:.5rem;
  position:relative;z-index:1;
}
.leistung-card p{
  font-size:.875rem;color:var(--text-2);line-height:1.6;
  position:relative;z-index:1;
}
.leistung-card__link{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:var(--s2);
  font-size:.875rem;font-weight:600;
  color:var(--blue-light);
  position:relative;z-index:1;
  transition:gap var(--fast) var(--ease);
}
.leistung-card:hover .leistung-card__link{gap:.5rem}

/* ============================================================
   SPEZIALISIERUNGEN
   ============================================================ */
.spez{background:var(--bg)}
.spez__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s2);
}
.spez-card{
  padding:var(--s3) var(--s2);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:var(--surface);
  text-align:center;
  transition:all var(--normal) var(--ease);
  cursor:default;
}
.spez-card:hover{
  border-color:var(--border-accent);
  background:var(--surface-2);
  transform:translateY(-4px);
  box-shadow:var(--sh-blue);
}
.spez-card__icon{
  width:64px;height:64px;
  margin:0 auto var(--s2);
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:50%;
  color:var(--blue-light);
  transition:all var(--normal) var(--ease);
}
.spez-card:hover .spez-card__icon{
  background:var(--blue-glow-2);
  color:var(--white);
  box-shadow:var(--sh-blue);
}
.spez-card h3{font-size:1rem;font-weight:700;margin-bottom:.25rem}
.spez-card span{font-size:.8125rem;color:var(--text-3)}

/* ============================================================
   CRASH-SCAN
   ============================================================ */
.crash-scan{
  background:var(--surface);
  position:relative;overflow:hidden;
}
.crash-scan::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, var(--blue-glow) 0%, transparent 65%);
  pointer-events:none;
}
.crash-scan__inner{position:relative;z-index:1}
.crash-scan__steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
  margin-bottom:var(--s6);
  position:relative;
}
.crash-scan__steps::before{
  content:'';
  position:absolute;
  top:28px;left:calc(12.5% + 28px);right:calc(12.5% + 28px);
  height:1px;
  background:linear-gradient(90deg, var(--blue) 0%, var(--border-accent) 100%);
  opacity:.4;
}
.scan-step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--s2);
  padding:var(--s3) var(--s2);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  border:1px solid var(--border);
  transition:all var(--normal) var(--ease);
}
.scan-step:hover{border-color:var(--border-accent);background:var(--surface-3)}
.scan-step__num{
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--blue-dark), var(--blue));
  color:var(--white);
  font-family:var(--font-d);font-size:1.25rem;font-weight:800;
  box-shadow:var(--sh-blue);
  flex-shrink:0;
  position:relative;z-index:1;
}
.scan-step__icon{
  color:var(--blue-light);margin-bottom:.25rem;
}
.scan-step h3{font-size:1rem;font-weight:700;margin-bottom:.25rem}
.scan-step p{font-size:.8125rem;color:var(--text-2);line-height:1.5}
.crash-scan__cta{text-align:center}
.crash-scan__cta p{color:var(--text-2);font-size:.9375rem;margin-top:.75rem}

/* ============================================================
   CRASH-LINK
   ============================================================ */
.crash-link{background:var(--bg)}
.crash-link__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s6);
  align-items:center;
}
.crash-link__content .badge{margin-bottom:var(--s2)}
.crash-link__content h2{margin-bottom:var(--s2)}
.crash-link__content p{color:var(--text-2);font-size:1.0625rem;line-height:1.7;margin-bottom:var(--s4)}
.crash-link__features{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.crash-link__feature{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem var(--s2);
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border);
}
.crash-link__feature-icon{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border-radius:var(--r-sm);
  color:var(--blue);
}
.crash-link__feature span{font-size:.9375rem;font-weight:500}

.crash-link__visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.crash-link__card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--s4);
  text-align:center;
  width:100%;
  max-width:340px;
  position:relative;
}
.crash-link__card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, var(--blue-glow) 0%, transparent 60%);
  pointer-events:none;
}
.crash-link__qr{
  width:160px;height:160px;
  margin:0 auto var(--s3);
  background:var(--white);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  padding:12px;
}
.crash-link__card h3{font-size:1.125rem;margin-bottom:.5rem;position:relative}
.crash-link__card p{font-size:.875rem;color:var(--text-2);position:relative}
.crash-link__pulse{
  position:absolute;top:-16px;right:-16px;
  width:40px;height:40px;
  background:var(--blue);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  box-shadow:var(--sh-blue);
  animation:ripple 2.5s ease-in-out infinite;
}
@keyframes ripple{
  0%,100%{box-shadow:0 0 0 0 rgba(229,57,53,.4), var(--sh-blue)}
  50%{box-shadow:0 0 0 12px rgba(229,57,53,0), var(--sh-blue)}
}

/* ============================================================
   UNFALLRATGEBER
   ============================================================ */
.ratgeber{background:var(--surface)}
.ratgeber__timeline{
  max-width:700px;
  margin-inline:auto;
  position:relative;
}
.ratgeber__timeline::before{
  content:'';
  position:absolute;
  left:27px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(180deg, var(--blue) 0%, var(--border) 100%);
}
.ratgeber__step{
  display:flex;gap:var(--s3);
  padding:var(--s3);
  border-radius:var(--r-lg);
  margin-bottom:var(--s2);
  transition:background var(--normal) var(--ease);
  position:relative;
}
.ratgeber__step:hover{background:var(--surface-2)}
.ratgeber__step-num{
  width:56px;height:56px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  border:2px solid var(--blue);
  color:var(--blue);
  font-family:var(--font-d);font-size:1.125rem;font-weight:800;
  position:relative;z-index:1;
  transition:all var(--normal) var(--ease);
}
.ratgeber__step:hover .ratgeber__step-num{
  background:var(--blue);
  color:var(--white);
  box-shadow:var(--sh-blue);
}
.ratgeber__step-content{padding-top:.5rem}
.ratgeber__step-content h3{font-size:1.0625rem;margin-bottom:.375rem}
.ratgeber__step-content p{font-size:.9rem;color:var(--text-2);line-height:1.6}

/* ============================================================
   WHY TOPXPERT
   ============================================================ */
.why{background:var(--bg)}
.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
}
.why-card{
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  transition:all var(--normal) var(--ease);
  position:relative;
  overflow:hidden;
}
.why-card::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, var(--blue-dark), var(--blue));
  transform:scaleX(0);
  transition:transform var(--normal) var(--ease);
  transform-origin:left;
}
.why-card:hover::after{transform:scaleX(1)}
.why-card:hover{
  border-color:var(--border-accent);
  background:var(--surface-2);
  transform:translateY(-3px);
  box-shadow:var(--sh-md);
}
.why-card__num{
  font-family:var(--font-d);
  font-size:3rem;font-weight:800;
  color:var(--surface-3);
  line-height:1;
  margin-bottom:var(--s2);
}
.why-card__icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border-radius:var(--r-md);
  color:var(--blue);
  margin-bottom:var(--s2);
}
.why-card h3{font-size:1.0625rem;margin-bottom:.5rem}
.why-card p{font-size:.875rem;color:var(--text-2);line-height:1.65}

/* ============================================================
   PARTNER
   ============================================================ */
.partner{background:var(--surface)}
.partner__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s6);
  align-items:center;
}
.partner__content .badge{margin-bottom:var(--s2)}
.partner__content h2{margin-bottom:var(--s2)}
.partner__content p{color:var(--text-2);font-size:1.0625rem;line-height:1.7;margin-bottom:var(--s4)}
.partner__benefits{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}
.partner__benefit{
  display:flex;align-items:center;gap:.75rem;
  font-size:.9375rem;font-weight:500;
}
.partner__check{
  width:20px;height:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow-2);
  border-radius:50%;
  color:var(--blue);
}
.partner__logos{
  display:flex;flex-direction:column;gap:var(--s3);
}
.partner__logo-row{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s3);
  display:flex;align-items:center;gap:var(--s3);
}
.partner__logo-icon{
  width:48px;height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue-glow);
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  color:var(--blue);
}
.partner__logo-text strong{display:block;font-size:.9375rem;font-weight:700;margin-bottom:.1rem}
.partner__logo-text span{font-size:.8125rem;color:var(--text-3)}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final{
  background:var(--bg);
  position:relative;overflow:hidden;
  padding-block:var(--s9);
}
.cta-final::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(198,40,40,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 100%, rgba(150,0,0,.06) 0%, transparent 50%);
  pointer-events:none;
}
.cta-final__inner{
  position:relative;z-index:1;
  text-align:center;
  max-width:680px;
  margin-inline:auto;
}
.cta-final__inner .badge{margin-bottom:var(--s3);justify-content:center}
.cta-final__inner h2{
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800;
  line-height:1.1;
  margin-bottom:var(--s3);
  letter-spacing:-.03em;
}
.cta-final__inner p{
  font-size:1.125rem;
  color:var(--text-2);
  line-height:1.7;
  margin-bottom:var(--s5);
}
.cta-final__actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);
  margin-bottom:var(--s4);
}
.cta-final__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);
}
.cta-final__trust-item{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;color:var(--text-3);
}
.cta-final__trust-item svg{color:var(--green)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding-top:var(--s7);
  padding-bottom:var(--s4);
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:var(--s5);
  margin-bottom:var(--s6);
}
.footer__brand{max-width:300px}
.footer__logo{
  display:flex;align-items:center;gap:.625rem;
  font-family:var(--font-d);font-weight:800;
  font-size:1.375rem;letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:var(--s2);
}
.footer__logo-mark{
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:.75rem;font-weight:800;
}
.footer__brand p{font-size:.9rem;color:var(--text-3);line-height:1.65;margin-bottom:var(--s3)}
.footer__social{display:flex;gap:.75rem}
.footer__social a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text-2);
  transition:all var(--fast) var(--ease);
}
.footer__social a:hover{
  color:var(--blue);
  border-color:var(--border-accent);
  background:var(--blue-glow);
}
.footer__col h4{
  font-family:var(--font-d);
  font-size:.875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);
  margin-bottom:var(--s2);
}
.footer__links{display:flex;flex-direction:column;gap:.5rem}
.footer__links a{
  font-size:.9rem;color:var(--text-2);
  transition:color var(--fast) var(--ease);
}
.footer__links a:hover{color:var(--text)}
.footer__contact{display:flex;flex-direction:column;gap:var(--s2)}
.footer__contact-item{
  display:flex;align-items:flex-start;gap:.75rem;
  font-size:.875rem;
}
.footer__contact-item svg{flex-shrink:0;color:var(--blue);margin-top:2px}
.footer__contact-item span{color:var(--text-2)}
.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s2);
  padding-top:var(--s3);
  border-top:1px solid var(--border);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s2)}
.footer__legal a{font-size:.8125rem;color:var(--text-3);transition:color var(--fast) var(--ease)}
.footer__legal a:hover{color:var(--text-2)}
.footer__copy{font-size:.8125rem;color:var(--text-3)}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;z-index:50;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--blue);
  color:var(--white);
  border-radius:50%;
  box-shadow:var(--sh-blue);
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:all var(--normal) var(--ease);
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:var(--sh-blue-lg)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:100ms}
.reveal-delay-2{transition-delay:200ms}
.reveal-delay-3{transition-delay:300ms}
.reveal-delay-4{transition-delay:400ms}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero__scan-line{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .nav__menu{display:none}
  .nav__burger{display:flex}

  .leistungen__grid{grid-template-columns:repeat(2,1fr)}
  .spez__grid{grid-template-columns:repeat(3,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  :root{--hh:64px}

  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__sub{max-width:100%;margin-inline:auto}
  .hero__actions{justify-content:center}
  .hero__visual{order:1;margin-top:var(--s3)}
  .hero__content{order:0}
  .hero-car{max-width:460px;margin-inline:auto}
  .hero__car-wrap{max-width:460px;margin-inline:auto}
  .hero__stats{grid-template-columns:repeat(2,1fr)}

  .trust__grid{grid-template-columns:repeat(2,1fr)}

  .problem__grid{grid-template-columns:1fr}
  .leistungen__grid{grid-template-columns:1fr}
  .spez__grid{grid-template-columns:repeat(2,1fr)}
  .crash-scan__steps{grid-template-columns:repeat(2,1fr)}
  .crash-scan__steps::before{display:none}
  .crash-link__grid{grid-template-columns:1fr}
  .why__grid{grid-template-columns:1fr}
  .partner__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}

  .back-to-top{bottom:1.25rem;right:1.25rem}
}

@media(max-width:480px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:1fr}
  .spez__grid{grid-template-columns:repeat(2,1fr)}
  .crash-scan__steps{grid-template-columns:1fr}
  .cta-final__actions{flex-direction:column;align-items:stretch}
  .cta-final__actions .btn{justify-content:center}
}