/* ============================================================
   DADCAR — Navigation
   Die Navigation liegt IM Bild, nicht darueber. Der Nutzer
   zeigt auf eine Stelle am Fahrzeug, die Stelle wird scharf,
   und beim Klick faehrt die Kamera genau dorthin.
   ============================================================ */

.dcn-scope{
  --dcn-ink:      #0c0d0e;
  --dcn-paper:    #f2f2f0;
  --dcn-muted:    #8c9092;
  --dcn-acc:      #e4551f;
  --dcn-line:     rgba(255,255,255,.12);

  --dcn-ease-out: cubic-bezier(.16,1,.3,1);
  --dcn-ease-ui:  cubic-bezier(.23,1,.32,1);
  --dcn-ease-cam: cubic-bezier(.22,.85,.16,1);
}

/* ============================================================
   1. Overlay
   ============================================================ */
.dcn{
  position:fixed;
  inset:0;
  z-index:9000;
  display:block;
  overflow:hidden;
  max-width:100vw;
  background:var(--dcn-ink);
  opacity:0;
  visibility:hidden;
  transition:opacity 300ms var(--dcn-ease-out), visibility 0ms linear 300ms;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  color:var(--dcn-paper);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:contain;
}
.dcn[hidden]{ display:none !important; }
.dcn.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity 260ms var(--dcn-ease-out), visibility 0ms linear 0ms;
}

/* ============================================================
   2. Buehne — beide Bildebenen liegen exakt deckungsgleich
   ============================================================ */
.dcn__stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  transform:scale(var(--dcn-stage-s,1)) translate3d(var(--dcn-par-x,0px),var(--dcn-par-y,0px),0);
  transform-origin:50% 50%;
  will-change:transform,filter;
  transition:
    transform 820ms var(--dcn-ease-cam),
    filter 620ms var(--dcn-ease-out),
    opacity 420ms var(--dcn-ease-out);
}
.dcn.is-open .dcn__stage{ --dcn-stage-s:var(--dcn-stage-open-s,1.045); }

.dcn__plate{
  position:absolute;
  inset:0;
  background-image:var(--dcn-photo);
  background-size:cover;
  background-position:var(--dcn-photo-pos,50% 50%);
  background-repeat:no-repeat;
  background-color:#111314;
}

/* Unscharfe, abgedunkelte Grundebene */
.dcn__plate--base{
  filter:blur(11px) brightness(.40) saturate(.72);
}

/* Scharfe Ebene — nur dort sichtbar, wo der Nutzer hinzeigt.
   Das ist eine echte Schaerfeverlagerung, kein Leuchtkreis. */
.dcn__plate--focus{
  filter:brightness(.96) saturate(1.04) contrast(1.03);
  -webkit-mask-image:radial-gradient(
      circle var(--dcn-focus-r,230px) at var(--dcn-fx,50%) var(--dcn-fy,50%),
      #000 0%, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%);
  mask-image:radial-gradient(
      circle var(--dcn-focus-r,230px) at var(--dcn-fx,50%) var(--dcn-fy,50%),
      #000 0%, #000 38%, rgba(0,0,0,.55) 66%, transparent 100%);
  opacity:0;
  transition:opacity 420ms var(--dcn-ease-out);
}
.dcn.is-open .dcn__plate--focus{ opacity:1; }

.dcn__vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(128% 96% at 50% 46%, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,.72) 100%);
}

