.bb-stage{margin:0 0 34px}.bb-stage__title{font-size:1.55rem;border-bottom:3px solid var(--bb-accent,#003970);padding-bottom:7px;margin:0 0 15px}.bb-stage__grid{display:grid;grid-template-columns:repeat(var(--bb-columns,3),minmax(0,1fr));gap:16px;align-items:stretch}.bb-stage__slot{min-width:0;min-height:0}.bb-stage__slot>.bb-stage__item{height:100%}.bb-stage__item{grid-column:span var(--bb-col-span,1);grid-row:span var(--bb-row-span,1);min-width:0;overflow:hidden}.bb-post-display{background:white;display:flex;flex-direction:column}.bb-post-display__image{display:block;flex-shrink:0}.bb-post-display__image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.bb-post-display__body{padding:14px}.bb-post-display__author{font-size:.75rem;font-weight:650;color:var(--bb-accent,#003970);margin:0 0 7px}.bb-post-display__title{font-size:clamp(1rem,1.8vw,1.35rem);line-height:1.25;margin:0 0 7px}.bb-post-display__excerpt{font-size:.9rem;line-height:1.4;margin:0}.bb-post-display__date{display:block;color:#667;font-size:.75rem;margin-top:10px}.bb-post-display__avatar-wrap{display:block;text-align:center;padding:15px 0 0}.bb-post-display__avatar{width:90px;height:90px;border-radius:50%;object-fit:cover}.bb-post-display--horizontal{flex-direction:row}.bb-post-display--horizontal>.bb-post-display__image{width:45%}.bb-post-display--horizontal>.bb-post-display__image img{height:100%;aspect-ratio:auto}.bb-post-display--horizontal>.bb-post-display__body{flex:1}.bb-post-display--text .bb-post-display__image{display:none}.bb-fixed-content{background:transparent}.bb-fixed-content>*:first-child{margin-top:0}.bb-fixed-content>*:last-child{margin-bottom:0}@media(max-width:760px){.bb-stage__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bb-stage__slot{min-width:0;min-height:0}.bb-stage__slot>.bb-stage__item{height:100%}.bb-stage__slot{grid-column:auto!important;grid-row:auto!important}.bb-stage__item{grid-column:span min(var(--bb-col-span,1),2);grid-row:auto}}@media(max-width:530px){.bb-stage__grid{grid-template-columns:minmax(0,1fr);gap:12px}.bb-stage__slot{min-width:0;min-height:0}.bb-stage__slot>.bb-stage__item{height:100%}.bb-stage__slot{grid-column:1/-1!important;grid-row:auto!important}.bb-stage__item{grid-column:1/-1;grid-row:auto}.bb-post-display--horizontal{flex-direction:column}.bb-post-display--horizontal>.bb-post-display__image{width:100%}.bb-post-display--horizontal>.bb-post-display__image img{aspect-ratio:16/9}}

/* BB-Core 0.1.8: round images and three portrait-oriented editorial cards.
   Applies only to opted-in Post Displays; existing cards remain unchanged. */
.bb-post-display--round > .bb-post-display__image {
  width: min(100%, 136px);
  max-width: 100%;
  padding: 0 !important;
  margin-inline: auto;
}
.bb-stage .bb-post-display--round > .bb-post-display__image img,
.bb-post-display--round .bb-post-display__portrait-media .bb-post-display__image img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  border-radius: 50%;
}
.bb-stage .bb-post-display--horizontal.bb-post-display--round > .bb-post-display__image {
  width: min(38%, 136px);
  flex-shrink: 0;
  align-self: flex-start;
}
.bb-post-display--round > .bb-post-display__avatar-wrap .bb-post-display__avatar {
  border-radius: 50%;
}
.bb-post-display--portrait-normal,
.bb-post-display--portrait-compact,
.bb-post-display--portrait-box {
  --bb-portrait-diameter: 112px;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}
.bb-post-display__portrait-header { min-width: 0; }
.bb-post-display__portrait-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.bb-stage .bb-post-display__portrait-media .bb-post-display__image,
.bb-stage .bb-post-display__portrait-media .bb-post-display__avatar-wrap {
  display: block;
  padding: 0 !important;
  margin: 0;
  width: min(100%, var(--bb-portrait-diameter));
  min-width: 0;
  flex: 0 1 var(--bb-portrait-diameter);
  text-align: center;
}
.bb-post-display__portrait-media .bb-post-display__avatar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}
.bb-post-display__portrait-meta { min-width: 0; }
.bb-post-display__portrait-meta .bb-post-display__author {
  margin: 0;
  overflow-wrap: anywhere;
}
.bb-post-display__portrait-meta .bb-post-display__date {
  display: block;
  margin-top: 3px;
}
.bb-post-display--portrait-normal > .bb-post-display__portrait-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.bb-post-display--portrait-normal > .bb-post-display__body { text-align: center; }
.bb-post-display--portrait-compact > .bb-post-display__portrait-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.bb-post-display--portrait-compact { --bb-portrait-diameter: 76px; }
.bb-post-display--portrait-compact .bb-post-display__portrait-meta { flex: 1; }
.bb-post-display--portrait-box {
  --bb-portrait-diameter: 88px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
}
.bb-post-display--portrait-box > .bb-post-display__portrait-header {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}
.bb-post-display--portrait-box > .bb-post-display__body { flex: 1; min-width: 0; }
.bb-post-display--portrait-box.bb-post-display--box-right { flex-direction: row-reverse; }
.bb-post-display--portrait-normal > .bb-post-display__body,
.bb-post-display--portrait-compact > .bb-post-display__body,
.bb-post-display--portrait-box > .bb-post-display__body {
  padding: 0;
  min-width: 0;
}
.bb-stage__slot { container-type: inline-size; }
@container (max-width: 335px) {
  .bb-post-display--portrait-box,
  .bb-post-display--portrait-box.bb-post-display--box-right { flex-direction: column; }
  .bb-post-display--portrait-box > .bb-post-display__portrait-header {
    flex: initial;
    align-self: stretch;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .bb-post-display--portrait-box .bb-post-display__portrait-meta { flex: 1; }
  .bb-post-display--portrait-compact { --bb-portrait-diameter: 62px; }
}
@media(max-width:530px) {
  .bb-post-display--portrait-normal,
  .bb-post-display--portrait-compact,
  .bb-post-display--portrait-box { padding: 12px; }
}


/* BB-Core 0.2.1: optional editorial cover display for a normal stage slot,
   or an independently queried category-fixed stage slot. */
.bb-stage .bb-post-display--cover { background: transparent; text-align: center; }
.bb-stage .bb-post-display--cover > .bb-post-display__image { width:100%; padding:0 !important; display:block; }
.bb-stage .bb-post-display--cover > .bb-post-display__image img {
  display:block; width:auto; max-width:100%; height:auto; aspect-ratio:auto !important;
  object-fit:contain; margin:0 auto;
}
.bb-stage .bb-post-display--cover > .bb-post-display__body { padding:7px 3px !important; }
.bb-stage .bb-post-display--cover .bb-post-display__title { font-size:.82rem; line-height:1.25; font-weight:400; text-align:center; margin:0; }
.bb-stage .bb-post-display--cover .bb-post-display__title a { text-decoration:none; }

/* BB-Core 1.0.0 – Hochformat / Cover.
 * Use a proportional 512 × 724 derivative, without a CSS crop.
 * The original DIN proportions determine height at any slot width.
 */
.bb-stage .bb-post-display--image-cover > .bb-post-display__image,
.bb-stage .bb-post-display--image-cover .bb-post-display__portrait-media .bb-post-display__image {
  min-width: 0;
  max-width: 100%;
}
.bb-stage .bb-post-display--image-cover > .bb-post-display__image img,
.bb-stage .bb-post-display--image-cover .bb-post-display__portrait-media .bb-post-display__image img,
.bb-stage .bb-post-display--cover > .bb-post-display__image img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin-inline: auto;
}
/* The standard horizontal layout may dictate image height; let the source
 * image keep its natural height, even when the card becomes mobile. */
