/* ─────────────────────────────────────────────────────────────────
   Zeitstrahl

   Optisch aus dem LICREM-Template übernommen: eine Mittellinie,
   Einträge abwechselnd links und rechts, ein kurzer Querstrich vom
   Punkt zum Text.

   Ein Unterschied zur Vorlage, und zwar bewusst: Dort waren die
   Farben fest (Gold auf Anthrazit), weil das Template genau einer
   Website gehört. Hier kommen sie aus den Gestaltungsvariablen -
   sonst trüge der Baustein die Handschrift eines fremden Kunden auf
   jede Seite, auf die man ihn setzt.
   ───────────────────────────────────────────────────────────────── */

.lt-zs{padding:64px 0}

.lt-zs__kopf{margin:0 auto 32px;max-width:44rem;text-align:center}
.lt-zs__titel{font-family:var(--schrift_titel);
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin:0}
.lt-zs__sub{margin:.5em 0 0;font-size:1.05rem;line-height:1.6;
  color:var(--auf-flaeche-schwach)}

/* ── Die Linie ──────────────────────────────────────────────────
   820 px wie in der Vorlage: Breiter auseinandergezogen verliert man
   den Zusammenhang zwischen Punkt und Text. */
.lt-zs__liste{position:relative;max-width:820px;margin:0 auto;
  padding:0;list-style:none}
.lt-zs__liste::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:1px;
  background:var(--auf-flaeche-linie);
}

/* ── Ein Eintrag ────────────────────────────────────────────────
   Inhalt | Marke | Leerfeld. Die mittlere Spalte ist so breit wie
   die Marke; bei den Jahreszahl-Varianten wächst sie mit. */
.lt-zs__eintrag{
  display:grid;
  grid-template-columns:1fr 1.5rem 1fr;
  gap:2.5rem;
  align-items:start;
  margin-bottom:4rem;
  position:relative;
}
.lt-zs__eintrag:last-child{margin-bottom:0}

.lt-zs__inhalt{text-align:right}

/* Jeder zweite Eintrag wechselt die Seite. Über order, nicht über
   ein zweites Raster: So bleibt die Reihenfolge im Quelltext die
   Reihenfolge beim Vorlesen. */
.lt-zs__eintrag:nth-child(even) .lt-zs__inhalt{order:3;text-align:left}
.lt-zs__eintrag:nth-child(even) .lt-zs__punkt,
.lt-zs__eintrag:nth-child(even) .lt-zs__jahr{order:2}
.lt-zs__eintrag:nth-child(even) .lt-zs__leer{order:1}

/* ── Marke an der Linie ─────────────────────────────────────────
   Variante "punkt": der Kreis aus der Vorlage. */
.lt-zs__punkt{
  width:13px;height:13px;border-radius:50%;
  /* Grundton aus der Variable: Auf einer dunklen Fläche muss die
     Füllung dunkel sein, auf einem Verlauf durchsichtig. */
  background:var(--auf-flaeche-grund);
  border:2px solid var(--auf-flaeche-akzent);
  margin-top:.55rem;justify-self:center;flex-shrink:0;
  transition:background .25s,transform .25s;
}
.lt-zs__eintrag:hover .lt-zs__punkt{background:var(--auf-flaeche-akzent);transform:scale(1.4)}

/* Jahreszahl-Varianten: Die Zahl sitzt selbst auf der Linie. Dann
   braucht die mittlere Spalte mehr Platz - sonst überlappen die
   Felder den Text daneben. */
.lt-zs--eckig .lt-zs__eintrag,
.lt-zs--rund  .lt-zs__eintrag,
.lt-zs--quadrat .lt-zs__eintrag,
.lt-zs--kreis   .lt-zs__eintrag{grid-template-columns:1fr auto 1fr;gap:1.8rem}

