/* ==============================================================
   region.css  ·  Besitzer: P8 Staedte & Region  ·  v4 „Passer“ (25.09.2026)
   Regionskarte (SVG, echte OSM-Koordinaten, ohne Google) und die
   Regionsseite /region.php. Plan 8.6 K50/K53, 11.6.
   Markup: includes/regionskarte.php, region.php, includes/stadtseite.php.
   Die Karte steht im Bogen (kh_bogen_huelle, Variante 'karte') - randlos
   statt grauem Kasten. Nur Tokens, nichts unter 14 px am Schirm: die
   SVG-Schriftgroessen sind in viewBox-Einheiten (860 breit) gerechnet und
   per Container-Abfrage an die gezeichnete Breite gebunden.

   Inhalt
     1 Karte: Ringe, Strahlen, Punkte, Passerkreuz Jüchen
     2 Kleine Karte (Staedte-Hero)
     3 Grosse Karte (/region.php): Kaertchen, Kopplung, Strahlen zeichnen
     4 Regionsseite: Hero, Kapitel "Karte" (Liste links, Karte rechts sticky)
   ============================================================== */

/* ---- 1 Karte ------------------------------------------------------ */
.karten-rahmen{position:relative}
.karten-rahmen .bogen-bild{background-color:var(--flaeche-licht)}
.regionskarte{display:block;width:100%;height:auto;font-family:var(--schrift-titel);overflow:visible}
.rk-ring{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:4 7}
.rk-ring-text{font-family:var(--schrift-mono);font-size:17px;fill:var(--muted)}
.rk-strahl{stroke:color-mix(in oklch, var(--accent-text) 30%, transparent);stroke-width:1.6}
.rk-strahl.ist-aktiv{stroke:var(--haar);stroke-width:3}
.rk-ort circle{fill:var(--flaeche-licht);stroke:var(--accent-text);stroke-width:3}
/* Trefferkreis der grossen Karte: unsichtbar, aber zeigbar (fill transparent zaehlt als gemalt) */
.rk-ort .rk-treffer{fill:transparent;stroke:none}
.rk-ort text{font-weight:700;font-stretch:92%;fill:var(--text)}
.rk-ort.ist-aktiv circle{fill:var(--platte);stroke:var(--text)}
/* Passerkreuz Jüchen: Tinte, Cyan-Platte versetzt dahinter */
.rk-platte{fill:none;stroke:var(--platte);stroke-width:4}
.rk-marke{fill:var(--flaeche-licht);stroke:var(--text);stroke-width:3}
.rk-kreuz{fill:none;stroke:var(--text);stroke-width:3}
.rk-kern{fill:var(--haar)}
.rk-laden text{font-weight:720;font-stretch:92%;fill:var(--text);font-size:20px}
a.rk-ort{cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .rk-ort circle:not(.rk-treffer){transition:r var(--t-kurz) var(--ease),fill var(--t-kurz) var(--ease)}
  .rk-strahl{transition:stroke var(--t-kurz) var(--ease),stroke-width var(--t-kurz) var(--ease)}
}
.ohne-deko .rk-platte{display:none}

/* ---- 2 Kleine Karte (Staedte-Hero K50) -----------------------------
   Beschriftet sind nur die aktive Stadt und Jüchen. Ausschnitt 560
   Einheiten breit: 28 Einheiten sind bei 360 px 14,4 px, bei 390 px 15,9 px;
   ab 26rem Kartenbreite reichen 20 Einheiten fuer >= 14,8 px. */
.karte-klein .rk-ort text,.karte-klein .rk-laden text{font-size:28px}
@container (min-width:26rem){
  .karte-klein .rk-ort text,.karte-klein .rk-laden text{font-size:20px}
}
.karte-klein .rk-strahl:not(.ist-aktiv){stroke:color-mix(in oklch, var(--accent-text) 16%, transparent)}

/* ---- 3 Grosse Karte (/region.php, K53) ------------------------------
   Punkte ohne Namen (die Namen stehen in der Liste daneben). Ringzahlen
   und "Jüchen" nur, wenn die Karte breit genug gezeichnet ist (17 bzw. 20
   Einheiten von 560 sind ab 29rem Kartenbreite >= 14 px). */
