/** Allgemeine Stile **/
html {
	scroll-behavior: smooth;
}
body { 
	margin: 0;
	font: 1.1em/1.5 -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif; 
	background: #fefefe; 
	font-weight: 300
}
img { width: 100%; height: auto}
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
p, li { color: #777; }

table { border-collapse: collapse;}
td, th { padding: 3px 6px; border: 1px solid silver;}
td[colspan] {
	text-align:center;
}

td[rowspan] {
	vertical-align:middle;
}

input#hamburg {display:none}


/** 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}

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



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

/** CSS Slideshow unter dem Seitenkopf 
    Ohne Javascript, eine Beschreibung auf https://www.mediaevent.de/tutorial/keyframes-animation-timeline.html **/

#slider {
   background: #fff;
   border: 10px solid #e7e7e7;
   box-sizing:border-box;
   height: 370px;
   width: 90%;
   max-width: 800px;
   margin: 40px auto 0;
   overflow: hidden;
   position: relative;
}

#slider figure {
   width: 680px;  /* Breite des Bildes */
   height: 360px; /* Höhe des Bildes */
   position: absolute;
   margin: 0;
   bottom: 360px; /* Originalposition - Nicht im sichtbaren Ausschnitt */
   left: calc(50% - 360px); /* Setzt Bild in die Mitte des sichtbaren Ausschnitts */
}

#slider .animate1 {
   animation: cycle1 25s linear infinite;
}

#slider .animate2 {
   animation: cycle2 25s linear infinite;
}

#slider .animate3 {
   animation: cycle3 25s linear infinite;
}

#slider .animate4 {
   animation: cycle4 25s linear infinite;
}

#slider .animate5 {
   animation: cycle5 25s linear infinite;
}

