/* ============================================
   THELENSHOF – Generational Timeline
   Used on: /ueber-uns.html, /en/about.html
   Editorial chronicle — alternating asymmetry,
   vertical thread, oversized serif dates.
   ============================================ */

.timeline {
  background: var(--color-bg);
  padding: var(--space-7) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

/* Section intro — right-aligned kicker, single bold line */
.timeline__intro {
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: end;
}

.timeline__intro-kicker {
  grid-column: 1 / 5;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline__intro-kicker::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--color-accent);
}

.timeline__intro-title {
  grid-column: 5 / 12;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

.timeline__intro-title em {
  font-style: italic;
  color: var(--color-primary);
}

/* Thread — one continuous vertical line down the center */
.timeline__track {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.timeline__track::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-border) 6%,
    var(--color-border) 94%,
    transparent 100%
  );
  transform: translateX(-0.5px);
  z-index: 0;
}

/* Chapter — a single beat in the story.
   Grid of 12 columns; left/right alternation controlled by modifier. */
.timeline__chapter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  padding: var(--space-6) 0;
  z-index: 1;
}

/* The small marker dot on the thread */
.timeline__chapter::after {
  content: '';
  position: absolute;
  top: calc(var(--space-6) + 0.6em);
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  transform: translateX(-50%);
  z-index: 2;
}

/* ── Left-anchored chapter: date left, body right ── */
.timeline__chapter--left .timeline__year {
  grid-column: 1 / 6;
  justify-self: end;
  text-align: right;
}

.timeline__chapter--left .timeline__body {
  grid-column: 7 / 13;
}

.timeline__chapter--left .timeline__aside {
  grid-column: 7 / 12;
}

/* ── Right-anchored chapter: date right, body left ── */
.timeline__chapter--right .timeline__year {
  grid-column: 8 / 13;
  justify-self: start;
  text-align: left;
  order: 2;
}

.timeline__chapter--right .timeline__body {
  grid-column: 1 / 7;
  order: 1;
}

.timeline__chapter--right .timeline__aside {
  grid-column: 2 / 7;
  order: 3;
}

/* Date — the architectural feature */
.timeline__year {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin: 0;
  position: relative;
}

.timeline__year-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-top: var(--space-2);
}

/* Body text column */
.timeline__body {
  padding-top: var(--space-3);
}

.timeline__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.timeline__prose {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 42ch;
}

.timeline__prose + .timeline__prose {
  margin-top: var(--space-3);
}

/* Pull quote — oversized italic serif, a visual breath.
   Masks the thread behind it so the line visually breaks here. */
.timeline__quote {
  grid-column: 1 / 13;
  max-width: 22ch;
  margin: var(--space-5) auto 0;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--color-primary);
  background: var(--color-bg);
  position: relative;
  z-index: 2;
}

/* Small amber ticks where the thread meets the quote block —
   signals "the line pauses to speak, then continues." */
.timeline__quote::before,
.timeline__quote::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translateX(-50%);
}

.timeline__quote::before { top: -3.5px; }
.timeline__quote::after  { bottom: -3.5px; }

.timeline__quote-text {
  quotes: '„' '"' '\201A' '\2018';
}

.timeline__quote-text::before {
  content: open-quote;
  color: var(--color-accent);
  font-style: normal;
  margin-right: 0.04em;
}

.timeline__quote-text::after {
  content: close-quote;
  color: var(--color-accent);
  font-style: normal;
  margin-left: 0.04em;
}

:root[lang="en"] .timeline__quote-text,
html[lang="en"] .timeline__quote-text {
  quotes: '"' '"' "'" "'";
}

.timeline__quote-attribution {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Aside — optional supporting detail under prose */
.timeline__aside {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  max-width: 42ch;
}

.timeline__aside strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Closing chapter ("Heute") — no year numeral, different treatment */
.timeline__chapter--now {
  padding-top: var(--space-7);
}

.timeline__chapter--now .timeline__year {
  grid-column: 1 / 6;
  justify-self: end;
  text-align: right;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--color-accent-dark);
}

.timeline__chapter--now .timeline__body {
  grid-column: 7 / 13;
}

/* Closing full-bleed signature */
.timeline__signoff {
  max-width: var(--container-max);
  margin: var(--space-7) auto 0;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: center;
}

.timeline__signoff-rule {
  grid-column: 1 / 5;
  height: 1px;
  background: var(--color-border);
}

.timeline__signoff-text {
  grid-column: 5 / 13;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0;
}

/* Entrance animation — chapters fade up as scroll approaches */
@media (prefers-reduced-motion: no-preference) {
  .timeline__chapter,
  .timeline__quote,
  .timeline__signoff {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .timeline__chapter.is-visible,
  .timeline__quote.is-visible,
  .timeline__signoff.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Responsive ─────────────────────────────── */

/* Tablet — compress but keep alternation */
@media (max-width: 1023px) {
  .timeline__intro-kicker { grid-column: 1 / 4; }
  .timeline__intro-title  { grid-column: 4 / 13; }

  .timeline__chapter--left .timeline__year { grid-column: 1 / 5; }
  .timeline__chapter--left .timeline__body,
  .timeline__chapter--left .timeline__aside { grid-column: 6 / 13; }

  .timeline__chapter--right .timeline__year { grid-column: 9 / 13; }
  .timeline__chapter--right .timeline__body,
  .timeline__chapter--right .timeline__aside { grid-column: 1 / 8; }

  .timeline__chapter--now .timeline__year { grid-column: 1 / 5; }
  .timeline__chapter--now .timeline__body { grid-column: 6 / 13; }
}

/* Mobile — collapse to a single left-rail layout.
   Thread moves to the left edge, all chapters align left,
   years scale down but stay oversized relative to body. */
@media (max-width: 767px) {
  .timeline {
    padding: var(--space-6) 0;
  }

  .timeline__intro {
    display: block;
    margin-bottom: var(--space-5);
  }

  .timeline__intro-kicker {
    margin-bottom: var(--space-3);
  }

  .timeline__intro-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .timeline__track::before {
    left: 20px;
    transform: none;
  }

  .timeline__chapter,
  .timeline__chapter--left,
  .timeline__chapter--right,
  .timeline__chapter--now {
    display: block;
    padding: var(--space-5) 0 var(--space-5) var(--space-5);
    position: relative;
  }

  .timeline__chapter::after {
    top: var(--space-5);
    left: 20px;
  }

  .timeline__chapter--left .timeline__year,
  .timeline__chapter--right .timeline__year,
  .timeline__chapter--now .timeline__year {
    grid-column: auto;
    justify-self: unset;
    text-align: left;
    font-size: clamp(3.5rem, 16vw, 5rem);
    margin-bottom: var(--space-2);
  }

  .timeline__chapter--left .timeline__body,
  .timeline__chapter--right .timeline__body,
  .timeline__chapter--now .timeline__body,
  .timeline__chapter--left .timeline__aside,
  .timeline__chapter--right .timeline__aside {
    grid-column: auto;
    padding-top: 0;
  }

  .timeline__prose {
    font-size: 1rem;
  }

  .timeline__quote {
    text-align: left;
    margin-left: var(--space-5);
    max-width: none;
  }

  .timeline__signoff {
    display: block;
    margin-top: var(--space-5);
  }

  .timeline__signoff-rule {
    width: 60px;
    margin-bottom: var(--space-3);
  }
}