/* ---------------------------------------------------------------------------
   VEYCA – Fadenkreuze und Beschriftungsfahnen

   Gezeichnet in der Formensprache des Logos: nur Haarlinien, keine Flächen,
   keine Schlagschatten. Der Puls läuft je Punkt versetzt, damit die acht
   Markierungen nicht im Gleichtakt schlagen.
   --------------------------------------------------------------------------- */

.hotspots { position: absolute; inset: 0; }

.hs { position: absolute; transform: translate(-50%, -50%); }

/* --- Das Fadenkreuz --------------------------------------------------------- */

.hs__btn {
  --size: 30px;
  position: relative; display: block;
  width: var(--size); height: var(--size);
  padding: 0; background: none; border: 0; cursor: pointer;
  border-radius: 50%;
}
.hs__btn::before {                        /* Ring */
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--line-bright); border-radius: 50%;
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.hs__btn::after {                         /* Kern */
  content: ''; position: absolute; inset: calc(50% - 2.5px);
  background: var(--ink); border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,.9);
}

/* Vier Ticks, gezeichnet als ein einziges konisches Kreuz */
.hs__tick {
  position: absolute; inset: -7px; pointer-events: none;
  background:
    linear-gradient(var(--line-bright), var(--line-bright)) 50% 0   / 1px 6px no-repeat,
    linear-gradient(var(--line-bright), var(--line-bright)) 50% 100% / 1px 6px no-repeat,
    linear-gradient(var(--line-bright), var(--line-bright)) 0   50% / 6px 1px no-repeat,
    linear-gradient(var(--line-bright), var(--line-bright)) 100% 50% / 6px 1px no-repeat;
  transition: opacity var(--dur-1) var(--ease);
}

/* Puls: ein zweiter Ring, der aufgeht und verblasst */
.hs__pulse {
  position: absolute; inset: 0; border: 1px solid var(--ink);
  border-radius: 50%; pointer-events: none; opacity: 0;
  animation: hs-pulse 2.6s var(--ease-out) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes hs-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.hs__btn:hover::before,
.hs.is-open .hs__btn::before { border-color: var(--ink); transform: scale(1.12); }
.hs.is-open .hs__pulse { animation-play-state: paused; opacity: 0; }

/* --- Leitlinie --------------------------------------------------------------- */

.hs__lead {
  position: absolute; left: 50%; top: 50%;
  width: 1px; height: var(--lead, 46px);
  background: linear-gradient(var(--line-bright), var(--line-bright));
  transform-origin: 50% 0; pointer-events: none;
  transform: translate(-50%, 0) scaleY(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.hs[data-side='top']    .hs__lead { transform-origin: 50% 100%; transform: translate(-50%, -100%) scaleY(0); }
.hs[data-side='bottom'] .hs__lead { transform-origin: 50% 0;    transform: translate(-50%, 0)    scaleY(0); }
.hs[data-side='left']   .hs__lead,
.hs[data-side='right']  .hs__lead { width: var(--lead, 46px); height: 1px; }
.hs[data-side='left']   .hs__lead { transform-origin: 100% 50%; transform: translate(-100%, -50%) scaleX(0); }
.hs[data-side='right']  .hs__lead { transform-origin: 0 50%;    transform: translate(0, -50%)     scaleX(0); }

.hs.is-open[data-side='top']    .hs__lead { transform: translate(-50%, -100%) scaleY(1); }
.hs.is-open[data-side='bottom'] .hs__lead { transform: translate(-50%, 0)     scaleY(1); }
.hs.is-open[data-side='left']   .hs__lead { transform: translate(-100%, -50%) scaleX(1); }
.hs.is-open[data-side='right']  .hs__lead { transform: translate(0, -50%)     scaleX(1); }

/* --- Die Fahne ---------------------------------------------------------------- */

.hs__flag {
  position: absolute; left: 50%; top: 50%;
  width: min(19rem, 62vw);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: rgba(6, 6, 7, .82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: left; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
  z-index: 3;
}
.hs[data-side='top']    .hs__flag { transform: translate(-50%, calc(-100% - var(--lead, 46px) - 4px)) translateY(6px); }
.hs[data-side='bottom'] .hs__flag { transform: translate(-50%, calc(var(--lead, 46px) + 4px)) translateY(-6px); }
.hs[data-side='left']   .hs__flag { transform: translate(calc(-100% - var(--lead, 46px) - 4px), -50%) translateX(6px); }
.hs[data-side='right']  .hs__flag { transform: translate(calc(var(--lead, 46px) + 4px), -50%) translateX(-6px); }

.hs.is-open .hs__flag {
  opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s;
}
.hs.is-open[data-side='top']    .hs__flag { transform: translate(-50%, calc(-100% - var(--lead, 46px) - 4px)); }
.hs.is-open[data-side='bottom'] .hs__flag { transform: translate(-50%, calc(var(--lead, 46px) + 4px)); }
.hs.is-open[data-side='left']   .hs__flag { transform: translate(calc(-100% - var(--lead, 46px) - 4px), -50%); }
.hs.is-open[data-side='right']  .hs__flag { transform: translate(calc(var(--lead, 46px) + 4px), -50%); }

/* Auf dem Bild sitzende Fahnen dürfen den Rand nicht verlassen – JS kippt die
   Seite; diese Klasse verschiebt zusätzlich horizontal, wenn das nicht reicht. */
.hs__flag { margin-left: var(--nudge, 0px); }

.hs__flag .eyebrow { margin-bottom: var(--s-2); font-size: 0.66rem; }
.hs__flag h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.hs__flag p { font-size: 0.83rem; line-height: 1.62; color: var(--ink-2); }

/* --- Liste unter dem Bild (immer vorhanden, mobil sichtbar) ------------------ */

.hotspot-list {
  width: min(var(--maxw), 100%); margin: var(--s-8) auto 0;
  padding-inline: var(--gutter);
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.hotspot-list__item {
  border-top: 1px solid var(--line); padding: var(--s-5) 0;
}
.hotspot-list__item .eyebrow { margin-bottom: var(--s-2); }
.hotspot-list__item h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.hotspot-list__item p { font-size: 0.83rem; color: var(--ink-2); }

/* --- Schmale Bildschirme: Fahne wird zum Bottom-Sheet ------------------------ */

@media (max-width: 760px) {
  .hs__btn { --size: 26px; }
  .hs__lead { display: none; }
  .hs__flag {
    position: fixed; left: var(--s-4); right: var(--s-4); top: auto; bottom: var(--s-4);
    width: auto; transform: translateY(14px) !important;
    background: rgba(6, 6, 7, .95);
  }
  .hs.is-open .hs__flag { transform: translateY(0) !important; }
  .hotspot-list { display: grid; }
}
@media (min-width: 761px) {
  .hotspot-list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hs__pulse { animation: none; opacity: 0; }
  .hs__lead { transition: none; }
}