/* ── JiM Hallenfinder – Frontend ─────────────────────────────────── */

:root {
  --jim-lila:      #621a6b;
  --jim-lila-dark: #4a1350;
  --jk-popup-size:   clamp(220px, 30vw, 365px);
  --jk-border:       7px;
  --jim-grau: #727272;
}

.jim-hallenfinder {
  font-family: inherit;
  line-height: 1.5;
}

/* ── Karte ────────────────────────────────────────────────────── */

.jk-map-wrap {
  position: relative;
  width: 100%;
  /* Aspect ratio 16:9; height falls back for browsers without aspect-ratio */
  height: 480px;
  aspect-ratio: 16 / 9;
}

@supports (aspect-ratio: 16 / 9) {
  .jk-map-wrap { height: auto; }
}

#jk-map {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

/* ── Kartenstil-Filter (nur Tiles, nicht Marker) ─────────────── */

#jk-map.jk-map-filter-desaturate .leaflet-tile-pane {
  filter: saturate(15%);
}

#jk-map.jk-map-filter-grayscale .leaflet-tile-pane {
  filter: grayscale(100%);
}

/* ── Leaflet-Marker (custom divIcon) ──────────────────────────── */

.jk-marker-icon {
  background: #fff;
  border: 3px solid var(--jim-lila);
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jk-marker-icon:hover {
  transform: scale(1.45);
  box-shadow: 0 0 0 4px rgba(98, 26, 107, 0.25);
}

.jk-marker-icon.is-active {
  transform: scale(1.45);
  background: var(--jim-lila);
 
}

/* ── Popup ────────────────────────────────────────────────────── */

.jk-popup {
  position: absolute;
  width:  var(--jk-popup-size);
  height: var(--jk-popup-size);
  background: #fff;
  border: var(--jk-border) solid var(--jim-lila);
  border-radius: 50%;
  z-index: 9000;          /* above all Leaflet layers */
  display: none;
  pointer-events: all;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.jk-popup.is-visible {
  display: block;
}

.jk-popup-close {
  position: absolute;
  top: 48%;
  left: 20px;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  border: none;
  color: var(--jim-lila);
  cursor: pointer;
  z-index: 9001;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jk-popup-close:hover {
  color: var(--jim-grau);
  background: #fff;
}

/* Content sits centered within the disc.
   The inscribed-square safe area for a disc of radius r = r√2.
   padding = (size - size/√2) / 2  ≈  size * 0.146
   We add a little extra on top for the close button. */
.jk-popup-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--jk-popup-size) * 0.16)
           calc(var(--jk-popup-size) * 0.14);
  overflow: hidden;
  font-size: clamp(0.72rem, 1.3vw, 0.86rem);
  line-height: 1.5;
}

.jk-popup-name {
  color: var(--jim-grau);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: var(--jim-lila);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.jk-popup-name-link {
  color: var(--jim-grau);
  text-decoration: none;
}

.jk-popup-name-link:hover { color: var(--jim-lila-dark); }

.jk-popup-times { margin-bottom: 3px; color: var(--jim-grau); }

.jk-popup-room {
  color: var(--jim-grau);
  font-style: italic;
  margin-bottom: 4px;
}

.jk-popup-address { color: var(--jim-grau); margin-bottom: 8px; }

.jk-popup-nav {
  color: var(--jim-lila);
  font-weight: 700;
  text-decoration: none;
}

.jk-popup-nav:hover { 
  text-decoration: underline; 
  color: var(--jim-grau);
}

/* ── Bildunterschrift ─────────────────────────────────────────── */

.jk-caption {
  font-size: 1.2rem;
  font-weight:700;
  text-align: left;
  color: var(--jim-grau);
  margin: 8px 0 0;
}

.jk-caption a { 
  color: var(--jim-lila); 
  text-decoration: none; 
}
.jk-caption a:hover { 
  color: var(--jim-lila); 
  text-decoration: underline; 
}

/* ── Detailbereich ────────────────────────────────────────────── */



.jk-detail {
  padding: 25px;
  background-color: #fff;
  margin-top: 25px;
}



.jk-detail.is-active {
  animation: jk-slide-in 0.25s ease;
}

@keyframes jk-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jk-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  padding: 0;
}

.jk-detail-title {
  grid-column: 1 / -1;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  margin-bottom: 5px;

}

.jk-detail-title a { color: inherit; text-decoration: inherit; }

.jk-detail-left  { grid-column: 1; }
.jk-detail-right { grid-column: 2; }

