:root{
  --bs-body-bg: #fbf7f2;
  --bs-body-color: #2f2a24;

  --warm-card: #ffffff;
  --warm-border: rgba(47,42,36,.10);
  --warm-shadow: 0 10px 30px rgba(47,42,36,.08);

  --brand: #c75c5c;        /* Rosenrot */
  --brand-2: #f1b878;      /* Honig */
  --brand-3: #5b7b6c;      /* Salbei */

  /* Spiele-Galerie Tile-Size (per Slider steuerbar) */
  --tile: 190px;
}

body{
  background: radial-gradient(1200px 600px at 30% -10%, rgba(241,184,120,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(199,92,92,.14), transparent 55%),
              var(--bs-body-bg);
  color: var(--bs-body-color);
}

a { color: var(--brand); }
a:hover { color: #a64747; }

.navbar{
  backdrop-filter: blur(8px);
  background: rgba(251,247,242,.86) !important;
  border-bottom: 1px solid var(--warm-border);
}

.brand-badge{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  padding:.45rem .75rem;
  border-radius: 999px;
  background: rgba(199,92,92,.10);
  border: 1px solid rgba(199,92,92,.18);
}

.brand-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(199,92,92,.15);
}

.warm-card{
  background: var(--warm-card);
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  box-shadow: var(--warm-shadow);
}

.hero{
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(199,92,92,.12), rgba(241,184,120,.16));
  border: 1px solid rgba(47,42,36,.10);
}

.soft-pill{
  border-radius: 999px;
  background: rgba(91,123,108,.12);
  border: 1px solid rgba(91,123,108,.18);
  color: #3a564a;
}

.tag-pill{
  border-radius: 999px;
  background: rgba(241,184,120,.14);
  border: 1px solid rgba(241,184,120,.22);
  color: #6d4a1d;
}

.subtle{
  color: rgba(47,42,36,.72);
}

.kpi{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(47,42,36,.03);
  border: 1px solid rgba(47,42,36,.08);
}

/* Cover */
.cover{
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--warm-border);
  overflow: hidden;
  background: rgba(47,42,36,.04);
}
.cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rating-big{
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
}

.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(47,42,36,.08);
}
.progress-bar{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* ---------- Spiele-Galerie (Plex-Style) ---------- */
.cover-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr));
  gap: 14px;
}

.game-tile{
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--warm-border);
  box-shadow: 0 8px 22px rgba(47,42,36,.06);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}

.game-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(47,42,36,.10);
}

.game-tile .cover{
  border: 0;
  border-radius: 0;
}

.game-meta{
  padding: 10px 12px 12px;
}

.game-title{
  font-size: .92rem;
  font-weight: 800;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.score{
  display:flex;
  gap: 8px;
  align-items:center;
  font-size: .82rem;
}

.score .dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(199,92,92,.14);
}
.score .dot.bgg{
  background: var(--brand-3);
  box-shadow: 0 0 0 4px rgba(91,123,108,.14);
}

.score .val{
  font-weight: 800;
}

.tile-link{
  color: inherit;
  text-decoration: none;
}
.tile-link:hover{ color: inherit; }

/* Controls */
.controls-bar .form-select,
.controls-bar .form-control{
  border-radius: 14px;
  border-color: rgba(47,42,36,.12);
}

