/* 08b-standort — Österreich → Zoom auf Wolfsberg, verschmolzen mit dem Abschluss-Aufruf (Kundenwunsch 18.09.2026).
   Vorher zwei Sektionen (03a-karte vor den Fahrradwelten + 08b-cta am Ende); jetzt EINE Sektion nach dem FAQ, kleiner:
   Sektion 200 statt 260 vh, Karte 820 statt 1180 px. Der Zoom beginnt, sobald die Sektion halb im Bild ist (JS), die Karte öffnet früh.
   Das Panel hängt am Pin (dieselben data-x/y, 08b-standort.js setzt left/top) und wandert mit ihm; es füllt sich in zwei Stufen:
   erst Name + Adresse, zum Schluss Überschrift, Zeile und Buttons der früheren „Wir sehen uns im Geschäft“-Sektion.
   Linien bleiben dank vector-effect:non-scaling-stroke 1 px, Labels sind HTML in viewBox-Prozent. */
/* Flaechenwechsel beim Scrollen (Kundenwunsch 19.09.2026): NUR der Hintergrund wandert von Dunkel nach Hellgrau
   (--vn-color-surface-light, die Farbe der FAQ-Sektion). Die Karte selbst — Flaechen, Linien, Beschriftung — bleibt unveraendert.
   --rad-map-hell setzt 08b-standort.js; es startet, sobald von der FAQ-Sektion daruber nur noch 10 % zu sehen sind. */
.rad-map{position:relative;height:200vh;padding:0;
  --rad-map-bg:color-mix(in srgb,var(--vn-color-surface-light) calc(var(--rad-map-hell,0) * 100%),var(--vn-color-surface-dark));
  background:var(--rad-map-bg)}
.rad-map__stage{background:var(--rad-map-bg);position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden;contain:paint;display:flex;flex-direction:column;justify-content:center}
.rad-map__frame{position:relative;width:min(72%,820px);margin:0 0 0 max(var(--vn-gutter),4vw);aspect-ratio:1000 / 526}
.rad-map__svg{display:block;width:100%;height:100%;overflow:visible}
.rad-map__world{will-change:transform}
/* Die Landesflaechen sind DECKEND in der urspruenglichen Farbe gefuellt (fruher halbtransparent). Sonst schlaegt der
   wandernde Hintergrund durch und Oesterreich wuerde mit aufhellen — es soll sich nur die Flaeche AUSSERHALB aendern.
   Aus demselben Grund ist auch die Grenzlinie vorgemischt statt mit stroke-opacity ueber den Untergrund gelegt. */
.rad-map__land{fill:color-mix(in srgb,var(--vn-color-on-dark) 3%,var(--vn-color-ink));
  stroke:color-mix(in srgb,var(--vn-color-accent) 42%,color-mix(in srgb,var(--vn-color-on-dark) 3%,var(--vn-color-ink)));stroke-opacity:1;stroke-width:1;stroke-linejoin:round}
.rad-map__land--kaernten{fill:color-mix(in srgb,var(--vn-color-accent) 9%,var(--vn-color-ink));
  stroke:color-mix(in srgb,var(--vn-color-accent) 75%,color-mix(in srgb,var(--vn-color-accent) 9%,var(--vn-color-ink)))}
.rad-map__bezirk{fill:color-mix(in srgb,var(--vn-color-accent) 14%,transparent);stroke:var(--vn-color-accent-on-dark);stroke-width:1.25;stroke-linejoin:round;opacity:var(--rad-map-bezirk,0);transition:opacity var(--vn-d-medium)}
.rad-map__labels{position:absolute;inset:0;pointer-events:none}
.rad-map__city{--rad-map-punkt:5px;position:absolute;transform:translate(calc(var(--rad-map-punkt) / -2),-50%);display:inline-flex;align-items:center;gap:7px;font:500 .75rem/1 var(--vn-font-body);letter-spacing:.02em;color:var(--vn-color-on-dark-muted);white-space:nowrap;opacity:var(--rad-map-cities,1);transition:opacity var(--vn-d-medium)}
.rad-map__city--nah{opacity:var(--rad-map-cities-nah,1)}
.rad-map__city i{flex:0 0 auto;width:var(--rad-map-punkt);height:var(--rad-map-punkt);border-radius:50%;background:var(--vn-color-paper);opacity:.7}
/* Pin: Goldpunkt mit atmendem Ring, erscheint mit dem Zoom */
.rad-map__pin{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%) scale(var(--rad-map-pin,0));transition:transform var(--vn-d-slow) var(--vn-ease-out)}
.rad-map__pin i{position:absolute;inset:0;border-radius:50%;background:var(--vn-color-accent-on-dark);box-shadow:0 0 0 6px color-mix(in srgb,var(--vn-color-accent) 22%,transparent),0 0 24px color-mix(in srgb,var(--vn-color-accent-on-dark) 70%,transparent)}
.rad-map__pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--vn-color-accent-on-dark);opacity:0;animation:rad-map-ring 2400ms var(--vn-ease-out) infinite}
@keyframes rad-map-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}

