/* ********** ********** ********** ********** ********** */
/* BSC Farbschema                                         */
/* ********** ********** ********** ********** ********** */

:root {
  /* Farbpalette */
  --hue-violet: 270;
  --bsc-violet-lightest: hsl(var(--hue-violet), 100%, 80%);
  --bsc-violet-lighter:  hsl(var(--hue-violet), 100%, 70%);
  --bsc-violet-light:    hsl(var(--hue-violet), 100%, 60%);
  --bsc-violet:          hsl(var(--hue-violet), 100%, 50%);
  --bsc-violet-dark:     hsl(var(--hue-violet), 100%, 40%);
  --bsc-violet-darker:   hsl(var(--hue-violet), 100%, 30%);
  --bsc-violet-darkest:  hsl(var(--hue-violet), 100%, 20%);

  --hue-purple: 280;
  --bsc-purple-lightest: hsl(var(--hue-purple), 100%, 80%);
  --bsc-purple-lighter:  hsl(var(--hue-purple), 100%, 70%);
  --bsc-purple-light:    hsl(var(--hue-purple), 100%, 60%);
  --bsc-purple:          hsl(var(--hue-purple), 100%, 50%);
  --bsc-purple-dark:     hsl(var(--hue-purple), 100%, 40%);
  --bsc-purple-darker:   hsl(var(--hue-purple), 100%, 30%);
  --bsc-purple-darkest:  hsl(var(--hue-purple), 100%, 20%);

  --hue-gray: 0;
  --bsc-white:           #FFFFFF;
  --bsc-gray-lightest:   hsl(var(--hue-gray),   0%, 80%);
  --bsc-gray-lighter:    hsl(var(--hue-gray),   0%, 70%);
  --bsc-gray-light:      hsl(var(--hue-gray),   0%, 60%);
  --bsc-gray:            hsl(var(--hue-gray),   0%, 50%);
  --bsc-gray-dark:       hsl(var(--hue-gray),   0%, 40%);
  --bsc-gray-darker:     hsl(var(--hue-gray),   0%, 30%);
  --bsc-gray-darkest:    hsl(var(--hue-gray),   0%, 20%);
  --bsc-black:           #000000;

/*  
  hsl( <hue> , <saturation> ,  <lightness> );
  - hue: 0/360 = red | 60 = yellow | 120 = green | 180 = cyan | 240 = blue | 300 = magenta
  - saturation: 0% = gray | 50% = dimmed | 100% = pure
  - lightness: 0% = black | 50% = full color | 100% = white
*/
  
/*
  --bsc-violet:          #9F00FF;
  --bsc-violet-dark:     #7F00FF;
  --bsc-violet-darker:   #5F00FF;
  --bsc-purple:          #7F007F;
  --bsc-purple-dark:     #5F007F;
  --bsc-purple-darker:   #3F007F;
*/

/* Farbzuordnungen */
/* ********** ********** ********** ********** ********** */
  --bsc-bg-outer:        var(--bsc-purple-darker);
  --bsc-bg-inner:        var(--bsc-white);

  --bsc-nav1-bg:         var(--bsc-purple-darkest);
  --bsc-nav1-tx:         var(--bsc-white);
  --bsc-nav1-bo:         var(--bsc-purple-dark);
  --bsc-nav1-bg-hv:      var(--bsc-purple-dark);
  --bsc-nav1-tx-hv:      var(--bsc-white);
  --bsc-nav1-bo-hv:      var(--bsc-purple-dark);

  --bsc-nav2-bg:         var(--bsc-purple-darker);
  --bsc-nav2-tx:         var(--bsc-white);
  --bsc-nav2-bo:         var(--bsc-purple-dark);
  --bsc-nav2-bg-hv:      var(--bsc-purple-dark);
  --bsc-nav2-tx-hv:      var(--bsc-white);
  --bsc-nav2-bo-hv:      var(--bsc-purple-dark);

  --bsc-nav3-bg:         var(--bsc-purple-dark);
  --bsc-nav3-tx:         var(--bsc-white);
  --bsc-nav3-bo:         var(--bsc-purple);
  --bsc-nav3-bg-hv:      var(--bsc-purple);
  --bsc-nav3-tx-hv:      var(--bsc-white);
  --bsc-nav3-bo-hv:      var(--bsc-purple);

/*
  --bsc-bg-menu1:        var(--bsc-purple-darker);
  --bsc-bg-menu1-hv:     var(--bsc-purple);
  --bsc-bg-menu2:        var(--bsc-purple-darker);
  --bsc-bg-menu2-hv:     var(--bsc-purple);
  --bsc-bg-menu3:        var(--bsc-violet-dark);
  --bsc-bg-menu3-hv:     var(--bsc-violet);
*/

  --bsc-h1:              var(--bsc-violet);
  --bsc-h2:              var(--bsc-violet-dark);
  --bsc-h3:              var(--bsc-violet-darker);
  --bsc-h4:              var(--bsc-black);
  --bsc-p:               var(--bsc-black);
  --bsc-p-light:         var(--bsc-gray-darker);

/* Template Overrides */
/* ********** ********** ********** ********** ********** */
  --cassiopeia-color-primary: var(--bsc-purple-dark)      !important;
  --cassiopeia-color-hover:   var(--bsc-violet)           !important;
  --cassiopeia-color-link:    var(--bsc-violet-dark)      !important;

/*
  --template-sidebar-bg: var(--template-bg-dark-80);
  --template-sidebar-font-color: #fff;
  --template-sidebar-link-color: #fff;
  --template-bg-light: #f0f4fb;
  --template-text-light: #fff;
  --template-special-color: #132f53;
  --template-link-color: #2a69b8;
  --template-link-hover-color: #173a65;
  --template-contrast: #2a69b8;
*/
}

