@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* =============================
   Quicklinks (Startseite)
============================= */

.home-quicklinks .bi{
  font-size: 1.2rem;
  opacity: .9;
}

.home-quicklinks .border{
  transition: transform .15s ease, box-shadow .15s ease;
}

.home-quicklinks .border:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}


/* =============================
   Aktuelles (Newsflash Modul) – Cards + Grid + Hover
   (Modulklasse: news-cards)
============================= */

.news-cards .newsflash,
.news-cards .mod-articlesnews{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 992px){
  .news-cards .newsflash,
  .news-cards .mod-articlesnews{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px){
  .news-cards .newsflash,
  .news-cards .mod-articlesnews{
    grid-template-columns: 1fr;
  }
}

/* einzelne Card */
.news-cards .newsflash-item,
.news-cards .mod-articlesnews__item,
.news-cards li{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  padding: 1.25rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}

.news-cards .newsflash-item:hover,
.news-cards .mod-articlesnews__item:hover,
.news-cards li:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Links / Titel */
.news-cards a{ text-decoration: none; }
.news-cards a:hover{ text-decoration: underline; }

/* Modul-Überschrift wie Highlights (ohne grauen Balken) */
.news-cards .module-header,
.news-cards .card-header{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 1.2rem 0;
}

.news-cards .module-title,
.news-cards .moduletitle,
.news-cards h3{
  text-align: center;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}


/* =============================
   Kategorie-Blog (Aktuelles-Seite) – Cards
============================= */

.blog-items .blog-item,
.blog .items-row > div{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 1rem;
}

.blog-items .blog-item:hover,
.blog .items-row > div:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Weiterlesen-Button */
.readmore a{
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
}


/* =============================
   Header (Desktop): Logo + Navigation nebeneinander
============================= */

@media (min-width: 992px){
  .container-header{
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 2rem;
  }

  .container-header .grid-child{
    margin: 0;
  }

  .container-header .navbar-brand{
    margin: 0;
    padding: 0;
    transform: translateY(-3px);
  }

  .container-header .container-nav{
    justify-self: center;
  }
}


/* =============================
   Überschriften allgemeiner Look
============================= */

.page-header h1,
.item-page h1{
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

.blog-items .page-header h2,
.blog-items h2,
.blog .page-header h2,
.blog h2{
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: .6rem;
}


/* =============================
   Footer Social Icons
============================= */

.footer-social{
  font-size: 1.1rem;
  color: white;
  transition: all 0.2s ease;
}

.footer-social:hover{
  opacity: 0.7;
  transform: translateY(-2px);
}

footer .container > .d-flex > div:first-child{
  margin-right: 2rem;
}


/* =============================
   Startseite – Flyer Highlights
============================= */

.home-highlights{
  margin: 2.5rem 0;
}

.home-highlights h2{
  font-weight: 600;
  margin: 0 0 1.2rem 0; /* Abstand zu Flyern */
}

.highlight-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.highlight-card{
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.highlight-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

.highlight-card img{
  width: 100%;
  height: auto;
  display: block;
}


/* =============================
   Startseite – Box-Padding vereinheitlichen
   (Highlights-Card + Aktuelles-Card)
============================= */

/* Beide äußeren Boxen (Card-Wrapper) gleich hoch */
.container-bottom-a .card,
.container-bottom-b .card.news-cards{
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Aktuelles Titel zentrieren + gleiches Header-Padding wie Highlights (nur kleiner Block oben) */
.container-bottom-b .card.news-cards > .card-header{
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 1rem 1rem 0.5rem 1rem !important;
  margin: 0 !important;
}

.container-bottom-a .card .card-body{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Highlights: Extra-Padding aus Cassiopeia card-body entfernen */
.container-bottom-a .card .card-body{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}