.lt-zs__jahr{
  justify-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:4.5rem;padding:.45rem .9rem;
  font-family:var(--schrift_titel);font-size:1rem;font-weight:600;
  line-height:1;white-space:nowrap;
  color:var(--auf-flaeche-marke-text);background:var(--auf-flaeche-marke);
  /* Die Linie läuft dahinter durch - ohne Rand am Grund sähe man sie
     durch den Zwischenraum blitzen. */
  box-shadow:0 0 0 6px var(--auf-flaeche-grund);
  transition:transform .25s;
}
.lt-zs--eckig .lt-zs__jahr{border-radius:var(--radius-feld, 4px)}
.lt-zs--rund  .lt-zs__jahr{border-radius:999px}

/* Quadrat und Kreis: Beide brauchen gleiche Seiten, sonst wird aus
   dem Kreis ein Ei und aus dem Quadrat ein Rechteck. Deshalb feste
   Maße statt Innenabstand - der wüchse mit der Textlänge.

   3.6rem trägt vier Ziffern bei 1rem Schrift. Bei "März 1968" reicht
   es nicht, deshalb bricht die Schrift dort kleiner um: besser eng
   als aus der Form gelaufen. */
.lt-zs--quadrat .lt-zs__jahr,
.lt-zs--kreis   .lt-zs__jahr{
  width:3.6rem;height:3.6rem;min-width:0;padding:.2rem;
  font-size:.95rem;text-align:center;white-space:normal;line-height:1.1;
  overflow:hidden;
}
.lt-zs--quadrat .lt-zs__jahr{border-radius:var(--radius-feld, 4px)}
.lt-zs--kreis   .lt-zs__jahr{border-radius:50%}

/* Der Querstrich fehlt bei allen Marken, die breiter sind als der
   Punkt - dort wäre er nur Unruhe. Er hängt deshalb an --punkt,
   siehe unten. */
.lt-zs__eintrag:hover .lt-zs__jahr{transform:scale(1.06)}

/* ── Inhalt ─────────────────────────────────────────────────────*/
.lt-zs__datum{
  font-family:var(--schrift_titel);font-size:1.5rem;font-weight:300;
  /* Auf einer Akzentfläche wäre die Akzentfarbe unsichtbar - dort
     zeigt --auf-flaeche-stark auf die Gegenfarbe. */
  color:var(--auf-flaeche-akzent);line-height:1;display:block;margin-bottom:.4rem;
}
.lt-zs__ttl{font-size:.95rem;font-weight:600;margin:0 0 .3rem;
  color:var(--auf-flaeche-stark)}
.lt-zs__text{font-size:.9rem;line-height:1.65;margin:0;
  color:var(--auf-flaeche-schwach)}
/* Der Richtext bringt eigene Absätze mit. Ohne diese Zeilen stünde
   über dem ersten und unter dem letzten ein Abstand, den niemand
   gesetzt hat - und der Text säße nicht mehr auf einer Linie mit der
   Marke daneben. */
.lt-zs__text > :first-child{margin-top:0}
.lt-zs__text > :last-child{margin-bottom:0}
.lt-zs__text ul,.lt-zs__text ol{margin:.4em 0;padding-left:1.2em}
.lt-zs__text a{color:var(--auf-flaeche-akzent)}

/* Querstrich zwischen Marke und Text - er bindet beides zusammen.
   Bei den Jahreszahlen entfällt er: Dort steht die Zahl selbst so
   breit, dass ein Strich daneben nur Unruhe wäre. */
.lt-zs--punkt .lt-zs__eintrag::after{
  content:'';position:absolute;
  top:.95rem;left:calc(50% - .25rem);
  width:2.5rem;height:1px;
  background:var(--auf-flaeche-linie);
}

/* ── Hintergrund der Fläche ─────────────────────────────────────
   Die Farben stehen in _basis.css als .lt-flaeche--* und setzen dort
   auch die Variablen für Linie, gedämpften Text und Grundton. Hier
   steht deshalb nur noch, WO diese Variablen benutzt werden - und
   keine einzige Farbe mehr.

   Vorher lagen hier 20 Regeln mit denselben color-mix-Ausdrücken wie
   im Störer und in der Kopfleiste. Eine Farbkorrektur hätte man an
   drei Stellen machen müssen. */
