/* Raumgleiter: Zeitstrahl.
   Die Punkte selbst stehen im Customizer (.rg-zeitstrahl).
   Hier die eigene Sektion, damit die Komponente nicht auf die anders
   benannte Sektion "rg-methodik" angewiesen ist. */
.rg-zeitstrahl-sektion {
  background-color: var(--rg-weiss);
  color: var(--rg-schwarz);
  padding-block: var(--rg-sektion-y);
  padding-inline: var(--rg-sektion-x);
}

.rg-zeitstrahl-sektion__inner {
  display: flex;
  flex-direction: column;
  gap: var(--rg-abstand-gross);
  max-width: var(--rg-content-width);
  margin-inline: auto;
}

.rg-zeitstrahl-sektion__inner > * {
  margin-inline: 0;
}

/* Der Bestand setzt vier feste Spalten. Mit drei oder fuenf Stationen
   entstuenden sonst Luecken oder Umbrueche an falscher Stelle. */
.rg-zeitstrahl {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* --- Senkrechte Fassung, zweispaltig (Figma: Verfahren & Methodik) ---
   Links die Stationen untereinander mit Datum und Text nebeneinander,
   rechts Textbloecke. Beide Spalten 520px bei 1120 Inhalt, Luecke 80. */
.rg-zeitstrahl-sektion--zweispaltig .rg-zeitstrahl-sektion__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--rg-abstand-gross);
  align-items: start;
}

.rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl__punkt {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--rg-abstand);
  align-items: baseline;
  padding-block: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rg-schwarz-40);
  border-left: 0;
}

/* Der Punkt der waagerechten Fassung sitzt oben links, senkrecht stoert er */
.rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl__punkt::before {
  display: none;
}

.rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl__punkt--aktiv {
  border-top-color: var(--rg-blau);
}

.rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl__datum {
  margin: 0;
}

.rg-zeitstrahl__bloecke {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.rg-zeitstrahl__block {
  display: flex;
  flex-direction: column;
  gap: var(--rg-abstand);
}

.rg-zeitstrahl__block-titel {
  margin: 0;
  font-size: var(--rg-size-h4);
  font-weight: var(--rg-weight-semibold);
  line-height: var(--rg-lh-h3);
}

.rg-zeitstrahl__block-text {
  margin: 0;
  color: var(--rg-schwarz-70);
  font-size: var(--rg-size-body);
  line-height: var(--rg-lh-text);
}

/* Auf schmalen Bildschirmen stehen Datum und Text untereinander.
   Bei 390px blieben dem Text sonst 192px.
   Diese Regel gehoert hierher und nicht ins Customizer-CSS: die
   Komponenten-Stylesheets werden von Bricks beim Rendern angemeldet und
   stehen im Dokument NACH dem Customizer, gewinnen also bei gleicher
   Spezifitaet. */
@media (max-width: 767px) {
  .rg-zeitstrahl-sektion--senkrecht .rg-zeitstrahl__punkt {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}