/* =========================================================
   K&S AUTOMOBILE — STARTSEITE (habillage immersif)
   ---------------------------------------------------------
   Chargee uniquement par HomeController, apres style.css.
   Le fichier peut donc surcharger le socle sans effet sur
   les autres pages.

   Principes :
   - fond sombre continu, du header au footer ;
   - profondeur par couches (grille en perspective, aurores,
     poussiere animee sur canvas, bruit, vignette) ;
   - toute animation est desactivee par prefers-reduced-motion,
     le contenu restant lisible et complet.
   ========================================================= */

/* ---------------------------------------------------------
   1. Atmosphere generale de la page
   --------------------------------------------------------- */
body{
  background:#04050a;
  color:rgba(255,255,255,.72);
}
/* Le socle clair posait une respiration blanche avant le pied
   de page : sur fond sombre continu elle n'a plus de sens. */
.site-footer{margin-top:0;border-top:1px solid rgba(255,255,255,.07);}

.startseite{
  --void:#04050a;
  --deep:#080a12;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --edge:rgba(255,255,255,.10);
  --edge-2:rgba(255,255,255,.18);
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.48);
  --halo:rgba(233,204,109,.55);
  --ice:#9db4d6;
  --blur:22px;

  position:relative;
  background:var(--void);
}
/* Pas de contexte d'empilement ici : la barre de progression
   doit pouvoir passer au-dessus de l'en-tete fixe. */

/* Halo doux qui suit le curseur sur toute la page. */
.startseite::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px 520px at var(--cx,50%) var(--cy,20%),
             rgba(201,162,39,.10), transparent 70%);
  opacity:0;transition:opacity .8s ease;
}
.startseite.is-zeiger::before{opacity:1;}

.startseite section{position:relative;z-index:1;}
.startseite .section-pad{padding:88px 0;}
/* L'ancre ne doit pas passer sous l'en-tete fixe. */
.startseite [id]{scroll-margin-top:96px;}

/* Halos de section : sans eux la page n'est qu'un aplat noir.
   Chaque bloc recoit une lueur decalee, l'oeil suit la descente. */
#vorteile{background:radial-gradient(900px 520px at 80% 6%, rgba(96,132,200,.09), transparent 62%);}
.st-ablauf{background:radial-gradient(900px 540px at 16% 24%, rgba(201,162,39,.08), transparent 60%);}
.st-fahrzeuge{background:radial-gradient(1000px 580px at 84% 26%, rgba(201,162,39,.07), transparent 62%);}
#maengel{background:radial-gradient(880px 520px at 12% 30%, rgba(96,132,200,.08), transparent 62%);}

/* -------- Titres et textes sur fond sombre -------- */
.startseite h1,.startseite h2,.startseite h3,.startseite h4{color:var(--ink);}
.startseite p{color:var(--ink-2);}
.startseite .section-head p{color:var(--ink-3);}
.startseite .kicker{
  color:var(--gold-2);
  display:inline-flex;align-items:center;gap:9px;
}
.startseite .kicker::before{
  content:"";width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--gold));
}

/* -------- Apparition au defilement (variante immersive) -------- */
.startseite .reveal{
  opacity:0;transform:translateY(42px) scale(.985);filter:blur(8px);
  transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease);
}
.startseite .reveal.in-view{opacity:1;transform:none;filter:none;}
.startseite .reveal-delay-1.in-view{transition-delay:.09s;}
.startseite .reveal-delay-2.in-view{transition-delay:.18s;}
.startseite .reveal-delay-3.in-view{transition-delay:.27s;}
.startseite .reveal-delay-4.in-view{transition-delay:.36s;}

/* ---------------------------------------------------------
   2. Barre de progression de lecture
   --------------------------------------------------------- */
.st-fortschritt{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none;
  background:rgba(255,255,255,.06);
}
.st-fortschritt span{
  display:block;height:100%;width:100%;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));
  box-shadow:0 0 14px rgba(201,162,39,.7);
}

/* ---------------------------------------------------------
   3. HERO
   --------------------------------------------------------- */