.lt-zs{padding:64px 0}

/* Der Kopf steht immer mittig - die Ausrichtungswahl ist bewusst
   entfernt. Die Linie sitzt in der Mitte, eine linksbündige
   Überschrift stünde neben ihrer eigenen Achse. */

/* ── Schmale Schirme ────────────────────────────────────────────
   Einspaltig links, wie in der Vorlage: Zwei Spalten mit je 150
   Pixeln sind keine zwei Spalten mehr. */
@media(max-width:760px){
  /* ── Auch mobil links und rechts ─────────────────────────────
     Vorher stand alles einspaltig links, mit der Linie am Rand.
     Das war die sichere Lösung, aber der Zeitstrahl verliert damit
     seinen Charakter: Das Hin und Her IST die Gestaltung, sonst ist
     es eine Liste mit Punkten davor.

     Die Rechnung geht auf, wenn man die Jahreszahl aus der Textspalte
     herausnimmt: Sie rückt nach außen an den Rand, der Text bekommt
     die Innenseite. Bei 360px Breite bleiben so etwa 150px für den
     Text - genug für "Übergang in die zweite Generation" in drei
     Zeilen. */
  .lt-zs__liste::before{left:50%;transform:translateX(-50%)}

  .lt-zs__eintrag,
  .lt-zs--eckig .lt-zs__eintrag,
  .lt-zs--rund  .lt-zs__eintrag,
  .lt-zs--quadrat .lt-zs__eintrag,
  .lt-zs--kreis   .lt-zs__eintrag{
    grid-template-columns:1fr 1.75rem 1fr;
    gap:.5rem;
    margin-bottom:2.25rem;
    align-items:start;
  }

  /* Der Punkt bleibt in der Mitte, auf der Linie. */
  .lt-zs__punkt,
  .lt-zs__eintrag:nth-child(even) .lt-zs__punkt{
    order:0;grid-column:2;grid-row:1;justify-self:center;margin-top:.35rem;
  }

  /* Ungerade: Text links, Zahl links AUSSEN.
     Gerade:  Text rechts, Zahl rechts außen.

     Die Zahl steht damit am äußeren Rand statt über dem Text - so
     bleibt die Textspalte breit genug und die Zeile liest sich von
     außen nach innen. */
  .lt-zs__eintrag:nth-child(odd) .lt-zs__inhalt{
    grid-column:1;grid-row:1;text-align:right}
  .lt-zs__eintrag:nth-child(odd) .lt-zs__jahr{
    grid-column:3;grid-row:1;justify-self:start}

  .lt-zs__eintrag:nth-child(even) .lt-zs__inhalt{
    grid-column:3;grid-row:1;text-align:left}
  .lt-zs__eintrag:nth-child(even) .lt-zs__jahr{
    grid-column:1;grid-row:1;justify-self:end}

  .lt-zs__jahr{margin-bottom:0;box-shadow:none;font-size:.82rem}

  /* Quadrat und Kreis kleiner: 3.6rem fressen bei 360px Breite ein
     Drittel der Zeile. */
  .lt-zs--quadrat .lt-zs__jahr,
  .lt-zs--kreis   .lt-zs__jahr{width:2.6rem;height:2.6rem;font-size:.72rem}

  /* Der Text darf umbrechen, wo er will - bei 150px Spaltenbreite
     würde ein langes Wort sonst hinauslaufen. */
  .lt-zs__ttl{overflow-wrap:anywhere;hyphens:auto}

  .lt-zs__leer{display:none}

  /* ── Sehr schmal: doch einspaltig ────────────────────────────
     Unter 380px bleiben je Spalte 116px - darin steht "Fertigstellung
     des neuen Firmensitzes" in acht Zeilen, und aus dem Zeitstrahl
     wird eine Treppe.

     Dort also der alte Weg: Linie links, alles rechts daneben. Nicht
     schön, aber lesbar - und das geht vor. */
  @media(max-width:379px){
    .lt-zs__liste::before{left:14px;transform:none}

    .lt-zs__eintrag,
    .lt-zs--eckig .lt-zs__eintrag,
    .lt-zs--rund  .lt-zs__eintrag,
    .lt-zs--quadrat .lt-zs__eintrag,
    .lt-zs--kreis   .lt-zs__eintrag{
      grid-template-columns:1.75rem 1fr;gap:.6rem .9rem}

    .lt-zs__punkt,
    .lt-zs__eintrag:nth-child(even) .lt-zs__punkt{grid-column:1;grid-row:1}

    .lt-zs__eintrag:nth-child(odd) .lt-zs__jahr,
    .lt-zs__eintrag:nth-child(even) .lt-zs__jahr{
      grid-column:2;grid-row:1;justify-self:start;margin-bottom:.35rem}

    .lt-zs__eintrag:nth-child(odd) .lt-zs__inhalt,
    .lt-zs__eintrag:nth-child(even) .lt-zs__inhalt{
      grid-column:2;grid-row:2;text-align:left}
  }
  .lt-zs--punkt .lt-zs__eintrag::after{display:none}

  .lt-zs__kopf{margin-bottom:2.5rem}
}

