/* ============================================================
   Stage „Markt-Radar" · Dark-Blue-Kommandozentrale.
   Alle Selektoren gescoped auf [data-demo="markt-radar"].
   Design-Fläche: 1100 x 688 px (von der Engine skaliert).
   ============================================================ */

[data-demo="markt-radar"] .demo-fit{
  font-family:'Instrument Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;color:#eef3fd;
  -webkit-font-smoothing:antialiased;
}

[data-demo="markt-radar"] .mr-app{
  position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(1200px 700px at 70% -10%, #1a2b52 0%, #0f1830 55%);
}

/* ---------- Topbar ---------- */
[data-demo="markt-radar"] .mr-topbar{
  position:absolute;top:0;left:0;right:0;height:48px;z-index:20;
  display:flex;align-items:center;gap:14px;padding:0 18px 0 62px;
  border-bottom:1px solid #2a3c66;
  background:linear-gradient(180deg, rgba(30,46,86,.6), rgba(30,46,86,.08));
  transition:opacity .6s;
}
[data-demo="markt-radar"] .mr-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:15.5px;letter-spacing:.06em;white-space:nowrap;
}
[data-demo="markt-radar"] .mr-dotlive{
  width:9px;height:9px;border-radius:50%;background:#34d399;flex:none;
  box-shadow:0 0 0 0 rgba(52,211,153,.7);
  animation:mr-live 2s infinite;
}
@keyframes mr-live{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
[data-demo="markt-radar"] .mr-sub{
  color:#9fb1d6;font-size:12px;letter-spacing:.02em;
}
[data-demo="markt-radar"] .mr-topmeta{
  margin-left:auto;
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:11px;color:#6b7ea8;letter-spacing:.06em;
}

/* Standby: Live-Dot grau, Inhalt gedimmt */
[data-demo="markt-radar"] .mr-app.standby .mr-dotlive{
  background:#5b6a8f;animation:none;box-shadow:none;
}
[data-demo="markt-radar"] .mr-app.standby .mr-topbar{opacity:.55}

/* ---------- Grundraster: Karte + Panel ---------- */
[data-demo="markt-radar"] .mr-main{
  position:absolute;top:48px;left:0;right:0;bottom:0;
  display:grid;grid-template-columns:1fr 340px;
}

/* ---------- Karte ---------- */
[data-demo="markt-radar"] .mr-mapbox{
  position:relative;overflow:hidden;background:#16264a;
  border-right:1px solid #2a3c66;
}
[data-demo="markt-radar"] .mr-viewport{
  position:absolute;inset:0;
  transition:transform 1.2s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
[data-demo="markt-radar"] .mr-viewport.zoomed{
  transform-origin:388px 180px;
  transform:translate(-8px,100px) scale(2.2);
}
[data-demo="markt-radar"] .mr-map{
  position:absolute;left:0;top:100px;width:760px;height:380px;display:block;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* Standby-Abdunklung der Karte */
[data-demo="markt-radar"] .mr-shade{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(620px 420px at 50% 48%, rgba(5,10,24,.42), rgba(4,8,19,.78));
  opacity:0;transition:opacity .9s;
}
[data-demo="markt-radar"] .mr-app.standby .mr-shade{opacity:1}
[data-demo="markt-radar"] .mr-app.standby .mr-panel{opacity:.16;filter:saturate(.4)}
[data-demo="markt-radar"] .mr-app.standby .mr-legend{opacity:.14}
[data-demo="markt-radar"] .mr-panel,
[data-demo="markt-radar"] .mr-legend{transition:opacity .8s, filter .8s}

/* ---------- Power-Button (Standby-Zentrum -> Mini-Logo) ---------- */
[data-demo="markt-radar"] .mr-power{
  position:absolute;left:380px;top:358px;z-index:30;
  width:140px;height:140px;border-radius:50%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#4cc4f7;border:1px solid #35507f;
  background:radial-gradient(circle at 50% 38%, #182548, #0b1226 78%);
  box-shadow:0 0 0 9px rgba(76,196,247,.05),
             0 0 64px rgba(76,196,247,.30),
             inset 0 0 32px rgba(76,196,247,.10);
  transition:left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1),
             transform .7s cubic-bezier(.4,0,.2,1),
             width .7s cubic-bezier(.4,0,.2,1), height .7s cubic-bezier(.4,0,.2,1),
             color .5s, box-shadow .5s, border-color .5s;
}
[data-demo="markt-radar"] .mr-power svg{
  width:44px;height:44px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 7px currentColor);
  transition:width .7s cubic-bezier(.4,0,.2,1), height .7s cubic-bezier(.4,0,.2,1);
}
[data-demo="markt-radar"] .mr-plabel{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#9fb1d6;
  white-space:nowrap;transition:opacity .25s;
}
/* pulsierender Ring */
[data-demo="markt-radar"] .mr-power::after{
  content:'';position:absolute;inset:-16px;border-radius:50%;
  border:1px solid rgba(76,196,247,.35);
  animation:mr-pwr 2.8s ease-out infinite;pointer-events:none;
}
@keyframes mr-pwr{
  0%{transform:scale(.9);opacity:.8}
  100%{transform:scale(1.28);opacity:0}
}
/* aktiv: fliegt in die Topbar-Ecke, wird grünes Mini-Logo */
[data-demo="markt-radar"] .mr-power.on{
  left:14px;top:6px;transform:none;width:36px;height:36px;gap:0;
  color:#34d399;border-color:rgba(52,211,153,.5);
  box-shadow:0 0 16px rgba(52,211,153,.35), inset 0 0 9px rgba(52,211,153,.18);
}
[data-demo="markt-radar"] .mr-power.on svg{width:16px;height:16px;stroke-width:2.4}
[data-demo="markt-radar"] .mr-power.on .mr-plabel{opacity:0;position:absolute;pointer-events:none}
[data-demo="markt-radar"] .mr-power.on::after{display:none}

/* ---------- Radar-Sweep ---------- */
[data-demo="markt-radar"] .mr-sweep{
  position:absolute;left:380px;top:320px;z-index:4;width:1150px;height:1150px;
  margin:-575px 0 0 -575px;border-radius:50%;pointer-events:none;
  transform:rotate(0deg);opacity:0;transition:opacity .8s;
  background:
    radial-gradient(circle, transparent 0 12.3%, rgba(76,196,247,.05) 12.5% 12.75%, transparent 13% 24.8%,
      rgba(76,196,247,.05) 25% 25.25%, transparent 25.5% 37.3%, rgba(76,196,247,.05) 37.5% 37.75%, transparent 38%),
    conic-gradient(from 0deg, transparent 0 318deg, rgba(76,196,247,.03) 332deg,
      rgba(76,196,247,.08) 350deg, rgba(76,196,247,.16) 358deg, rgba(150,225,255,.30) 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 0 50%, transparent 71%);
  mask-image:radial-gradient(circle, #000 0 50%, transparent 71%);
}
[data-demo="markt-radar"] .mr-sweep.on{
  opacity:1;
  animation:mr-spin 3s linear 2 both;
}
[data-demo="markt-radar"] .mr-sweep.off{opacity:0}
[data-demo="markt-radar"] .mr-sweep.idle{
  opacity:.45;
  animation:mr-spin 14s linear infinite;
}
@keyframes mr-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---------- Event-Punkte ---------- */
[data-demo="markt-radar"] .mr-pt{
  position:absolute;z-index:8;width:12px;height:12px;margin:-6px 0 0 -6px;
  opacity:0;transform:scale(.4);
  transition:opacity .45s, transform .45s cubic-bezier(.34,1.56,.64,1);
}
[data-demo="markt-radar"] .mr-pt.in{opacity:1;transform:scale(1)}
[data-demo="markt-radar"] .mr-core{
  position:absolute;inset:1px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px 1px currentColor, inset 0 0 3px rgba(255,255,255,.55);
}
[data-demo="markt-radar"] .mr-ping{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid currentColor;
  opacity:0;
}
[data-demo="markt-radar"] .mr-pt.in .mr-ping{
  animation:mr-ping 2.6s ease-out infinite;
}
@keyframes mr-ping{
  0%{transform:scale(1);opacity:.65}
  80%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
/* Erst-Kontakt-Ring, wenn der Sweep den Punkt „erwischt" */
[data-demo="markt-radar"] .mr-pt.in::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid #8fd8ff;
  animation:mr-fring 1s ease-out both;
}
@keyframes mr-fring{
  0%{transform:scale(.6);opacity:.9}
  100%{transform:scale(3.8);opacity:0}
}
/* Auswahl-Highlight */
[data-demo="markt-radar"] .mr-pt.sel .mr-core{
  box-shadow:0 0 10px 2px currentColor, 0 0 0 2.5px rgba(255,255,255,.9);
}
[data-demo="markt-radar"] .mr-pt.sel::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  animation:mr-selring 1.8s ease-in-out infinite;
}
@keyframes mr-selring{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.25);opacity:.35}
}

