/* ══════════════════════════════════════════════════════════════════════
   gemeindekarte.css — Darstellung der Balearen-Gemeindekarte
   Angelegt 09.08.2026

   Gehoert zu gemeindekarte.js. Beide zusammen ersetzen den Kartencode,
   der bis dahin auf vier Modulseiten getrennt gepflegt wurde:
   market-snapshot, market-pulse, housing-context, monatlicher-marktbericht.

   WARUM DIESE DATEI EXISTIERT
   Jede Aenderung an der Karte musste viermal gemacht werden. Zweimal ist
   dabei eine Seite vergessen worden: Auf dem Marktbericht fehlten das
   graue Legendenfeld und der Hinweis unter der Karte, sodass Gemeinden
   ohne Angabe dort unerklaert blass blieben.

   UEBERNOMMEN, NICHT NEU ENTWORFEN
   Alle Werte stammen unveraendert aus dem Stand vom 09.08.2026. Ausgelassen
   wurden nur zwei aeltere Popup-Fassungen, die im Quelltext lagen, aber von
   keiner Seite mehr benutzt wurden (.rp-grid, .rp-k, .rp-v, .rp-sub).

   HOEHE
   Die vier Seiten hatten unterschiedlich hohe Karten. Das bleibt so. Die
   Seite setzt ihre Hoehe ueber --karten-hoehe; ohne Angabe gelten 520px.

       <div class="regadi-karte" data-kpi="bev" style="--karten-hoehe:560px"></div>

   Auf schmalen Schirmen gilt einheitlich 420px.
   ══════════════════════════════════════════════════════════════════════ */


/* ── Container ──────────────────────────────────────────────────────── */

/* isolation und z-index:0 sperren Leaflets interne Ebenenwerte in diesen
   Behaelter ein. Leaflet vergibt seinen Karten- und Steuerungsebenen Werte
   ab 400, waehrend der Seitenkopf bei 100 liegt - ohne eigenen Stapelbereich
   schiebt sich die Karte darueber, sobald man scrollt. */
.regadi-karte {
  height: var(--karten-hoehe, 520px);
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

@media (max-width: 980px) {
  .regadi-karte { height: 420px; }
}


/* ── Leaflet-Bedienelemente ─────────────────────────────────────────── */

.leaflet-bar a,
.leaflet-bar a:hover {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
.leaflet-bar a:hover { background: var(--paper-warm); border-color: var(--sand); }
.leaflet-bar { box-shadow: 0 2px 8px rgba(28,42,56,.12); border: none; }

.leaflet-control-attribution {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  color: var(--grey) !important;
  background: rgba(255,255,255,.82) !important;
}


/* ── Legende (unten links in der Karte) ─────────────────────────────── */

.regadi-legend {
  background: #fff;
  border-radius: 8px;
  padding: 10px 13px;
  box-shadow: 0 2px 10px rgba(28,42,56,.14);
  font-family: 'Outfit', sans-serif;
  min-width: 130px;
}
.regadi-legend .rl-title {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  /* Sand als Text erreicht nur 3,09:1. --sand-text ist der dunklere
     Ton derselben Familie, 5,20:1 auf Weiss. */
  color: var(--sand-text, #84683e); font-weight: 600; margin-bottom: 7px;
}
.regadi-legend .rl-steps { display: flex; gap: 2px; }
.regadi-legend .rl-s { flex: 1; height: 10px; border-radius: 2px; }
.regadi-legend .rl-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--grey); margin-top: 4px;
}


/* ── Hinweis unter der Karte ────────────────────────────────────────────
   Nennt, wie viele Gemeinden eine Zahl haben. Ohne ihn sehen die blassen
   Flaechen wie ein Fehler aus. Erscheint nur, wenn Angaben fehlen. */

.regadi-abdeckung {
  font-size: 12px;
  color: var(--grey);
  margin-top: 10px;
  line-height: 1.6;
  /* Mittig wie die Zeilen darueber und darunter. Linksbuendig war sie
     der einzige Ausreisser und liess den Block unaufgeraeumt wirken. */
  text-align: center;
}


/* ── Gemeinde-Tooltip ───────────────────────────────────────────────────
   Eine Leitzahl statt fuenf Feldern, dazu Einordnung und Erklaerung.
   Der Vorgaenger zeigte dreimal dieselbe Zahl in anderer Form. */

.regadi-popup {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28,42,56,.18);
  min-width: 236px;
  max-width: 290px;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Kopf: Gemeindename und Insel-Marke */
.regadi-popup .rp-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px 9px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
}
.regadi-popup .rp-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 600; color: var(--navy);
  margin: 0; border: none; padding: 0; flex: 1; line-height: 1.2;
}
.regadi-popup .rp-insel {
  font-family: 'Outfit', sans-serif; font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--sand); border: 1px solid var(--sand);
  border-radius: 99px; padding: 2px 7px; white-space: nowrap;
}

/* Leitzahl mit Symbol */
.regadi-popup .rp-leit { display: flex; align-items: center; gap: 10px; padding: 12px 13px 8px; }
.regadi-popup .rp-ico {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px;
  background: var(--paper-warm); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.regadi-popup .rp-ico svg {
  width: 15px; height: 15px; fill: none; stroke: var(--sand);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.regadi-popup .rp-zahl {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px; font-weight: 600; color: var(--navy); line-height: 1.05;
}
.regadi-popup .rp-zahl-k {
  font-family: 'Outfit', sans-serif; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: #8a929c; margin-top: 2px;
}

/* Einordnung: der Balken sagt auf einen Blick, ob eine Zahl gross ist. */
.regadi-popup .rp-rang { padding: 2px 13px 10px; }
.regadi-popup .rp-bahn { height: 4px; border-radius: 99px; background: #efe9df; overflow: hidden; }
.regadi-popup .rp-fuell { height: 100%; border-radius: 99px; background: var(--sand); }
.regadi-popup .rp-rang-t {
  font-family: 'Outfit', sans-serif; font-size: 10.5px; color: #6d7681; margin-top: 5px;
}

/* Kontextzeilen */
.regadi-popup .rp-zeilen { border-top: 1px solid var(--line); padding: 9px 13px 4px; }
.regadi-popup .rp-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: 'Outfit', sans-serif; font-size: 11.5px; padding: 3px 0;
}
.regadi-popup .rp-zeile .z-k { color: #6d7681; }
.regadi-popup .rp-zeile .z-v { color: var(--navy); font-weight: 600; text-align: right; }

/* Erklaerkasten, wenn eine Angabe fehlt. Ohne Begruendung haelt der
   Besucher die Seite fuer kaputt. */
.regadi-popup .rp-fehlt {
  margin: 0 13px 10px; padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: #fdfaf1; border: 1px solid #e8dcc0;
  font-family: 'Outfit', sans-serif; font-size: 11px; line-height: 1.55; color: #7a6320;
}
.regadi-popup .rp-erl {
  font-family: 'Outfit', sans-serif; font-size: 10.5px;
  color: #8a929c; line-height: 1.5; margin-top: 2px;
}

/* Kleines Symbol in einer Zeile */
.regadi-popup .rp-mini { display: inline-flex; vertical-align: -2px; margin-right: 5px; }
.regadi-popup .rp-mini svg {
  width: 12px; height: 12px; fill: none; stroke: var(--sand);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Bevoelkerungskurve - bewusst ohne Achsen, dafuer ist der Platz zu klein.
   Die Aussage liefert die Zeile darunter. */
.regadi-popup .rp-spark { padding: 2px 13px 0; }
.regadi-popup .rp-spark svg { display: block; width: 100%; height: 38px; overflow: visible; }
.regadi-popup .rp-spark-t {
  font-family: 'Outfit', sans-serif; font-size: 10px; color: #8a929c;
  display: flex; justify-content: space-between; margin-top: 3px;
}

/* Quelle */
.regadi-popup .rp-quelle {
  font-family: 'Outfit', sans-serif; font-size: 9.5px; color: #9aa2ad;
  padding: 7px 13px 10px; border-top: 1px solid var(--line); margin-top: 5px;
}


/* ────────────────── Kennzahl-Schalter ──────────────────
   Eine Karte, vier Kennzahlen. Bis 09.08.2026 zeigte jede Modulseite
   dieselbe feste Einwohnerkarte - vier Seiten, viermal dasselbe Bild.
   Der Schalter macht aus der Karte das, was sie sein soll: ein Beleg
   dafuer, dass die Zahlen da sind.

   Ein Schalter ohne Daten wird nicht versteckt, sondern ausgegraut. Wer
   sieht, dass es die Kennzahl gibt und warum sie gerade fehlt, haelt die
   Seite nicht fuer unfertig. */

.regadi-karte-schalter {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 14px;
}
.regadi-karte-schalter button {
  font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 500;
  color: #fff; background: var(--navy);
  border: 1px solid var(--navy); border-radius: 99px;
  padding: 9px 20px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.regadi-karte-schalter button:hover:not(:disabled):not([aria-pressed="true"]) {
  background: var(--navy-deep); border-color: var(--navy-deep);
}
.regadi-karte-schalter button[aria-pressed="true"] {
  /* Weiss auf #b08d57 sind 3,09:1. Der Knopf bleibt gefuellt und der
     Text weiss - nur der Grund wird dunkler: 5,21:1. */
  background: var(--sand-text, #84683e); border-color: var(--sand-text, #84683e);
  color: #fff; cursor: default;
}
.regadi-karte-schalter button:disabled {
  background: var(--paper-warm); border-color: var(--line);
  color: var(--grey-light); cursor: not-allowed;
}

/* Was die Faerbung bedeutet - steht unter der Karte, weil die Legende
   dafuer zu klein ist. */
.regadi-karte-text {
  font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.6; margin-top: 12px; text-align: center;
}
.regadi-karte-quelle {
  font-family: 'Outfit', sans-serif; font-size: 11px; color: var(--grey);
  text-align: center; margin-top: 6px;
}
.regadi-karte-quelle .rk-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sand); margin-right: 6px; vertical-align: 0;
}

@media (max-width: 620px) {
  .regadi-karte-schalter button { font-size: 11.5px; padding: 8px 14px; }
}

/* Feiner Schatten unter den Gemeindeflaechen (27.08.2026). Ohne
   Kartenuntergrund schwebten die Inseln auf dem Wasser; der Schatten
   legt sie darauf. Nur auf die Zeichenebene, nicht auf Bedienelemente
   oder Beschriftungen. */
.regadi-karte .leaflet-overlay-pane {
  filter: drop-shadow(0 2px 3px rgba(22, 40, 58, .28));
}

/* Inselnamen (27.08.2026). Farbe, Halo und Schriftschnitt wie die
   Ortsbeschriftung im Kartenstil (karten/stil-regadi*.json), damit die
   Modulkarte und die Karten mit Kacheln gleich aussehen. Nicht
   anklickbar - sie sind Beschriftung, kein Bedienelement. */
.gk-inselname {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #16283a;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
     0 0 3px #f4efe4,  0 0 3px #f4efe4,
     1px 1px 2px #f4efe4, -1px -1px 2px #f4efe4,
     1px -1px 2px #f4efe4, -1px 1px 2px #f4efe4;
}
.gk-inselname span { display: block; transform: translate(-50%, -50%); }
.gk-inselname-unten { font-size: 12px; }