/* =====================================================================
   SPEEDAHOLICS SHOWROOM – Oberfläche
   Alles unter .spd-app bzw. body.spd-body gekapselt.
   ===================================================================== */
.spd-app{
  --hell:#F4F5F7; --tinte:#12141A; --grau:#6A7080;
  --linie:rgba(18,20,26,.13);
  --rot:#E1001A;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;
}
body.spd-body{
  margin:0;padding:0;height:100%;overflow:hidden;background:#EDEEF1;
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#12141A;-webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
html.spd-html{height:100%;background:#EDEEF1}

.spd-app *,.spd-app *::before,.spd-app *::after{box-sizing:border-box}
.spd-app h1,.spd-app h2,.spd-app p,.spd-app dl,.spd-app dd,.spd-app dt,.spd-app ul,.spd-app li{margin:0;padding:0}
.spd-app ul{list-style:none}
.spd-app a,.spd-app a:link,.spd-app a:visited,.spd-app a:hover,.spd-app a:active{
  color:inherit!important;text-decoration:none!important;box-shadow:none!important;
}
.spd-app button{font:inherit;cursor:pointer}
.spd-app :focus-visible{outline:2px solid var(--rot);outline-offset:3px;border-radius:4px}

#spdCanvas{position:fixed;inset:0;display:block;z-index:0;touch-action:none;cursor:grab}
#spdCanvas.dragging{cursor:grabbing}
.spd-dim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(6,7,10,.80),rgba(3,4,7,.97));
  opacity:0;transition:opacity 1s ease}
body.spd-dark .spd-dim{opacity:1}

.spd-hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.spd-hud > *{pointer-events:auto}

.spd-brand{position:absolute;top:22px;left:clamp(16px,2.6vw,38px);display:flex;align-items:center;gap:11px}
.spd-brand img{height:36px;width:auto;border-radius:50%}
.spd-brand b{font-weight:800;font-size:.9rem;letter-spacing:-.01em;line-height:1.12}
.spd-brand small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:var(--grau);font-weight:400}