/* ── Einblenden beim Scrollen ───────────────────────────────────
   Die Klasse lt-ein setzt das Skript (layoutEinblendSkript), nicht
   der Renderer. Der Unterschied ist wichtig: Läuft kein JavaScript,
   steht die Klasse nirgends und der Zeitstrahl ist einfach da.
   Stünde sie im HTML, bliebe er unsichtbar.

   Bewegt wird nur wenig - 14 Pixel und ein Hauch Blende. Ein
   Zeitstrahl mit acht Einträgen, die alle weit hereinfliegen, sieht
   nach Bildschirmschoner aus. */
.lt-zs .lt-ein{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease-out, transform .55s ease-out;
}
.lt-zs .lt-ein--da{opacity:1;transform:none}

/* Von der Seite, aus der sie stehen: Ein Eintrag links kommt von
   links. Das folgt der Anordnung, statt ihr zu widersprechen. */
.lt-zs__eintrag.lt-ein{transform:translate(-18px,10px)}
.lt-zs__eintrag:nth-child(even).lt-ein{transform:translate(18px,10px)}
.lt-zs__eintrag.lt-ein--da{transform:none}

/* Nacheinander statt alle auf einmal. Über nth-child, weil der
   Beobachter keine Reihenfolge kennt - er meldet, was ins Bild
   kommt. Vier Stufen genügen: Weiter unten ist der Abstand zwischen
   den Einträgen ohnehin größer als das Fenster. */
.lt-zs__eintrag:nth-child(4n+2).lt-ein{transition-delay:.08s}
.lt-zs__eintrag:nth-child(4n+3).lt-ein{transition-delay:.16s}
.lt-zs__eintrag:nth-child(4n+4).lt-ein{transition-delay:.24s}

/* Auf schmalen Schirmen kommen alle von links - dort stehen sie ja
   auch alle links. */
