/* =========================================================
   Scroll-Timeline (Elementor-Widget) – Dein Eventplaner
   Alle Farben und Maße sind CSS-Variablen an .dst; die Regler
   im Elementor-Stil-Tab überschreiben genau diese Variablen.
   ========================================================= */
.dst{
  --dst-accent:#2563EB;
  --dst-rail:#E5E7EB;
  --dst-prog-a:#22D3EE; --dst-prog-b:#2563EB; --dst-prog-c:#6366F1;
  --dst-mk-bg:#FFFFFF; --dst-mk-border:#CBD5E1; --dst-mk-icon:#94A3B8; --dst-mk-icon-on:#FFFFFF;
  --dst-title:#111827; --dst-text:#6B7280; --dst-num:var(--dst-accent);
  --dst-badge-bg:#EFF6FF; --dst-badge:#1D4ED8;
  --dst-dim:.3;
  --dst-step-h:64vh; --dst-sticky-top:120px; --dst-gap:72px; --dst-stage-w:53%; --dst-stage-h:420px;
  --dst-stage-bg:#F9FAFB; --dst-frame-bg:#FFFFFF; --dst-frame-border:#E5E7EB; --dst-radius:16px; --dst-fit:contain;
  --dst-ease:cubic-bezier(.4,0,.2,1);
  position:relative;
}
.dst *,.dst *::before,.dst *::after{box-sizing:border-box}

/* ---------- Raster: Schritte | Bühne ---------- */
.dst-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--dst-stage-w));gap:var(--dst-gap);align-items:start}
.dst-img-left .dst-grid{grid-template-columns:minmax(0,var(--dst-stage-w)) minmax(0,1fr)}
.dst-img-left .dst-stage{order:-1}

/* ---------- Schritte + Linie ---------- */
.dst-steps{position:relative;padding-left:60px}
.dst-marker-dot .dst-steps{padding-left:40px}
.dst-steps::before,.dst-rail{content:"";position:absolute;top:0;bottom:0;left:19px;width:2px;border-radius:2px}
.dst-marker-dot .dst-steps::before,.dst-marker-dot .dst-rail{left:6px}
.dst-steps::before{background:var(--dst-rail)}
.dst-rail{background:linear-gradient(var(--dst-prog-a),var(--dst-prog-b) 50%,var(--dst-prog-c));transform-origin:top;transform:scaleY(var(--dst-progress,0))}

.dst-step{min-height:var(--dst-step-h);display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.dst-card{position:relative;opacity:var(--dst-dim);transition:opacity .45s var(--dst-ease)}
.dst-step.is-active .dst-card{opacity:1}

/* Markierung: Icon im Kreis … */
.dst-marker{position:absolute;left:-60px;top:-6px;width:40px;height:40px;border-radius:50%;
  background:var(--dst-mk-bg);border:2px solid var(--dst-mk-border);color:var(--dst-mk-icon);
  display:grid;place-items:center;transition:background .3s var(--dst-ease),border-color .3s var(--dst-ease),color .3s var(--dst-ease),box-shadow .3s var(--dst-ease)}
.dst-marker i{font-size:16px;line-height:1}
.dst-marker svg{width:16px;height:16px;fill:currentColor}
.dst-step.is-active .dst-marker{background:var(--dst-accent);border-color:var(--dst-accent);color:var(--dst-mk-icon-on);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--dst-accent) 16%,transparent)}
/* … oder schlichter Punkt */
.dst-marker-dot .dst-marker{left:-41px;top:4px;width:14px;height:14px}
.dst-marker-dot .dst-marker i,.dst-marker-dot .dst-marker svg{display:none}

.dst-num{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--dst-num);margin-bottom:10px;font-variant-numeric:tabular-nums}
.dst-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--dst-badge);background:var(--dst-badge-bg);padding:4px 10px;border-radius:999px;margin-bottom:10px}
.dst .dst-title{font-size:clamp(22px,2.6vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--dst-title);margin:0 0 12px;padding:0}
.dst .dst-text{font-size:16.5px;line-height:1.6;color:var(--dst-text);max-width:460px}
.dst .dst-text p{margin:0 0 .6em}
.dst .dst-text p:last-child{margin-bottom:0}