.bb-stage .bb-post-display--horizontal.bb-post-display--image-cover > .bb-post-display__image {
  align-self: flex-start;
}


/* BB-Core 1.0.6: template-controlled arrangements. The legacy classes are
 * preserved, and these selectors only affect newly resolved variants. */
.bb-stage .bb-post-display--cover-horizontal {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  background:transparent;
}
.bb-stage .bb-post-display--cover-horizontal > .bb-post-display__image {
  flex:0 0 35%;
  min-width:0;
  align-self:flex-start;
  padding:0 !important;
}
.bb-stage .bb-post-display--cover-horizontal > .bb-post-display__image img {
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:100%;
  aspect-ratio:auto !important;
  object-fit:contain !important;
}
.bb-stage .bb-post-display--cover-horizontal > .bb-post-display__body {
  flex:1;
  min-width:0;
  padding:0 !important;
}
.bb-stage .bb-post-display--cover-horizontal .bb-post-display__title {
  font-size:0.96rem;
  line-height:1.25;
  font-weight:400;
  margin:0;
}
.bb-stage .bb-post-display--cover-text { background:transparent; text-align:center; }
.bb-stage .bb-post-display--cover-text > .bb-post-display__body { padding:7px 3px !important; }
.bb-stage .bb-post-display--cover-text .bb-post-display__title {
  font-size:.82rem; font-weight:400; line-height:1.25; margin:0;
}
/* BB-Core 1.0.7: author text cards use a small, circular FEATURED image.
 * The image lives inside .bb-post-display__body so text wraps it naturally. */
