@import url(../../../../../_assets/fonts/open-sans/opensans_regular_macroman/stylesheet.css);


:root {
  --white: #FFF;
  --black: #000;
  --petrol: #00627A;
  --anthrazit: #332f2e;
  --gray: #676767;
  --medium-gray: #b7b7b7;
  --medium-dark-gray: #808080;
  --light-gray: #eaeaea;  
  --hamburger-menu-button-stripes-color: var(--anthrazit);
  --hamburger-menu-button-background-color: var(--light-gray);

  --body-font-family: open_sansregular, Arial;
  --body-font-size: 1.2rem;
  --body-font-color: var(--anthrazit);
}

@media all {

/*********  Browser-Info  *********/
div#browserInfo {
	text-align: center;
	background: #9CFF2F;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999999;
}

/*********  Back-top  *********/
#back-top {
  position: fixed;
  color: var(--white);
  background-color: var(--medium-dark-gray);
  border: none;
  z-index: 0;
}
#back-top.visible {
  z-index: 1000;
}
#back-top span[class*="icon"] {
  position: relative;
  top: 0.1rem;
}
@media all and (max-width: 767px) {
  #back-top {
    right: 0.5rem;
    bottom: 0.5rem;
    padding: 0.25rem;
  }
}
#back-top:hover {
  background-color: var(--medium-gray);
}
/******************************/

body {
  color: var(--body-font-color);
  font-size: var(--body-font-size);
  line-height: 1.5rem;
}

/********* Horizontalmenü *********/
header .container-nav {
  padding-bottom: 0 !important;
}
header nav {
  background-color: var(--gray) !important;
  margin-top: 0 !important;
}
header nav ul {
  color: var(--white) !important;
  justify-content: center;
}
header nav ul.dj-megamenu {
  background-color: var(--gray) !important;
}
header nav ul.dj-megamenu li.dj-up {  
  letter-spacing: 0.05rem;
}
header nav ul.dj-megamenu .arrow::before {
  font-family: "Font Awesome 6 Free" !important;
}
header nav li a {
  color: var(--white) !important;
  display: inline-block;
  font-size: 1.1rem !important;
  height: auto !important;
  padding: 1rem 1rem 1rem 1rem !important;
}
header nav li a span {
  height: auto !important;
}
header nav li.active,
header nav li:hover,
header nav li:active,
header nav li:focus {
  background-color: var(--light-gray);
}
header nav li.active > a,
header nav li:hover > a,
header nav li:active > a,
header nav li:focus > a,
header nav li.active > button,
header nav li:hover > button,
header nav li:active > button,
header nav li:focus > button {
  color: var(--body-font-color) !important;
  background: transparent !important;
}
header nav li.active::after,
header nav li:hover::after {
  background: transparent !important;
}
header nav li li a {
  padding: 1rem 1rem 1rem 1rem !important;
}
header nav .dj-subwrap {
  box-shadow: 0 1rem 1rem var(--anthrazit);
}
header nav .dj-subwrap .dj-subwrap-in {
  width: max-content !important;
}
header nav .dj-subwrap .dj-subcol {
  width: auto !important;
}
header nav .dj-subwrap ul {
  background-color: var(--medium-dark-gray);
}
nav li.separator a {
  cursor: default !important;
}
/********* Mobilmenü *********/
header nav button {
  background: transparent !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  width: max-content !important;
}
header nav button .dj-mobile-open-icon::before {
  font-size: 2rem !important;
}
header nav button:hover .dj-mobile-open-icon::before,
header nav button:active .dj-mobile-open-icon::before,
header nav button:focus .dj-mobile-open-icon::before {
  color: var(--medium-gray);
}
.dj-mobile-open-icon::before {
  opacity: 1 !important;
}
header nav button.active span {
  color: inherit !important;
  background: transparent !important;
}
.dj-offcanvas li a,
.dj-offcanvas li .toggler::before {
  font-size: 1rem !important;
}
.dj-offcanvas li a {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.dj-offcanvas li.current a {
  background: var(--medium-dark-gray) !important;
}
.dj-offcanvas li a {
  color: var(--white) !important;
}
.dj-offcanvas li a:hover {
  color: var(--white) !important;
  background: var(--gray) !important;
}

/*********  Topmenü (im Header) *********/
/* 1. Template-Standard deaktivieren */
header .mod-menu > li.active::after,
header .mod-menu > li:hover::after {
  background: transparent !important;
}
/* 2. Stattdessen selbst definierte Werte zuweisen */
header ul.nav li:hover a {
  text-decoration: underline !important;
  text-underline-offset: 0.25rem;
  text-decoration-color: var(--light);
}

/********* Header *********/
header {
  background: var(--petrol) !important;
}
header .container-below-top ul.mod-menu {
  float: right;
  margin-top: 0.5rem;
}
header .container-below-top ul.mod-menu li {
  padding: 0;
}
header .container-below-top ul.mod-menu li a {
  padding: 0.5rem 0.75vw;
}
header .container-below-top ul.mod-menu li::after {
  display: inline-block;
  position: initial;
  opacity: 1;
  content: "|";
}
header .container-below-top ul.mod-menu li:last-of-type::after {
  content: "";
}
header .container-below-top ul.mod-menu li + li {
  margin-left: 0;
}

header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

#main {
  padding-left: 15%;
  padding-right: 15%;
/*
  display: flex;
  flex-direction: row;
*/
}

