/* Colors 
background: #2e4900;
border: #729060
link #55731E
*/

@import url("fonts.css");
@import url("icons.css");
@import url("creatix.css");
@import url("jQuery.mmenu.css");
			 
html, body { background-color: #2e4900; color: #2B2B2D;font-family: 'Montserrat',sans-serif;}

#container { background-color: #fff;  }

#content a {color:  #55731E;}
#content a:hover,#content a:focus {color: #55731E ;text-decoration: underline;}
#content a:visited {color:  #3B4D1A;;}
div#menu a:link, div#menu  a:visited {color: #2e4900;text-decoration: none;}


/* nav */
@media screen and (min-width: 769px) { 
	div#menu {padding: 10px 10px 10px 10px; }
	div#menu ul#nav1 {display: flex; flex-direction: row; justify-content: space-around;}
	.nav ul {list-style: none;  padding: 0;  margin: 0;}

	.nav li {display: block;  }
	.nav li.current {font-weight: 600; }
	ul#nav1>li {padding: 3px 15px;text-align: center; }
	ul#nav1>li ul>li {text-align: left; padding-top: 3px; }
	xxul#nav2>li {padding: 5px 0; min-width: 150px;text-align: left; border-left: 1px solid #fff;}
	xx.nav li a  {padding: 0 10px;}
	xx.nav li ul a  {padding: 0 11px 0 0 ;}
	.nav li a:hover { font-weight: 600; text-decoration: none;}
	.nav li>ul>li {clear: left;}
	.nav>ul>li>ul { display: none; }
	.nav ul>li>ul>li {  background: transparent; ;} 
	.nav>ul>li:hover>ul {  display: block;  position: absolute; width: 150px; z-index: 7;}
	.nav>ul>li>ul>li {  position: relative;}
}
@media screen and (max-width: 769px) { .nav>ul>li>ul {  display: block; } }





/* mobilenav */
#mobilenav-container a {display: block; position: absolute;  text-decoration: none;}
#mobilenav-container a#showMenu { right: 15px; top: 10px;}
a#closeMobileMenu.icon-close {display: block; position: absolute; left: 5px; top: 3px;}
.mm-navbars_bottom {margin-bottom: 20px;}
.icon {font-size: 25px !important; color: #fff;;}
/* END mobilenav */


h1, h2,  h5, h6, blockquote {font-family: 'Lora', serif ; }
h3, h4, #content>h2, #content>.col-9>h2, footer#footer h2 {font-family: 'Montserrat',sans-serif; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}
footer#footer h2 {font-size: 1.2em;}
#content h1 {text-align: center;}
#content h3 {padding-top: 5px;}
#content h2+h3 {padding-top: 20px;}
#content>h3 {clear: left;   padding-bottom: 15px; }
#content>h2, #content>.col-9>h2 {font-size: 1.2em;text-transform: uppercase}
#content p {padding-bottom: 10px;}
#content p.lead {font-family: 'Montserrat',sans-serif; font-size: 1.25em; font-size: 1.25em; padding-bottom:0;}

#header  { background: url(../images/header.jpg) no-repeat center center; background-size: cover;
    min-height: 400px; clear: both; text-align: center; color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;  }
#header h1 {font-family: 'Lora', serif; font-size: 3.5em;   font-weight: 400;letter-spacing: 3px; border-bottom: 2px solid #fff; text-wrap: balance;}
#header h2 {font-family: 'Montserrat', sans-serif; color: #fff; font-size: 1.3em; font-weight: 300;
letter-spacing: 6px;}

#content, footer#footer {padding: 30px}

@media screen and (min-width: 769px) { 
		#content {padding: 30px 50px 50px 50px}
		#content h1 {margin-bottom: 1.2em;}
		}

  h2#choti, h2#impressum {padding-top: 20px;}

blockquote {padding: 0 3rem 1.5rem 3rem; font-size: 120%;;}

figure.col-4 {margin: 5px 20px 10px 5px; }
figure.pull-right {margin: 5px 15px 20px 30px ; padding: 0}
@media screen and (max-width: 540px) {
		figure.pull-right { clear: both; float: left !important; margin-left: 0;}
		figure+p   {clear: both; }	}
figure.pull-left {margin: 5px 30px 20px 0px ; padding: 0}
figure.pull-right img, figure.pull-left img {width: 100%; height: auto;}
figcaption {font-size: 80%}

@media screen and (max-width: 769px) { 
figure.col-2+div.col-8 {padding-left: 0;margin-top: -20px;}
h2#choti {padding-top: 0px;}

}

#alertbox {
margin: 5px 15px 20px 30px ;
padding: 25px 15px;
color:#fff;
background-color: #2e4900;
opacity: .6;
}

@media screen and (max-width: 768px) {
	#alertbox {margin: 5px 30px 20px 0px ;}
figure.col-4 {max-width: 300px !important; clear: none; float: left; }}


.hinweis {clear: both; font-size: 80%; margin-top: 50px; }

hr {border: 1px dotted  #bebfbd; clear: both; display: block; }
dl {width: 100%; }
@media screen and (min-width: 650px) {
dt, dd {display: block; float:left;  min-height: 30px;margin: 0; }
dt {clear: left; width: 62%;  }
dd {width: 15%;text-align: right;}
}
@media screen and (max-width: 650px) {
dt, dd {display: block; float:left;  min-height: 30px;margin: 0; }
dt {clear: left; width: 100%;  }
dd {width: 48%;text-align: left;}
dd+dt {display: none}
}

footer#footer  { background: url(../images/footer.jpg) no-repeat center center; background-size: cover;
    min-height: 30px; clear: both; text-align: center; color: #fff; text-align: center;}

footer#footer div a { padding: 10px 25px;color: #fff; }

/* FlexiHeader 2022 */

#header h1 {font-size: 3.5vw;  }
#header h2 {font-size: 1.3vw; }
@media screen and (max-width: 950px) { 	#header h2 {font-size: 2.4vw; }}
@media screen and (max-width: 768px) { 	#header  {min-height: 400px; } #header h1 {font-size: 5vw;  } 	#header h2 {font-size: 3vw; }}
@media screen and (max-width: 600px) { 	#header  {min-height: 350px; }}
@media screen and (max-width: 500px) { 	#header  {min-height: 300px; } 	#header h1 {font-size: 5vw;  } 	#header h2 {font-size: 3vw; } 	#content h1 {font-size: 2em;}}
@media screen and (max-width: 400px) {  	#header h2 {font-size: 3.5vw; } #content h1 {font-size: 1.8em;}}

/* 2025 Accordion-Element */

#accordion {padding: 20px 0}
#accordion details { border: 1px dotted silver;  margin-bottom: 1rem;  border-radius: 4px;}

#accordion summary {  padding: 1rem;  background-color: #a8ae9c;  cursor: pointer; }

#accordion details[open] summary { background-color: #ddd;}

/* Versteckt den Inhalt zunächst */
#accordion details div {  padding: 1rem;  overflow: hidden;  max-height: 0; /* Anfangs unsichtbar */
  opacity: 0;  transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Übergang für sanftes Öffnen */}

/* Zeigt den Inhalt beim Öffnen an */
#accordion details[open] div {  max-height: 100vh; /* Oder eine ausreichende Höhe, um den gesamten Inhalt zu zeigen */  opacity: 1;
}