/*
  ke-blog-post-header: Beitragskopf.

  Kein Farbfeld, der --sec-*-Satz der Sektion trägt alle Farben.

  Der Titel ist eine h1 ohne eigene Größe: er behält die Werte seiner
  Ebene aus den Theme-Einstellungen. Eine eigene Größe an dieser Stelle
  wäre die verdeckte Einstellung, gegen die dieses Theme angetreten ist.

  Die Themen stehen über dem Titel und sind keine Vorzeile im Sinne von
  .ke-eyebrow: sie tragen Verweise und keine Aussage, und sie tragen
  deshalb auch keine der Machart-Merkmale, die dort verboten sind. Sie
  tragen den Akzent, weil sie Ordnungszeichen sind und keine
  Handlungsaufforderung: die Marke bleibt dem Handlungsaufruf, dem Link im
  Fließtext und der Hervorhebung.
*/
.ke-post-header {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  text-align: var(--ke-post-align);
}

/*
  Die Textbreite gilt für Titel und Angaben, nicht für den ganzen Kopf.
  Ein Titel läuft auf 46rem in eine lesbare Zeilenlänge, das Titelbild
  darunter soll die volle Breite seiner Spalte tragen. Bei mittiger
  Ausrichtung zentriert sich der begrenzte Kasten selbst, bei
  linksbündiger bleibt er an der Achse des Textes darunter: ein
  zentrierter Kopf über linksbündigem Text hätte zwei Achsen.
*/
.ke-post-header__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: var(--ke-post-align);
  max-width: 46rem;
  margin: 0;
  margin-inline: var(--ke-post-inline);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.ke-post-header__topic {
  margin: 0;
}

.ke-post-header__topic-link:not(.ke-btn) {
  color: var(--sec-accent);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.ke-post-header__topic-link:not(.ke-btn):hover,
.ke-post-header__topic-link:not(.ke-btn):focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ke-post-header__title {
  max-width: 46rem;
  margin: 0;
  margin-inline: var(--ke-post-inline);
}

.ke-post-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--ke-post-align);
  gap: var(--s-3) var(--s-5);
  max-width: 46rem;
  margin-inline: var(--ke-post-inline);
  color: var(--sec-ink-muted);
  font-size: var(--fs-sm);
}

.ke-post-header__author {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/*
  Das Bild des Autors ist eine Beigabe und trägt den Kopf nicht: ein Symbol
  oder ein Bild garniert, es trägt nicht. Deshalb bleibt es klein und
  bekommt die weiche Kante der Theme-Rundungsskala statt eines Kreises.
  Steht die Skala im Theme auf keine Rundung, ist es ein Quadrat, und das
  ist richtig so: die Entscheidung gehört dem Theme und nicht diesem Modul.

  Die Größe steht in rem und nicht in der Abstandsskala, weil sie eine
  Bildgröße ist und keine Fuge.
*/
.ke-post-header__avatar {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.ke-post-header__author-link:not(.ke-btn) {
  color: var(--sec-ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ke-post-header__author-link:not(.ke-btn):hover,
.ke-post-header__author-link:not(.ke-btn):focus-visible {
  color: var(--sec-ink);
}

.ke-post-header__meta-item {
  white-space: nowrap;
}

/* Das Titelbild steht seit dem 11. September 2026 in der Textspalte und
   nicht mehr im Kopf. Seine Regeln liegen deshalb in _blog-post.css, der
   Stildatei des Templates BlogPost.html, das auch sein Markup traegt. */

/*
  Der Lesefortschritt.

  Ohne JavaScript: animation-timeline: scroll() haengt den Fortschritt der
  Animation an die Bildlaufposition des Dokuments, der Browser rechnet das
  selbst. Dieselbe Technik wie der mitscrollende Pfeil in
  ke-process-timeline, nur an der Bildlaufleiste statt an der Sichtbarkeit
  eines Elements.

  Die Zeile sitzt UNTER der Kopfzeile, nicht ueber ihr: die Kopfzeile ist
  fixiert, und ein Balken darueber laege auf ihrer Unterkante. --ke-header-h
  liefert ihre Hoehe, dieselbe Variable, die auch der Platzhalter liest.

  Ohne Unterstuetzung bleibt sie unsichtbar (scaleX(0)) und damit still. Das
  ist die richtige Richtung: ein Balken, der immer voll ist, waere eine
  Falschaussage.
*/
.ke-post-progress {
  position: fixed;
  inset-block-start: var(--ke-header-h-compact, 4rem);
  inset-inline: 0;
  z-index: 40;

  /* Die doppelte Staerke der tragenden Linie. Vorgabe des Auftraggebers vom
     11. September 2026: "den Leseindikator bitte dicker gestalten". 2px
     liefen ueber 1440 Pixel Fensterbreite als Haarlinie unter der Kopfzeile
     mit, 4px sind aus dem Augenwinkel zu sehen, ohne dass die Linie zum
     Balken wird. */
  height: var(--line-heavy);
  pointer-events: none;
}

.ke-post-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
  .ke-post-progress__bar {
    animation: ke-post-progress linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes ke-post-progress {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ke-post-progress {
    display: none;
  }
}