/* 11-spots — „Das ist drin“ als Bildkarte mit Blips und Bento-Boxen (inc/service-spots.php, 11-spots.js).
   Drei Spalten (Boxen | Rad | Boxen). Über allem ein SVG, in das 11-spots.js die Verbindungslinien aus gemessenen
   Positionen zeichnet. Die Boxen sitzen ab 1100px absolut in ihrer Spalte, auf Höhe ihres Punktes (11-spots.js löst
   Überlappungen auf); zugeklappt zeigen sie nur den Titel, geöffnet Text, Diagramm und Aussage. Darunter stapelt alles —
   im 3D-Betrieb (.has-3d) zeigt sich mobil nur die offene Box, als Sheet in der Bühne (unten). */

.rad-pspots{overflow:clip;--rad-spots-w:min(1680px,calc(100% - 2*28px))}   /* 17.09.2026: weniger Einzug, mehr Platz für Rad und Boxen */
.rad-pspots__wrap{width:var(--rad-spots-w);margin-inline:auto}
.rad-pspots__head{max-width:34em}
.rad-pspots__head p{margin-top:16px;line-height:1.7}

.rad-spots{width:var(--rad-spots-w);margin-inline:auto;margin-top:clamp(36px,4vw,64px)}
.rad-spots__layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,54%) minmax(0,1fr);
  gap:clamp(16px,2vw,36px);align-items:stretch}

/* --- Bühne: freigestelltes Rad, darunter ein weicher Lichtteppich als eigener Layer --------------------------- */
.rad-spots__stage{position:relative;align-self:start;margin-inline:-22%}   /* oben verankert: wächst das Layout beim Aufklappen, bleibt das Rad stehen; reicht weit unter die Karten (Karten liegen darüber, z 4) */
/* Schein: beide Ellipsen enden INNERHALB des Elements — vorher ragte die Innenellipse (60 % Radius) über den Rand und
   zeichnete dort eine Kante. */
.rad-spots__glow{position:absolute;inset:-12% -8% -34%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 15% at 50% 68%,color-mix(in srgb,var(--vn-color-accent) 26%,transparent) 0%,transparent 100%),
    radial-gradient(46% 40% at 50% 44%,color-mix(in srgb,var(--vn-color-surface-raised-3) 30%,transparent) 0%,transparent 100%)}
/* Zoom (17.09.2026): Beim Öffnen einer Box fährt der Frame auf den Punkt (translate + scale, 11-spots.js), der Punkt selbst bleibt
   an Ort und Stelle. Der Clip schneidet am Bühnenrand ab und blendet die Kanten weich aus (--rad-spots-fade, per @property animierbar). */
@property --rad-spots-fade{syntax:'<percentage>';inherits:false;initial-value:0%}
.rad-spots__clip{position:relative;overflow:hidden;border-radius:clamp(16px,2vw,28px);--rad-spots-fade:0%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rad-spots-fade),#000 calc(100% - var(--rad-spots-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--rad-spots-fade),#000 calc(100% - var(--rad-spots-fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--rad-spots-fade),#000 calc(100% - var(--rad-spots-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 var(--rad-spots-fade),#000 calc(100% - var(--rad-spots-fade)),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;transition:--rad-spots-fade 1000ms var(--vn-ease-out)}
.rad-spots__layout.is-zoomed .rad-spots__clip{--rad-spots-fade:10%}
.rad-spots__frame{position:relative;aspect-ratio:1600/979;transform-origin:0 0;transition:transform 1000ms var(--vn-ease-out)}   /* Höhe unabhängig vom Foto (das fällt im 3D-Betrieb weg) */
/* 3D: höher, damit das Rad oben und unten Luft hat und die Reifen nicht im Rand auslaufen. Deckel (17.09.2026, „Karten und
   Rad immer sichtbar“): nie höher als der Viewport unter der Leiste — dann wird die Bühne breiter als 1600:1100, die Kamera
   passt sich an (11-spots-3d.mjs) und die Karten haben in der Bühnenhöhe Platz (11-spots.js rückt sie von unten zusammen). */
.rad-spots__stage.is-3d .rad-spots__frame{aspect-ratio:1600/1100;width:100%;max-height:max(560px,calc(100svh - var(--rad-header-h-scrolled) - 56px))}   /* width explizit: sonst überträgt sich max-height auf die Breite und der Frame schrumpft nach links */
/* 3D (17.09.2026): Die Leinwand liegt über dem Foto und übernimmt, sobald das Modell geladen ist (.is-3d). Die Kamera fährt
   dann selbst — Frame-Zoom und Kantenmaske bleiben aus. Punkte hinter der Kamera werden ausgeblendet. */