.content-wrapper {
  display: flex;
  width: 100%;
}

.container-sidebar-left {
  float: left;
  width: 25%;
  margin-right: 2.5%;
}
.container-sidebar-right {
  float: right;
  width: 25%;
  margin-left: 2.5%;
}
.container-sidebar-left .item-page,
.container-sidebar-right .item-page {
  margin-top: 0;
}
.container-sidebar-left .item-page h2,
.container-sidebar-left .item-page h3,
.container-sidebar-left .item-page h4,
.container-sidebar-right .item-page h2,
.container-sidebar-right .item-page h3,
.container-sidebar-right .item-page h4 {
  margin-top: 0;
}

/*
.container-sidebar-left {
  float: left;
  margin-right: 2.5%;
}*/
/*
.container-sidebar-right {
  float: right;
}
*/
[itemprop="articleBody"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

h2 a,
h3 a,
h4 a {
  border-bottom: none !important;
}
h2 a:hover,
h2 a:active,
h2 a:focus,
h3 a:hover,
h3 a:active,
h3 a:focus,
h4 a:hover,
h4 a:active,
h4 a:focus {
  color: var(--body-font-color);
  text-underline-offset: 0.25rem;
}

h1,
header .navbar-brand h1 {  
  font-size: 2.5rem !important;
}
h1 {
  margin-bottom: 2rem;
}
header .navbar-brand h1 {
  margin-bottom: 0;
}
h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

#main a {
  color: var(--body-font-color);
  text-underline-offset: 0.25rem;
}


/***************  Fixierte Schnell-Navigation  ***************/
.sidenavigation-modulebox {
  position: fixed;  
  z-index: 99992;
  top: 34%;     /* für den Abstand von oben - Vorsicht bei kleinen Displays/Browserfenstern */
  /*left: 0;*/  /* für linksbündige */
  right: 0;     /* für rechtsbündige */  
}
.quickMenue {
  border-radius: 3px;
  background: transparent;
}
.quickMenue a.quickMenueAnchor {
  color: var(--petrol);
  display: flex;
  flex-direction: column;
  justify-content: center;
/*  
  width: 3.5rem;
  height: 3.5rem;
*/  
  border-radius: 3px;
  text-align: center;
  margin: 6px 3px;
  background: var(--medium-gray);
  opacity: 0.9;
  text-decoration: none;
}
.quickMenue a.quickMenueAnchor:first-of-type {
  margin-top: 2px;
}
.quickMenue a.quickMenueAnchor:last-of-type {
  margin-bottom: 2px;
}
.quickMenue a.quickMenueAnchor:hover {
  text-decoration: none;
  background: var(--light-gray);
}
.quickMenue a.quickMenueAnchor i {
  padding-top: 10px;
}
.quickMenue a.quickMenueAnchor img {
  margin: auto; /* Zentrierung eigener Grafiken oder Icons */
}
.quickMenue a.quickMenueAnchor span.quickMenueIconDescription {
  /*display: none;*/ /* Ausblenden der Description, falls title-Attr. ausreicht */
  font-size: 11px;
  font-weight: normal;
  display: none;
}