@media(max-width:760px){
  .lt-zs__eintrag.lt-ein,
  .lt-zs__eintrag:nth-child(even).lt-ein{transform:translate(-14px,10px)}
  .lt-zs__eintrag.lt-ein--da{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .lt-zs .lt-ein,
  .lt-zs .lt-ein--da{opacity:1;transform:none;transition:none}
}

/* ── Einträge ohne Beschreibung ─────────────────────────────────
   Nur Jahreszahl und Überschrift: Dann steht der Text mittig zur
   Marke statt an ihrer Oberkante. Bei der Punkt-Variante ändert das
   fast nichts (der Punkt ist 13 Pixel hoch), bei Kreis und Quadrat
   mit 3,6 rem ist es der Unterschied zwischen "sitzt" und "hängt
   schief". */
.lt-zs__eintrag--kurz{align-items:center}

/* Der Querstrich sitzt fest auf .95rem - das passt zur ersten
   Textzeile eines normalen Eintrags. Bei einem mittig gesetzten
   rutscht er mit in die Mitte. */
.lt-zs--punkt .lt-zs__eintrag--kurz::after{top:50%;transform:translateY(-50%)}

/* Untereinander ist "mittig" gegenstandslos - dort steht die Marke
   ohnehin über dem Text. */
@media(max-width:760px){
  .lt-zs__eintrag--kurz{align-items:start}
}

/* ── Größe der Überschriften ────────────────────────────────────
   Drei Stufen, eine Einstellung für beide Ebenen: die Überschrift
   des Bausteins und die der Stationen. Sie bewegen sich gemeinsam,
   damit das Verhältnis erhalten bleibt.

   Über clamp() wie überall sonst - eine feste Größe wäre auf einem
   Telefon zu groß oder auf einem großen Schirm zu klein, und beides
   ließe sich mit drei Stufen nicht heilen. Die Stufe verschiebt den
   ganzen Bereich, nicht nur einen Wert. */
.lt-zs--t-klein .lt-zs__titel{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.lt-zs--t-klein .lt-zs__ttl  {font-size:.85rem}
.lt-zs--t-klein .lt-zs__datum{font-size:1.2rem}

/* "mittel" steht schon in den Grundregeln - hier nichts, sonst
   müsste man dieselben Werte an zwei Stellen pflegen. */

.lt-zs--t-gross .lt-zs__titel{font-size:clamp(2rem,4vw,3.2rem)}
.lt-zs--t-gross .lt-zs__ttl  {font-size:1.15rem;line-height:1.3}
.lt-zs--t-gross .lt-zs__datum{font-size:2rem}

/* Bei großen Stationsüberschriften wächst die Jahreszahl mit -
   sonst steht eine 1rem-Zahl neben einer 1,15rem-Überschrift und
   wirkt wie eine Fußnote. */
.lt-zs--t-gross .lt-zs__jahr{font-size:1.15rem;min-width:5.2rem}
.lt-zs--t-gross.lt-zs--quadrat .lt-zs__jahr,
.lt-zs--t-gross.lt-zs--kreis   .lt-zs__jahr{width:4.4rem;height:4.4rem}

.lt-zs--t-klein .lt-zs__jahr{font-size:.9rem;min-width:4rem}
.lt-zs--t-klein.lt-zs--quadrat .lt-zs__jahr,
.lt-zs--t-klein.lt-zs--kreis   .lt-zs__jahr{width:3.1rem;height:3.1rem}

/* Auf schmalen Schirmen greift die Stufe nur gedämpft.

   MUSS hier unten stehen: Die Regeln oben tragen drei Klassen
   (.lt-zs--t-gross.lt-zs--kreis .lt-zs__jahr) und schlagen damit die
   Mobilregeln weiter oben, die nur zwei haben. Eine 4,4rem große
   Jahreszahl neben einer schmalen Textspalte nimmt sonst die halbe
   Breite. */
@media(max-width:760px){
  .lt-zs--t-gross.lt-zs--quadrat .lt-zs__jahr,
  .lt-zs--t-gross.lt-zs--kreis   .lt-zs__jahr{width:3.4rem;height:3.4rem;font-size:.95rem}
  .lt-zs--t-klein.lt-zs--quadrat .lt-zs__jahr,
  .lt-zs--t-klein.lt-zs--kreis   .lt-zs__jahr{width:2.7rem;height:2.7rem;font-size:.8rem}
  .lt-zs--t-gross .lt-zs__titel{font-size:clamp(1.7rem,6vw,2.2rem)}
  .lt-zs--t-gross .lt-zs__datum{font-size:1.6rem}
}

/* Umbrüche in Überschrift und Stationstitel.

   Die <br> stehen im Markup - das genügt fast. Nur die Zeilenhöhe
   muss stimmen: Bei 1.15 im Titel kleben zwei Zeilen aneinander,
   solange nur eine Zeile die Regel je gesehen hat. */
.lt-zs__titel{line-height:1.15;text-wrap:balance}
.lt-zs__ttl{line-height:1.35}
.lt-zs--t-gross .lt-zs__titel{line-height:1.1}