/* region.css - Übergeordnete Region-Übersichtsseite (Nordbahngemeinden).
   Ergänzt nur das Spezifische dieser Seite: die stilisierte SVG-Landkarte
   (vier farblich markierte Gemeinde-Flächen) + Sprungliste + Teaser-Hover.
   Baut auf lead.css / gemeinde.css auf. Mobile First. */

/* --- Karten-Sektion: helle, stilisierte Landkarte --------------------- */
.region-map-section .section-claim { max-width: 56ch; }

.region-map {
  margin: var(--sp-6) auto 0;
  max-width: 880px;
}

.region-map__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 16px);
  /* weiche Karte: dezenter Schatten + feine Innenkante */
  box-shadow: 0 10px 30px rgba(1, 66, 106, 0.12),
              inset 0 0 0 1px rgba(1, 66, 106, 0.08);
  background: #f7f3e8; /* Fallback, falls das SVG-Rect nicht greift */
}

.region-map__cap {
  margin: var(--sp-3) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted, #5c6578);
}

/* --- Karten-Deko (im SVG): Wasser, Linie, Rahmen, Kompass ------------- */
.map-water {
  fill: #cfe3ec;          /* zartes Himmelblau für angedeutetes Wasser */
  fill-opacity: 0.7;
  stroke: #8fb6c6;
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.map-water-label {
  fill: #4a6b78;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
}
.map-border {
  stroke: var(--brand-navy, #01426a);
  stroke-width: 1;
  stroke-opacity: 0.18;
  stroke-dasharray: 2 4;
}
.map-berlin {
  fill: var(--text-muted, #5c6578);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.map-compass path { fill: var(--brand-orange, #F5C518); }
.map-compass text {
  fill: var(--brand-navy, #01426a);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
}

/* --- Bahnlinien (echte OSM-Schienen, dezent als durchgehende Linie) ----
   Liegt über den Flächen, aber unter den Labels. Nur Kontur, keine Füllung. */
.map-rail { pointer-events: none; }   /* rein dekorativ -> kein Hover/Klick */

.map-rail__line {
  fill: none;
  stroke: var(--brand-navy, #01426a);
  stroke-width: 1.6;
  stroke-opacity: 0.5;              /* dezent, aber als Bahnlinie klar erkennbar */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-rail__label {
  fill: var(--brand-navy, #01426a);
  fill-opacity: 1;                 /* voll deckend -> >=6:1 auf Papier (WCAG 1.4.3); 0.55 ergab nur 2.99:1 */
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: #f7f3e8;                 /* heller Halo -> Streckenlabel bleibt auf der Linie lesbar */
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* --- Gemeinde-Flächen (anklickbar) ------------------------------------ */
.map-area { cursor: pointer; }

.map-area__shape {
  stroke-width: 1.6;
  transition: fill 160ms ease, stroke 160ms ease, stroke-width 160ms ease;
}

/* dezente, CI-verträgliche Tönungen je Gemeinde (leicht markiert).
   Füllungen bleiben hell; die Kontur-Strokes sind so abgedunkelt, dass sie als
   Abgrenzung des Bedienelements >=3:1 gegen das Papier (#f7f3e8) erreichen
   (WCAG 1.4.11 Non-Text-Contrast). Werte: Salbe 4.5:1, Blau 4.8:1, Gold 4.5:1, Sand 4.3:1. */
.map-area--birkenwerder    .map-area__shape { fill: #d9e7cf; stroke: #4f7a3a; } /* Salbei  */
.map-area--hohenneuendorf  .map-area__shape { fill: #cfe1ec; stroke: #3a6f93; } /* Himmelblau */
.map-area--muehlenbeck     .map-area__shape { fill: #f3e6c2; stroke: #8a6a2e; } /* Sand/Gold */
.map-area--glienicke       .map-area__shape { fill: #e9dcc8; stroke: #84684a; } /* warmer Sand */

.map-area__label {
  fill: var(--brand-navy, #01426a);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #f7f3e8;        /* heller Halo -> Label bleibt auf jeder Fläche lesbar */
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;   /* Klick/Hover geht an die Fläche, nicht ans Label */
}

/* --- Ortsteil-Grenzen dezent angedeutet (rein dekorativ, nicht klickbar) --- */
.map-ortsteil { pointer-events: none; }   /* nur Andeutung -> kein Hover/Klick */

.map-ortsteil__line {
  fill: none;                       /* nur Kontur, keine Fläche */
  stroke: var(--brand-navy, #01426a);
  stroke-opacity: 0.32;             /* etwas kräftiger, damit die Punkte sauber sichtbar bleiben */
  stroke-width: 1.0;                /* minimal erhöht, damit die runden Punkte tragen */
  stroke-dasharray: 0.5 3.5;        /* feine Punktlinie (runde Punkte statt Striche) */
  stroke-linecap: round;            /* macht aus den kurzen Strichen runde Punkte */
  stroke-linejoin: round;
}

.map-ortsteil__label {
  /* #4f5864 statt --text-muted: auf den hellen Gemeindeflächen (z.B. Himmelblau #cfe1ec) braucht
     der 10px-Text >=4.5:1 (WCAG 1.4.3); --text-muted #5c6578 ergab nur 4.33-4.36:1. Jetzt >=5.3:1. */
  fill: #4f5864;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: #f7f3e8;          /* heller Halo (kleiner als bei Gemeinde-Labels) */
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* Hover/Focus: Tönung kräftiger, Kontur hervorgehoben */
.map-area:hover .map-area__shape,
.map-area:focus-visible .map-area__shape {
  stroke: var(--brand-orange, #F5C518);
  stroke-width: 2.6;
}
.map-area--birkenwerder:hover    .map-area__shape,
.map-area--birkenwerder:focus-visible    .map-area__shape { fill: #c4dab3; }
.map-area--hohenneuendorf:hover  .map-area__shape,
.map-area--hohenneuendorf:focus-visible  .map-area__shape { fill: #b6d2e2; }
.map-area--muehlenbeck:hover     .map-area__shape,
.map-area--muehlenbeck:focus-visible     .map-area__shape { fill: #ecd79e; }
.map-area--glienicke:hover       .map-area__shape,
.map-area--glienicke:focus-visible       .map-area__shape { fill: #ddcaac; }

/* Sichtbarer Fokusrahmen für Tastaturnutzer (WCAG 2.4.7 / 2.4.11).
   Der frühere helle Gold-Stroke lag nur ~1,2:1 gegen die hellen Flächen/das Papier
   und war praktisch unsichtbar. Stattdessen jetzt ein kräftiger Navy-Stroke
   (var(--brand-navy) #01426a, >=6,6:1 gegen jede Füllung UND das Papier #f7f3e8)
   mit einem hellen Halo (weißer drop-shadow), damit die fokussierte Fläche auf
   jedem Untergrund eindeutig erkennbar bleibt.
   :focus-visible UND :focus als Fallback (ältere Safari ohne :focus-visible auf SVG-<a>). */
.map-area:focus { outline: none; }
.map-area:focus .map-area__shape,
.map-area:focus-visible .map-area__shape {
  stroke: var(--brand-navy, #01426a);
  stroke-width: 4;
  /* heller Halo -> kontrastreicher Tastatur-Fokus auch auf dunkleren Hover-Flächen */
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff);
}

/* --- Sichtbare Sprungliste (Fallback unter der Karte) ----------------- */
.region-map-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-5) auto 0;
  padding: 0;
}
.region-map-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45em 1em;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-navy);
  background: var(--cream, #fdf6e3);
  border: 1px solid rgba(1, 66, 106, 0.14);
  border-radius: var(--radius-pill, 999px);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.region-map-links a:hover,
.region-map-links a:focus-visible {
  background: #fff;
  border-color: var(--brand-orange, #F5C518);
  transform: translateY(-1px);
}

/* --- Gemeinde-Teaser: anklickbare Karte (erweitert .gem-card) --------- */
a.region-teaser {
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
/* Tag-Pille in die obere rechte Ecke (Icon bleibt oben links) - nur in den Region-Teasern */
a.region-teaser .gem-card__tag {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  margin: 0;
}
a.region-teaser:hover,
a.region-teaser:focus-visible {
  transform: translateY(-3px);
  border-color: var(--brand-orange, #F5C518);
  box-shadow: 0 10px 24px rgba(1, 66, 106, 0.12);
}
.region-teaser__ic {
  align-self: flex-start;
  color: var(--gold-deep, #806400); /* wie die Icons auf den Gemeinde-Unterseiten (gem-tip__ic) - einheitlich */
  margin-bottom: var(--sp-2);
}
.region-teaser__ic svg { width: 40px; height: 40px; display: block; }
.region-teaser__more {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand-navy);
}
a.region-teaser:hover .region-teaser__more,
a.region-teaser:focus-visible .region-teaser__more {
  color: var(--gold-deep, #806400);
}

/* --- Reduzierte Bewegung ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .map-area__shape,
  a.region-teaser,
  .region-map-links a { transition: none; }
}

/* --- Mobile: Labels größer, weil das SVG (viewBox 800) auf dem Telefon stark
       herunterskaliert - sonst werden die Beschriftungen real winzig. Größer in
       SVG-Nutzereinheiten = größer gerendert, ohne dass etwas aus dem viewBox läuft. */
@media (max-width: 560px) {
  .map-area__label { font-size: 22px; }
  .map-water-label { font-size: 13px; }
  .map-ortsteil__label { font-size: 13px; }
}