/* @media (min-width: 992px) {
  .site-grid {
    grid-template-areas:
      ". header header ."
      ". top top ."
      ". banner banner ."
      ". sidebar-right main ."
      ". bottom bottom ."
      ". footer footer .";
    grid-template-columns: minmax(0, 1fr) 4fr 9fr minmax(0, 1fr);
  }
} */

/*Meins: menü nach links und splitteil nach oben*/
.site-grid {
  display: grid;
}
.sidebar-left {
  z-index: 10;
  position: relative;
}
.sidebar-right {
  z-index: 1;
  position: relative;
}

/* Menü nach oben bei smartphone */
/* --- NUR FÜR SMARTPHONES & TABLETS (Mobilansicht) --- */
@media (max-width: 991px) {
    .site-grid {
        display: grid !important;
        grid-template-columns: 100% !important;
        grid-template-areas:
            "side-l"
            "comp"
            "side-r" !important;
    }

    .sidebar-left-container {
        grid-area: side-l !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .container-component {
        grid-area: comp !important;
    }

    .container-component main {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .sidebar-right-container {
        grid-area: side-r !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* --- PC-ANSICHT SCHÜTZEN (Zurücksetzen auf Standard) --- */
@media (min-width: 992px) {
    .container-component main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .sidebar-left-container,
    .sidebar-right-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Link in Überschrift weg '/
/* Unterstrich beim Alternativtitel in Joomla 6 radikal entfernen */
.brand-wrapper a, 
.brand-wrapper a:hover, 
.brand-wrapper a:focus,
a.navbar-brand,
a.navbar-brand:hover,
.navbar-brand a {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Kategorien Blog Anpassen für Bilder auf Startseite */
.com-content-category-blog .blog-item .item-content img,
.com-content-category-blog__item .item-content img,
.blog-item .item-content p img {
    width: 200px !important;
    height: 170px !important;
    max-width: 200px !important;
    object-fit: cover !important;
}


/* Seitenüberschriften */
/* Größe der Beitragstitel anpassen */

.com-content-article__body h4 {
  font-size: 1.1rem !important;
  /*color: red !important; *//* Erzwingt die Farbe zum Testen */
}
.com-content-article__body h5 {
  font-size: 1.1rem !important;
  text-decoration: underline !important;
  font-weight: normal !important;
  /*color: red !important; *//* Erzwingt die Farbe zum Testen */
}


/* Überschriften in Sidebar links und rechts */
/* Größe aller Modul-Überschriften (z.B. Login) in den Seitenleisten verkleinern */
.container-sidebar-left .moduletitle,
.container-sidebar-right .moduletitle {
    font-size: 1.3rem !important; /* Passt die Größe an (Standard ist oft 1.7rem oder mehr) */
}


/* Farbe Grundtemplate */

/* Header Hintergrund weiss */
/*header.container-header.full-width,
.header.container-header {
  background-color: #ffffff !important;
  background-image: none !important;
  --cassiopeia-color-primary: #ffffff !important;
}*/

/*Menühintergrund Balken oben grau/aktuell nicht genutzt  */
header.container-header .navbar, 
header.container-header .container-nav {
  background-color: #cccccc !important; /* #cccccc Helles Grau */
  background-image: none !important;
  border-radius: 4px; /* Optionale leichte Rundung */
  padding: 0px 00px; /* 5px 15px Etwas Abstand um die Menüpunkte */
}



/*Menühintergrund Seite*/

/* Quermenü */
/* 1. Das standardmäßige Dreieck von Joomla komplett entfernen */
.mod-menu_dropdown-metismenu button::after, 
ul.mod-menu_dropdown-metismenu button::after,
.metismenu.mod-menu button::after {
    display: none !important;
}

/* 2. Text und Plus-Button waagerecht auf eine exakte Linie bringen */
.mod-menu_dropdown-metismenu li,
.metismenu.mod-menu li {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* 3. Das Plus-Kreuz sauber und zentriert zeichnen */
.mod-menu_dropdown-metismenu button.mm-toggler,
.metismenu.mod-menu .mm-toggler {
    display: inline-block !important;
    position: relative !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 8px !important; /* Abstand zum Menütext */
    cursor: pointer !important;
    background: linear-gradient(#000000, #000000) center/100% 2px no-repeat, 
                linear-gradient(#000000, #000000) center/2px 100% no-repeat !important;
}

/* 4. Untermenüs (Ebene 3) brechen sauber als echtes Dropdown nach unten um */
.mod-menu_dropdown-metismenu li ul,
.metismenu.mod-menu li ul {
    flex-basis: 100% !important;
}

/*Selber metismenu*/
.metismenu.mod-menu .metismenu-item {
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  /* width: 150px !important; */
}

.mod-menu.metismenu li a {
    color: #5a6a84 !important;
    padding: 0 15px;
    font-size: 1.0rem !important;
}
.mod-menu.metismenu li.active a {
    color: #5a6a84 !important;
    font-weight: bold !important;
}

/* */

/*Menü links*/
/* Menü in der linken Seitenleiste rechtsbündig untereinander anordnen */
.container-sidebar-left .mod-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Richtet die Boxen rechtsbündig aus */
}

.container-sidebar-left .mod-menu a {
  text-align: left !important; /* Richtet den Text innerhalb der Links nach rechts aus */
  width: 100% !important;      /* Nutzt die volle Breite für die Klickfläche */
}


/* Schriftgröße*/
.container-sidebar-left .mod-menu a,
.container-sidebar-left .nav-link {
   font-size: 1.1rem !important;
}  


/* Menü-Schriftfarben für die linke Seitenleiste (Sidebar-Left) */
.container-sidebar-left .mod-menu a,
.container-sidebar-left .nav-link {
    color: #5a6a84 !important;        /* #105b4a Dunkles Grün für die Menüpunkte !!*/
    text-decoration: none !important; /* Kein Unterstrich */
}

/* Schriftfarbe in der Seitenleiste beim Darüberfahren (Hover) */
.container-sidebar-left .mod-menu a:hover,
.container-sidebar-left .nav-link:hover {
    color: #4d5c76 !important;  /* #1c967d  Helleres Grün beim Hovern */
    background-color: #f8f8f8 !important; /* #f4f6f5 Optional: Leichter Hintergrundeffekt */
}

/* Die aktuell aktive Seite in der Seitenleiste */
.container-sidebar-left .mod-menu .active > a,
.container-sidebar-left .mod-menu .active > .nav-link,
.container-sidebar-left .mod-menu .current > a {
    color: #5a6a84 !important; /* #1c967d Farbe für die aktive Seite */
    font-weight: bold !important;     /* Macht den Text fett */
}

.container-sidebar-left .mod-menu{
    background-color:#ffffff !important; 
}

/*Menü links grauer Hintergrund */
/* Grauer Hintergrund für die gesamte linke Seitenleiste */
.grid-child.container-sidebar-left,
.grid-child.container-sidebar-right {
    background-color: #f4f4f4 !important; /* #f4f4f4 Ein schönes, helles neutrales Grau */
    padding: 0 15px 0 15px !important;            /* Abstand vom Inhalt zum grauen Rand */
    border-radius: 4px !important;        /* Leicht abgerundete Ecken */
}

/* Modul-Überschrift in der Seitenleiste farblich anpassen */
.container-sidebar-left .moduletitle
.container-sidebar-right .moduletitle {
    color: #333333 !important;           /* Dunkelgrau für den Menütitel */
    border-bottom: 1px solid #cccccc;    /* Eine feine Trennlinie unter dem Titel */
    padding-bottom: 8px;
    margin-bottom: 15px;
}

/* Loginmodul Überschrift*/
/* Login-Überschrift in der rechten Seitenleiste verkleinern */
.container-sidebar-right .sidebar-right .card-header {
    font-size: 1.1rem !important; /* Gewünschte dezente Größe */
    padding: 10px 15px !important; /* Macht auch den Balken um die Schrift schmaler */
}


/*Hintergrundbild oben im Header*/
/* 1. Das standardmäßige Cassiopeia-Blau der gesamten Navbar abschalten */
header.header.full-width,
header.header.full-width .navbar {
  background-color: transparent !important;
  background-image: none !important;
}

/* 1. Das Logo-Element künstlich in die Breite dehnen */
.grid-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top:8px !important;
}


header.header.full-width .navbar-brand {
  position: relative;
  width: 100vw !important;
  min-height: 80px;

  /* Korrektur Links: Holt das Bild ganz an den linken Rand */
  padding-left: 0 !important;
  margin-left: 0 !important;  
  
  /* Erzeugt eine riesige Fläche nach rechts für das Hintergrundbild */
  /*padding-right: 69vw !important; 
  /* Verhindert, dass das Menü weggeschoben wird */
  /*margin-right: -0vw !important; /*vorher -69vw*/
  /* left: -0.4vw !important;    /* Drückt das Hintergrundbild nach links aus dem Grid heraus */
  right: 0; 

}

/* 2. Das Pseudoelement füllt nun die künstlich vergrößerte Fläche aus */
header.header.full-width .navbar-brand::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Nutzt jetzt die gesamte, neue Breite */

/* Bild-Einstellungen */
  background-image: url('/images/Grafiken/oben_gross.png') !important;
  background-position: left center;
  background-repeat: repeat-x; /* Wiederholt das Bild nun horizontal, falls gewünscht */
  background-size: contain;    /* vorher contain Behält die originale Bildhöhe bei */
  z-index: -1; 
}

/*Logoposition */
/* Nur den Inhalt des Logos (Bild oder Text) verschieben */
header.header.full-width .navbar-brand a img {
  position: relative !important;
  top: 7px;    /* Größerer Wert = weiter nach unten */
  left: 20px;  /* Negativer Wert = weiter nach links */
}

/* PhotoSwipe Teilen-Button in Phoca Gallery ausblenden */
button.pswp__button.pswp__button--share {
    display: none !important;
}

/* Erzwingt genau 3 Bilder nebeneinander in der Phoca Gallery */
/*.pg.msnr-container.pg-photoswipe.pg-msnr-container.pg-category-items-box*/

/*.pg-category-items-box {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 0px; */ /* Abstand zwischen den Bildern */
    /*box-sizing: border-box;*/
}