/* kv-karte.css — 3D-Relief-Karte Österreich mit Nadeln (Startseite #karte, Kostenrechner #staedte).
   P33 (26.10.2026): aus index.html ausgelagert, Regeln unverändert, nur .map-hero → .kv-karte (gleiche Spezifität).
   Markup: <div class="kv-karte"><div class="map"><img class="map-img"> + je Stadt .ping-puls, .ping (Klickfläche,
   aria-hidden) und a.ping-lbl (Name, Varianten --left/--top)</div></div>. JS: /js/kv-karte.js.
   Teil 1 = frühere Grundregeln aus kv-base (index), Teil 2 = früherer Block <style id="kv-map-pings">. */

/* ── Teil 1: Grundregeln (bis 26.10. in kv-base der Startseite) ── */
.map{position:relative;width:100%;will-change:transform;transition:transform 680ms cubic-bezier(0.55,0,0.15,1)}.ping{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);z-index:2;pointer-events:none}.kv-karte .ping{width:10px;height:10px;pointer-events:auto;cursor:pointer}.kv-karte .ping::before{inset:3px}.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:pingPulse 3s ease-out infinite;animation-delay:var(--delay,0s);z-index:0}.ping::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--white);z-index:1}.ping{box-shadow:0 0 0 2px var(--white)}@keyframes pingPulse{0%{transform:scale(1);opacity:0.6}80%,100%{transform:scale(3.5);opacity:0}}.ping-lbl{position:absolute;font-size:10px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:var(--tr-normal);transform:translate(10px,3px);pointer-events:none;white-space:nowrap;z-index:3}.kv-karte .ping-lbl{font-size:11px;color:var(--ink);font-weight:var(--fw-semibold);letter-spacing:var(--tr-base);transform:translate(8px,-50%);pointer-events:auto;cursor:pointer;padding:3px 8px;border-radius:var(--r-full);text-shadow:0 0 3px rgba(255,255,255,0.9),0 0 6px rgba(255,255,255,0.6);white-space:nowrap;transition:background var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth),box-shadow var(--dur-base) var(--ease-smooth),text-shadow var(--dur-base) var(--ease-smooth)}.kv-karte .ping-lbl--left{transform:translate(calc(-100% - 8px),-50%);text-align:right}.kv-karte .ping-lbl--top{transform:translate(-50%,calc(-100% - 8px));text-align:center}.kv-karte .ping-lbl{display:inline-flex;align-items:center}.kv-karte .ping-lbl .pre,.kv-karte .ping-lbl .arr{display:inline-block;max-width:0;overflow:hidden;opacity:0;transition:max-width var(--dur-base) var(--ease-smooth),opacity var(--dur-base) var(--ease-smooth),margin var(--dur-base) var(--ease-smooth);white-space:pre}.kv-karte .ping-lbl.is-hov .pre,.kv-karte .ping-lbl.is-demo .pre,.kv-karte .ping-lbl.is-active .pre{max-width:60px;opacity:1;margin-right:2px}.kv-karte .ping-lbl.is-hov .arr,.kv-karte .ping-lbl.is-demo .arr,.kv-karte .ping-lbl.is-active .arr{max-width:20px;opacity:1;margin-left:4px}.kv-karte .ping-lbl.is-hov{background:var(--teal);color:var(--white);z-index:10;box-shadow:0 2px 6px -2px rgba(61,139,122,.4);text-shadow:none}.kv-karte .ping.is-hov{width:14px;height:14px;box-shadow:0 3px 10px -2px rgba(61,139,122,.55)}.kv-karte .ping.is-hov::before{inset:3px;background:var(--teal)}.kv-karte .ping.is-hov::after{animation:pingPulseStrong 1.6s ease-out infinite}@keyframes pingPulseStrong{0%{transform:scale(1);opacity:0.75}70%,100%{transform:scale(4.6);opacity:0}}.kv-karte .ping-lbl.is-active{background:var(--ink);color:var(--white);z-index:10;box-shadow:0 2px 6px -2px rgba(28,43,58,.35);text-shadow:none}.kv-karte .ping.is-active{background:var(--ink);z-index:4;pointer-events:auto;cursor:pointer}.kv-karte .ping.is-active::before{background:var(--ink)}.kv-karte .ping.is-active::after{animation-play-state:paused;opacity:0}.kv-karte .ping-lbl.is-demo{background:var(--teal);color:var(--white);z-index:9;box-shadow:0 2px 6px -2px rgba(61,139,122,.35);text-shadow:none}.kv-karte .ping-lbl{transition-property:box-shadow}.kv-karte .ping.is-demo{background:var(--teal);z-index:3;box-shadow:0 2px 6px -1px rgba(61,139,122,.45)}.kv-karte .ping.is-demo::before{background:var(--teal)}.kv-karte .ping.is-demo::after{animation-play-state:paused;opacity:0}@media (max-width:640px){.kv-karte .ping-lbl{font-size:10px;padding:2px 6px}.ping::after{animation:pingPulseSm 3s ease-out infinite;animation-delay:var(--delay,0s)}@keyframes pingPulseSm{0%{transform:scale(1);opacity:0.5}80%,100%{transform:scale(2.4);opacity:0}}.kv-karte .ping.is-hov::after{animation:pingPulseStrongSm 1.6s ease-out infinite}@keyframes pingPulseStrongSm{0%{transform:scale(1);opacity:0.65}70%,100%{transform:scale(3);opacity:0}}}@media (max-width:480px){.kv-karte .ping-lbl{font-size:9px;padding:2px 5px;letter-spacing:0}}@media (min-width:641px){.kv-karte .ping-lbl[data-city="linz"]{transform:translate(calc(-100% - 8px),-50%);text-align:right}}

