/* CSS Document */
/* angelegt 2019-01-04 von Rainer Schrundner */
/* aufbauend auf Stylesheet in www.heinz.ch */
/* Ergaenzt u.a. mit Variablen */
/* Stand 2019-02-20 */


/******* Fonts *******/
/* keine Fonts laden */
/* @font-face {
	font-family: Arial, Helvetica, sans-serif; 
	font-style:normal;
}   */

/* Variablen deklarieren und setzten*/
:root {
  --meinBlau: #33325E;
  --meinGelb: #FFE41B;
  --meinHoverOrange: #FC0;
  --meinHellbeige: #FAFAFC;			/* Seitenhintergrund */
  --meinBoxengrauOben: #F6F6F6;		/* bei Boxen mit linear gradient */
  --meinBoxengrauUnten: #DDDDDD;		/* bei Boxen mit linear gradient */
  --meinBoxengrau: #EEEEEE;			/* bei Boxen ohne linear gradient */
  --meinLinkblau: #03C;
}


/******* Defaults überschreiben ********/
h1 {
position:relative;
display:block;
font-size:2em;
padding-top:15px;
line-height:0.95em;
font-weight:400;
letter-spacing:2px;
color:var(--meinGelb);
text-shadow: 0px 0px 8px #2B2B4E, 3px 3px 10px black, -3px 3px 10px black, -3px -3px 10px black, 3px -3px 10px black;
margin:25px 0 0 0;
}

h2 {
display:block;
font-size:1.2em;
line-height:1.0em;
margin-top:0.2em;
margin-bottom:0;
padding-bottom:0;
color:var(--meinBlau);
}

h3 {
display:block;
font-size:1.0em;
margin-bottom:0;
padding-bottom:0;
padding-left:50px;
color:var(--meinBlau);
}

h4 {
display:block;
font-size:1.0em;
margin-bottom:.2em;
color:var(--meinBlau);
}

h5 {
margin-bottom:.8em;
font-size:1em;
color:var(--meinBlau);
}

p {
font-size:1em;
}

li {
margin-top:0.2em;	
}

main {
	margin: 0;
	padding: 0;
}

article {
	margin: 0;
	padding: 1em;
}

body {
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.0em;
	line-height:1.1em;
	color:#2e2e2e;
	background-attachment:fixed;
	background-size:cover;
	background-image:linear-gradient(#71A0C9,#006);
	animation:fadein 1.5s;
}

footer{
	display: flex; 
	justify-content: space-around; 
	align-items: baseline; 
	flex-wrap: wrap; 
	margin-bottom: 5px;
}

hr {                  /* horizontale Linie wird über Footer verwendet */
border:none;
color:var(--meinBlau);
height:2px;
margin:5px 0 5px 0; 
padding:0;
}

img {
max-width:100%;
height:auto;
}

header {
background-color:var(--meinHellgrau);   /* nur als fallback; wird nicht angezogen, da es ein Bild gibt */
height:220px;
}

/******* Klassen und IDs ********/

#wrapper {
	max-width:1200px;
	margin:0 auto;
	background-color:var(--meinHellbeige);
	border-right:solid 1px #000;
	border-left:solid 1px #000;
	border-bottom:solid 1px #000;
}

 #logoContainer {
	display:flex;
	justify-content: center;
	position:absolute;
	/* top: 105px; */
  }

#idOfenlogo {
	position:absolute;
	top:-8px;
	left:15px;
	width:77px;
	height:200px;
	/* z-index:1; */
}


#idSchrundnerTop {
	position:relative;
	top:10px;;
	font-size:4.6em;
	line-height:1.0em;
	font-weight:700;
	letter-spacing:1px;
	color:var(--meinBlau);
	text-align: center;
	text-shadow: 3px 3px 12px white, -3px 3px 12px white, -3px -3px 12px white, 3px -3px 12px white;
	margin:0; 
	padding:0;
	text-decoration:none;
}

@keyframes fadein { from {opacity:0} to {opacity:1} }

#myBtn {
	position:fixed;
	bottom:30px;
	right:30px;
	z-index:99;
	font-size:18px;
	border:none;
	outline:none;
	background-color:var(--meinGelb);
	color:var(--meinBlau);
	cursor:pointer;
	padding:15px;
	border-radius:4px;
}

#myBtn:hover {
	background-color:#555;
}

.hovertitle { 
overflow:hidden;
position:relative;
text-align:center;
width:100%;
background-image:url(/imgRes/header_see_max_1200_220_hell_gespiegelt_Q90.jpg);
}
@media screen and (max-width: 451px) {
.hovertitle {
	background-image:url(/imgRes/header_see_max_451_220_hell_gespiegelt_Q90.jpg)
	} 
.footerlink {
	margin: 20px;
	}
}
@media screen and (max-width: 399px) {
.hovertitle {
	background-image:url(/imgRes/header_see_max_399_220_hell_gespiegelt_Q90.jpg)
	} 
.footerlink {
	margin: 20px;
	}
}

.lightbox {           /* noch unbenutzt, wird aber noch gebraucht */
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
cursor:pointer;
background:rgba(0,0,0,.8);
}

.lightbox_table {       /* noch unbenutzt, wird aber noch gebraucht */
height:100%;
margin-left: auto;
margin-right: auto;
text-align:center;
transform:rotate(-10deg);
}

