/* Radkarte-Seite: Übergeordnete Container dürfen Breakout + position:sticky nicht blockieren.
   .main-wrap hat Tailwind overflow-hidden → killt position:sticky für alle Descendants.
   overflow-x: visible allein erzwingt per CSS-Spec overflow-y: auto → sticky bricht ebenfalls. */
body.radkarte-page .main-wrap,
body.radkarte-page .site,
body.radkarte-page main,
body.radkarte-page .site-main,
body.radkarte-page .content-area,
body.radkarte-page .entry-content,
body.radkarte-page .post-content,
body.radkarte-page .wp-block-post-content {
  overflow-x: visible;
  overflow-y: visible;
}

/* Full-width: aus Theme-Content ausbrechen */
.radkarte-full-width-wrap {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  flex: 0 0 100vw;
}

body.radkarte-page .radkarte-full-width-wrap {
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Mobile: Karte oben sticky, Routen darunter ──────────────────────────── */
.radkarte-sticky-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "map"
    "routes";
  align-items: start;
}

.radkarte-map-col {
  grid-area: map;
  position: sticky;
  top: 0;
  height: 38vh;
  min-height: 260px;
  z-index: 1;
  box-shadow: 0 6px 10px -4px rgba(15, 63, 140, 0.18);
}

.radkarte-routes-col {
  grid-area: routes;
  min-width: 0;
}

.radkarte-map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
}

#radkarte-map {
  width: 100%;
  height: 100%;
}

/* ─── Desktop: 2 Spalten, Routen links, Karte rechts sticky ───────────────── */
@media (min-width: 1024px) {
  .radkarte-sticky-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    grid-template-areas: "routes map";
  }

  .radkarte-map-col {
    height: 100vh;
    min-height: 560px;
    box-shadow: none;
  }

  .radkarte-routes-col {
    min-height: auto;
  }
}

/* POI-Toggle (Filter) */
.poi-toggle {
  cursor: pointer;
  padding: 5px 13px;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-family: inherit;
  font-weight: 400;
  border-radius: 4px;
  border: 1px solid rgba(30, 53, 114, 0.25);
  background: transparent;
  color: rgba(30, 53, 114, 0.55);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  letter-spacing: 0.01em;
}
.poi-toggle:hover:not(.active) {
  background: rgba(30, 53, 114, 0.07);
  border-color: rgba(30, 53, 114, 0.45);
  color: #1e3572;
}
.poi-toggle.active {
  background: #1e3572;
  border-color: #1e3572;
  color: #fff;
}

/* Accordion-Header: einzeiliges Layout statt Theme-Wrap */
.radkarte-accordion-title {
  flex-wrap: nowrap;
  gap: 0;
  /* Pfeil ist in-flow → kein großes pr-16 nötig */
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .radkarte-accordion-title {
    padding-right: 1.75rem;
  }
}

/* Pfeil als normales Flex-Item – kein absolutes Positioning */
.radkarte-accordion-title .arrow {
  position: static;
  top: auto;
  transform: none;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Führendes | auf der Info-Zeile ausblenden */
.radkarte-route-info .divider:first-child {
  display: none;
}

.radkarte-route-num {
  flex-shrink: 0;
  width: 95px;
  color: #0F3F8C;
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.radkarte-route-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;
  color: #0F3F8C;
  font-size: 0.8125rem;
  font-weight: 400;
  gap: 0;
}

@media (min-width: 1024px) {
  .radkarte-route-num {
    width: 145px;
    font-size: 1.25rem;
  }
  .radkarte-route-meta {
    font-size: 1.125rem;
  }
}

.radkarte-route-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.radkarte-route-info {
  display: block;
  opacity: 0.8;
}

.radkarte-route-meta .divider {
  margin: 0 0.6rem;
  opacity: 0.35;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .radkarte-route-info {
    display: block;
  }
}

/* Accordion: Content-Bereich des Radkarte-Detail nicht durch Theme-Klassen einengen */
.radkarte-accordion-body {
  padding: 0;
}

/* Route-Detail: einspaltig, alles vertikal gestackt (Video → Tourenprofil → Meta) */
.radkarte-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
}
@media (min-width: 768px) {
  .radkarte-detail-grid {
    padding: 2rem 0;
  }
}

.radkarte-detail-cell {
  min-width: 0;
}

/* Video-Container: 16:9 Aspect-Ratio, Vimeo-Iframe absolut positionieren */
.radkarte-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #262626;
  overflow: hidden;
}
.radkarte-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Vimeo Consent-Placeholder */
.radkarte-vimeo-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem 2rem;
  gap: 1rem;
}
.radkarte-vimeo-consent p {
  margin: 0;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 40ch;
}
.radkarte-vimeo-consent-btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.radkarte-vimeo-consent-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Route-Beschreibung */
.radkarte-route-description {
  margin-top: 1rem;
  color: #525252;
  font-size: 0.875rem;
  line-height: 1.6;
}
.radkarte-route-description p:first-child {
  margin-top: 0;
}

/* Tourenprofil */
.radkarte-section-label {
  color: #A47864;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
}

.radkarte-elevation-wrap {
  width: 100%;
}
.radkarte-elevation-chart {
  width: 100%;
}
.radkarte-elevation-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Meta-Row: GPX-Button + Streckenlänge/Höhenmeter */
.radkarte-route-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.75rem;
}

.radkarte-meta-gpx {
  flex-shrink: 0;
  padding-right: 2.5rem;
}

.radkarte-meta-data {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #0F3F8C;
}

.radkarte-meta-item {
  display: flex;
  gap: 1.5rem;
}

.radkarte-meta-label {
  font-weight: 500;
  width: 7rem;
}

/* GPX-Button */
.radkarte-gpx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0F3F8C;
  border: 1px solid #0F3F8C;
  background: transparent;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.radkarte-gpx-btn:hover:not(.is-disabled) {
  background: #0F3F8C;
  color: #fff;
}
.radkarte-gpx-btn.is-disabled {
  color: #a3a3a3;
  border-color: #d4d4d4;
  cursor: not-allowed;
}

/* POI-Marker auf der Karte */
.radkarte-poi-marker {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.radkarte-poi-marker .radkarte-poi-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sprungmarken-Popup auf Karte */
.mapboxgl-popup-content {
  padding: 4px 10px !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(15,63,140,0.2) !important;
}

/* ── Alle Routen anzeigen Button ──────────────────────────────────────────── */
.radkarte-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 20px 30px 0;
}

@media (min-width: 768px) {
  .radkarte-toolbar {
    padding-right: 40px;
  }
}

@media (min-width: 1024px) {
  .radkarte-toolbar {
    padding-right: 0;
  }
}

.radkarte-show-all-btn {
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #8B6D55);
  background: transparent;
  border: 1px solid currentColor;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.radkarte-show-all-btn:hover {
  background: var(--color-primary, #8B6D55);
  color: #fff;
}