/* ----------------------------------------------------------- */
/* 1. KERNREPARATUR FÜR DEN HEADER (DAS BLAU MUSS WEG!)        */
/* ----------------------------------------------------------- */
.container-header,
.site-grid,
.container-component {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ----------------------------------------------------------- */
/* 2. ALLGEMEINE FARBEN & ÜBERSCHRIFTEN (DEIN TON+TÖNE BLAU)   */
/* ----------------------------------------------------------- */
:root {
  --cassiopeia-color-primary: #1b3691;
  --cassiopeia-color-link: #1b3691;
}

h1, h2, h3,
.moduletable .title {
  color: var(--cassiopeia-color-primary) !important;
  font-weight: normal;
}

body {
  color: #777777 !important;
}

/* ----------------------------------------------------------- */
/* 3. LOGO EXAKT ZENTRIEREN UND GRÖSSER MACHEN                 */
/* ----------------------------------------------------------- */
.container-header .navbar-brand {
    display: flex;
    justify-content: center;
    width: 100%;
}

.brand-logo img {
    max-width: 600px !important;
    height: auto;
    margin: 0 auto; 
    display: block;
}

/* ----------------------------------------------------------- */
/* 4. MENÜ: EXAKT 20PX BREITER ALS DAS LOGO AUF JEDER SEITE    */
/* ----------------------------------------------------------- */
.header .mod-menu,
.header .navbar {
  max-width: 640px !important;
  margin: 10px auto 30px auto !important;
  display: flex;
  justify-content: space-between !important;
  width: 100%;
  padding: 0 !important;
}

.container-header .mod-menu a,
.container-header .navbar-nav .nav-link,
.metismenu.mod-menu .metismenu-item > a {
    color: #777777 !important; 
    font-size: 0.95rem !important; 
    font-weight: normal;
    padding: 5px 0 !important;
}

.container-header .mod-menu a:hover,
.container-header .navbar-nav .nav-link:hover,
.metismenu.mod-menu .metismenu-item > a:hover {
    color: var(--cassiopeia-color-primary) !important;
}

/* ----------------------------------------------------------- */
/* 5. STARTSEITE (PORTFOLIO): DIE BILDER-KACHELN               */
/* ----------------------------------------------------------- */
.blog-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px 0;
}

.blog-items .item {
  text-align: center;
}

.blog-items .item-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  transition: opacity 0.3s ease; 
}

/* Transparenz-Effekt für die Startseiten-Kacheln */
.blog-items .item-image img:hover {
  opacity: 0.4 !important; 
}

.blog-items .item-title,
.blog-items .item-title a {
  font-size: 0.8rem !important;
  font-weight: normal;
  color: #777777 !important;
  margin-top: 5px;
  text-decoration: none;
}

/* ----------------------------------------------------------- */
/* 6. INHALTSBEREICH SCHMALER MACHEN (WIE IM ALTEN DESIGN)     */
/* ----------------------------------------------------------- */
.container-header,
.site-grid {
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 20px;
}

/* ----------------------------------------------------------- */
/* 7. FOOTER (UNTEN) ZENTRIEREN UND BLAUE BOX ENTFERNEN        */
/* ----------------------------------------------------------- */
.container-footer,
.footer,
.container-bottom {
    max-width: 980px !important;
    margin: 60px auto 0 auto !important;
    padding-bottom: 40px !important;
    background-color: #ffffff !important; 
    background-image: none !important;
    border-top: none !important; 
    text-align: center !important;
    display: flex;
    justify-content: center;
    box-shadow: none !important;
}

.container-footer .custom,
.container-footer .mod-custom {
    text-align: center !important;
    width: 100%;
    background-color: #ffffff !important;
}

.container-footer a {
    color: var(--cassiopeia-color-primary) !important;
    text-decoration: none;
    font-size: 0.9rem;
}

.container-footer a:hover {
    text-decoration: underline;
}

.container-footer p,
.container-footer div {
    color: #888888 !important;
    font-size: 0.85rem;
    line-height: 1.8;
    margin-bottom: 5px;
}

/* ----------------------------------------------------------- */
/* 8. DER GAVICK-HOVER-EFFEKT (TEXT EXAKT ÜBER BILD)           */
/* ----------------------------------------------------------- */
.blog-items .item {
    position: relative !important;
}

.blog-items .item [itemprop="articleBody"],
.blog-items .item p {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    color: #111111 !important;
    opacity: 0 !important; 
    visibility: hidden !important; 
    transition: all 0.3s ease-in-out !important;
    z-index: 100 !important;
    pointer-events: none !important;
}

.blog-items .item .item-image img {
    transition: opacity 0.3s ease-in-out !important;
}

.blog-items .item:hover .item-image img {
    opacity: 0.4 !important; 
}

.blog-items .item:hover [itemprop="articleBody"],
.blog-items .item:hover p {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ----------------------------------------------------------- */
/* 9. NEUER HOVER-EFFEKT FÜR DEN BILD-CONTAINER (MANUELL)      */
/* ----------------------------------------------------------- */
.bild-container {
  background-color: #ffffff !important;
}

.bild-container .hauptbild,
.bild-container .hover-text {
  transition: opacity 0.5s ease-in-out !important;
}

.bild-container:hover .hauptbild {
  opacity: 0.1 !important;
}

.bild-container:hover .hover-text {
  opacity: 1 !important;
}

/* ----------------------------------------------------------- */
/* 10. JOOMLA STANDARD-TITEL VERSTECKEN                        */
/* ----------------------------------------------------------- */
.mod-articles-category-title,
.newsflash-title {
  display: none !important;
}

.blog-featured .page-header,
.blog-featured .item-title {
  display: none !important;
}

/* ----------------------------------------------------------- */
/* 11. ÜBERSCHRIFTEN & TITEL ANPASSEN                          */
/* ----------------------------------------------------------- */
h1, h2, .page-header, .item-title {
  background: none !important;
  background-color: transparent !important;
  color: #333a8d !important;
  font-size: 2.2rem !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  border: none !important;
}

.page-header, 
.article-info, 
header h1, 
.item-title {
  display: none !important;
}

h2.instrument-titel {
  display: block !important;
  background: none !important;
  color: #333a8d !important;
  font-size: 2rem !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  font-weight: bold !important;
  border: none !important;
}

/* ----------------------------------------------------------- */
/* 12. JOOMLA TAGS VERSTECKEN                                  */
/* ----------------------------------------------------------- */
.tags,
.article-tags,
a[href*="component/tags"] {
  display: none !important;
}

/* ----------------------------------------------------------- */
/* 13. ISOLIERTER GALERIE-EFFEKT (NUR AUF DER GALERIE-SEITE)   */
/* ----------------------------------------------------------- */
.galerie-seite .blog-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

.galerie-seite .blog-items .blog-item {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important; 
  border-radius: 4px;
}

.galerie-seite .blog-items .blog-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important; 
}

.galerie-seite .blog-items .blog-item:hover img {
  transform: scale(1.08) !important;
  opacity: 1 !important;
}