/* Hintergründe */
/* ********** ********** ********** ********** ********** */
body {
  background-color:      var(--bsc-bg-outer)              !important;
}

.container-header, 
.container-nav, 
.container-main-top, 
.container-component {
  background-color:      transparent                      !important;
  background-image:      none                             !important;
}

.site-grid,
.site-grid > * {
  background-color:      var(--bsc-bg-inner)              !important;
}
.site-grid {
  max-width:             1320px                           !important;
  margin:                0 auto                           !important;
  box-shadow:            0 4px 15px rgba(0, 0, 0, 0.05);
}

/* ********** ********** ********** ********** ********** */
/* Navigation                                             */
/* ********** ********** ********** ********** ********** */

/* Hauptmenü (Ebenen 1 und 2) ***** ********** ********** */

/* Menü-Liste */
/* ********** ********** ********** ********** ********** */
.container-sidebar-left .sidebar-left,
.container-header       .sidebar-left {
}
.container-sidebar-left .sidebar-left nav,
.container-header       .sidebar-left nav {
  padding:               0                                !important;
  margin:                0                                !important;
}
.container-sidebar-left .mod-menu,
.container-header       .mod-menu {
  list-style:            none                             !important;
  padding:               0                                !important;
  margin:                0                                !important;
  display:               flex !important; 
  flex:                  1 0 100%; !important;
  flex-direction:        column !important;
  gap:                   0px; /* Abstand zw. Buttons */
}

.container-sidebar-left ul,
.container-header       ul {
}
.container-sidebar-left ul ul,
.container-header       ul ul {
  margin-left: 8px;
  
}
.container-sidebar-left ul ul ul,
.container-header       ul ul ul {
}


.container-sidebar-left .mod-menu .metismenu-item,
.container-header       .mod-menu .metismenu-item {
  padding:               0                                !important;
  margin:                0                                !important;
}

/* Menü-Einträge als Buttons */
/* ********** ********** ********** ********** ********** */
.container-sidebar-left .mod-menu li,
.container-header       .mod-menu li {
}
.container-sidebar-left .mod-menu li a,
.container-header       .mod-menu li a {
  background-color:      var(--bsc-nav1-bg)               !important;
  color:                 var(--bsc-nav1-tx)               !important;
  display:               block                            !important;
  margin-top:            4px                              !important;
  padding:               0.5em                        !important;
  text-decoration:       none                             !important;
  border-left:           8px solid var(--bsc-nav1-bo)     !important;
  border-radius:         0 4px 4px 0;
  font-size:             1.2rem !important;
  font-weight:           bold;
  width:                 100%; !important;
  transition:            all 0.2s ease-in-out;
}

