/* Interaktive Preiskarte — amtliche Baugrundpreise je Gemeinde.
   Wird von index.html und von den Ratgeberseiten geladen.
   Farben und Abstände folgen der CE-Vorgabe (Navy #1b1c40 / Sand #b99552).
   Die Datei kommt ohne eigene :root-Werte aus, wo die Seite sie schon setzt —
   die Ratgeberseiten bringen dieselben Variablen mit. */

.pk {
  --pk1: #ecebf4;
  --pk2: #d2d2e6;
  --pk3: #b1b2d0;
  --pk4: #8688b0;
  --pk5: #5b5d8e;
  --pk6: #2b2d5f;
  --pk-leer: #e9e7e0;
}

.pk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.6rem;
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .pk-layout { grid-template-columns: 1fr; }
}

/* ---------- Karte ---------- */
.pk-buehne {
  background: var(--sand, #f6f2ea);
  border: 1px solid var(--line, #E4E0D6);
  border-radius: 14px;
  padding: 1rem 1rem 0.7rem;
}
/* Die Karten sind hochformatig (Linz 1 : 1,54). Ohne die zweite Schranke füllt
   das SVG die Spaltenbreite und wird auf einem breiten Bildschirm über 1.100 px
   hoch; mit nur `max-height` bliebe links und rechts ein leerer Streifen.
   `--pk-seiten` (Breite ÷ Höhe) setzt preiskarte.js aus der Kartendatei. */
.pk-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  max-width: calc(78vh * var(--pk-seiten, 1));
  margin: 0 auto;
  overflow: visible;
}
/* Füllfarben als Klassen, nicht als fill-Attribut: ein `fill="var(--pk3)"`
   im Attribut wird von den Browsern nicht aufgelöst, eine Klasse schon. */
.pk .pk-k0 { fill: var(--pk-leer); }
.pk .pk-k1 { fill: var(--pk1); }
.pk .pk-k2 { fill: var(--pk2); }
.pk .pk-k3 { fill: var(--pk3); }
.pk .pk-k4 { fill: var(--pk4); }
.pk .pk-k5 { fill: var(--pk5); }
.pk .pk-k6 { fill: var(--pk6); }

.pk-svg path.pk-gem {
  stroke: #ffffff;
  stroke-width: 1.1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.25s ease;
}
.pk-svg path.pk-gem:hover { stroke: var(--navy-dark, #131331); stroke-width: 2.2; }
.pk-svg path.pk-gem:focus-visible { outline: none; stroke: var(--accent, #b99552); stroke-width: 3; }
.pk-svg path.pk-gem.pk-aktiv { stroke: var(--accent, #b99552); stroke-width: 3; }
.pk-svg path.pk-stadt { stroke-width: 2; }
/* Schriftgrößen in viewBox-Einheiten: Die Karte ist 1000 Einheiten breit und
   wird mit rund 450–600 px dargestellt — 15 Einheiten wären auf dem Schirm
   knapp 7 px und damit unlesbar. 26 Einheiten ergeben rund 12 px. */
.pk-svg text.pk-label {
  font-size: 30px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-width: 5px;
  fill: #26283f;
}
.pk-svg text.pk-label.pk-hell { fill: #ffffff; stroke: rgba(19, 19, 49, 0.6); }
.pk-svg text.pk-label-stadt { font-size: 44px; font-weight: 800; }

/* ---------- Jahresregler ---------- */
.pk-jahr {
  display: flex; align-items: center; gap: 0.8rem;
  margin: 0 0 0.9rem; flex-wrap: wrap;
}
.pk-jahr-wert {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem; font-weight: 800; color: var(--navy-dark, #131331);
  font-variant-numeric: tabular-nums; min-width: 3.6ch;
}
.pk-jahr input[type="range"] {
  flex: 1 1 180px; min-width: 140px; accent-color: var(--accent, #b99552);
  height: 22px; cursor: pointer;
}
.pk-abspielen {
  background: var(--navy, #1b1c40); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 700;
  padding: 0.5rem 0.9rem; border-radius: 8px;
}
.pk-abspielen:hover { background: var(--navy-mid, #34366b); }

/* ---------- Legende ---------- */
.pk-legende {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem;
  margin-top: 0.7rem; font-size: 0.75rem; color: var(--gray, #5E6B72);
}
.pk-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pk-legende i {
  width: 15px; height: 11px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

/* ---------- Infotafel ---------- */
.pk-info {
  background: #fff; border: 1px solid var(--line, #E4E0D6);
  border-radius: 14px; padding: 1.3rem 1.3rem 1.4rem;
  position: sticky; top: 84px;
}
@media (max-width: 900px) { .pk-info { position: static; } }
.pk-info h3 {
  font-family: var(--font-display, inherit); font-size: 1.3rem;
  color: var(--navy-dark, #131331); margin-bottom: 0.1rem;
}
.pk-bezirk { font-size: 0.78rem; color: var(--gray, #5E6B72); }
.pk-preis {
  font-size: 2.15rem; font-weight: 800; color: var(--navy-dark, #131331);
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 0.7rem;
}
.pk-preis small { font-size: 0.95rem; font-weight: 600; color: var(--gray, #5E6B72); }
.pk-delta { font-size: 0.88rem; margin-top: 0.15rem; font-weight: 600; }
.pk-delta.plus { color: #1f6b45; }
.pk-delta.minus { color: #92352E; }
.pk-spark { margin: 0.9rem 0 0.2rem; }
.pk-spark svg { display: block; width: 100%; height: 62px; overflow: visible; }
.pk-spark-achse { font-size: 9px; fill: #8b93a0; }
.pk-vergleich {
  list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--line, #E4E0D6); font-size: 0.85rem;
}
.pk-vergleich li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.22rem 0; }
.pk-vergleich span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.pk-info .btn-primary { margin-top: 1.1rem; display: block; text-align: center; font-size: 0.98rem; }
.pk-hinweis { font-size: 0.75rem; color: var(--gray, #5E6B72); margin-top: 0.7rem; line-height: 1.5; }

.pk-auswahl { margin-bottom: 1rem; }
.pk-auswahl label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; color: var(--navy-dark, #131331); }
.pk-auswahl select {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit; font-size: 0.95rem;
  border: 1.5px solid var(--line, #E4E0D6); border-radius: 9px; background: #fff;
}

.pk-fehler {
  background: #FFF4D6; border-radius: 10px; padding: 1rem 1.1rem;
  font-size: 0.9rem; line-height: 1.55;
}