/* Panel rechts UNTEN neben dem Standort (17.09.2026): Oberkante 24 px unter dem Pin, linke Kante 96 px rechts davon —
   08b-standort.js legt den Pin so, dass die Karte am rechten Shell-Rand endet und Kärnten mittig liegt. Erscheint mit dem Zoom (Stufe 1). */
.rad-map__copy{position:absolute;width:min(30em,32vw);padding:24px 28px;border-radius:var(--vn-radius-xl);pointer-events:auto;
  transform:translate(96px,24px);transform-origin:0 0;
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:var(--rad-card-shadow);
  opacity:var(--rad-map-copy,0);transition:opacity var(--vn-d-slow) var(--vn-ease-out)}
/* Kopf: Text links, rechts ein kleines 3:2-Bild vom Schauraum (17.09.2026) */
.rad-map__head{display:flex;align-items:center;gap:18px}
.rad-map__head-text{flex:1 1 auto;min-width:0}
.rad-map__room{flex:0 0 auto;width:140px;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--vn-radius-md)}
/* Gruß: Daniels rundes Porträt (klein) mit Namen neben der Überschrift */
.rad-map__greet{display:flex;align-items:center;gap:18px}
.rad-map__person{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.rad-map__portrait{display:block;width:60px;height:60px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--vn-color-ink),0 0 0 3px color-mix(in srgb,var(--vn-color-accent) 70%,transparent)}
/* Name + Rolle (01.10.2026) unter der Überschrift neben dem Porträt — unter dem 60-px-Porträt war dafür kein Platz */
.rad-map__person-name{margin:6px 0 0;font:600 .6875rem/1.3 var(--vn-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--vn-color-accent-on-dark)}
.rad-map__place{font:500 1.125rem/1.3 var(--vn-font-display);letter-spacing:-.02em;color:var(--vn-color-on-dark)}
.rad-map__addr{margin-top:4px;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
/* Stufe 2: der Handlungsaufruf fließt hinein — Höhe über grid-template-rows animiert (auto lässt sich nicht animieren) */
.rad-map__cta{display:grid;grid-template-rows:var(--rad-map-cta,0fr);opacity:var(--rad-map-cta-o,0);
  transition:grid-template-rows var(--vn-d-slower) var(--vn-ease-out),opacity var(--vn-d-slow) var(--vn-ease-out)}
.rad-map__cta>*{overflow:hidden;min-height:0}
/* Waehrend die volle Kartenhoehe gemessen wird, darf nichts animieren (08b-standort.js, kartenHoeheMessen). */
.rad-map__stage.is-messen .rad-map__cta{transition:none}
.rad-map__cta-inner{padding:22px 0 0 4px;margin-top:22px;border-top:1px solid var(--vn-color-divider-dark)}   /* 4 px links: der Goldring des Porträts (3 px Schatten) wurde vom overflow:hidden der Aufklapp-Hülle abgeschnitten */
.rad-map__title{margin:0;font:var(--rad-w-display) var(--rad-fs-h2-klein)/var(--rad-lh-h2-klein) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);color:var(--vn-color-on-dark);text-wrap:balance}
.rad-map__greet{margin-bottom:18px}
/* Öffnungszeiten (30.09.2026): Statuszeile mit Punkt (grün = geöffnet), darunter die Tage; der heutige Tag hell und fett */
.rad-map__zeiten{margin-bottom:20px;--rad-map-offen:color-mix(in srgb,var(--vn-color-positive) 55%,var(--vn-color-on-dark))}
.rad-map__status{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-on-dark)}
.rad-map__status[hidden]{display:none}
.rad-map__status i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--vn-color-on-dark-muted)}
.rad-map__status.is-offen i{background:var(--rad-map-offen);box-shadow:0 0 0 4px color-mix(in srgb,var(--rad-map-offen) 22%,transparent)}
.rad-map__tage{margin:0;display:grid;gap:3px}
.rad-map__tag{display:grid;grid-template-columns:4.25em minmax(0,1fr);gap:12px;font:400 var(--vn-text-sm)/1.55 var(--vn-font-body);color:var(--vn-color-on-dark-muted)}
.rad-map__tag dt,.rad-map__tag dd{margin:0}
.rad-map__tag dd{display:flex;flex-wrap:wrap;column-gap:10px}
.rad-map__tag dd span{white-space:nowrap}
.rad-map__tag.is-heute{font-weight:600;color:var(--vn-color-on-dark)}
/* Ortsname am Pin, links davon — rechts sitzt die Adresskarte */
.rad-map__pin-name{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;
  font:600 .8125rem/1 var(--vn-font-body);letter-spacing:.01em;color:var(--vn-color-on-dark)}
