/* Blog — Index und Artikel.
   Übernahme der Inline-Styles von blog.html und
   blog-social-real-commerce.html. Wird von functions.php geladen, wenn die
   Beitragsseite oder ein einzelner Beitrag ausgeliefert wird — Beiträge haben
   keinen festen Slug, deshalb nicht über das assets/<slug>.css-Muster.
   Werte 1:1 aus dem Prototyp, nur die Einrückung normalisiert. */

/* --- Index: Artikel-Karten --- */
.post-card { display: flex; flex-direction: column; }
.post-card .post-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.post-card h3 { margin-bottom: 10px; }
.post-card .post-excerpt { flex: 1; }
.post-card.soon { opacity: 0.72; }
.post-card.soon:hover { transform: none; box-shadow: none; }

/* --- Artikel: Kopf, Fliesstext, Kennzahlen --- */
.post-hero { padding-bottom: 48px; }
/* Zweispaltiger Artikel-Kopf, wenn ein Beitragsbild gesetzt ist.
   Reuses die .hero-grid des Design-Systems (styles.css). Ohne Bild
   greift die Klasse nicht — der einspaltige Kopf bleibt exakt wie
   heute. */
.post-hero.has-hero-image { padding-top: 8px; }
.post-hero.has-hero-image .hero-figure { position: relative; margin: 0; }
.post-hero.has-hero-image .hero-figure img { display: block; width: 100%; height: auto; border-radius: var(--r-500); }
.post-meta-line { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 18px; }
.post-body { padding: 72px 0; }
.post-body h2 { font-size: clamp(22px,2.8vw,32px); font-weight: 800; letter-spacing: -0.02em; color: var(--dunkelblau); margin: 44px 0 16px; }
.post-body p { font-size: 17px; line-height: 1.75; color: rgba(0,26,100,0.78); margin-bottom: 20px; }
.post-body p strong { color: var(--dunkelblau); }
.post-body ul { margin: 0 0 20px 22px; }
.post-body li { font-size: 17px; line-height: 1.7; margin-bottom: 10px; }
.post-stat-band { background: var(--grau); border: 1px solid var(--linie); border-radius: 18px; padding: 28px 32px; margin: 32px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 720px) { .post-stat-band { grid-template-columns: 1fr; } }
.post-stat .num { font-size: 34px; font-weight: 800; color: var(--blau); letter-spacing: -0.02em; }
.post-stat .lbl { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.post-footer-note { border-top: 1px solid var(--linie); margin-top: 48px; padding-top: 24px; font-size: 14px; color: var(--text-muted); }

/* Der Quellenhinweis unter dem Artikel ist im Prototyp ein <div>; als
   Block-Absatz wird er ein <p>, und dann greift `.post-body p` (0-1-1)
   stärker als `.post-footer-note` (0-1-0) und überschreibt Schriftgrösse und
   Farbe. Hier zurückgeholt, Werte identisch zum Prototyp. */
.post-body p.post-footer-note {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* --- Autorenbox (beyonity/autor-box) ---
   Kachel am Artikelende, im Fluss des Fliesstextes (container-narrow).
   Portraet links, Name + LinkedIn oben, Kurzbio darunter. Ohne
   Profilbild greift das Beyonity-Signet. */
.autor-box {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 56px 0 32px;
  padding: 24px;
  border: 1px solid var(--linie);
  border-radius: var(--r-500);
  background: var(--grau);
}
.autor-box__bild {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dunkelblau);
  display: flex;
  align-items: center;
  justify-content: center;
}
.autor-box__bild-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.autor-box__signet,
.autor-box__signet-svg { width: 100%; height: 100%; }
.autor-box__inhalt { display: flex; flex-direction: column; gap: 8px; }
.autor-box__kopf { display: flex; align-items: center; gap: 12px; }
.autor-box__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--dunkelblau);
  letter-spacing: -0.005em;
}
.autor-box__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--dunkelblau);
  background: transparent;
  transition: background 0.15s ease;
}
.autor-box__linkedin:hover { background: var(--blau-soft); }
/* .post-body p greift stark; hier zurueckziehen. */
.autor-box__bio,
.post-body p.autor-box__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
@media (max-width: 560px) {
  .autor-box { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .autor-box__bild { width: 64px; height: 64px; }
}

/* --- Lesebalken (Readometer) ---
   2 px hoch, ganz oben, in Gelb — sitzt UEBER der 72 px hohen
   site-header, deshalb z-index > 100. position:fixed heisst: die
   Seite verschiebt sich nicht durch den Balken. Die Breite wird
   ueber transform: scaleX() aus dem JS gesteuert (0..1), damit
   nur GPU-Compositing statt Layout laeuft. */
.lesebalken {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gelb);
  z-index: 200;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
  transition: transform 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .lesebalken { transition: none; }
}

