/* =====================================================================
   ASCEND STUDIOS — MAP LAYER
   Alles, was zur Kartenbühne gehört: Pins, Detail-Panel, Filmstreifen.
   Wird von index.html (Modus "hero") und karte.html (Modus "full") geteilt.
   Farben und Maße kommen aus style.css — hier keine neuen Tokens.
   ===================================================================== */

.mapstage {
  --dock-h: 186px;
  --panel-w: 408px;
  position: relative;
  padding: 0;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.mapstage--hero { height: 100svh; min-height: 620px; }
.mapstage--full { position: fixed; inset: 0; height: 100%; }

.mapstage .ms-canvas { position: absolute; inset: 0; background: #14110C; }
.mapstage .leaflet-container { background: #14110C; font-family: var(--font-body); }

/* Kacheln ins Markenbraun ziehen statt Standard-Blaugrau */
.ms-tint {
  position: absolute;
  inset: 0;
  z-index: 250;          /* Kacheln 200, Pins 600 — die Tönung liegt dazwischen */
  pointer-events: none;
  background: rgba(58, 42, 26, 0.34);
}

/* Lichtkanten, damit die UI lesbar bleibt */
.ms-veil { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 450; }
.ms-veil--top { top: 0; height: 280px; background: linear-gradient(to bottom, rgba(20,17,12,0.78), transparent); }
.ms-veil--bottom { bottom: 0; height: calc(var(--dock-h) + 140px); background: linear-gradient(to top, rgba(20,17,12,0.92) 36%, transparent); }

/* ---------- HUD (Inhalt kommt aus der jeweiligen Seite) ---------- */
.ms-hud {
  position: absolute;
  left: var(--gutter);
  z-index: 500;
  max-width: 440px;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-hud .eyebrow { color: var(--cream); opacity: 0.72; margin-bottom: var(--s-3); }
.ms-hud h1, .ms-hud h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.ms-hud h1 em, .ms-hud h2 em { font-style: italic; color: rgba(242,234,217,0.5); }
.ms-hud p {
  margin-top: var(--s-4);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(242,234,217,0.64);
  max-width: 340px;
}
.ms-hud-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
.ms-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(242,234,217,0.4);
  color: var(--cream);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ms-btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.ms-btn--solid { background: var(--signature); border-color: var(--signature); }
.ms-btn--solid:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.mapstage.is-detail .ms-hud { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* ---------- PINS ---------- */
.pin { width: 54px; height: 54px; position: relative; transition: opacity 0.4s ease; }
.pin-disc {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(242,234,217,0.9);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.35s ease;
}
/* Kein mix-blend-mode mehr: innerhalb der 3D-transformierten Leaflet-Ebene
   rendert Safari (macOS und iOS) geblendete Bilder unsichtbar — daher die
   weißen Kreise. Die Logos sind freigestellte, dunkle PNGs und sitzen ohne
   Blending sauber auf der cremefarbenen Scheibe. */
.pin-disc img {
  width: 76%; height: 76%; object-fit: contain;
  /* Ruhig in Graustufen — Farbe bekommt nur, wer gerade dran ist. Damit wird
     Farbe zum Zeiger statt zur Dekoration. */
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.35s ease;
}
.pin.is-active .pin-disc img,
.leaflet-marker-icon:hover .pin-disc img { filter: none; }
/* Runde oder flächige Logos füllen den Pin komplett aus */
.pin-disc img.is-badge { width: 100%; height: 100%; object-fit: cover; }

/* Breite Wortmarken (Wiener Mandeln, Der Grieche, Aladin …) wären in einem
   Kreis nur ein paar Pixel hoch. Ab 1,9:1 bekommen sie automatisch eine Kapsel. */
.pin.is-wide .pin-disc { inset: 9px -18px; border-radius: 999px; }
.pin.is-wide .pin-disc img { width: 88%; height: 74%; }
.pin.is-wide .pin-reticle { display: none; }
.pin.is-wide.is-active .pin-disc { transform: scale(1.08); }
.pin.is-web .pin-disc img.is-badge, .pin-disc img.is-badge { border-radius: 50%; }
.pin-disc .mono-initials {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.pin.is-web .pin-disc { border: 2px solid var(--signature); }
.pin-star {
  position: absolute;
  top: 0; right: 0;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--signature);
  color: var(--cream);
  font-size: 9px;
  line-height: 17px;
  text-align: center;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.leaflet-marker-icon:hover .pin-disc { transform: scale(1.16) translateY(-3px); }

.pin-reticle {
  position: absolute;
  inset: -12px;
  opacity: 0;
  transform: rotate(-30deg) scale(0.75);
  transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.pin-reticle line { stroke: #6B1E2C; stroke-width: 1.4; }
.pin-reticle circle { stroke: #6B1E2C; stroke-width: 1; fill: none; opacity: 0.45; }
.pin.is-active .pin-reticle { opacity: 1; transform: rotate(0) scale(1); }
.pin.is-active .pin-disc {
  border-color: var(--signature);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(107,30,44,0.22), 0 14px 30px rgba(0,0,0,0.6);
}
.pin.is-dimmed { opacity: 0.26; }

/* Entzerrung: liegen Pins auf der aktuellen Zoomstufe übereinander, schrumpfen
   sie zu Punkten. Sonst stapeln sich in Hamburg zehn cremefarbene Scheiben und
   man sieht nur noch Kreise statt Logos. Der aktive Pin bleibt immer voll. */
.pin.is-dot .pin-disc {
  inset: 20px;
  background: var(--signature);
  border-color: rgba(242,234,217,0.85);
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
.pin.is-dot .pin-disc img,
.pin.is-dot .pin-disc .mono-initials,
.pin.is-dot .pin-star { opacity: 0; }
.pin.is-dot .pin-reticle { display: none; }
.pin.is-wide.is-dot .pin-disc { inset: 20px; border-radius: 50%; }
.leaflet-marker-icon:hover .pin.is-dot .pin-disc { transform: scale(1.5); }

.leaflet-marker-icon.pin-drop .pin { animation: pinDrop 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-26px) scale(0.55); } }

/* ---------- DETAIL-PANEL ---------- */
.ms-panel {
  position: absolute;
  top: 104px;
  right: var(--gutter);
  width: var(--panel-w);
  max-height: calc(100% - var(--dock-h) - 150px);
  z-index: 600;
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 34px 80px rgba(0,0,0,0.55);
  transform: translateY(18px) scale(0.93);
  transform-origin: 70% 30%;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1.4, 0.3, 1), opacity 0.32s ease;
}
.ms-panel.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.ms-media {
  position: relative;
  aspect-ratio: 4/5;
  margin: 12px 12px 0;
  border-radius: 14px;
  background: var(--ink);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 26px rgba(20,17,12,0.18);
}
.ms-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-panel.is-open .ms-media { animation: mediaPop 0.55s cubic-bezier(0.16, 1.3, 0.3, 1) both; }
@keyframes mediaPop { from { opacity: 0; transform: scale(0.9); } }
.ms-media .play-hint {
  position: absolute;
  inset: auto var(--s-3) var(--s-3) var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  z-index: 2;
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.ms-media .play-hint .ring {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(242,234,217,0.7);
  display: grid; place-items: center;
  font-size: 12px;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease;
}
.ms-media[data-playable]:hover .ring { background: var(--cream); color: var(--ink); }

/* Website-Kunden: Browserfenster mit Live-Vorschau */
.ms-media.is-site { background: var(--cream-soft); }
.site-frame { position: absolute; inset: 0; display: flex; flex-direction: column; }
.site-bar {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--cream-deep);
  border-bottom: 1px solid rgba(20,17,12,0.1);
}
.site-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(20,17,12,0.22); }
.site-bar span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-view {
  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  background: var(--cream);
}
.site-view .watermark { max-width: 52%; max-height: 40%; object-fit: contain; opacity: 0.34; }
.site-view .watermark.is-badge { opacity: 0.42; border-radius: 50%; }
.site-view .watermark-text { font-family: var(--font-display); font-size: 36px; color: var(--ink-dim); opacity: 0.3; }
.site-view iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  border: 0;
  transform-origin: top left;
  pointer-events: none;
  background: transparent;
}

.ms-body { padding: var(--s-4); overflow-y: auto; }
.ms-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-3);
}
.ms-eyebrow .svc-web { color: var(--signature); }
.ms-name {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.ms-addr { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-dim); line-height: 1.8; }
.ms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--cream-deep);
}
.pbtn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.pbtn:hover { background: var(--ink); color: var(--cream); }
.pbtn.is-primary { background: var(--signature); border-color: var(--signature); color: var(--cream); }
.pbtn.is-primary:hover { background: var(--ink); border-color: var(--ink); }

.ms-close {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  z-index: 4;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20,17,12,0.55);
  color: var(--cream);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  font-size: 15px;
  transition: background 0.3s ease;
}
.ms-close:hover { background: var(--ink); }