.bb-stage .bb-post-display--portrait-text > .bb-post-display__body {
  display: flow-root;
  min-width: 0;
}
.bb-stage .bb-post-display--portrait-text > .bb-post-display__body > .bb-post-display__image {
  display: block;
  float: left;
  clear: none;
  width: 62px;
  max-width: 62px;
  margin: 0 12px 8px 0;
  padding: 0 !important;
}
.bb-stage .bb-post-display--portrait-text > .bb-post-display__body > .bb-post-display__image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50%;
}
@media (max-width: 530px) {
  .bb-stage .bb-post-display--portrait-text > .bb-post-display__body > .bb-post-display__image {
    width: 62px;
    max-width: 62px;
    margin-right: 10px;
  }
}
@container (max-width:240px) {
  .bb-stage .bb-post-display--cover-horizontal { flex-direction:column; }
  .bb-stage .bb-post-display--cover-horizontal > .bb-post-display__image { width:100%; }
}


/* BB-Core 1.0.8: template-dependent listing (archive, search, blog, Panta-Rhei). */
.bb-archive-list .bb-card.bb-list--wide .bb-card__image img { aspect-ratio:16/9; width:100%; height:auto; object-fit:cover; }
.bb-archive-list .bb-card.bb-list--tall .bb-card__image { flex:0 0 min(28%,170px); }
.bb-archive-list .bb-card.bb-list--tall .bb-card__image img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
.bb-archive-list .bb-card.bb-list--author .bb-card__image { flex:0 0 62px; width:62px; max-width:62px; }
.bb-archive-list .bb-card.bb-list--author .bb-card__image img { display:block; width:62px; height:62px; aspect-ratio:1/1; object-fit:cover; border-radius:50%; }
/* BB-Core 1.0.10: Panta-Rhei remains a single-column, floated-text stream.
 * The three list mappings affect ONLY which picture floats (or appears below).
 * Archive and search result cards above retain their independent layout. */
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide,
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--tall,
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--author { display:block; }
.bb-panta-rhei .bb-panta-rhei__entry-header { display:flow-root; line-height:1.2; }
/* The floated image link is INSIDE entry-body, not a sibling of it.
 * Use a local formatting context so no float leaks into a subsequent card. */
.bb-panta-rhei .bb-panta-rhei__entry-header .bb-panta-rhei__entry-body {
  display:flow-root; width:100%; min-width:0;
}
/* Quer: round WP-author avatar (48px) floats; a broad 3:1 featured picture follows. */
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide .bb-panta-rhei__portrait-link {
  display:block; float:left; clear:none; width:48px; max-width:48px;
  margin:2px 12px 8px 0; line-height:0;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide .bb-panta-rhei__portrait {
  display:block; width:48px; height:48px; aspect-ratio:1/1;
  object-fit:cover; border-radius:50%;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide .bb-panta-rhei__wide-image {
  display:block; margin-top:20px; line-height:0; overflow:hidden;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide .bb-panta-rhei__wide-image img {
  display:block; width:100%; height:auto; aspect-ratio:3/1; object-fit:cover;
}
/* Hoch / Autor: the featured image link floats inside entry-body. */
.bb-panta-rhei .bb-panta-rhei__entry .bb-panta-rhei__float-image {
  display:block; float:left; clear:none; width:64px; max-width:64px;
  margin:2px 12px 8px 0; line-height:0;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--tall .bb-panta-rhei__float-image img {
  display:block; width:64px; height:91px; aspect-ratio:64/91;
  object-fit:contain; border-radius:0;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--author .bb-panta-rhei__float-image {
  width:48px; max-width:48px;
}
.bb-panta-rhei .bb-panta-rhei__entry.bb-list--author .bb-panta-rhei__float-image img {
  display:block; width:48px; height:48px; aspect-ratio:1/1;
  object-fit:cover; border-radius:50%;
}
/* Keep the previously implemented per-visitor read/unread styling. */
.bb-panta-rhei__entry.gelesen .bb-panta-rhei__creator,
.bb-panta-rhei__entry.gelesen .bb-panta-rhei__title,
.bb-panta-rhei__entry.gelesen .bb-panta-rhei__teaser,
.bb-panta-rhei__entry.gelesen .bb-panta-rhei__title a { color:#727b85; }
@media (max-width:530px) {
  .bb-archive-list .bb-card.bb-list--tall,
  .bb-archive-list .bb-card.bb-list--author { display:flex; gap:12px; align-items:flex-start; }
  .bb-archive-list .bb-card.bb-list--tall .bb-card__image { flex:0 0 min(30%,112px); }
  .bb-archive-list .bb-card.bb-list--author .bb-card__image { flex:0 0 62px; }
  .bb-panta-rhei .bb-panta-rhei__entry.bb-list--wide .bb-panta-rhei__wide-image { margin-top:12px; }
}