/* =============================================================================
   Mini Cafe · Fassung 2 · gemeinsam/wienkarte.css  (zu gemeinsam/wienkarte.js, Helfer W3)
   Wien als feine Linie: a eigener Abschnitt „So findest du uns“ · b Mini-Karte bei der Adresse · c bei der Ladenfront.
   Farben nur aus basis.css / --linie (seite-start.css). Eigene Variablen am .wk-karte:
     --wk-linie  Linienfarbe (hell: --linie, warmes Hellbraun · dunkel: helles Beige)
     --wk-akz    die eine Akzentfarbe (Café-Punkt, 9. Bezirk): hell --haupt (Grün), dunkel --akzent (Gold)
   Bewegung: nur Klassen, die das Skript bei „weniger Bewegung“ / bild=1 gar nicht erst setzt.
   ============================================================================= */

/* ---------- Karte (Zeichnung + feine Beschriftung) ---------- */
.wk-karte {
  --wk-linie: var(--linie, #b08d6a);
  --wk-donau: color-mix(in srgb, var(--wk-linie) 78%, var(--text, #1d1d1b));
  --wk-akz: var(--haupt);
  --wk-bez: .75;          /* Deckkraft der 23 Bezirkslinien */
  --wk-fl: .16;           /* Fläche 9. Bezirk */
  position: relative; margin: 0; color: var(--wk-linie);
}
html[data-look="dunkel"] .wk-karte {
  --wk-linie: rgba(232, 220, 200, .72);
  --wk-donau: rgba(240, 230, 211, .95);
  --wk-akz: var(--akzent);
  --wk-bez: .6; --wk-fl: .2;
}
.wk-karte svg.wk-linie { display: block; width: 100%; height: auto; overflow: visible; }
.wk-karte .wien-grenze { stroke: var(--wk-linie); }
.wk-karte .wien-donau { stroke: var(--wk-donau); }
.wk-karte .wien-bezirke { opacity: var(--wk-bez); }
.wk-karte .wien-bezirk-9 { fill: var(--wk-akz); fill-opacity: var(--wk-fl); }

/* Café-Punkt: Akzentfarbe mit feinem Ring in der Grundfarbe */
.wk-karte .wk-punkt { fill: var(--wk-akz); stroke: var(--grund); stroke-width: 2.5px; vector-effect: non-scaling-stroke; paint-order: stroke; transform-box: fill-box; transform-origin: center; }
.wk-karte .wk-puls { fill: var(--wk-akz); stroke: none; transform-box: fill-box; transform-origin: center; animation: wk-puls 3.2s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.wk-gross .wk-punkt, .wk-gross .wk-puls { r: 13px; }
.wk-klein .wk-punkt, .wk-klein .wk-puls { r: 5.4px; }
.wk-karte.wk-karte--klein { --wk-fl: .25; --wk-bez: .7; }          /* Mini: Fläche 9. Bezirk kräftiger (W1-Empfehlung), Bezirke nicht dicker */
html[data-look="dunkel"] .wk-karte.wk-karte--klein { --wk-fl: .24; --wk-bez: .6; }
.wk-klein .wk-punkt { stroke-width: 1.6px; }
@keyframes wk-puls { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wk-karte .wk-puls { display: none; } }
/* Während sich die Linie zeichnet, ist der Punkt noch nicht da (und pulsiert erst danach) */
.wk-vor svg.wk-linie > *, .wk-vor .wk-beschr { opacity: 0; }
.wk-vor .wk-puls, .wk-laeuft .wk-puls { display: none; }

/* Feine Beschriftung beim Punkt (links vom Punkt, kurze Linie dazwischen) */
.wk-beschr {
  position: absolute; left: calc(var(--px) * 100%); top: calc(var(--py) * 100%);
  transform: translate(calc(-100% - 22px), -50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  white-space: nowrap; text-align: right; pointer-events: none; color: var(--text);
  text-shadow: 0 0 2px var(--grund), 0 0 4px var(--grund), 0 0 8px var(--grund), 0 0 12px var(--grund);
}
.wk-beschr strong { font: 700 11px/1 var(--schrift); letter-spacing: .2em; text-transform: uppercase; margin-right: -.2em; }
.wk-beschr span { font: 500 11px/1.15 var(--schrift); letter-spacing: .02em; color: var(--text-neben); }
.wk-beschr::after { content: ""; position: absolute; right: -17px; top: 50%; width: 13px; border-top: 1px solid currentColor; opacity: .75; }
@media (min-width: 700px) {
  .wk-beschr strong { font-size: 12px; }
  .wk-beschr span { font-size: 12.5px; }
}
@media (min-width: 900px) { .wk-gross .wk-punkt, .wk-gross .wk-puls { r: 10.5px; } }

/* ---------- a: eigener Abschnitt „So findest du uns“ ---------- */
.wk-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
.wk--a .wk-karte { width: 100%; max-width: 600px; margin-inline: auto; }
.wk-text { min-width: 0; color: var(--text); }
.wk-text h2 { margin: 0; }
.wk-zeile { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: var(--gr-text); line-height: 1.4; color: var(--text); }
.wk-text h2 + .wk-zeile { margin-top: 18px; }
.wk-zeile .symbol { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--text-neben); }
.wk-status { display: block; margin-top: 2px; font-size: var(--gr-klein); color: var(--text-neben); }
.wk-status:empty { display: none; }
.wk-route { margin-top: 26px; width: 100%; }
.wk-route .symbol { width: 22px; height: 22px; flex: none; }
@media (min-width: 560px) { .wk-route { width: auto; } }
@media (min-width: 900px) {
  .wk--a .wk-innen { grid-template-columns: minmax(0, min(640px, 58%)) minmax(280px, 400px); justify-content: center; gap: clamp(48px, 7vw, 104px); }
  .wk--a .wk-karte { max-width: none; margin-inline: 0; }
}
/* kompakt (c, wenn die Ladenfront ausgeschaltet ist): kleinere Karte, kein großer Abstand */
.wk--kompakt .wk-karte { max-width: 460px; }
@media (min-width: 900px) { .wk--kompakt .wk-innen { grid-template-columns: minmax(0, min(460px, 50%)) minmax(260px, 380px); } }

/* ---------- b: Mini-Karte neben der Adresse (Geschwister von .start-adresse, in einer Reihe) ---------- */
.wk-adressreihe { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.wk-adressreihe > .start-adresse { flex: 1 1 auto; min-width: 0; }
.wk-mini { flex: none; width: 100px; }
/* Handy: die Adresse darf neben der Mini-Karte in zwei Zeilen umbrechen; Symbol bleibt beim Text, Route-Knopf darunter */
@media (max-width: 699px) {
  .wk-adressreihe > .start-adresse > span:nth-child(2) { flex: 1 1 calc(100% - 28px); min-width: 0; }
}
@media (min-width: 700px) { .wk-mini { width: 120px; } .wk-adressreihe { align-items: center; } }

/* ---------- c: bei der Ladenfront ---------- */
.start-laden.wk-mit { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
.start-laden.wk-mit .laden-bild { width: min(100%, 400px); }
.wk-laden { width: min(100%, 480px); }
.wk-laden .wk-karte { width: 100%; }
.wk-text--klein { margin-top: 18px; text-align: center; }
.wk-text--klein .wk-h { font-size: 22px; letter-spacing: -.005em; }
.wk-text--klein .wk-zeile { justify-content: center; margin-top: 10px; font-size: var(--gr-klein); }
.wk-routelink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 6px;
  font: 700 15px/1 var(--schrift); color: var(--haupt); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
html[data-look="dunkel"] .wk-routelink { color: var(--akzent); }
.wk-routelink .symbol { width: 18px; height: 18px; flex: none; }
@media (min-width: 900px) {
  .start-laden.wk-mit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; max-width: 1240px; margin-inline: auto; }
  .wk-laden { justify-self: end; }
  .start-laden.wk-mit .laden-bild { justify-self: start; width: min(100%, 440px); }
}