/* Kategorie-Farben (Punkt via currentColor, Karte via Balken) */
[data-demo="markt-radar"] .cat-inv{color:#22c55e}
[data-demo="markt-radar"] .cat-wet{color:#ef4444}
[data-demo="markt-radar"] .cat-aus{color:#3b82f6}
[data-demo="markt-radar"] .cat-reg{color:#a855f7}
[data-demo="markt-radar"] .cat-pip{color:#f97316}
[data-demo="markt-radar"] .cat-sch{color:#eab308}

/* Städte-Labels (nur beim Zoom) */
[data-demo="markt-radar"] .mr-city{
  position:absolute;z-index:9;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:3px;
  opacity:0;transition:opacity .6s;pointer-events:none;
}
[data-demo="markt-radar"] .mr-city.in{opacity:1}
[data-demo="markt-radar"] .mr-city i{
  width:3px;height:3px;border-radius:50%;background:#c2d0ee;flex:none;
}
[data-demo="markt-radar"] .mr-city b{
  font-weight:600;font-size:6.5px;letter-spacing:.03em;color:#e6eefc;
  text-shadow:0 1px 2px rgba(6,12,28,.95), 0 0 4px rgba(6,12,28,.9);
}

/* Karten-Fußnote oben rechts */
[data-demo="markt-radar"] .mr-mapfoot{
  position:absolute;top:10px;right:14px;z-index:10;pointer-events:none;
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  font-size:9.5px;letter-spacing:.05em;color:#6b7ea8;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:opacity .8s;
}
[data-demo="markt-radar"] .mr-app.standby .mr-mapfoot{opacity:.15}

/* ---------- Legende ---------- */
[data-demo="markt-radar"] .mr-legend{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;
  background:linear-gradient(0deg, rgba(10,17,36,.92), rgba(10,17,36,.35) 70%, transparent);
}
[data-demo="markt-radar"] .mr-lg{
  display:flex;align-items:center;gap:6px;
  background:rgba(26,40,72,.82);border:1px solid #2a3c66;border-radius:20px;
  padding:4px 10px 4px 8px;font-size:11.5px;color:#eef3fd;
  transition:border-color .25s, box-shadow .25s, background .25s, opacity .35s;
}
[data-demo="markt-radar"] .mr-lg .mr-sw{
  width:10px;height:10px;border-radius:50%;background:currentColor;
  box-shadow:0 0 7px 0 currentColor;flex:none;
}
[data-demo="markt-radar"] .mr-lgname{color:#eef3fd}
[data-demo="markt-radar"] .mr-lg .mr-lgn{
  background:rgba(255,255,255,.1);border-radius:10px;padding:0 6px;
  font-size:10.5px;color:#9fb1d6;font-variant-numeric:tabular-nums;
}
[data-demo="markt-radar"] .mr-lg.solo{
  border-color:#4cc4f7;box-shadow:0 0 0 1px #4cc4f7, 0 0 14px rgba(76,196,247,.35);
  background:rgba(76,196,247,.16);
}

/* Solo-Filter „Ausschreibung": alles andere dimmt */
[data-demo="markt-radar"] .mr-app.solo-aus .mr-pt.in:not(.cat-aus){opacity:.12}
[data-demo="markt-radar"] .mr-app.solo-aus .mr-card.in:not(.cat-aus){opacity:.12}
[data-demo="markt-radar"] .mr-app.solo-aus .mr-lg:not(.cat-aus){opacity:.35}

/* ---------- Panel ---------- */
[data-demo="markt-radar"] .mr-panel{
  display:flex;flex-direction:column;min-height:0;background:#141f3a;
}
[data-demo="markt-radar"] .mr-phead{
  padding:12px 14px 12px;border-bottom:1px solid #2a3c66;flex:none;
}
[data-demo="markt-radar"] .mr-stat{
  display:flex;gap:9px;align-items:baseline;color:#9fb1d6;font-size:12px;
}
[data-demo="markt-radar"] .mr-count{
  color:#eef3fd;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1.1;text-shadow:0 0 18px rgba(76,196,247,.35);
}
[data-demo="markt-radar"] .mr-search{
  position:relative;margin-top:10px;display:flex;align-items:center;gap:8px;
  background:#14203c;border:1px solid #2a3c66;border-radius:8px;
  padding:8px 11px;font-size:12.5px;min-height:35px;
  transition:border-color .3s, box-shadow .3s;
}
[data-demo="markt-radar"] .mr-search.typing{
  border-color:#4cc4f7;box-shadow:0 0 0 1px rgba(76,196,247,.45), 0 0 16px rgba(76,196,247,.18);
}
[data-demo="markt-radar"] .mr-search svg{
  width:13px;height:13px;stroke:#6b7ea8;stroke-width:2;fill:none;stroke-linecap:round;flex:none;
}
[data-demo="markt-radar"] .mr-search-ph{color:#6b7ea8}
[data-demo="markt-radar"] .mr-search.typing .mr-search-ph{display:none}
[data-demo="markt-radar"] .mr-search-text{color:#eef3fd;white-space:pre}

[data-demo="markt-radar"] .mr-list{
  flex:1;min-height:0;overflow:hidden;padding:6px 8px;
}

/* ---------- Ereigniskarten ---------- */
[data-demo="markt-radar"] .mr-card{
  position:relative;background:#1a2848;border:1px solid #2a3c66;border-radius:9px;
  margin:5px 2px;padding:7px 10px 7px 15px;overflow:hidden;
  max-height:120px;
  opacity:0;transform:translateX(16px);
  transition:opacity .45s, transform .45s cubic-bezier(.22,1,.36,1),
             max-height .4s ease, margin .4s, padding .4s, border-color .3s, box-shadow .3s;
}
[data-demo="markt-radar"] .mr-card.in{opacity:1;transform:translateX(0)}
[data-demo="markt-radar"] .mr-cbar{
  position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;
  box-shadow:0 0 8px 0 currentColor;
}
[data-demo="markt-radar"] .mr-ctitle{
  font-size:11.5px;font-weight:600;line-height:1.35;color:#eef3fd;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-demo="markt-radar"] .mr-card.open .mr-ctitle{white-space:normal}
[data-demo="markt-radar"] .mr-cmeta{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:4px;
  font-size:10.5px;color:#9fb1d6;
}
[data-demo="markt-radar"] .mr-cbadge{
  font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  padding:1px 6px;border-radius:5px;
  background:color-mix(in srgb, currentColor 16%, transparent);
}
[data-demo="markt-radar"] .mr-csrc{
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-size:9.5px;
  color:#6b7ea8;letter-spacing:.02em;
}
/* Detail-Aufklapper */
[data-demo="markt-radar"] .mr-cbody{
  max-height:0;overflow:hidden;transition:max-height .35s ease, margin .35s;
}
[data-demo="markt-radar"] .mr-cbody p{
  margin:8px 0 6px;font-size:11px;line-height:1.5;color:#cfdaf1;
}
[data-demo="markt-radar"] .mr-cquelle{
  font-size:10px;color:#4cc4f7;
  border-top:1px dashed #2a3c66;padding-top:6px;
}
[data-demo="markt-radar"] .mr-card.open{
  max-height:230px;border-color:#4cc4f7;
  box-shadow:0 0 0 1px #4cc4f7, 0 8px 26px -10px rgba(76,196,247,.45);
}
[data-demo="markt-radar"] .mr-card.open .mr-cbody{max-height:150px}
/* Suchfilter: nicht passende Karten kollabieren */
[data-demo="markt-radar"] .mr-card.mute{
  max-height:0;opacity:0;margin-top:0;margin-bottom:0;
  padding-top:0;padding-bottom:0;border-width:0;
}

/* Reduced Motion: Dauer-Animationen aus */
@media (prefers-reduced-motion: reduce){
  [data-demo="markt-radar"] .mr-dotlive,
  [data-demo="markt-radar"] .mr-power::after,
  [data-demo="markt-radar"] .mr-sweep,
  [data-demo="markt-radar"] .mr-pt.in .mr-ping,
  [data-demo="markt-radar"] .mr-pt.sel::before{animation:none}
}