.st-hero{
  min-height:100vh;
  display:flex;align-items:center;
  padding:118px 0 66px;
  overflow:hidden;
  background:
    radial-gradient(1100px 700px at 12% 8%, rgba(201,162,39,.16), transparent 62%),
    radial-gradient(900px 600px at 88% 78%, rgba(120,150,210,.10), transparent 62%),
    linear-gradient(180deg,#04050a 0%,#0a0c14 48%,#04050a 100%);
}

/* -------- Couches d'ambiance -------- */
.st-atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

/* Sol en perspective : la profondeur du plateau. */
.st-atmo__boden{
  position:absolute;left:50%;bottom:-4%;
  width:260%;height:62%;
  transform:translateX(-50%) perspective(720px) rotateX(74deg);
  transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(201,162,39,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:90px 60px;
  animation:bodenLauf 5.5s linear infinite;
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 45%,transparent 88%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.35) 45%,transparent 88%);
  opacity:.85;
}
@keyframes bodenLauf{to{background-position:0 60px,0 0;}}

/* Aurores : trois masses lentes en fondu additif. */
.st-atmo__aurora{
  position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;
  will-change:transform;
}
.st-atmo__aurora--1{
  width:640px;height:640px;right:-140px;top:-8%;
  background:radial-gradient(circle,rgba(201,162,39,.42),transparent 68%);
  animation:auroraA 15s ease-in-out infinite;
}
.st-atmo__aurora--2{
  width:520px;height:520px;left:-160px;top:34%;
  background:radial-gradient(circle,rgba(96,132,200,.34),transparent 68%);
  animation:auroraB 19s ease-in-out infinite;
}
.st-atmo__aurora--3{
  width:760px;height:420px;left:34%;bottom:-16%;
  background:radial-gradient(circle,rgba(233,204,109,.22),transparent 70%);
  animation:auroraA 22s ease-in-out infinite reverse;
}
@keyframes auroraA{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-40px,44px,0) scale(1.12);}
}
@keyframes auroraB{
  0%,100%{transform:translate3d(0,0,0) scale(1.06);}
  50%{transform:translate3d(52px,-38px,0) scale(.94);}
}

/* Poussiere animee (canvas alimente par home.js). */
.st-atmo__staub{position:absolute;inset:0;width:100%;height:100%;opacity:.85;}

/* Lignes de balayage + grain : la texture "ecran". */
.st-atmo__raster{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  opacity:.5;
}
.st-atmo__vignette{
  position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(4,5,10,.85) 100%);
}

/* -------- Grille du hero --------
   Le conteneur est un element flex du hero : sans width et min-width
   explicites, il se dimensionne sur son contenu (max-content) et
   deborde sur petit ecran. */
.st-hero > .container{flex:1 1 100%;width:100%;min-width:0;}
.st-hero__inner{position:relative;z-index:2;min-width:0;will-change:transform,opacity;}
.st-hero__gitter{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;align-items:center;
}
.st-hero__text,.st-buehne{min-width:0;}

/* -------- Pastilles d'entree -------- */
.st-hero__marken{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.st-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--edge);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.01em;
  position:relative;overflow:hidden;
}
.st-chip svg{width:14px;height:14px;color:var(--gold-2);flex:none;}
.st-chip--puls::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:chipGlanz 5.5s ease-in-out 1.6s infinite;
}
@keyframes chipGlanz{0%{transform:translateX(-120%);}28%,100%{transform:translateX(120%);}}

/* -------- Titre : reveal mot a mot -------- */
.st-titel{
  font-size:clamp(2.05rem,3.7vw,3.2rem);
  font-weight:800;line-height:1.08;letter-spacing:-.025em;
  margin:0 0 18px;
}
.st-wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;}
.st-wort > i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);opacity:0;
  animation:wortAuf .95s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes wortAuf{to{transform:translateY(0);opacity:1;}}

/* Le degre de brillance est porte par un element interne :
   l'animation d'apparition du mot reste intacte. */