/* Weiche Ränder (17.09.2026, „viel breiter“): S-förmiger Verlauf, dessen Breite mitfährt — in der Gesamtansicht schmal
   (das Rad bleibt bis zu den Reifen voll sichtbar, nur Lichtkegel und Dunst laufen aus), in der Nahaufnahme breit (34 %),
   damit nirgends eine Kante steht. @property macht die Breite animierbar, der Übergang läuft mit der Kamerafahrt. */
@property --rad-spots-fx{syntax:'<percentage>';inherits:false;initial-value:12%}
@property --rad-spots-fy{syntax:'<percentage>';inherits:false;initial-value:12%}
.rad-spots__canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;-webkit-user-drag:none;user-select:none;
  --rad-spots-fx:12%;--rad-spots-fy:12%;
  --rad-spots-w-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.05) calc(var(--rad-spots-fx)*.2),rgba(0,0,0,.2) calc(var(--rad-spots-fx)*.42),rgba(0,0,0,.5) calc(var(--rad-spots-fx)*.64),rgba(0,0,0,.82) calc(var(--rad-spots-fx)*.84),#000 var(--rad-spots-fx),#000 calc(100% - var(--rad-spots-fx)),rgba(0,0,0,.82) calc(100% - var(--rad-spots-fx)*.84),rgba(0,0,0,.5) calc(100% - var(--rad-spots-fx)*.64),rgba(0,0,0,.2) calc(100% - var(--rad-spots-fx)*.42),rgba(0,0,0,.05) calc(100% - var(--rad-spots-fx)*.2),transparent 100%);
  --rad-spots-h-mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05) calc(var(--rad-spots-fy)*.2),rgba(0,0,0,.2) calc(var(--rad-spots-fy)*.42),rgba(0,0,0,.5) calc(var(--rad-spots-fy)*.64),rgba(0,0,0,.82) calc(var(--rad-spots-fy)*.84),#000 var(--rad-spots-fy),#000 calc(100% - var(--rad-spots-fy)),rgba(0,0,0,.82) calc(100% - var(--rad-spots-fy)*.84),rgba(0,0,0,.5) calc(100% - var(--rad-spots-fy)*.64),rgba(0,0,0,.2) calc(100% - var(--rad-spots-fy)*.42),rgba(0,0,0,.05) calc(100% - var(--rad-spots-fy)*.2),transparent 100%);
  -webkit-mask-image:var(--rad-spots-w-mask),var(--rad-spots-h-mask);mask-image:var(--rad-spots-w-mask),var(--rad-spots-h-mask);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:opacity 900ms var(--vn-ease-out),--rad-spots-fx 1000ms var(--vn-ease-out),--rad-spots-fy 1000ms var(--vn-ease-out)}
.rad-spots__layout.is-zoomed .rad-spots__canvas{--rad-spots-fx:36%;--rad-spots-fy:32%}
.rad-spots__stage.is-3d .rad-spots__canvas{opacity:1}
.rad-spots__stage.is-3d .rad-spots__img{display:none}
.rad-spots__stage.is-3d .rad-spots__frame{transform:none!important}
.rad-spots__stage.is-3d .rad-spots__clip{--rad-spots-fade:0%!important;overflow:visible;border-radius:0;-webkit-mask-image:none;mask-image:none}
.rad-spots__blip.is-hinten{visibility:hidden}
.rad-spots__img{position:relative;z-index:1;display:block;width:100%;height:auto}
/* Während des Zooms treten die anderen Punkte und Linien zurück (filter statt opacity: opacity hält die Einblend-Animation fest) */
.rad-spots__blip{transition:filter var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__layout.is-zoomed .rad-spots__blip:not(.is-open){filter:opacity(.3)}
.rad-spots__layout.is-zoomed .rad-spots__lines path:not(.is-open){opacity:0}

/* --- Blips ----------------------------------------------------------------------------------------------------- */
.rad-spots__blip{position:absolute;z-index:3;left:var(--x);top:var(--y);width:36px;height:36px;margin:-18px 0 0 -18px;
  padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.rad-spots__blip::before,.rad-spots__blip::after{content:"";position:absolute;border-radius:50%;left:50%;top:50%}
.rad-spots__blip::before{width:12px;height:12px;transform:translate(-50%,-50%);background:var(--vn-color-accent-on-dark);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent),0 0 16px color-mix(in srgb,var(--vn-color-accent-on-dark) 70%,transparent);
  transition:transform var(--vn-d-medium) var(--vn-ease-out),box-shadow var(--vn-d-medium) var(--vn-ease-out)}
.rad-spots__blip::after{width:36px;height:36px;transform:translate(-50%,-50%) scale(.9);opacity:0;
  border:1px solid color-mix(in srgb,var(--vn-color-accent-on-dark) 55%,transparent);
  transition:opacity var(--vn-d-medium) var(--vn-ease-out),transform var(--vn-d-medium) var(--vn-ease-out)}
.rad-spots__blip:focus-visible::before,.rad-spots__blip.is-aktiv::before,.rad-spots__blip.is-open::before{
  transform:translate(-50%,-50%) scale(1.45);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent),0 0 26px color-mix(in srgb,var(--vn-color-accent-on-dark) 95%,transparent)}