/** 5 Bilder jeweils 5 Sekunden sichtbar: 25 Sekunden für die gesamte Animation **/
@keyframes cycle1 {
   0%  { top: 0px; } /* Am Anfang der Slideshow ist das erste Bild sichtbar */
   4%  { top: 0px; } /* Bild steht noch auf der Startposition */
   16% { top: 0px; opacity:1; z-index:0; } /* Von 4% bis 16 % ist das Bild für 3 Sekunden sichtbar */
   20% { top: -325px; opacity: 0; z-index: 0; } /* Von 16% bis 20% = 1 Sekunde für Slide Out */
   21% { top: 325px; opacity: 0; z-index: -1; } /* Zurück auf die Originalposition */
   92% { top: 325px; opacity: 0; z-index: 0; }
   96% { top: 325px; opacity: 0; } /* Von 96% bis 100% = 1 Sekunde für Slide In */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycle2 {
   0%  { top: 325px; opacity: 0; } /* Originalposition außer Sicht */
   16% { top: 325px; opacity: 0; }/* Beginnt mit der Bewegung */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* Von 20% bis 24% = 1 Sekunde für Slide In */
   36% { top: 0px; opacity: 1; z-index: 0; }   /* Von 24% bis 36 % = Bild für 3 Sekunden sichtbar */
   40% { top: -325px; opacity: 0; z-index: 0; } /* Von 36% bis 40% = 1 Sekunde für Slide Out */
   41% { top: 325px; opacity: 0; z-index: -1; }   /* Zurück auf die Originalposition */
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle3 {
   0%  { top: 325px; opacity: 0; }
   36% { top: 325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: -325px; opacity: 0; z-index: 0; }
   61% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle4 {
   0%  { top: 325px; opacity: 0; }
   56% { top: 325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: -325px; opacity: 0; z-index: 0; }
   81% { top: 325px; opacity: 0; z-index: -1; }
   100%{ top: 325px; opacity: 0; z-index: -1; }
}

@keyframes cycle5 {
   0%  { top: 325px; opacity: 0; }
   76% { top: 325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: -325px; opacity: 0; z-index: 0; }
}

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

@keyframes fullexpand {
   /* Anfang: Fortschrittsbalken steht ist nicht sichtbar */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* Fortschrittsbalken bereit zum Start */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* Fortschrittsbalken läuft 3 Sekunden an */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* Fortschrittsbalken hat Ende erreicht */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* Fortschrittsbalken wird unsichtbar und beginnt einen neuen Durchlauf */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

#slider .label {
   background: hsla(0,0%,100%,0.8);
   width: 100%;
   height: 60px;
   padding-top: 10px; 
   box-sizing: border-box;
   position: absolute;
   left: -1000px;
   bottom: 4px;
   padding: 0;
   margin: 0;
   color: dimgray;
   text-align: center;
   font-size: 1.2em;
   box-sizing: border-box;
   transition: left 0.3s ease-in-out;
}

/**
.hover hat ausgedient, denn auf dem Touchscreen ist :hover unzuverlässig 
oder versagt völlig. Anstelle dessen muss jetzt Javascript einspringen.

#slider li:hover .label {
   left: 0px;
}

#slider:hover li,
#slider:hover .progress-bar {
   animation-play-state: paused;
}
**/

#slider figure.toggle .label {
   left: 0px;
}

#slider figure.toggle,
#slider.toggle .progress-bar {
   animation-play-state: paused;
}

/** 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: 1em; padding-bottom: 2em; }
.landing-page main {  }

.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;
}

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

.content article .post {
	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%; 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: #444; padding-top: 2em; padding-bottom: 2em; color: white; }

.svghide { display: none; }

nav.topmenu ul li {
	background-position: 5px 5px;
	background-repeat: no-repeat;
	background-size: contain;
}




/**  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: 719px) {

	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: 0; margin: 0}
	nav.topmenu ul li { 
		list-style-type: none; 
		color: white; 
		border-bottom: 1px dotted white; 
		padding-left: 2em; 
		padding-right: 2em; 
		height: 40px; 
		display: flex; 
		flex-direction: column; 
		justify-content: center; 
	
	}
	nav.topmenu ul li:last-child{border-bottom: 0;}

	nav.topmenu ul li a { color: navy; text-decoration: none; display: block; padding-left: 2rem; }

	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: 720px ) {
	#banner { min-height: 220px; padding-top: 0 }
	.flex-2-4 {
		display: -ms-flexbox; 
		-ms-flex-flow : wrap; 
		display: flex; 
		flex-wrap: wrap; 
		max-width: 1440px;
		justify-content: space-between;
	}
	
	.flex-2-4 .col { 
		width: 49%;
		margin-bottom: 1rem;
	}
	
	.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;
		flex-wrap: wrap;
		padding-left: 0; 
		padding-right: 0; 
		margin-top: 0;
		list-style:none;
		max-width:1440px;
		margin-left:auto;
		margin-right:auto;
	}
	.landing-page nav.topmenu ul { background: none; } 
	
	nav.topmenu ul li {  
		width: 33.333333%;
		box-sizing: border-box;
	}

	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: 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: 1360px) {
	nav.topmenu ul li {  
		width: 16.666666%;
		height: 140px;
	}
}

@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-between; 
		max-width: 1440px; 
		margin-left: auto; 
		margin-right: auto;
	}

	.flex-2 main { width: 66%}
	.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;}
	#banner .slogan { font-size: 1.5vw }
}

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

@media (prefers-color-scheme: dark) {
	body {
		background-color: #000;
	}
	
	header {
		color: #eee;
	}
	
	.carousell,
	.teaser {
		background-color: #333;
		color: #ddd;
	}
	
	.carousell .col {
		background-color: #ddd;
	}
	
	.teaser {
		border-top: 4px solid #999;
		border-bottom: 4px solid #999;
	}
	.teaser p {
		color: #ddd;
	}
	
	.col * {
		color: #222;
	}
	
	.flex-2-3 {
		background-color: #222;
	}
	
	
	
	main, 
	#sidebar {
		background-color: #222;
		color: #eee;
	}
	
	.landing-page main {
		background-color: #222;
	}
	
	main p,
	main li,
	#sidebar * {
		color: #eee;
	}
	
	th {
		font-weight: 400;
	}
	tr:nth-child(odd) {
		background-color: #333;
	}
	
	tr:nth-child(even) {
		background-color: #666;
	}
	
	
}


figure {margin-left: 0;}
.columns {
	display: flex;
	gap: 18px;
}

@media (max-width: 420px) {
	.column { width: 48%}
}

@media (max-width: 720px) {
	.column { width: 23%}
}