.dcn__grain{
  position:absolute;
  inset:-50%;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.9'/></svg>");
  animation:dcnGrain 640ms steps(3) infinite;
}
@keyframes dcnGrain{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-1.5%,1%,0)}
  66%{transform:translate3d(1%,-1.5%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ============================================================
   3. Marker
   ============================================================ */
.dcn__spots{
  position:absolute;
  inset:0;
}

.dcn-spot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:0;height:0;
  padding:0;margin:0;border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity 420ms var(--dcn-ease-out), transform 420ms var(--dcn-ease-out);
}
.dcn.is-open .dcn-spot{ opacity:1; transform:translate3d(0,0,0); }
.dcn.is-open .dcn-spot:nth-of-type(1){transition-delay:180ms}
.dcn.is-open .dcn-spot:nth-of-type(2){transition-delay:250ms}
.dcn.is-open .dcn-spot:nth-of-type(3){transition-delay:320ms}
.dcn.is-open .dcn-spot:nth-of-type(4){transition-delay:390ms}
.dcn.is-open .dcn-spot:nth-of-type(5){transition-delay:460ms}
.dcn.is-open .dcn-spot:nth-of-type(6){transition-delay:530ms}

/* Der Fusspunkt: liegt auf der Oberflaeche, nicht davor. */
.dcn-spot__anchor{
  position:absolute;
  left:0;top:0;
  width:0;height:0;
  transform-style:preserve-3d;
}

.dcn-spot__shadow{
  position:absolute;
  left:0;top:0;
  width:88px;height:88px;
  margin:-44px 0 0 -44px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,0) 70%);
  transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg)) scale(1);
  filter:blur(4px);
  opacity:.9;
  pointer-events:none;
}

.dcn-spot__ring{
  position:absolute;
  left:0;top:0;
  width:52px;height:52px;
  margin:-26px 0 0 -26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 6px 18px rgba(0,0,0,.45);
  transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg));
  transition:border-color 220ms ease, width 260ms var(--dcn-ease-ui), height 260ms var(--dcn-ease-ui), margin 260ms var(--dcn-ease-ui);
  pointer-events:none;
}

/* Der Puls. Langsam, damit er nicht nervt, aber sichtbar genug,
   dass klar ist: hier kann man tippen. */
.dcn-spot__pulse{
  position:absolute;
  left:0;top:0;
  width:52px;height:52px;
  margin:-26px 0 0 -26px;
  border-radius:50%;
  border:1px solid var(--dcn-acc);
  transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg)) scale(.7);
  opacity:0;
  animation:dcnPulse 2600ms cubic-bezier(.25,.6,.3,1) infinite;
  animation-delay:var(--pulse-delay,0ms);
  pointer-events:none;
}
@keyframes dcnPulse{
  0%   {opacity:0;   transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg)) scale(.72)}
  14%  {opacity:.75}
  70%  {opacity:0;   transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg)) scale(2.1)}
  100% {opacity:0;   transform:perspective(560px) rotateZ(var(--yaw,0deg)) rotateX(var(--tilt,58deg)) scale(2.1)}
}

/* Steg vom Fusspunkt zum Punkt — dadurch steht der Marker AUF
   dem Blech statt davor zu schweben. */
.dcn-spot__stem{
  position:absolute;
  left:0;top:0;
  width:1px;
  height:var(--stem,26px);
  margin-left:-.5px;
  transform:translateY(calc(var(--stem,26px) * -1));
  background:linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.55));
  pointer-events:none;
}

.dcn-spot__dot{
  position:absolute;
  left:0;top:0;
  width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;
  transform:translateY(calc(var(--stem,26px) * -1));
  border-radius:50%;
  background:var(--dcn-paper);
  box-shadow:0 0 0 4px rgba(12,13,14,.55), 0 8px 22px rgba(0,0,0,.6);
  transition:transform 260ms var(--dcn-ease-ui), background 200ms ease, box-shadow 260ms ease;
  pointer-events:none;
}
.dcn-spot__dot i{
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--dcn-acc);
  opacity:0;
  transition:opacity 200ms ease;
}

/* Leitlinie zur Beschriftung */
.dcn-spot__lead{
  position:absolute;
  left:0;top:0;
  height:1px;
  width:var(--len,120px);
  transform:translateY(calc(var(--stem,26px) * -1)) rotate(var(--ang,-40deg));
  transform-origin:0 50%;
  background:linear-gradient(to right, rgba(255,255,255,.7), rgba(255,255,255,.28));
  clip-path:inset(0 100% 0 0);
  transition:clip-path 420ms var(--dcn-ease-out) var(--lead-delay,0ms), background 220ms ease;
  pointer-events:none;
}
.dcn.is-open .dcn-spot__lead{ clip-path:inset(0 0 0 0); }