/* --- CTA-Box im Fliesstext (beyonity/cta-box) ---
   Steht innerhalb des Artikels, folglich auch innerhalb der 920px
   breiten Textspalte. Farbwelt aus dem Blau-Kontrast: heller Grund,
   dunkles Textblau, gelber Knopf — genau die Rollen, die das
   Design-System fuer diese Zeichen vorsieht (--blau-soft, --dunkelblau,
   btn-primary). */
.cta-box {
  margin: 40px 0;
  padding: 32px;
  background: var(--blau-soft);
  border: 1px solid var(--linie);
  border-radius: var(--r-500);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-box__heading {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--dunkelblau);
  margin: 0;
  line-height: 1.25;
}
/* Der Satz im Fliesstext ist ein <p> — greifen wuerde .post-body p
   und den Farbton verwaschen. Hier zurueckgeholt. */
.cta-box__text,
.post-body .cta-box__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--dunkelblau);
  margin: 0;
  opacity: 0.86;
}
.cta-box__actions { margin-top: 6px; }
.cta-box__actions .btn-primary { padding: 12px 24px; font-size: 14px; }

/* --- Artikel-Verzeichnis (beyonity/artikel-toc) ---
   Textbreite bleibt 920 px. Erst ab 1180 px wird article.post-body zum
   zweispaltigen Raster; darunter faellt das Verzeichnis weg, der Text
   bleibt zentriert. Die Sticky-Position beruecksichtigt die 72 px hohe
   site-header plus 24 px Abstand — der Wert steht auch als
   scroll-padding-top, damit Anker unterhalb der Kopfzeile landen. */
.artikel-toc { display: none; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (min-width: 1180px) {
  .post-body.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 920px);
    column-gap: 48px;
    justify-content: center;
    align-items: start;
    padding-left: 32px;
    padding-right: 32px;
  }
  /* grid-column: 2 — gemessen am 24.09.2026, Pressemitteilung HELLO OS.

     Die Klasse has-toc steht FEST in templates/single.html, auf jedem
     Beitrag. Das Verzeichnis selbst rendert aber erst ab zwei
     Ueberschriften: beyonity_artikel_toc_render() gibt sonst '' zurueck
     und faellt ersatzlos aus dem DOM. Dann hatte das Grid nur noch EIN
     Kind — und ein einzelnes Kind landet in der ERSTEN Spalte. Ergebnis:
     240px schmaler Text neben 920px Leerraum.

     Die eine Zeile stellt den Inhalt fest in Spalte zwei. Damit steht
     der Fliesstext in JEDEM Beitrag an derselben Stelle, ob mit
     Verzeichnis oder ohne — beim Blaettern springt nichts. Die leere
     Spalte links ist der bewusste Preis dafuer.

     Nicht ueber :has(> .artikel-toc) geloest, obwohl das naheliegt: das
     haette jeden Beitrag ohne Verzeichnis zentriert und die Textspalte
     zwischen zwei Beitraegen um 112px wandern lassen. Ausserdem braucht
     diese Zeile keine :has()-Unterstuetzung. */
  .post-body.has-toc > .container-narrow { grid-column: 2; padding-left: 0; padding-right: 0; margin: 0; max-width: 920px; }
  .artikel-toc {
    display: block;
    position: sticky;
    top: 96px;
    font-size: 13px;
    line-height: 1.5;
    align-self: start;
  }
  .artikel-toc__label {
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 12px;
  }
  .artikel-toc__list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--linie); }
  .artikel-toc__item { margin-left: -2px; border-left: 2px solid transparent; padding: 6px 0 6px 14px; }
  .artikel-toc__item.is-level-3 { padding-left: 28px; font-size: 12.5px; }
  .artikel-toc__item.is-active { border-left-color: var(--gelb); }
  .artikel-toc__link { color: rgba(0,26,100,0.68); text-decoration: none; }
  .artikel-toc__item.is-active > .artikel-toc__link { color: var(--dunkelblau); font-weight: 600; }
  .artikel-toc__link:hover { color: var(--dunkelblau); }
}

/* Der Balken sitzt an der UNTERKANTE der Logoleiste, nicht am Fensterrand
   (Paulo am 11.09.: "kannst du den auf die untere kante der logoleiste
   schieben"). Gemessen: .site-header ist sticky bei top 0, 73 px hoch
   (72 px Inhalt plus 1 px Linie), z-index 100 — der Balken mit z-index 200
   liegt darueber und bleibt sichtbar.

   Fuer angemeldete Nutzer schiebt die WordPress-Adminleiste das Dokument um
   32 px nach unten, die Unterkante der Leiste liegt dann bei 105 px
   (gemessen). Am Fensterrand war der Balken vorher ueberhaupt nicht zu
   sehen: die Adminleiste hat z-index 99999 und deckte ihn ab.

   Die 32 und 46 sind WordPress-Vorgabe (admin-bar.css); unter 782 px ist die
   Leiste nicht fixiert, der Header rutscht dann mit. */
.lesebalken { top: 73px; }
body.admin-bar .lesebalken { top: 105px; }
@media (max-width: 782px) {
  body.admin-bar .lesebalken { top: 119px; }
}