.btn-primary-love{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
.btn-primary-love:hover{
  background: #b34d4d;
  border-color: #b34d4d;
  color:#fff;
}

/* ---------- Spiel-Detail: Galerie ---------- */
.gallery{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.gallery .ph{
  border-radius: 14px;
  background: rgba(47,42,36,.05);
  border: 1px dashed rgba(47,42,36,.18);
  min-height: 88px;
}
@media (max-width: 992px){
  .gallery{ grid-template-columns: repeat(3, 1fr); }
}

/* Accordion etwas weicher */
.accordion-button{
  border-radius: 14px !important;
}
.accordion-item{
  border-radius: 14px !important;
  border: 1px solid rgba(47,42,36,.10) !important;
}
.accordion-button:not(.collapsed){
  background: rgba(241,184,120,.14) !important;
  color: #2f2a24 !important;
}

/* ---- Kompaktes Kriterien-Grid ---- */
.criteria-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
@media (max-width: 768px){
  .criteria-grid{ grid-template-columns: 1fr; }
}

.crit-item{
  border-radius: 14px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
  padding: 10px 12px;
}

.crit-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.crit-name{
  font-weight: 800;
  font-size: .92rem;
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.crit-name span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crit-badge{
  font-weight: 800;
  font-size: .82rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.04);
}

.crit-bar{
  height: 7px;
  border-radius: 999px;
  background: rgba(47,42,36,.08);
  overflow: hidden;
}
.crit-bar > div{
  height: 100%;
  border-radius: 999px;
}

/* kleine farbliche Separierung pro Kriterium via CSS-Variable */
.crit-item{ --crit: rgba(199,92,92,.18); } /* default */
.crit-item.t1{ --crit: rgba(199,92,92,.22); } /* Rosenrot */
.crit-item.t2{ --crit: rgba(241,184,120,.26); } /* Honig */
.crit-item.t3{ --crit: rgba(91,123,108,.22); }  /* Salbei */
.crit-item.t4{ --crit: rgba(123,98,165,.20); }  /* Lavendel */
.crit-item.t5{ --crit: rgba(64,128,160,.20); }  /* Blau */
.crit-item .crit-name i{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 0 6px rgba(0,0,0,0.02);
}

/* Bar-Farbe über Variable (dezent, aber sichtbar) */
.crit-item .crit-bar > div{
  background: linear-gradient(90deg, var(--crit), rgba(241,184,120,.22));
}

/* Optionales Accordion kompakter */
.opt-box .accordion-button{
  padding: .75rem .9rem;
}
.opt-box .accordion-body{
  padding: .9rem;
}

/* ---- Kompaktere Ratings-Box in 2 Spalten Layout ---- */
.ratings-panel .criteria-grid{
  gap: 8px 12px; /* enger */
}
.ratings-panel .crit-item{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.70);
}
.ratings-panel .crit-name{
  font-size: .88rem;
}
.ratings-panel .crit-badge{
  font-size: .78rem;
  padding: .12rem .45rem;
}
.ratings-panel .crit-bar{
  height: 6px;
}

/* Kopfzeile kompakter */
.panel-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.panel-head .h5{
  margin: 0;
}

/* Community Cards kompakter */
.review-mini{
  border-radius: 14px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
}
.review-mini .who{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
.review-mini .txt{
  margin: 6px 0 0;
  font-size: .92rem;
}
.review-mini .meta{
  font-size: .78rem;
  color: rgba(47,42,36,.65);
}

/* ===========================
   Criteria UI (Game detail)
   Used by templates/game.php
   =========================== */

/* Panel tweaks */
.ratings-panel .crit-item{
  border-radius: 14px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
}

.ratings-panel .crit-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.ratings-panel .crit-name{
  font-weight: 800;
  font-size: .92rem;
  min-width: 0;
  line-height: 1.15;
}

.ratings-panel .crit-name span{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratings-panel .crit-badge{
  font-weight: 800;
  font-size: .80rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.04);
  flex: 0 0 auto;
}

/* Smaller bar than the big progress components */
.ratings-panel .crit-bar{
  height: 7px;
  border-radius: 999px;
  background: rgba(47,42,36,.08);
  overflow: hidden;
}

.ratings-panel .crit-bar > div{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* Make optional-criteria accordion more compact */
#optCrit .accordion-button{
  padding: .75rem .9rem;
  border-radius: 14px !important;
}
#optCrit .accordion-body{
  padding: .9rem;
}
#optCrit .accordion-item{
  border-radius: 14px !important;
  border: 1px solid rgba(47,42,36,.10) !important;
}

a.warm-card:hover{
  transform: translateY(-1px);
  transition: transform .12s ease;
}

/* ===========================
   Gallery (Game detail)
   =========================== */

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.gallery-item{
  display:block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 25px rgba(47,42,36,.06);
  transform: translateY(0);
  transition: transform .12s ease;
}

/* responsive layout:
   - first image larger (nice “story” effect)
*/
.gallery-item:nth-child(1){ grid-column: span 6; grid-row: span 2; }
.gallery-item:nth-child(2){ grid-column: span 3; }
.gallery-item:nth-child(3){ grid-column: span 3; }
.gallery-item:nth-child(4){ grid-column: span 3; }
.gallery-item:nth-child(5){ grid-column: span 3; }
.gallery-item:nth-child(n+6){ grid-column: span 3; }