/* ── Teil 2 ── */
/* Hero-Karte als 3D-Render (Punkt 26, Fabio 21.10.: Runde 5 d2, Location-Pins Navy im Bild).
   Lagen in % aus out/3d/karte/lagen_r5_d2.json: .ping = unsichtbare Klickfläche und
   .ping-lbl am Nadelkopf, .ping-puls an der Nadelspitze. --r = halber Kopf-Ø (2,2 % der Bildbreite).
   Klick-Zoom, Demo-Umlauf und Hover-Kopplung: /js/kv-karte.js (pinClick, Demo, Hover). */
.kv-karte .map{container-type:inline-size;--r:1.1cqw}
/* Keine Dauer-Ebene (will-change setzt pinClick erst beim Zoom): sonst wird die überlappende Marke als eigene Ebene
   gerastert und gedreht → unscharf (Fabio 21.10.). isolation hält die z-index-Ordnung wie bisher in der Karte. */
.kv-karte .map{will-change:auto;isolation:isolate}
.map-img{display:block;width:100%;height:auto;aspect-ratio:1095/563}
.kv-karte .map .ping{width:max(30px,4cqw);height:auto;aspect-ratio:1;background:none;box-shadow:none;animation:none;-webkit-tap-highlight-color:transparent;z-index:4}
.kv-karte .map .ping::before,.kv-karte .map .ping::after{content:none}
.kv-karte .ping-puls{position:absolute;z-index:2;width:1.6%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
/* Ring wächst über inset und blendet über die Randfarbe aus — bewusst ohne transform/opacity: solche Endlos-Animationen
   legt der Browser auf eigene Ebenen und rastert darüberliegende Namen und die Marke mit → unscharf (Fabio 21.10.) */
.kv-karte .ping-puls::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid transparent;animation:kvPinRing 3.6s cubic-bezier(.22,.61,.36,1) infinite;animation-delay:calc(1.1s + var(--delay,0s))}
@keyframes kvPinRing{0%{inset:-1px;border-color:rgba(61,139,122,.7)}70%,100%{inset:-80%;border-color:rgba(61,139,122,0)}}

/* Namen neben den Pin-Köpfen; Hover/Demo färbt Teal (Grundregeln Teil 1) */
.kv-karte .ping-lbl{text-decoration:none;animation:kvPinFade .7s ease-out backwards;animation-delay:.85s}
/* „Nach“ und Pfeil blenden über die Textfarbe statt opacity ein: opacity-Übergänge (Demo-Umlauf alle paar Sekunden)
   legt der Browser auf eigene Ebenen und rastert Pins und Marke darüber mit → unscharf (Fabio 21.10.) */
.kv-karte .ping-lbl .pre,.kv-karte .ping-lbl .arr{opacity:1;color:transparent;transition:max-width var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth),margin var(--dur-base) var(--ease-smooth)}
.kv-karte .ping-lbl.is-hov .pre,.kv-karte .ping-lbl.is-demo .pre,.kv-karte .ping-lbl.is-active .pre,.kv-karte .ping-lbl.is-hov .arr,.kv-karte .ping-lbl.is-demo .arr,.kv-karte .ping-lbl.is-active .arr{color:inherit}
/* Pfeil zeigt zum Pin: rechts stehende Namen „←“ vorn, oben stehende „↓“ */
.kv-karte .ping-lbl.is-hov .arr:first-child,.kv-karte .ping-lbl.is-demo .arr:first-child,.kv-karte .ping-lbl.is-active .arr:first-child{margin-left:0;margin-right:4px}
.kv-karte .ping-lbl[data-city]{transform:translate(calc(var(--r) + 2px),-50%);text-align:left}
.kv-karte .ping-lbl--left[data-city]{transform:translate(calc(-100% - var(--r) - 2px),-50%);text-align:right}
.kv-karte .ping-lbl--top[data-city]{transform:translate(-50%,calc(-100% - var(--r) - 1px));text-align:center}
@keyframes kvPinFade{0%{opacity:0}100%{opacity:1}}
@container (max-width:600px){.kv-karte .ping-lbl{font-size:10px;padding:2px 6px}}
@container (max-width:440px){.kv-karte .ping-lbl{font-size:9px;padding:2px 5px;letter-spacing:0}.kv-karte .ping-lbl .pre{display:none}}
@media (prefers-reduced-motion:reduce){
  .kv-karte .ping-lbl{animation:none!important}
  .kv-karte .ping-puls::after{animation:none}
}