@container (max-width:28.99rem){
  .karte-gross .rk-ring-text,.karte-gross .rk-laden text{display:none}
}
.rk-ort.ist-hervor circle:not(.rk-treffer){fill:var(--accent-fill);stroke:var(--text);r:14}
.rk-strahl.ist-hervor{stroke:var(--haar);stroke-width:3.2}
/* Kaertchen (karte.js): Name, Luftlinie, Link */
.rk-karte{
  position:absolute;z-index:3;display:grid;gap:.15rem;min-width:13rem;max-width:calc(100% - 1rem);
  background-color:var(--flaeche-licht);color:var(--text);border-radius:var(--r-chip);padding:.7rem .9rem .8rem;
  box-shadow:4px 4px 0 var(--platte), var(--sh-2);
}
.rk-karte[hidden]{display:none}
.rk-karte-name{font-family:var(--schrift-titel);font-weight:700;font-size:1.125rem}
.rk-karte-km{font-family:var(--schrift-mono);font-size:.875rem;color:var(--muted)}
.rk-karte-link{display:inline-flex;align-items:center;gap:.35rem;min-height:24px;margin-top:.35rem;font-family:var(--schrift-titel);font-weight:650;color:var(--accent-text)}
/* Strahlen zeichnen sich einmal von Jüchen aus, wenn die Karte ins Bild
   scrollt (karte.js setzt die Klassen, nur ohne "Bewegung reduzieren").
   Ohne JS stehen sie. pathLength="1" steht an jedem Strahl. */
.regionskarte.rk-zeichnen .rk-strahl{stroke-dasharray:1 1;stroke-dashoffset:1}
@media (prefers-reduced-motion:no-preference){
  .regionskarte.rk-zeichnen.rk-gezeichnet .rk-strahl{
    stroke-dashoffset:0;
    transition:stroke-dashoffset var(--t-lang) var(--ease) calc(var(--rk-i, 0) * 70ms),
               stroke var(--t-kurz) var(--ease),stroke-width var(--t-kurz) var(--ease);
  }
}
@media (prefers-reduced-motion:reduce){
  .regionskarte.rk-zeichnen .rk-strahl{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ---- 4 Regionsseite ---------------------------------------------------- */
.r-hero-kurz{min-width:0}
.r-hero-kurz .kurzantwort{
  padding:clamp(1.25rem, 1rem + 1vw, 2rem);border-left:0;
  background-color:var(--flaeche-licht);border-radius:var(--r-karte);box-shadow:5px 5px 0 var(--platte), var(--sh-1);
}
@media (min-width:60rem){
  .r-hero .u-hero-innen{align-items:end}
}
.r-karte-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.5rem + 2vw, 3.5rem);align-items:start}
.r-karte-innen > *{min-width:0}
/* mobil: km-Strahl mit Namen statt unbeschrifteter Punkte (Plan K53) */
@media (max-width:47.99rem){
  .r-karte-bild{display:none}
}
@media (min-width:64rem){
  .r-karte-innen{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .r-karte-bild{grid-column:2;grid-row:1;position:sticky;top:6.5rem}
  .r-gruppen{grid-column:1;grid-row:1}
}
.r-gruppen{display:grid;gap:clamp(2.5rem, 1.8rem + 2.5vw, 4rem)}
.r-gruppe{scroll-margin-top:6rem}
.r-gruppe h2{margin:.75rem 0 .5rem}
.r-gruppe .sub{margin-bottom:1rem}
.r-gruppe .ok-notiz{font-family:var(--schrift-mono);font-variant-numeric:tabular-nums}

/* ---- 5 Kopf mit Bild (26.09.2026, beide Textversionen) -----------------
   Die Karte ist aus dem Orte-Kapitel in den Kopf gezogen (region.php), EIN
   Element, nicht doppelt. Desktop (ab 60rem, Raster .u-hero-innen): Text
   links, Karte rechts; mobil steht sie unter dem Text (vorher war sie unter
   48rem ganz ausgeblendet). Die Kurzantwort eroeffnet das Orte-Kapitel und
   steht ab 64rem rechts neben der Liste, mitlaufend (Platz der alten Karte). */
.r-hero .u-hero-innen{align-items:center}
.r-hero-karte{min-width:0;scroll-margin-top:6rem}
.r-hero-karte .karte-gross{max-width:36rem;margin-inline:auto}
@media (min-width:64rem){
  .r-karte-innen .r-kurz{grid-column:2;grid-row:1;position:sticky;top:6.5rem;max-width:34rem}
}
@media (max-width:63.99rem){
  .r-kurz{max-width:44rem}
}
/* Mobil steht die grosse Karte jetzt sichtbar im Kopf: Trefferkreise der
   Ortspunkte auf >= 24 px am Schirm (r 22 von 560 Einheiten = 26 px bei
   334 px Kartenbreite, 390er Schirm; WCAG 2.5.8). Dieselben Orte stehen zusaetzlich als
   Liste darunter. */
@media (max-width:47.99rem){
  .karte-gross .rk-treffer{r:22}
}
/* Nachbesserung 26.09.2026 (Design-Review): mobil zeigt die grosse Karte
   16 unbeschriftete Punkte (Ringzahlen und "Jüchen" blendet die Container-
   Query oben aus). Darum wie K53: unter 48rem keine Karte im Kopf und kein
   Sprung-Chip "Karte"; die Liste mit km-Strahl und Namen traegt dort.
   Desktop unveraendert. display:none nimmt die Trefferflaechen mit raus. */
@media (max-width:47.99rem){
  .r-hero-karte{display:none}
  .sprungleiste a[href="#karte"]{display:none}
}