/* Eigenständige Motion-Illustration: Berlin zeichnet sich → Prenzlauer Berg pulsiert → Nadel fliegt ein → Zoom → Laden.
   --px / --py (Standort in Pixeln innerhalb der Bühne) setzt berlin-motion.js. Gesamtdauer 9 s. */
.berlin-map{--px:48%;--py:43%;--d:9s;background:radial-gradient(circle at 50% 42%,#2b3038 0,#171a1f 60%,#101215 100%)}
.berlin-map::after{background:linear-gradient(130deg,rgba(255,255,255,.05),transparent 48%)}
.berlin-vector{position:absolute;inset:0;z-index:1;overflow:hidden}
/* Grundaufbau der Ebenen über der Karte */
.berlin-map .map-intro{position:absolute;right:6%;top:8%;font:700 clamp(1.3rem,3vw,2.3rem)/.95 Montserrat,sans-serif;letter-spacing:-.05em;text-align:right}
.berlin-map .map-intro span{font:400 .42em/1.4 'Open Sans',sans-serif;letter-spacing:.02em}
.berlin-map .prenzlauer-pulse{position:absolute;width:1px;height:1px;opacity:0}
.berlin-map .prenzlauer-pulse b{position:absolute;white-space:nowrap;font-family:Montserrat,sans-serif;font-weight:700}
.berlin-map .location-pin{position:absolute;opacity:0}
.berlin-map .location-pin span{display:grid;place-items:center;width:44px;height:44px;border:3px solid #fff;border-radius:50% 50% 50% 0;background:var(--red);box-shadow:0 7px 18px rgba(0,0,0,.5);transform:rotate(-45deg)}
.berlin-map .location-label{position:absolute;padding:7px 11px;border-radius:7px;background:#fff;color:#16181d;opacity:0;white-space:nowrap;font:700 .76rem Montserrat,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.berlin-map .location-label strong{display:block}
.berlin-map .location-label small{display:block;color:#5d6168;font:400 .7rem 'Open Sans',sans-serif}
.berlin-map .shop-photo{background:linear-gradient(180deg,transparent 45%,rgba(10,11,13,.82)),url('/assets/bilder/IMG-20250603-WA0045-scaled.webp') center/cover}
.berlin-map .shop-caption strong{font-size:1.45rem}.berlin-map .shop-caption span{color:#e6e6e8}
/* Bis berlin-motion.js startet, steht alles im Anfangszustand */
.berlin-map:not(.laeuft) *,.berlin-map:not(.laeuft) *::before,.berlin-map:not(.laeuft) *::after{animation-play-state:paused!important}
.berlin-vector svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:var(--px) var(--py);animation:bm-zoom var(--d) cubic-bezier(.5,0,.1,1) both}

/* 1) Bezirke zeichnen sich nacheinander, dann füllen sie sich */
.berlin-vector .bezirk{fill:#252a32;fill-opacity:0;stroke:#9aa1ab;stroke-opacity:.75;stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1800;stroke-dashoffset:1800;animation:bm-draw 1.2s ease-out forwards}
.berlin-vector .bezirk:nth-child(2){animation-delay:.07s}.berlin-vector .bezirk:nth-child(3){animation-delay:.14s}.berlin-vector .bezirk:nth-child(4){animation-delay:.21s}.berlin-vector .bezirk:nth-child(5){animation-delay:.28s}.berlin-vector .bezirk:nth-child(6){animation-delay:.35s}.berlin-vector .bezirk:nth-child(7){animation-delay:.42s}.berlin-vector .bezirk:nth-child(8){animation-delay:.49s}.berlin-vector .bezirk:nth-child(9){animation-delay:.56s}.berlin-vector .bezirk:nth-child(10){animation-delay:.63s}.berlin-vector .bezirk:nth-child(11){animation-delay:.70s}.berlin-vector .bezirk:nth-child(12){animation-delay:.77s}

/* 2) Prenzlauer Berg (echte Ortsteilgrenze) leuchtet rot auf und pulsiert */
.berlin-vector .pb-flaeche{fill:#dc1f2f;stroke:none;opacity:0;animation:bm-pb-fill var(--d) ease-in-out both}
.berlin-vector .pb-kontur{fill:none;stroke:#ff4a57;stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:bm-pb-pulse var(--d) ease-out both}

/* Standortpunkt im SVG */
.berlin-vector .standort{opacity:0;animation:bm-target var(--d) both}
.berlin-vector .standort-punkt{fill:#fff}
.berlin-vector .standort-ring{fill:none;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.berlin-vector .ring-eins{animation:bm-ring 1.4s ease-out infinite}.berlin-vector .ring-zwei{animation:bm-ring 1.4s ease-out .7s infinite}

/* Titel */
.berlin-map .map-intro{z-index:2;color:#f2f3f4;animation:bm-title var(--d) both}.berlin-map .map-intro span{color:#aab0b8}

/* Beschriftung Prenzlauer Berg */
.berlin-map .prenzlauer-pulse{left:var(--px);top:var(--py);z-index:4;animation:bm-pb-label var(--d) both}
.berlin-map .prenzlauer-pulse span,.berlin-map .prenzlauer-pulse:before,.berlin-map .prenzlauer-pulse:after{display:none}
.berlin-map .prenzlauer-pulse b{left:38px;top:-74px;padding:6px 10px;border-radius:6px;background:rgba(16,18,21,.82);color:#fff;font-size:.78rem;line-height:1.1;text-shadow:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}

/* 3) Nadel fliegt von oben ein; Spitze sitzt exakt auf --px/--py */
.berlin-map .location-pin{left:var(--px);top:var(--py);z-index:5;animation:bm-pin var(--d) cubic-bezier(.22,.9,.3,1) both}
.berlin-map .location-pin span{font-size:0}
.berlin-map .location-pin span:after{content:'';width:13px;height:13px;border-radius:50%;background:#fff}
.berlin-map .location-pin:after{content:'';position:absolute;left:50%;top:calc(100% + 8px);width:26px;height:8px;margin-left:-13px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(3px);animation:bm-shadow var(--d) both}
.berlin-map .location-label{left:calc(var(--px) + 30px);top:calc(var(--py) - 20px);z-index:5;animation:bm-label var(--d) both}

/* 4) Zoom → 5) echtes Ladenfoto */
.berlin-map .shop-photo{z-index:6;animation:bm-shop var(--d) both}
.berlin-map .shop-caption{z-index:7;animation:bm-caption var(--d) both}

/* Zeitplan (9 s): 0–1.9 zeichnen · 2.0–4.0 Prenzlauer Berg · 3.9–4.9 Nadel · 5.4–7.0 Zoom · 6.8–8.0 Laden */
@keyframes bm-draw{60%{fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
@keyframes bm-pb-fill{0%,22%{opacity:0}29%{opacity:.95}36%{opacity:.6}43%{opacity:.95}50%{opacity:.6}57%,100%{opacity:.85}}
@keyframes bm-pb-pulse{0%,22%{opacity:0;transform:scale(1)}29%{opacity:1;transform:scale(1)}36%{opacity:0;transform:scale(1.35)}37%{opacity:1;transform:scale(1)}44%{opacity:0;transform:scale(1.35)}45%{opacity:1;transform:scale(1)}52%{opacity:0;transform:scale(1.35)}53%,100%{opacity:.9;transform:scale(1)}}
@keyframes bm-target{0%,50%{opacity:0}55%,74%{opacity:1}80%,100%{opacity:0}}
@keyframes bm-ring{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(1.8)}}
@keyframes bm-title{0%,55%{opacity:1}63%,100%{opacity:0}}
@keyframes bm-pb-label{0%,25%{opacity:0;transform:translateY(6px)}31%,56%{opacity:1;transform:none}62%,100%{opacity:0}}
@keyframes bm-pin{0%,43%{opacity:0;transform:translate(-50%,calc(-100% - 320px)) scale(.9)}52%{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1)}56%{transform:translate(-50%,calc(-100% - 24px))}60%,100%{opacity:1;transform:translate(-50%,calc(-100% - 10px))}}
@keyframes bm-shadow{0%,43%{opacity:0;transform:scale(.3)}52%,100%{opacity:1;transform:none}}
@keyframes bm-label{0%,57%{opacity:0;transform:translateX(-8px)}62%,72%{opacity:1;transform:none}77%,100%{opacity:0}}
@keyframes bm-zoom{0%,60%{transform:scale(1)}78%,100%{transform:scale(4.2)}}
@keyframes bm-shop{0%,76%{opacity:0;transform:scale(1.1)}89%,100%{opacity:1;transform:none}}
@keyframes bm-caption{0%,86%{opacity:0;transform:translateY(12px)}96%,100%{opacity:1;transform:none}}

@media(max-width:540px){.berlin-map .prenzlauer-pulse b{font-size:.68rem;left:16px;top:-56px}.berlin-map .location-label{font-size:.66rem}}

/* Ohne Animation: fertige Karte mit Markierung, kein Foto-Überblender */
@media(prefers-reduced-motion:reduce){.berlin-vector svg,.berlin-vector .bezirk,.berlin-vector .pb-flaeche,.berlin-vector .pb-kontur,.berlin-vector .standort,.berlin-vector .standort-ring,.berlin-map .map-intro,.berlin-map .prenzlauer-pulse,.berlin-map .location-pin,.berlin-map .location-pin:after,.berlin-map .location-label,.berlin-map .shop-photo,.berlin-map .shop-caption{animation:none!important}.berlin-vector .bezirk{stroke-dashoffset:0;fill-opacity:1}.berlin-vector .pb-flaeche{opacity:.85}.berlin-vector .pb-kontur{opacity:.9}.berlin-map .location-pin{opacity:1;transform:translate(-50%,calc(-100% - 10px))}.berlin-map .location-label,.berlin-map .prenzlauer-pulse{opacity:1}.berlin-map .shop-photo,.berlin-map .shop-caption{opacity:0}}