.rad-map__actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.rad-map__actions .rad-text-link{color:var(--vn-color-on-dark)}
/* Quellenzeile (Lizenzpflicht, 30.09.2026 lesbar gemacht): Farbe wandert mit der Fläche von Dunkel nach Hell */
.rad-map__credit{position:absolute;right:var(--vn-gutter);bottom:14px;margin:0;font:400 .6875rem/1.4 var(--vn-font-body);pointer-events:none;
  color:color-mix(in srgb,var(--vn-color-ink-muted) calc(var(--rad-map-hell,0) * 100%),var(--vn-color-on-dark-muted))}
.rad-map__credit--karte{display:none;position:static;margin-top:16px;color:var(--vn-color-on-dark-muted);opacity:.8}

@media(max-width:1200px){
  .rad-map__frame{width:min(66%,720px)}
  .rad-map__copy{width:min(26em,34vw);padding:20px 22px}
}
@media(max-width:1000px){
  /* Karte mittig, Panel fest unten (der Platz rechts reicht nicht mehr) */
  .rad-map{height:190vh}
  .rad-map__frame{width:calc(100% - 2 * var(--vn-gutter));margin-inline:auto}
  /* position:fixed greift hier auf die Bühne (contain:paint macht sie zum Bezugsrahmen), nicht auf den Kartenrahmen —
     der ist auf dem Handy nur ~180 px hoch und stünde mitten im Bild; die Karte säße halb über dem oberen Rand. */
  .rad-map__copy{position:fixed;left:var(--vn-gutter)!important;right:var(--vn-gutter);top:auto!important;bottom:max(20px,3vh);width:auto;max-width:34em;transform:none}
  .rad-map__credit{display:none}
  .rad-map__credit--karte{display:block}
}
@media(max-width:650px){
  .rad-map{height:180vh}
  .rad-map__city{font-size:var(--vn-text-2xs)}
  .rad-map__copy{padding:18px 20px}
  .rad-map__room{width:104px}
  .rad-map__portrait{width:52px;height:52px}
  .rad-map__greet{margin-bottom:14px}
  .rad-map__land-zeile{display:none}
  /* 30.09.2026: Öffnungszeiten machen die Karte höher — Knöpfe nebeneinander und engere Abstände, damit auf kleinen
     Handys (375 × 667) der Pin über der Karte frei bleibt. Bei sehr schmalen Geräten bricht der Textlink um. */
  .rad-map__cta-inner{margin-top:16px;padding-top:16px}
  .rad-map__zeiten{margin-bottom:16px}
  .rad-map__actions{margin-top:0;gap:12px 20px}
  .rad-map__credit--karte{margin-top:12px}
}
/* Kleine Handys (Höhe bis 700 px): Schauraumbild und Namenszeile unter dem Porträt weichen, sonst deckt die Karte den Pin */
@media(max-width:650px) and (max-height:700px){
  .rad-map__room,.rad-map__person-name{display:none}
  .rad-map__portrait{width:44px;height:44px}
}
/* 24.09.2026: Bühne mit 100dvh — iOS blendet beim Scrollen die Browserleiste aus, der sichtbare Bereich wächst. Mit 100svh
   blieb die Bühne auf der kleinen Höhe stehen: die unten verankerte Adresskarte rückte hoch über den Punkt, darunter
   schaute die nächste Fläche heraus. dvh folgt der Leiste; die Pin-Lage rechnet das Skript aus der Bühne selbst. */
/* reduced-motion / ohne JS: Endzustand statisch, Karte über der Adresse statt sticky */
@media(prefers-reduced-motion:reduce){
  .rad-map{height:auto}
  .rad-map__stage{position:relative;height:auto;min-height:0;padding:var(--vn-section-y) 0}
  .rad-map__frame{width:calc(100% - 2 * var(--vn-gutter));margin-inline:auto}
  .rad-map__copy{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;max-width:34em;margin:32px auto 0}
  .rad-map__pin::after{animation:none}
  .rad-map__world,.rad-map__bezirk,.rad-map__city,.rad-map__pin,.rad-map__copy,.rad-map__cta{transition:none}
}
html:not(.rad-js) .rad-map{height:auto}
html:not(.rad-js) .rad-map__stage{position:relative;height:auto;padding:var(--vn-section-y) 0}
html:not(.rad-js) .rad-map__frame{width:calc(100% - 2 * var(--vn-gutter));margin-inline:auto}
html:not(.rad-js) .rad-map__copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:34em;margin:32px auto 0;opacity:1}
html:not(.rad-js) .rad-map__cta{grid-template-rows:1fr;opacity:1}
html:not(.rad-js) .rad-map__pin{transform:translate(-50%,-50%)}