.lightbox_table_cell {       /* noch unbenutzt, wird aber noch gebraucht */
vertical-align:middle;
}

a:link {
color:var(--meinLinkblau);
text-decoration:none;
}

a:visited {
color:var(--meinLinkblau);
text-decoration:none;
}

a:hover {
color:var(--meinLinkblau);
text-decoration:underline;
}

a:active {
color:var(--meinLinkblau);
text-decoration:none;
}

.classSprache {
	position:absolute;
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items: center;
	top:40px;
	left:1020px;
	width:140px;
	padding:12px 8px 12px 8px;
	background: radial-gradient(var(--meinGelb) 10%, rgb(0,0,0,0) 80%, rgb(0,0,0,0) 10%);
}

.classSprache:hover {
	background: radial-gradient(var(--meinGelb) 20%, rgb(0,0,0,0) 70%, rgb(0,0,0,0) 10%);;
	font-size:1.2em;
	transition:1.5s;
}

#idFahneFranz {
	display:flex;
	flex-direction:row;
}
#idFahneBlau {
	background-color:blue;
	height:27px;
	width:14px;
	margin:0;
	padding:0;
}
#idFahneWeiss {
	background-color:white;
	height:27px;
	width:13px;
	margin:0;
	padding:0;
}
#idFahneRot {
	background-color:red;
	height:27px;
	width:14px;
	margin:0;
	padding:0;
}
#idFahneDeutsch {
	display:flex;
	flex-direction:column;
}
#idFahneSchwarz {
	background-color:black;
	height:9px;
	width:36px;
	margin:0;
	padding:0;
}
#idFahneDeRot {
	background-color:red;
	height:9px;
	width:36px;
	margin:0;
	padding:0;
}
#idFahneGold {
	background-color:gold;
	height:9px;
	width:36px;
	margin:0;
	padding:0;
}


.classSprache a {
display:block;
font-size:1em;
font-weight:bold;
text-align:center;
text-decoration:none;
color:var(--meinBlau);
/* text-shadow: 3px 3px 20px var(--meinGelb), -3px 3px 20px var(--meinGelb), -10px -10px 20px var(--meinGelb), 3px -3px 20px var(--meinGelb); */
}

.classMenu {
width:100%;
font-size:1em;
background:var(--meinGelb);
overflow:hidden;
display:flex;
align-items:center;
justify-content:space-around;
}

.classMenu a {
display:block;
font-size:1em;
font-weight:bold;
float:left;
text-align:center;
text-decoration:none;
color:var(--meinBlau);
padding:13px 10px 13px 10px;
min-width: 150px;
}

.classMenu a:hover {
background-color:var(--meinHoverOrange);
font-size:1.2em;
transition:1.5s;
}

.classMenu a.mobile {
display:none;
}

input[type=checkbox]:checked~.classMenu {
display:block;
}

#idLabelMobMenu {
	display: none;
}
#idInputMobMenu {
  display: none;
}

@media print {
header {
display:none;
}

img {
display:none;
}

footer {
display:none;
}
/*
printfooter {
display:inline;
}
 */
.classMenu {
display:none;
}

body {
font-size:12px;
}

#wrapper {
max-width:1200px;
margin:0 auto;
border-right:0 #000;
border-left:0 #000;
border-bottom:0 #000;
}
}

/* alles <=1200 px bekommt ein Smartphone-Layout */
@media screen and (max-width: 1200px) {

.classMenu {
display:none;
} 

.classMenu a {
display:block;
float:none;
margin-left: 10px;
padding:8px 0 8px 0;
text-align:left;
border-right:none;
}

.classMenu a::before {
content: " - "
}

.classMenu:last-of-type {
color: #0C6;
}

.classMenu a.desktop {
display:none;
}

.classMenu a.mobile {
display:block;
}

.desktop {
display:none;
}

#idLabelMobMenu {
	display: flex;
	color:var(--meinBlau);
	font-size:1.4em;
	font-weight: bold;
	padding: 12px;
	padding-left:60px;
	background-color:var(--meinGelb);
	background-image: url(../imgRes/hamburger_33325E.png);
	background-position: left center;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

#idLabelMobMenu:hover {
 font-size:2em;
 cursor:pointer;
 letter-spacing:2px;
 transition:1.5s;
}

#idInputMobMenu:checked + .mobile {
  display: block;
}

#main {
margin-left:70px;
}


}

@media screen and (max-width:768px) {
/* nichts definiert; alles unter 1200px hat selbes Layout */
}

@media screen and (max-width:450px) {
	#idSchrundnerTop {
	font-size:4em;
	line-height:1.25em;
	font-weight:bold;
	letter-spacing:1px;
	text-align: center;
	margin:0; 
 	text-shadow: 3px 3px 10px white, -3px 3px 10px white, -3px -3px 10px white, 3px -3px 10px white; 
 	}
}
@media screen and (max-width:360px) {
	#idSchrundnerTop {
	font-size:3.2em;
	line-height:1.25em;
	font-weight:600;
	letter-spacing: 0px;
	text-align: center;
	margin:0; 
	text-shadow: 3px 3px 10px white, -3px 3px 10px white, -3px -3px 10px white, 3px -3px 10px white;
  	}
}