/* ---------- DOCK / FILMSTREIFEN ---------- */
.ms-dock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 700;
  padding: 0 var(--gutter) var(--s-4);
  transition: opacity 0.4s ease;
}
.ms-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
}
.ms-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(242,234,217,0.26);
  color: rgba(242,234,217,0.78);
  background: rgba(20,17,12,0.72);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.chip:hover { border-color: var(--cream); color: var(--cream); }
.chip[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.chip .count { opacity: 0.55; margin-left: 6px; }

.ms-dock-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.42);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  white-space: nowrap;
}
.ms-dock-meta a { transition: color 0.3s; }
.ms-dock-meta a:hover { color: var(--cream); }
.ms-dock-meta .sep { opacity: 0.3; }

/* Der Streifen — Perforation oben und unten */
.strip-wrap {
  position: relative;
  background: rgba(20,17,12,0.86);
  border: 1px solid rgba(242,234,217,0.14);
  border-radius: 14px;
  padding: 13px 0;
}
.strip-wrap::before,
.strip-wrap::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  height: 7px;
  background-image: repeating-linear-gradient(to right,
    rgba(242,234,217,0.2) 0px, rgba(242,234,217,0.2) 8px,
    transparent 8px, transparent 20px);
  border-radius: 2px;
  pointer-events: none;
}
.strip-wrap::before { top: 3px; }
.strip-wrap::after { bottom: 3px; }

