/* Vorlesefestival-Karte – alle Regeln gelten nur innerhalb von .vf-karte */

.vf-karte {
  --vfk-land: #c4e0d2;          /* --vf-s5 */
  --vfk-land-linie: #ffffff;
  --vfk-land-hover: #b1d5c3;
  --vfk-land-dim: #e3efe7;      /* --vf-s5-hell, etwas heller */
  --vfk-ink: #1a3056;           /* --textcolor */
  --vfk-muted: #647697;         /* --textcolor-medium-soft */
  --vfk-linie: rgba(26, 48, 86, 0.2);
  --vfk-rot: #ff2f23;           /* --main-color */
  --vfk-scheibe: #f04b38;       /* Rot des Monster-Stickers: Punkte ohne Namen */
  --vfk-scheibe-rand: #ffffff;
  --vfk-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  background: #ffffff;
  color: var(--vfk-ink);
  font-family: var(--vfk-font);
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-weight: 300;
}

/* Fester Aufbau: Text oben links, darunter die Liste einer gewählten Region, rechts die Karte. Nichts verschiebt sich. */
.vf-karte .vfk-wrapper {
  width: min(90vw, 1000px);
  margin-inline: auto;
  padding-block: 4rem;
  display: grid;
  gap: 32px 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text map" "side map" "quelle quelle";
  grid-template-rows: auto 1fr auto;
  align-items: start;
}
.vf-karte .vfk-text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.vf-karte .vfk-mapcol { grid-area: map; min-width: 0; display: flex; justify-content: center; }
.vf-karte .vfk-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 20px; border-top: 1px solid var(--vfk-linie); }
.vf-karte.kompakt .vfk-side { display: none; }
.vf-karte .vfk-quelle { grid-area: quelle; margin: 0; font-size: 13px; line-height: 1.4; color: var(--vfk-muted); font-weight: 400; }
.vf-karte .vfk-quelle a { color: inherit; }

.vf-karte .vfk-eyebrow { margin: 0 0 0.25em; color: var(--vfk-rot); font-size: 1.2rem; line-height: 1.7rem; font-weight: 700; }
.vf-karte .vfk-titel { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--vfk-ink); }
.vf-karte .vfk-fakten { margin: 1.25rem 0 0; max-width: 36ch; }
.vf-karte .vfk-fakten strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.vf-karte .vfk-flaggen { display: inline-flex; gap: 6px; vertical-align: -1px; margin-left: 2px; }
.vf-karte .vfk-flagge { display: block; border-radius: 2px; box-shadow: 0 0 0 1px var(--vfk-linie); }

