/*!
 * Dölau Theme – assets/css/chronik.css
 *
 * Chronik-Zeitstrahl (template-chronik.php). Wird über inc/enqueue.php
 * nur auf der Chronik-Seite geladen — alle anderen Seiten sparen sich
 * diese ~5 KB.
 *
 * Erwartet, dass main.css schon geladen ist (CSS-Variablen --header-h,
 * --pad-x, --font-mono, --ink, --accent etc.).
 *
 * @since 0.8.0
 */

/* Sticky-Bar oben — klebt unter der Site-Header. */
.chronik-zeitstrahl{
  position:sticky;
  top:calc(var(--header-h, 80px) + 0px);
  z-index:50;
  margin:0 calc(-1 * var(--pad-x)) 36px; /* edge-to-edge im Section-Padding */
  padding:12px var(--pad-x);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}

/* Mehrzeilig statt horizontal scrollbar — Jahre fließen einfach in mehrere
 * Reihen, wenn die Breite nicht reicht. */
.cz-track{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
}

.cz-year{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--ink-mute);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:.88rem;
  letter-spacing:.02em;
  transition:color .15s,background .15s,border-color .15s;
}
/* v1.0.3: `outline:none` gestrichen. Der gedachte Ersatz — Flächenwechsel auf
 * --bg-soft plus --rule-Rahmen — liegt bei 1,08:1 bzw. 1,26:1 und ist damit
 * faktisch unsichtbar. Der Zeitstrahl ist die primäre Navigation der Chronik;
 * ein Tastaturnutzer hatte dort keinerlei Orientierung. Die Hover-Optik bleibt,
 * der Ring aus main.css kommt jetzt zusätzlich. */
.cz-year:hover,
.cz-year:focus-visible{
  color:var(--ink);
  background:var(--bg-soft);
  border-color:var(--rule);
}
/* v1.0.4: --accent auf --accent-soft lag bei 4,49:1 und verfehlte AA um einen
 * Hundertstel. --accent-ink bringt 6,82:1 (hell) bzw. 7,69:1 (dunkel). */
.cz-year.is-current{
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-color:var(--accent);
}

.cz-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ink-mute);
  flex:0 0 auto;
  transition:background .15s,transform .15s;
}
.cz-year.is-current .cz-dot{
  background:var(--accent);
  transform:scale(1.25);
}
.cz-year:hover .cz-dot{background:var(--ink);}

.cz-label{font-weight:600;}
.cz-count{
  font-size:.72rem;
  color:var(--ink-mute);
  background:var(--bg-soft);
  border-radius:999px;
  padding:1px 8px;
  min-width:22px;
  text-align:center;
}
/* v1.0.7: --accent-ink statt --accent. Auf der 18-%-Akzentfläche lag der
 * Wert bei 4,49:1 und verfehlte AA um einen Hundertstel — dieselbe Ursache
 * wie bei .cz-year.is-current. */
.cz-year.is-current .cz-count{
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  color:var(--accent-ink);
}

/* Jahres-Sektionen */
.chronik-jahre{display:flex;flex-direction:column;gap:60px;}

.chronik-jahr{
  /* v0.8.9: Anker-Sprung muss Site-Header + Sticky-Zeitstrahl freihalten,
   * sonst landet die Jahreszahl unter den Sticky-Bars. 72px war zu wenig
   * (Zeitstrahl wraps auf 2 Reihen ≈ 85px). 130px deckt alles ab plus
   * kleinen Puffer. */
  scroll-margin-top:calc(var(--header-h, 80px) + 130px);
}
/* WP-Admin-Bar berücksichtigen, wenn eingeloggt — sonst landet die
 * Überschrift teilweise hinter dem Admin-Bar am oberen Rand. */
body.admin-bar .chronik-jahr{
  scroll-margin-top:calc(var(--header-h, 80px) + 130px + var(--wp-admin--admin-bar--height, 32px));
}
.chronik-jahr-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule-soft);
}
.chronik-jahr-title{
  font-family:var(--font-serif);
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:600;
  line-height:1;
  margin:0;
  color:var(--ink);
  letter-spacing:-.02em;
}
.chronik-jahr-count{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--ink-mute);
  letter-spacing:.04em;
}

/* Mobile: Sticky deaktivieren (würde sonst mit 16 Jahres-Pills bei
 * flex-wrap viele Zeilen einnehmen und 25%+ vom Viewport fressen).
 * Negative Margins kommen jetzt von --pad-x — kein hardcoded -20px mehr. */
@media (max-width:720px){
  .chronik-zeitstrahl{
    position:static;
    padding:10px var(--pad-x);
    backdrop-filter:none;          /* nicht mehr nötig ohne sticky */
    background:transparent;
  }
  .cz-year{padding:6px 10px;font-size:.82rem;}
  .cz-count{display:none;}
  .chronik-jahre{gap:42px;}
  .chronik-jahr-title{font-size:1.8rem;}
  /* v0.8.9: Zeitstrahl-Bar ist auf Mobile nicht sticky → kein Puffer
   * dafür nötig. Nur Site-Header + Buffer. WP-Admin-Bar wird auf Mobile
   * 46px statt 32px. */
  .chronik-jahr{
    scroll-margin-top:calc(var(--header-h, 80px) + 24px);
  }
  body.admin-bar .chronik-jahr{
    scroll-margin-top:calc(var(--header-h, 80px) + 24px + var(--wp-admin--admin-bar--height, 46px));
  }
}