/* Beschriftung */
.dcn-spot__card{
  position:absolute;
  left:0;top:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0 16px;
  width:max-content;
  min-width:212px;
  padding:14px 18px 14px 16px;
  border:1px solid var(--dcn-line);
  border-left:2px solid rgba(255,255,255,.22);
  background:rgba(16,18,19,.62);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  transform:translate3d(var(--dx,0px), var(--dy,0px), 0) translate3d(var(--anchor-x,0), -50%, 0);
  transition:
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 260ms ease,
    transform 260ms var(--dcn-ease-ui);
  pointer-events:none;
}
.dcn-spot__num{
  grid-row:1 / span 2;
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--dcn-acc);
  font-variant-numeric:tabular-nums;
}
.dcn-spot__title{
  font-size:17px;
  font-weight:800;
  letter-spacing:.01em;
  font-variation-settings:'wdth' 86;
  line-height:1.1;
  text-transform:uppercase;
  color:#e6e8e9;
  transition:color 200ms ease;
}
.dcn-spot__sub{
  grid-column:2;
  margin-top:3px;
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--dcn-muted);
  line-height:1.3;
}
.dcn-spot__go{
  grid-row:1 / span 2;
  width:15px;height:15px;
  color:#71767a;
  transition:color 200ms ease, transform 260ms var(--dcn-ease-ui);
}

