:root {
  --cassiopeia-color-primary: #0F0F0F;
  --cassiopeia-color-link: #02678E;
  --cassiopeia-color-hover: #326BE0;
  
  --lar-color-bg-button: #EFBE43;
  
  /* Border um Seite (Umrandung) */
  --lar-border: 1px;
  --lar-bordercolor: #A49865;
}

/* Farbe:

Pension braun Hintergrund:		EFBE43
Pension heller Texthintergrund:	FBECC3
Pension Textfarbe:				AA462E



epromod Hintergrund blue:		7ABBF8
epromod Hintergrund grey:		f2f2f2

*/


/* Steuerung für kleine Bildschirme*/
.navbar-expand-lg .navbar-collapse {

}
/* Minimenüanzeigen bei Handy */
.collapse:not(.show) {
	/* display: none; */		/* Maximenü bei Handy ausblenden */
	display: flex !important;container
	
}


.navbar-expand-lg .navbar-toggler {
    display: none;
	/* display: flex !important; */	/* Minimenüanzeigen bei Handy anzeigen */
}


/* ENDE -----------------------------< */


  .site-grid {
    display: flex;
	}

@media (min-width: 1350px) {
  .site-grid {
    display: grid;
	}
}







.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: Comic Sans MS, arial, verdana, Helvetica, Sans-serif;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
  margin-bottom: 17px;
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 1.65rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.50rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.35rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.25rem;
  }
}

h5, .h5 {
  font-size: 1.17rem;
}

h6, .h6 {
  font-size: 1rem;
}





