/* ----------------------------------------------------------- */
/* 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: #a7a8aa !important;
  font-size: 0.9rem !important; /* Standard ist 1rem. 0.95 ist etwas kleiner, 0.9 noch kleiner */
  line-height: 1.6 !important;   /* Sorgt dafür, dass der Zeilenabstand beim kleineren Text angenehm lesbar bleibt */
}

/* ----------------------------------------------------------- */
/* 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;
  font-weight: normal !important; /* Nicht fett */
  text-transform: uppercase !important; /* Nur Großbuchstaben */
}

.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: normal !important; /* Von bold auf normal geändert */
  text-transform: uppercase !important; /* Nur Großbuchstaben */
  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: 4 / 3 !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;
}
/* Bildunterschriften in der Galerie zentrieren und stylen */
.galerie-seite .blog-items .blog-item {
  text-align: center !important; /* Zentriert alle Inhalte unter dem Bild */
}

.galerie-seite .blog-items .blog-item p,
.galerie-seite .blog-items .blog-item .item-title,
.galerie-seite .blog-items .blog-item figcaption {
  text-align: center !important;
  margin-top: 10px !important; /* Schafft etwas Luft zwischen Bild und Text */
  margin-bottom: 0 !important;
  color: #777777 !important; /* Passend zu deiner allgemeinen Textfarbe */
  font-size: 0.9rem !important; /* Etwas dezenter als der normale Text */
}
/* ----------------------------------------------------------- */
/* 14. TEXT BEI DEN INSTRUMENTEN-VARIANTEN (ÜBER AUDIOPLAYER)  */
/* ----------------------------------------------------------- */

/* Überschreibt die dunkle Farbe und Fettschrift aus dem HTML-Quelltext */
[itemprop="articleBody"] span[style*="color: #333"],
.item-page span[style*="color: #333"] {
  color: #a7a8aa !important;
  font-weight: normal !important;
  font-size: 0.9rem !important; /* Passt sich deiner neuen Standardgröße an */
}

/* ----------------------------------------------------------- */
/* 15. RAHMEN UM DEN INHALTSBEREICH (BOXED LAYOUT)             */
/* ----------------------------------------------------------- */

.site-grid {
  border: 1px solid #a7a8aa !important; /* Der hellgraue Rahmen */
  padding: 70px !important; /* Der großzügige Innenabstand */
  background-color: #ffffff !important; /* Sorgt für einen sauberen Hintergrund */
  margin-top: 20px !important; /* Gibt etwas Luft nach oben zum Menü */
  box-sizing: border-box !important; /* Verhindert, dass der Rahmen die Seite breiter macht */
}

/* WICHTIG: Auf schmalen Bildschirmen (Smartphones) den Abstand verkleinern */
@media (max-width: 768px) {
  .site-grid {
    padding: 30px 15px !important;
  }
}


/* ----------------------------------------------------------- */
/* 16. FREIE ZWISCHENÜBERSCHRIFT (BLAU, NORMALER TEXT)         */
/* ----------------------------------------------------------- */

.blaue-subline {
  color: #333a8d !important; /* Dein gewohntes Blau */
  font-weight: normal !important; /* Nicht fett */
  font-size: 1.6rem !important; /* Etwas kleiner als h2 (2.0rem) */
  text-transform: none !important; /* Zwingend: Erlaubt normale Groß- und Kleinschreibung! */
  background: none !important;
  border: none !important;
  margin-top: 20px !important;
  margin-bottom: 15px !important;
  display: block;
}

/* ----------------------------------------------------------- */
/* 17. DROPDOWN-MENÜ: ANIMIERTES HOVER & OHNE PFEIL (KORRIGIERT)*/
/* ----------------------------------------------------------- */

/* Animation, Darstellung und das Verstecken der Pfeile NUR für breite Bildschirme! */
@media (min-width: 992px) {
  
  /* Den kleinen Pfeil und die Toggle-Buttons auf dem Desktop entfernen */
  .container-header .dropdown-toggle::after,
  .container-header .metismenu .dropdown-toggle::after,
  .container-header .mod-menu button.mm-toggler {
    display: none !important;
  }

  /* Vorbereitung der Animation für alle Menü-Varianten */
  .container-header .mod-menu li.parent > ul,
  .container-header .dropdown-menu {
    display: block !important; 
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px); 
    transition: all 0.3s ease-in-out !important; 
    position: absolute !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    padding: 5px 0 !important;
    border-radius: 4px !important;
    min-width: 210px !important;
    z-index: 9999 !important;
    pointer-events: none; 
  }

  /* Der Hover-Zustand: Einblenden und Hochgleiten */
  .container-header .mod-menu li.parent:hover > ul,
  .container-header .mod-menu li.dropdown:hover > .dropdown-menu,
  .container-header .metismenu li.parent:hover > ul,
  .container-header .navbar-nav li.dropdown:hover > .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important; 
    pointer-events: auto !important;
  }
  
  /* Styling der Unterpunkte */
  .container-header .mod-menu li.parent > ul a,
  .container-header .dropdown-menu a {
    padding: 6px 20px !important;
    font-size: 0.95rem !important;
    color: #777777 !important;
    text-transform: none !important;
    font-weight: normal !important;
    display: block !important;
    transition: color 0.2s ease !important;
  }

  /* Farbeffekt beim Drüberfahren im Untermenü */
  .container-header .mod-menu li.parent > ul a:hover,
  .container-header .dropdown-menu a:hover {
    background-color: #fcfcfc !important;
    color: #333a8d !important; 
  }
}

/* ----------------------------------------------------------- */
/* 18. LOGO FÜR HANDYS ANPASSEN (RESPONSIVE)                   */
/* ----------------------------------------------------------- */
.container-header .navbar-brand img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 767px) {
  .container-header .navbar-brand img {
    max-width: 75% !important; /* Macht das Logo auf dem Handy etwas schmaler */
    margin-top: 5px !important;
  }
}

/* ----------------------------------------------------------- */
/* 19. HANDY-MENÜ (HAMBURGER-BUTTON) SICHTBAR MACHEN           */
/* ----------------------------------------------------------- */
.container-header .navbar-toggler {
  background-color: #333a8d !important; /* Das Blau aus deinem Menü */
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.container-header .navbar-toggler-icon {
  filter: brightness(0) invert(1) !important; /* Zwingt die 3 Striche dazu, reinweiß zu werden */
}

/* ----------------------------------------------------------- */
/* 20. LOGO AUF DEM DESKTOP VERKLEINERN                        */
/* ----------------------------------------------------------- */

@media (min-width: 992px) {
  .container-header .navbar-brand img {
    /* Ändere diese Zahl, bis das Logo exakt so breit ist wie dein Menü */
    max-width: 600px !important; 
    height: auto !important;
    display: block !important;
  }
}