.container-sidebar-left .mm-show li a,
.container-header       .mm-show li a {
  background-color:      var(--bsc-nav2-bg)               !important;
  color:                 var(--bsc-nav2-tx)               !important;
  margin-top:            2px                              !important;
  padding:               0.5em                        !important;
  font-size:             1.1rem !important;
}
.container-sidebar-left .mm-show .mm-show li a,
.container-header       .mm-show .mm-show li a {
  background-color:      var(--bsc-nav3-bg)               !important;
  color:                 var(--bsc-nav3-tx)               !important;
  padding:               0.25em                        !important;
  font-size:             1rem !important;
}
.container-sidebar-left .mod-menu .mm-toggler,
.container-header       .mod-menu .mm-toggler {
  font-size:             1.2rem               !important;
  margin-left:           -3em               !important;
  margin-top:            0.2em               !important;
  padding:               1em 0.5em;
  width:                 3em;
  color:                 var(--bsc-nav1-tx)               !important;
  transition:            all 0.2s ease-in-out;
}
.container-sidebar-left .mm-show .mm-toggler,
.container-header       .mm-show .mm-toggler {
  font-size:             1.1rem               !important;
  color:                 var(--bsc-nav2-tx)               !important;
}
.container-sidebar-left .mod-menu li a:hover,
.container-header       .mod-menu li a:hover {
  background-color:      var(--bsc-nav1-bg-hv)            !important;
  color:                 var(--bsc-nav1-tx-hv)            !important;
  padding-left:          20px                             !important; /* Schiebt den Text beim Drüberfahren leicht nach rechts (dynamischer Effekt) */
  text-decoration:       none                             !important;
}
.container-sidebar-left .mm-show li a:hover,
.container-header       .mm-show li a:hover {
  background-color:      var(--bsc-nav2-bg-hv)            !important;
  color:                 var(--bsc-nav2-tx-hv)            !important;
}
.container-sidebar-left .mm-show .mm-show li a:hover,
.container-header       .mm-show .mm-show li a:hover {
  background-color:      var(--bsc-nav3-bg-hv)            !important;
  color:                 var(--bsc-nav3-tx-hv)            !important;
}

.container-sidebar-left .mod-menu li a.hidden,
.container-header       .mod-menu li a.hidden {
  display:               none                            !important;
}

.container-sidebar-left .mod-menu .mm-toggler:hover,
.container-header       .mod-menu .mm-toggler:hover {
  background:                 var(--bsc-nav1-bg-hv)               !important;
}
.container-sidebar-left .mm-show .mm-toggler:hover,
.container-header       .mm-show .mm-toggler:hover {
  background:                 var(--bsc-nav2-bg-hv)               !important;
}


.container-sidebar-left .mod-menu .active  > a,
.container-sidebar-left .mod-menu .current > a,
.container-header       .mod-menu .active  > a,
.container-header       .mod-menu .current > a {
  background-color:      var(--bsc-nav1-bg)               !important;
  color:                 var(--bsc-nav1-tx)               !important;
  text-decoration:       none                             !important;
}

/* Nav-Ebene 1 */
/* Nav-Ebene 2 */


/* Untermenü (Ebene 3) */
/* ********** ********** ********** ********** ********** */

/* Zwingt das Menü an Position main-top in eine horizontale Reihe */
ul.menu-horizontal {
  display: flex                                           !important;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
  gap: 15px; /* Abstand zwischen den einzelnen Menüpunkten */
}

ul.menu-horizontal li {
  display: inline-block                                   !important;
}

ul.menu-horizontal li a {
  color:            var(--bsc-nav3-tx)                    !important;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
}
ul.menu-horizontal li a:hover {
}

/*
.metismenu.mod-menu a {
  color:            var(--bsc-nav3-tx) !important;
  font-weight:      500;
  padding:          10px 15px !important;
  transition:       all 0.2s ease;
}

.metismenu.mod-menu a:hover, 
.metismenu.mod-menu .active,
.metismenu.mod-menu .active > a,
.metismenu.mod-menu .current > a {
  background-color: var(--bsc-nav3-bg) !important;
  color:            var(--bsc-nav3-tx) !important;
  border-radius:    4px;
}
*/

