*, *:before, *:after {box-sizing:border-box;}

@font-face{font-family:'lobster';src:url('lobster.woff2') format('truetype');}

html, body {font-family:lobster,Verdana,sans-serif; font-size:100%; margin:0;padding:0;}
body {background: url("bg_city1.jpg"); background-size:cover;}

h1 {font-size:110%;}
h2 {font-size:105%;}
header {max-width:99%; min-height:1rem;padding:2px;}
nav {min-height:1px; text-align:right; right:35px;top:30px;position:fixed;}
.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px; font-weight:900; color: #fff;text-shadow: #111 2px 2px 4px;}
.drehen:hover {transform:rotate(900deg);}
label { display:inline-block;color:#fff; background:#158; padding:.2rem .5rem; margin:.2rem 1rem;}
/* menu unsichtbar */
#menu {width:99vw; text-align:right; margin-top:-10rem;margin-left:8rem; visibility:hidden;transition:all 1s;opacity:0;}
#menu ul {background:#333;margin:0}
#menu li {list-style-type:none;width:70px; margin:.1rem; padding:0 2px;border:#fff 1px solid; border-radius:9px 3px;}
#menu li a {display:block;text-align:left;text-decoration:none; padding:1px; background:none; font-weight:400; color:#fff; font-size:100%}
#menu li a:hover { background: rgba(30,200,30,.7);}    

ul { margin:6px;padding:0}

input[type=checkbox]{display:none;}   /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:4rem;margin-left:0;}      /* schaltet menu ein */

#logo {max-width:25%; position:absolute; left:20px; top:20px;position:fixed}
.schatten {color:#f33; text-shadow: -1px -1px 1px hsl(200,10%,95%), -2px -2px 1px hsl(220,50%,85%), -3px -3px 1px hsl(0,0%,40%), -4px -4px 1px hsl(0,0%,50%)}

article {position:absolute;width:99%; z-index:-1; padding:20px; background:#999;background:linear-gradient(to right, rgba(185,188,189,.5) 0%, rgba(232,238,240,.5) 50%, rgba(185,188,189,1) 100%);}
img {max-width:80%; height:auto}
.kreis{border-radius:50%}


@media (min-width: 576px) {    /* - - - - ab 576 pixel - - - - */
#menu li a {width:98%;padding:2px;}  
}
     
@media (max-width: 750px) {
    #bg_video { display:none; }
    body { background: url("bg_city1.jpg") no-repeat; background-size:cover; } 
}  

@media (min-width: 1024px) and (orientation: landscape) {     /* = ab 1024 pixel   */
nav {right:35px;}
#menu {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu ul {background:transparent}
#menu li {width:100px;background:#333;}
#menu li a {width:98%; padding:4px 12px;}
label{display:none;}
input[type=checkbox]:checked ~ #menu {margin-top:0; margin-left:0;}
}

nav ul { position:relative;  margin:-16px;}	
nav ul li {	display:inline-block; text-align:left;}
nav a {	display:block; padding:0 10px; color:#fff; font-size:20px; line-height:30px; text-decoration:none;}
nav a:hover {	background-color: #000; }    
/* Hide Dropdowns by Default */
nav ul ul {display: none;	position:absolute; top:40px;  margin:0 0 0 -40px;padding:0;}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul { display:inherit; }

nav ul ul li {
	max-width:140px;
	float:none;
	display:list-item;
	position: relative;
  right:1px;
  top:8px;
  width:110px;
}

/* Second, Third and more Tiers	*/
li > a:after { content: ' ↓'; }    /* Dropdown Symbol */
li > a:only-child:after { content: ''; }  
h3 {padding:5px;margin:0}
.breit99{max-width:98%;padding:5px;text-align:center}    
.container>*{flex:1 1 280px} 
.container  {display:flex;flex-wrap:wrap;padding-right:10px}
.container  { display: table;  border-spacing: 16px; width: 98%;}
.container img{width:50%;float:left;padding:5px}

.spalte_l, .spalte_r{padding:14px;margin:10px 0 0 10px;min-height:120px;color:#000;border: solid #eee 2px;border-radius:10px}

.center {text-align:center;}

h1, h4 {margin:2px}
h3 {margin:6px;padding:0;float:left;}
.spalten {columns:2; column-rule:1px solid red; column-fill:auto;}
.center {text-align:center;}  
img {max-width:50%; height:auto; margin:6px;}

.col { display:table-cell; box-sizing:border-box; padding:0.5em; vertical-align:top;}
.col:nth-child(1) { width: 48%; background: #c9fdee;}
.col:nth-child(2) { width: 48%; background: #e9cbfd;}


h1,h2,h3,h4,ul {padding:2px;margin:2px}

.center {text-align:center;}