/* Grundriss-Layout */
.fkkk-plan { position: relative; width: 100%; }
.fkkk-plan__img { width: 100%; height: auto; display: block; }
.fkkk-plan__overlay { position: absolute; inset: 0; }

/* Hotspots */
.fkkk-hotspot {
  position: absolute;
  transform: translate(-50%,-50%);
  display: inline-grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 999px;
  border: 2px solid #204060;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  outline: none;
}
.fkkk-hotspot__dot {
  width: .7rem; height: .7rem; border-radius: 999px; background: #204060;
}

/* Aktive Station hervorheben */
.fkkk-hotspot.is-active { border-color: #c0392b; }
.fkkk-hotspot.is-active .fkkk-hotspot__dot { background: #c0392b; }
.fkkk-hotspot.is-active { animation: fkkk-pulse 1.6s infinite; }
@keyframes fkkk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(192,57,43,.35); }
  70%{ box-shadow: 0 0 0 12px rgba(192,57,43,0); }
  100%{ box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}

/* Fokus für Tastaturbedienung */
.fkkk-hotspot:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Tooltip */
.fkkk-hotspot__tooltip {
  position: absolute;
  left: 50%; top: -0.75rem; transform: translate(-50%, -100%);
  min-width: 180px; max-width: 260px;
  background: #1f2937; color: #fff;
  padding: .55rem .7rem; border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size: .9rem; line-height: 1.3;
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
  z-index: 20;
}
.fkkk-hotspot__tooltip::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#1f2937;
}
.fkkk-hotspot:hover .fkkk-hotspot__tooltip,
.fkkk-hotspot:focus .fkkk-hotspot__tooltip {
  opacity: 1; visibility: visible;
}
.fkkk-hotspot__tooltip-title { display:block; font-weight:700; margin-bottom:.2rem; }
.fkkk-hotspot__tooltip-meta  { display:block; opacity:.85; font-size:.82rem; margin-bottom:.2rem; }
.fkkk-hotspot__tooltip-text  { display:block; opacity:.95; }

/* Mobile: Tooltips weniger dominant (optional) */
@media (max-width: 768px){
  .fkkk-hotspot__tooltip { min-width: 160px; max-width: 220px; font-size:.85rem; }
}


.fkkk-station-nav{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:1rem;
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid #ddd;
}

/* Links sind volle (hälftige) Klickflächen */
.fkkk-station-nav a{
  flex:1;                 /* halbe Breite je Link */
  display:flex;           /* Inhalt steuern */
  align-items:center;
  padding:.8rem 1rem;
  text-decoration:none;
  color:#523f30;
  border-radius:.4rem;
  transition:background .2s,color .2s;
  font-weight:600;
}

/* Kompakte Anordnung im Link */
.fkkk-station-nav__title{
  margin:0 .45rem;
  font-weight:400;
}

/* Ausrichtung: links kompakt, rechts kompakt */
.fkkk-station-nav__prev{ justify-content:flex-start; }
.fkkk-station-nav__next{ justify-content:flex-end; }

.fkkk-station-nav a:hover{ background:#523f30; color:#fff !important; }

/* Optional: auf sehr kleinen Screens als Block untereinander */
@media (max-width:480px){
  .fkkk-station-nav{
    flex-direction:column;
  }
}