/* =============================================================================
 * „Neuester Beitrag" — kompaktes Fenster unter den Buttons auf der Startseite.
 * Kommt als LETZTES der Hero-Sequenz (nach den Buttons, gleicher rise-Effekt).
 * Deutlich kleiner als die Beitragsseite. Nutzt nur Tokens aus stenval.css.
 * ========================================================================== */
#letzterBeitrag.lb {
  max-width: 320px;
  margin: clamp(18px, 3vh, 28px) auto 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--mist);
  text-align: left;
}

/* Als Letztes einblenden – erst NACH den Buttons (rise + --ease wie im Hero). */
.hero #letzterBeitrag.lb { opacity: 0; transform: translateY(10px); }
.stage.is-acts #letzterBeitrag.lb { animation: rise 0.6s var(--ease) both; animation-delay: 0.5s; }

/* Kopfzeile: Label links, Datum rechts daneben – prominent. */
.lb .lb-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.lb .lb-label {
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--consult);
}
.lb .lb-datum { font-size: 12px; font-weight: 500; color: var(--sten); white-space: nowrap; }
.lb .lb-titel {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--sten);
  text-decoration: none;
  margin-bottom: 10px;
}
.lb .lb-titel:hover { color: var(--val); text-decoration: underline; }

.lb .lb-buehne {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hair);
}
/* Bei mehreren Folien: Wischen/Klicken zum Blättern (Cursor signalisiert es). */
.lb .lb-buehne.is-blaetterbar { cursor: pointer; }
.lb .lb-folie { display: block; width: 100%; height: auto; }
/* Karussell: Folien liegen übereinander, die Bühne hat ein FESTES Seitenverhältnis
   (JS übernimmt es von der ersten Folie). Blättern = nur überblenden – die Höhe
   ändert sich nie, also springt/ruckelt die Seite nicht. */
.lb .lb-buehne.is-karussell { aspect-ratio: 4 / 5; }
.lb .lb-buehne.is-karussell .lb-folie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lb .lb-buehne.is-karussell .lb-folie.is-aktiv { opacity: 1; }

.lb .lb-steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.lb .lb-nav {
  border: 1px solid var(--hair-strong);
  background: #fff;
  border-radius: 999px;
  width: 26px; height: 26px;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  color: var(--sten);
}
.lb .lb-nav:hover { border-color: var(--val); color: var(--val); }
.lb .lb-zaehler { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }