/** Allgemeine Stile **/

body { margin: 0; font: 1em/1.5 Arial, sans-serif; background: #efefef }
img { width: 100%; height: auto; border=0}
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
p, li { color: #777; }

input#hamburg {display:none}

@font-face {
    font-family:'Arial, Helvetica, sans-serif';
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family:'Arial, Helvetica, sans-serif';
    font-style: normal;
    font-weight: 300;
}

/** reframe ist der Abstandhalter gegen den linken und rechten Rand des Viewports oder Browserfensters
    Die Klasse reframe unterhalb eines Layoutbereichs wie carousel oder footer macht es einfacher, 
    einen Layoutbereich mit Hintergrundfarbe über die volle Breite des Monitors zu setzen
    und gleichzeitig den Inhalt auf Abstand vom linken und rechten Rand zu halten. **/

.reframe { 
   padding-left: 10px; 
   padding-right: 10px;
   padding-bottom: 0px;
   text-align: center;
}
.center {
  text-align: center;
}
.inner {
	text-align: justify;	
}

/** Buttons **/
.btn { padding: 0.5em;  line-height: 1; display: inline; border-radius: 4px;}
.light { border: 1px solid white; color: white; }

/** Banner ist der obere Bereich der Seiten **/
#banner {padding-top: 2em;  padding-bottom: 2em;}
#banner .site-title { text-align: center; margin-top: 2vh; margin-bottom: 0.5em; font-size: 1.6em}
#banner .slogan { text-align: center; font-size: 1.2em; max-width: 480px; margin-left: auto; margin-right: auto; }

.landing-page #banner {background: #8B0000; }
.landing-page #banner .site-title { color: #eee; }
.landing-page #banner .slogan { color: #eee; }

/** Kleiner einfacher Textbereich unter dem Banner **/
.teaser {
   font-size: 1.0em; 
   background: #efefef; 
   padding-top: 0em; 
   padding-bottom: 1em; 
   text-align: center;  
 }
.teaser p { margin-top: 0; max-width: 780px; margin-right: auto; margin-left: auto }

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #00f;
   animation: fullexpand 25s ease-out infinite;
}

/** Carousell ist eine Zeile mit je zwei Elementen  – auf kleinen Monitoren 4 Zeilen
    Kann auf jeder Seite eingesetzt werden und eine zusätzliche Navigation bieten **/
.carousell { background: white }
.flex-2-4 { max-width: 600px; margin-left: auto; margin-right: auto; padding-top: 2em; padding-bottom: 2em; }
.lineart {width: 120px; height: 120px; margin: 1ex auto; } 

/** Der Hauptinhalt der Seite **/
main { background: white; padding-top: 0em; padding-bottom: 2em; }
.landing-page main { background: #efefef; }

.content article {
	/** Linear Gradient, damit der weiße Hintergrund nicht unter den abgerundeten Ecken der Titelbilder erscheint.**/
	background-image: linear-gradient(to bottom, transparent 0%, transparent 20%, white 20%);
	max-width: 380px;
	margin-left: auto; margin-right: auto; margin-bottom: 2em; 
	border-bottom-left-radius: 12px; 
	border-bottom-right-radius: 12px;
}

#sidebar img,
main img { 
	border-top-left-radius: 12px; 
	border-top-right-radius: 12px;
/**	filter: grayscale(100%); **/
}

.content article h3 { 
	text-align: center; 
	color: #666; 
	padding-left: 10px;
	padding-right: 10px;
}

.content article .post {
	text-align: justify;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 1em;
}

#sidebar { background: white; padding-top: 2em; padding-bottom: 2em; }
#sidebar .widget { max-width: 480px; margin-left: auto; margin-right: auto; }
#stripe { height: 10vh; width: 100%; background: crimson; padding-top: 2em; padding-bottom: 2em; }
#stripe p { text-align: center; color: white; font-size: 1.2em; }

.mousebutton { width: 40px; margin-left: auto; margin-right: auto; padding-top: 2em; padding-bottom: 2em; }

footer { background: #8B0000; padding-top: 2em; padding-bottom: 2em; color: white; }

.svghide { display: none; }




/**  Bis hier hin waren alle Stile für alle Monitorgrößen. Jetzt kommen die Breakpoints
     Der erst Breakpoint dient den kleinen Monitoren und enthält den animierten Hamburger **/
@media only screen and (max-width: 599px) {

	input#hamburg { display: none; }
	label.hamburg {
		display: block;
		background: #555;
		width: 75px; 
		height: 50px; 
		position: relative;
		margin-top: 1em; 
		margin-left: auto; 
		margin-right: auto;
		margin-bottom: 1em;
		border-radius: 4px; 
		transition: border-radius .5s;
	}
	
	label.hamburg .line { 
		position: absolute; 
		height: 4px; 
		background: #fff;
		border-radius: 2px;
		width: 55px; 
		display: block; 
		left:10px;
		transition: 0.5s; 
		transform-origin: center; 
	}

	label.hamburg .line:nth-child(1) { top: 12px; }
	label.hamburg .line:nth-child(2) { top: 24px; }
	label.hamburg .line:nth-child(3) { top: 36px; }

	#hamburg:checked + .hamburg .line:nth-child(1) {
		transform: translateY(12px) rotate(-45deg);
	}

	#hamburg:checked + .hamburg .line:nth-child(2) {
		opacity:0;
	}

	#hamburg:checked + .hamburg .line:nth-child(3) {
		transform: translateY(-12px) rotate(45deg);
	}
	
	#hamburg:checked + .hamburg { background: #333; }

	#hamburg:checked + .hamburg  + nav.topmenu { height: auto; max-height: 600px; background: crimson; }

	nav.topmenu { height: auto; max-height:0; overflow: hidden; background: white; transition: all 0.5s; }
	nav.topmenu ul { padding-left: 1em;}
	nav.topmenu ul li { list-style-type: none; color: white; border-bottom: 1px dotted white; padding-top: 1ex; padding-bottom: 1ex;  }
	nav.topmenu ul li:last-child{border-bottom: 0;}

	nav.topmenu ul li a { color: white; text-decoration: none; display: block }

	nav.topmenu ul .hassub:before { content: " ▶ "; float: right; padding-right: 1em }


}

/** Jetzt kommen die Breakpoints für größere Monitore **/
@media only screen and (min-width: 600px ) {
	#banner { height: 35vh; min-height: 220px; padding-top: 0 }
	.flex-2-4 { display: -ms-flexbox; -ms-flex-flow : wrap; display: flex; flex-wrap: wrap; max-width: 1400px; }
	.flex-2-4 .col { width: 49%; }
	
	.flex-2-3 { display: -ms-flexbox; -ms-flex-flow : wrap;  display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto}
	.flex-2-3 .col { width: 49%; }
	
	nav.topmenu { height: auto; max-height:auto; overflow: visible; }
	
	nav.topmenu ul { display: -ms-flexbox; -ms-flex-pack : end; display: flex; justify-content: flex-end; padding-left: 0; padding-right: 0; padding-top: 1em; margin-top: 0; background: white; }
	.landing-page nav.topmenu ul { background: none; } 
	
	nav.topmenu ul li {  border-bottom:0; list-style-type:none; margin-left: 1em; text-transform: uppercase; font-size: 80%; min-width: 105px;  }
	.landing-page nav.topmenu ul li { color: white; }
	
	nav.topmenu ul li a { text-decoration: none; display: block }
	.landing-page nav.topmenu ul li a { color: white;  }
	
	nav.topmenu .hassub { position: relative; }
	
	nav.topmenu .hassub ul { flex-direction: column; width: auto; height: auto; max-height: 0; overflow: hidden; padding-top:0; background: dimgray; position: absolute; padding-left: 0; transition: all 1s }
	nav.topmenu.open .hassub ul{ max-height:800px;}
	
	nav.topmenu .hassub:before { content: " ▶ "; padding-right: 1em }
	
	nav.topmenu .hassub ul li { font-size: 90%; color: white; padding-top: 1em;}
	nav.topmenu .hassub ul li a { display: block; color: white; padding-top: 1em; }
	nav.topmenu .hassub ul li:last-child { padding-bottom: 1em;}
	nav.topmenu .hassub ul li:last-child a { padding-bottom: 1em; }
	
	/** Auf großen Monitoren dreht order die Reihenfolge im Banner: Oben Navigation, darunter der Header.**/
	.flex-column { 
		display: -ms-flexbox; 
		-ms-flex-direction: column; display: flex; flex-direction: column; }

	body:not(.landing-page) ul.mainmenu { background: white; }
	header { -ms-flex-order:2; order: 2 }
	nav.topmenu {-ms-flex-order:1;}
}

@media only screen and (min-width: 980px ) {	
	.flex-2-3 .col { width:32%; }
	
	.flex-2 { display: -ms-flexbox; -ms-flex-pack : distribute; display: flex; justify-content: space-around; max-width: 1260px; margin-left: auto; margin-right: auto; }
	.flex-2 main { width: 60%;}
	.flex-2 #sidebar { width: 30%}
	
	.sidebar-left .flex-2 #sidebar { 
		-ms-flex-order:1;
		order: 1;
	}
	.sidebar-left .flex-2 main { 
		-ms-flex-order:2;
		order: 2;
	}
	
	.no-sidebar .flex-2 { flex-direction: column; }
	.no-sidebar .flex-2 main { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 4em; padding-right: 4em; }
	.no-sidebar .flex-2 #sidebar { width: 60%; max-width: 920px; margin-left: auto; margin-right: auto; margin-top: 2em; padding-left: 4em; padding-right: 4em;}
	.no-sidebar .flex-2 #sidebar .small { display: flex; justify-content: space-between }
	.no-sidebar .flex-2 #sidebar .small .widget { width: 49% }
	
	nav.topmenu ul li { font-size: 100%; min-width: 150px;}

	#banner .site-title { font-size: 2.5vw; margin-top: 5vh}
	#banner .slogan { font-size: 1.5vw }
}

a {
	transition: all 0.3s ease-in;
}

a.eins {
   background-color: #FFCC66;
   color:            #000000;
}

lc-image-wrapper{
	max-width: 90%;
	height: auto;
	position: ralative;
	display: block;
	margin: 0 auto;
}
lc-image-wrapper img{
	width: 100% !importeant;
	height: auto !importeant;
	display: block;
}

@media only screen and (min-width: 1260px ) {	
	.flex-2-4 .col { width: 24%; }
}