/* ============================================================
   mod_newscarousel – newscarousel.css
   Version 2.0.0 – 2026-10-19
   Neu 2.0.0:
     - .mnc--static: weniger Beiträge als Kacheln -> Kacheln zentriert,
       Pfeile/Punkte ausgeblendet (keine doppelten Kacheln mehr)
     - Hinweistext bei leerer Liste (.mnc--empty)
     - Badge auch ohne Bild
     - Mobil-Breakpoint passend zum JS (< 768px)
   Bisher (1.4): Gap per --mnc-gap in Kachelbreite eingerechnet,
     Pfeilbreite = seitliches Padding, Farben dunkelgrau (#555).
   ============================================================ */

/* ── Äußerer Container ── */
.mnc{
  max-width:1200px;
  margin:0 auto;
  padding:1.25rem 3rem 2rem;  /* seitliches Padding = Platz für Pfeil-Buttons */
  position:relative;

  --mnc-items: 3;
  --mnc-gap: 1.25rem;         /* Gap zwischen den Kacheln – an einer Stelle definiert */
}

.mnc__title{
  text-align:center;
  margin-bottom:1rem;
  font-weight:700;
}

/* ── carousel-inner ── */
.mnc .carousel-inner{
  overflow:visible;
}

/* ── Slide-Sichtbarkeit ── */
.mnc .carousel-item{
  display:none;
  gap:var(--mnc-gap);
  padding:.25rem .25rem 1.25rem;
}
.mnc .carousel-item.active,
.mnc .carousel-item-next,
.mnc .carousel-item-prev{
  display:flex;
}

/* ── Kachelbreite: Gap korrekt eingerechnet ──
   Formel: (100% - gap * (n-1)) / n
   So sind alle Kacheln exakt gleich breit, unabhängig von der Anzahl. */
.mnc .carousel-item > .mnc__item,
.mnc .carousel-item > .mnc__clone{
  flex:0 0 calc((100% - var(--mnc-gap) * (var(--mnc-items) - 1)) / var(--mnc-items));
  max-width:calc((100% - var(--mnc-gap) * (var(--mnc-items) - 1)) / var(--mnc-items));
  display:flex;
}

/* ── Card ── */
.mnc__card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  min-height:100%;
  width:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.mnc__card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 28px rgba(0,0,0,.15);
}

/* ── Bild ── */
.mnc__media{
  display:block;
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
.mnc__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:1;
}

/* ── Badge ── */
.mnc__badge{
  font-size:.85rem;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#333;
  border:1px solid rgba(0,0,0,.06);
  display:inline-flex;
  align-items:center;
}
.mnc__badge--onimage{
  position:absolute;
  top:12px;
  right:12px;
  z-index:10;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* ── Body ── */
.mnc__body{
  padding:1rem 1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  flex:1;
}
.mnc__headline{
  font-size:1.05rem;
  margin:0;
  line-height:1.25;
}
.mnc__headline a{
  color:inherit;
  text-decoration:none;
}
.mnc__headline a:hover{
  text-decoration:underline;
}
.mnc__meta{
  font-size:.9rem;
  color:#666;
}
.mnc__text{
  margin:0;
  color:#444;
  line-height:1.45;
}

/* ── Weiterlesen ── */
.mnc__more{
  margin-top:auto;
  width:fit-content;
  border-radius:10px;
  padding:.55rem .85rem;
  text-decoration:none;
  color:inherit;
  background:rgba(0,0,0,.05);
}
.mnc__more:hover{
  background:rgba(0,0,0,.08);
}

/* ── Indikatoren – dunkelgrau ── */
.mnc__indicators [data-bs-target]{
  width:12px;
  height:12px;
  border-radius:999px;
  background-color:transparent;
  border:1px solid #555;
  opacity:1;
}
.mnc__indicators .active{
  background-color:#555;
}

/* ══════════════════════════════════════════════════════════
   Navigation
   Bootstrap positioniert Buttons mit left:0 / right:0 absolut
   innerhalb des .carousel-Containers, top:0 / bottom:0.
   Wir lassen left:0 / right:0 stehen und setzen width = .mnc-padding.
   So landen die Buttons immer exakt im padding-Bereich – symmetrisch.
   ══════════════════════════════════════════════════════════ */
.mnc .carousel-control-prev,
.mnc .carousel-control-next{
    top:0;
    bottom:0;
    width:3rem;               /* = .mnc padding-left/-right */
    background:none !important;
    opacity:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mnc .carousel-control-prev{ left:0;  right:auto; }
.mnc .carousel-control-next{ right:0; left:auto;  }

/* ── Pfeil-Icons – dunkelgrau ── */
.mnc .carousel-control-prev-icon,
.mnc .carousel-control-next-icon{
    background-color:#555;
    border-radius:50%;
    width:42px;
    height:42px;
    background-size:60%;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    filter:none;
    flex-shrink:0;
}

/* Hover */
.mnc .carousel-control-prev:hover .carousel-control-prev-icon,
.mnc .carousel-control-next:hover .carousel-control-next-icon{
    transform:scale(1.1);
}

/* ── Statischer Modus: alle Beiträge passen in eine Ansicht ── */
.mnc--static .carousel-item.active{
  justify-content:center;
}
.mnc--static .carousel-indicators,
.mnc--static .carousel-control-prev,
.mnc--static .carousel-control-next{
  display:none !important;
}

/* ── Badge ohne Bild ── */
.mnc__badge--noimage{
  align-self:flex-start;
  margin:1rem 1rem 0;
  background:rgba(0,0,0,.05);
}

/* ── Hinweis bei leerer Liste ── */
.mnc--empty{
  padding-left:1rem;
  padding-right:1rem;
}
.mnc__empty{
  margin:0;
  padding:1.25rem 1rem;
  text-align:center;
  color:#555;
  background:rgba(0,0,0,.04);
  border-radius:14px;
}

/* ── Weniger Bewegung, wenn im System so eingestellt ── */
@media (prefers-reduced-motion: reduce){
  .mnc__card,
  .mnc .carousel-item{
    transition:none !important;
  }
  .mnc__card:hover{
    transform:none;
  }
}

/* ── Tablet ── */
@media (max-width:900px){
  .mnc{
    padding:1rem 2.5rem 1.5rem;
    --mnc-gap: 1rem;
  }
  .mnc .carousel-control-prev,
  .mnc .carousel-control-next{
    width:2.5rem;
  }
}

/* ── Mobile ── */
@media (max-width:767.98px){
  .mnc{
    padding:1rem 2rem 1.5rem;
    --mnc-gap: .75rem;
  }
  .mnc .carousel-control-prev,
  .mnc .carousel-control-next{
    width:2rem;
  }
  .mnc .carousel-control-prev-icon,
  .mnc .carousel-control-next-icon{
    width:36px;
    height:36px;
  }
}