/* MINI LAND POI – GLOBAL (Desktop-Basis). Keine Skalierung. */
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;

  /* feste UI-Größen 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;
  --fs-miniland:56px;
}

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

/* Layout-Grundlage */
.content{
  width:100%;
  position:relative; /* Scroll-Logik im responsive.css */
}

.stage{
  position: relative;
  display: block;
  width: 100%;
  container-type: inline-size; 
  --ski-x: 14;
  --ski-y: 71;
}

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

/* Desktop: Bild füllt den 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; }

/* Sonderfall: Label 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);
}

/* ---------------- FIXE ARROWS (am Bild/Overlay) ---------------- */
.arrow{
  --ax:50; --ay:50;   /* Prozent-Position relativ zu .all-poi */
  --awp:18%;          /* Breite in % der Bildbreite */
  --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;
}

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

/* ---------------- Per-Point: Positionen (unverändert) ---------------- */
.point-1{  --x:15; --y:20; }
.point-2{  --x:31; --y:19; }
.point-3{  --x:53; --y:38; }
.point-4{  --x:62; --y:52; }
.point-5{  --x:88; --y:53; }
.point-6{  --x:39; --y:74; }
.point-7{  --x:26; --y:95; }
.point-8{  --x:80; --y:95; }

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

/* Ski-Gasti: fixe Desktop-Größe (keine vw-Skalierung) */
.stage .ski-gasti{
  position: absolute;
  left: calc(var(--ski-x, 14) * 1%);
  top:  calc(var(--ski-y, 71) * 1%);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;

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

  /* skaliert mit Stage (nicht mit Viewport) */
  width: clamp(180px, 18cqw, 420px);

  --ski-nudge-x: 2px;
  --ski-nudge-y: 0;
  --ski-rotate: 0deg;
}
.stage .ski-gasti img{
  display:block;
  width:85%;
  height:auto;
  margin:0 auto;
  transform:translate(var(--ski-nudge-x),var(--ski-nudge-y)) rotate(var(--ski-rotate));
}
.stage .ski-gasti p{
  margin:0;
  line-height:1.1;
  text-align:center;
  color:var(--ui-stroke);
  white-space:nowrap;
  font-size: clamp(22px, 3.2cqw, 56px);
  width:max-content; max-width:none; overflow:visible; display:inline-block;
}

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

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

/* Active-State = Hover-Look */
.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); }