.st-leucht{
  display:inline-block;
  background:linear-gradient(100deg,var(--gold-2) 0%,#fff6d2 38%,var(--gold) 62%,var(--gold-2) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:leuchtLauf 7s linear infinite;
}
@keyframes leuchtLauf{to{background-position:220% 0;}}

.st-hero__lead{
  font-size:1.01rem;line-height:1.62;max-width:50ch;margin:0;color:var(--ink-2);
  opacity:0;animation:aufBlende .9s var(--ease) .75s forwards;
}
.st-hero__aktion{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;
  opacity:0;animation:aufBlende .9s var(--ease) .9s forwards;
}
@keyframes aufBlende{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* -------- Boutons magnetiques -------- */
.startseite .btn{
  will-change:transform;
  transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
}
.st-magnet{position:relative;isolation:isolate;}
.st-magnet::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 65%);
  opacity:0;transition:opacity .35s ease;
}
.st-magnet:hover::after{opacity:1;}
.startseite .btn-outline{
  background:rgba(255,255,255,.04);
  border-color:var(--edge-2);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.startseite .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}

/* -------- Plateau du vehicule -------- */
.st-buehne{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:366px;
  transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-12px),0);
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.st-buehne__ring{
  position:absolute;top:50%;left:50%;
  width:min(30vw,420px);aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotateX(72deg);
  border:1px solid rgba(201,162,39,.30);border-radius:50%;
  box-shadow:0 0 60px rgba(201,162,39,.20) inset;
  animation:ringDreh 18s linear infinite;
}
.st-buehne__ring--2{
  width:min(22vw,320px);border-color:rgba(255,255,255,.14);
  animation-duration:12s;animation-direction:reverse;
}
@keyframes ringDreh{
  from{transform:translate(-50%,-50%) rotateX(72deg) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotateX(72deg) rotate(360deg);}
}
.st-buehne__licht{
  position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);
  width:min(28vw,390px);height:104px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(233,204,109,.30),transparent 72%);
  filter:blur(30px);
  animation:lichtPuls 4.5s ease-in-out infinite;
}
@keyframes lichtPuls{0%,100%{opacity:.65;}50%{opacity:1;}}

/* Silhouette sombre cernee d'or : plus proche d'un hologramme
   que de l'illustration pleine du reste du site. */
.st-buehne__wagen{
  position:relative;width:min(30vw,430px);height:auto;color:#111520;
  filter:
    drop-shadow(0 0 1.5px rgba(233,204,109,.95))
    drop-shadow(0 0 20px rgba(201,162,39,.55))
    drop-shadow(0 30px 38px rgba(0,0,0,.85));
  opacity:0;
  animation:wagenEin 1.5s var(--ease) .35s forwards,wagenSchweben 7s ease-in-out 1.9s infinite;
}
@keyframes wagenEin{
  from{opacity:0;transform:translateX(70px) scale(.92);}
  to{opacity:1;transform:none;}
}
@keyframes wagenSchweben{0%,100%{transform:translateY(0);}50%{transform:translateY(-13px);}}

