/* ═══════════════════════════════════════════════════════════════════════════
   teil-zw — Die gezeichnete Standortkarte, die Routen-Knöpfe und die
             Google-Maps-Kachel mit Zwei-Klick-Freigabe
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026, in zwei Durchgängen:

     „Der Fluss Main soll nur schematisch dargestellt werden. Am besten keine
      blaue Farbe, eher nur grau, passt farblich zum Design. Rechts und links
      soll er einfach faded weich auslaufen. … Die Standorte mit dem
      Standort-Icon versehen."

     „Die soll nicht in einer extra Kachel dargestellt werden, sondern dynamisch
      auf der Seite im Bereich unserer Filialen rechts daneben. … macht die
      Punkte deutlicher, lass noch … Bundesländergrenzen, dass man die noch
      erkennt und alles außenrum weich auslaufen lassen, dass das einfach keinen
      Hintergrund hat, freigestellt, sich auf der Seite befindet."

   ── Was das heißt ─────────────────────────────────────────────────────────
   Keine Platte, kein Rahmen, kein Schatten, keine Füllung. Die Zeichnung liegt
   frei auf dem Creme der Seite. Nach außen nimmt eine Maske sie weg — nicht
   ein Schleier in Hintergrundfarbe darüber, denn der wäre auf einem anderen
   Grund sofort als Rechteck zu sehen. Eine Maske nimmt wirklich weg.

   ── Warum die Namen HTML sind und nicht im SVG stehen ─────────────────────
   Ein <text> im SVG skaliert mit der Zeichnung: in der schmalen Spalte wäre er
   winzig, auf dem großen Schirm klobig. Die Namen liegen deshalb als HTML über
   dem Bild, an derselben in PHP gerechneten Stelle (--kk-x/--kk-y in Prozent),
   und behalten die Hausschrift in echten Pixeln.

   ── Das Verhältnis der Karte ──────────────────────────────────────────────
   Gerechnet, nicht geschätzt: viewBox 1000 × 526, also 1,90 : 1 (inc/orte.php,
   bv_karte_masse). Das ist die wahre Form des Gebiets — Bayreuth bis Ramstein
   sind ~290 km Ost-West und ~135 km Nord-Süd. Verzerrt wird hier nichts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Der Platz: oben rechts in der Kopfzeile ───────────────────────────────
   Christopher, 04.10.2026: „Die Minimap soll oben rechts neben Filialen
   stehen … und dann die Minimap über diesem Strich oben rechts." Also in die
   Kopfzeile, rechts neben Titel und Leitsatz, über der Trennlinie. Das Zeichen
   der Seite wandert dafür nach ganz links vor die Überschrift.

   Christopher, 21.10.2026: „in dem Fenstermodus soll die größer und füllend
   Richtung unsere Filialen verlaufen". Gemessen vorher bei 1024 px: Karte
   361 px breit — unter der 420-px-Schwelle, alle Namen ausgeblendet. Darum
   bekommt jetzt die KARTE den Rest der Zeile, nicht der Text: die Textspalte
   ist nur so breit wie die Überschrift (nowrap, min-content), höchstens 30rem.
   Gemessen nachher: 1024 px → 514 px Karte mit Namen, 1440 px → 827 px. */
.std-kopf-paar{
  display:grid;
  grid-template-columns:minmax(min-content, clamp(20rem, 30vw, 30rem)) minmax(0,1fr);
  gap:clamp(.5rem, 1.5vw, 1.5rem);
  align-items:center;
}
.std-kopf-paar .std-titelreihe h1{ white-space:nowrap }
/* Der Auslauf der Karte reicht unter den Text; der Text bleibt obenauf. */
.std-kopf-wort{ position:relative; z-index:1 }
.std-kopf-karte{ min-width:0 }

