/* ===== Mini Drone Market (Left circles + legend + animated slider) ===== */
.drone-market-mini{
  --ring1:var(--color-chart-1);   /* World */
  --ring2:var(--color-chart-2);   /* EUR   */
  --ring3:var(--color-chart-4);   /* GER   */
  --accent:var(--color-text);
  --track:#dfe7ee;
  --fill:#9fc0da;

  border-radius:16px;
  padding:clamp(16px,4vw,28px);
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  width:100%;
  max-width:900px;
  margin:0 auto;
  color:var(--color-text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  user-select:none;
}

.dmm-layout{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: clamp(16px, 4vw, 32px);
  align-items:center;
}

/* ===== Circles (left) ===== */
.dmm-stack{
  position:relative;
  width:min(80vw, 360px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
}

.dmm-ring{
  position:absolute;
  border-radius:50%;
  display:grid;
  place-items:start center;
  box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.06);
  transition: width .15s linear, height .15s linear;
}

.dmm-ring.world{ background:var(--color-chart-1); z-index:1; }
.dmm-ring.eur   { background:var(--color-chart-2); z-index:2; }
.dmm-ring.ger   { background:var(--color-chart-4); z-index:3; }

/* titles mittig oben in den Kreisen */
.dmm-title{
  position:absolute;
  top:6%;
  left:50%;
  transform:translateX(-50%);
  color:#ffffffcc;
  font-weight:800;
  font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.2px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.dmm-ring.ger .dmm-title{ color:#1c2b3a; text-shadow:none; }

/* ===== Legend (right) ===== */
.dmm-legend{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.dmm-leg-row{
  display:grid;
  grid-template-columns: 18px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(16,58,86,.03);
  box-shadow: inset 0 0 0 1px rgba(16,58,86,.06);
}

.dmm-swatch{
  width:18px; height:18px; border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
}

.dmm-leg-text{
  font-weight:700;
  color:var(--accent);
  font-size:14px;
}
.dmm-leg-value{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ===== Timeline (bottom) ===== */
.dmm-timeline{ margin-top:18px; }
.dmm-years{
  display:flex; justify-content:space-between;
  font-weight:700; color:var(--accent); font-size:14px;
  margin-bottom:6px; padding:0 2px;
}
.dmm-range{
  --progress: 0%;
  appearance:none; width:100%; height:12px; border-radius:999px;
  background:linear-gradient(90deg, var(--fill) 0 var(--progress), var(--track) var(--progress));
  outline:none; margin:0;
}
.dmm-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer;
}
.dmm-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:pointer;
}
.dmm-range::-moz-range-track{ height:12px; background:transparent; }

.dmm-year-badge{
  margin-top:8px; text-align:center; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums;
}

@media (max-width: 720px){
  .dmm-layout{ grid-template-columns: 1fr; }
}