/* Steps-Section: SectionHeader neben (split, Default) oder über (stacked)
   einer StepList — die Schritte kommen als [d35_step]-Slots in den Body.
   Vertikaler Rhythmus aus .d35-section, das dunkle Band aus
   .d35-section-dark. */
.d35-steps-section__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

/* Split: die Header-Card sitzt in einer eigenen Spalte neben den Steps und
   bleibt oben ausgerichtet statt sich auf Listenhöhe zu strecken. */
.d35-steps-section--layout-split .d35-steps-section__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.d35-steps-section__header {
  min-width: 0;
}

.d35-steps-section__list {
  min-width: 0;
}

/* Dark-Band: die StepList kennt selbst keine dunkle Variante — Titel/Text
   wären schwarz auf schwarz. Texte aufhellen und die Marker-Kacheln als
   Outline statt gefüllter Fläche (transparent, weißer Rahmen, weiße Zahl);
   der Maskierungs-Ring um die Kachel läuft auf der Bandfarbe weiter, damit
   die Verbindungslinie sauber hinter dem Marker abreißt. */
.d35-steps-section--dark .d35-step-list {
  color: #fff;
}

.d35-steps-section--dark .d35-step-list__text {
  color: rgb(255 255 255 / 0.78);
}

/* Bandfarbe statt transparent: wirkt identisch, verdeckt aber die
   Verbindungslinie, die hinter der Kachel durchläuft. */
.d35-steps-section--dark .d35-step-list__marker {
  background: var(--d35-color-dark, #000);
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 0 0 0.35rem var(--d35-color-dark, #000);
}

.d35-steps-section--dark .d35-step-list--marker-number .d35-step-list__marker,
.d35-steps-section--dark .d35-step-list--marker-icon .d35-step-list__marker,
.d35-steps-section--dark .d35-step-list--marker-both .d35-step-list__marker {
  border-color: #fff;
  color: #fff;
}

/* Icon-Marker auf dunklem Grund analog zur Feature-Showcase (weiß getönt statt
   solid), damit die Icon-Optik auch in der dunklen Variante konsistent bleibt. */
.d35-steps-section--dark .d35-step-list--marker-icon .d35-step-list__marker {
  border-color: color-mix(in srgb, #fff 28%, transparent);
  /* Deckend über den dunklen Grund mischen, damit der Verbinder verdeckt bleibt. */
  background: color-mix(in srgb, #fff 10%, var(--d35-color-dark, #000));
}

.d35-steps-section--dark .d35-step-list__item:not(:last-child)::after {
  background: rgb(255 255 255 / 0.4);
}

@media (max-width: 1024px) {
  .d35-steps-section--layout-split .d35-steps-section__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}