/* ═══════════════════════════════════════════════════════════════════════════
   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. */
.std-kopf-paar{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px, 36vw, 540px);
  gap:clamp(1rem, 3vw, 3rem);
  align-items:center;
}
.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 }
}

/* ── Die Zeichnung selbst: freigestellt ─────────────────────────────────── */
.kk{
  --kk-linie:#8C8779;             /* warmes Grau, kein Blau — seine Ansage */
  --kk-grenze:#B6AF9E;
  container-type:inline-size;
}
.kk-rahmen{
  position:relative;
  /* Kein Hintergrund, kein Rand, kein Schatten. Absicht. */
  /* Nach außen weich auslaufen. Zwei Verläufe übereinander: einer nimmt links
     und rechts weg, einer oben und unten. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.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 }
.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%) }

/* Seine Ansage: „ganz klein unten drunter, Schriftgröße fünf oder sechs —
   das ist gerade noch." Also 6 px, und damit es bei jedem lesbar bleibt, kein
   zusätzliches Abdunkeln. */
.kk-fuss{
  margin:.35rem 0 0; font-size:6px; line-height:1.5; letter-spacing:.02em;
  color:var(--text-leise); opacity:.9;
}

/* ── 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) }