/* DriveSolution – Designsystem / gemeinsame Basis
   Quelle der Wahrheit = freigegebenes Mockup (Design-Mockup/index.html).
   Alles unter dem Prefix .ds- gescoped. */

:root{
  --ds-bg:#0b0b0d; --ds-bg-2:#0f0f12; --ds-surface:#16161b;
  --ds-border:rgba(255,255,255,.09); --ds-border-2:rgba(255,255,255,.16);
  --ds-text:#f5f5f6; --ds-muted:#a8a8b2; --ds-faint:#6e6e78;
  --ds-accent:#e11d2a; --ds-accent-h:#c4161f;
  --ds-r:14px; --ds-maxw:1320px;
}

/* Scope: wir setzen Grundlagen nur auf .ds-scope-Container, damit das Theme/Elementor-Backend
   nicht global überschrieben wird. Jedes Widget rendert seinen Root mit Klasse .ds-scope. */
.ds-scope{
  color:var(--ds-text);
  font-family:"Outfit",system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ds-scope *{box-sizing:border-box}
.ds-scope img{display:block;max-width:100%}
.ds-scope a{color:inherit;text-decoration:none}

.ds-display{font-family:"Archivo",system-ui,sans-serif;font-weight:900;line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.ds-scope h2.ds-display{letter-spacing:-.01em;line-height:1}
.ds-accent{color:var(--ds-accent)}
.ds-muted{color:var(--ds-muted)}

.ds-wrap{max-width:var(--ds-maxw);margin:0 auto;padding:0 28px}

.ds-kicker{font-family:"Archivo",sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ds-muted)}
.ds-kicker .ds-accent{color:var(--ds-accent)}

/* Buttons */
.ds-btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Archivo",sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  border-radius:8px;padding:.95rem 1.6rem;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,color .2s}
.ds-btn:active{transform:translateY(1px)}
.ds-btn svg{width:1.05em;height:1.05em;flex:none}
.ds-btn--primary{background:var(--ds-accent);color:#fff}
.ds-btn--primary:hover{background:var(--ds-accent-h);transform:translateY(-2px);color:#fff}
.ds-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.ds-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);transform:translateY(-2px);color:#fff}
.ds-btn--ghost-soft{background:transparent;color:#fff;border-color:var(--ds-border-2)}
.ds-btn--ghost-soft:hover{border-color:#fff;background:rgba(255,255,255,.06);transform:translateY(-2px);color:#fff}
.ds-btn--dark{background:#0b0b0d;color:#fff}
.ds-btn--dark:hover{background:#000;color:#fff;transform:translateY(-2px)}

/* Sektions-Grundlayout (von mehreren Widgets genutzt).
   Eigener dunkler Hintergrund -> robust, egal welchen Body-/Theme-Hintergrund WP setzt. */
.ds-block{padding:7.5em 0;background:var(--ds-bg)}
.ds-block--flush-top{padding-top:0}
.ds-block--flush-bottom{padding-bottom:0}
.ds-block--compact{padding:4.75em 0}
/* Abgesetztes Band (leicht heller + Trennlinien) – z. B. Zahlen-Band. */
.ds-block--band{background:var(--ds-bg-2);border-top:1px solid var(--ds-border);border-bottom:1px solid var(--ds-border)}
.ds-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:2em;margin-bottom:3.5em;flex-wrap:wrap}
.ds-headrow h2{font-size:clamp(2.2rem,5vw,4rem)}
.ds-headrow p{color:var(--ds-muted);max-width:38ch;font-size:1.05rem}
@media(max-width:980px){.ds-block{padding:5.25em 0}.ds-block--flush-top{padding-top:0}}

/* Sektions-Kopf (zentriert), von den Design-Vielfalt-Widgets geteilt (usp/steps/stats/faq).
   Kicker mit kurzem rotem Unterstrich = wiederkehrendes „Telemetrie"-Motiv. */
.ds-shead{max-width:660px;margin:0 auto 4em;text-align:center}
.ds-shead--left{margin-left:0;margin-right:auto;text-align:left}
.ds-shead .ds-kicker{display:inline-flex;align-items:center;gap:.55em}
.ds-shead__bar{display:block;width:44px;height:3px;background:var(--ds-accent);border-radius:2px;margin:1.1em auto 1.3em}
.ds-shead--left .ds-shead__bar{margin-left:0}
.ds-shead h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.ds-shead p{color:var(--ds-muted);margin-top:1.1em;font-size:1.06rem;max-width:52ch}
.ds-shead:not(.ds-shead--left) p{margin-left:auto;margin-right:auto}
@media(max-width:980px){.ds-shead{margin-bottom:2.75em}}

/* Übergroße „Ghost"-Nummer (Archivo, transparent, dünne Kontur) – Signatur für Steps & Stats. */
.ds-ghostnum{font-family:"Archivo",system-ui,sans-serif;font-weight:900;line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--ds-border-2);font-variant-numeric:tabular-nums}

/* Scroll-Reveal (per ds-app.js). Nur ausblenden, wenn JS aktiv ist (.ds-js) ->
   ohne JS bleibt der Inhalt sichtbar (kein „leere Seite"-Risiko). */
.ds-js .ds-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.ds-reveal.ds-in{opacity:1;transform:none}

/* Gemeinsames Inline-SVG-Icon-Verhalten */
.ds-ico{display:inline-block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;flex:none}
.ds-ico--fill{fill:currentColor;stroke:none}

/* ============================================================
   v0.3.0 – Design-Effekte (Startseite aufpeppen)
   ============================================================ */

/* Telemetrie-Linie: dünne rote Scroll-Fortschrittslinie am linken Rand
   (links statt rechts, damit die Scrollleiste sie nicht verdeckt). */
.ds-scrollline{position:fixed;top:0;left:0;width:3px;height:100vh;height:100dvh;
  background:rgba(255,255,255,.05);z-index:60;pointer-events:none}
.ds-scrollline__fill{display:block;width:100%;height:100%;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(180deg,var(--ds-accent),var(--ds-accent-h))}
@media(max-width:600px){.ds-scrollline{width:2px}}

/* Kicker-Unterstrich zeichnet sich links->rechts, sobald der Kopf reinscrollt. */
.ds-js .ds-reveal .ds-shead__bar{transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.16,1,.3,1) .15s}
.ds-reveal.ds-in .ds-shead__bar{transform:scaleX(1)}

/* Übergroße Ghost-Sektions-Nummer im Kopf (opt-in, .ds-ghostnum liefert die Kontur-Optik). */
.ds-shead__index{display:block;font-size:clamp(2.6rem,6vw,5rem);margin-bottom:.1em;opacity:.85}
.ds-shead:not(.ds-shead--left) .ds-shead__index{text-align:center}

/* Feine Carbon-/Mesh-Textur (sehr dezent) – als Modifier auf ein Band. */
.ds-block--carbon{background-image:
  linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),
  linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%);
  background-size:6px 6px}

/* Diagonale Schnittkante oben – wirkt nur, wenn die Sektion einen eigenen (Band-)Hintergrund hat. */
.ds-block--cut{clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%)}
.ds-block--cut-bottom{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 2.2vw))}