.std-titelreihe.std-zeichen-links{
  display:flex; align-items:center; gap:clamp(.7rem,1.4vw,1.2rem);
  flex-direction:row;
}
.std-titelreihe.std-zeichen-links .std-titelzeichen{ order:-1; flex:none; margin:0 }
.std-titelreihe.std-zeichen-links h1{ margin:0 }

@media (max-width:900px){
  .std-kopf-paar{ grid-template-columns:minmax(0,1fr); gap:1.2rem }
  .std-kopf-karte{ order:2 }
  .kk{ --kk-aus-l:var(--gasse) }
}

/* ── Die Zeichnung selbst: freigestellt ─────────────────────────────────────
   Christopher, 21.10.2026: „eine deutlich weichere Kante bekommen, dass es
   einfach ausläuft außen."

   Vorher lag die Maske auf .kk-rahmen und blendete INNERHALB der Karte aus
   (7 % links/rechts, 3 % oben) — der Auslauf war schmal und hart. Jetzt
   bekommt .kk einen Rand (Polster), der genau so weit nach außen ragt, wie er
   breit ist (negativer Außenabstand): die Karte behält ihre Größe, aber Länder
   und Flüsse zeichnen über den Rand hinaus (SVG overflow:visible), und erst
   dort nimmt die Maske sie weg — in einer eigenen, breiten Zone mit vier
   Stufen statt einer harten Rampe.

   Rechts nur so weit wie der Seitenrand (--gasse): weiter schnitte die
   Seitenkante (.seitenblatt, overflow:hidden) den Auslauf hart ab. Links
   breiter — dort liegt er unter dem Leitsatz, der obenauf bleibt.

   Das Polster soll keine Klicks schlucken: .kk ist durchlässig, nur Nadeln
   und Namen nehmen Zeiger an. */