body {
	background-color: #EFBE43;
	background-size: 1px 756px;	/* Damit wir immer eine Mindesthöhe und einen Mindestverlauf haben */
	background-image: linear-gradient(180deg, #fbe5b5 0%, #efbe43 100%);
	background-repeat: repeat-x;
	/* padding-top: 10px; */
	font-family: Comic Sans MS, arial, verdana, Helvetica, Sans-serif;
	/* Schöner Font von Google ---- font-family: 'Yanone Kaffeesatz'; */
	color: #AA462E;
}

body:not(.has-sidebar-right) .site-grid .container-component {
    
	border-left: var(--lar-border) solid var(--lar-bordercolor);
	border-right: var(--lar-border) solid var(--lar-bordercolor);
	border-bottom: var(--lar-border) solid var(--lar-bordercolor);
	
	
}



/* Seitenkopf-Eigenschaften -------------------------------------------------------------->*/
.grid-child {
	border-left: var(--lar-border) solid var(--lar-bordercolor);
	border-right: var(--lar-border) solid var(--lar-bordercolor);	
}
.container-below-top, .container-topbar { 
	/* border-top: var(--lar-border) solid var(--lar-bordercolor); */
}
.container-header {
  background-color: #7ABBF8; /* Farbe Kopfstreifen voll von links nach rechts */
  background-color: transparent;
  background-image: none;

  box-shadow: inset 0 0px 0px rgba(0,0,0,.03);
}
.container-header nav {
	margin-top: 0px;
}



.container-component {
	background-color: #FBECC3;		/* Hintergrund Haupttextbereich */
	padding: 10px 10px 0px 15px;
	min-height: 700px;
}
@media (min-width: 1200px) {
  .container-component {
    padding: 10px 25px 0px 40px;
  }
}


.container-header .grid-child {
    padding: 0; /* Abstand unter/über Kopfmenü */
	background: url("../images/kopfv005.jpg") no-repeat top 0px left 0px;
	background-size: 1350px;
	background-color: var(--lar-color-bg-button);
}

.metismenu.mod-menu .mm-collapse {
    background-color: var(--lar-color-bg-button);
}

.grid-child {

}
.grid-child.container-below-top {
	background-image: none;
}
.grid-child.container-nav {
	background-image: none;
}
	/* ------------> Menüeffekt Strich-unten-Animation */
	.container-header .metismenu>li.active>a:after,
	.container-header .metismenu>li.active>button:before,
	.container-header .metismenu>li>a:hover:after,
	.container-header .metismenu>li>button:hover:before {
	right:0;
	left:0;
	background:#AA462E;
	/* background: none; */
	}
	@media (min-width:992px) {
	  .container-header .metismenu>li>a:after,
	  .container-header .metismenu>li>button:before {
	  height:2px;
	  opacity:1;
	  transition:all .2s ease,background-color .2s ease
	  }
	}
	/* Menüeffekt Strich-unten-Animation <------------*/

/* Seitenkopf-Eigenschaften ENDE <---------------------------------------------------- */


/* ---------------> Menü-Kopf mit abänderung - class in Konfiguration einsetzen ---> class: kopf <--- */
/* Damit das zweite Menü bei Position below-top rechts erscheint */
.container-below-top {
  justify-content: space-between;
}

.container-header .mod-menu .kopf {

}

.metismenu.mod-menu.kopf .metismenu-item > a, .metismenu.mod-menu.kopf .metismenu-item > button, .metismenu.mod-menu.kopf .metismenu-item.kopf > span {
	/* border-left: 1px solid red; */
	font-size: 0.8rem;
	font-weight: bold;
}
/* ENDE <--------------- */


/* Titel/Logo LogoZeile Eigenschaften */
.navbar-brand {
	padding-left: .3125rem;
}

.container-header .navbar-brand a {
    color: #AA462E;
	text-decoration: none;
}


/* -------------------> Hauptmenü-Eigenschaften */
.metismenu.mod-menu .metismenu-item {
    /* padding: .5em 1em; */
	padding: 0;
    font-size: 1.1rem;
    line-height: 1.5;
}

.metismenu.mod-menu .metismenu-item > span,
.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > button {
  padding: .5em 1em;
  /* font-weight: bold; */
  
  
  
}
.metismenu.mod-menu .metismenu-item > a:focus,
.metismenu.mod-menu .metismenu-item > button:focus {
	/* background-color: #0000ff; */
    outline: 0px dotted #ced4da;
}

.metismenu.mod-menu .metismenu-item > a, .metismenu.mod-menu .metismenu-item > button, .metismenu.mod-menu .metismenu-item > span {
	width: 100%;
	color: #AA462E;
}

.metismenu.mod-menu .metismenu-item.active > a, .metismenu.mod-menu .metismenu-item.active > button,
.metismenu.mod-menu .metismenu-item > a:hover,
.metismenu.mod-menu .metismenu-item > button:hover {
	background-color: #FBECC3;
	text-decoration: none;
	padding: .5em 1em;
}

/* ENDE <-------------------*/



/* Fussmenü anpassen --------------------------> */





.site-grid {
    margin-bottom: 0;
}

.footer {
	margin-top: 0em;
	background-image: none;
	background-color: transparent;
}

.footer .grid-child {
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0em;
	background-color: #F4D384;
	border-bottom: var(--lar-border) solid var(--lar-bordercolor);
}

.footer .navbar {
	margin-left: auto;
	margin-right: auto;
	padding-top: .0rem;
    padding-bottom: .0rem;
}

.container-header .mod-menu .footermitte {

}

.metismenu.mod-menu.footermitte .metismenu-item > a, .metismenu.mod-menu.footermitte .metismenu-item > button, .metismenu.mod-menu.footermitte .metismenu-item.footermitte > span {
	/* border-left: 1px solid red; */
	font-size: 0.8rem;
	font-weight: bold;
}



.boxed .blog-item {
    background-color: #F9DEA0;
    box-shadow: 0 0 2px rgba(51,57,66,.1),0 2px 5px rgba(51,57,66,.08),0 5px 15px rgba(51,57,66,.08),inset 0 2px 0 #AA462E;
}






.formerror,
.formerrorb {
	color: #ff0000;
	font-size: 85%;
	padding-left: 10px;
}
.formerrorb {
	font-weight:bold;
	width: 100%;
	text-align: left;
	padding-bottom: 10px;
}

.form-left {
	float: left;
	width: 200px;
	padding-top: 4px;
	padding-right: 10px;
	text-align: right;

}
.form-right {
	min-height: 28px;
	min-width: 200px;

	
}



.datenschutz {
	min-height: 28px;
	min-width: 200px;
	padding-top: 5px;
	padding-bottom: 15px;
	font-size: 80%;
	font-family: arial, verdana, Helvetica, Sans-serif;
	overflow: hidden;
}
input[type="checkbox"] {
    margin-top: 10px;
}


select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {

	margin-bottom: 9px;
	border-radius: 0px;
	border: 1px solid #ccc;
	border-color: #8F8F9D;
	color: #444;

}





.boxla a.sigplus-image {
	margin: 0 14px 14px 0;
}

.boxla a.sigplus-image > img {
	border: 1px solid #666666;
	padding: 2px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	box-shadow: 3px 3px 3px #777;
}
.boxla a.sigplus-image > img:hover {
	border: 2px dotted #666666;
	padding: 1px;
	box-shadow: 7px 7px 7px #777;
}

.boxla .captionplus-overlay {
    background-color: transparent !important;
	text-shadow: 0.1em 0.1em 0.1em black;
}











/*
Hier ginge auch das Menü zu verändern
.mod-list li a {
	
	*/