@media (max-width: 992px){
  .gallery-item:nth-child(1){ grid-column: span 12; }
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(5),
  .gallery-item:nth-child(n+6){ grid-column: span 6; }
}

@media (max-width: 576px){
  .gallery-item:nth-child(n){ grid-column: span 12; }
}

.gallery-item img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.gallery-item:hover{
  transform: translateY(-2px);
}

/* Empty state */
.gallery-empty{
  border-radius: 18px;
  border: 1px dashed rgba(47,42,36,.20);
  background: rgba(255,255,255,.55);
  padding: 18px;
}

/* ===========================
   Meta info table (game page)
   =========================== */

.meta-table{
  display: grid;
  gap: 4px;
}

.meta-row{
  display: grid;
  grid-template-columns: 110px 1fr; /* 👈 feste Label-Breite */
  align-items: start;
}

.meta-label{
  color: rgba(47,42,36,.65);
  font-weight: 600;
}

.meta-value{
  color: #2f2a24;
}

/* ===========================
   Stats box (game detail)
   =========================== */

.stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat-item{
  border-radius: 16px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
  padding: 12px 12px;
}

.stat-label{
  font-size: .78rem;
  color: rgba(47,42,36,.65);
  font-weight: 600;
  margin-bottom: 2px;
}

.stat-value{
  font-size: 1.15rem;
  font-weight: 900;
  color: #2f2a24;
  line-height: 1.1;
}

@media (max-width: 576px){
  .stats-grid{ grid-template-columns: 1fr; }
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stat-item{
  display:flex;
  align-items:center;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
  padding: 12px 14px;
}

.stat-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,42,36,.05);
  border: 1px solid rgba(47,42,36,.10);
  flex: 0 0 auto;
}

.stat-icon i{
  font-size: 1.15rem;
  color: var(--brand);
}

.stat-text{
  display:flex;
  flex-direction:column;
  line-height: 1.1;
}

.stat-label{
  font-size: .75rem;
  font-weight: 700;
  color: rgba(47,42,36,.65);
}

.stat-value{
  font-size: 1.15rem;
  font-weight: 900;
  color: #2f2a24;
}

@media (max-width: 576px){
  .stats-grid{
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Community list (compact)
   =========================== */

.community-list{
  display: grid;
  gap: 10px;
}

.community-item{
  border-radius: 18px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.72);
  overflow: hidden;
}

.community-main{
  display: grid;
  grid-template-columns: 180px 1fr 88px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.community-item.is-expandable .community-main{
  cursor: pointer;
}

.community-left .community-name{
  font-weight: 900;
  line-height: 1.1;
}

.community-mid{
  min-width: 0;
}

.crit-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.crit-chip{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.04);
  font-size: .78rem;
  white-space: nowrap;
}

.crit-chip-label{
  color: rgba(47,42,36,.70);
  font-weight: 700;
}

.crit-chip-val{
  font-weight: 900;
  color: #2f2a24;
}

.community-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.overall-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 54px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: white;
  font-weight: 900;
}

.community-text{
  border-top: 1px solid rgba(47,42,36,.08);
  background: rgba(255,255,255,.85);
}

.community-text-inner{
  padding: 12px 14px;
  color: rgba(47,42,36,.80);
}

/* Responsive */
@media (max-width: 992px){
  .community-main{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .community-right{
    justify-content: space-between;
  }
}


/* ===========================
   Community table layout
   =========================== */

.review-table{
  border: 1px solid rgba(47,42,36,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.70);
}

.review-row{
  display: grid;
  grid-template-columns: 200px 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid rgba(47,42,36,.08);
}

.review-row:first-child{
  border-top: 0;
}

.review-head{
  background: rgba(47,42,36,.04);
  font-size: .78rem;
  font-weight: 800;
  color: rgba(47,42,36,.65);
  padding: 10px 14px;
}

.c-user{ min-width: 0; }
.c-criteria{ min-width: 0; }
.c-overall{ display:flex; justify-content:flex-end; }

.review-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

.review-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.04);
  font-size: .75rem;
  white-space: nowrap;
}