/* Zustand: aktiv (Hover, Fokus oder Tastatur) */
.dcn-spot.is-hot .dcn-spot__ring{
  width:60px;height:60px;margin:-30px 0 0 -30px;
  border-color:var(--dcn-acc);
}
.dcn-spot.is-hot .dcn-spot__pulse{ animation-play-state:paused; opacity:0; }
.dcn-spot.is-hot .dcn-spot__dot{
  transform:translateY(calc(var(--stem,26px) * -1)) scale(1.18);
  background:var(--dcn-paper);
  box-shadow:0 0 0 5px rgba(228,85,31,.22), 0 10px 26px rgba(0,0,0,.65);
}
.dcn-spot.is-hot .dcn-spot__dot i{ opacity:1; }
.dcn-spot.is-hot .dcn-spot__lead{
  background:linear-gradient(to right, var(--dcn-acc), rgba(228,85,31,.35));
}
.dcn-spot.is-hot .dcn-spot__card{
  background:rgba(22,25,26,.78);
  border-color:rgba(255,255,255,.2);
  border-left-color:var(--dcn-acc);
  box-shadow:0 24px 60px rgba(0,0,0,.62);
  transform:translate3d(var(--dx,0px), var(--dy,0px), 0) translate3d(var(--anchor-x,0), -50%, 0) translate3d(var(--push-x,0px),0,0);
}
.dcn-spot.is-hot .dcn-spot__title{ color:#fff; }
.dcn-spot.is-hot .dcn-spot__go{ color:var(--dcn-acc); transform:translateX(3px); }

.dcn-spot:active .dcn-spot__card{
  transform:translate3d(var(--dx,0px), var(--dy,0px), 0) translate3d(var(--anchor-x,0), -50%, 0) scale(.985);
}
.dcn-spot:focus-visible{ outline:none; }
.dcn-spot:focus-visible .dcn-spot__card{
  outline:2px solid var(--dcn-acc);
  outline-offset:3px;
}

/* Wenn ein Marker aktiv ist, treten die anderen zurueck. */
.dcn__spots.has-hot .dcn-spot:not(.is-hot) .dcn-spot__card{ opacity:.34; }
.dcn__spots.has-hot .dcn-spot:not(.is-hot) .dcn-spot__ring{ border-color:rgba(255,255,255,.34); }
.dcn-spot__card{ transition-property:background,border-color,box-shadow,transform,opacity; }

/* ============================================================
   4. Kopf und Fuss
   ============================================================ */
.dcn__bar{
  position:absolute;
  top:0;left:0;right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px clamp(18px,3.4vw,44px);
  z-index:3;
}
.dcn__logo{ display:flex; flex-direction:column; gap:3px; }
.dcn__logo-row{ display:flex; align-items:center; gap:9px; }
.dcn__slashes{ display:flex; gap:3px; }
.dcn__slashes i{ display:block; width:6px; height:19px; background:var(--dcn-paper); transform:skewX(-18deg); }
.dcn__slashes i:first-child{ background:var(--dcn-acc); }
.dcn__word{ font-size:26px; font-weight:800; letter-spacing:-.02em; font-variation-settings:'wdth' 88; line-height:1; }
.dcn__word span{ font-weight:400; color:#c9cdd0; }
.dcn__logo-sub{
  display:flex; align-items:center; gap:7px;
  font-size:9.5px; letter-spacing:.34em; color:var(--dcn-muted); padding-left:2px;
}
.dcn__logo-sub::before,.dcn__logo-sub::after{ content:""; width:12px; height:1px; background:var(--dcn-acc); opacity:.8; }

.dcn__close{
  display:flex; align-items:center; gap:14px;
  padding:11px 13px 11px 26px;
  border:1px solid var(--dcn-line);
  border-radius:999px;
  background:rgba(18,20,21,.55);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  color:var(--dcn-paper);
  font-family:inherit; font-size:12.5px; letter-spacing:.18em;
  cursor:pointer;
  transition:transform 160ms var(--dcn-ease-ui), border-color 200ms ease, background 200ms ease;
}
.dcn__close svg{ width:19px; height:19px; }
.dcn__close:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .dcn__close:hover{ border-color:rgba(255,255,255,.26); background:rgba(28,31,33,.7); }
}
.dcn__close:focus-visible{ outline:2px solid var(--dcn-acc); outline-offset:3px; }

.dcn__hint{
  position:absolute;
  left:0; right:0;
  bottom:clamp(26px,4vh,46px);
  z-index:3;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.3em;
  color:#7e8487;
  padding:0 24px;
  pointer-events:none;
}

/* ============================================================
   5. Mobile Liste
   ============================================================ */
.dcn__list{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--dcn-line);
  border-top:1px solid var(--dcn-line);
}
.dcn__list-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  padding:18px 16px 20px;
  border:0;
  background:rgba(13,15,16,.82);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  color:var(--dcn-paper);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background 200ms ease, transform 160ms var(--dcn-ease-ui);
}
.dcn__list-item:active{ transform:scale(.985); background:rgba(24,27,29,.9); }
.dcn__list-num{ font-size:9.5px; letter-spacing:.2em; color:var(--dcn-acc); font-variant-numeric:tabular-nums; }
.dcn__list-title{ font-size:16px; font-weight:800; letter-spacing:.01em; font-variation-settings:'wdth' 86; text-transform:uppercase; }
.dcn__list-sub{ font-size:11.5px; color:var(--dcn-muted); }
.dcn__list-item:last-child:nth-child(odd){ grid-column: span 2; }

/* ============================================================
   6. Die Fahrt zum Ziel
   Beim Klick faehrt die Kamera in genau den Punkt hinein, den
   der Nutzer gewaehlt hat. Deshalb der transform-origin.
   ============================================================ */
.dcn.is-travelling .dcn__stage{
  transform-origin:var(--dcn-travel-x,50%) var(--dcn-travel-y,50%);
  transform:scale(2.45);
  filter:blur(15px) brightness(1.12);
  opacity:0;
  transition:
    transform 700ms cubic-bezier(.5,0,.72,.4),
    filter 700ms ease-in,
    opacity 560ms ease-in 160ms;
}
.dcn.is-travelling .dcn-spot:not(.is-going){ opacity:0; transition:opacity 200ms ease; }
.dcn.is-travelling .dcn-spot.is-going .dcn-spot__card{
  transform:translate3d(var(--dx,0px), var(--dy,0px), 0) translate3d(var(--anchor-x,0), -50%, 0) scale(1.05);
  opacity:0;
  transition:transform 620ms cubic-bezier(.5,0,.72,.4), opacity 420ms ease-in 180ms;
}
.dcn.is-travelling .dcn__bar,
.dcn.is-travelling .dcn__hint,
.dcn.is-travelling .dcn__list{ opacity:0; transition:opacity 220ms ease; }