/* Reflet au sol : la meme silhouette, retournee et fondue. */
.st-buehne__spiegel{
  position:absolute;top:calc(50% + 40px);left:50%;
  width:min(30vw,430px);height:auto;color:var(--gold-2);
  transform:translateX(-50%) scaleY(-1);
  opacity:.16;filter:blur(3px);
  mask-image:linear-gradient(to top,transparent 12%,#000 92%);
  -webkit-mask-image:linear-gradient(to top,transparent 12%,#000 92%);
  pointer-events:none;
}

/* Etiquettes HUD flottantes autour du vehicule.
   Fond quasi opaque et non pas verre depoli : ces pastilles passent
   au-dessus de la silhouette filtree, ou le backdrop-filter donne un
   rendu instable selon le moteur. */
.st-hud{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:12px;
  background:rgba(9,11,18,.94);border:1px solid rgba(201,162,39,.34);
  color:#fff;font-size:.76rem;font-weight:600;white-space:nowrap;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  opacity:0;animation:aufBlende .8s var(--ease) forwards;
}
.st-hud svg{width:14px;height:14px;color:var(--gold-2);flex:none;}
.st-hud::before{
  content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;
  border-radius:50%;background:var(--gold);transform:translateY(-50%);
  box-shadow:0 0 0 3px rgba(201,162,39,.22);
}
/* Le conteneur des pastilles ne genere aucune boite sur grand ecran :
   elles se positionnent donc par rapport a la scene, comme si elles
   en etaient les enfants directs. */
.st-buehne__reihe{display:contents;}

/* Les trois pastilles encadrent la silhouette sans la recouvrir :
   au-dessus du capot, au-dessus du hayon, sous le seuil. */
/* Marges calculees pour que les cadres ne se croisent jamais, meme
   quand la silhouette flotte de +/- 13 px. */
.st-hud--1{left:-3%;top:3%;animation-delay:1.5s;}
.st-hud--2{right:-5%;top:9.5%;animation-delay:1.7s;}
.st-hud--3{left:4%;bottom:4%;animation-delay:1.9s;}

/* -------- Bandeau de chiffres, sous la recherche -------- */
.st-hero__zahlen{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;
  opacity:0;animation:aufBlende .9s var(--ease) 1.05s forwards;
}
.st-zahl{padding-left:18px;border-left:1px solid rgba(255,255,255,.12);}
.st-zahl:first-child{border-left:0;padding-left:0;}
.st-zahl b{
  display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.42rem;
  background:linear-gradient(135deg,#fff,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.st-zahl span{
  display:block;font-size:.7rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.11em;margin-top:3px;
}

/* -------- Masque de recherche : cadre lumineux -------- */
.st-hero__suche{
  position:relative;z-index:2;margin-top:34px;
}
.startseite .suchmaske{
  max-width:none;margin:0;padding:2px;
  background:linear-gradient(140deg,rgba(201,162,39,.55),rgba(255,255,255,.10) 42%,rgba(96,132,200,.35));
  border:0;border-radius:20px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.startseite .suchmaske__form{
  background:rgba(8,10,18,.86);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border-radius:18px;padding:22px;
}
/* Les listes deroulantes ont une largeur intrinseque egale a leur
   plus longue option : sans minmax(0,...) elles elargissent la grille. */
.startseite .suchmaske__felder{grid-template-columns:repeat(5,minmax(0,1fr));}
.startseite .suchmaske__feld label{color:var(--gold-2);letter-spacing:.1em;}
.startseite .suchmaske__feld select{
  background-color:rgba(255,255,255,.05);
  border-color:var(--edge);
  transition:border-color .3s,box-shadow .3s,background-color .3s;
}
.startseite .suchmaske__feld select:hover{background-color:rgba(255,255,255,.09);}
.startseite .suchmaske__alle{color:var(--ink-3);}

/* -------- Invite de defilement --------
   Placee dans la gouttiere de droite : elle ne peut donc jamais
   croiser le bandeau de chiffres. Reservee aux grands ecrans. */
.st-scroll{
  position:absolute;right:24px;bottom:34px;z-index:3;
  display:none;flex-direction:column;align-items:center;gap:12px;
  color:var(--ink-3);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:0;animation:aufBlende 1s var(--ease) 1.6s forwards;
  transition:color .3s ease;
}
.st-scroll:hover{color:var(--gold-2);}
.st-scroll > span:first-child{writing-mode:vertical-rl;}
@media (min-width:1320px){.st-scroll{display:flex;}}
.st-scroll__spur{display:block;width:1px;height:44px;background:rgba(255,255,255,.18);position:relative;overflow:hidden;}
.st-scroll__spur::after{
  content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;
  background:linear-gradient(180deg,transparent,var(--gold-2));
  animation:scrollLauf 2.1s ease-in-out infinite;
}
@keyframes scrollLauf{0%{top:-45%;}70%,100%{top:100%;}}

/* ---------------------------------------------------------
   4. Bandeau des marques
   --------------------------------------------------------- */
.st-marken{
  position:relative;padding:30px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.st-marken__spur{
  display:flex;gap:58px;width:max-content;white-space:nowrap;
  animation:markenLauf 34s linear infinite;
}
.st-marken:hover .st-marken__spur{animation-play-state:paused;}
@keyframes markenLauf{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.st-marken__spur span{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.08em;
  color:rgba(255,255,255,.30);
  transition:color .35s ease,text-shadow .35s ease;
  cursor:default;
}
.st-marken__spur span:hover{color:var(--gold-2);text-shadow:0 0 22px rgba(201,162,39,.55);}

/* ---------------------------------------------------------
   5. Bento — Warum K&S
   --------------------------------------------------------- */
.st-bento{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;
}
.st-karte{
  position:relative;overflow:hidden;
  grid-column:span 3;
  padding:32px 30px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--edge);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .5s var(--ease),border-color .4s ease,box-shadow .5s var(--ease);
}
.st-karte--gross{grid-column:span 6;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;}
.st-karte--klein{grid-column:span 2;}

/* Projecteur pilote par le curseur (variables posees par home.js). */
.st-karte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,50%),rgba(201,162,39,.16),transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
/* Liseré lumineux au survol. */
.st-karte::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:radial-gradient(280px 280px at var(--mx,50%) var(--my,50%),rgba(233,204,109,.75),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
.st-karte:hover{transform:translateY(-6px);border-color:rgba(201,162,39,.28);box-shadow:0 40px 80px -50px rgba(0,0,0,.9);}
.st-karte:hover::before,.st-karte:hover::after{opacity:1;}

/* Le contenu passe devant les deux couches lumineuses. */
.st-karte > *{position:relative;z-index:2;}
.st-karte__inhalt{position:relative;z-index:2;}
.st-karte h3{font-size:1.14rem;margin-bottom:8px;}
.st-karte p{font-size:.92rem;margin:0;color:var(--ink-3);line-height:1.65;}

.st-symbol{
  position:relative;z-index:2;
  width:56px;height:56px;border-radius:16px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(201,162,39,.22),rgba(255,255,255,.04));
  border:1px solid rgba(201,162,39,.30);
}
.st-symbol svg{width:26px;height:26px;color:var(--gold-2);}
.st-symbol::after{
  content:"";position:absolute;inset:-6px;border-radius:20px;
  border:1px solid rgba(201,162,39,.18);
  animation:symbolPuls 3.4s ease-in-out infinite;
}
@keyframes symbolPuls{0%,100%{opacity:.25;transform:scale(1);}50%{opacity:.8;transform:scale(1.06);}}

/* Visuel du grand bloc : jauge circulaire animee. */
.st-messuhr{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;}
.st-messuhr svg{width:190px;height:190px;transform:rotate(-90deg);}
.st-messuhr circle{fill:none;stroke-width:6;stroke-linecap:round;}
.st-messuhr .bahn{stroke:rgba(255,255,255,.08);}
.st-messuhr .wert{
  stroke:url(#stVerlauf);
  stroke-dasharray:534;stroke-dashoffset:534;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.st-karte.in-view .st-messuhr .wert{stroke-dashoffset:var(--soll,112);}
.st-messuhr__text{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.st-messuhr__text b{
  font-family:'Poppins',sans-serif;font-size:1.9rem;font-weight:800;color:#fff;line-height:1;
}
.st-messuhr__text span{font-size:.72rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;margin-top:6px;}

/* ---------------------------------------------------------
   6. Deroulement en 3 etapes
   --------------------------------------------------------- */
.st-ablauf{position:relative;}
.st-ablauf__buehne{position:relative;}
/* Bloc centre sous une section (bouton de rappel). */
.st-mitte{text-align:center;margin-top:46px;}
.st-ablauf__schiene{
  position:absolute;left:0;right:0;top:46px;height:2px;
  background:rgba(255,255,255,.13);
}
.st-ablauf__strahl{
  display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));
  box-shadow:0 0 18px rgba(201,162,39,.7);
  transition:transform .25s linear;
}
.st-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative;}
.st-schritt{padding-top:0;}
.st-schritt__kopf{
  position:relative;width:92px;height:92px;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
}
.st-schritt__scheibe{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.10),rgba(8,10,18,.9));
  border:1px solid var(--edge);
  transition:border-color .5s ease,box-shadow .5s ease,transform .6s var(--ease);
}
.st-schritt__nummer{
  position:relative;z-index:2;
  font-family:'Poppins',sans-serif;font-weight:800;font-size:1.9rem;
  color:rgba(255,255,255,.35);transition:color .5s ease,text-shadow .5s ease;
}
.st-schritt.in-view .st-schritt__scheibe{
  border-color:rgba(201,162,39,.55);
  box-shadow:0 0 0 6px rgba(201,162,39,.08),0 18px 50px -24px rgba(201,162,39,.8);
  transform:scale(1.03);
}
.st-schritt.in-view .st-schritt__nummer{color:var(--gold-2);text-shadow:0 0 24px rgba(201,162,39,.6);}
.st-schritt h3{font-size:1.1rem;margin-bottom:8px;}
.st-schritt p{font-size:.92rem;color:var(--ink-3);line-height:1.65;margin:0;}

/* ---------------------------------------------------------
   7. Fahrzeuge — les cartes du catalogue en version sombre
   --------------------------------------------------------- */
.st-fahrzeuge .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.startseite .vehicle-card{
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s ease;
}
.startseite .vehicle-card:hover{
  border-color:rgba(201,162,39,.35);
  box-shadow:0 50px 90px -55px rgba(0,0,0,.95),0 0 0 1px rgba(201,162,39,.12);
}
/* L'inclinaison au curseur remplace le simple soulevement.
   Le suivi doit etre court, sinon la carte traine derriere la souris. */
.startseite .vehicle-card.st-kippt{
  transition:transform .18s ease-out,box-shadow .5s var(--ease),border-color .4s ease;
}
.startseite .vehicle-card.st-kippt:hover{transform:none;}
.startseite .vehicle-media{border-radius:16px 16px 0 0;}
/* Silhouette de remplacement : discrete sur fond sombre, elle ne doit
   pas peser autant qu'une vraie photo. */
.startseite .vehicle-media svg{color:rgba(255,255,255,.11);filter:none;}
.startseite .vehicle-card:hover .vehicle-media svg{color:rgba(233,204,109,.20);}
.startseite .vehicle-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,5,10,.65));
}
.startseite .vehicle-title,.startseite .vehicle-title a{color:#fff;}
.startseite .vehicle-title span{color:var(--ink-3);}
.startseite .vehicle-specs{color:var(--ink-3);}
.startseite .vehicle-specs svg{color:var(--gold-2);}
.startseite .vehicle-foot{border-top-color:rgba(255,255,255,.10);}
.startseite .vehicle-price{color:#fff;}
.startseite .vehicle-price small{color:var(--ink-3);}
.startseite .vehicle-link{
  background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--edge);
}
.startseite .vehicle-link:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
.startseite .btn-outline-dark{
  background:transparent;border-color:var(--edge-2);color:#fff;
}
.startseite .btn-outline-dark:hover{background:#fff;color:var(--black);border-color:#fff;}

/* ---------------------------------------------------------
   8. Ankauf mit Mängeln + tableau de bord des chiffres
   --------------------------------------------------------- */
.st-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;}
.st-liste{margin:24px 0 30px;display:flex;flex-direction:column;gap:12px;}
.st-liste li{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  color:var(--ink-2);font-size:.92rem;
  transition:transform .4s var(--ease),border-color .4s ease,background .4s ease;
}
.st-liste li:hover{transform:translateX(6px);border-color:rgba(201,162,39,.3);background:rgba(201,162,39,.06);}
.st-liste svg{width:17px;height:17px;color:var(--gold-2);flex:none;margin-top:2px;}

.st-hud-panel{
  position:relative;overflow:hidden;
  padding:38px 32px;border-radius:22px;
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 50px 100px -60px rgba(0,0,0,.95);
}
.st-hud-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);
}
/* Balayage lumineux, comme un scan. */
.st-hud-panel::after{
  content:"";position:absolute;left:0;right:0;height:120px;top:-120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.16),transparent);
  animation:scanLauf 6s ease-in-out infinite;
}
@keyframes scanLauf{0%{top:-120px;}70%,100%{top:100%;}}

