/*/* user.css für cassiopeia_dola_5 */
/* Farben anpassen */
:root {
    --cassiopeia-color-primary: #FFFFFF;
    --cassiopeia-color-link: #CC0000;
    --cassiopeia-color-hover: #000000;
	--baderweb-border-color: #000000;
	
}

/* Hauptmenu formatieren */

.container-header .mod-menu {
  flex: 1 0 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--cassiopeia-color-link);
  border-bottom-style: solid;
}

.metismenu.mod-menu .metismenu-item {
  flex-wrap: wrap;
  align-items: center;
  padding: .5em 1em;
  font-size: 1.6rem;
  line-height: 1.5;
  display: flex;
}

.container-header nav {
  margin-top: .5em;
  padding: 0;
  margin-bottom:2rem;
}

.mod-list li a:hover {
    /* text-decoration: underline;*/
    color: var(--cassiopeia-color-hover) !important;
	}

/* Menuepunkte (Buttons) zentrieren */
.moduletable {
  display: grid;
  justify-content: center;
  /*align-items: center;*/
}

/* Farben des Hamburger Button */
.container-header .navbar-toggler {
    color: #000;
    cursor: pointer;
    border: 1px solid #000;
}
	
/* Farben und Grösse des Back-to-top Links */
.back-to-top-link {
    /*position: fixed;*/
    position: fixed;
    top: calc(100vh - 4em);
    /* padding: 1.6em; */
		padding-top: 0.6em;
		padding-right: 1.6em;
		padding-bottom: 2.6em;
		padding-left: -0.4em;
    color: var(--cassiopeia-color-link/*,#112855*/);
    pointer-events: all;
    background-color: var(--white /*,#fff*/);
    border: 1px solid var(--cassiopeia-color-link);
    border-radius: .25rem;
    transition: all .2s ease-in;
}

.icon-arrow-up::before {
  content: "zum Menü";
  font-size: 0.9em;
}

.back-to-top-link:focus, .back-to-top-link:hover {
  background-color: var(--white,#fff);
  border-color: var(--cassiopeia-color-hover);
  color: var(--cassiopeia-color-hover);
}


/* Breite des Accordions/Tab Feldes */

joomla-tab {
  flex-direction: column;
  display: flex;
  width: fit-content;
  /* text-align: center;*/
}

/* Breite des Accordion/Tab-Fledes bei kleinen Screens */
 @media screen and (max-width: 520px) {
  joomla-tab {
    flex-direction: column;
    display: flex;
    width: inherit;
    /* text-align: center; */
  }
}

/* Content-Bereich formatieren */

@supports (display:grid) {
  .site-grid {
    grid-gap: 0 0em;
    grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
    grid-template-areas:
".banner banner banner banner." 
".top-a  top-a  top-a  top-a. " 
".top-b  top-b  top-b  top-b. " 
".comp   comp   comp   comp.  " 
".side-r side-r side-r side-r." 
".side-l side-l side-l side-l." 
".bot-a  bot-a  bot-a  bot-a. " 
".bot-b  bot-b  bot-b  bot-b. ";
    display: grid;
  }
}

@supports (display:grid) {
  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
   column-gap: 1em;
   width: 100%;
   max-width: fit-content;
  }
}
.container-bottom-a {
  grid-area: bot-a;
  border-top-color: lightgray;
  border-top-style: solid;
  border-top-width: thin;
}

/* Hintergrundbild im Header wegnehmen (muss nach Hauptmenu formatieren liegen)*/
.container-header {
    position: relative;
    z-index: 10;
    background-color: var(--cassiopeia-color-primary);
    background-image: none;
    box-shadow: inset 0 5px 5px rgba(0,0,0,.03);
}