.strip { display: flex; gap: 10px; overflow-x: auto; padding: 0 12px; scrollbar-width: none; scroll-behavior: smooth; }
.strip::-webkit-scrollbar { display: none; }

.frame {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  text-align: left;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-soft);
  border: 1px solid rgba(242,234,217,0.18);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.frame:hover { transform: translateY(-5px); border-color: rgba(242,234,217,0.6); }
.frame.is-hidden { display: none; }
/* Durchgängig Logos, keine Standbilder: eine ruhige Reihe Markenkacheln.
   Gleiche Höhe, gleicher Innenabstand, alles optisch auf einer Linie. */
.frame-thumb { position: relative; display: grid; place-items: center; height: 78px; padding: 10px; overflow: hidden; isolation: isolate; background: var(--cream); }
.frame-thumb img.poster {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(1.05) brightness(0.9);
  transition: filter 0.6s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.frame:hover .frame-thumb img.poster,
.frame.is-active .frame-thumb img.poster { filter: grayscale(0) brightness(1); transform: scale(1.06); }
.frame-thumb img.mark {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.35s ease;
}
.frame:hover .frame-thumb img.mark,
.frame.is-active .frame-thumb img.mark { filter: none; }
.frame-thumb img.mark.is-badge { width: 100%; height: 100%; object-fit: contain; }
.frame-thumb .mono-initials { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; color: var(--ink-dim); }
.frame-cap { padding: 7px 8px 8px; background: var(--cream); border-top: 1px solid var(--cream-deep); }
.frame-cap .no { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; color: var(--ink-dim); display: block; }
.frame-cap .nm {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 27px;
}
.frame .tag-web {
  position: absolute;
  top: 5px; left: 5px;
  z-index: 2;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--signature);
  color: var(--cream);
  font-size: 8px;
  line-height: 16px;
  text-align: center;
}
.frame.is-active {
  border-color: var(--signature);
  transform: translateY(-7px);
  box-shadow: 0 0 0 1px var(--signature), 0 16px 34px rgba(0,0,0,0.5);
}
.frame.is-active .frame-cap { background: var(--signature); border-top-color: var(--signature); }
.frame.is-active .frame-cap .no { color: rgba(242,234,217,0.66); }
.frame.is-active .frame-cap .nm { color: var(--cream); }