.kk{
  --kk-linie:#8C8779;             /* warmes Grau, kein Blau — seine Ansage */
  --kk-grenze:#B6AF9E;
  --kk-aus-l:clamp(40px, 8vw, 140px);
  --kk-aus-r:var(--gasse);
  --kk-aus-y:clamp(28px, 4.5vw, 80px);
  /* Die Container-Einheiten (cqw) und die 420-px-Schwelle messen die
     Inhaltsbox — also die Karte ohne das Polster. Absicht. */
  container-type:inline-size;
  position:relative;
  padding:var(--kk-aus-y) var(--kk-aus-r) var(--kk-aus-y) var(--kk-aus-l);
  margin:calc(-1 * var(--kk-aus-y)) calc(-1 * var(--kk-aus-r))
         calc(-1 * var(--kk-aus-y)) calc(-1 * var(--kk-aus-l));
  pointer-events:none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0,
      rgba(0,0,0,.16) calc(var(--kk-aus-l) * .45), rgba(0,0,0,.58) calc(var(--kk-aus-l) * .85),
      #000 calc(var(--kk-aus-l) * 1.35), #000 calc(100% - var(--kk-aus-r) * 1.35),
      rgba(0,0,0,.58) calc(100% - var(--kk-aus-r) * .85), rgba(0,0,0,.16) calc(100% - var(--kk-aus-r) * .45),
      transparent 100%),
    linear-gradient(180deg, transparent 0,
      rgba(0,0,0,.16) calc(var(--kk-aus-y) * .45), rgba(0,0,0,.58) calc(var(--kk-aus-y) * .85),
      #000 calc(var(--kk-aus-y) * 1.3), #000 calc(100% - var(--kk-aus-y) * 1.3),
      rgba(0,0,0,.58) calc(100% - var(--kk-aus-y) * .85), rgba(0,0,0,.16) calc(100% - var(--kk-aus-y) * .45),
      transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0,
      rgba(0,0,0,.16) calc(var(--kk-aus-l) * .45), rgba(0,0,0,.58) calc(var(--kk-aus-l) * .85),
      #000 calc(var(--kk-aus-l) * 1.35), #000 calc(100% - var(--kk-aus-r) * 1.35),
      rgba(0,0,0,.58) calc(100% - var(--kk-aus-r) * .85), rgba(0,0,0,.16) calc(100% - var(--kk-aus-r) * .45),
      transparent 100%),
    linear-gradient(180deg, transparent 0,
      rgba(0,0,0,.16) calc(var(--kk-aus-y) * .45), rgba(0,0,0,.58) calc(var(--kk-aus-y) * .85),
      #000 calc(var(--kk-aus-y) * 1.3), #000 calc(100% - var(--kk-aus-y) * 1.3),
      rgba(0,0,0,.58) calc(100% - var(--kk-aus-y) * .85), rgba(0,0,0,.16) calc(100% - var(--kk-aus-y) * .45),
      transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.kk-rahmen{
  position:relative;
  /* Kein Hintergrund, kein Rand, kein Schatten, keine eigene Maske. Absicht. */
}
.kk-stelle, .kk-name{ pointer-events:auto }
.kk-bild{ display:block; width:100%; height:auto; overflow:visible }

/* ── Bundesländer: Flächen, keine Linien ────────────────────────────────────
   Drei Länder und keine Doppellinie geht nur so. Jede Fläche einen Hauch anders
   getönt; die Grenze ist die Kante zwischen zwei Tönen und wird nie zweimal
   gezeichnet. Die Töne liegen dicht beieinander — es soll eine Ahnung sein,
   kein Flickenteppich. */
.kk-land{ stroke:none }
.kk-land-bayern{          fill:rgba(31,42,56,.050) }
.kk-land-hessen{          fill:rgba(31,42,56,.022) }
.kk-land-rheinland-pfalz{ fill:rgba(31,42,56,.062) }
.kk-landname{
  position:absolute; left:var(--kk-x); top:var(--kk-y);
  transform:translate(-50%,-50%);
  font-size:clamp(.54rem,1.25cqw,.7rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-leise); opacity:.4; font-weight:700; white-space:nowrap;
  pointer-events:none;
}

/* ── Die Flüsse: grau, an den Enden ausgeblendet ────────────────────────── */
.kk-fluss{ stroke-linecap:round; stroke-linejoin:round }
.kk-main{  stroke-width:5.5px; opacity:.6 }
.kk-rhein{ stroke-width:3px;   opacity:.34 }

/* Der Main groß — er ist die Linie, an der die halbe Firma liegt. */
.kk-flussname{
  position:absolute; left:var(--kk-x); top:var(--kk-y);
  transform:translate(-50%,-50%);
  font-size:clamp(.62rem,1.5cqw,.8rem); letter-spacing:.16em; text-transform:uppercase;
  color:var(--kk-linie); opacity:.8; font-weight:700; white-space:nowrap;
  pointer-events:none;
}
.kk-fluss-main{
  font-size:clamp(.82rem,2.4cqw,1.3rem); letter-spacing:.3em; opacity:.95;
  font-weight:800;
}

/* ── Orientierungsstädte ────────────────────────────────────────────────── */
.kk-merk{ fill:var(--text-leise); opacity:.26 }
.kk-merkname{
  position:absolute; left:var(--kk-x); top:var(--kk-y);
  font-size:clamp(.52rem,1.2cqw,.68rem); letter-spacing:.04em;
  color:var(--text-leise); opacity:.55; white-space:nowrap;
  pointer-events:none;
}

/* ── Die Nadeln ─────────────────────────────────────────────────────────────
   Sie bewegen sich NICHT von selbst. Christopher, 04.10.2026: „Die Punkte, die
   sich unter den Standort-Icons bewegen, sind auch noch unlogisch vom Design
   her. … Es reicht, wenn diese Marker sich bewegen, wenn man sie berührt,
   größer werden und wenn man draufklickt, kommt man auch auf die Filialseite."

   Gewachsen wird aus der SPITZE heraus (--kk-px/--kk-py, in PHP gerechnet) —
   wüchse sie aus ihrer Mitte, rutschte die Spitze vom Ort weg, und genau die
   Spitze ist die Aussage. */
.kk-nadel-grund{ fill:var(--blau) }
.kk-nadel-loch{ fill:var(--weiss) }
.kk-stelle{
  transform-box:view-box; transform-origin:var(--kk-px) var(--kk-py);
  transform:scale(1);
  transition:transform .32s var(--weich), filter .32s var(--weich);
  filter:drop-shadow(0 2px 3px rgba(19,55,109,.26));
  cursor:pointer;
}
a.kk-stelle:hover,
a.kk-stelle:focus-visible{
  transform:scale(1.22);
  filter:drop-shadow(0 5px 8px rgba(19,55,109,.34));
}
a.kk-stelle:focus-visible{ outline:none }
a.kk-stelle:focus-visible .kk-nadel-grund{ stroke:var(--gold); stroke-width:3 }

.kk-name{
  position:absolute; left:var(--kk-x); top:var(--kk-y);
  display:grid; gap:.05em;
  padding:.26em .58em;
  border-radius:var(--r-rund);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 5px 16px rgba(19,55,109,.10);
  font-size:clamp(.6rem,1.45cqw,.82rem); line-height:1.25;
  color:var(--blau); text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--weich), box-shadow .3s var(--weich),
             background .3s var(--weich);
}
.kk-name b{ font-weight:800 }
/* „Optical Center Ramstein“ ist seit 22.10.2026 EIN Name (ein Haus, siehe
   BV_ORTE). Einzeilig war das Schild mit 143 px das breiteste der Karte und
   lag bei 901 px im „MAIN“. Darum darf genau dieses Schild umbrechen —
   zweizeilig wie die Wiesbadener Beschriftung. Die Daten bleiben richtig,
   der Umbruch gehört in die Gestaltung. */
