/* Stadtkarte Wuppertal (stadtkarte.js, 04.11.2026): echte Bezirksgrenzen (OpenStreetMap), Schwebebahn fährt mit.
   Dunkler Petrol-Grund, aktiver Bezirk leuchtet, rechts/unten die Bezirkskarte. */
.vbk {
  --k-bg1: #05343d;
  --k-bg2: #0a5562;
  --k-fill: rgba(255, 255, 255, 0.07);
  --k-line: rgba(255, 255, 255, 0.32);
  --k-hover: rgba(255, 255, 255, 0.16);
  --k-on: #0aa1b6;
  --k-gold: #E8A020;
  position: relative;
  margin: clamp(40px, 6vw, 80px) auto 0;
  max-width: 1240px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  font-family: Raleway, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(10, 161, 182, 0.35) 0%, rgba(10, 161, 182, 0) 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(232, 160, 32, 0.14) 0%, rgba(232, 160, 32, 0) 60%),
    linear-gradient(160deg, var(--k-bg2), var(--k-bg1));
  box-shadow: 0 30px 60px -30px rgba(0, 50, 60, 0.55);
}
.vbk-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); grid-template-areas: 'kopf map' 'info map'; column-gap: clamp(20px, 3vw, 48px); row-gap: 8px; padding: clamp(28px, 4vw, 56px); align-items: end; }
.vbk-kopf { grid-area: kopf; }
.vbk-info { grid-area: info; align-self: start; }
.vbk-map { grid-area: map; align-self: center; }

.vbk-eye { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-gold); }
.vbk-eye::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.vbk h2.vbk-h { margin: 10px 0 12px; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.vbk-h em { font-style: normal; color: var(--k-gold); }
.vbk-lead { margin: 0 0 22px; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.6; color: rgba(255, 255, 255, 0.82); font-weight: 500; }

/* Bezirkskarte */
.vbk-info { position: relative; border-radius: 20px; padding: 22px 22px 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-height: 248px; }
.vbk-info-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vbk-nr { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.vbk-badge { padding: 4px 10px; border-radius: 999px; background: var(--k-gold); color: #fff; font-size: 0.72rem; font-weight: 800; }
.vbk-badge[hidden] { display: none; }
.vbk-name { margin: 8px 0 4px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; line-height: 1.15; }
.vbk-text { margin: 0 0 12px; font-size: 0.98rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); font-weight: 500; }
.vbk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.vbk-tags li { margin: 0; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.8rem; font-weight: 700; color: #fff; }
.vbk-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.vbk .vbk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 800; text-decoration: none !important; transition: transform 0.2s ease, background-color 0.2s ease; }
.vbk .vbk-btn.o { background: var(--k-gold); color: #fff !important; }
.vbk .vbk-btn.g { background: rgba(255, 255, 255, 0.12); color: #fff !important; }
.vbk .vbk-btn:hover { transform: translateY(-2px); }
.vbk .vbk-btn.g:hover { background: rgba(255, 255, 255, 0.2); }
/* Wechsel: Inhalt kurz ausblenden und hochschieben */
.vbk-swap { transition: opacity 0.28s ease, transform 0.28s ease; }
.vbk-info.is-wechsel .vbk-swap { opacity: 0; transform: translateY(8px); }

/* Karte */
.vbk-map { position: relative; }
.vbk-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.vbk-bez { cursor: pointer; outline: none; }
.vbk-bez path { fill: var(--k-fill); stroke: var(--k-line); stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.35s ease, stroke 0.35s ease; }
.vbk-bez:hover path, .vbk-bez:focus-visible path { fill: var(--k-hover); }
.vbk-bez.is-on path { fill: var(--k-on); stroke: #fff; stroke-width: 2.2; }
.vbk-bez.is-on { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35)); }
.vbk-lbl { font-size: 17px; font-weight: 800; fill: rgba(255, 255, 255, 0.72); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(5, 52, 61, 0.55); stroke-width: 3px; transition: fill 0.3s ease; }
.vbk-lbl.is-on { fill: #fff; }
.vbk-lbl.klein { font-size: 14px; }
/* Schwebebahn */
.vbk-gleis { fill: none; stroke: var(--k-gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; pointer-events: none; }
.vbk-gleis-glow { fill: none; stroke: var(--k-gold); stroke-width: 12; opacity: 0.16; stroke-linecap: round; pointer-events: none; }
.vbk-zug { pointer-events: none; }
.vbk-zug rect { fill: #fff; }
.vbk-zug .f { fill: var(--k-bg1); }
.vbk-legende { position: absolute; left: 4%; bottom: 2%; display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.vbk-legende i { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--k-gold); }
.vbk-pin { pointer-events: none; }
.vbk-pin circle.p { fill: var(--k-gold); }
.vbk-pin circle.r { fill: none; stroke: var(--k-gold); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: vbk-puls 2.4s ease-out infinite; }
@keyframes vbk-puls { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }

/* Bezirks-Chips (Links für alle, auch ohne Karte) */
.vbk-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 clamp(28px, 4vw, 56px) clamp(26px, 3.5vw, 44px); margin: 0; }
.vbk .vbk-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.88) !important; font-size: 0.85rem; font-weight: 700; text-decoration: none !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.vbk .vbk-chip:hover { background: rgba(255, 255, 255, 0.12); }
.vbk .vbk-chip.is-on { background: #fff; border-color: #fff; color: #05343d !important; }

@media (max-width: 900px) {
  .vbk { border-radius: 0; margin-top: 40px; }
  .vbk-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'kopf' 'map' 'info'; row-gap: 14px; }
  .vbk-map { margin: 0 -8px; }
  .vbk-lbl { display: none; }
  .vbk-lbl.is-on { display: block; font-size: 30px; }
  .vbk-info { min-height: 0; }
  .vbk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 28px; }
  .vbk-chips::-webkit-scrollbar { display: none; }
  .vbk .vbk-chip { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vbk-swap, .vbk-bez path { transition: none; }
  .vbk-pin circle.r { animation: none; }
}

/* Theme-Absätze und Pfeil im Knopf bändigen */
.vbk p.vbk-name { margin: 8px 0 6px; }
.vbk p.vbk-text { margin: 0 0 14px; }
.vbk p.vbk-lead { margin: 0 0 22px; }
.vbk .vbk-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vbk .vbk-btn { white-space: nowrap; line-height: 1.2; }
@media (max-width: 900px) { .vbk p.vbk-lead { margin-bottom: 0; } }