.strip-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.5);
  padding: 34px 12px;
}

/* ---------- TOOLS ---------- */
.ms-tools {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--dock-h) + 18px);
  z-index: 620;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: opacity 0.4s ease;
}
.mapstage.is-detail .ms-tools { opacity: 0; pointer-events: none; }
.tool {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(20,17,12,0.8);
  border: 1px solid rgba(242,234,217,0.24);
  color: rgba(242,234,217,0.85);
  transition: background 0.3s ease, color 0.3s ease;
}
.tool:hover { background: var(--cream); color: var(--ink); }
.ms-zoom { display: flex; gap: 6px; }
.ms-zoom .tool { width: 38px; padding: 10px 0; text-align: center; font-size: 13px; }

.mapstage .leaflet-control-zoom { display: none; }
.mapstage .leaflet-control-attribution {
  background: rgba(20,17,12,0.6) !important;
  color: rgba(242,234,217,0.4) !important;
  font-family: var(--font-mono);
  font-size: 8px !important;
  letter-spacing: 0.05em;
  padding: 2px 7px !important;
}
.mapstage .leaflet-control-attribution a { color: rgba(242,234,217,0.65) !important; }
.mapstage .leaflet-bottom.leaflet-right { bottom: calc(var(--dock-h) - 14px); }

@media (hover: hover) and (min-width: 861px) {
  .mapstage .leaflet-container,
  .mapstage .leaflet-grab,
  .mapstage .leaflet-interactive,
  .mapstage .leaflet-container a,
  .ms-media[data-playable] { cursor: none; }
}

.ms-fallback {
  position: absolute;
  inset: 0;
  z-index: 480;
  display: none;
  place-items: center;
  text-align: center;
  padding: var(--s-6);
  background: var(--ink);
}
.mapstage.is-broken .ms-fallback { display: grid; }
.ms-fallback p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.6);
  line-height: 2;
  max-width: 340px;
}

/* Scroll-Hinweis, nur im Hero-Modus */
.ms-scrollcue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h) + 22px);
  transform: translateX(-50%);
  z-index: 620;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ms-scrollcue::after {
  content: '';
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(242,234,217,0.5), transparent);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop { 0%, 100% { opacity: 0.25; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(2px); } }
.mapstage.is-detail .ms-scrollcue { opacity: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .mapstage { --panel-w: 356px; }
  .ms-hud h1, .ms-hud h2 { font-size: clamp(36px, 5vw, 56px); }
  .ms-hud p { display: none; }
}

@media (max-width: 860px) {
  .mapstage { --dock-h: 170px; }
  .mapstage--hero { height: 92svh; min-height: 560px; }
  .ms-hud { max-width: 78%; }
  .ms-hud h1, .ms-hud h2 { font-size: 32px; }

  .ms-panel {
    top: auto;
    right: 0; left: 0;
    bottom: 0;
    width: 100%;
    max-height: 78%;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%) scale(1);
    transform-origin: 50% 100%;
  }
  .ms-panel.is-open { transform: translateY(0) scale(1); }
  .ms-media { aspect-ratio: 1/1; }
  .ms-media.is-site { aspect-ratio: 16/11; }
  .ms-name { font-size: 26px; }
  .mapstage.is-detail .ms-dock { opacity: 0; pointer-events: none; }
  .ms-tools { bottom: calc(var(--dock-h) + 12px); right: var(--s-3); }
  .ms-dock-meta { display: none; }
  .ms-scrollcue { display: none; }
  .frame { width: 84px; }
  .frame-thumb { height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-panel, .frame, .pin-disc, .pin-reticle, .ms-hud { transition-duration: 0.01ms !important; }
  .leaflet-marker-icon.pin-drop .pin { animation: none; }
  .ms-scrollcue::after { animation: none; }
}