.review-chip .lbl{
  color: rgba(47,42,36,.70);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.review-chip .val{
  font-weight: 900;
  color: #2f2a24;
}

.review-chip.more{
  font-weight: 900;
  background: rgba(47,42,36,.06);
}

.overall-pill{
  border: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: var(--brand);
  color: #fff;
}

.overall-pill i{
  font-size: .85rem;
  opacity: .9;
}

.overall-pill.static{
  display:inline-flex;
  min-width: 74px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(47,42,36,.10);
  color: #2f2a24;
  justify-content:center;
}

.review-text-row{
  border-top: 1px solid rgba(47,42,36,.08);
  background: rgba(255,255,255,.85);
}

.review-text-inner{
  padding: 12px 14px;
  color: rgba(47,42,36,.82);
}

/* Responsive */
@media (max-width: 992px){
  .review-row{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .c-overall{
    justify-content:flex-start;
  }
  .review-head{
    display:none; /* header weg, mobile braucht’s nicht */
  }
}

/* ===========================
   Review matrix table
   =========================== */

.review-matrix-wrap{
  overflow-x: auto;
  border: 1px solid rgba(47,42,36,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
}

.review-matrix{
  display: grid;
  grid-template-columns: 200px repeat(calc(var(--cols) - 2), 92px) 110px;
  min-width: max-content;
}

.rm{
  padding: 10px 12px;
  border-top: 1px solid rgba(47,42,36,.08);
  border-right: 1px solid rgba(47,42,36,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

.rm:nth-child(-n + 9999) { /* no-op placeholder */ }

.rm-head{
  background: rgba(47,42,36,.04);
  font-size: .78rem;
  font-weight: 800;
  color: rgba(47,42,36,.65);
  justify-content: center;
  white-space: nowrap;
}

.rm-sticky{
  position: sticky;
  top: 0;
  z-index: 2;
}

.rm-user{
  justify-content:flex-start;
  flex-direction: column;
  align-items:flex-start;
  gap: 2px;
}

.rm-num{
  font-weight: 900;
  color: #2f2a24;
}

.rm-overall{
  justify-content: center;
}

.rm-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 64px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
}

.rm-mini{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.04);
}

.rm-mini i{
  color: var(--brand);
}

.rm-text{
  background: rgba(255,255,255,.85);
  border-top: 1px solid rgba(47,42,36,.08);
}

.rm-text-inner{
  padding: 12px 14px;
  color: rgba(47,42,36,.82);
}

/* User cell layout: name left, icon right */
.rm-user-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  column-gap: 8px;
}

.rm-user-name{
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-user-chat{
  justify-self: end;   /* 👈 DAS ist der Schlüssel */
}

/* ===========================
   Mobile reviews (compact)
   =========================== */

.mobile-reviews{
  display: grid;
  gap: 10px;
}

.mrev{
  border-radius: 18px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.72);
  overflow: hidden;
}

.mrev-top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  align-items: center;
}

.mrev-actions{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.mrev-details{
  border-top: 1px solid rgba(47,42,36,.08);
  background: rgba(255,255,255,.85);
  padding: 12px 14px;
}

.mrev-criteria{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.mrev-crit{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.03);
}

.mrev-crit-label{
  font-weight: 700;
  color: rgba(47,42,36,.72);
}

.mrev-crit-val{
  font-weight: 900;
  color: #2f2a24;
}

.mrev-text{
  border-radius: 14px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
  padding: 10px 12px;
  color: rgba(47,42,36,.82);
}

.mech-pill i,
.soft-pill i{
  font-size: .95em;
  opacity: .85;
}

/* Blog card: bigger/taller */
/* --- Blog cards: equal height & footer at bottom --- */

.post-list { display: grid; gap: 14px; }

.post-card{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: stretch;           /* wichtig */
  min-height: 260px;              /* alle Karten gleich hoch */
}

/* rechter Bereich */
.post-body{
  display: flex;
  flex-direction: column;
  height: 100%;
}


.post-cover{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
}

.post-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;   /* macht die Karte höher */
  display: block;
}

.post-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.post-title{
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.2;
}

/* Teaser wächst und füllt Platz */
.teaser-box{
  flex: 1;                        /* <<< MAGIE */
  display: flex;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.03);
  padding: 14px 16px;
}


/* --- Make BSL/BGG badges less heavy --- */
.score-badges{
  display:flex;
  gap: 18px;
  align-items: center;     /* gleiche Höhe wie Titelzeile */
  justify-content: flex-end;
}

.score-badge{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 1.1rem;       /* ungefähr Title-Höhe */
  font-weight: 700;
  line-height: 1.2;
}

