/* style - lpz-vogtl - 2021 Jan 20 15 Jo. (incl global) */
:root{
  --html_back_color: #f3f3f3;
	--nav_link_color: #eee;
	--nav_back_color: #ffc;
	--head_back_color: #1f7e74;  /* #060 - geändert, damit weniger Farben */
	--navi_color: #323232;
	--link_color: #1f7e74;
  --link_back_color: #fefefe;
	--hxx_color: darkred;
	--hover_color: #cd5038; /* Hover Farbe für Textlinks */
	--text_color: #323232; /* Allgemeine Textfarbe */
	--text_default_color: #000; /* Default Textfarbe */
}
/* Resetten  *{margin:0;padding:0;} */
*,*:before,*:after{  box-sizing: content-box; /* Boxmodell */
}                  /* alternativ:  box-sizing:border-box;*/
html{ /* Alternativ verw. rem: RootEM - bezieht sich auf in Body def Schriftgröße.
      Fontsize 100.1% wählen zur EM Normalisierung im IE8/9 */
  font-size:100.01%;
  color:#000; /*primäre Default Textfarbe*/	
  color: var(--text_default_color, #000);
  text-align:left;  /* Standard textausrichtung*/
  direction:ltr;  /* Lesefluss festlegen*/
  /* ggf. silbentrennung aktivieren: autom. Silbentrennung in modernen Browsern */
      /*-ms-hyphens:auto; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto;*/
  background:#f3f3f3;/* Hintergrundfarbe: anpassen falls Text nicht lesbar */
  background: var(--html_back_color, #f3f3f3);
}
body{ color:inherit; /* Abstände ggf. entfernen:  margin:0; */
  font-family: Verdana, Geneva, sans-serif;/*Schriftfamilie restliche Elemente */
  color: #323232; 
  color: var(--text_color, #323232);
  max-width: 1050px;
} 
h1,h2, h3{ /* Individuelle Schriftdefinitionen Überschriften */
  font-family: "Courier New", Courier, monospace;
  color:#000; /*primäre Default Textfarbe*/	
  color: var(--text_default_color, #000);
}
h1{font-size:160%; margin: 0.55em 6.8em;
  color:#eee;
   color: var(--nav_link_color, #eee);
   text-align: left;
} /* Addit. Hx defins.: ggf. Abstände neu def + Textfarbe */

h2{font-size:150%; margin: 0.5em 0.6em;}
h3{font-size:130%; margin: 0.2em 0em}
p{font-size:100%;}
h2, h3 { color: darkred;
  color: var(--hxx_color, darkred);
}
hr{margin: 1em 0;}
ul > li{ margin-top:0.2em; }

/* Interaktive Elemente */
a{ color: #2da397; 
   color: var(--link_color, #2da397);
}
footer a{   color:#eee;
  color: var(--nav_link_color, #eee);
}
a:hover,a:focus{  text-decoration:none;
  color: #cd5038;
  color: var(--hover_color, #cd5038);
  background:#fefefe; 
  background: var( --link_back_color, #fefefe);
}

input,select,textarea{background:#fefefe;
  background: var( --link_back_color, #fefefe);
}
input:hover,select:hover,textarea:hover,
input:focus,select:focus,textarea:focus{background:#ffc;
  background: var(--nav_back_color, #ffc);
}
iframe,video{  background-color:#B2DFDB;}
/* Unterlänge verhindern , Hintergrundfarbe die Leeraum auffüllt wenn Bild nicht geladen werden kann (width und height attribute müssen befüllt und gesetzt sein!)*/
img{  display:block;  background:#ccc; margin: 8px 2px;}
a img{  border:0;  outline:0;}  /* Rahmen um verlinkte Bilder entfernen*/	

/* More special Settings - Jo. */
.i_small {font-size:80%}
.f_big{font-size: 1.6em;}

.back{
  display:table-cell;
  padding:5px; margin:0 15px;
  font-size:110%;
  background:#ffc
}

aside, article, footer, section, header {  /* ohne div */
  border:2px solid #1f7e74;
  margin:5px; padding:10px;
}
[class*="nofram"] {border: 0;}

header{
  background-color: #1f7e74;
  background-color: var(--head_back_color, #1f7e74);
  text-align:center;
  margin-bottom: 0;
  padding: 0px 10px;
}
header img{margin: 0.9em 0;}

body>header{ 
position:relative;
}

.infobox{
  /* float:right; */
  /* display:block; */
  width:25%;
  margin: 2% 0% 2% 1%;
  padding:2% 1% 2% 1%;
  background: #cccccc;
  font-size: 1em;
  border: 2px solid #cd5038; 
  border: 2px solid var(--hover_color, #cd5038); 
  box-shadow: 0px 0px 2px 2px rgba(177, 57, 57, 0.5);
}
.infobox:before{
  content: url("../img/die-info.svg") ;
  width: 3em;
  margin: 0.2em 0.5em 0.2em 0;
  float:left;
}
.welcomebox{
  /* float:right; */
  /* display:block; */
  width:64%;
  margin: 2% 1% 2% 0%;
  padding:1% 2% 2% 2%;
  background: #fefefe;
  font-size: 1em;
  border: 2px solid #1f7e74; 
  border: 2px solid var(--head_back_color, #1f7e74); 
  box-shadow: 0px 0px 2px 2px rgba(177, 57, 57, 0.5);
}
#img_index{margin-top: 3em;}
#div_welc details{margin: 0.3em 0; font-weight: bold; line-height:160%; }
#div_welc span, #div_welc ul{font-weight: normal;
  line-height: 1em; margin-top: 0;
}

/* Joe's navi style */

nav{ margin:0 5px 5px 5px;  padding:0px;}
nav ul{   list-style:none;   padding:0;   margin:0; }
 nav li{
   float:left;
   padding:0 2px; margin-top:0;
   background:#ffc;
   background: var(--nav_back_color, #ffc);
   font-size:100%; min-width: 5.5em;
   list-style: none;
   border: 2px solid #cd5038;
   border-radius: 0 0 10px 10px;
}
nav a{ text-decoration:none;
   display:block;
   padding: 0.6em 1em;
   font-size:110%;
}
nav a:hover, nav a:focus{  text-decoration: underline dotted;
  background: unset;
 }
 nav li li{   float:none;   padding:2px 0; }
 nav ul:after{   content:"";   display:table;   clear:both; }
 
 .active:after{
	content:"";
	border-bottom: 8px solid #205a54;
	border-bottom: 8px solid var(--link_color, #205a54);
	display:block;
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	top: -2px;
}
/* kontakt + impressum */
fieldset{
	display: inline;
	margin: 10px 0;
	border:2px solid #1f7e74;
	border:2px solid var(--head_back_color, #1f7e74);
	width: 94%;
	border-radius: 8px;
}
.kontaktinhalt{
	margin: 10px 0;
	width: 80%;
}
.required > label:after{
	content: " " "*";
}
label{
	display: inline-block;
	min-width: 130px;
}
[type~=radio] + label {min-width: 60px;}

button{ font-size: 1.3em;}

.impressum{font-size: 80%;}

/* verstecken open+close menu */
nav li ul{   position:absolute;   left:-9999em; }
nav li:hover ul{   left:auto; }
.open,.close{ display:none; }

@media screen and (max-width:760px){
  .infobox, .welcomebox{ width: 93%;}
  .infobox #getraenk{width:250px;}

  #textarea{ width: 100% ;} 
}

@media screen and (max-width:600px){
  nav li{
    float:none;
    /* clear:both;*/
    padding:2px;
  }
  nav li ul{     position:static;   }
  .open{     display:block; font-size: 130%; }
  nav > #open {text-decoration: underline;}
  nav > ul{ display:none; }

  #open:target ~ ul{     display:block;   }
  #open:target~.close{     display:block;   }
  #open:target{display:none;}

  .active:after{ margin-left: 15px;}
}  

footer { 
   border:none;
   border-top:1px solid grey;
   background-color:#060;
   background-color: var(--head_back_color, #060);
   text-align:center;
   color:#eee;
   color: var(--nav_link_color, #eee);
}