.st-kennzahlen{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;}
.st-kennzahl{text-align:center;}
.st-kennzahl b{
  display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:2.1rem;line-height:1.1;
  background:linear-gradient(135deg,#fff 10%,var(--gold-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.st-kennzahl span{
  display:block;margin-top:6px;font-size:.76rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;
}

/* ---------------------------------------------------------
   9. Avis clients — defilement continu
   --------------------------------------------------------- */
.st-stimmen{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.st-stimmen__spur{
  display:flex;gap:22px;width:max-content;
  animation:stimmenLauf 46s linear infinite;
}
.st-stimmen:hover .st-stimmen__spur{animation-play-state:paused;}
@keyframes stimmenLauf{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.st-stimme{
  flex:0 0 366px;padding:28px;border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .4s ease,transform .4s var(--ease);
  white-space:normal;
}
.st-stimme:hover{border-color:rgba(201,162,39,.35);transform:translateY(-5px);}
.st-stimme__sterne{color:var(--gold-2);letter-spacing:3px;margin-bottom:12px;font-size:.95rem;}
.st-stimme blockquote{margin:0;}
.st-stimme p{color:rgba(255,255,255,.82);font-size:.94rem;line-height:1.7;margin:0 0 18px;}
.st-stimme__person{display:flex;align-items:center;gap:12px;}
.st-stimme__avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:700;color:var(--black);
  background:linear-gradient(135deg,var(--gold-2),var(--gold-3));
}
.st-stimme__person b{display:block;font-size:.9rem;color:#fff;}
.st-stimme__person span{font-size:.76rem;color:var(--ink-3);}

/* ---------------------------------------------------------
   10. Appel a l'action final
   --------------------------------------------------------- */
.st-cta{
  position:relative;overflow:hidden;
  padding:78px 50px;border-radius:28px;text-align:center;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(201,162,39,.20), transparent 68%),
    linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(201,162,39,.22);
  box-shadow:0 60px 120px -70px rgba(201,162,39,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.st-cta::before{
  content:"";position:absolute;top:-46%;left:50%;transform:translateX(-50%);
  width:820px;height:560px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(233,204,109,.34),transparent 66%);
  filter:blur(44px);animation:lichtPuls 5.5s ease-in-out infinite;
}
.st-cta > *{position:relative;z-index:2;}
.st-cta h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:14px;}
.st-cta p{max-width:540px;margin:0 auto 30px;color:var(--ink-2);}
.st-cta__aktion{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------------------------------------------------------
   11. Responsif
   --------------------------------------------------------- */
/* -------- 1201 px et plus : disposition de reference -------- */

/* -------- Portables et petits ecrans de bureau -------- */
@media (max-width:1200px){
  .st-hero__gitter{gap:36px;}
  .st-buehne__wagen,.st-buehne__spiegel{width:min(33vw,400px);}
}

/* -------- La scene passe au-dessus du texte --------
   Le vehicule occupe alors toute la largeur : les pastilles ne
   peuvent plus l'encadrer. Elles quittent le positionnement absolu
   et deviennent une ligne de reperes sous lui, ce qui supprime tout
   risque de chevauchement quelle que soit la largeur.
   Les decors centres sur la scene (anneaux, halo, reflet) perdent
   leur point d'ancrage dans cette disposition : le halo dore passe
   sur la silhouette elle-meme. */
@media (max-width:1080px){
  .st-hero{padding:112px 0 58px;}
  .st-hero__gitter{grid-template-columns:minmax(0,1fr);gap:28px;}
  .st-titel{max-width:none;}

  .st-buehne{
    order:-1;min-height:0;
    flex-direction:column;align-items:center;gap:16px;
  }
  .st-buehne__ring,.st-buehne__licht,.st-buehne__spiegel{display:none;}
  .st-buehne__wagen{
    width:min(56vw,400px);margin:0;
    filter:
      drop-shadow(0 0 1.5px rgba(233,204,109,.95))
      drop-shadow(0 0 26px rgba(201,162,39,.5))
      drop-shadow(0 22px 34px rgba(0,0,0,.85));
  }
  .st-buehne__reihe{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  }
  .st-hud{position:static;box-shadow:none;}
  .st-hud::before{display:none;}

  .st-karte--gross{grid-template-columns:minmax(0,1fr);}
  .st-karte--klein{grid-column:span 3;}
  .st-fahrzeuge .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* -------- Tablettes -------- */
@media (max-width:900px){
  .st-hero{min-height:0;}
  .startseite .section-pad{padding:72px 0;}
  .st-schritte{grid-template-columns:minmax(0,1fr);gap:34px;}
  .st-ablauf__schiene{display:none;}
  .st-split{grid-template-columns:minmax(0,1fr);gap:38px;}
  .startseite .suchmaske__felder{grid-template-columns:repeat(2,minmax(0,1fr));}
  .st-buehne__wagen{width:min(62vw,360px);}
}

/* -------- Grands telephones et tablettes en portrait -------- */
@media (max-width:640px){
  .st-karte,.st-karte--klein{grid-column:span 6;}
  .st-karte{padding:26px 22px;}
  .st-fahrzeuge .catalog-grid{grid-template-columns:minmax(0,1fr);}
  .st-hero__zahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;}
  .st-zahl b{font-size:1.35rem;}
  .st-zahl:nth-child(3){border-left:0;padding-left:0;}
  .st-buehne__wagen{width:min(72vw,320px);}
  .st-hud{font-size:.72rem;padding:7px 11px;gap:6px;}
  .st-kennzahlen{gap:22px 14px;}
  .st-cta{padding:52px 24px;}
  .st-stimme{flex-basis:300px;}
  .startseite .suchmaske__form{padding:16px;}
  .st-messuhr svg{width:160px;height:160px;}
}

/* -------- Telephones -------- */
@media (max-width:480px){
  .st-hero{padding:100px 0 44px;}
  .startseite .section-pad{padding:60px 0;}
  .st-liste li{padding:11px 13px;font-size:.88rem;}
  .st-hud-panel{padding:30px 22px;}
  .st-kennzahl b{font-size:1.85rem;}
  .st-stimme{flex-basis:270px;padding:22px;}
  .st-cta{padding:44px 20px;border-radius:22px;}
}

/* -------- Tres petits ecrans (pliables, 280-360 px) --------
   Les libelles allemands sont longs : les boutons doivent pouvoir
   passer sur deux lignes plutot que deborder. */
@media (max-width:380px){
  /* Sous ~380 px, deux colonnes de filtres deviennent illisibles. */
  .startseite .suchmaske__felder{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:360px){
  .startseite .btn{
    white-space:normal;text-align:center;line-height:1.35;
    padding:12px 18px;font-size:.9rem;
  }
  .st-hud{font-size:.68rem;padding:6px 9px;}
  .st-karte{padding:22px 18px;}
  .st-messuhr svg{width:140px;height:140px;}
  .st-messuhr__text b{font-size:1.6rem;}
}

/* ---------------------------------------------------------
   12. Mouvement reduit
   ---------------------------------------------------------
   Le contenu reste entier : seules les animations tombent.
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .startseite *,
  .startseite *::before,
  .startseite *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .startseite .reveal{opacity:1;transform:none;filter:none;}
  .st-wort > i{transform:none;opacity:1;}
  .st-hero__lead,.st-hero__aktion,.st-hero__zahlen,.st-hud,.st-scroll{opacity:1;}
  .st-buehne__wagen{opacity:1;}
  .st-atmo__staub,.st-atmo__boden{display:none;}
  .st-marken__spur,.st-stimmen__spur{animation:none;transform:none;}
  .st-stimmen,.st-marken{overflow-x:auto;}
  .st-messuhr .wert{stroke-dashoffset:var(--soll,112);}
}