.spd-tr{position:absolute;top:22px;right:clamp(16px,2.6vw,38px);display:flex;align-items:center;gap:10px}
.spd-cta{display:inline-flex;align-items:center;gap:.5em;padding:11px 20px;border-radius:99px;
  border:1px solid transparent;font-size:.84rem;font-weight:700;
  background:var(--tinte);color:#fff!important;-webkit-text-fill-color:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.spd-cta svg{width:15px;height:15px;stroke:#fff;fill:none}
.spd-cta:hover{transform:scale(1.05);box-shadow:0 10px 34px rgba(18,20,26,.32)}
.spd-cta.ghost{background:rgba(255,255,255,.75);color:var(--tinte)!important;-webkit-text-fill-color:var(--tinte);
  border-color:var(--linie);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.spd-cta.ghost svg{stroke:var(--tinte)}

.spd-rail{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;padding:7px;border-radius:99px;
  background:rgba(255,255,255,.76);border:1px solid var(--linie);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(18,20,26,.14);
  max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
.spd-rail::-webkit-scrollbar{display:none}
.spd-rail button{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 15px;border:0;
  border-radius:99px;background:transparent;color:var(--grau);font-size:.78rem;font-weight:600;
  white-space:nowrap;transition:background .25s ease,color .25s ease}
.spd-rail button i{font-family:var(--mono);font-style:normal;font-size:.6rem;opacity:.65}
.spd-rail button:hover{color:var(--tinte);background:rgba(18,20,26,.06)}
.spd-rail button.on{background:var(--tinte);color:#fff}

.spd-arrows{position:absolute;right:clamp(16px,2.6vw,38px);bottom:20px;display:flex;gap:6px}
.spd-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linie);
  background:rgba(255,255,255,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;color:var(--tinte);transition:transform .2s ease,background .2s ease}
.spd-arrows button:hover{transform:scale(1.08);background:#fff}
.spd-arrows svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.spd-progress{position:absolute;left:0;right:0;top:0;height:2px}
.spd-progress i{display:block;height:100%;width:0;background:var(--rot);transition:width .18s linear}

.spd-panels{position:absolute;left:clamp(16px,2.6vw,38px);top:50%;transform:translateY(-50%);width:min(420px,42vw)}
.spd-panel{position:absolute;left:0;top:50%;width:100%;transform:translateY(-46%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),visibility .5s;
  padding:clamp(22px,2.3vw,34px);border-radius:20px;
  background:rgba(255,255,255,.80);border:1px solid var(--linie);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 26px 70px rgba(18,20,26,.16)}
.spd-panel.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.spd-panel .eyebrow{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;color:var(--rot);margin-bottom:.9em}
.spd-panel h1{font-weight:800;font-size:clamp(2rem,3.2vw,3rem);line-height:.92;letter-spacing:-.03em}
.spd-panel h2{font-weight:800;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:.98;letter-spacing:-.025em}
.spd-panel p{margin-top:.85em;font-size:.94rem;line-height:1.6;color:#3C4250}
.spd-panel p.dim{color:var(--grau);font-size:.88rem}
.spd-panel .acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.4em}
.spd-panel dl{display:grid;gap:.9em;margin-top:1.1em;font-size:.9rem}
.spd-panel dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--grau);margin-bottom:.25em}
.spd-panel dd{font-weight:600;line-height:1.45}
.spd-panel .rowlinks{display:flex;flex-wrap:wrap;gap:1.1em;margin-top:1em;padding-top:.9em;border-top:1px solid var(--linie);font-size:.85rem}
.spd-panel .rowlinks a{border-bottom:1px solid var(--linie)}
.spd-panel .facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.1em}
.spd-panel .facts li{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:#4A5160;border:1px solid var(--linie);border-radius:99px;padding:6px 11px}
/* Bildslot: Format bleibt fix, egal welches Bild eingesetzt wird */
.spd-panel .shot{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;
  border-radius:12px;margin-bottom:1.1em;display:block;background:#E7E9ED}
.spd-panel .shot.hoch{aspect-ratio:4/5}

body.spd-dark .spd-panel{background:rgba(12,14,20,.72);border-color:rgba(255,255,255,.12);
  box-shadow:0 26px 70px rgba(0,0,0,.6);color:#F2F4F8}
body.spd-dark .spd-panel p{color:#C3C9D6}
body.spd-dark .spd-panel p.dim{color:#8B93A3}
body.spd-dark .spd-panel .eyebrow{color:#FF4A5C}
body.spd-dark .spd-rail,body.spd-dark .spd-arrows button,body.spd-dark .spd-cta.ghost{
  background:rgba(14,16,22,.7);border-color:rgba(255,255,255,.14);color:#F2F4F8}
body.spd-dark .spd-rail button{color:#9AA2B2}
body.spd-dark .spd-rail button.on{background:#F2F4F8;color:#0D0F14}
body.spd-dark .spd-arrows button{color:#F2F4F8}
body.spd-dark .spd-cta.ghost{color:#F2F4F8!important;-webkit-text-fill-color:#F2F4F8}
body.spd-dark .spd-cta.ghost svg{stroke:#F2F4F8}
body.spd-dark .spd-brand{color:#F2F4F8}
body.spd-dark .spd-brand small,body.spd-dark .spd-hint{color:#8B93A3}

.spd-hint{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--grau);
  transition:opacity .6s ease;white-space:nowrap;display:flex;align-items:center;gap:10px}
.spd-hint::after{content:'';width:1px;height:16px;background:linear-gradient(180deg,transparent,var(--rot));animation:spdDrop 1.9s infinite}
@keyframes spdDrop{0%{opacity:0;transform:translateY(-6px)}45%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
.spd-hint.off{opacity:0}

.spd-boot{position:fixed;inset:0;z-index:20;background:var(--hell);display:grid;place-items:center;
  gap:14px;align-content:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  color:var(--grau);transition:opacity .9s ease,visibility .9s}
.spd-boot .bar{width:170px;height:2px;background:rgba(18,20,26,.12);overflow:hidden;border-radius:2px}
.spd-boot .bar i{display:block;height:100%;width:40%;background:var(--rot);animation:spdRun 1.1s infinite}
@keyframes spdRun{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.spd-boot.off{opacity:0;visibility:hidden}

/* ---- Rückfall ohne WebGL / kleine Geräte ---- */
body.spd-flat{overflow:auto;background:#F4F5F7}
body.spd-flat #spdCanvas,body.spd-flat .spd-dim,body.spd-flat .spd-arrows,
body.spd-flat .spd-hint,body.spd-flat .spd-progress{display:none}
body.spd-flat .spd-hud{position:static;inset:auto}
body.spd-flat .spd-panels{position:static;transform:none;width:auto;max-width:760px;margin:96px auto 120px;
  padding:0 20px;display:flex;flex-direction:column;gap:22px}
body.spd-flat .spd-panel{position:static;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto}
body.spd-flat .spd-brand,body.spd-flat .spd-tr{position:fixed;top:12px;z-index:9}
body.spd-flat .spd-tr .spd-cta{padding:9px 15px;font-size:.78rem}
body.spd-flat .spd-rail{position:fixed;bottom:0;left:0;right:0;transform:none;max-width:none;
  border-radius:0;justify-content:flex-start;padding:8px 10px}

@media (max-width:900px){
  .spd-panels{left:0;right:0;width:auto;top:auto;bottom:86px;transform:none;padding:0 12px}
  .spd-panel{position:static;transform:translateY(14px);display:none}
  .spd-panel.on{display:block;transform:none}
  .spd-arrows{bottom:auto;top:74px}
  .spd-hint{display:none}
  .spd-brand b{font-size:.8rem}
}