.vf-karte .vfk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
.vf-karte .vfk-filter button {
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--vfk-ink);
  background: #ffffff; border: 1px solid var(--vfk-linie); border-radius: 25px; padding: 6px 16px; cursor: pointer;
}
.vf-karte .vfk-filter button b { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--vfk-muted); }
.vf-karte .vfk-filter button:hover { border-color: var(--vfk-ink); }
.vf-karte .vfk-filter button[aria-pressed="true"] { background: var(--vfk-ink); border-color: var(--vfk-ink); color: #ffffff; }
.vf-karte .vfk-filter button[aria-pressed="true"] b { color: rgba(255, 255, 255, 0.75); }

.vf-karte .vfk-legende { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; line-height: 1.45; color: var(--vfk-muted); font-weight: 400; }
.vf-karte .vfk-legende span { display: inline-flex; align-items: center; gap: 8px; }
.vf-karte .vfk-lg-sticker { flex: none; width: 24px; height: 24px; filter: drop-shadow(0 1px 1.5px rgba(26, 48, 86, 0.3)); }
.vf-karte .vfk-lg-scheibe { flex: none; width: 10px; height: 10px; margin-inline: 7px; border-radius: 50%; background: var(--vfk-scheibe); box-shadow: 0 0 0 1.5px var(--vfk-scheibe-rand); }

/* ── Karte ── */
.vf-karte .vfk-map { position: relative; width: 100%; max-width: 440px; }
.vf-karte .vfk-map svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 16px; }
.vf-karte .vfk-map svg.verschiebbar { cursor: grab; }
.vf-karte .vfk-map svg.verschiebbar:active { cursor: grabbing; }
.vf-karte .vfk-state { fill: var(--vfk-land); stroke: var(--vfk-land-linie); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill 150ms ease; }
.vf-karte .vfk-state:hover { fill: var(--vfk-land-hover); }
.vf-karte .vfk-state.dim { fill: var(--vfk-land-dim); }
.vf-karte .vfk-marks { transition: opacity 200ms ease; }
.vf-karte .vfk-m { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 120ms ease; }
.vf-karte .vfk-m:focus { outline: none; }
.vf-karte .vfk-m:hover, .vf-karte .vfk-m.is-active, .vf-karte .vfk-m:focus-visible { transform: scale(1.2); }
.vf-karte .vfk-m:focus-visible use { filter: drop-shadow(0 0 3px var(--vfk-ink)); }
.vf-karte .vfk-m use { filter: drop-shadow(0 1px 1.5px rgba(26, 48, 86, 0.35)); }
.vf-karte .vfk-m .hit { fill: transparent; }
.vf-karte .vfk-plakette { pointer-events: none; }
/* Gewählte Region: Sticker und Punkte der übrigen Regionen bleiben blass sichtbar */
.vf-karte .vfk-m.aussen { opacity: 0.7; }
.vf-karte .vfk-m.aussen:hover { opacity: 1; }
.vf-karte .vfk-schein circle.aussen { opacity: 0.7; }
.vf-karte .vfk-plakette circle { fill: var(--vfk-ink); stroke: #ffffff; }
.vf-karte .vfk-plakette text { fill: #ffffff; font-family: var(--vfk-font); font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.vf-karte .vfk-zahlen, .vf-karte .vfk-schein { pointer-events: none; }
.vf-karte .vfk-schein circle { fill: var(--vfk-scheibe); stroke: var(--vfk-scheibe-rand); }
.vf-karte .vfk-zahlen text { fill: var(--vfk-ink); font-family: var(--vfk-font); font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.vf-karte .vfk-zahlen text.gedimmt { opacity: 0.4; }

.vf-karte .vfk-gesamt {
  position: absolute; top: 12px; left: 12px; z-index: 1; min-height: 40px;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--vfk-ink);
  background: #ffffff; border: 1px solid var(--vfk-linie); border-radius: 25px; padding: 0 16px; cursor: pointer;
}
.vf-karte .vfk-gesamt:hover { border-color: var(--vfk-ink); }
.vf-karte .vfk-rad-hinweis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  background: var(--vfk-ink); color: #ffffff; padding: 8px 14px; border-radius: 8px; font-size: 16px; font-weight: 400; white-space: nowrap;
}
.vf-karte .vfk-tip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 14px));
  background: var(--vfk-ink); color: #ffffff; padding: 6px 12px; border-radius: 8px;
  font-size: 16px; line-height: 1.35; font-weight: 400; white-space: nowrap; pointer-events: none;
}
.vf-karte .vfk-tip.left { transform: translate(-12px, calc(-100% - 14px)); }
.vf-karte .vfk-tip.right { transform: translate(calc(-100% + 12px), calc(-100% - 14px)); }
.vf-karte .vfk-tip strong { font-weight: 600; }

/* ── Liste einer gewählten Region ── */
.vf-karte .vfk-liste { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vf-karte .vfk-liste h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--vfk-ink); }
.vf-karte .vfk-fuss { margin: 0; color: var(--vfk-muted); font-size: 16px; line-height: 1.45; font-weight: 400; }
.vf-karte .vfk-fuss:empty { display: none; }
.vf-karte .vfk-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 320px; overflow-y: auto; padding: 3px; margin: -3px; }
.vf-karte .vfk-chip {
  font: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--vfk-ink);
  background: #ffffff; border: 1px solid var(--vfk-linie); border-radius: 25px; padding: 6px 16px; cursor: pointer;
}
.vf-karte .vfk-chip:hover, .vf-karte .vfk-chip.is-active { border-color: var(--vfk-rot); color: var(--vfk-rot); }