/* ---------- Bühne (klebt beim Scrollen) ---------- */
.dst-stage{align-self:stretch}            /* volle Zeilenhöhe – sonst hat sticky keinen Weg */
.dst-sticky{position:sticky;top:var(--dst-sticky-top)}
.dst-frame{background:var(--dst-frame-bg);border:1px solid var(--dst-frame-border);border-radius:var(--dst-radius);overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(17,24,39,.28),0 10px 28px -14px rgba(37,99,235,.14)}
.dst-frame-none .dst-frame{background:transparent;border:0;box-shadow:none;border-radius:0}

.dst-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--dst-frame-border);background:#FCFCFD}
.dst-bar-dots{display:flex;gap:6px;flex:none}
.dst-bar-dots i{display:block;width:11px;height:11px;border-radius:50%;background:#E2E6EB}
.dst-url{margin-left:8px;font-size:12.5px;color:#6B7280;background:#F3F4F6;border-radius:8px;padding:5px 12px;flex:1;max-width:300px;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dst-counter{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:var(--dst-accent);
  background:color-mix(in srgb,var(--dst-accent) 10%,#fff);padding:4px 10px;border-radius:6px;font-variant-numeric:tabular-nums}

.dst-panes{display:grid;height:var(--dst-stage-h);background:var(--dst-stage-bg)}
.dst-frame-none .dst-panes{background:transparent}
.dst-frame-none .dst-pane{padding:0}   /* ohne Rahmen: Bild steht frei, kein Kasten dahinter */
.dst-pane{grid-area:1/1;margin:0;padding:22px;display:flex;align-items:center;justify-content:center;min-height:0;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.98);
  transition:opacity .45s var(--dst-ease),transform .45s var(--dst-ease),visibility 0s linear .45s}
.dst-pane.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dst .dst-pane img,.dst .dst-inline img{display:block;width:100%;height:100%;max-width:100%;object-fit:var(--dst-fit);border-radius:calc(var(--dst-radius) * .6);box-shadow:none}

.dst-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.dst .dst-dots .dst-dot,.dst .dst-dots .dst-dot:hover,.dst .dst-dots .dst-dot:focus{
  appearance:none;-webkit-appearance:none;display:block;width:8px;height:8px;min-height:0;padding:0;margin:0;border:0;border-radius:999px;
  background:#CBD5E1;box-shadow:none;cursor:pointer;transition:width .3s var(--dst-ease),background .3s var(--dst-ease)}
.dst .dst-dots .dst-dot.on{width:26px;background:var(--dst-accent)}

/* Mobiles Bild unter jedem Schritt – auf dem Desktop aus */
.dst-inline{display:none;margin:22px 0 0;padding:16px;background:var(--dst-stage-bg);border:1px solid var(--dst-frame-border);border-radius:var(--dst-radius)}
.dst-frame-none .dst-inline{padding:0;background:transparent;border:0}
.dst .dst-inline img{height:auto}

/* ---------- Tablet / Handy: Schritte untereinander, Bild je Schritt ---------- */
@media (max-width:1024px){
  .dst-grid,.dst-img-left .dst-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .dst-stage{display:none}
  .dst-step{min-height:0;padding:0 0 48px}
  .dst-step:last-child{padding-bottom:0}
  .dst-card{opacity:1}
  .dst-inline{display:block}
}
@media (max-width:767px){
  .dst-steps{padding-left:52px}
  .dst-marker{left:-52px;width:36px;height:36px}
  .dst-steps::before,.dst-rail{left:17px}
}

@media (prefers-reduced-motion:reduce){
  .dst-card,.dst-marker,.dst-pane,.dst .dst-dots .dst-dot{transition:none}
}