/* **************************************************************************** */
/*      Offcanvas-Menü                                                          */
/*      S. https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia     */
/* **************************************************************************** */
.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: rgb(137, 2, 0);
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > ul > li >ul > li a {
        color: white;
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}
.offcanvas-body {
	background-color: #e0dd92;
}
.offcanvas-header {
	background-color: rgb(137, 2, 0);
}

/* ****************************************************************** */
/*      Cassiopeia Extended                                           */
/* ****************************************************************** */


/* Standard-Schriftarten festlegen */
p {
	font-family: Roboto;
}
.com-content-article__body, .com-contact__info {
	font-family: Roboto;
}


/* Silbentrennung generell einschalten */
body {
  hyphens: auto;
}


/* Footer-Menü horizontal anordnen und formatieren */
.container-footer .mod-menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.container-footer.footer.full-width {
	font-size: 14px;
}
.container-footer .mod-menu li {
    display: inline-block;
}
#mod-custom125 {
	margin-top: 10px;
}
/* Trennzeichen zwischen Footer-Menüpunkten */
.container-footer .mod-menu li:not(:last-child)::after {
    content: "|";
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    padding: 0;
    color: red;
}
.footer .grid-child {
	padding: 0;
}
.container-footer .grid-child {
	font-family: Oswald;
}


/* Sprachumschalter formatieren */
div.mod-languages ul {
	text-align: right;
}
div.mod-languages ul li.lang-active {
	background-color: rgb(250, 240, 240);
	border: thin solid red;
	border-radius: 4px;
}


/* Seitentitel formatieren */
.brand-logo {
  font-family: Roboto;
  font-size: 40px;
  line-height: 50px;
  font-weight: bolder;
  background-color: #e0dd92;
  text-shadow: 2px -2px 4px #333;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -9px;
}
a.brand-logo span {
	color: rgb(137, 2, 0);
    font-size: 40px;
}


/* Breadcrumbs mit Hintergrund versehen */
.grid-child.container-component {
    background-color: #faf0f0;
}

/* Desktop-Menüleiste nach oben ziehen */
@media screen and (width >= 768px) {
  .grid-child.container-nav {
      margin-top: -80px;
  }
}


/* Auf breiten Bildschirmen Footer sticky machen und formatieren */
@media screen and (width >= 768px) {
	.container-footer {
		position: sticky;
		bottom: 0;
		padding: 7px 15px 7px 15px;
        margin-top: 10px;
		border-top: 2px solid #e6c587;
        z-index: 99;
	}
}


/* Rechte Seitenleiste nach oben schieben */
.grid-child.container-sidebar-right {
	margin-top: -15px;
}


/* Überschriften formatieren und linken Rank lassen */
h1, h2, h3, h4, h5 {
  color: rgb(137, 2, 0);
  padding-left: 32px; 
  padding-right: 32px;
}
td {
  padding-left: 32px; 
  padding-right: 32px;
}
p {
  padding-left: 32px;
  padding-right: 32px;
}
.com-content-article__body li {
  margin-left: 32px;
  padding-right: 32px;
}
.com-contact__info {
  padding-left: 32px;
}


/* Menüs formatieren */
.navbar-brand {
   white-space: wrap;
}
.container-header .container-nav {
	margin-top: -20px;
    justify-content: flex-end;
}
.navbar-toggler.navbar-toggler-right {
	color: #890200;
	border: 2px solid #890200;
}
.navbar {
	font-family: Oswald;
}
.metismenu-item.level-2 {
  background-color: #e0dd92;
  color: rgb(137, 2, 0);
}


/* Breadcrumbs formatieren */
.mod-breadcrumbs.breadcrumb {
  background-color: #e0dd92;
  font-family: Nunito;
  font-size: 15px;
  padding-bottom: 1rem !important;
  padding-top: 1rem !important;
}


/* Back-to-Top nach oben schieben */
#back-top {
	margin-bottom: 50px;
}



/* ****************************************************************** */
/*      Eigene Klassen                                                */
/* ****************************************************************** */


/* Flex-Container einrichten */
.rd_container {
	display: flex;
	flex-wrap: wrap;
}
.rd_box {  
    flex: 1;  
    /* min-width: 50%; Auf Desktop jeweils 50% */  
    box-sizing: border-box;  
}
.rd_doppelt {
    flex: 2;
}
.rd_eineinhalb {
    flex: 2;
}
@media screen and (width < 768px) {  
.rd_box {  
    min-width: 100%; /* Auf Smartphone 100% Breite */ 
    margin-top: 4px;
  }  
}


/* Bilder einbauen */
.bild {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 4px solid #e0dd92;
	border-radius: 10px;
}
.quer {
	max-width: 700px;  
}
.hoch {
	max-width: 600px;  
}

/* Bildunterschriften einbauen */
.img_caption {
	font-size: 0.9rem;
	text-align: center;
    line-height: 1.2rem;
    font-style: italic;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

/* ****************************************************************** */
/*      Karte aus Phoca Maps in den Hintergrund                       */
/* ****************************************************************** */

.phocamaps-map.leaflet-container {
  	z-index: 50;
}



/* ****************************************************************** */
/*      Fonts                                                         */
/* ****************************************************************** */


/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('../fonts/lato-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/lato-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-regular - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
       url('../fonts/nunito-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* nunito-700 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'),
       url('../fonts/nunito-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('../fonts/roboto-v20-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/oswald-v35-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/oswald-v35-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}