.mytooltip {
  position: relative;
  text-transform: uppercase;
  
}
.mytooltip::after,
.mytooltip::before  {
  position: absolute;
  transition: all 0.6s ease;
  display: none;
}

/* Tooltip-Text */
.mytooltip::after {
  width: 1rem;
  content: attr(data-tooltip);  
  left: -8rem;
  bottom: 1.8rem;
  white-space: normal;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--darkorange);
  background: var(--light-gray);
  opacity: 0.9;
  text-align: center;
  padding: 5px 15px;
  border: 1px solid  var(--medium-dark-gray);
  border-radius: 5px;
  box-shadow: 0 0 0.5rem var(--medium-gray);
}

/* Tooltip-Pfeil */
.mytooltip::before {
  content: "";
  left: -0.9rem;
  bottom: 1.4rem;
  border-top: 7px solid var(--medium-dark-gray);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.has-mytooltip:hover + .mytooltip::after,
.has-mytooltip:hover + .mytooltip::before {
  display: inline-block;
}

/* Tooltip-Text */
.quickMenue .mytooltip::after {
  width: 10rem;
  left: -10.75rem;
  bottom: 1.1rem;
}
.quickMenue .mytooltip::before {
  left: -0.75rem;
  bottom: 1.75rem;
  border-left: 7px solid var(--medium-dark-gray);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/********* Suche *********/
.finder label[for="tax-language"],
.finder #tax-language,
.finder label[for="tax-type"],
.finder #tax-type,
.finder label[for="tax-author"],
.finder #tax-author,
.finder label[for="tax-category"],
.finder #tax-category {
  display: none;
}
.finder label[for="tax-category"] {
  margin-top: 1rem;
}
.finder button[type="submit"] {
  background-color: var(--medium-dark-gray);
  border-color: transparent;  
}
.finder .result__title-link .result__title-text {
  font-family: var(--body-font-family);
  font-size: 150%;
  letter-spacing: -0.15rem;
  line-height: 2.1rem;
}
.finder .result__title-link:hover .result__title-text {
  text-decoration: none;
}
.finder #search-result-empty {
  display: none;
}

/********* Login ********
.login {
  margin: 0 auto;
  width: 40%;
}
*/

/********* Footer *********/
footer {
  border-top: 0;
  background: var(--petrol) !important;
  color: var(--white) !important;
  padding: 1.5em 2em 3em 2em;
  margin-top: 0 !important;
}
footer ul.nav {
  flex-direction: row;
}
footer ul.nav li {
  padding: 0.5rem;
}
footer ul.nav li a:hover,
footer ul.nav li a:active,
footer ul.nav li a:focus {
  color: var(--white);
  text-underline-offset: 0.25rem;
}

/********* Frontend-Bearbeitung ********
body.layout-edit .header-image {
  display: none;
}
.edit .page-header {
  display: none;
}
#main .icons [role="tooltip"] {
  display: none;
}
div[id^="system-message"] div[class*="message"],
.edit input,
.edit textarea {
  font-size: 1.2rem !important;
}
.editor .mceBranding {
  display: none !important;
}
*/

/***************  Grid  ***************/
.flex-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 3vw;
}