@media(hover:hover){.rad-spots__blip:hover::before{
  transform:translate(-50%,-50%) scale(1.45);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent),0 0 26px color-mix(in srgb,var(--vn-color-accent-on-dark) 95%,transparent)}}
.rad-spots__blip:focus-visible::after,.rad-spots__blip.is-aktiv::after,.rad-spots__blip.is-open::after{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
@media(hover:hover){.rad-spots__blip:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
.rad-spots__blip:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:6px;border-radius:50%}

html.rad-js .rad-spots__stage .rad-spots__blip{opacity:0}
html.rad-js .rad-spots__stage.is-inview .rad-spots__blip{animation:rad-spot-in var(--vn-d-slow) var(--vn-ease-out) var(--d) both}
/* Aufleuchten (Kundenwunsch 17.09.2026): jeder Punkt flammt beim ersten Erscheinen hell auf — der Kern wird groß und fast weiß mit
   weitem Schein und setzt sich dann auf sein Maß, der Ring läuft nach außen aus. Staffel über --d, alle innerhalb ~0,6 s. */
html.rad-js .rad-spots__stage.is-inview .rad-spots__blip::before{animation:rad-spot-flash 1400ms var(--vn-ease-out) var(--d) both}
html.rad-js .rad-spots__stage.is-inview .rad-spots__blip::after{animation:rad-spot-ping 1500ms var(--vn-ease-out) var(--d) 1}
/* 3D-Intro: solange die Kamera ums Rad fährt, bleiben die Punkte verborgen; danach setzen sie sich in schneller Folge (--d aus
   11-spots-3d.mjs). Auch Kern und Ring pausieren — sonst liefe ihr Aufleuchten unsichtbar während der Fahrt ab und wäre vorbei,
   wenn die Punkte erscheinen. */
html.rad-js .rad-spots__stage.is-intro .rad-spots__blip,html.rad-js .rad-spots__stage.is-intro .rad-spots__blip::before,
html.rad-js .rad-spots__stage.is-intro .rad-spots__blip::after{animation:none}
html.rad-js .rad-spots__stage.is-intro .rad-spots__blip{opacity:0}
@keyframes rad-spot-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes rad-spot-flash{
  0%{transform:translate(-50%,-50%) scale(.3);background:#FFF7E3;box-shadow:0 0 0 0 color-mix(in srgb,var(--vn-color-accent-on-dark) 60%,transparent),0 0 0 0 color-mix(in srgb,var(--vn-color-accent-on-dark) 90%,transparent)}
  28%{transform:translate(-50%,-50%) scale(2.2);background:#FFF3D4;box-shadow:0 0 0 7px color-mix(in srgb,var(--vn-color-accent-on-dark) 42%,transparent),0 0 48px 12px color-mix(in srgb,var(--vn-color-accent-on-dark) 95%,transparent)}
  100%{transform:translate(-50%,-50%);background:var(--vn-color-accent-on-dark);box-shadow:0 0 0 4px color-mix(in srgb,var(--vn-color-surface-darker) 60%,transparent),0 0 16px color-mix(in srgb,var(--vn-color-accent-on-dark) 70%,transparent)}
}
@keyframes rad-spot-ping{0%{opacity:.95;transform:translate(-50%,-50%) scale(.3)}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}

/* --- Verbindungslinien ------------------------------------------------------------------------------------------ */
.rad-spots__lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.rad-spots__lines path{fill:none;stroke:color-mix(in srgb,var(--vn-color-accent-on-dark) 62%,transparent);stroke-width:1.4;stroke-linecap:round;
  transition:stroke var(--vn-d-medium) var(--vn-ease-out),stroke-width var(--vn-d-medium) var(--vn-ease-out),opacity var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__lines path.is-aktiv,.rad-spots__lines path.is-open{stroke:var(--vn-color-accent-on-dark);stroke-width:1.9}
/* 17.09.2026: Linien nur zur offenen Box (Zeichnen beim Öffnen); beim Hover über Box oder Punkt zeigt sie sich leise */
html.rad-js .rad-spots__lines path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
html.rad-js .rad-spots__lines path.is-open{opacity:1;animation:rad-spot-draw 900ms var(--vn-ease-out) both}
@keyframes rad-spot-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* --- Spalten und Boxen ---------------------------------------------------------------------------------------- */
.rad-spots__col{position:relative;z-index:4;min-height:100%}   /* über Schein und Leinwand der Bühne */
/* Karten beim ersten Erscheinen (17.09.2026): gleiten gestaffelt von ihrer Seite herein, während die Kamera ums Rad fährt */
.rad-spots__slot{position:absolute;left:0;right:0;top:0;--rad-spots-von:-40px}
.rad-spots__col--rechts .rad-spots__slot{--rad-spots-von:40px}
html.rad-js .rad-spots__slot{opacity:0}
html.rad-js .rad-spots__layout.is-inview .rad-spots__slot{animation:rad-spot-slot-in 850ms var(--vn-ease-out) calc(420ms + var(--i,0)*120ms) both}
@keyframes rad-spot-slot-in{from{opacity:0;transform:translateX(var(--rad-spots-von))}to{opacity:1;transform:none}}
.rad-spots__layout.is-ready .rad-spots__slot{transition:top var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__box{container-type:inline-size;position:relative;border:0;border-radius:var(--vn-radius-lg);
  background:linear-gradient(158deg,var(--rad-card-top) 0%,var(--rad-card-bottom) 78%);box-shadow:var(--rad-card-shadow);
  transition:transform var(--vn-d-medium) var(--vn-ease-out),box-shadow var(--vn-d-medium) var(--vn-ease-out)}
.rad-spots__box::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.7;
  background:radial-gradient(130% 88% at 16% 0%,color-mix(in srgb,var(--vn-color-accent-on-dark) 18%,transparent) 0%,transparent 62%);
  transition:opacity var(--vn-d-medium) var(--vn-ease-out)}
.rad-spots__box>*{position:relative}
.rad-spots__box.is-aktiv::before,.rad-spots__box.is-open::before{opacity:1}
@media(hover:hover){.rad-spots__box:hover::before{opacity:1}}
.rad-spots__box.is-open{box-shadow:none}

.rad-spots__box-head{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3)}
.rad-spots__box-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px clamp(14px,1.15vw,18px);border:0;background:none;color:var(--vn-color-on-dark);text-align:left;cursor:pointer;
  font:600 clamp(.9375rem,1.05vw,1.0625rem)/1.35 var(--vn-font-body);letter-spacing:-.01em;-webkit-appearance:none;appearance:none}
.rad-spots__box-btn:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:-4px;border-radius:inherit}
.rad-spots__box-title{overflow-wrap:anywhere}
.rad-spots__box-icon{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--vn-color-accent-on-dark) 16%,transparent);transition:background var(--vn-d-medium) var(--vn-ease-out),transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__box-icon::before,.rad-spots__box-icon::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;
  background:var(--vn-color-accent-on-dark);transform:translate(-50%,-50%);transition:transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__box-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
