/* ================================================================
   FORUS — Rückblick: Programm-Timeline (waagerecht, editorial)
   Squarespace-Schule: Haarlinie, kleine Punkte, Schrift — sonst
   nichts. Der Markenverlauf existiert nur im gefuellten Teil der
   Achse. Hierarchie ueber Schriftgroesse, nicht ueber Kaesten.
   OHNE .is-quer (kein JS / reduce): ruhige gestapelte Liste.
   Keine font-family — Schrift kommt vom Theme.
   ================================================================ */

.forus-tl, .forus-tl *, .forus-tl *::before, .forus-tl *::after{ box-sizing: border-box; }

.forus-tl{
  --fu-grad: var(--gradient, linear-gradient(120deg,#9e2585 0%,#c81d84 25%,#e21961 50%,#e84c05 75%,#ec6a02 100%));
  --fu-papier: var(--papier,#f1eeed);
  --fu-surface: var(--surface,#e6e0da);
  --fu-pflaume: var(--pflaume,#330f2d);
  --fu-ink: var(--ink,#1a1e20);
  --fu-ease: cubic-bezier(.19,1,.22,1);
  --fu-dim: .66;   /* 0.60-0.64 lag mit 4,04-4,49:1 unter dem Kontraststandard 4,5:1 */
  --fu-hair: rgba(26,30,32,.18);

  position: relative;
  z-index: 2;
  padding-top: min(var(--fu-pad-top,144px), 24vw);
  padding-bottom: min(var(--fu-pad-bottom,144px), 24vw);
  background-color: var(--fu-bg);
  color: var(--fu-fg);
  overflow-x: clip;
}
/* Im Quer-Modus darf die Sektion NICHT abschneiden: auf dem iPhone
   faehrt WebKit ein festgepinntes Element nicht mehr auf der
   Grafikkarte mit, sobald ein Vorfahre einen Ueberlauf abschneidet —
   die Buehne haengt dann ein Bild hinterher und das ganze Modul
   springt beim Scrollen kleinteilig hoch und runter. Die Buehne
   schneidet ihren Inhalt selbst ab, die Sektion braucht es nicht. */
.forus-tl.is-quer{ overflow-x: visible; }
.forus-tl.is-bg-papier  { --fu-bg: var(--fu-papier);  --fu-fg: var(--fu-ink); }
.forus-tl.is-bg-surface { --fu-bg: var(--fu-surface); --fu-fg: var(--fu-ink); }
.forus-tl.is-bg-pflaume { --fu-bg: var(--fu-pflaume); --fu-fg: var(--fu-papier); }
.forus-tl.is-bg-ink     { --fu-bg: var(--fu-ink);     --fu-fg: var(--fu-papier); }
.forus-tl.is-dark{ --fu-dim: .7; --fu-hair: rgba(241,238,237,.2); }

/* ---------- Welle ---------- */
.forus-tl{ --fu-r-eff: min(var(--fu-r,96px), 11vw); }
.forus-tl__sweep{ position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: -1px; height: var(--fu-r-eff); width: 100%; display: block; z-index: 0; pointer-events: none; }
.forus-tl__sweep-path{ fill: var(--fu-bg); }

/* ---------- Container / Kopf ---------- */
.forus-tl.cw-default { --fu-cw: 1440px; }
.forus-tl.cw-wide    { --fu-cw: 1440px; }
.forus-tl.cw-narrow  { --fu-cw: 1040px; }
.forus-tl__inner{ width: 100%; max-width: var(--fu-cw,1440px); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
.forus-tl__head{ max-width: 60ch; margin: 0 0 var(--fu-s6, clamp(2.5rem, 6vh, 4rem)); }
.forus-tl__eyebrow{ margin: 0 0 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; opacity: var(--fu-dim); }
.forus-tl__title{ margin: 0 0 .9rem; max-width: 18ch; text-transform: uppercase; text-wrap: balance; color: var(--fu-fg); }
.forus-tl__title:not(.has-display-size){ font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; line-height: .98; letter-spacing: -.03em; }
.forus-tl__title em{ font-style: normal; background: var(--fu-grad); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fu-tl-flow 8s ease-in-out infinite; }
@keyframes fu-tl-flow{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }
/* Auf dem Handy steht die Ueberschrift in der gepinnten Buehne. Ein
   wanderndes Verlaufs-Muster in Schrift laesst sich nicht auf die
   Grafikkarte auslagern — es wird pausenlos neu gezeichnet und zittert
   beim Scrollen mit. Dort bleibt der Verlauf ruhig stehen. */
@media (max-width: 900px){
  .forus-tl__title em{ animation: none; }
}
.forus-tl__lead{ margin: 0; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; opacity: .82; }

/* ================================================================
   QUER-MODUS (JS setzt .is-quer): gepinnte waagerechte Achse
   ================================================================ */
/* Strecke und Buehne in DERSELBEN Einheit (svh): mischt man vh und
   svh, passt die Rechnung mobil nicht mehr zusammen und die Achse
   laeuft zu kurz oder zu weit. */
.forus-tl.is-quer .forus-tl__pin{ height: 420svh; position: relative; }
/* Hier stand ein vh-Rueckfall fuer Browser ohne svh. Entfernt am
   21.08.2026: svh gibt es seit 2022 in allen drei Engines (Chrome 108,
   Safari 15.4, Firefox 101). Zweck des Entfernens: der HubSpot-Minifier
   steigt bei Feature-Abfragen aus und lieferte diese Datei unminimiert. */
/* 100svh statt 100vh: auf dem Handy aendert 100vh seine Hoehe, sobald
   die Browserleiste ein- oder ausfaehrt — die gepinnte Buehne wuerde
   dadurch beim Scrollen staendig ihre Groesse wechseln und die Achse
   wackelt. svh bleibt konstant. */
.forus-tl.is-quer .forus-tl__buehne{ position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column;
  /* eigene Grafikkarten-Ebene: haelt das Pinnen auf dem iPhone im
     Takt des Scrollens (statt einen Bildwechsel hinterher) */
  will-change: transform; }
/* Der Kopf beginnt unter der festen Navigation (76px hoch): die Buehne
   ist gepinnt, dadurch stuende die Eyebrow sonst dauerhaft dahinter. */
.forus-tl.is-quer .forus-tl__kopf{ padding-top: calc(76px + clamp(1.2rem, 3vh, 2.2rem)); flex: 0 0 auto; }
.forus-tl.is-quer .forus-tl__head{ margin-bottom: 0; }
.forus-tl.is-quer .forus-tl__feld{ flex: 1 1 auto; position: relative; }

/* Die EINE Verlaufs-Stelle: die Haarlinie, die sich fuellt */
.forus-tl__achse{ display: none; }
.forus-tl.is-quer .forus-tl__achse{ display: block; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fu-hair); }
.forus-tl.is-quer .forus-tl__achse b{ position: absolute; top: -0.5px; left: 0; height: 2px; width: 100%; background: var(--fu-grad);
  /* ueber transform statt width: width loest in JEDEM Bild ein neues
     Layout aus — das ruckelt auf dem Handy sichtbar. */
  transform: scaleX(var(--p, 0)); transform-origin: left center; will-change: transform; }

.forus-tl.is-quer .forus-tl__spur{ position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: stretch; will-change: transform; padding-left: clamp(1.25rem, 5vw, 3.5rem); }

/* ================================================================
   BEWEGUNG DIREKT AM SCROLLEN (ohne JavaScript pro Bild)
   Auf dem Handy scrollt der Finger die Seite auf der Grafikkarte.
   Ein JavaScript, das die Achse bei jedem Bild nachschiebt, laeuft
   auf dem Hauptthread — es kommt zwangslaeufig ein Stueck hinterher,
   und weil die Buehne festgepinnt ist, zittert dabei das GANZE Modul,
   also auch Ueberschrift und Text. Koppelt man die Bewegung dagegen
   ueber eine Scroll-Zeitleiste, laeuft sie in derselben Schleife wie
   das Scrollen selbst und kann gar nicht mehr auseinanderlaufen.
   `contain` = genau die Strecke, auf der die Buehne festgepinnt ist.
   Kann der Browser das nicht, bleibt alles beim JavaScript-Weg.
   ================================================================ */
@supports (animation-timeline: view()){
  .forus-tl.is-quer.is-css-lauf .forus-tl__pin{ view-timeline-name: --fu-tl; view-timeline-axis: block; }
  .forus-tl.is-quer.is-css-lauf .forus-tl__spur{
    animation: fu-tl-lauf linear both;
    animation-timeline: --fu-tl;
    animation-range: contain 0% contain 100%;
  }
  .forus-tl.is-quer.is-css-lauf .forus-tl__achse b,
  .forus-tl.is-quer.is-css-lauf .forus-tl__bar b{
    animation: fu-tl-fuellen linear both;
    animation-timeline: --fu-tl;
    animation-range: contain 0% contain 100%;
  }
  @keyframes fu-tl-lauf{
    from{ transform: translateX(0); }
    to{ transform: translateX(calc(-1 * var(--weg, 0px))); }
  }
  @keyframes fu-tl-fuellen{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
  }
}
/* Ohne die JS-Blende stehen alle Eintraege gleich hell da */
.forus-tl.is-quer.ist-ruhig .forus-tl__slot{ --f: 1; }

/* Tages-Station: der Name sitzt wie ein Bahnhofsschild AUF der Achse —
   sein Hintergrund maskiert die Linie, und weil die Station so breit ist
   wie ihr Name, kollidiert sie nie mit dem ersten Programmpunkt. */
.forus-tl.is-quer .forus-tl__tagmark{ flex: 0 0 auto; position: relative; display: flex; align-items: center;
  padding-right: clamp(2.5rem, 5vw, 4.5rem); }
.forus-tl.is-quer .forus-tl__tagdot{ position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--fu-fg); }
.forus-tl.is-quer .forus-tl__tagname{ position: relative; margin-left: 20px; padding: .04em .35em .04em .25em;
  background: var(--fu-bg);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; white-space: nowrap; }
.forus-tl.is-quer .forus-tl__tagdatum{ position: absolute; left: calc(20px + .25em); top: calc(50% + 1.05em * 2.4); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .5; white-space: nowrap; }

/* Zeitfenster: Haarlinie, Punkt, Schrift */
.forus-tl.is-quer .forus-tl__slot{ flex: 0 0 auto; width: clamp(280px, 26vw, 330px); position: relative; --f: 0; }
.forus-tl.is-quer .forus-tl__slot.is-weit{ width: clamp(300px, 30vw, 400px); }
.forus-tl.is-quer .forus-tl__dot{ position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--fu-bg); border: 1.5px solid var(--fu-fg); transition: background .4s; }
.forus-tl.is-quer .forus-tl__slot.is-an .forus-tl__dot{ background: var(--fu-fg); }
/* Uhrzeit sitzt AUF der Linie hinter dem Punkt (Hintergrund maskiert die Haarlinie) */
.forus-tl.is-quer .forus-tl__zeit{ position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; white-space: nowrap;
  background: var(--fu-bg); padding: .35em .55em .35em .25em;
  color: color-mix(in srgb, currentColor 58%, transparent); }

.forus-tl.is-quer .forus-tl__stiel{ position: absolute; left: 0; width: 1px; background: var(--fu-hair); }
.forus-tl.is-quer .forus-tl__stiel.is-oben{ bottom: calc(50% + 5px); height: 26px; }
.forus-tl.is-quer .forus-tl__stiel.is-unten{ top: calc(50% + 5px); height: 26px; }

.forus-tl.is-quer .forus-tl__eintrag{ position: absolute; left: 0; width: min(292px, 78vw);
  opacity: calc(.25 + .75 * var(--f)); transform: translateY(calc((1 - var(--f)) * 10px)); }
.forus-tl.is-quer .forus-tl__slot.is-weit .forus-tl__eintrag{ width: min(360px, 82vw); }
.forus-tl.is-quer .forus-tl__eintrag.is-oben{ bottom: calc(50% + 44px); }
.forus-tl.is-quer .forus-tl__eintrag.is-unten{ top: calc(50% + 44px); }

/* ---------- Eintrag-Typografie (gilt quer UND gestapelt) ---------- */
.forus-tl__kopfzeile{ display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.forus-tl__bubble{ width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--fu-pflaume); box-shadow: 0 0 0 1.5px rgba(226,25,97,.5); }
.forus-tl__bubble img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.forus-tl__art{ display: block; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.forus-tl__person{ font-size: 1.05rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
/* overflow-wrap: siehe Kommentar in forus-rueck-ursprung — greift nur bei
   Textzoom, wenn ein einzelnes Wort sonst aus der Buehne geschnitten wuerde. */
.forus-tl__etitel{ margin: .1rem 0 .25rem; font-size: .92rem; line-height: 1.4; opacity: .8; max-width: 36ch; overflow-wrap: anywhere; }
.forus-tl__raum{ font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .4; }

/* Buehnen-Momente: groessere Schrift, sonst NICHTS anderes */
.forus-tl__eintrag.is-buehne .forus-tl__person{ font-size: 1.5rem; }
.forus-tl__eintrag.is-buehne .forus-tl__etitel{ font-size: 1.02rem; }
.forus-tl__eintrag.is-buehne .forus-tl__bubble{ width: 66px; height: 66px; }
/* Pausen: kursive Notiz */
.forus-tl__eintrag.is-pause .forus-tl__etitel{ font-style: italic; opacity: .55; margin: 0; }
.forus-tl.is-quer .forus-tl__eintrag.is-pause{ width: 200px; }

/* Fortschritt unten */
.forus-tl__fuss{ display: none; }
.forus-tl.is-quer .forus-tl__fuss{ flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1.25rem, 5vw, 3.5rem) clamp(1.2rem, 3vh, 2rem); }
.forus-tl__bar{ width: min(320px, 50vw); height: 1px; background: var(--fu-hair); position: relative; display: block; }
.forus-tl__bar b{ position: absolute; top: -0.5px; left: 0; height: 2px; width: 100%; background: var(--fu-grad);
  transform: scaleX(var(--p, 0)); transform-origin: left center; will-change: transform; }
.forus-tl__fussdatum{ font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }

/* ================================================================
   GESTAPELT (Standard ohne JS / reduce): ruhige Liste
   ================================================================ */
.forus-tl:not(.is-quer) .forus-tl__pin{ max-width: var(--fu-cw,1440px); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
.forus-tl:not(.is-quer) .forus-tl__spur{ display: block; }
.forus-tl:not(.is-quer) .forus-tl__tagmark{ margin: var(--fu-s7, clamp(3.5rem, 7vw, 6rem)) 0 var(--fu-s5, clamp(2rem, 3.5vw, 3rem)); }
.forus-tl:not(.is-quer) .forus-tl__tagmark:first-child{ margin-top: 0; }
.forus-tl:not(.is-quer) .forus-tl__tagdot{ display: none; }
.forus-tl:not(.is-quer) .forus-tl__tagname{ display: block; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; }
.forus-tl:not(.is-quer) .forus-tl__tagdatum{ display: inline-block; margin-top: .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }
.forus-tl:not(.is-quer) .forus-tl__slot{ position: relative; padding: var(--fu-s3, 1.5rem) 0 var(--fu-s3, 1.5rem) 1.4rem; border-left: 1px solid var(--fu-hair); }
.forus-tl:not(.is-quer) .forus-tl__dot{ position: absolute; left: -4.5px; top: calc(var(--fu-s3, 1.5rem) + .45em); width: 9px; height: 9px; border-radius: 50%; background: var(--fu-fg); }
.forus-tl:not(.is-quer) .forus-tl__zeit{ display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; opacity: .55; margin-bottom: .5rem; }
.forus-tl:not(.is-quer) .forus-tl__stiel{ display: none; }
.forus-tl:not(.is-quer) .forus-tl__eintrag + .forus-tl__eintrag{ margin-top: var(--fu-s3, 1.5rem); }

/* ---------- Einlauf (FORUS-Bewegungsstandard) ---------- */
.forus-tl.is-anim [data-tl-in]{ opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .8s var(--fu-ease), transform .8s var(--fu-ease); }
.forus-tl.is-anim [data-tl-in].is-in{ opacity: 1; transform: none; }
.forus-tl.is-anim .forus-tl__eyebrow.is-in{ opacity: var(--fu-dim); }
.forus-tl.is-anim .forus-tl__lead.is-in{ opacity: .82; }

@media (prefers-reduced-motion: reduce){
  .forus-tl__title em{ animation: none; }
  [data-tl-in]{ opacity: 1 !important; transform: none !important; }
}