/* Egg-Tracker — Chronik (/timeline/, /en/timeline/), abgenommen 2026-10-16 (Andreas).

   Was rund um App, Website und Community passiert, das Neueste oben. Je Monat
   eine Karte; darin eine Schiene mit einem Punkt je Ereignis. Jede Zeile ist
   als Ganzes die Tippflaeche (Datum, Art und Satz), der Pfeil rechts zeigt,
   dass sie weiterfuehrt. Die Release Notes behandeln nur die App; die Chronik
   ist uebergreifend und steht deshalb unter „Community" (Andreas, 2026-10-14).

   Farben nur ueber die Tokens aus site.css, Karten wie .release-card
   (release.css). Touch-Wert als Basis, `min-width` nur fuer echte
   Unterschiede. */

/* ---------- Kopf ---------- */

.chronik-kopf {
  display: grid;
  justify-items: center;
  gap: 1.25rem 2rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

/* Der lesende Advisor (Andreas, 2026-10-16) ist eine vollflaechige Szene,
   kein freigestelltes Motiv wie die Koepfe der anderen Seiten — deshalb ein
   gerahmtes Bild mit den Ecken der Karten statt Figur mit Schlagschatten.
   Telefon: ueber dem Titel; ab 641px links daneben (wie .release-page-head). */
.chronik-bild img {
  display: block;
  width: clamp(12rem, 58vw, 17rem);
  height: auto;
  border: 1px solid var(--accent-35);
  border-radius: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-md), 0 0 2.5rem var(--accent-12);
}

@media (min-width: 641px) {
  .chronik-kopf {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }
}

/* Oben die Pille mit dem Seitennamen „Die Egg-Tracker-Chroniken", darunter
   als grosser Titel „Was bisher geschah …" (Andreas, 2026-10-16). */
.chronik-pill {
  display: inline-flex;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--accent-35);
  border-radius: 999px;
  background: var(--accent-12);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* „Was bisher / geschah …" zweizeilig, die zweite Zeile eingerueckt, und so
   gross, dass der Titel die Textspalte fuellt (Andreas, 2026-10-16). Die
   Schrift folgt deshalb der Breite der Spalte, nicht des Fensters: Die Spalte
   ist eine Container-Abfrage, --titel-em die Breite der laengsten Zeile samt
   Einzug in em, mit etwa 10 % Luft fuer breitere Systemschriften (iOS,
   Android; gemessen: 90 % Fuellung im Testbrowser). Wer den Titel aendert,
   misst sie neu — der Waechter in tests/chronik.spec.mjs schlaegt an, wenn
   er ueberlaeuft oder die Spalte nicht mehr fuellt. Ohne Container-Abfragen
   gilt die vw-Zeile davor.
   Telefon: bewusst etwas kleiner, rund 72 % der Spalte (Andreas, 2026-10-16:
   „mobil noch etwas kleiner") — der Titel steht dort unter dem Bild und
   mittig, nicht neben einer Spalte, die er fuellen muesste. */
.chronik-kopf-text {
  justify-self: stretch;
  container-type: inline-size;
}

.chronik-kopf h1 {
  --titel-em: 9.5;
  width: fit-content;
  margin: 0 auto;
  color: var(--text-strong);
  font-size: clamp(1.75rem, 8vw, 3.25rem);
  font-size: clamp(1.75rem, calc(100cqi / var(--titel-em)), 4.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
}

.chronik-kopf h1:lang(en) {
  --titel-em: 12.2;
}

@media (min-width: 641px) {
  .chronik-kopf h1 {
    --titel-em: 7.6;
  }

  .chronik-kopf h1:lang(en) {
    --titel-em: 9.75;
  }
}

.chronik-titel-zeile {
  display: block;
  white-space: nowrap;
}

.chronik-titel-versatz {
  padding-left: 1.75em;
}

@media (min-width: 641px) {
  .chronik-kopf h1 {
    margin: 0;
  }
}

.chronik-mitmachen h2 em {
  font-style: normal;
  color: var(--accent);
}

/* ---------- Karten ----------
   <section>s; site.css zieht zwischen aufeinanderfolgenden Sections eine
   Haarlinie mit Innenabstand (`section + section`). Die Kurzschreibweisen
   hier nehmen das zurueck — wie .release-card. */

.chronik-monat,
.chronik-mitmachen {
  position: relative;
  max-width: 46rem;
  margin: 0 auto clamp(1.25rem, 4vw, 2rem);
  padding: clamp(1.1rem, 4vw, 1.75rem);
  border: 1px solid var(--card-border);
  border-radius: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--card);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Lichtkranz oben links, als Ellipse bis an die Raender (closest-side) —
   derselbe Befund wie .release-card::before. */
.chronik-monat::before,
.chronik-mitmachen::before {
  content: '';
  position: absolute;
  inset: -55% 45% 55% -45%;
  background: radial-gradient(closest-side, var(--accent-12), transparent);
  pointer-events: none;
}

.chronik-monat > *,
.chronik-mitmachen > * {
  position: relative;
}

.chronik-monat h2 {
  margin: 0 0 0.6rem;
  color: var(--text-strong);
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ---------- Zeitleiste ---------- */

.chronik-liste {
  margin: 0 0 0 0.4rem;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--accent-22);
  list-style: none;
}

.chronik-liste li + li {
  margin-top: 0.15rem;
}

.chronik-eintrag {
  position: relative;
  display: block;
  padding: 0.55rem 2.25rem 0.55rem 0.75rem;
  border-radius: 0.85rem;
  color: inherit;
  text-decoration: none;
}

a.chronik-eintrag {
  transition: background 0.15s ease;
}

a.chronik-eintrag:hover {
  background: var(--accent-12);
}

a.chronik-eintrag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

a.chronik-eintrag::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  opacity: 0.7;
  transform: translateY(-50%) rotate(45deg);
}

a.chronik-eintrag:hover::after {
  opacity: 1;
}

.chronik-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Der Punkt haengt an der Datumszeile statt an einer festen Hoehe, damit er
   bei groesserer Schrift mitwandert. Mitte auf der Schiene: Innenabstand der
   Zeile (0.75rem) plus Abstand und halbe Breite der Schiene (0.9rem + 1px)
   plus halber Punkt. */
.chronik-meta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-1.65rem - 1px - 0.3rem);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

/* Das juengste Ereignis traegt einen Lichtkranz. */
.chronik-monat:first-of-type .chronik-liste > li:first-child .chronik-meta::before {
  box-shadow: 0 0 0 4px var(--accent-22);
}

.chronik-art {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chronik-text {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.45;
}

/* Ein bis zwei Stichwoerter je Zeile in der Primaerfarbe (Andreas,
   2026-10-16) — dasselbe <em> wie in den Ueberschriften der Seite. */
.chronik-text em {
  font-style: normal;
  color: var(--accent);
}

/* ---------- Mitmachen ---------- */

.chronik-mitmachen {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}

.chronik-mitmachen h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.chronik-mitmachen p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.chronik-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
}

.chronik-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--accent-link);
  font-size: 0.9rem;
  font-weight: 600;
}