/* ===== Level-Roadmap als Karte (js/roadmap-map.js) ===== */
.rmap { position: relative; width: 100%; margin: 10px 0 4px; overflow: hidden; border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 6px 18px rgba(20,40,70,.18); }
/* Boden: ein Verlauf ueber die ganze Karte (Farbstopps je Standort aus
   js/roadmap-map.js) - keine Masken, die waren beim Scrollen auf dem Handy teuer */
.rmap-ground { position: absolute; inset: 0; }
.rmap-dots { position: absolute; left: 0; right: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--dot) 0 3px, transparent 4px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 70%, var(--dot) 0 2px, transparent 3px) 0 0 / 38px 38px; }

/* Strasse: Schatten, Schokoladen-Belag, weisse Streifen; geschaffter Teil golden.
   Mehrere kleine SVGs (Abschnitte), je ueber die volle Breite. */
.rmap-road { position: absolute; left: 0; width: 100%; overflow: visible; }
.rmap-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rmap-road .r-shadow { stroke: rgba(40,30,20,.28); stroke-width: 22px; transform: translateY(5px); }
.rmap-road .r-base { stroke: #8a5a2b; stroke-width: 17px; }
/* --off: Laenge bis zum Abschnittsanfang (Entwurfsraster), --k: Massstab zum Bildschirm */
.rmap-road .r-stripe { stroke: #fff6e6; stroke-width: 11px; stroke-dasharray: 9 9;
  stroke-dashoffset: calc(var(--off, 0) * var(--k, 1) * 1px); }
.rmap-road .r-done { stroke: #e0a020; stroke-width: 17px; }
.rmap-road .r-done-stripe { stroke: #fff2b8; stroke-width: 11px; stroke-dasharray: 9 9;
  stroke-dashoffset: calc(var(--off, 0) * var(--k, 1) * 1px); }

/* Level-Kugeln: glaenzend, mit dunklerem Sockel (3D) */
.rmap-node { position: absolute; z-index: 5; display: grid; place-items: center; width: 50px; height: 45px; margin: -24px 0 0 -25px;
  background: center / contain no-repeat; color: #fff; font-weight: 900; font-size: 17px; line-height: 1; }
/* Schatten unter der Kugel (ersetzt filter: drop-shadow, siehe js/roadmap-map.js) */
.rmap-shade { position: absolute; z-index: 5; width: 46px; height: 30px; margin: -6px 0 0 -23px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.3) 62%, rgba(0,0,0,0)); }
/* Zahl sitzt auf der Kappe (oberer Teil des Bildes), mit Kontur in der Sockelfarbe */
.rmap-node b { position: relative; top: -5px; letter-spacing: -.5px;
  -webkit-text-stroke: 4px var(--c3); paint-order: stroke fill; text-shadow: 0 2px 0 var(--c3); }
.rmap-node.is-locked { color: #f4f6f8; }
.rmap-node.is-current { width: 62px; height: 56px; margin: -30px 0 0 -31px; font-size: 21px;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(255,205,60,.95)) drop-shadow(0 4px 3px rgba(0,0,0,.25));
  animation: rmap-pulse 1.6s ease-in-out infinite; will-change: transform; }
.rmap-node.is-current b { top: -6px; }
@keyframes rmap-pulse { 50% { transform: scale(1.07); } }
.rmap-star { position: absolute; bottom: -6px; right: -7px; width: 20px; height: auto; }

/* Landmarken der Standorte (Gebaeude) mit Banner */
.rmap-landmark { position: absolute; z-index: 2; display: grid; justify-items: center; width: 96px; margin: -48px 0 0 -48px;
  padding: 0; border: 0; background: none; cursor: pointer; }
.rmap-landmark img { width: 84px; height: 84px; border-radius: 20px; object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 8px 0 rgba(0,0,0,.12), 0 12px 18px rgba(0,0,0,.3); }
.rmap-landmark.is-locked img { filter: grayscale(.7) brightness(.85); }
.rmap-ribbon { position: relative; margin-top: -10px; padding: 4px 12px; border-radius: 6px; white-space: nowrap;
  color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .4px; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(180deg, #ff8fb1, #e0517f); box-shadow: 0 3px 0 #a8355a, 0 6px 10px rgba(0,0,0,.25); }
.rmap-landmark.is-done .rmap-ribbon { background: linear-gradient(180deg, #6fe08a, #2fae4c); box-shadow: 0 3px 0 #1d7a33, 0 6px 10px rgba(0,0,0,.25); }

/* Freischaltungen: runde Plakette neben dem Level */
.rmap-badge { position: absolute; z-index: 4; display: grid; justify-items: center; width: 64px; margin: -27px 0 0 -32px;
  padding: 0; border: 0; background: none; cursor: pointer; }
.rmap-badge img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px #ffd23f, 0 0 0 5px #fff, 0 6px 12px rgba(0,0,0,.3); }
.rmap-badge.is-locked img { filter: grayscale(.6) brightness(.9); box-shadow: 0 0 0 3px #b8c2cf, 0 0 0 5px #fff, 0 6px 12px rgba(0,0,0,.25); }
.rmap-badge-name { margin-top: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(15,30,50,.82); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1.25; text-align: center; max-width: 96px; }
.rmap-goal img { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255,210,63,.9); }

/* Max an der aktuellen Position */
.rmap-you { position: absolute; z-index: 6; display: grid; justify-items: center; margin: -78px 0 0 -40px; width: 80px; pointer-events: none;
  animation: rmap-bob 2.2s ease-in-out infinite; will-change: transform; }
.rmap-you img { height: 62px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
.rmap-you span { margin-top: -4px; padding: 2px 8px; border-radius: 99px; background: #1f8fff; color: #fff;
  font-size: 9.5px; font-weight: 900; letter-spacing: .5px; box-shadow: 0 2px 6px rgba(31,143,255,.45); }
@keyframes rmap-bob { 50% { transform: translateY(-5px); } }

.rmap-more { position: absolute; left: 50%; z-index: 2; transform: translateX(-50%); padding: 8px 14px; border-radius: 14px;
  background: rgba(255,255,255,.85); color: #4b6079; font-size: 11px; text-align: center; box-shadow: 0 4px 12px rgba(40,70,110,.2); }

/* Details-Karte beim Antippen */
.rmap-info { position: absolute; left: 10px; right: 10px; z-index: 10; display: grid; grid-template-columns: 52px 1fr; gap: 10px;
  padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(15,30,50,.35); }
.rmap-info[hidden] { display: none; }   /* display:grid oben wuerde [hidden] sonst ueberschreiben */
.rmap-info img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.rmap-info b { display: block; color: #16416d; font-size: 14px; }
.rmap-info p { margin: 2px 0; color: #4b6079; font-size: 11.5px; line-height: 1.35; }
.rmap-info small { font-size: 10.5px; font-weight: 800; color: #b07a00; }
.rmap-info small.is-done { color: #1f9f55; }

@media (prefers-reduced-motion: reduce) { .rmap-node.is-current, .rmap-you { animation: none; } }

/* Deko (Baeume, Haeuser, Boote ...) und Wolken im Cloud-HQ-Bereich */
.rmap-deco { position: absolute; z-index: 1; transform: translate(-50%, -70%); pointer-events: none; line-height: 0; }
.rmap-deco img { display: block; width: auto; }
/* Bodenschatten unter der Deko (statt filter: drop-shadow auf jedem Bild) */
.rmap-deco::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -7px; height: 16px;
  background: radial-gradient(closest-side, rgba(0,0,0,.2), rgba(0,0,0,0)); }
.rmap-cloud { position: absolute; z-index: 1; width: 90px; height: 34px; transform: translate(-50%, -50%) scale(var(--s, 1));
  border-radius: 40px; background: #fff; box-shadow: 0 6px 10px rgba(80,120,170,.18); pointer-events: none; }
.rmap-cloud::before, .rmap-cloud::after { content: ''; position: absolute; border-radius: 50%; background: #fff; }
.rmap-cloud::before { width: 40px; height: 40px; left: 14px; top: -18px; }
.rmap-cloud::after { width: 32px; height: 32px; right: 16px; top: -12px; }