.grid-16 {
  width: 14.5%;
}
.grid-20 {
  width: 17.5%
}
.grid-25 {
  width: 22%;
}
.grid-33 {
  width: 31.5%;
}
.grid-40 {
  width: 38%;
}
.grid-50 {
  width: 48%
}
.grid-60 {
  width: 58.5%
}
.grid-66 {
  width: 65.5%;
}
.grid-75 {
  width: 74%
}
.grid-80 {
  width: 79.5%;
}
.grid-100 {
  width: 100%;
}

.grid-16,
.grid-20,
.grid-25,
.grid-33,
.grid-40,
.grid-50,
.grid-60,
.grid-66,
.grid-75,
.grid-80 {
  box-sizing: content-box;
}

}

/**********************************/
@media all and (max-width: 767px) {

  .flex-grid {
    flex-direction: column;
    row-gap: 4vw;
  }

  .grid-16,
  .grid-20,
  .grid-25,
  .grid-33,
  .grid-40,
  .grid-50,
  .grid-60,
  .grid-66,
  .grid-75,
  .grid-80 {
    width: 100% !important;
  } 

}


/***********************************************************************************************************************************************************
********************************************************** Media Queries ***********************************************************************************
************************************************************************************************************************************************************/

/*******************************************************************************/
@media all and (max-width: 1499px) {

#main {
  padding-left: 5%;
  padding-right: 5%;
}

}

/*******************************************************************************/
@media all and (max-width: 1079px) {

#main {
  flex-direction: column;
}
.content-wrapper {
  flex-direction: column;
}
.container-component,
.container-sidebar-left,
.container-sidebar-right {
  width: 100%;
  float: none;
}
.container-sidebar-left {
  margin-right: 0;
}
.container-sidebar-right {
  margin-left: 0;
}

}

/*******************************************************************************/
@media all and (min-width: 992px) {

.container-component {
  padding-right: 2%;
}

}

/*******************************************************************************/
@media all and (max-width: 991px) {

/*
#main {
  flex-direction: column;
}
.content-wrapper {
  flex-direction: column;
}
.container-component,
.container-sidebar-left,
.container-sidebar-right {
  width: 100%;
  float: none;
}
.container-sidebar-left {
  margin-right: 0;
}
.container-sidebar-right {
  margin-left: 0;
}
*/

/** topmenu **/
header .container-below-top ul.mod-menu.nav {
  flex-direction: row;
  position: relative;
}
header nav .collapse:not(.show) {
  display: none !important;
}
header nav ul {
  display: flex;
}
header nav ul li {
  flex-wrap: wrap !important;
/*  padding-left: 5% !important;*/
  font-size: var(--body-font-size) !important;
}
header nav li.level-1 + li.level-1 {
  margin-left: 0 !important;
}
/*
header nav .navbar-toggler {
  display: block;
  margin: 0.5rem 1rem 0.5rem 5% !important;
  font-size: 1.5rem;
}
header nav .navbar-toggler:focus {
  box-shadow: none;
}
header nav .navbar-toggler:hover,
header nav .navbar-toggler:active {
  color: var(--hamburger-menu-button-stripes-color);
  background-color: var(--hamburger-menu-button-background-color);
}*/

}

/*******************************************************************************/
@media all and (max-width: 979px) {

/********* Login *********/
.login {
  width: 60%;
}

.dj-mobile-open-btn {
  width: 100% !important;
  justify-content: left !important;
}
.dj-mobile-open-icon::before {
  opacity: 1 !important;
}
.dj-mobile-open-icon,
.dj-mobile-open-icon::before,
.dj-mobile-open-icon::after {
  background-color: var(--white) !important;
}

}

/*******************************************************************************/
@media all and (max-width: 549px) {

/********* Login *********/
.login {
  width: 80%;
}

}

/*******************************************************************************/
@media all and (max-width: 399px) {
  
/********* Login *********/
.login {
  width: 100%;
}
  
}