@media(hover:hover){.rad-spots__box-btn:hover .rad-spots__box-icon{background:color-mix(in srgb,var(--vn-color-accent-on-dark) 28%,transparent)}}
.rad-spots__box.is-open .rad-spots__box-icon{transform:rotate(180deg)}
.rad-spots__box.is-open .rad-spots__box-icon::after{transform:translate(-50%,-50%) rotate(0deg)}

/* Rumpf: 0fr → 1fr klappt weich auf */
.rad-spots__box-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--vn-d-slow) var(--vn-ease-out)}
.rad-spots__box.is-open .rad-spots__box-body{grid-template-rows:1fr}
.rad-spots__box-inner{min-height:0;overflow:hidden;padding:0 clamp(14px,1.15vw,18px)}
.rad-spots__box.is-open .rad-spots__box-inner{padding-bottom:clamp(14px,1.15vw,18px)}
.rad-spots__box-text{margin:0;font-size:var(--vn-text-micro);line-height:1.55;color:var(--vn-color-on-dark-muted);overflow-wrap:anywhere}

/* --- Diagramm --------------------------------------------------------------------------------------------------- */
.rad-spots__meter{margin:12px 0 0;padding:12px 0 0;border-top:1px solid color-mix(in srgb,var(--vn-color-on-dark) 12%,transparent)}
.rad-spots__meter-label{font-size:var(--vn-text-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--vn-color-accent-on-dark) 85%,var(--vn-color-on-dark))}
.rad-spots__chart{display:block;width:100%;height:auto;margin-top:8px;overflow:visible}
.rad-spots__aussage{margin:8px 0 0;font-size:var(--vn-text-xs);line-height:1.55;color:var(--vn-color-on-dark-muted)}

