/* GASTI PARK POI – GLOBAL (Desktop-Basis). Keine Skalierung per JS/CSS. */
html, body { margin: 0; padding: 0; }

:root{
  --circle-fill:#dcf3ff;
  --circle-stroke:#0a3565;
  --circle-fill-hover:var(--circle-stroke);
  --circle-stroke-hover:var(--circle-fill);

  --ui-fill:#dcf1fd;
  --ui-stroke:#1b3761;

  --arrow-stroke-w:2px;
  --pulse-rgb:10,53,101;

  /* UI-Größen bleiben wie Desktop */
  --fs-poi-label:22px;
  --pad-poi-label-y:12px;
  --pad-poi-label-x:16px;
  --bubble-max-w:260px;

  --poi-dot-size:48px;

  --fs-gasti:42px;
}

/* Basis-Typo */
p{
  margin:0;
  text-transform:uppercase;
  font-family:'komet','sans-serif';
  font-weight:600;
}

/* Layout */
.content{
  width:100%;
  position:relative; /* Höhe folgt dem Inhalt; Scroll-Logik im responsive.css */
}

.stage{
  position:relative;
  display:block;
  /* wichtig für cqw (Container Query Units) */
  container-type:inline-size;
}

.stage__canvas{
  position:relative;
  display:inline-block;
  line-height:0;
}

/* Desktop: Bild passt in den verfügbaren Container */
.stage__canvas > img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}

.all-poi{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:100;
}

/* ---------------- POIs ---------------- */
.poi{
  --x:50; --y:50;

  position:absolute;
  left:calc(var(--x)*1%);
  top: calc(var(--y)*1%);
  transform:translate(-50%,-50%);

  width:max(var(--poi-dot-size),48px);
  height:max(var(--poi-dot-size),48px);

  z-index:2;
  pointer-events:auto;

  --bubble-gap:10px;
  --bubble-shift-x:-49px;
  --bubble-stroke-w:2px;
  --tail-w:13px; --tail-h:15px; --tail-x:47px;
}

.poi__dot{ width:100%; height:100%; display:block; }

.poi__dot circle{
  fill:var(--circle-fill);
  stroke:var(--circle-stroke);
  stroke-width:4;
  transition:fill .2s ease, stroke .2s ease;
}

.poi:hover .poi__dot circle,
.poi:focus-visible .poi__dot circle{
  fill:var(--circle-fill-hover);
  stroke:var(--circle-stroke-hover);
}

/* Pulse */
.poi{
  --pulse-size:22px; --pulse-speed:2.4s; --pulse-color:var(--pulse-rgb); --pulse-opacity:.45;
}
.poi::after,.poi::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:60%; height:60%;
  transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 rgba(var(--pulse-color),var(--pulse-opacity));
  animation:pulse-animation var(--pulse-speed) ease-out infinite;
}
.poi::before{ animation-delay:calc(var(--pulse-speed)/2); }

@keyframes pulse-animation{
  0%{ box-shadow:0 0 0 0 rgba(var(--pulse-color),var(--pulse-opacity)); }
  70%{ box-shadow:0 0 0 var(--pulse-size) rgba(var(--pulse-color),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--pulse-color),0); }
}

.poi:hover::after,.poi:hover::before,
.poi:focus-visible::after,.poi:focus-visible::before{ --pulse-opacity:.7; }

@media (prefers-reduced-motion:reduce){
  .poi::after,.poi::before{ animation:none; }
}

