/*color variables*/
:root {
  --red_dark: #990000;
  --red: #ff0000;
  --maroon: #330000;
  --black: rgba(0,0,0,0.2);
  --white: rgba(255,255,255,0.55);
  --gray: #333;
}


.overlay {
background-color: rgba(255,255,255, 0.85);
}
	
@media screen and (orientation:portrait){
	.overlay {background-color: rgba(250,250,250, 0.95);}
}


/*schrift und links*/
h1 {color: #888!important;}
h2 {color: var(--red);}
h3 {color: var(--red);}
h4 {color: var(--red);}

p, em, td, small {color: var(--gray)!important;}
p2 {color: var(--gray)}

a.text:link {
  color: var(--red);  
}

a.text:visited { 
  color: var(--red_dark);
  border-bottom: none;
}

a.text:hover {
  color: var(--red_dark);
  border-bottom: 2px dotted var(--red_dark); 
}

a.text::focus{ 
  color: var(--red_dark);
}

a.text:active {
  color: var(--red_dark);
}

::-moz-selection {
  color: #fff;
  background: var(--red_dark);
}

::selection {
  color: #fff;
  background: #ff0000;
}

figcaption {
  color: var(--gray);
}
	
.red {
	color: rgba(0,0,0,0.5)!important;
	font-weight: bold;
} 

/*topnav*/
.topnav, .subnav{
  background-color: #fff;
}

.topnav a, .subnav a {
  color: var(--red);
}

.topnav a:hover, .topnav a.active {
color: gray;
}
  
.topnav .navicon {
  color: var(--red);
}

/*seiten-teile*/

.subcontent {
  max-width:900px;
  margin: 0 auto;
  margin-top: -1em;
  padding-bottom: 3em;
}

hr {
  border-top: 4px solid rgba(0,0,0,0.2);
}

footer {
  background-color: #fff;
}

footer p2, footer h4, footer p {color: gray!important;}

footer hr {border-top: 4px solid rgba(0,0,0,0.2);
}

/*buttons*/

.close {
  color: #e60000!important;
}

.btn_show_en, .btn_show_de {
	color:#e60000; 
}


.formular, #haftung, #exclusion {background-color: #fff;}

label, form p, #haftung p, #haftung h4, #exclusion p {color: var(--gray);}
#haftung h4, #exclusion h4 {color: var(--red_dark); line-height: 1.75;
margin-bottom: .2em;}
 
input {
  background-color: transparent;
  border: 1px solid var(--black);
  color: var(--red_dark);
line-height: 1.75;
margin: .4em 0;
}

input[text]:hover {
  border: 1px solid #e60000;
}

input[type="radio"] {
 content: url(../assets/rolle_fade.png)!important;
}

input[type="radio"]:checked {
	 content: url(../assets/rolle_baden.png)!important;
}

input[type="checkbox"] {
 content: url(../assets/rolle_fade.png)!important;
}	

input[type="checkbox"]:checked {
 content: url(../assets/rolle_baden.png)!important;
}

.fehler::after {content:'*';font-style: italic; color: var(--red);}