/* Saxo — Karte aus echten Grenzen (werkzeug/karte.mjs). Ergänzt components.css.
   Flächen in Creme, nie Orange: Orange bleibt Route, Anrufweg und Notdienst-Plakette. */
.map-area{fill:rgba(245,239,221,.035);stroke:rgba(245,239,221,.24);stroke-width:.7;stroke-linejoin:round;
  transition:fill .25s var(--ease),stroke .25s var(--ease)}
/* C2 Stufe 2 (B5): kein outline:none mehr — der Tastaturfokus braucht einen sichtbaren Ring.
   Creme auf dem dunklen Kartengrund trägt weit über 3:1, dazu eine kräftige Kontur der Fläche. */
.map__area:focus-visible{outline:3px solid var(--on-deep);outline-offset:2px}
.map__area:focus-visible .map-area{fill:rgba(245,239,221,.26);stroke:var(--on-deep);stroke-width:2}
.map__area[role="button"]{cursor:pointer}
.map__area:not([data-pt]){pointer-events:none}   /* Wald und Heide: nichts zum Anklicken */
.map__area text{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;fill:var(--on-deep);
  paint-order:stroke;stroke:rgba(20,18,12,.72);stroke-width:3px;stroke-linejoin:round;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.map__area:hover .map-area,.map__area:focus-visible .map-area{fill:rgba(245,239,221,.14);stroke:rgba(245,239,221,.62)}
.map__area[aria-pressed="true"] .map-area,.map__area.is-fix .map-area{fill:rgba(245,239,221,.26);stroke:var(--on-deep);stroke-width:1.1}
.map__area:hover text,.map__area:focus-visible text,.map__area[aria-pressed="true"] text,.map__area.is-fix text{opacity:1}
.map__svg .route{pointer-events:none}
@media (prefers-reduced-motion:reduce){.map-area,.map__area text{transition:none}}

/* Bürokarte auf /kontakt/ (werkzeug/ortskarte.mjs). Fester Maßstab: das SVG wird nie gestreckt,
   der Rahmen zeigt je nach Breite mehr oder weniger Umgebung, das Büro bleibt in der Mitte. */
/* Abstand nach oben: der Kopf der Kontaktseite endet ohne Innenabstand, sonst säße die Karte
   direkt am Anrufknopf. --s8 ist derselbe Abstand wie zwischen Karte und Anschrift. */
.ortskarte{position:relative;margin:var(--s8) 0 0;height:clamp(260px,34vw,400px);overflow:hidden;background:var(--sunk)}
.ortskarte__karte{position:absolute;inset:0;display:block}
.ortskarte__svg{position:absolute;left:50%;top:50%;width:1400px;height:520px;max-width:none;transform:translate(-50%,-50%)}
.ortskarte__fuss{position:absolute;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px var(--s4);
  padding:6px 10px;background:rgba(245,239,221,.92);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-2)}
.ortskarte__fuss a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ok-land{fill:var(--sunk)}
.ok-gruen{fill:rgba(104,120,72,.2)}
.ok-wasser{fill:rgba(126,151,170,.55)}
.ok-platz{fill:var(--surface)}
.ok-bruecke{fill:var(--sunk);stroke:var(--line-2);stroke-width:.8}
.ok-haus{fill:var(--line);stroke:var(--line-2);stroke-width:.6;stroke-linejoin:round}
.ok-bahn{fill:none;stroke:var(--line-2);stroke-width:2}
.ok-str{fill:none;stroke:var(--surface);stroke-linecap:round;stroke-linejoin:round}
.ok-str--weg{stroke-width:1.3}
.ok-str--zufahrt{stroke-width:2.4}
.ok-str--fuss{stroke-width:4}
.ok-str--neben{stroke-width:6}
.ok-str--haupt{stroke-width:9}
.ok-str--rand.ok-str--neben{stroke:var(--line-2);stroke-width:7.4}
.ok-str--rand.ok-str--haupt{stroke:var(--line-2);stroke-width:10.6}
.ok-name{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-2);
  paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.ok-fluss{font-family:var(--mono);font-size:10px;letter-spacing:.5em;text-transform:uppercase;fill:var(--ink-3)}
.ok-ring{fill:rgba(20,18,12,.07);stroke:rgba(20,18,12,.28);stroke-width:1}
.ok-stiel{stroke:var(--ink);stroke-width:1.2}
.ok-schild{fill:var(--deep)}
.ok-schildtext{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:var(--on-deep)}
.ok-punkt{fill:var(--ink);stroke:var(--surface);stroke-width:2.5}

/* Ortsliste als Verweise — auf einer Stadtteilseite ist die Karte fest (der eigene
   Stadtteil ist gefüllt), Knöpfe hätten dort keine Wirkung. Deshalb führt jeder
   Eintrag auf die Seite des Ortes. Aussehen wie die Knöpfe der Startseite. */
.orte a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);width:100%;min-width:0;
  min-height:48px;padding:0 0 0 12px;
  border-bottom:1px solid rgba(245,239,221,.14);border-left:2px solid transparent;
  color:var(--on-deep-2);font-size:16px;font-weight:500;text-decoration:none;
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.orte a:hover{color:var(--on-deep);background:rgba(245,239,221,.06);text-decoration:none}
.orte a span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(245,239,221,.55);
  flex:none;white-space:nowrap}
.orte a[aria-current="page"]{color:var(--on-deep);font-weight:600;
  border-left-color:var(--orange);background:rgba(245,239,221,.08)}
.orte a[aria-current="page"] span{color:var(--orange)}