/*tablet*/
@media screen and (min-width: 768) and (max-width: 1023px) {

}



html {
height:100.5%; 
font-size: 62.5%;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('opensans.woff2') format('woff2'),
         url('opensans.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a:link {}
a:visited { }
a:hover {}
a:active {}


* {
font-family: "Calibri",sans-serif;
/*font-family: Verdana, sans-serif;*/
/*height:60%; */  /* Mindesthöhe für den IE */
	margin: 0px; border: 0px;  padding: 0px;
	box-sizing: border-box;
	list-style-type: none;
	font-family: 'open_sansregular';
font-weight: normal;
}

h1 {
margin-top:0px;
font-weight: normal;
/*background: #000000;*/
text-align:left;
box-shadow: 2px 2px 5x #666666;
text-shadow: 1px 1px 1px #666666; /*3D effekt*/ 
border-bottom: 1px dashed #004A7F;
/*border-radius:20%/50%;*/ /*länge bezieht de seite */
padding-bottom: 0.2em;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Century Gothic", sans-serif;
color: #004A7F;
margin: 0em 0em 1em 0em;
}

h1 {font-size: 1.6em;}
h2 {font-size: 1.4em;}
h3 {
font-size: 1.2em;
margin:0px;
color:red;
text-decoration: none;
text-align:center;
} 

h4 {font-size: 1.0em;}

h2 {
font-weight: normal;
/*color:white;*/
text-align:left;
box-shadow: 2px 2px 5x #666666;
text-shadow: 1px 1px 1px #666666; /*3D effekt*/ 
border-radius:20px/50%; /*länge bezieht de seite */
/*background: #005000;*/	
}

body {
padding:0;
margin:0;
background: #fc9709 url("hg.jpg") fixed; 
background:#FFFFFF;
background:#f0f0f0;
/*font-size: 0.9em; /*ohne html % font size*/
font-size: 1.2em; 
line-height: 1.8em;
}

img {
display:block;/*so kann zentriert werden*/
margin:auto; 
}

section img {
width:70%;
}

section article img {
width:50%;
}

nav {
padding-top:10px;
padding-bottom:8px;
        position:sticky;
	top:0pX;
	backdrop-filter:blur(8px); /*filter hautweichzeichnen*/ 
	text-align:center;
}


nav ul, aside ul { /*aside nur indirekten Zusammenhang */
list-style:none;	
margin:0px;
padding:0px;
}

nav li  {
	display:inline;
	text-indent:1,2%;
	list-style-type: none; 
	text-decoration: none;
	text-align:left;
	margin-left:0.2em;
	margin-right:0.2em;
}

nav a {
	color:#000000;
}

nav a:hover,
#absichern li.navabsichern a,
#begriff li.navbegriff a {
color: #FFFFFF;
background:#000000;
}


main { 
color:#000000;
text-align:left;
/*background: #ffffcc;*/
margin: 0px auto; /*oben/unten links/rechts auto*/
padding-top:10px;

}



/*Computer nur sein soll breite sachen - https://kinsta.com/de/blog/responsiven-webdesign/*/
@media screen and (min-width: 1024px) {


body {
font-size: 1.5em; 
}

main {
max-width:600px;
max-width:50%;
/*min-heigth:700px;*/
}



nav, footer {
max-width:50%;
margin: 0px auto; /*oben/unten links/rechts auto*/
}

} /*Ende von Computereinstellungen*/




@media screen and (max-width: 768px) {

span.navhover-box {
    border: 1px solid #fc6;
    color: #000;
    display: none; /* Element standardmäßig nicht darstellen */
    position: absolute;
    text-decoration: none;
    top: 40px;
  }

a:hover span.navhover-box {
    display: block; /* Beim Überfahren des Links einblenden */
}

span.hover-box {
    border: 1px solid #fc6;
    color: #00000;
    display: none; /* Element standardmäßig nicht darstellen */
    position: absolute;
    text-decoration: none;
    top: 120px;
    top: 20px;
    background:green;
    text-align:center;
    padding:3px;
    padding-left:8px;
    padding-right:8px;
}

ul {
padding-left:10px;
padding-right:10px;
}

a:hover span.hover-box {
    display: block; /* Beim Überfahren des Links einblenden */
}



ul:hover span.hover-box {
    display: block; /* Beim Überfahren des Links einblenden */
    display: grid;
}

img  { 
width:100%;
}

.ausblenden {
    display: none; /* Element standardmäßig nicht darstellen */
}

	

} /* zu max- 768px */





























textarea { 
vertical-align: top;
vertical-align: middle;
}


input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}



form {
text-align:top;
}


input[type=text]:focus {
  background-color: lightblue;
}

textarea:focus {
  background-color: lightblue;

}


.rechts {
float:right;
padding-right:1%;
}