ul.menu-horizontal li a {
  background-color: var(--bsc-nav3-bg)                    !important;
  color:            var(--bsc-nav3-tx)                    !important;
}
ul.menu-horizontal li a:hover,
ul.menu-horizontal li .active,
ul.menu-horizontal li .current {
  background-color: var(--bsc-nav3-bg-hv)                 !important;
  color:            var(--bsc-nav3-tx-hv)                 !important;
}


/* Überschriften und Titelzeilen */
/* ********** ********** ********** ********** ********** */
h1, h2, h3, h4, 
.page-header h1, 
.page-header h2, 
.moduletable h3 {
  font-weight:           bold;
}
h1, .page-header h1 {
  color:                 var(--bsc-h1) !important;
}
h2, .page-header h2 {
  color:                 var(--bsc-h2) !important;
}
h3, .moduletable h3 {
  color:                 var(--bsc-h3) !important;
}
h4 {
  color:                 var(--bsc-h4) !important;
}








/* Standard Joomla-Buttons (z.B. Weiterlesen, Absenden) */
/* ********** ********** ********** ********** ********** */
.btn-primary {
  background-color: var(--bsc-violet) !important;
  border-color: var(--bsc-violet) !important;
  color: var(--bsc-white) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bsc-purple) !important;
  border-color: var(--bsc-purple) !important;
  color: var(--bsc-white) !important;
}

/* Links im Fliesstext */
/* ********** ********** ********** ********** ********** */
p a, li a:not(.metismenu.mod-menu a) {
  color: var(--bsc-violet);
  text-decoration: underline;
}
p a:hover {
  color: var(--bsc-purple);
}

/* ********** ********** ********** ********** ********** */
/* BSC Logo                                               */
/* ********** ********** ********** ********** ********** */

/* Erlaubt dem Logo-Bereich die volle Inhaltsbreite von 1320px */
.navbar-brand {
  display: block !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Zwingt das 1060px-Bild, sich künstlich auf die volle Breite zu strecken */
.navbar-brand img {
  width: 100% !important; /* Dehnt das Bild auf 100% des verfügbaren Platzes aus */
  height: auto !important;  /* Berechnet die Höhe proportional, damit nichts verzerrt */
  display: block !important;
}

.container-header,
.container-header .grid-child {
  padding: 0 !important;
}











/* ==========================================================================
   MOBILE NAVIGATION (HAMBURGER)
   ========================================================================== */

@media (min-width: 992px) {
  .container-nav .navbar {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .container-nav {
    height: 0;
    max-height: 0;
    overflow: visible;
/*    display: flex !important; */
  }
  
  .container-header nav {
    transform: translateY(-100%);
    margin: 0;
    display: flex !important;
  }
  .container-nav .navbar {
    padding: 1rem; !important;
  }
  
  /* Hamburger-Icon */
  .container-header .navbar-toggler {
    border-color: var(--bsc-white) !important;
    border-width: 2px !important;
    color:        var(--bsc-white) !important;
    padding:      6px 10px !important;
  }
/*    
    .navbar-toggler-icon {
        filter: invert(15%) sepia(95%) saturate(3945%) hue-rotate(267deg) brightness(84%) contrast(106%);
        filter: invert(0%) sepia(0%) saturate(100%) hue-rotate(360deg) brightness(100%) contrast(100%);
    }
*/
  /* Das mobile Dropdown-Menü als schwebende Box */
  .container-nav .navbar-collapse {
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 15px;
    border-radius: 4px;
    position: absolute;
    top: 100%;
/*  right: 15px; */
    left: 15px;
    z-index: 1050;
    min-width: 260px;
  }
    
  /* Links im mobilen Menü untereinander anordnen */
    .container-nav .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px;
    }
/*    
    .container-nav .navbar-nav a {
        color: var(--bsc-text-dark, #212121) !important;
        padding: 8px 12px !important;
        display: block !important;
        width: 100%;
        text-decoration: none !important;
    }
    
    .container-nav .navbar-nav a:hover {
        background-color: var(--bsc-white) !important;
        color: #ffffff !important;
        border-radius: 4px;
    }
*/
}