/* ============================================================
   plate_ces — timeline (CType atomicplan_timeline)

   Vertrag (harte Regeln):
   - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE eigene
     Container-/Sektionsbreite — das macht das Frame-System.
   - Keine font-family / font-size an Ueberschriften (auch nicht an den
     Etappen-Titeln, die als h3 ausgegeben werden).
   - Farben nur ueber --bs-*-Variablen bzw. eigene Slots mit Fallback.
   - Gescoped auf .frame-type-atomicplan_timeline.
   ============================================================ */

.frame-type-atomicplan_timeline {
  --plces-tl-accent: var(--bs-primary, #0d6efd);
  --plces-tl-ink-soft: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  --plces-tl-line: var(--bs-border-color, rgba(0, 0, 0, 0.15));
  --plces-tl-dot: 0.75rem;
  --plces-tl-gap: clamp(1.6rem, 3vw, 2.8rem);
}

/* Auf gefaerbten (invertierenden) Flaechen bzw. ueber einem Frame-Hintergrundbild
   duerfen die gedaempften Toene nicht auf einer festen Grau-Variable haengen —
   sie folgen der Textfarbe des Frames. So bleibt der Block auf hellen UND dunklen
   Flaechen lesbar, ohne dass ein Theme Regeln ueberschreiben muss. */
.frame-type-atomicplan_timeline.frame-has-backgroundimage,
.frame-type-atomicplan_timeline.-colorized {
  --plces-tl-ink-soft: color-mix(in srgb, currentColor 78%, transparent);
  --plces-tl-line: color-mix(in srgb, currentColor 32%, transparent);
}

.frame-type-atomicplan_timeline .plces-timeline {
  container-type: inline-size;
  container-name: plces-timeline;
}

/* ---- Sektionskopf ------------------------------------------------------- */
.frame-type-atomicplan_timeline .plces-timeline__head {
  display: grid;
  gap: 1.2rem 3rem;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
@container plces-timeline (min-width: 48rem) {
  .frame-type-atomicplan_timeline .plces-timeline__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
  }
}
.frame-type-atomicplan_timeline .plces-timeline__eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  margin-bottom: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plces-tl-ink-soft);
}
.frame-type-atomicplan_timeline .plces-timeline__eyebrow .idx { color: var(--plces-tl-accent); }
.frame-type-atomicplan_timeline .plces-timeline__title { margin-bottom: 0; max-width: 24ch; }
.frame-type-atomicplan_timeline .plces-timeline__aside {
  margin: 0;
  max-width: 52ch;
  color: var(--plces-tl-ink-soft);
}

/* ---- Achse + Etappen ---------------------------------------------------- */
.frame-type-atomicplan_timeline .plces-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Die Achse selbst — eine 1px-Linie, kein Sektions-Element. */
.frame-type-atomicplan_timeline .plces-timeline__list::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: calc(var(--plces-tl-dot) / 2 - 0.5px);
  width: 1px;
  background: var(--plces-tl-line);
}

.frame-type-atomicplan_timeline .plces-timeline__step {
  position: relative;
  padding-left: calc(var(--plces-tl-dot) + 1.6rem);
  padding-bottom: var(--plces-tl-gap);
}
.frame-type-atomicplan_timeline .plces-timeline__step:last-child { padding-bottom: 0; }
.frame-type-atomicplan_timeline .plces-timeline__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: var(--plces-tl-dot);
  height: var(--plces-tl-dot);
  border-radius: 50%;
  background: var(--plces-tl-accent);
}

.frame-type-atomicplan_timeline .plces-timeline__tag {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plces-tl-accent);
}
.frame-type-atomicplan_timeline .plces-timeline__step-title { margin: 0 0 0.4rem; }
.frame-type-atomicplan_timeline .plces-timeline__text {
  margin: 0;
  max-width: 58ch;
  color: var(--plces-tl-ink-soft);
}

/* ---- Layout „Wechselnd" ------------------------------------------------- */
@container plces-timeline (min-width: 52rem) {
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__list::before {
    left: 50%;
    transform: translateX(-0.5px);
  }
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__step {
    width: 50%;
    padding-left: 0;
    padding-right: calc(var(--plces-tl-dot) + 1.6rem);
    text-align: right;
  }
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__step::before {
    left: auto;
    right: calc(var(--plces-tl-dot) / -2);
  }
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__step:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: calc(var(--plces-tl-dot) + 1.6rem);
    text-align: left;
  }
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__step:nth-child(even)::before {
    right: auto;
    left: calc(var(--plces-tl-dot) / -2);
  }
  .frame-type-atomicplan_timeline .plces-timeline--alternating .plces-timeline__text { max-width: none; }
}