/* =====================================================================
   NAV auf dunklem Grund — wird über der Kartenbühne aktiv
   ===================================================================== */
.nav--dark {
  background: linear-gradient(to bottom, rgba(20,17,12,0.82) 0%, rgba(20,17,12,0.4) 70%, transparent 100%) !important;
  border-bottom: 0 !important;
}
.nav--dark .nav-brand,
.nav--dark .nav-menu a { color: var(--cream); }
.nav--dark .nav-brand img { filter: invert(1) brightness(1.35); }
.nav--dark .nav-brand-text small { color: rgba(242,234,217,0.5); }
.nav--dark .nav-menu a::after { background: var(--cream); }
.nav--dark .nav-menu a[aria-current]::after { transform: scaleX(1); }
.nav--dark .nav-cta { border-color: rgba(242,234,217,0.5); color: var(--cream); }
.nav--dark .nav-cta:hover { background: var(--cream); color: var(--ink); }

body.on-dark .cursor { mix-blend-mode: normal; }
body.on-dark .cursor svg [stroke] { stroke: #F2EAD9; }
body.on-dark .cursor svg [fill] { fill: #F2EAD9; }

/* Vollbildseite: kein Seiten-Scroll */
html.map-page, body.map-page { height: 100%; overflow: hidden; background: var(--ink); }
body.map-page::after { opacity: 0.45; }


/* =====================================================================
   MOBIL-OPTIMIERUNG
   ===================================================================== */

/* Unschärfe nur auf Zeigergeräten — auf Touch kostet sie jeden Frame */
@media (hover: hover) and (min-width: 861px) {
  .chip { backdrop-filter: blur(10px); }
  .strip-wrap { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .tool { backdrop-filter: blur(10px); }
}

/* Der Kartenbereich darf die Seite nicht mehr blockieren:
   auf Touch wird erst gezogen, wenn die Karte aktiviert ist */
.ms-unlock {
  position: absolute;
  inset: 0;
  z-index: 660;
  display: none;
  place-items: center;
  background: rgba(20,17,12,0.42);
  text-align: center;
  padding: var(--s-5);
}
.mapstage.needs-unlock .ms-unlock { display: grid; }
.ms-unlock span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  border: 1px solid rgba(242,234,217,0.55);
  border-radius: 999px;
  padding: 14px 22px;
  background: rgba(20,17,12,0.7);
}

@media (max-width: 860px) {
  /* Griff am Bottom-Sheet — signalisiert, dass man es wegwischen kann */
  .ms-panel::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: rgba(20,17,12,0.22);
    z-index: 5;
  }
  .ms-panel { padding-top: 6px; }
  .ms-close { top: 16px; right: 12px; width: 38px; height: 38px; }

  /* Filmstreifen rastet ein statt frei zu gleiten */
  .strip {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
    gap: 8px;
  }
  .frame { scroll-snap-align: center; width: 92px; }
  .frame-thumb { height: 72px; }
  .frame:hover { transform: none; }

  /* Tippziele auf mindestens 44px */
  .chip { padding: 12px 16px; font-size: 10px; }
  .tool { padding: 13px 18px; }

  /* Schwere Schatten und Ringe raus — die kosten beim Scrollen */
  .pin-disc { box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
  .pin.is-active .pin-disc { box-shadow: 0 0 0 4px rgba(107,30,44,0.25); }
  .ms-panel { box-shadow: 0 -12px 40px rgba(0,0,0,0.45); }
  .ms-veil--top { height: 190px; }
}

/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .ms-hud h1, .ms-hud h2, .ms-hud h3 { font-size: 27px; }
  .ms-dock { padding: 0 var(--s-3) var(--s-3); }
  .frame { width: 84px; }
}

/* Während die Karte bewegt wird: Übergänge aus, sonst rechnet der Browser
   für jeden Pin bei jedem Frame Schatten und Skalierung neu */
.mapstage.is-moving .pin-disc,
.mapstage.is-moving .pin-disc img,
.mapstage.is-moving .pin-reticle { transition: none; }
.mapstage.is-moving .leaflet-marker-icon:hover .pin-disc { transform: none; }

/* =====================================================================
   SCROLL-TOUR (Modus "hero")
   Die Karte klebt einen Bildschirm lang fest, während die Seite weiter
   scrollt. Jeder Scroll-Schritt führt zur nächsten Adresse — mit Maus,
   Trackpad und Finger identisch, weil es normales Seiten-Scrolling ist
   und nichts abgefangen wird.
   ===================================================================== */
.ms-track { position: relative; }
.ms-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
/* Spezifisch genug, um die Höhenangaben der Seite zu überschreiben */
.ms-sticky > .mapstage.mapstage--hero { height: 100%; min-height: 0; }

/* Fortschritt der Tour — kompakter Chip oben rechts, unter der Navigation */
.ms-progress {
  position: absolute;
  right: var(--gutter);
  top: 104px;
  z-index: 620;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(20,17,12,0.72);
  border: 1px solid rgba(242,234,217,0.2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.55);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}
.ms-progress .rail {
  position: relative;
  width: 74px; height: 2px;
  border-radius: 2px;
  background: rgba(242,234,217,0.2);
  overflow: hidden;
}
.ms-progress .rail i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  background: var(--signature);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ms-progress .num { color: var(--cream); }

/* Hinweis, dass Scrollen die Tour startet — verschwindet nach dem ersten Stop */
.ms-tourhint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h) + 20px);
  transform: translateX(-50%);
  z-index: 620;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(20,17,12,0.72);
  border: 1px solid rgba(242,234,217,0.26);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,234,217,0.82);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.ms-tourhint::after {
  content: '';
  width: 1px; height: 14px;
  background: linear-gradient(to bottom, rgba(242,234,217,0.7), transparent);
  animation: cueDrop 2.2s ease-in-out infinite;
}
/* Sobald die Tour läuft, ist der Hinweis erledigt */
.mapstage.tour-started .ms-tourhint,
.mapstage.is-detail .ms-tourhint { opacity: 0; transform: translateX(-50%) translateY(10px); }
.mapstage.is-detail .ms-progress { opacity: 0.35; }