/* Tacho (Google-Bewertung): echte 270°-Skala 0–5 mit roter Nadel; Bogen füllt + Nadel dreht beim Reinscrollen. */
.ds-gauge{position:relative;display:inline-block;flex:none}
.ds-tacho{width:clamp(140px,17vw,172px);line-height:0}
.ds-tacho svg{display:block;width:100%;height:auto;transform:none}
.ds-tacho__tick{stroke:var(--ds-border-2);stroke-width:1.4}
.ds-tacho__tick--major{stroke:var(--ds-muted);stroke-width:2.4}
.ds-tacho__lbl{fill:var(--ds-faint);font-family:"Archivo",sans-serif;font-weight:700;font-size:9px;text-anchor:middle;font-variant-numeric:tabular-nums}
.ds-tacho__redline{fill:none;stroke:var(--ds-accent);stroke-width:7;opacity:.3}
.ds-gauge__track{fill:none;stroke:var(--ds-border);stroke-width:7;stroke-linecap:round}
.ds-gauge__arc{fill:none;stroke:var(--ds-accent);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1) .55s}
.ds-tacho__readout{fill:var(--ds-text);font-family:"Archivo",sans-serif;font-weight:900;font-size:30px;text-anchor:middle;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ds-tacho__cap{fill:var(--ds-muted);font-family:"Archivo",sans-serif;font-weight:700;font-size:8.5px;letter-spacing:.14em;text-anchor:middle;text-transform:uppercase}
.ds-tacho__hub{fill:var(--ds-surface);stroke:var(--ds-accent);stroke-width:2}
.ds-tacho__hub-dot{fill:var(--ds-accent)}
.ds-tacho__needle{fill:var(--ds-accent);transform-box:view-box;transform-origin:100px 100px;
  transform:rotate(var(--ds-needle,-135deg));filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.ds-js .ds-tacho__needle{transform:rotate(-135deg)}
/* Start-„Rev": Nadel sweept hoch auf 5, fällt zurück, pendelt sich auf den Wert ein (wie Zündung an). */
@keyframes ds-needle-rev{
  0%{transform:rotate(-135deg)}
  38%{transform:rotate(135deg)}
  60%{transform:rotate(-120deg)}
  76%{transform:rotate(-20deg)}
  88%{transform:rotate(-72deg)}
  100%{transform:rotate(var(--ds-needle,-135deg))}
}
.ds-js .ds-tacho--live .ds-tacho__needle{animation:ds-needle-rev 2.2s cubic-bezier(.4,.1,.3,1) both}

/* Dezentes Hintergrund-Motiv (Tacho-Bogen / Blueprint-Raster) für leere Sektions-BGs. */
.ds-block--motif{position:relative;overflow:hidden}
.ds-block--motif > .ds-wrap{position:relative;z-index:1}
.ds-bgmotif{position:absolute;z-index:0;pointer-events:none}
.ds-bgmotif--gauge{top:50%;right:-5%;transform:translateY(-50%);width:min(46vw,540px);opacity:.05}
.ds-bgmotif--gauge svg{display:block;width:100%;height:auto}
.ds-bgmotif--gauge path,.ds-bgmotif--gauge line{stroke:var(--ds-text);fill:none}
.ds-bgmotif--grid{inset:0;opacity:.6;
  background-image:linear-gradient(var(--ds-border) 1px,transparent 1px),linear-gradient(90deg,var(--ds-border) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 72%);mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}

@media(prefers-reduced-motion:reduce){
  .ds-reveal,.ds-js .ds-reveal{opacity:1;transform:none;transition:none}
  .ds-js .ds-reveal .ds-shead__bar{transform:none;transition:none}
  .ds-gauge__arc,.ds-tacho__needle{transition:none}
  .ds-js .ds-tacho--live .ds-tacho__needle{animation:none;transform:rotate(var(--ds-needle,-135deg))}
}