.umrandung {
max-width:600px;
margin: 0px auto; /*oben/unten /rechts auto*/
padding: 1.5% 1.5%;
box-shadow: 2px 2px 5px #66666; /*vertikaler versatz horizontaler versatz 2pixel nach rechts 2pixel nach unten versetz*/ 
}




figure {
text-align:center;
width:50%;
margin: 0px auto
}

figcaption {
font-size:1em;
}

section {
	max-width:1200px;
	padding-left:3%;
	padding-right:3%;
}


article {
	flex: 200px; # https://developer.mozilla.org/de/docs/Learn/CSS/CSS_layout/Flexbox
	flex: 1; # alle gleich viel Platz 
	flex: 1 200px;
}

.links {
display:flex;
}

.links a {			/*https://www.w3.org/TR/css-flexbox-1/*/
align-items: center;
justify-content: space-around;
flex: 1 200px;
padding:10px;
}



ul {
margin-bottom:0px;
}


#li für Aufstellungsabsätze {
background:#eeeeee url("aufzählungspunkt");
background-size:3%; /*da paddig-left 6%*/
background-repeat: no-repeat
background-position: 1.5% center; /* 3%/2 center vertikale mitte */ 
box-shadow: 2px 2px 5px #6666666;
padding-left:6%;
font-size:large;
margin-top:15px;
}


.mitte {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /*vertikal*/
}


.mittig{
display:block;
margin: 0px auto; /*oben/unten links/rechts auto*/
width:500px;
box-shadow: 2px 2px 5px #66666; /*vertikaler versatz horizontaler versatz 2pixel nach rechts 2pixel nach unten versetz*/
}	



.mitte li { 
		white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
/* https://www.mediaevent.de/css/text-overflow.html*/



article {
background: #ffffff;
}

.block{
display:block;
margin: 0px auto; /*oben/unten links/rechts auto*/
padding-left: 0.5%;
padding-right:0.5%;
box-shadow: 2px 2px 5px #66666; /*vertikaler versatz horizontaler versatz 2pixel nach rechts 2pixel nach unten versetz*/
}	


.blocks{
display:block;
margin: 0px auto; /*oben/unten links/rechts auto*/
padding-left: 1%;
padding-right:1%;
box-shadow: 2px 2px 5px #66666; /*vertikaler versatz horizontaler versatz 2pixel nach rechts 2pixel nach unten versetz*/
}	

article {
background: #ffffff;
}	

.padding-links-rechts {
padding-left:20%;
padding-right:20%
}


button {
    font-size: 18px;
    line-height: 1.5;
    width: 15%;
    }


.inner:hover {
background-image: url(images/smart.jpg);
background-repeat: no-repeat;
background-size: 100%;
max-width:600px;
height:400px;

}

.umrandung {
	display:table;	
	margin-left:auto;
	margin-right:auto;
}


.umrandung img {
width:80%;
}

sperre.fotoshow {
text-align:center;
padding-right:2em;
float:left;
}











#wrapper {
max-width: 750px;
	margin: 0px auto;
	text-align:center;
/*border:1px solid #000000;*/

}	




.rechts {
text-align:right;
}



.zentriert {
text-align:center;
}




#menu {
text-align:center;
float:right;
margin-left:0.5em;
list-style-type: none;
margin-right:0.8px;
background:#f0fff0;
aborder: 3px dashed #004A7F;
}


#content {
text-align:left;
padding-top:30px;
padding-top:50px;
min-height:450px;
margin-left: 25px;
margin-right: 25px;
	
}

#content a, p {
color:#000000;
}


.themen {
float:left;
width:50%;
}

.themend{
width:45%;
}











/*sollte passe*/













.umrandung {
max-width:600px;
margin: 0px auto; /*oben/unten /rechts auto*/
padding: 1.5% 1.5%;
box-shadow: 2px 2px 5px #66666; /*vertikaler versatz horizontaler versatz 2pixel nach rechts 2pixel nach unten versetz*/ 
}


section a{
width: 20px; 
padding:10px;
} 

/* section img {
	width: 70%;
	object-fit:cover; 
}*/



form {
text-align:top;
}

textarea { 
vertical-align: top;
vertical-align: middle;
}



input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}


input[type=text]:focus {
  background-color: lightblue;
}

textarea:focus {
  background-color: lightblue;

}

label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}	

/*section img {
height: 257px;
width: 285px;
}*/





footer {
margin-top:20px;
font-family: "Century Gothic", sans-serif;
color:#000000;
border-bottom: 1px dashed #004A7F;
background: #ff55ff;
text-align:center;
}


footer li {
display:inline;
list-style-type: none; 
text-decoration: none;
line-height:2em;
}


footer ul ul li {

display:block;
list-style-type: none; 
text-decoration: none;
text-align:left;
}



footer ul ul {
padding-top: 3px;
padding-left:15px;
float:left;
}


footer ul li {

display:block;
}