.vf-karte button:focus-visible { outline: 2px solid var(--vfk-rot); outline-offset: 2px; }
.vf-karte .vfk-fehler { margin: 1rem 0 0; font-size: 16px; color: var(--vfk-muted); }

@media (prefers-reduced-motion: reduce) {
  .vf-karte .vfk-marks, .vf-karte .vfk-m, .vf-karte .vfk-state { transition: none; }
}

/* ── Schmal: alles untereinander, Liste direkt unter der Karte, Infos zum Sticker fest unter der Karte ── */
@media (max-width: 820px) {
  .vf-karte .vfk-wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "map" "side" "quelle"; grid-template-rows: auto; gap: 24px; padding-block: 3rem; }
  .vf-karte .vfk-map { max-width: none; display: flex; flex-direction: column; }
  .vf-karte .vfk-tipslot { order: 2; display: grid; place-items: center; min-height: 56px; margin-top: 8px; text-align: center; }
  .vf-karte .vfk-tipslot:has(.vfk-tip[hidden])::before { content: "Monster antippen für Name und Ort"; color: var(--vfk-muted); font-size: 16px; font-weight: 400; }
  .vf-karte .vfk-tip, .vf-karte .vfk-tip.left, .vf-karte .vfk-tip.right { position: static; transform: none; white-space: normal; }
  .vf-karte .vfk-chips { max-height: none; overflow: visible; }
}
/* ── Im Modal der Vorlesefestival-Seite (modals/festival-karte.php) ── */
div.tf-modal.festival-karte > .wrapper { max-width: 1040px; }
div.tf-modal.festival-karte > .wrapper > .close { background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; }
.vf-karte.im-modal { background: transparent; }
.vf-karte.im-modal .vfk-wrapper {
  width: 100%; padding-block: 0.25rem 0; gap: 24px 48px;
  grid-template-areas: "text map" "side map" "cta map" "quelle quelle";
  grid-template-rows: auto auto 1fr auto;
}
.vf-karte.im-modal .vfk-mapcol { padding-top: 36px; }   /* Platz für das Schließen-Kreuz */
.vf-karte.im-modal .vfk-titel { font-size: 28px; line-height: 34px; }
.vf-karte.im-modal .vfk-quelle { font-size: 11px; line-height: 1.4; color: rgba(100, 118, 151, 0.65); }
.vf-karte.im-modal .vfk-quelle a { text-decoration: none; }
.vf-karte.im-modal .vfk-quelle a:hover { text-decoration: underline; }
.vf-karte .vfk-cta { grid-area: cta; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--vfk-linie); }
.vf-karte .vfk-cta p { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 400; }
.vf-karte .vfk-bestellen {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1; color: #ffffff;
  background: var(--vfk-ink); border: 0; border-radius: 25px; cursor: pointer;
}
.vf-karte .vfk-bestellen:hover { background: #24406f; }
.vf-karte .vfk-bestellen svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 820px) {
  .vf-karte.im-modal .vfk-wrapper { grid-template-areas: "text" "map" "side" "cta" "quelle"; grid-template-rows: auto; }
  .vf-karte.im-modal .vfk-text { padding-right: 48px; }
  .vf-karte.im-modal .vfk-mapcol { padding-top: 0; }
  .vf-karte.im-modal .vfk-titel { font-size: 24px; line-height: 30px; }
}

@media (pointer: coarse), (max-width: 820px) {
  .vf-karte .vfk-chip, .vf-karte .vfk-gesamt, .vf-karte .vfk-filter button { min-height: 44px; }
}