/* the dot */
.score-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  margin-right: 8px;
  box-shadow: none !important;
}

/* dot colors */
.score-bsl .score-dot{ background: #d14b4b; }
.score-bgg .score-dot{ background: #1f1f1f; }

/* red bobble for BSL */
.score-bsl .score-dot{
  background: #d14b4b;
  box-shadow: 0 0 0 4px rgba(209,75,75,.12);
}

/* black bobble for BGG */
.score-bgg .score-dot{
  background: #1f1f1f;
  box-shadow: 0 0 0 4px rgba(31,31,31,.10);
}

.score-label{
  font-weight: 700;
  opacity: .7;
  margin-right: 6px;
}

.score-val{
  font-weight: 800;
}

/* Footer immer ganz unten */
.post-foot{
  margin-top: auto;               /* <<< MAGIE */
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons sauber nebeneinander */
.post-foot .btn{
  white-space: nowrap;
}


.post-tags{ display:flex; gap: 8px; flex-wrap: wrap; }

/* Mobile */
@media (max-width: 768px){
  .post-card{
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

.post-detail-cover{
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(255,255,255,.70);
}

.post-detail-cover img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.pagination .page-link{
  border-radius: 999px;
  margin: 0 3px;
  border: 1px solid rgba(47,42,36,.12);
  color: rgba(47,42,36,.85);
}

.pagination .page-item.active .page-link{
  background: rgba(209,75,75,.12);
  border-color: rgba(209,75,75,.35);
  color: rgba(47,42,36,.95);
  font-weight: 800;
}

.post-meta{
  letter-spacing: .01em;
  opacity: .8;
}

.sidebar.stack-gap{
  display: grid;
  gap: 14px; /* kleiner Abstand zwischen Boxen */
}

.border-bottom-soft{
  border-bottom: 1px solid rgba(47,42,36,.08);
}
.border-bottom-soft:last-child{
  border-bottom: 0;
}

/* === NEWS SIDEBAR ONLY === */

.news-sidebar{
  display: grid;
  gap: 14px;
}

/* Divider in lists */
.news-divider{
  border-bottom: 1px solid rgba(47,42,36,.08);
}
.news-divider:last-child{
  border-bottom: 0;
}

/* Stats grid (news page) */
.news-stats-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.news-stat-item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(47,42,36,.10);
  background: rgba(47,42,36,.03);
}

.news-stat-item i{
  font-size: 1.1rem;
  opacity: .85;
}

/* Count ganz rechts platzieren */
.accordion-button.acc-btn-count {
  position: relative;
  padding-right: 5.2rem; /* Platz für Pfeil + Count */
}

.accordion-button.acc-btn-count .acc-count {
  position: absolute;
  right: 0.9rem;         /* ganz rechts im Button */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;  /* Klick bleibt überall Button */
}

/* Pfeil etwas nach links ziehen, damit er links neben dem Count sitzt */
.accordion-button.acc-btn-count::after {
  position: absolute;
  right: 3.3rem;         /* links neben der Zahl */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Cover: nicht strecken, etwas kleiner, Hochkant ok */
.game-cover-wrap{
  width: 100%;
  display: flex;
  justify-content: center;
}

.game-cover-img{
  width: 100%;
  max-width: 320px;        /* Cover kleiner machen (anpassbar) */
  max-height: 420px;       /* verhindert "in die Länge ziehen" */
  object-fit: contain;     /* wichtig: KEIN Verzerren */
  border-radius: 16px;
}

/* Fan Button quadratisch */
.fan-btn{
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}

/* ===========================
   Game.php Cover: kleiner, aber ohne Innenränder
   =========================== */
.cover.cover--game{
  aspect-ratio: 2 / 3;   /* bleibt hochkant */
  max-height: 360px;     /* kleiner */
}

.cover.cover--game img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* füllt die Fläche -> keine Ränder */
  object-position: center;
}

/* ===========================
   Game actions row: gleiche Höhe
   =========================== */
.game-actions .fan-btn,
.game-actions .game-action-btn{
  height: 44px;
  border-radius: 12px;
}

/* Herz bleibt quadratisch */
.game-actions .fan-btn{
  width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}

/* Kollektion/Wunschliste: eine Zeile, kleiner, mittig */
.game-actions .game-action-btn{
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;      /* kleiner, damit es sicher passt */
  line-height: 1;
  white-space: nowrap;    /* verhindert Umbruch */
}

/* Aktiv-Status für Kollektion & Wunschliste */
.game-action-btn.is-active{
  background-color: #d3f2e1;
  border-color: #8fd3b2;
  color: #2f2a24;
}

/* ===========================
   Affiliate-Angebote kompakt
   =========================== */

.offer-row{
  padding: 8px 10px;          /* flacher als p-2 */
  border-radius: 14px;
  box-shadow: none !important;
}

.offer-row .offer-shop{
  font-size: .92rem;
  line-height: 1.1;
}

.offer-row .offer-price{
  padding: 3px 10px;          /* statt px-3 py-1 */
  font-size: .78rem;
  line-height: 1.1;
  border-radius: 999px;
  white-space: nowrap;
}

/* optional: dezenter Hover ohne zusätzliche Höhe */
.offer-row:hover{
  background: rgba(47,42,36,.03);
  transform: translateY(-1px);
  transition: background .12s ease, transform .12s ease;
}

/* ===========================
   Action Banner (global)
   =========================== */
.action-banner-host{
  position: sticky;
  top: 56px;              /* passt i.d.R. unter sticky navbar; ggf. anpassen */
  z-index: 1030;          /* unter modal (1055), über content */
}

.action-banner{
  display: flex;
  align-items: center;        /* vertikal sauber */
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  margin: 10px auto 0;
  max-width: 1120px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Text mittig – EINZEILIG */
.action-banner .msg{
  flex: 1 1 auto;
  white-space: nowrap;       /* 🔑 alles in einer Zeile */
  overflow: hidden;
  text-overflow: ellipsis;   /* falls sehr langer Text */
  line-height: 1.3;
}

/* Close Button rechts */
.action-banner .close-btn{
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  opacity: .6;
  line-height: 1;
}

.action-banner .close-btn:hover{
  opacity: 1;
}

.action-banner.success{
  background: #e9f8ef;
  border: 1px solid #bfeccf;
}
.action-banner.warn{
  background: #fff7dd;
  border: 1px solid #ffe29a;
}
.action-banner.danger{
  background: #ffe7e7;
  border: 1px solid #ffb7b7;
}

.action-banner.enter{
  animation: bannerIn .18s ease-out;
}
.action-banner.leave{
  animation: bannerOut .18s ease-in forwards;
}

@keyframes bannerIn{
  from{ transform: translateY(-10px); opacity: 0; }
  to  { transform: translateY(0); opacity: 1; }
}
@keyframes bannerOut{
  from{ transform: translateY(0); opacity: 1; }
  to  { transform: translateY(-8px); opacity: 0; }
}

/* Icon links */
.action-banner > i{
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

/* ===========================
   Review Modal – compact rows
   =========================== */

.review-crit-row{
  display: grid;
  grid-template-columns: 1fr minmax(120px, 220px) 42px;
  align-items: center;
  gap: 12px;
}

/* Label links */
.review-crit-label{
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slider */
.review-crit-slider{
  margin: 0;              /* Bootstrap default killen */
  padding: 0;
}

/* Zahl rechts */
.review-crit-score{
  width: 42px;
  height: 28px;
  border-radius: 999px;
  background: #f1f3f5;
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: Hover-Fokus */
.review-crit-row:hover{
  background: rgba(0,0,0,.02);
  border-radius: 10px;
}

/* Mobile: mehr Platz für Slider */
@media (max-width: 576px){
  .review-crit-row{
    grid-template-columns: 1fr minmax(100px, 1.2fr) 40px;
  }
}

.cover-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;          /* typische Cover-Optik */
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.06);
}

/* unscharfer Hintergrund */
.cover-bg{
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.05);
  opacity: .55;
}

/* scharfes Cover oben drauf */
.cover-img{
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;          /* wichtig: nichts abschneiden */
  filter: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ===========================
   Global Lightbox Image Scaling
   =========================== */
#lightboxModal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#lightboxImage {
  max-width: 100%;
  max-height: 85vh;        /* WICHTIG: begrenzt auf Viewport */
  width: auto;
  height: auto;
  object-fit: contain;    /* nie abschneiden */
  border-radius: 12px;
}

@media (max-width: 576px) {
  #lightboxImage {
    max-height: 75vh;
  }
}