.rad-spots__chart text{font:600 8.5px/1 var(--vn-font-body);fill:color-mix(in srgb,var(--vn-color-on-dark) 62%,transparent);letter-spacing:.02em}
.rad-spots__chart .c-label--gut,.rad-spots__chart .c-achse--gut{fill:var(--vn-color-accent-on-dark)}
.rad-spots__chart .c-achse{font-size:7.5px;letter-spacing:.06em;text-transform:uppercase}
.rad-spots__chart .c-spur{fill:color-mix(in srgb,var(--vn-color-on-dark) 10%,transparent)}
.rad-spots__chart .c-grund{stroke:color-mix(in srgb,var(--vn-color-on-dark) 16%,transparent);stroke-width:1}
.rad-spots__chart .c-zone{fill:color-mix(in srgb,var(--vn-color-accent-on-dark) 32%,transparent)}
.rad-spots__chart .c-zone--flaeche{fill:color-mix(in srgb,var(--vn-color-accent-on-dark) 12%,transparent)}
.rad-spots__chart .c-zone--warn{fill:color-mix(in srgb,#F2A03D 42%,transparent)}
.rad-spots__chart .c-nadel line{stroke:var(--vn-color-on-dark);stroke-width:1.5;stroke-linecap:round}
.rad-spots__chart .c-nadel path{fill:var(--vn-color-on-dark)}
.rad-spots__chart .c-linie{fill:none;stroke:var(--vn-color-accent-on-dark);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.rad-spots__chart .c-linie--schlecht{stroke:color-mix(in srgb,var(--vn-color-on-dark) 45%,transparent);stroke-width:1.25}
.rad-spots__chart .c-punkt{fill:var(--vn-color-accent-on-dark);stroke:var(--vn-color-surface-darker);stroke-width:2}
.rad-spots__chart .c-balken{transform-origin:10px 50%}
.rad-spots__chart .c-balken--gut{fill:var(--vn-color-accent-on-dark)}
.rad-spots__chart .c-balken--matt{fill:color-mix(in srgb,var(--vn-color-accent-on-dark) 62%,transparent)}
.rad-spots__chart .c-balken--schlecht{fill:color-mix(in srgb,var(--vn-color-on-dark) 32%,transparent)}
.rad-spots__chart .c-start{stroke:color-mix(in srgb,var(--vn-color-on-dark) 40%,transparent);stroke-width:1}
.rad-spots__chart .c-stop{stroke:color-mix(in srgb,var(--vn-color-on-dark) 45%,transparent);stroke-width:1.5;stroke-linecap:round}
.rad-spots__chart .c-stop--gut{stroke:var(--vn-color-accent-on-dark)}
.rad-spots__chart .c-schraffur{stroke:color-mix(in srgb,var(--vn-color-on-dark) 45%,transparent);stroke-width:1.2}
.rad-spots__chart .c-marke line{stroke:currentColor;stroke-width:1.25}
.rad-spots__chart .c-marke circle{fill:currentColor;stroke:var(--vn-color-surface-darker);stroke-width:2}
.rad-spots__chart .c-marke--gut{color:var(--vn-color-accent-on-dark)}
.rad-spots__chart .c-marke--schlecht{color:color-mix(in srgb,var(--vn-color-on-dark) 70%,transparent)}
.rad-spots__chart .c-marke{transform:translateX(var(--zu))}

/* Diagramm-Animationen beim Öffnen: Linien zeichnen, Balken wachsen, Nadel und Marken fahren an ihren Platz */
html.rad-js .rad-spots__box.is-open .c-linie--zeichnen{stroke-dasharray:1;stroke-dashoffset:1;animation:rad-spot-draw 1500ms var(--vn-ease-out) 260ms both}
html.rad-js .rad-spots__box.is-open .c-linie--schlecht.c-linie--zeichnen{animation-delay:120ms;animation-duration:1300ms}
html.rad-js .rad-spots__box.is-open .c-balken{animation:rad-spot-grow 1100ms var(--vn-ease-out) 260ms both}
html.rad-js .rad-spots__box.is-open .c-balken--schlecht,html.rad-js .rad-spots__box.is-open .c-balken--matt{animation-delay:380ms}
html.rad-js .rad-spots__box.is-open .c-verlust,html.rad-js .rad-spots__box.is-open .c-stop{animation:rad-spot-fade 700ms var(--vn-ease-out) 1000ms both}
html.rad-js .rad-spots__box.is-open .c-nadel{animation:rad-spot-nadel 1300ms var(--vn-ease-out) 300ms both}
html.rad-js .rad-spots__box.is-open .c-marke{animation:rad-spot-marke 1300ms var(--vn-ease-out) 300ms both}
html.rad-js .rad-spots__box.is-open .c-marke--schlecht{animation-delay:420ms}
html.rad-js .rad-spots__box.is-open .c-punkt{animation:rad-spot-fade 600ms var(--vn-ease-out) 1500ms both}
@keyframes rad-spot-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rad-spot-fade{from{opacity:0}to{opacity:1}}
@keyframes rad-spot-nadel{from{transform:translateX(-78px)}to{transform:none}}
@keyframes rad-spot-marke{from{transform:translateX(10px)}to{transform:translateX(var(--zu))}}

/* Hinweis „Tippe auf einen Punkt“: nur mobil im 3D-Betrieb (unten) */
.rad-spots__hint{display:none}

/* --- Fuß ------------------------------------------------------------------------------------------------------- */
.rad-spots__note{margin:clamp(24px,3vw,40px) 0 0;padding-top:18px;border-top:1px solid var(--vn-color-line);
  font-size:var(--vn-text-xs);line-height:1.6;color:var(--vn-color-muted)}

/* --- Schmal: gestapelt, Boxen im Fluss, keine Linien --------------------------------------------------------- */
@media (max-width:1100px){
  .rad-pspots{--rad-spots-w:min(1440px,calc(100% - 2*24px))}
  .rad-spots__layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .rad-spots__stage{order:-1;max-width:760px;margin-inline:auto;width:100%}   /* gestapelt: kein Überstand */
  .rad-spots__canvas{--rad-spots-fx:8%;--rad-spots-fy:8%}
  .rad-spots__col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;min-height:0}
  .rad-spots__slot{position:static}
  .rad-spots__lines{display:none}
}
@media (max-width:650px){
  .rad-spots__col{grid-template-columns:minmax(0,1fr)}
  .rad-spots__glow{inset:-4% -2% -2%}
}

/* --- Schmal im 3D-Betrieb (.has-3d, Kundenwunsch 17.09.2026, „nur mobil“): kein Kartenstapel unter dem Rad. Die Bühne
   füllt den Viewport unter der Leiste; die Karte erscheint erst beim Tippen auf einen Punkt — als Sheet unten IN der Bühne,
   damit niemand vom Rad wegscrollt (die Kamera hebt das Motiv dafür an, 11-spots-3d.mjs). Solide Fläche, größere Schrift.
   Ohne WebGL/Modell bleibt der Stapel von oben. --------------------------------------------------------------- */
/* Navigationsleiste der Karte: nur im mobilen Sheet-Betrieb sichtbar (Desktop hat alle Karten nebeneinander). */
.rad-spots__nav{display:none}

@media (max-width:1100px){
  .rad-spots__layout.has-3d{gap:0}
  .rad-spots__layout.has-3d .rad-spots__stage .rad-spots__frame{aspect-ratio:auto;height:clamp(440px,calc(100svh - var(--rad-header-h-scrolled) - 32px),680px)}
  .rad-spots__layout.has-3d .rad-spots__canvas{--rad-spots-fx:6%}   /* Rad steht mobil näher an den Rändern */
  .rad-spots__layout.has-3d .rad-spots__col{display:contents}
  .rad-spots__layout.has-3d .rad-spots__slot{display:none}
  html.rad-js .rad-spots__layout.has-3d .rad-spots__col .rad-spots__slot.is-open{display:flex;flex-direction:column;justify-content:flex-end;
    position:absolute;z-index:5;top:auto;bottom:0;inset-inline:max(0px,calc(50% - 380px));max-height:56%;opacity:1;
    animation:rad-spot-sheet-in 520ms var(--vn-ease-out) both}
  /* 19.09.2026: Sheet niedriger (66 -> 56 %) und in den Innenmassen enger, damit mehr vom Rad sichtbar bleibt. */
  /* Oben die Blaetterknoepfe, darunter Titel und Inhalt — ohne eigenen Schliessen-Knopf (19.09.2026). */
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__nav{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 12px 8px;flex:0 0 auto}
  /* Die Titelzeile schliesst mobil nicht mehr (dafuer ist das Kreuz da) — sonst zwei Wege und Fehltipps beim Blaettern. */
  /* Die Titelzeile ist mobil nur Ueberschrift: geschlossen wird durch Tippen neben die Karte. */
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__box-btn{pointer-events:none}
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__box-icon{display:none}
  .rad-spots__nav-btn{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;padding:0;cursor:pointer;
    border-radius:50%;border:1px solid color-mix(in srgb,var(--vn-color-accent-on-dark) 34%,transparent);
    background:color-mix(in srgb,var(--vn-color-surface-darker) 55%,transparent);color:var(--vn-color-accent-on-dark);
    -webkit-appearance:none;appearance:none;transition:background var(--vn-d-snap),color var(--vn-d-snap),transform var(--vn-d-snap)}
  .rad-spots__nav-btn svg{width:18px;height:18px}
  .rad-spots__nav-btn:active{transform:scale(.92)}
  .rad-spots__nav-btn:focus-visible{outline:2px solid var(--vn-color-accent);outline-offset:2px}
  .rad-spots__nav-zaehler{font:600 .75rem/1 var(--vn-font-body);letter-spacing:.1em;
    color:color-mix(in srgb,var(--vn-color-on-dark) 62%,transparent)}
  @keyframes rad-spot-sheet-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  .rad-spots__layout.has-3d .rad-spots__box{display:flex;flex-direction:column;min-height:0;
    background:linear-gradient(168deg,color-mix(in srgb,var(--vn-color-accent) 14%,var(--vn-color-surface-dark)) 0%,var(--vn-color-surface-darker) 72%);
    border:1px solid color-mix(in srgb,var(--vn-color-accent-on-dark) 24%,transparent)}
  .rad-spots__layout.has-3d .rad-spots__box-btn{padding:12px 16px 14px;font-size:var(--vn-text-base)}
  .rad-spots__layout.has-3d .rad-spots__box-icon{width:24px;height:24px}
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__box-icon{transform:rotate(45deg)}   /* Plus wird zum Kreuz: Schließen */
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__box-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
  .rad-spots__layout.has-3d .rad-spots__box-body{min-height:0}
  .rad-spots__layout.has-3d .rad-spots__box-inner{padding-inline:16px;overscroll-behavior:contain}
  .rad-spots__layout.has-3d .rad-spots__box.is-open .rad-spots__box-inner{overflow:auto;padding-bottom:14px}
  /* Weicher Auslauf statt harter Schnittkante — nur solange unten noch Inhalt wartet (Klasse aus 11-spots.js). */
  .rad-spots__layout.has-3d .rad-spots__box-inner.hat-mehr{
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
  .rad-spots__layout.has-3d .rad-spots__box-text{font-size:.9375rem;line-height:1.55}
  .rad-spots__layout.has-3d .rad-spots__meter{margin-top:11px;padding-top:11px}
  .rad-spots__layout.has-3d .rad-spots__meter-label{font-size:var(--vn-text-xs)}
  .rad-spots__layout.has-3d .rad-spots__chart{max-width:250px}
  .rad-spots__layout.has-3d .rad-spots__aussage{font-size:var(--vn-text-micro);line-height:1.5}
  .rad-spots__layout.has-3d .rad-spots__hint{display:block;position:absolute;left:50%;top:calc(var(--rad-spots-unten,58%) + 11%);z-index:4;transform:translateX(-50%);margin:0;   /* knapp unter dem Hinterreifen (tiefster Punkt + Reifen) */
    padding:9px 15px;border-radius:var(--vn-radius-full);white-space:nowrap;pointer-events:none;
    background:color-mix(in srgb,var(--vn-color-surface-darker) 74%,transparent);border:1px solid color-mix(in srgb,var(--vn-color-accent-on-dark) 32%,transparent);
    color:var(--vn-color-accent-on-dark);font:600 .8125rem/1.2 var(--vn-font-body);letter-spacing:.02em;
    transition:opacity var(--vn-d-medium) var(--vn-ease-out)}
  .rad-spots__layout.has-3d.is-erkundet .rad-spots__hint,.rad-spots__layout.has-3d .rad-spots__stage.is-intro .rad-spots__hint,
  html.rad-js .rad-spots__layout.has-3d:not(.is-inview) .rad-spots__hint{opacity:0}
}
/* Tablet (19.09.2026, Kundenwunsch): ab 700 px Breite ist seitlich Platz — die Karte steht rechts unten und deutlich
   schmaler, das Rad bleibt links frei. Gilt ueberall, wo die 3D-Sektion eingebettet ist, weil es dieselbe Datei ist. */
@media (min-width:700px) and (max-width:1100px) and (min-height:521px){
  html.rad-js .rad-spots__layout.has-3d .rad-spots__col .rad-spots__slot.is-open{
    inset:auto 16px 16px auto;width:min(46%,400px);max-height:min(62%,520px)}
  .rad-spots__layout.has-3d .rad-spots__box{border-radius:var(--vn-radius-xl)}
}

/* Handy quer: das Sheet steht rechts, das Motiv rückt nach links (vx in 11-spots-3d.mjs) */
@media (max-width:1100px) and (max-height:520px){
  .rad-spots__layout.has-3d .rad-spots__stage .rad-spots__frame{height:calc(100svh - var(--rad-header-h-scrolled) - 16px);min-height:260px}
  html.rad-js .rad-spots__layout.has-3d .rad-spots__col .rad-spots__slot.is-open{inset:0 0 0 auto;width:min(46%,380px);max-height:none;justify-content:center}
  .rad-spots__layout.has-3d .rad-spots__hint{left:auto;right:16px;top:auto;bottom:16px;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.rad-js .rad-spots__stage .rad-spots__blip{opacity:1}
  html.rad-js .rad-spots__stage.is-inview .rad-spots__blip,html.rad-js .rad-spots__stage.is-inview .rad-spots__blip::before,html.rad-js .rad-spots__stage.is-inview .rad-spots__blip::after,
  html.rad-js .rad-spots__layout.is-inview .rad-spots__lines path,
  html.rad-js .rad-spots__box.is-open .c-linie--zeichnen,html.rad-js .rad-spots__box.is-open .c-balken,
  html.rad-js .rad-spots__box.is-open .c-verlust,html.rad-js .rad-spots__box.is-open .c-stop,html.rad-js .rad-spots__box.is-open .c-nadel,
  html.rad-js .rad-spots__box.is-open .c-marke,html.rad-js .rad-spots__box.is-open .c-punkt{animation:none}
  html.rad-js .rad-spots__lines path.is-open,html.rad-js .rad-spots__box.is-open .c-linie--zeichnen{stroke-dashoffset:0}
  .rad-spots__slot,.rad-spots__box-body,.rad-spots__lines path,.rad-spots__frame,.rad-spots__clip,.rad-spots__blip,.rad-spots__canvas,.rad-spots__hint{transition:none}
  html.rad-js .rad-spots__slot,html.rad-js .rad-spots__layout.is-inview .rad-spots__slot,html.rad-js .rad-spots__layout.has-3d .rad-spots__col .rad-spots__slot.is-open{animation:none;opacity:1}
  html.rad-js .rad-spots__stage.is-intro .rad-spots__blip{opacity:1}
}

/* Abschluss der Servicesektion auf den Regionalseiten (19.09.2026): Preise und der Weg zum Termin.
   Auf /service/bikeservice-standard/ stehen beide im Seitenkopf — auf einer Regionalseite fehlten sie sonst ganz. */
.rad-pspots__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(28px,3vw,48px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--vn-color-divider-dark)}
.rad-pspots__preise{display:flex;flex-wrap:wrap;gap:8px 40px}
.rad-pspots__preise p{display:flex;flex-direction:column;gap:2px;margin:0}
.rad-pspots__preise strong{font:600 max(.9375rem,calc(17 * var(--rad-dpx)))/1.3 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-pspots__preise span{font:400 var(--vn-text-sm)/1.5 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-pspots__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
@media(max-width:650px){.rad-pspots__fuss{flex-direction:column;align-items:flex-start}}