/* ============================================================
   7. Ausloeser-Button (Hero)
   ============================================================ */
.dcn-trigger{
  display:flex; align-items:center; gap:14px;
  padding:9px 9px 9px 26px;
  border:1px solid var(--dcn-line);
  border-radius:999px;
  background:rgba(18,20,21,.58);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  color:var(--dcn-paper);
  font-family:inherit; font-size:13px; letter-spacing:.18em;
  cursor:pointer;
  transition:transform 160ms var(--dcn-ease-ui), border-color 200ms ease, background 200ms ease;
}
.dcn-trigger__ico{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--dcn-paper);
  color:#15181a;
}
.dcn-trigger__ico svg{ width:20px; height:20px; }
.dcn-trigger:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .dcn-trigger:hover{ border-color:rgba(255,255,255,.26); background:rgba(28,31,33,.72); }
}
.dcn-trigger:focus-visible{ outline:2px solid var(--dcn-acc); outline-offset:3px; }


/* ============================================================
   8. Breakpoints
   ============================================================ */
@media (max-width:1080px){
  .dcn-spot__card{ min-width:184px; padding:12px 15px 12px 14px; }
  .dcn-spot__title{ font-size:15px; }
}

@media (max-width:860px){
  .dcn__list{ display:grid; }
  .dcn__hint{ bottom:auto; top:calc(100% - 100%); display:none; }
  .dcn.is-open .dcn__stage{ --dcn-stage-s:1; }
  .dcn-spot__card,
  .dcn-spot__lead{ display:none; }
  .dcn-spot{ display:none; }
  .dcn__stage{ bottom:0; }
  .dcn__vignette{
    background:
      radial-gradient(120% 80% at 50% 38%, rgba(0,0,0,0) 36%, rgba(0,0,0,.6) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.86) 100%);
  }
  .dcn__word{ font-size:22px; }
  .dcn__close{ padding:9px 11px 9px 20px; font-size:11px; }
}

@media (max-width:420px){
  .dcn__list{ grid-template-columns:1fr; }
  .dcn__list-item{ padding:14px 16px 15px; flex-direction:row; align-items:baseline; gap:12px; }
  .dcn__list-item:last-child:nth-child(odd){ grid-column: auto; }
  .dcn__list-sub{ display:none; }
}

/* ============================================================
   10. Reduzierte Bewegung
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .dcn__stage{ transition:opacity 200ms ease; transform:none; }
  .dcn.is-open .dcn__stage{ --dcn-stage-s:1; }
  .dcn__grain{ animation:none; }
  .dcn-spot__pulse{ animation:none; opacity:.35; }
  .dcn-spot{ transform:none; transition:opacity 220ms ease; }
  .dcn-spot__lead{ transition:none; clip-path:inset(0 0 0 0); }
  .dcn.is-travelling .dcn__stage{
    transform:none; filter:none; opacity:0;
    transition:opacity 200ms ease;
  }
}

/* ============================================================
   11. Trefferflaechen
   ============================================================ */
.dcn-spot__hit{
  position:absolute;
  left:0; top:0;
  width:80px; height:80px;
  margin:-40px 0 0 -40px;
  transform:translateY(calc(var(--stem,26px) * -1));
  border-radius:50%;
  pointer-events:auto;
}
@media (hover:hover) and (pointer:fine){
  .dcn-spot__card{ pointer-events:auto; }
}
@media (max-width:860px){
  .dcn-spot__hit{ pointer-events:none; }
}