/* Tour-Steuerung (Vollbildseite) */
.ms-step { display: flex; gap: 6px; }
.ms-step .tool { min-width: 42px; text-align: center; }

@media (max-width: 860px) {
  .ms-progress { top: 84px; right: var(--s-3); font-size: 8px; padding: 8px 11px; gap: 8px; }
  .ms-progress .rail { width: 46px; }
  .ms-tourhint { bottom: calc(var(--dock-h) + 12px); font-size: 8px; padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-progress .rail i { transition: none; }
  .ms-tourhint::after { animation: none; }
}

/* =====================================================================
   MEHRERE REELS PRO KUNDE
   Auswahlleiste unter dem Panel-Video. Erscheint nur, wenn wirklich mehr
   als ein Reel hinterlegt ist — bei einem einzigen bleibt alles wie vorher.
   ===================================================================== */
.ms-reelbar {
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ms-reelbar::-webkit-scrollbar { display: none; }
.ms-reelbar[hidden] { display: none; }

.ms-reelbar button {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  padding: 0;
  border: 1px solid rgba(20,17,12,0.16);
  border-radius: 3px;
  background: var(--cream);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ms-reelbar button img {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.3s ease;
}
.ms-reelbar button span {
  display: block;
  padding: 5px 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-reelbar button:hover { border-color: rgba(20,17,12,0.4); }
.ms-reelbar button[aria-pressed="true"] {
  border-color: var(--signature);
  box-shadow: 0 0 0 1px var(--signature);
}
.ms-reelbar button[aria-pressed="true"] img { filter: none; }
.ms-reelbar button[aria-pressed="true"] span { color: var(--signature); }

@media (max-width: 860px) {
  .ms-reelbar button { width: 46px; }
  .ms-reelbar button img { height: 58px; }
}

/* YouTube-Reels: im Panel nur das Standbild, abgespielt wird im Kino */
.ms-media .yt-still {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter 0.4s ease;
}
.ms-media[data-playable]:hover .yt-still { filter: none; }