.kk-name[data-ort="ramstein"] b{ white-space:normal; max-width:7.5em }
.kk-name b + b{ font-weight:600; color:var(--text-leise); font-size:.9em }
a.kk-name:hover,
a.kk-name:focus-visible,
.kk-name.kk-hell{
  background:var(--weiss);
  box-shadow:0 10px 26px rgba(19,55,109,.18);
  z-index:3;
}
a.kk-name:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

/* Wohin die Beschriftung zum Punkt sitzt. Die Seite ist je Haus in
   inc/orte.php festgelegt, nachdem die Abstände gerechnet waren — sonst liegt
   „Hammelburg" auf „Schweinfurt". Die Nadel steht ÜBER dem Ort, darum sitzt
   „oben" höher als bei einem Punkt. */
.kk-wo-oben       { transform:translate(-50%, calc(-100% - 40px)) }
.kk-wo-unten      { transform:translate(-50%, 10px) }
.kk-wo-links      { transform:translate(calc(-100% - 12px), -130%) }
.kk-wo-rechts     { transform:translate(12px, -130%) }
.kk-wo-oben-rechts{ transform:translate(10px, calc(-100% - 34px)) }
.kk-merkname.kk-wo-oben  { transform:translate(-50%, calc(-100% - 6px)) }
.kk-merkname.kk-wo-unten { transform:translate(-50%, 7px) }
.kk-merkname.kk-wo-links { transform:translate(calc(-100% - 8px), -50%) }
.kk-merkname.kk-wo-rechts{ transform:translate(8px, -50%) }

/* .kk-fuss entfällt (21.10.2026, seine Ansage: Unterzeile komplett weg). */

