/* eigener Scrollrahmen */
.fb-scroll-frame {
  max-height: 75vh; /* ggf. anpassen */
  overflow-y: auto;
  padding-right: 6px; /* Platz für Scrollbar */
  scrollbar-width: thin;
}

/* schöner auf Desktop */
@media (min-width: 901px) {
  .fb-scroll-frame {
    max-height: 85vh;
  }
}


/* Zweispaltiges Grid statt column-count */
.fb-masonry-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px){
  .fb-masonry-grid{ grid-template-columns: 1fr; }
}

/* Spalten-Container */
.fb-col{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kartenstil (Hintergrundfarbe bleibt #43464B) */
.fb-masonry-item{
  margin: 0;               /* kein margin nötig – wir nutzen gap */
  background: #43464B;
  color: #eee;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

/* Galerie wie zuvor */
.fb-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 150px;
  gap: 4px;
}
.fb-gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
.fb-gallery.count-3 > .tile-1{
  grid-column: 1 / -1;
  grid-row: span 2;
  border-radius: 8px;
}
.fb-gallery .more{ position: relative; }
.fb-gallery .more::after{
  content: attr(data-more);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  color: #fff; font-weight: 700; font-size: 28px;
  border-radius: 6px;
}

/* Textbereich */
.fb-masonry-item .content{ padding: 12px 14px; }
.fb-masonry-item .time{ opacity:.7; font-size:12px; margin-bottom:8px; }
.fb-masonry-item .msg{ white-space: pre-wrap; font-size:14px; line-height:1.4; }

/* Meta-Zeile mit Logo + Datum */
.fb-masonry-item .meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px; /* Abstand zum Text */
}

/* Rundes Logo 48x48 */
.fb-masonry-item .meta .avatar{
  width: 24px;
  height: 24px;
  border-radius: 0%;
  object-fit: cover;
  display: block;
}

/* Datum/Uhrzeit in Corporate Orange, fett, gleiche Größe wie Text */
.fb-masonry-item .time{
  color: #FF850F;
  font-weight: 700;
  font-size: 14px;   /* wie .msg */
  line-height: 1.4;
  margin: 0;         /* kein Extraabstand */
  opacity: 1;        /* sicherstellen, dass es nicht grau wirkt */
}

/* (Optional) Text weiß lassen – hast du schon */
.fb-masonry-item .msg{
  color: #fff;
}

/* ---- Lightbox ---- */
.fb-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
}
.fb-lightbox.hidden { display: none; }
.fb-lightbox img {
  max-width: 92vw; max-height: 88vh; display: block;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); border-radius: 8px;
}
.fb-lightbox .ctrl {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  font-size: 30px; color: #fff;
}
.fb-lightbox .prev { left: 24px; }
.fb-lightbox .next { right: 24px; }
.fb-lightbox .close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff; cursor: pointer;
}
.fb-lightbox .counter {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); color: #fff; font-weight: 600;
  background: rgba(0,0,0,.4); padding: 6px 10px; border-radius: 8px;
  font-size: 14px;
}

/* ------- Startseiten-Variante (einspaltig, weiß, 500px) ------- */
.fb-variant-home .fb-scroll-frame {
  max-height: 500px;           /* Wunschhöhe für Startseite */
}

.fb-variant-home .fb-masonry-item {
  background: #fff;            /* weißer Hintergrund */
  color: #000;                 /* Grundtext schwarz */
  box-shadow: none;            /* keine Kachel-Optik */
  border-radius: 0;            /* optional: kantenlos; gern entfernen, wenn du rounded behalten willst */
}

.fb-variant-home .msg { color: #000; }   /* Beitragstext schwarz */
 /* Zeit/Meta bleibt wie zuvor: Orange + fett via .time-Regel */

/* Galerie-Kacheln können etwas softer sein */
.fb-variant-home .fb-gallery img { border-radius: 4px; }

/* ------- Breitere Spalte auf der Startseite ------- */
/* Startseiten-Variante: Grid wirklich 1-spaltig machen */
.fb-variant-home .fb-masonry-grid {
  display: grid;
  grid-template-columns: 1fr;   /* <<-- entscheidend */
  gap: 16px;
}

/* Breitere Spalte + zentriert */
.fb-variant-home .fb-col {
  max-width: 550px;  /* nach Geschmack anpassen */
  width: 100%;
  margin: 0 auto;    /* zentrieren */
}


.fb-variant-home .fb-scroll-frame {
  padding-top: 10px;
  padding-bottom: 30px;
}