/* Label */
.poi__label{
  position:absolute;
  left:calc(50% + var(--bubble-shift-x));
  bottom:calc(100% + var(--bubble-gap));
  transform:translateY(4px);

  display:inline-block;
  width:max-content;
  min-width:var(--bubble-max-w);
  white-space:nowrap;

  padding:var(--pad-poi-label-y) var(--pad-poi-label-x);
  margin:0;

  background:var(--ui-fill);
  color:var(--ui-stroke);
  border:var(--bubble-stroke-w) solid var(--ui-stroke);
  border-radius:9999px;
  box-sizing:content-box;
  text-align:center;
  font-weight:600;
  font-size:var(--fs-poi-label);
  line-height:1.25;
  font-family:system-ui,sans-serif;

  z-index:10000; pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.poi__label::before,.poi__label::after{
  content:""; position:absolute; top:100%; width:0; height:0; pointer-events:none;
}
.poi__label::before{
  left:calc(var(--tail-x) - (var(--tail-w) + var(--bubble-stroke-w)) + var(--tail-nudge-x, 0px));
  border-left:calc(var(--tail-w) + var(--bubble-stroke-w)) solid transparent;
  border-right:calc(var(--tail-w) + var(--bubble-stroke-w)) solid transparent;
  border-top:calc(var(--tail-h) + var(--bubble-stroke-w)) solid var(--ui-stroke);
}
.poi__label::after{
  left:calc(var(--tail-x) - var(--tail-w) + var(--tail-nudge-x, 0px));
  transform:translateY(calc(-1 * var(--bubble-stroke-w)));
  border-left:var(--tail-w) solid transparent;
  border-right:var(--tail-w) solid transparent;
  border-top:var(--tail-h) solid var(--ui-fill);
}

/* Label sichtbar */
.poi:hover .poi__label,
.poi:focus-visible .poi__label{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}

/* z-index oben */
.poi:is(:hover,:focus-visible,:focus-within,:active){ z-index:9999; }

/* Bubble unten bei point-3 */
.point-3 .poi__label{
  top:calc(100% + var(--bubble-gap) + var(--bubble-shift-y, 0px));
  bottom:auto; left:calc(50% + var(--bubble-shift-x));
  transform:translateY(-4px);
}
.point-3 .poi__label::before,.point-3 .poi__label::after{ top:auto; bottom:100%; }
.point-3 .poi__label::before{
  left:calc(var(--tail-x) - (var(--tail-w) + var(--bubble-stroke-w)) + var(--tail-nudge-x, 0px));
  border-left:calc(var(--tail-w) + var(--bubble-stroke-w)) solid transparent;
  border-right:calc(var(--tail-w) + var(--bubble-stroke-w)) solid transparent;
  border-top:0;
  border-bottom:calc(var(--tail-h) + var(--bubble-stroke-w)) solid var(--ui-stroke);
}
.point-3 .poi__label::after{
  left:calc(var(--tail-x) - var(--tail-w) + var(--tail-nudge-x, 0px));
  transform:translateY(var(--bubble-stroke-w));
  border-left:var(--tail-w) solid transparent;
  border-right:var(--tail-w) solid transparent;
  border-top:0;
  border-bottom:var(--tail-h) solid var(--ui-fill);
}

.point-12{ --bubble-gap:25px; }

/* ---------------- FIXE ARROWS (am Bild/Overlay) ---------------- */
.arrow{
  --ax:50; --ay:50;      /* Prozent-Position relativ zu .stage__canvas */
  --awp:18%;             /* Größe in % → proportional zum Bild */
  --angle:0deg;

  position:absolute;
  left:calc(var(--ax) * 1%);
  top: calc(var(--ay) * 1%);

  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: translate(0, -50%) rotate(var(--angle));

  width:var(--awp);
  height:auto;

  pointer-events:none;

  opacity:0; visibility:hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.arrow[data-anchor="right"]{
  transform-origin:100% 50%;
  transform: translate(0, -50%) rotate(var(--angle));
}

.arrow path{
  fill:var(--ui-fill);
  stroke:var(--ui-stroke);
  stroke-width:var(--arrow-stroke-w);
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* Pfeil sichtbar, wenn zugehöriger POI aktiv ist */
.poi.point-3:is(:hover, :focus-visible, .is-active) ~ .arrow[data-for="3"],
.poi.point-12:is(:hover, :focus-visible, .is-active) ~ .arrow[data-for="12"]{
  opacity:1; visibility:visible; transition-delay:0s;
}

/* ---------------- Per-Point: POI-Positionen (unverändert) ---------------- */
.point-1{  --x:14; --y:20; }
.point-2{  --x:35; --y:19; }
.point-3{  --x:80; --y:19; }
.point-4{  --x:46; --y:36; }
.point-5{  --x:68; --y:32; }
.point-6{  --x:87; --y:33; }
.point-7{  --x:93; --y:18; --bubble-shift-x:-250px; --tail-x:247px; }
.point-8{  --x:15; --y:55; }
.point-9{  --x:48; --y:57; }
.point-10{ --x:77; --y:57; }
.point-11{ --x:97; --y:57; --bubble-shift-x:-250px; --tail-x:247px; }
.point-12{ --x:7;  --y:88; }
.point-13{ --x:62; --y:94; }
.point-14{ --x:88; --y:80; }
.point-15{ --x:67; --y:18; }
.point-16{ --x:35; --y:46; }
.point-17{ --x:70; --y:48; }
.point-18{ --x:34; --y:66; }
.point-19{ --x:70; --y:66; }

/* Canvas clippt Überstände hart am Bild */
.stage__canvas,
.stage__canvas > .all-poi{
  overflow:clip;
  contain:paint;
}

/* Gasti – im Canvas, skaliert relativ zur .stage via cqw */
.stage__canvas .ski-gasti{
  position:absolute;
  --x:35; --y:87; /* deine Werte */
  left:calc(var(--x)*1%); top:calc(var(--y)*1%);
  transform:translate(-50%,-50%);
  z-index:1; pointer-events:none;

  display:flex; flex-direction:column; align-items:center; gap:.25rem;

  /* skaliert mit Containerbreite (.stage) */
  width: clamp(180px, 18cqw, 420px);

  --ski-nudge-x:8px; --ski-nudge-y:0; --ski-rotate:0deg;
}

.stage__canvas .ski-gasti img{
  display:block; width:55%; height:auto; margin:0 auto;
  transform:translate(var(--ski-nudge-x),var(--ski-nudge-y)) rotate(var(--ski-rotate));
}

.stage__canvas .ski-gasti p{
  margin:0; font-size: clamp(22px, 3.2cqw, 56px);
  line-height:1.1; text-align:center; color:var(--ui-stroke);
  white-space:nowrap; word-break:normal; hyphens:none;
  width:max-content; max-width:none; overflow:visible; display:inline-block;
}

/* A11y/Fokus */
.poi{ outline:none; }
.poi:focus-visible{ outline:2px solid var(--ui-stroke); outline-offset:4px; }

/* Label-Kanten-Nudge (JS setzt --label-nudge-x) */
.poi__label{
  margin-left: var(--label-nudge-x, 0px);
  --tail-nudge-x: calc(var(--label-nudge-x, 0px) * -1);
}

/* Identischer Zustand wie :hover für .is-active */
.poi.is-active .poi__label,
.poi.is-active .poi__arrow{
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.poi.is-active .poi__dot circle{
  fill: var(--circle-fill-hover);
  stroke: var(--circle-stroke-hover);
}

/* Spezielle Pfeil-Transforms beibehalten (falls intern genutzt) */
.point-2.is-active .poi__arrow{ transform: translate(-100%,-50%) rotate(0deg); }
.point-7.is-active .poi__arrow{ transform: translate(-100%,-50%) rotate(0deg); }
.point-8.is-active .poi__arrow{ transform: translate(0,-50%) rotate(180deg); }