/* ── Schmale Spalte: die Namen würden sich stapeln ──────────────────────── */
@container (max-width: 420px){
  .kk-name,
  .kk-merkname,
  .kk-landname{ display:none }
  .kk-gegend{ font-size:.66rem }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .kk-stelle, .kk-name{ transition:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Die Routen-Knöpfe
   ───────────────────────────────────────────────────────────────────────────
   Zwei gleichrangige Wege, Apple zuerst — auf dem iPhone ist das der kürzere.
   Reine Links: sie laden nichts, bis jemand klickt.
   ═══════════════════════════════════════════════════════════════════════════ */

.rt-reihe{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:clamp(.8rem,1.6vw,1.2rem) 0 0;
}
.rt-knopf{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.62em 1.05em;
  border-radius:var(--r-rund);
  background:var(--weiss); border:1px solid var(--linie);
  color:var(--blau); text-decoration:none;
  font-size:.88rem; font-weight:700; line-height:1.2;
  box-shadow:0 4px 14px rgba(19,55,109,.06);
  transition:transform .3s var(--weich), box-shadow .3s var(--weich),
             border-color .3s var(--weich), background .3s var(--weich);
}
.rt-knopf:hover{
  background:var(--blau); color:var(--weiss); border-color:var(--blau);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(19,55,109,.20);
}
.rt-knopf:focus-visible{ outline:2px solid var(--blau); outline-offset:3px }
.rt-zeichen{ display:grid; place-items:center; width:1.15em; height:1.15em; flex:none }
.rt-zeichen svg{ width:100%; height:100% }
@media (prefers-reduced-motion: reduce){
  .rt-knopf:hover{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Die Google-Maps-Kachel — vor dem Klick liegt hier kein iframe
   ═══════════════════════════════════════════════════════════════════════════ */

.gk{ padding-block:clamp(2rem,4vw,3.4rem) }
.gk-kopf{ max-width:68ch; margin:0 0 clamp(1rem,2vw,1.6rem) }
.gk-kopf h2{ margin:.2rem 0 .5rem }
.gk-satz{ margin:0; color:var(--text-leise); line-height:1.6 }

.gk-wahl{
  display:flex; flex-wrap:wrap; gap:.45rem;
  margin-bottom:clamp(.8rem,1.6vw,1.2rem);
}
.gk-reiter{
  appearance:none; cursor:pointer;
  padding:.5em 1em; border-radius:var(--r-rund);
  background:var(--weiss); border:1px solid var(--linie);
  color:var(--text); font-size:.86rem; font-weight:700; line-height:1.2;
  transition:background .3s var(--weich), color .3s var(--weich),
             border-color .3s var(--weich);
}
.gk-reiter:hover{ border-color:var(--gold) }
.gk-reiter[aria-selected="true"]{
  background:var(--blau); color:var(--weiss); border-color:var(--blau);
}
.gk-reiter:focus-visible{ outline:2px solid var(--blau); outline-offset:3px }

.gk-kasten{
  border-radius:var(--r-l);
  background:var(--weiss); border:1px solid var(--linie);
  box-shadow:var(--glas-schatten);
  padding:clamp(1rem,2vw,1.6rem);
}
.gk-buehne{
  position:relative;
  border-radius:var(--r-m);
  overflow:hidden;
  background:
    linear-gradient(160deg, var(--creme) 0%, var(--grund) 55%, var(--blau-zart) 100%);
  min-height:clamp(220px, 34vw, 380px);
  display:grid; place-items:center;
}
.gk-vorhang{
  max-width:52ch; padding:clamp(1.2rem,2.4vw,2rem); text-align:center;
  display:grid; gap:.7rem; justify-items:center;
}
.gk-anschrift{ margin:0; color:var(--blau); font-weight:800; font-size:1.02rem; line-height:1.45 }
.gk-hinweis{ margin:0; color:var(--text-leise); font-size:.84rem; line-height:1.6 }
.gk-ohne{ margin:0; color:var(--text-leise); font-size:.84rem }
.gk-buehne.gk-offen{ min-height:0; padding:0; display:block; background:var(--creme) }
.gk-karte{
  display:block; width:100%; height:clamp(260px, 42vw, 460px);
  border:0;
}
.rt-in-kachel{ margin-top:clamp(.9rem,1.8vw,1.3rem) }