.jk-detail-inner.has-photo {
  grid-template-columns: 1fr 1fr auto;
}

.jk-detail-photo {
  	grid-column: 3;
  	grid-row: 2;
  	align-self: start;
	margin-top: 20px;
}

.jk-detail-photo img {
  width: clamp(180px, 34vw, 360px);
  height: auto;
  display: block;
  border-radius: 2px;
}

h3.jk-detail-section-title {
  text-transform: none;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 15px 0 5px 0;
  color: var(--jim-grau);
}
.jk-detail-times {
	margin-bottom: 0;
}
.jk-detail-times div { 
  	line-height: 1.5; 
}

.jk-detail-room {
  color: var(--jim-grau);
  font-style: italic;
  margin-bottom: 8px;
}

.jk-detail-address { 
  font-size: 1rem;
  color: var(--jim-grau); }

.jk-detail-nav {
  color: var(--jim-lila);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
}

.jk-detail-nav:hover { 
  text-decoration: underline; 
  color: var(--jim-grau);
}

.jk-detail-notes {
  color: var(--jim-grau);
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.jk-detail-sports {
  color: var(--jim-grau);
  margin-top: 12px;
  line-height: 1.5;
}

.jk-detail-access ul { margin: 0; padding: 0; }
.jk-detail-access li { list-style: none; line-height: 1.5; }

.jk-detail-ansprechperson {
  color: var(--jim-grau);
  line-height: 1.5;
}

.jk-detail-website {
  margin-top: 25px;
}

.jk-detail-website a {
  color: var(--jim-lila);
  font-weight: 700;
  text-decoration: none;
  
}
.jk-detail-website a:hover {
  color: var(--jim-grau);
  text-decoration: underline;
}

.jk-detail-extra { grid-column: 1 / -1; margin-top: 12px; color: var(--jim-grau); }

.jk-detail-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px 0 4px;
}

.jk-detail-more a {
  color: var(--jim-lila);
  font-weight: 700;
  text-decoration: none;
}

.jk-detail-more a:hover { text-decoration: underline; }

.jk-detail-more-arrow {
  display: block;
  font-size: 1.4rem;
  color: var(--jim-lila);
  line-height: 1;
  margin-top: 2px;
}

/* ── Wegbeschreibung ──────────────────────────────────────────── */

.jk-detail-directions {
  grid-column: 1 / -1;
  padding-top: 10px;
}

.jk-dir-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--jim-lila);
  margin: 0 auto;
}

.jk-dir-toggle:hover,
.jk-dir-toggle:focus,
.jk-dir-toggle:focus-visible,
.jk-dir-toggle:active,
.jk-dir-toggle[aria-expanded="true"] {
  color: var(--jim-grau);
  background: none;
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

.jk-dir-toggle-label {
  font-weight: 700;
  font-size: 1rem;
}

.jk-dir-toggle svg {
  height: 20px;
  width: auto;
  transition: transform 0.25s ease;
}

.jk-dir-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.jk-dir-content {
  display: none;
  margin-top: 12px;
}

.jk-dir-toggle[aria-expanded="true"] + .jk-dir-content {
  display: block;
}

.jk-dir-steps {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
}

.jk-dir-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(90px, 15vw, 145px);
}

.jk-dir-circle {
  width:  clamp(90px, 15vw, 145px);
  height: clamp(90px, 15vw, 145px);
  border-radius: 50%;
  border: 4px solid var(--jim-lila);
  overflow: hidden;
  background: #f0f0f0;
  flex-shrink: 0;
}

.jk-dir-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jk-dir-label {
  font-size: 0.8rem;
  text-align: center;
  margin-top: 8px;
  color: var(--jim-grau);
  line-height: 1.4;
  max-width: clamp(70px, 14vw, 120px);
}

.jk-dir-arrow {
  align-self: flex-start;
  margin-top: calc((clamp(90px, 15vw, 145px) - clamp(15px, 2.7vw, 24px)) / 2);
  padding: 0 4px;
  color: var(--jim-lila);
  flex-shrink: 0;
}

.jk-dir-arrow svg {
  display: block;
  height: clamp(15px, 2.7vw, 24px);
  width: auto;
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 680px) {
  .jk-map-wrap { height: 55vw; }

  .jk-detail-inner,
  .jk-detail-inner.has-photo {
    grid-template-columns: 1fr;
  }

  .jk-detail-right,
  .jk-detail-photo {
    grid-column: 1;
    grid-row: auto;
  }

  .jk-detail-photo { margin-top: 16px; }

  .jk-detail-photo img { width: 100%; }
}